Files
roll20-character-sheets-tester/Wrath and Glory API/wrath_and_glory.css
T

805 lines
23 KiB
CSS

/* Version: 3.1 */
/* ================ COLOR GUIDE ================
LIGHT TEAL: #d0dfe5
DARK TEAL: #023244
*/
/* ================ Roll Templates ================ */
.sheet-rolltemplate-meltadamage_roll table,
.sheet-rolltemplate-alternative_rolld66 table,
.sheet-rolltemplate-alternative_roll table,
.sheet-rolltemplate-roll_dicepool_damage table,
.sheet-rolltemplate-roll_dicepool_nowrath table,
.sheet-rolltemplate-roll_dicepool table,
.sheet-rolltemplate-glory_roll table,
.sheet-rolltemplate-recovershock_roll table {
width:100%;
background-color: white;
border:1px solid Black
}
.sheet-rolltemplate-meltadamage_roll th,
.sheet-rolltemplate-alternative_rolld66 th,
.sheet-rolltemplate-alternative_roll th,
.sheet-rolltemplate-roll_dicepool_damage th,
.sheet-rolltemplate-roll_dicepool_nowrath th,
.sheet-rolltemplate-roll_dicepool th,
.sheet-rolltemplate-glory_roll th,
.sheet-rolltemplate-recovershock_roll th {
text-align: center;
font-family: Helvetica;
font-weight:300;
font-size:1.1em;
padding:5px;
background-color: Black;
color: white;
}
.sheet-rolltemplate-meltadamage_roll td,
.sheet-rolltemplate-alternative_rolld66 td,
.sheet-rolltemplate-alternative_roll td,
.sheet-rolltemplate-roll_dicepool_damage td,
.sheet-rolltemplate-roll_dicepool_nowrath td,
.sheet-rolltemplate-roll_dicepool td,
.sheet-rolltemplate-glory_roll td,
.sheet-rolltemplate-recovershock_roll td {
padding:5px;
line-height:1.1em;
vertical-align:top;
}
.sheet-rolltemplate-roll_dicepool_damage td:first-child,
.sheet-rolltemplate-roll_dicepool_nowrath td:first-child,
.sheet-rolltemplate-roll_dicepool td:first-child,
.sheet-rolltemplate-glory_roll td:first-child,
.sheet-rolltemplate-recovershock_roll td:first-child {
color: black;
text-align:Left;
min-width:50px;
padding-right:5px;
}
.sheet-rolltemplate-meltadamage_roll td:first-child,
.sheet-rolltemplate-alternative_rolld66 td:first-child,
.sheet-rolltemplate-alternative_roll td:first-child {
color: black;
text-align:center;
min-width:50px;
padding-right:5px;
}
.sheet-rolltemplate-meltadamage_roll tr:nth-child(even),
.sheet-rolltemplate-alternative_rolld66 tr:nth-child(even),
.sheet-rolltemplate-alternative_roll tr:nth-child(even),
.sheet-rolltemplate-roll_dicepool_damage tr:nth-child(even),
.sheet-rolltemplate-roll_dicepool_nowrath tr:nth-child(even),
.sheet-rolltemplate-roll_dicepool tr:nth-child(even),
.sheet-rolltemplate-glory_roll tr:nth-child(even),
.sheet-rolltemplate-recovershock_roll tr:nth-child(even) {
background-color:#EEEEEE
}
/* ================ End Roll Templates ================ */
span {
font-family: Helvetica;
text-align: left;
font-size: 92.5%;
color: black;
font-weight: normal;
font-style: normal;
}
.sheet-smallfont {
font-size: 80%;
}
/* ================ RADIO HANDLING ================ */
input[type="radio"].sheet-falseRadio {
position: relative;
top: 0px;
left: 0px;
width: 65px;
cursor: pointer;
opacity: 0;
z-index: 9999;
}
span.sheet-falseRadio {
position: relative;
top: -10px;
left: 0px;
text-align: center;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
padding-left: 3px;
padding-right: 3px;
width: 65px;
cursor: pointer;
border: none;
color: #000000;
background: transparent;
font-size: 11px;
text-decoration: none;
font-weight: bold;
}
input.sheet-falseRadio:checked + span.sheet-falseRadio {
font-weight: bold;
color: #000000;
}
input.sheet-falseRadio:checked + span.sheet-falseRadio::after {
content: '?';
}
/* ================ END RADIO HANDLING ================ */
/*================ Tabs Handling ================ */
/* ---- sheet blocks: PC, NPC, Vehicle, Voidship, and Tables ---- */
div.sheet-multi-view { display: none; }
input.sheet-isPC:checked ~ div.sheet-isPC,
input.sheet-isNPC:checked ~ div.sheet-isNPC,
input.sheet-isVehicle:checked ~ div.sheet-isVehicle,
input.sheet-isVoidship:checked ~ div.sheet-isVoidship,
input.sheet-isTables:checked ~ div.sheet-isTables,
{
display: block;
}
/* ---- character sheet tabs ---- */
div[class^="sheet-section"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
input.sheet-tab99:checked ~ div[class^="sheet-section"] {
max-height: 999998px;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: auto;
}
input.sheet-tab {
width: 120px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span.sheet-tab {
text-align: center;
display: inline-block;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
width: 110px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -125px;
border: 2px solid #023244; /* - Layout: tab borders- */
color: black; /* - Layout: font color for tabs not selected - */
background: #d0dfe5; /* - Layout: color of the tabs not selected - */
border-radius:3px;
font-size: 14px;
font-weight: normal;
margin-top: 6px;
}
input.sheet-tab::before {
content: attr(title);
text-align: center;
margin-top: 5px;
display: inline-block;
width: 75%;
height: 100%;
background: #023244; /* - Layout: color of the selected tab - */
color:white; /* - Layout: font color for selected tab - */
}
input.sheet-tab:checked::before {
background: #023244; /* - Layout: color of the selected tab - */
color:white; /* - Layout: font color for selected tab - */
font-weight: bold;
}
input.sheet-tab1:checked ~ div.sheet-section-pc1,
input.sheet-tab2:checked ~ div.sheet-section-pc2,
input.sheet-tab3:checked ~ div.sheet-section-pc3,
input.sheet-tab4:checked ~ div.sheet-section-pc4,
input.sheet-tab5:checked ~ div.sheet-section-pc5,
input.sheet-tab6:checked ~ div.sheet-section-pc6,
input.sheet-tab7:checked ~ div.sheet-section-pc7 {
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: hidden;
width: 100%;
font-weight: bold;
}
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2,
input.sheet-tab3:checked + span.sheet-tab3,
input.sheet-tab4:checked + span.sheet-tab4,
input.sheet-tab5:checked + span.sheet-tab5,
input.sheet-tab6:checked + span.sheet-tab6,
input.sheet-tab7:checked + span.sheet-tab7 {
background: #023244; /* - Layout: color of the selected tab - */
color: white;
font-weight: bold;
}
/* ================ END TABS HANDLING ================ */
/* ================ REPEATING SECTIONS ================ */
.repcontainer[data-groupname=repeating_attack]
.repitem { margin-bottom: 5px; }
.repcontrol { margin-bottom: 5px; }
.repcontainer.editmode[data-groupname=repeating_attack] + .repcontrol { text-align: right; }
.repcontainer.editmode[data-groupname=repeating_attack] + .repcontrol .repcontrol_edit { float: left; }
/* ================ END REPEATING SECTIONS ================ */
/* ================ HEADERS and LABELS ================ */
h1,h2,h3,h4 {
font-family: Helvetica;
font-variant: small-caps;
font-weight: Bold;
text-align: center;
color: black;
font-size: 100%;
}
h1 {
font-size: 200%;
text-align: left;
font-weight: Bold;
}
h2 {
font-style: Italic;
margin-bottom: 5px;
}
h3 { /* - Table Headers with TH - */
font-size: 70%;
}
h4 { /* - standalone row where the first word is the header - */
text-align: left;
}
h5 { /* - standalone row with standard sized text (typically the first td in a row) - */
text-align: left;
font-size: 90%;
margin-top: 0px;
margin-bottom: 0px;
}
h6 { /* - standalone row with standard sized text (typically the first td in a row) - */
text-align: right;
font-variant: normal;
font-size: 80%;
margin-top: 0px;
margin-bottom: 0px;
}
/* ================ END HEADERS and LABELS ================ */
/* ================ TEXTAREAS ================ */
textarea[name=attr_PsyPowerDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_PsyPowerPotency] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_background] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_backgroundbenefit] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_malignancy] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_rmalignancy] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_vehCriticalHits] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_vehDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_voidCriticalHits] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_voidDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_voidSystems] {
resize: vertical;
margin: 0 auto;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_objective] {
resize: vertical;
margin: 0 auto;
display: block;
width: 98% !important;
height: 1.25em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_abilityDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_talentDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_allianceDesc] {
resize: vertical;
display: block;
width: 98% !important;
height: 2.4em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_keywords] {
resize: vertical;
display: block;
width: 90% !important;
height: 3.1em;
margin-left: 7.5px !important;
}
textarea[name=attr_gearDetail-tooltip] {
height: 4em;
resize: vertical;
}
textarea[name=attr_rinjury] {
resize: vertical;
display: block;
width: 95% !important;
height: 1.25em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_trauma] {
resize: vertical;
display: block;
width: 97.5% !important;
height: 1.25em;
/* margin-left: 10px !important;*/
}
textarea[name=attr_rinjuryDescription] {
resize: vertical;
display: block;
width: 98% !important;
height: 1.25em;
/* margin-left: 10px !important;*/
}
/* ================ END TEXTAREAS ================ */
/* ================ SECTION FORMATTING ================ */
.sheet-header {
margin-bottom: 4px;
margin-top: 8px;
padding: 2px 4px;
text-align: center;
background: #023244; /* - Layout: header color - */
color: White; /* - Layout: header font color - */
font-weight: bold;
}
.sheet-minorheader {
margin-bottom: 4px;
margin-top: 4px;
padding: 2px 2px;
text-align: left;
background: #89A5A8; /* - Layout: header color - */
color: White; /* - Layout: header font color - */
font-weight: bold;
}
.charsheet {
background-size: cover;
background: WhiteSmoke; /* - Layout: page background color - */
min-width: 875px;
}
input, select, textarea {
font-size: 100%;
font-family: Helvetica;
color: black;
}
.sheet-select-attr {
/* configure attribute drop down box */
Font-size: 75% !important;
width: 7.6em;
}
.sheet-dropdown,
.sheet-smalldropdown,
.sheet-smeddropdown,
.sheet-meddropdown,
.sheet-largedropdown,
.sheet-verylargedropdown,
.sheet-xverylargedropdown,
.sheet-xtralargedropdown,
.sheet-select-attr {
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-subsection {
border: 1px solid #023244; /* - Layout: section border colors - */
position: relative;
border-radius: 10px;
margin-bottom: 10px;
padding: 2px;
}
.sheet-input > .sheet-input-name + input {
display: block;
font-size: 120%;
border-radius: 5px;
padding: 5px 5px 5pt 5px;
width: 100%;
height: 2em;
box-shadow: 5px 5px 3px 1px #999;
}
.sheet-input-name {
font-family: Helvetica;
font-size: 120%;
font-variant: small-caps;
position: absolute;
left: 5px;
bottom: 0px;
}
table { width: 100%; }
.sheet-tableColorRows td:first-child td:first-child {
background-color:#ebece7;
}
.sheet-tableColorRows tr:nth-child(even) {
background-color:#ebece7;
}
/* ================ END SECTION FORMATTING ================ */
/* ================ NUMBER FORMATTING ================ */
.sheet-circle input[type=text],
.sheet-circle input[type=number] {
border-radius: 100%;
height: 28px;
width: 28px !important;
text-align: center;
border: 1px solid black;
-moz-appearance: textfield;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-noborder input[type=text],
.sheet-noborder input[type=number] {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-appearance: textfield;
}
.sheet-circle input[type=text]::-webkit-outer-spin-button,
.sheet-circle input[type=text]::-webkit-inner-spin-button,
.sheet-circle input[type=number]::-webkit-outer-spin-button,
.sheet-circle input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* ================ END NUMBER FORMATTING ================ */
/* ================ BUTTON MANAGEMENT ================ */
.charsheet button[type=roll]::before {
display:none;
}
button.sheet-diebutton-all,
button.sheet-diebutton-simple,
button.sheet-diebutton-api { /* API is the default roller */
margin: 0 !important;
border-radius: 0 !important;
/*background-image: none !important;*/
/*border: none !important;*/
/*box-shadow: none !important;*/
font-family: dicefontd6;
color: rgb(2, 50, 68); /* - Layout: button image color #023244 - */
background-color: #D0DFE5;
font-size: 175% !important;
}
button.sheet-diebutton-damage {
color: rgb(252, 0, 0); /* - Layout: button image color #023244 - */
background-color: #4b0000;
}
button.sheet-diebutton-notest,
button.sheet-diebutton-assist {
color: rgb(0, 0, 0); /* - Layout: button image color #023244 - */
background-color:#48565a;
}
button.sheet-diebutton-glory {
color: rgb(209, 136, 0); /* - Layout: button image color #023244 - */
background-color: #FC0000;
}
button.sheet-diebutton-simple {
display: none;
}
button.sheet-diebutton-smaller {
font-size: 150% !important;
}
input.sheet-roll-useDice:unchecked ~ div table button.sheet-diebutton-api { display: inline; }
input.sheet-roll-useDice:unchecked ~ div table button.sheet-diebutton-simple { display: none; }
input.sheet-roll-useDice:checked ~ div table button.sheet-diebutton-simple { display: inline; }
input.sheet-roll-useDice:checked ~ div table button.sheet-diebutton-api { display: none; }
/* ================ End BUTTON Management ================ */
/* ================ BEGIN Flex Rows with Tooltips ================ */
.sheet-hover input[type="text"] {
display: flex;
flex: 1;
color: black;
}
.sheet-hover input[type=number] {-moz-appearance: textfield;}
.sheet-hover input[type=number]::-webkit-outer-spin-button,
.sheet-hover input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
.sheet-hover input:focus::-webkit-input-placeholder { color:transparent; }
.sheet-hover input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
.sheet-hover input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
.sheet-hover input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: black;
}
::-moz-placeholder { /* Firefox 19+ */
color: black;
}
:-ms-input-placeholder { /* IE 10+ */
color: black;
}
:-moz-placeholder { /* Firefox 18- */
color: black;
}
.sheet-flexrow {
display: flex;
flex-flow: row;
}
.sheet-tooltip {
display: inline-block; /* ORIGINAL = None ; changed to inline-block */
pointer-events: none;
position: absolute;
bottom: 60%; /* This sets where the text box appears in relation to the button */
left: 0%;
word-wrap: break-word;
text-align: left;
background-color: white;
border: 1px solid black;
border-radius: 5px; /* ORIGINAL removed: Pointer-events: none; */
padding: 5px;
white-space: pre-wrap;
visibility: hidden;
opacity: 0;
transition: visibility 500ms, opacity 500ms;
-webkit-transition-delay: 0s; /* Safari */
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transition-delay: 0s;
}
.sheet-hover:hover + .sheet-tooltip {
display: block;
background-color: white;
opacity: 1.0 !important;
visibility: visible;
pointer-events: visible;
box-shadow: none;
z-index: 1;
}
/* checkbox style settings */
.sheet-hover-hidden {
position: absolute; /* ORIGINAL value was relative, changed to absolute */
opacity: 0;
margin: 3px;
transform: scale(1.5);
}
/* hidden checkbox with no top margin */
.sheet-hover-hidden-notopmargin {
margin: 0px 3px 3px 3px !important;
}
/* image under the checkbox when unchecked */
.sheet-hover-hidden + span::before {
content: url(https://i.imgur.com/sRvElxy.png);
float: center;
margin: 0px 3px 3px 3px !important;
z-index: -1;
}
/* image under the checkbox when checked */
.sheet-hover-hidden:checked + span::before {
content: url(https://i.imgur.com/N8VCNVO.png);
float: center;
margin: 0px 3px 3px 3px !important;
z-index: -1;
}
.sheet-hover-hidden:hover ~ .sheet-tooltip {
left: 0%;
pointer-events: visible;
box-shadow: none;
z-index: 1;
}
.sheet-hover-hidden:checked ~ .sheet-tooltip {
display: block;
left: 0%;
background-color: #bbb;
opacity: 1.0;
visibility: visible;
pointer-events: visible;
z-index: 1;
}
/* ================ END Flex Rows with Tooltips ================ */
/* ================ Section formatting ================ */
table, th, td {
/* border: 1px solid black; Table borders - turned on only for design work */
border-collapse: collapse;
}
.sheet-bottom-border {
border-bottom: 4px solid #023244;
}
}
th {
text-align: center;
}
.sheet-tagline{
font: Rockwell;
size: 100%;
font-style: Italic Bold;
margin-top: 10px;
/* margin-left: 5px; */
background-color: WhiteSmoke;
}
.sheet-objective-checkbox{
size: 300%;
margin: 0 auto;
display: block;
}
.sheet-block-text {Font-size: 100%;}
.sheet-smaller-text {Font-size: 80%;}
.sheet-header-spacer {margin-top: 22.5px;}
.sheet-center {text-align: center;}
.sheet-right {text-align: right;}
.sheet-left {text-align: left;}
.sheet-header-override {text-align: left!important;}
.sheet-header-overrideright {text-align: right!important;}
.sheet-width-W100 {width: 100%;}
.sheet-width-W99 {width: 99%;}
.sheet-width-W98 {width: 98%;}
.sheet-width-W95 {width: 95%;}
.sheet-width-W90 {width: 90%;}
.sheet-width-W85 {width: 85%;}
.sheet-width-W80 {width: 80%;}
.sheet-width-W75 {width: 75%;}
.sheet-width-W70 {width: 70%;}
.sheet-width-W65 {width: 65%;}
.sheet-width-W60 {width: 60%;}
.sheet-width-W55 {width: 55%;}
.sheet-width-W50 {width: 50%;}
.sheet-width-W45 {width: 45%;}
.sheet-width-W40 {width: 40%;}
.sheet-width-W35 {width: 37%;}
.sheet-width-W35 {width: 38%;}
.sheet-width-W35 {width: 35%;}
.sheet-width-W33 {width: 33%;}
.sheet-width-W30 {width: 30%;}
.sheet-width-W25 {width: 29%;}
.sheet-width-W25 {width: 28%;}
.sheet-width-W25 {width: 27%;}
.sheet-width-W25 {width: 26%;}
.sheet-width-W25 {width: 25%;}
.sheet-width-W24 {width: 24%;}
.sheet-width-W23 {width: 23%;}
.sheet-width-W22 {width: 22%;}
.sheet-width-W21 {width: 21%;}
.sheet-width-W20 {width: 20%;}
.sheet-width-W19 {width: 19%;}
.sheet-width-W18 {width: 18%;}
.sheet-width-W17 {width: 17%;}
.sheet-width-W16 {width: 16%;}
.sheet-width-W15 {width: 15%;}
.sheet-width-W14 {width: 14%;}
.sheet-width-W13 {width: 13%;}
.sheet-width-W12 {width: 12%;}
.sheet-width-W11 {width: 11%;}
.sheet-width-W10 {width: 10%;}
.sheet-width-W9 {width: 9%;}
.sheet-width-W8 {width: 8%;}
.sheet-width-W7 {width: 7%;}
.sheet-width-W6 {width: 6%;}
.sheet-width-W5 {width: 5%;}
.sheet-width-W4 {width: 4%;}
.sheet-width-W3 {width: 3%;}
.sheet-width-W2 {width: 2%;}
.sheet-width-W1 {width: 1%;}
.sheet-attr-display {width: 5.75em !important; Font-size: 90% !important;}
.sheet-tiny-textblock {width: 2em !important;}
.sheet-verysmall-textblock {width: 2.8em !important;}
.sheet-small-textblock {width: 4em !important;}
.sheet-smallmed-textblock {width: 4.5em !important;}
.sheet-med-textblock {width: 7.5em !important;}
.sheet-large-textblock {width: 10em !important;}
.sheet-verylarge-textblock {width: 15em !important;}
.sheet-smalldropdown {width: 2.8em !important;}
.sheet-smeddropdown {width: 4em !important;}
.sheet-meddropdown {width: 6.25em !important;}
.sheet-largedropdown {width: 7em !important;}
.sheet-verylargedropdown {width: 9em !important;}
.sheet-xverylargedropdown {width: 10em !important;}
.sheet-xtralargedropdown {width: 12em !important;}
.sheet-smallspin-button {width: 3.1em !important;}
.sheet-2digitspin-button {width: 3.25em !important;}
.sheet-spin-button {width: 4em !important;}
.sheet-bigspin-button {width: 5.25em !important;}
.sheet-pad-text {padding-left: 5px;}
.sheet-margin {margin-left: 10px;}
.sheet-margin-top {margin-top: 10px !important;}
.sheet-margin-bottom {margin-bottom: 10px !important;}
.sheet-tooltip-override {bottom: 100%;}
.charsheet .sheet-wrapper {
background-image:url("https://i.imgur.com/ccLqJqK.jpg");
background-repeat:repeat;
padding-left: 7px;
}