/* WARHAMMER FANTASY ROLEPLAY 4th EDITION CHARACTER SHEET CSS */ /* Authors: Arioch1973, Alondaar, Havoc, Oxycutor, Realitor, Medieve, Zedafty */ /* Version 1.8 */ /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # HTML Reset */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ div, span, label, h1, h2, h3, h4, h5, h6, p, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; box-sizing: border-box; } div { width: 100%; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Character Sheet */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .charsheet { min-width: 852px; /* 860px - 8px for scrollbar */ padding: 10px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 0; color: #000; text-align: center; border: 30px solid transparent; border-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/border-sheet.png") 30 round; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-sheet.jpg"); background-size: 100%; box-sizing: border-box; } .charsheet > div { position: relative; } .sheet-logo { margin-bottom: 20px; } .sheet-logo img { max-height: 75px; } .sheet-footer { height: 20px; } .sheet-version { float: right; display: inline-block; width: auto; padding-right: 4px; border: 2px solid #a85; border-radius: 3px; background-color: #cb8; } .sheet-version i, .sheet-version span { line-height: 16px; } .sheet-version i { padding: 2px 3px; font-family: "Pictos"; font-size: 12px; font-style: normal; background-color: #a85; } .sheet-version span { padding-left: 2px; font-size: 12px; font-weight: bold; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Selection */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ i::selection, h4::selection, td::selection, div::selection, span::selection, table::selection, label::selection, input::selection, select::selection, textarea::selection { color: #000; background-color: #fc3; text-shadow: none; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Mouse Cursors */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ /* Normal Cursor */ label, .charsheet { cursor: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/cursor-normal.png") 11 11, auto; } /* Write Cursor */ textarea, input[type=number], .sheet-wrapper input[type=text] { cursor: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/cursor-write.png") 11 11, auto; } /* Focus Cursor */ button:hover, input[type=checkbox]:hover, label.sheet-tab, input.sheet-tab, .sheet-has-title:hover, .sheet-wrapper select:hover, .sheet-wrapper button[type="roll"]:hover { cursor: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/cursor-focus.png") 11 11, auto; } /* Disabled Cursor */ .sheet-wrapper input[readonly], .sheet-wrapper select[readonly], .sheet-wrapper textarea[readonly], .sheet-wrapper input[disabled], .sheet-wrapper select[disabled], .sheet-wrapper textarea[disabled] { cursor: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/cursor-disabled.png") 11 11, auto; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Toggles */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ input[type="checkbox"].sheet-toggle, input[type="checkbox"].sheet-toggle + span, input[type="checkbox"].sheet-toggle + span + label { position: absolute; left: 0; } input[type="checkbox"].sheet-toggle-1, input[type="checkbox"].sheet-toggle-1 + span, input[type="checkbox"].sheet-toggle-1 + span + label {top: 5px;} input[type="checkbox"].sheet-toggle-2, input[type="checkbox"].sheet-toggle-2 + span, input[type="checkbox"].sheet-toggle-2 + span + label {top: 30px;} input[type="checkbox"].sheet-toggle-3, input[type="checkbox"].sheet-toggle-3 + span, input[type="checkbox"].sheet-toggle-3 + span + label {top: 55px;} input[type="checkbox"].sheet-toggle { width: 20px; height: 20px; margin: 0; z-index: 2; } input[type="checkbox"].sheet-toggle + span { background-color: transparent !important; z-index: 1; } input[type="checkbox"].sheet-toggle + span, input[type="checkbox"].sheet-toggle + span::before { margin: 0; } input[type="checkbox"].sheet-toggle + span + label { display: inline-block; width: auto; padding-left: 24px; padding-right: 4px; font-size: 14px; font-weight: bold; user-select: none; } input[type="checkbox"].sheet-toggle:hover + span + label, input[type="checkbox"].sheet-toggle:focus + span + label { background-color: rgba(255,240,32,.375); } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Containers */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper .sheet-col, .sheet-wrapper .sheet-table { font-size: 0; } .sheet-wrapper .sheet-col { margin-bottom: 20px; } .sheet-wrapper .sheet-row { position: relative; } .sheet-wrapper .sheet-row.sheet-headline { margin: 6px 0; padding: 4px; background-color: #a39a8c88; } .sheet-wrapper .sheet-row.sheet-headline input { background-color: #ffe3; } .sheet-wrapper .sheet-table, .sheet-wrapper .sheet-row > div:not(.sheet-desc) { display: inline-block; vertical-align: top; } .sheet-wrapper .sheet-row > div:not(.sheet-desc) { height: 24px; } .sheet-wrapper .sheet-row > .sheet-spacer { height: 24px; vertical-align: top; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Headers */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper h4 { margin-bottom: 10px; font-size: 14px; font-weight: bold; font-family: inherit; text-transform: uppercase; text-align: center; } .sheet-wrapper .sheet-table-header { line-height: 24px; } .sheet-wrapper .sheet-table-header h4 { color: #b29a6b; border-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/border-header-box.jpg"); border-image-slice: 3; background-color: #2f3338; background: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-dark.jpg"); } .sheet-wrapper .sheet-table-wrapper h4 { margin-bottom: 0; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Inputs */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper input::-webkit-outer-spin-button, .sheet-wrapper input::-webkit-inner-spin-button { background-image: transparent; -webkit-appearance: none; } .sheet-wrapper select, .sheet-wrapper textarea, .sheet-wrapper input[type="text"], .sheet-wrapper input[type="number"] { display: inline-block; width: 100%; height: 24px; padding: 2px; line-height: 16px; color: #000; font-size: 14px; font-family: inherit; font-weight: normal; text-indent: 0; text-transform: none; text-shadow: none; word-spacing: normal; letter-spacing: normal; vertical-align: top; background-color: transparent; -webkit-writing-mode: horizontal-tb; } .sheet-wrapper select, .sheet-wrapper input[type="text"], .sheet-wrapper input[type="number"] { color: #000; border-bottom: 1px solid #0002; border-top: none; border-left: none; border-right: none; border-radius: 0; -webkit-user-select: text; -webkit-rtl-ordering: logical; } .sheet-wrapper textarea { margin: 5px 0 10px; text-align: start; word-spacing: normal; border: 1px solid #0004; border-radius: 5px; background-color: #a39a8c44; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-text.png"); background-repeat: no-repeat; background-size: cover; box-sizing: border-box; resize: vertical; scrollbar-width: thin; scrollbar-color: #90a4ae #cfd8dc; } .sheet-wrapper select, .sheet-wrapper input[type="number"] { text-align: center; } .sheet-wrapper input[type="text"] { text-align: left; } .sheet-wrapper input[type="number"] { -moz-appearance: textfield; } .sheet-wrapper input:not([type="checkbox"]) { -webkit-appearance: textfield; } .sheet-wrapper input[type="checkbox"] { height: 13px; width: 13px; } .sheet-wrapper textarea::placeholder, .sheet-wrapper input[type="text"]::placeholder { color: #543; opacity: .625; } .sheet-wrapper textarea:hover, .sheet-wrapper textarea:focus, .sheet-wrapper input[type="text"]:hover, .sheet-wrapper input[type="text"]:focus, .sheet-wrapper input[type="number"]:hover, .sheet-wrapper input[type="number"]:focus { background-color: #ffe4; } .sheet-wrapper textarea:active, .sheet-wrapper input[type="text"]:active, .sheet-wrapper input[type="number"]:active { background-color: #ffe5; } .sheet-wrapper button:focus, .sheet-wrapper select:focus, .sheet-wrapper textarea:focus, .sheet-wrapper input[type="text"]:focus, .sheet-wrapper input[type="number"]:focus { outline: 0; } .sheet-wrapper input[readonly], .sheet-wrapper select[readonly], .sheet-wrapper textarea[readonly], .sheet-wrapper input[disabled], .sheet-wrapper select[disabled], .sheet-wrapper textarea[disabled] { border: 0; background-color: transparent !important; } .sheet-wrapper select { margin: 0; padding: 0; text-align: center; text-align-last: center; border: 3px solid transparent; border-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/border-header-box.jpg"); border-image-slice: 3; background-color: #a39a8c; appearance: none; -webkit-appearance: none; } .sheet-wrapper select:hover, .sheet-wrapper select:focus { background-color: #bcb3a3; } .sheet-wrapper label { display: inline-block; width: 100%; padding: 5px .25em; line-height: 1; font-size: 14px; font-weight: 600; text-align: left; vertical-align: top; } .sheet-wrapper label.sheet-small { padding: 6px .125em; font-size: 12px; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Checkboxes */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ input[type="checkbox"] { position: relative; left: 10px; width: 16px; height: 16px; margin: -6px; opacity: 0; z-index: 1; } input[type="checkbox"] + span { display: inline-block; width: 20px; height: 20px; margin: 2px 0; border-radius: 4px; } input[type="checkbox"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 14px; text-align: center; vertical-align: middle; font-size: 10px; border: none; border-radius: 3px; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/checkbox.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; opacity: 1; } input[type="checkbox"]:checked + span::before { content: ""; border: none; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/checkbox-mark.png"); background-size: 100%; background-repeat: repeat; background-position: center; } input[type="checkbox"]:hover + span, input[type="checkbox"]:focus + span { background-color: rgba(255,240,32,.375); } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Buttons */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper button[type="roll"] { position: relative; display: inline-block; width: 100%; height: 24px; margin: 0; padding: 0; font-size: 14px; font-weight: 400; white-space: nowrap; border: 0; border-radius: 4px; background-color: transparent; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/button-box.jpg"); background-size: auto 24px; background-repeat: repeat-x; box-shadow: none; user-select: none; } .sheet-wrapper button[type="roll"]::before, .sheet-wrapper button[type="roll"]::after { content: ""; display: inline-block; position: absolute; width: 10px; height: 24px; top: 0; background-size: 10px 24px; background-repeat: no-repeat; } .sheet-wrapper button[type="roll"]::before { left: 0; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/button-boxl.jpg"); background-size: 10px 24px; } .sheet-wrapper button[type="roll"]::after { right: 0; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/button-boxr.jpg"); background-size: 10px 24px; } .sheet-wrapper button[type="roll"] span { position: absolute; top: 0; left: 0; width: 100%; height: inherit; line-height: 24px; color: #b29a6b; text-align: center; text-shadow: 0px 1px #0008; font-size: 13px; font-weight: bold; color: #b96; border-radius: none; background: transparent; box-shadow: none; transition: none; z-index: 1; } .sheet-wrapper button[type="roll"]:hover span { color: #fff; } .sheet-wrapper button[type="roll"]:focus span { color: #fc3; } .sheet-wrapper button { height: 24px; padding: 0 6px; line-height: 1; font-size: 13px; font-weight: bold; text-align: center; background-color: #a39a8c; background-image: none; border: 1px solid #0006; border-radius: 5px; box-shadow: 0 1px 0 #fff8 inset, 0 1px 1px #0006; transition: none; box-sizing: border-box; } .sheet-wrapper button.sheet-small { font-family: "Pictos"; font-size: 12px; width: 18px; height: 18px; margin: 3px 0; padding: 0; } .sheet-wrapper button:focus { background-color: #bcb3a3; } .sheet-wrapper button:hover { color: #fff; border-width: 1px; background-image: url ("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/button-hover.jpg"); background-position: 0 center; background-repeat: no-repeat; background-size: 100% 100%; } .sheet-wrapper button:hover::before, .sheet-wrapper button:hover::after { display: none; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Repeating Fields Buttons */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper .repcontainer, .sheet-wrapper .repcontrol, .sheet-wrapper .repitem { position: relative; } .sheet-wrapper .repcontrol { height: 30px; margin-top: 2px; } .sheet-wrapper .repitem .itemcontrol { z-index: 2; } .sheet-wrapper .repcontrol_add, .sheet-wrapper .repcontrol_edit, .sheet-wrapper .repcontrol_del, .sheet-wrapper .repcontrol_move { display: inline-block; position: absolute; color: #000; background: #a39a8c; } .sheet-wrapper .repcontrol_add, .sheet-wrapper .repcontrol_edit, .sheet-wrapper .repcontrol_del { float: none; } .sheet-wrapper .repcontrol_add, .sheet-wrapper .repcontrol_edit { top: 3px; } .sheet-wrapper .repcontrol_add:hover, .sheet-wrapper .repcontrol_edit:hover { color: #000; } .sheet-wrapper .repcontrol_del, .sheet-wrapper .repcontrol_move { margin: 0; padding: 0; top: 0; text-shadow: none; } .sheet-wrapper .repcontrol_del { width: 20px; height: 20px; color: #fff; text-shadow: 0 1px 1px black; background-color: rgb(240,48,48); box-sizing: border-box; z-index: 2; } .sheet-wrapper .repcontrol_move { width: 100%; height: 100%; font-size: 24px; font-weight: bold; border: 0; background-color: rgba(255,255,0,.125); z-index: 1; } .sheet-wrapper .repcontrol_move:hover { background-color: rgba(255,224,0,.5); } .sheet-wrapper .repcontrol_add { right: 3px; } .sheet-wrapper .repcontrol_edit { left: 3px; } .sheet-wrapper .repcontrol_move { left: 0; } .sheet-wrapper .repcontrol_del { top: 2px; left: 2px; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Characteristics */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper .sheet-characteristics button[type="roll"] span, .sheet-wrapper .sheet-characteristics button[type="roll"] input.sheet-charMain { width: 99%; height: 25px; line-height: 25px; font-size: 16px; font-weight: bold; font-family: inherit; color: #fff; text-align: center; vertical-align: center; border: none; border-radius: none; background: none; box-shadow: none; transition: none; } .sheet-wrapper .sheet-characteristics button[type="roll"]:hover span, .sheet-wrapper .sheet-characteristics button[type="roll"]:hover input.sheet-charMain { color: #fff; border: none; border-color: #daa520; border-radius: 5px; background-color: #daa520; } .sheet-wrapper .sheet-characteristics button[type="roll"] { width: 100%; margin: auto; font-family: inherit; text-align: center; border: none; background-color: transparent; } .sheet-wrapper .sheet-characteristics select { display: inline-block; width: 100%; font-weight: bold; text-align: center; border: 0; background-color: transparent; } .sheet-wrapper .sheet-characteristics input.sheet-charMain { display: block; width: 70%; height: 65px; margin: auto; font-weight: bolder; font-family: inherit; font-size: 3em; text-align: center; border: 1px solid gray; background-color: transparent; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Tables */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper table { width: 100%; font-size: 14px; } .sheet-wrapper table td, .sheet-wrapper table th { vertical-align: middle; } .sheet-wrapper table td { line-height: 1; } .sheet-wrapper table th label { text-align: center; } .sheet-wrapper .sheet-table-wrapper { display: inline-block; padding: 2px; border: 2px solid #515962; border-radius: 5px; background-image: linear-gradient(-45deg, #4c382b, #bc985e, #cfa767, #ffd383); overflow: hidden; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Single and Repeat Tables */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-wrapper .sheet-table-repeat .sheet-row { height: 24px; } .sheet-wrapper .sheet-table-single tr:nth-child(odd), .sheet-wrapper .sheet-table-repeat > .sheet-row:nth-child(odd), .sheet-wrapper .sheet-table-repeat .repitem:nth-child(odd) .sheet-row { background-image: linear-gradient(#96898d, #9d9698, #96898d); } .sheet-wrapper .sheet-table-single tr:nth-child(even), .sheet-wrapper .sheet-table-repeat > .sheet-row:nth-child(even), .sheet-wrapper .sheet-table-repeat .repitem:nth-child(even) .sheet-row { background-image: linear-gradient(#7b7d82, #84868d ,#7b7d82); } .sheet-wrapper .sheet-table-single th:nth-child(1), .sheet-wrapper .sheet-table-single td:nth-child(1), .sheet-wrapper .sheet-table-repeat .sheet-row div:nth-child(1) { background-image: linear-gradient(to right, #c4b8aa 10%, transparent); } .sheet-wrapper .sheet-table-single td:nth-child(1), .sheet-wrapper .sheet-table-repeat .sheet-row div:nth-child(1) input[type="text"] { padding-left: .25em; } .sheet-wrapper .sheet-table-single input[type="text"], .sheet-wrapper .sheet-table-single input[type="number"], .sheet-wrapper .sheet-table-repeat input[type="text"], .sheet-wrapper .sheet-table-repeat input[type="number"] { border-bottom: 0; } .sheet-wrapper .sheet-table-repeat .repcontrol { background-color: #2f3338; background: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-dark.jpg"); } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Descriptions */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ input.sheet-desc[type="checkbox"], input.sheet-desc[type="checkbox"] + span { position: absolute; width: 24px; height: 24px; top: 0; right: calc(2.5% - 12px); } input.sheet-desc.sheet-wide[type="checkbox"], input.sheet-desc.sheet-wide[type="checkbox"] + span { right: calc(5% - 12px); } input.sheet-desc[type="checkbox"] { left: auto; right: 0; margin: 0; opacity: 0; z-index: 1; } input.sheet-desc[type="checkbox"] + span { display: inline-block; line-height: 14px; text-align: center; } input.sheet-desc[type="checkbox"] + span::before { content: ""; margin: 2px; background: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/skull-yellow-full.png"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center; } input.sheet-desc[type="checkbox"]:checked + span::before { content: ""; background: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/skull-green.png"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center; } input.sheet-desc[type="checkbox"]:hover + span::before { content: ""; display: inline-block; background: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/skull-yellow.png"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center; } div.sheet-desc { display: none; width: 100%; } input.sheet-desc:checked ~ div.sheet-desc { display: block; } div.sheet-desc textarea { min-height: 50px; margin-top: 0; border: 0; border-radius: 0; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Armor Table */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-armour-points { position: relative; width: 300px; height: 340px; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-armour.png"); background-size: 180px 320px; background-repeat: no-repeat; background-position: 85px 20px; } .sheet-armour-points > div { display: inline-block; position: absolute; width: 70px; } .sheet-armour-points span { display: block; height: 14px; line-height: 14px; font-size: 12px; } .sheet-armour-points input[type="number"] { width: 50px; height: 50px; font-size: 24px; border: 1px solid #0004; background-color: rgba(255,240,224,.1875) !important; } .sheet-shield input[type="number"] { border: 0; background-color: transparent !important; } .sheet-head {top: 5px; left: 115px;} .sheet-body {top: 110px; left: 115px;} .sheet-right-arm {top: 110px; left: 45px;} .sheet-left-arm {top: 110px; left: 185px;} .sheet-right-leg {top: 220px; left: 90px;} .sheet-left-leg {top: 220px; left: 160px;} .sheet-shield { top: 234px; left: 20px; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-shield.png"); background-size: 50px; background-repeat: no-repeat; background-position: center 2px; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Colors */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ h4, .sheet-wfrp label { color: #332; opacity: .875; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Aligning */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-center { text-align: center !important; } .sheet-left { text-align: left !important; } .sheet-right { text-align: right !important; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Tabs */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ label.sheet-tab, input.sheet-tab { position: relative; } label.sheet-tab { display: inline-block; width: 18%; height: 36px; margin-left: -18.5%; margin-bottom: 0; padding: 0; line-height: 30px; font-size: 14px; font-weight: bold; color: #000; text-align: center; vertical-align: middle; border: 3px solid transparent; border-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/border-header-box.jpg"); border-image-slice: 3; background: #a39a8c; appearance: none; transition: background-color .25s; box-shadow: 0 0 2px 1px rgba(0,0,0,.25) inset; box-sizing: border-box; } input.sheet-tab { opacity: 0; width: 19%; height: 42px; z-index: 1; } label.sheet-tab + input.sheet-tab { margin-left: 1%; } input.sheet-tab:hover + label, input.sheet-tab:focus + label { background-color: #bcb3a3; } input.sheet-tab:focus + label, input.sheet-tab:checked + label { text-shadow: 0 1px 1px rgba(0,0,0, .5); } input.sheet-tab:checked + label { border-color: #000; background-image: url ("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/button-hover.jpg"); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; color: #fff; } input.sheet-tab:focus + label { color: #fc3; } div.sheet-tab-content, input.sheet-tabAll:checked ~ .sheet-tab { display: none; } input.sheet-tabAll:not(:checked) ~ div.sheet-tab-content { margin-top: 20px; } input.sheet-tabAll:checked ~ div.sheet-tabMain, input.sheet-tabAll:checked ~ div.sheet-tabInformation, input.sheet-tabAll:checked ~ div.sheet-tabGearMagic, input.sheet-tabAll:checked ~ div.sheet-tabSkillsTalents, input.sheet-tabAll:checked ~ div.sheet-tabExperience, input.sheet-tabMain:checked ~ div.sheet-tabMain, input.sheet-tabInformation:checked ~ div.sheet-tabInformation, input.sheet-tabGearMagic:checked ~ div.sheet-tabGearMagic, input.sheet-tabSkillsTalents:checked ~ div.sheet-tabSkillsTalents, input.sheet-tabExperience:checked ~ div.sheet-tabExperience { display: block; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # Roll Template */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ .sheet-rolltemplate-wfrp4 { position: relative; left: -20px; } .sheet-rolltemplate-wfrp4 table { width: 100%; padding: 5px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color: #cebbb3; border: 10px solid transparent; border-collapse: separate; border-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/border-large-box.jpg") 10 round; border-image-width: 10px; background-image: url("https://raw.githubusercontent.com/zedafty/wfrp4/master/images/background-dark.jpg"); box-sizing: border-box; } .sheet-rolltemplate-wfrp4 table a { color: #ffcc99; } .sheet-rolltemplate-wfrp4 .userscript-tcat { color: #000; } .sheet-rolltemplate-wfrp4 .sheet-rollcharacter { line-height: 1em; font-size: 1.5em; color: #fff; } .sheet-rolltemplate-wfrp4 .sheet-rolltitle { line-height: 1.2em; font-size: 1.1875em; font-style: italic; } .sheet-rolltemplate-wfrp4 .sheet-rolltemplate .inlinerollresult, .sheet-rolltemplate-wfrp4 .sheet-rolltemplate .inlinerollresult.fullcrit, .sheet-rolltemplate-wfrp4 .sheet-rolltemplate .inlinerollresult.fullfail, .sheet-rolltemplate-wfrp4 .sheet-rolltemplate .inlinerollresult.importantroll { display: inline; min-width: auto; padding: 0; text-align: left; font-weight: normal; font-style: normal; color: inherit; border: 0; background-color: transparent; } .sheet-rolltemplate-wfrp4 .sheet-roll-result .inlinerollresult { display: inline-block; min-width: 1.5em; text-align: center; font-weight: bold; border: 2px solid #433; background-color: #000; } .sheet-rolltemplate-wfrp4 .sheet-roll-result .inlinerollresult.fullcrit { border-color: #3b1; } .sheet-rolltemplate-wfrp4 .sheet-roll-result .inlinerollresult.fullfail, .sheet-rolltemplate-wfrp4 .sheet-critical-failure ~ .sheet-roll-result .inlinerollresult.fullcrit { border-color: #c32; } .sheet-rolltemplate-wfrp4 .sheet-roll-result .inlinerollresult.importantroll { border-color: #433; } .sheet-rolltemplate-wfrp4 .sheet-label { font-weight: bold; } .sheet-rolltemplate-wfrp4 .sheet-label::after { content: ":"; } .sheet-rolltemplate-wfrp4 .sheet-small { font-size: .875em; } .sheet-rolltemplate-wfrp4 .sheet-positive { color: #3a2; } .sheet-rolltemplate-wfrp4 .sheet-negative { color: #c61; } .sheet-rolltemplate-wfrp4 .sheet-dice-result { margin-top: .25em; margin-bottom: .5em; } .sheet-rolltemplate-wfrp4 .sheet-description { margin-top: .5em; font-style: italic; } /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* # DEBUG */ /* -------------------------------------------------------------------------- */ /* ========================================================================== */ /* .sheet-wrapper .sheet-col {background-color: rgba(255,0,0,.25);} .sheet-wrapper .sheet-row > .sheet-spacer {background-color: rgba(0,255,255,.25);} .sheet-wrapper label {background-color: rgba(0,255,0,.25);} .sheet-wrapper table td, .sheet-wrapper table th {border: 1px solid red;} .sheet-armour-points > div {background-color: rgba(255,255,0,.25);} */