/*============= TABS =============*/ /*----------- Tabs Setup -------------*/ div.sheet-core-content { display: none; width:840px; } .charsheet div[class^="sheet-section"] { /*visibility: hidden; opacity: 0; max-height:0; overflow: hidden;*/ display: none; } .charsheet { background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/character_sheet_background.jpg'); background-size:100%; background-repeat: repeat-y; width:840px; } .charsheet input.sheet-tab1:checked ~ div.sheet-section-1, .charsheet input.sheet-tab2:checked ~ div.sheet-section-2, .charsheet input.sheet-tab3:checked ~ div.sheet-section-3, .charsheet input.sheet-tab4:checked ~ div.sheet-section-4, .charsheet input.sheet-tab5:checked ~ div.sheet-section-5, .charsheet input.sheet-tab6:checked ~ div.sheet-section-6, .charsheet input.sheet-tab7:checked ~ div.sheet-section-7, .charsheet input.sheet-tab8:checked ~ div.sheet-section-8, .charsheet input.sheet-tab9:checked ~ div.sheet-section-9 { /*max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s; overflow: auto;*/ display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { /*max-height: 999999px; visibility: visible; opacity: 1; transition: opacity 0.5s linear 0s;*/ display: block; } .charsheet input.sheet-tab { width: 95px; height: 40px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; margin-bottom:10px; } .charsheet span.sheet-tab { text-align: center; display: inline-block; font-size: 13px; background: white; color: black; font-weight: bold; border-radius: 4px; width: 100px; /*originally 87px*/ height: 40px; /*originally 20px*/ cursor: pointer; position: relative; vertical-align: middle; margin-left: -101px;/*originally 91px*/ text-shadow: none; border:2px solid black; } .charsheet input.sheet-tab1:checked + span.sheet-tab1, .charsheet input.sheet-tab2:checked + span.sheet-tab2, .charsheet input.sheet-tab3:checked + span.sheet-tab3, .charsheet input.sheet-tab4:checked + span.sheet-tab4, .charsheet input.sheet-tab5:checked + span.sheet-tab5, .charsheet input.sheet-tab6:checked + span.sheet-tab6, .charsheet input.sheet-tab7:checked + span.sheet-tab7, .charsheet input.sheet-tab8:checked + span.sheet-tab8, .charsheet input.sheet-tab9:checked + span.sheet-tab9, .charsheet input.sheet-tab10:checked + span.sheet-tab10, .charsheet input.sheet-tab99:checked + span.sheet-tab99 { background: black; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border:2px solid white; } /*----------- End Tab Setup -----------*/ .sheet-indent { margin-left: 25px; } h4.sheet-inline { display: inline; margin-right: 10px; margin-left: 10px; } .charsheet label { display: inline-block; width: 75px; text-align: right; padding-bottom: 0px; } .charsheet input { display: inline-block; width: 150px; } .charsheet { background-color: white; } .charsheet select { width: 42px; margin-bottom:0; } .charsheet textarea { resize:vertical; width: 90%; height: 80px; } .charsheet { font-family: 'LinikSansRegular'; text-shadow: 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white, 0em 0em 0.3em white; } @font-face { font-family: 'LinikSansRegular'; src: url('https://fontlibrary.org//face/linik-sans/assets/fonts/linik-sans/0f381b8323be1371bdd509a04d6900f3/50bbb49ec1dc2e38968280b494dac071/LinikSansRegular.ttf'); font-weight: normal; font-style: normal; } .sheet-shifter[type="number"] { background:transparent; text-align:center; box-shadow:none; border:none; color:black; text-shadow:0px 0px 2px white,0px 0px 2px white,0px 0px 2px white; } /*-----Sheet Table-----*/ .sheet-table { margin-left:auto; margin-right:auto; } /*-----End of Sheet Table-----*/ .sheet-formsbanner { background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/five_forms.jpg') no-repeat; background-size:100%; } .sheet-shifter { color:white; text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black; font-size:1.2em; opacity: 1; } .sheet-shifter th { color:black; text-shadow: 0px 0px 3px white,0px 0px 3px white,0px 0px 3px white; font-size:1.4em; } th.sheet-gray, td.sheet-gray { background: linear-gradient(rgba(128,128,128,0.5),rgba(128,128,128,0.5)); } .sheet-shifter:active, .sheet-shifter:hover { opacity: 1.0; } .sheet-red { color:red; text-shadow: 0px 0px 3px black,0px 0px 3px black,0px 0px 3px black; font-size:1.4em; } .sheet-smallcaps { font-variant: small-caps; } /*----------- form_select radio -----------*/ input.sheet-form_select[type="radio"] { width: 14px; height: 14px; position: relative; top: 0px; left: 20px; margin-left: 0px; margin-top: -10px; margin-bottom: -10px; margin-right: 0px; cursor: pointer; z-index: 1; opacity: 0; width:70px; box-shadow: 0px 0px 5px blue; } .charsheet input.sheet-form_select + span.sheet-form_select { position: relative; top: 0px; left: -35px; color:black; font-weight:bold; text-shadow:0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white; } .charsheet input.sheet-form_select:checked + span.sheet-form_select { color:white; text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black, 0px 0px 5px red,0px 0px 5px red; } span.sheet-form_select { width:100px; text-align:right; } .charsheet input.sheet-form_select + span.sheet-form_select { width:70px; text-align:right; } /*-----swapping stuff-----*/ div.sheet-block_a { display: inline; } div.sheet-block_b { display: none; } input.sheet-block_switch:checked ~ div.sheet-block_a { display: none; } input.sheet-block_switch:checked ~ div.sheet-block_b { display: inline; } /* -----Health boxes----- */ table.sheet-damagetrack td { margin-bottom: 5px; } div.sheet-healthbox { width: 20px; height: 20px; position: relative; margin-bottom: 10px; } input.sheet-healthbox { margin: 0 0 0 0; opacity: 0; width: 20px; height: 20px; position: absolute; z-index: 1; } span.sheet-healthbox { margin: 0 0 0 0; display: none; } input.sheet-blackdot { z-index: 2; } input.sheet-blackdot:checked + input.sheet-whitedot, input.sheet-whitedot:checked + input.sheet-bashingdot, input.sheet-bashingdot:checked + input.sheet-lethaldot, input.sheet-lethaldot:checked + input.sheet-aggravateddot { z-index: 3; } input.sheet-blackdot:checked ~ span.sheet-blackdot, input.sheet-whitedot:checked ~ span.sheet-whitedot, input.sheet-bashingdot:checked ~ span.sheet-bashingdot, input.sheet-lethaldot:checked ~ span.sheet-lethaldot, input.sheet-aggravateddot:checked ~ span.sheet-aggravateddot { display: inline-block; } .sheet-blackdot { width: 20px; height: 20px; background: black; background-size: 100%; border-radius: 50%; } .sheet-whitedot { width: 15px; height: 15px; background: white; background-size: 100%; border-radius: 50%; border:2px solid black; } .sheet-bashingdot { width: 15px; height: 15px; background: transparent; background-size: 100%; border-radius: 50%; border:2px solid black; color:black; } .sheet-bashingdot:before { font-family: "Candal", fantasy; content:"/"; font-weight: 900; font-size: 18px; margin-left:3px; } .sheet-lethaldot { width: 15px; height: 15px; background: transparent; background-size: 100%; border-radius: 50%; border:2px solid black; color:black; } .sheet-lethaldot:before { font-family: "Candal", fantasy; content:"X"; font-weight: 900; font-size: 18px; margin-left:3px; } .sheet-aggravateddot { width: 15px; height: 15px; background: transparent; background-size: 100%; border-radius: 50%; border:2px solid black; } .sheet-aggravateddot:before { font-family: "Candal", fantasy; content:"X"; font-weight: 900; font-size: 18px; margin-left:3px; color:red; } /*------------Better Checkbox-----------*/ /* Hide actual radio/checkbox */ input[type="checkbox"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin-top: -18px; margin-left: -10px; margin-right: -11px; margin-bottom: 0px; cursor: pointer; z-index: 1; } /* Fake radio/checkbox */ input[type="checkbox"] + span::before { margin-right: 4px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /* Fake checkbox */ input[type="checkbox"] + span::before { content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } input[type="checkbox"]:checked + span::before { content: "✓"; } /*------------Better Checkbox-----------*/ /* Hide actual checkbox */ input.sheet-word[type="checkbox"] { opacity: 0; width: 100px; height: 32px; position: relative; top: 35px; left: 45%; margin-left: auto; margin-right: auto; margin-bottom: 0px; cursor: pointer; z-index: 1; box-shadow: 0px 0px 5px green; } /* Fake checkbox */ input.sheet-word[type="checkbox"] + span::before { display:none; background:transparent; border:none; box-shadow:none; } /* Fake checkbox */ input.sheet-word[type="checkbox"] + span::before { display:none; background:transparent; border:none; box-shadow:none; } input.sheet-word[type="checkbox"]:checked + span::before { display:none; background:transparent; border:none; box-shadow:none; } .sheet-block_switch, .sheet-hidden { display:none; background:transparent; border:none; box-shadow:none; } /*------------End of word Checkbox-----------*/ /*------------Claw Checkbox-----------*/ /* Hide actual checkbox */ input.sheet-claw[type="checkbox"] { opacity: 0; width: 30px; height: 30px; position: relative; top: 0px; left: 30px; margin-top: 0px; margin-left: 00px; margin-right: 0px; margin-bottom: 0px; cursor: pointer; z-index: 1; } /* Fake checkbox */ input.sheet-claw[type="checkbox"] + span::before { background:url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/claw-mark-mid-left.png') no-repeat; background-size:100%; width: 30px; height: 30px; box-shadow:none; border:none; -webkit-filter: drop-shadow(0px 0px 5px red); position: relative; top: 0px; left: 0px; } input.sheet-claw[type="checkbox"]:checked + span::before { background:url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/claw-mark-mid-left.png') no-repeat; background-size:100%; content:""; width: 30px; height: 30px; box-shadow:none; border:none; -webkit-filter: drop-shadow(0px 0px 5px white); } input.sheet-claw:checked ~ div.sheet-body { display: none; } /*-------end of Claw Checkbox-----------*/ /*-----------------------------*/ /*-----------------------------*/ /*-------Start of Radio Button-----------*/ /*-----------------------------*/ /*-----------------------------*/ /*-------Start of sheet-Query-----------*/ div.sheet-Query { position: relative; width: 30px; height: 20px; left:20px; top:5px; margin:-15px; } input.sheet-Query { width: 30px; height: 20px; position: absolute; left:10px; top:0px; z-index: 1; opacity: 0; } span.sheet-Query { margin: 10px 0 0 40px; display: none; position: absolute; left:-40px; top:-10px; width:50px; text-align:center; } input.sheet-no { z-index: 2; } input.sheet-no:checked + input.sheet-yes, input.sheet-yes:checked + input.sheet-no { z-index: 3; } input.sheet-no:checked ~ span.sheet-no, input.sheet-yes:checked ~ span.sheet-yes { display: inline-block; } /*------------Static/Dynamic--*/ input.sheet-Dynamic-switch { width: 30px; height: 20px; position: absolute; z-index: 1; opacity: 0; } span.sheet-Dynamic-switch{ display: none; position: absolute; } textarea.sheet-Dynamic-switch, div[data-groupname="repeating_merits"], div[data-groupname="repeating_flaws"]{ display: none; } div.sheet-Dynamic-switch, div.sheet-dynamic-controls{ display: none; } input.sheet-static { z-index: 2; } input.sheet-static:checked + input.sheet-dynamic, input.sheet-dynamic:checked + input.sheet-static { z-index: 3; } input.sheet-static:checked ~ span.sheet-static, input.sheet-dynamic:checked ~ span.sheet-dynamic, input.sheet-static:checked ~ textarea.sheet-static { display: inline-block; } input.sheet-dynamic:checked ~ div[data-groupname="repeating_merits"], input.sheet-dynamic:checked ~ div[data-groupname="repeating_flaws"] { display: inline; } input.sheet-static:checked ~ div.sheet-static, input.sheet-dynamic:checked ~ div.sheet-dynamic-controls { display: block; } /*------------Forms-----------*/ /* Hide actual normal radio */ input.sheet-normal[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } input.sheet-normal[type="radio"] + span::before { margin-right: 0px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); font-family: 'New Time Roman'; color:black; content: "•"; width: 12px; height: 12px; font-size: 3em; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } /* Hide actual Forms radio */ input.sheet-forms[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* Fake Forms radio */ input.sheet-forms[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* End of Forms radio */ .sheet-center { margin-left:auto; margin-right:auto; text-align:center; } /* -----Remove dot from all radios _after_ selected one----- */ input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before { content: ""; } /*------------empty traits-----------*/ input.sheet-zero[type="radio"]:checked + span::before { opacity: 0; } input.sheet-zero[type="radio"]:hover + span::before { opacity: 1; } input.sheet-zero[type="radio"] + span::before { font-size: 12px; content: "✖"; opacity: 0.25; } /* end of normal radio */ /* Fake radio */ input.sheet-forms[type="radio"] + span::before { margin-right: 4px; border: solid 1px #a8a8a8; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #ccc; -webkit-box-shadow: 0 0 2px #ccc; box-shadow: 0 0 2px #ccc; background: #f6f6f6; background: -moz-radial-gradient(#f6f6f6, #dfdfdf); background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); background: -ms-radial-gradient(#f6f6f6, #dfdfdf); background: -o-radial-gradient(#f6f6f6, #dfdfdf); background: radial-gradient(#f6f6f6, #dfdfdf); } /* Fake radio */ input.sheet-forms[type="radio"] + span::before { content: ""; width: 12px; height: 12px; font-size: 24px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } input.sheet-forms[type="radio"]:checked + span::before { content: ""; background: black; background: -moz-radial-gradient(white,green, red); background: -webkit-radial-gradient(white, green,red); background: -ms-radial-gradient(white,green, red); background: -o-radial-gradient(white,green, red); background: radial-gradient(white, green,red); } /* end of forms radio */ /* =====Buttons ===== */ /* =====initiative button ===== */ button[type=roll].sheet-initiative:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-initiative { background-image: none; font-family:"RufscriptRegular"; color:black; font-size:1.2em; font-weight:700; border-radius: 4px; box-shadow:none; height:28px; width:80px; border: 2px outset gray; } button[type=roll].sheet-initiative:hover { border: 2px inset gray; background:black; color:white; } button[type=roll].sheet-initiative:active { border: 2px inset gray; background:red; color:black; } /* =====adv button ===== */ button[type=roll].sheet-adv:before { background-image: none; /*background-color: #f2f5d3;*/ /*background-color: white;*/ content: ""; } button[type=roll].sheet-adv { background-image: none; font-family:"RufscriptRegular"; color:black; font-size:1.4em; font-weight:700; border-radius: 4px; box-shadow:none; height:28px; width:150px; border: 2px outset gray; } button[type=roll].sheet-adv:hover { border: 2px inset gray; background:black; color:white; } button[type=roll].sheet-adv:active { border: 2px inset gray; background:red; color:black; } table.sheet-general { text-align: center; table-layout: fixed; width: 100%; } div.sheet-border { border: solid 1px black; border-radius: 4px; padding: 2px; margin-bottom: 10px; } select.sheet-unstyled { width:auto; } textarea.sheet-thin { height:40px; } input[type="checkbox"].sheet-real { opacity: 100; position: relative; top: 0px; left: 0px; width: 16px; height: 16px; margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; cursor: pointer; z-index: 1; } .sheet-real { width: auto; } .sheet-long { width: 300px; } /* =====damage button ===== */ button[type=roll].sheet-damageroll:before { background-image: none; } button[type=roll].sheet-damageroll { background-image: none; background: black; font-family:"RufscriptRegular"; color:white; font-size:1.4em; font-weight:700; border-radius: 4px; box-shadow:none; height:28px; width:28px; border: 1px solid red; } button[type=roll].sheet-damageroll:hover { border: 1px solid black; background:red; color:black; } button[type=roll].sheet-damageroll:active { border: 1px solid red; background:red; color:white; } /* =====weaponroll button ===== */ button[type=roll].sheet-weaponroll:before { background-image: none; } button[type=roll].sheet-weaponroll { background-image: none; background: red; font-family:"RufscriptRegular"; color:black; font-size:1.4em; font-weight:700; border-radius: 4px; box-shadow:none; height:28px; width:28px; border: 1px solid black; } button[type=roll].sheet-weaponroll:hover { border: 1px solid red; background:black; color:red; } button[type=roll].sheet-weaponroll:active { border: 1px solid black; background:red; color:white; } /* %%%%% %%%%% %%%%% */ /* %%%%% %%%%% %%%%% */ /* %%%%% %%%%% %%%%% */ /* roll templates */ /* %%%%% %%%%% %%%%% */ /* %%%%% %%%%% %%%%% */ /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-skill table { width: 189px; height: 189px; padding: 2px; background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/template_background.jpg) top left; background-size: 189px 189px; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-skill th { color: rgb(112, 0, 0); padding: 15px 2px 2px 20px; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-skill td { padding-left: 20px; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-skill .sheet-result { font-size: 1.2em; text-align: center; color: rgb(112, 0, 0); padding-bottom: 20px; } .sheet-rolltemplate-skill .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-skill .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-skill .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-skill .inlinerollresult.importantroll { color: #3FB315; border: none; } /* %%%%% %%%%% %%%%% */ /* wod */ /* %%%%% %%%%% %%%%% */ .sheet-rolltemplate-wod table { width: 250px; height: 250px; padding: 2px; background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CWOD-W20/template_background.jpg) top left; background-size: 250px 250px; background-repeat: no-repeat; font-family: "Courier New", Courier, monospace; font-weight: bold; border-spacing: 0; } .sheet-rolltemplate-wod th { color: rgb(112, 0, 0); padding: 15px 2px 2px 20px; line-height: 1.2em; font-size: 1.2em; text-align: left; } .sheet-rolltemplate-wod td { padding-left: 20px; font-size: 1.0em; vertical-align: top; } .sheet-rolltemplate-wod .sheet-result { font-size: 1.2em; text-align: center; color: rgb(112, 0, 0); padding-bottom: 20px; } .sheet-rolltemplate-wod .inlinerollresult { background-color: transparent; color: #000000; border: none; } .sheet-rolltemplate-wod .inlinerollresult.fullcrit { color: #3FB315; border: none; } .sheet-rolltemplate-wod .inlinerollresult.fullfail { color: #000000; border: none; } .sheet-rolltemplate-wod .inlinerollresult.importantroll { color: #3FB315; border: none; }