/* fonts import, for cross-platform compatibility */ @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap'); /*----------- Repeating Blocks -------------*/ .charsheet .repcontrol_add { display: block; background:black; color:white; text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black; box-shadow:none; float:left!important; margin-bottom:0px; font-size:0.9em; height:2.2em; } .charsheet .repcontrol_edit { display: inline-block; background:black; color:white; text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black; box-shadow:none; float:none!important; margin-bottom:5px; font-size:0.9em; height:2.2em; } .charsheet .repcontrol_del { background:red; color:white; text-shadow:0px 0px 2px black,0px 0px 2px black,0px 0px 2px black; box-shadow:none; float:none!important; margin-bottom:5px; font-size:0.9em; height:2.2em; } /*----------- Tabs Setup -------------*/ .charsheet { background:white; } div.sheet-core-content { display: none; width:840px; } .sheet-banner { background-image:url('https://tephrarpg.com/wp-content/uploads/2018/11/Tephra_Header.png'); background-repeat: no-repeat; background-size:400px; height:83px; width:300px; } .charsheet div[class^="sheet-section"] { display: none; background-size:840px; } .sheet-top_half { background-size: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 { /*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: 70px; height: 20px; cursor: pointer; position: relative; opacity: 0; z-index: 9999; box-shadow: 0px 0px 5px blue; } .charsheet span.sheet-tab { text-align: center; display: inline-block; /*originally inline-block*/ font-size: 13px; background-repeat: no-repeat; color: black; /*originally white*/ /*font-family: "Tinos", "Quattrocento", "Lustria", "Buenardserif", serif;*/ font-weight: bold; border-radius: 4px; border: 2px solid #997C4D; width: 70px; /*originally 87px*/ height: 20px; /*originally 20px*/ cursor: pointer; position: relative; vertical-align: middle; margin-left: -75px;/*originally 91px*/ } .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-tab99:checked + span.sheet-tab99 { background: black; /*originally ab8b57*/ color: white; /*originally white*/ border-radius: 4px; border: 2px solid #997C4D; } /*----------- End Tab Setup -----------*/ /*----------- Font -----------*/ .sheet-table th { color:#997C4D; font-weight:normal; font-style: italic; } .sheet-Specialtytable th { color:black; font-weight:normal; font-style: italic; } .sheet-Specialtytable tr:nth-child(odd) { background: white; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(rgb(255,255,255,0),rgba(153, 124, 77,1)); /*Safari 5.1-6*/ background: -o-linear-gradient(rgb(255,255,255,0),rgba(153, 124, 77,1)); /*Opera 11.1-12*/ background: -moz-linear-gradient(rgb(255,255,255,0),rgba(153, 124, 77,1)); /*Fx 3.6-15*/ background: linear-gradient(rgb(255,255,255),rgba(153, 124, 77,1)); /*Standard*/ } .sheet-left { text-align:left; } .sheet-right { text-align:right; } .sheet-text { border-top:none; border-left:none; border-right:none; border-radius:0px; box-shadow:none; } input.sheet-text[type="text"]:focus { border-bottom:1px solid #997C4D; border-radius:0px; box-shadow:none; } .sheet-skill { border-top:none; border-left:none; border-right:none; border-radius:0px; box-shadow:none; text-align:center; background: transparent; } .sheet-Specialty { border: 1px solid #997C4D; border-radius:5px; box-shadow:none; text-align:center; color: black; font-weight:bold; font-size:1.2em; font-family: 'Poiret One', cursive; background: transparent; box-shadow: inset 0px 0px 10px #997C4D; } .sheet-hidden { display:none; } select.sheet-smallselect { border: 1px solid #848484; border-radius:0px; border-left: none; border-right: none; outline:0; width: 105px; background-color:white; box-shadow:none; outline:0; text-align: right; padding-left:2px; } h4 { font-family: 'Poiret One', cursive; color: #997C4D; font-weight:bold; text-align:center; } textarea.sheet-notes { border-radius:15px; border: 1px solid #997C4D; height:35px; resize:vertical; box-shadow: inset 0px 0px 10px #997C4D; } textarea.sheet-longnotes { border-radius:15px; border: 1px solid #997C4D; height:105px; resize:vertical; box-shadow: inset 0px 0px 10px #997C4D; } textarea::-webkit-input-placeholder { font-family: 'Poiret One', cursive; color:#997C4D; } textarea:-moz-placeholder { /* Firefox 18- */ font-family: 'Poiret One', cursive; color:#997C4D; } textarea::-moz-placeholder { /* Firefox 19+ */ font-family: 'Poiret One', cursive; color:#997C4D; } textarea:-ms-input-placeholder { font-family: 'Poiret One', cursive; color:#997C4D; } /*========== Big Checkbox ==========*/ /* ----Hide actual Big Checkbox---- */ input.sheet-bigcheck[type="radio"] { opacity: 0; width: 16px; height: 16px; position: relative; top: 5px; left: 6px; margin: -10px; cursor: pointer; z-index: 1; } /* ----Fake Big Checkbox ---- */ input.sheet-bigcheck[type="radio"] + span::before { margin-right: 4px; line-height: 14px; text-align: center; display: inline-block; vertical-align: middle; -moz-box-shadow: 0 0 2px #997C4D; -webkit-box-shadow: 0 0 2px #997C4D; box-shadow: inset 0 0 8px #997C4D, inset 0 0 8px #997C4D; } input.sheet-bigcheck[type="radio"] + span::before { content: ""; width: 14px; height: 14px; font-size: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } input.sheet-bigcheck[type="radio"]:checked + span::before { color: red; content: "✓"; text-shadow:none; font-weight:bold; } /*------------Button-----------*/ /* ======== attribute ========*/ .sheet-attribute button[type="roll"]:before, .sheet-attribute:before { content: ""!important; display: none; border:none; text-shadow:none; } .sheet-attribute button[type="roll"], .sheet-attribute { display: block; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 45px; border: 1px solid #997C4D; box-shadow: none; outline:0; margin: 0; background: radial-gradient(circle at 20px 20px, #997C4D, #000); height:25px; width: 80px; padding-left:20px; font-size:1em !important; color: white; font-family: 'Poiret One', cursive; /* ======== text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 5px white,0px 0px 5px white,0px 0px 5px white; ========*/ } .sheet-attribute button[type="roll"]:hover, .sheet-attribute:hover { background: radial-gradient(circle at 40px 10px, #997C4D, #000); } .sheet-attribute button[type="roll"]:active, .sheet-attribute:active { background: radial-gradient(circle at 20px 20px, #000, #997C4D); } /* ======== skillbtn ========*/ .sheet-skillbtn button[type="roll"]:before, .sheet-skillbtn:before { content: ""!important; display: none; border:none; text-shadow:none; } .sheet-skillbtn button[type="roll"], .sheet-skillbtn { display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #997C4D; box-shadow: none; outline:0; margin: 0; background: radial-gradient(circle at 0px 10px, white, gray); font-size:1em !important; font-family: 'Poiret One', cursive; font-weight:bold; height:25px; width: 120px; padding-left:20px; color: black; /* ======== text-shadow: 0px 0px 10px #997C4D, 0px 0px 10px #997C4D, 0px 0px 10px #997C4D; ========*/ } .sheet-skillbtn button[type="roll"]:hover, .sheet-skillbtn:hover { background: radial-gradient(circle at 40px 10px, white, gray); } .sheet-skillbtn button[type="roll"]:active, .sheet-skillbtn:active { background: radial-gradient(circle at 80px 10px, white, gray); } /*=== Roll Templates ===*/ /*=== skill ===*/ .sheet-rolltemplate-attack table, .sheet-rolltemplate-skill table { width: 100%; border: none; color: black; font-size: 1em; font-family: 'Poiret One', cursive; box-shadow: inset 0px 0px 30px rgba(153, 124, 77,1.8),inset 0px 0px 30px rgba(153, 124, 77,1.8), 0 0 2px black; background: white; border-radius: 10px; margin-left: auto; margin-right: auto; border-collapse: collapse; border-spacing:0; } .sheet-rolltemplate-attack th, .sheet-rolltemplate-skill th { color: black; padding: 2px; line-height: 1.6em; font-size: 1.2em; box-shadow: inset 0px 0px 30px rgba(153, 124, 77,1.8),inset 0px 0px 30px rgba(153, 124, 77,1.8); padding-left: 5px; } .sheet-rolltemplate-attack th:first-child, .sheet-rolltemplate-skill th:first-child { border-radius: 10px 10px 0 0; } .sheet-rolltemplate-attack tr:last-child .sheet-rolltemplate-attack td:first-child, .sheet-rolltemplate-skill tr:last-child .sheet-rolltemplate-skill td:first-child { border-radius: 0 0 0 10px; } .sheet-rolltemplate-attack td, .sheet-rolltemplate-skill td { border-right: 1px solid #ccc; padding-left: 5px; } .sheet-rolltemplate-attack td:first-child, .sheet-rolltemplate-skill td:first-child { border-right: none; } .sheet-rolltemplate-attack td:last-child, .sheet-rolltemplate-skill td:last-child { border-right: none; } .sheet-rolltemplate-attack td.sheet-detail, .sheet-rolltemplate-skill td.sheet-detail { box-shadow: inset 0px 20px -20px rgba(153, 124, 77,1.8),inset 0px 0px 30px rgba(153, 124, 77,1.8); } .sheet-rolltemplate-attack .inlinerollresult, .sheet-rolltemplate-skill .inlinerollresult { background:transparent; border:none; box-shadow:none; }