Files
roll20-character-sheets/Rotted Capes/RottedCapes.css
T

688 lines
21 KiB
CSS

/* ================ Roll Templates ================ */
.sheet-rolltemplate-castpower_roll table,
.sheet-rolltemplate-castattack_roll table,
.sheet-rolltemplate-castskill_roll table,
.sheet-rolltemplate-castpower_roll_private table,
.sheet-rolltemplate-castattack_roll_private table,
.sheet-rolltemplate-castskill_roll_private table,
.sheet-rolltemplate-plotdie_roll table,
.sheet-rolltemplate-burnout_roll table,
.sheet-rolltemplate-init_roll table,
.sheet-rolltemplate-power_roll table,
.sheet-rolltemplate-attack_roll table,
.sheet-rolltemplate-skill_roll table,
.sheet-rolltemplate-damage_roll table,
.sheet-rolltemplate-plotdie_roll_private table,
.sheet-rolltemplate-burnout_roll_private table,
.sheet-rolltemplate-init_roll_private table,
.sheet-rolltemplate-power_roll_private table,
.sheet-rolltemplate-attack_roll_private table,
.sheet-rolltemplate-skill_roll_private table,
.sheet-rolltemplate-damage_roll_private table,
.sheet-rolltemplate-action_roll_private table,
.sheet-rolltemplate-action_roll table {
width:100%;
background-color: white;
border:1px solid Black
}
.sheet-rolltemplate-castpower_roll th,
.sheet-rolltemplate-castattack_roll th,
.sheet-rolltemplate-castskill_roll th,
.sheet-rolltemplate-castpower_roll_private th,
.sheet-rolltemplate-castattack_roll_private th,
.sheet-rolltemplate-castskill_roll_private th,
.sheet-rolltemplate-plotdie_roll th,
.sheet-rolltemplate-burnout_roll th,
.sheet-rolltemplate-init_roll th,
.sheet-rolltemplate-power_roll th,
.sheet-rolltemplate-attack_roll th,
.sheet-rolltemplate-skill_roll th,
.sheet-rolltemplate-damage_roll th,
.sheet-rolltemplate-plotdie_roll_private th,
.sheet-rolltemplate-burnout_roll_private th,
.sheet-rolltemplate-init_roll_private th,
.sheet-rolltemplate-power_roll_private th,
.sheet-rolltemplate-attack_roll_private th,
.sheet-rolltemplate-skill_roll_private th,
.sheet-rolltemplate-damage_roll_private th,
.sheet-rolltemplate-action_roll_private th,
.sheet-rolltemplate-action_roll th {
text-align: center;
font-family: Ariel;
font-weight:300;
font-size:1.1em;
padding:5px
}
.sheet-rolltemplate-action_roll_private th,
.sheet-rolltemplate-action_roll th { /* - Layout: inline attribute header */
background-color: DarkBlue;
color: white;
}
.sheet-rolltemplate-damage_roll_private th,
.sheet-rolltemplate-damage_roll th { /* - Layout: inline damage header */
background-color: #490f00;
color: white;
}
.sheet-rolltemplate-castskill_roll_private th,
.sheet-rolltemplate-castskill_roll th,
.sheet-rolltemplate-skill_roll_private th,
.sheet-rolltemplate-skill_roll th { /* - Layout: inline Skills header */
background-color: #0f8215;
color: white;
}
.sheet-rolltemplate-castattack_roll_private th,
.sheet-rolltemplate-castattack_roll th,
.sheet-rolltemplate-attack_roll_private th,
.sheet-rolltemplate-attack_roll th { /* - Layout: inline attack header */
background-color: darkred;
color: white;
}
.sheet-rolltemplate-castpower_roll_private th,
.sheet-rolltemplate-castpower_roll th,
.sheet-rolltemplate-power_roll_private th,
.sheet-rolltemplate-power_roll th { /* - Layout: inline Powers header */
background-color: #702edb;
color: white;
}
.sheet-rolltemplate-init_roll_private th,
.sheet-rolltemplate-init_roll th { /* - Layout: inline Init header */
background-color: yellow;
color: Black;
}
.sheet-rolltemplate-plotdie_roll_private th,
.sheet-rolltemplate-plotdie_roll th { /* - Layout: inline Plot Die header */
background-color: Gold;
color: Black;
}
.sheet-rolltemplate-burnout_roll_private th,
.sheet-rolltemplate-burnout_roll th { /* - Layout: inline Burnout header */
background-color: DarkGray;
color: white;
}
.sheet-rolltemplate-castpower_roll td,
.sheet-rolltemplate-castattack_roll td,
.sheet-rolltemplate-castskill_roll td,
.sheet-rolltemplate-castpower_roll_private td,
.sheet-rolltemplate-castattack_roll_private td,
.sheet-rolltemplate-castskill_roll_private td,
.sheet-rolltemplate-plotdie_roll td,
.sheet-rolltemplate-burnout_roll td,
.sheet-rolltemplate-init_roll td,
.sheet-rolltemplate-power_roll td,
.sheet-rolltemplate-attack_roll td,
.sheet-rolltemplate-skill_roll td,
.sheet-rolltemplate-damage_roll td,
.sheet-rolltemplate-plotdie_roll_private td,
.sheet-rolltemplate-burnout_roll_private td,
.sheet-rolltemplate-init_roll_private td,
.sheet-rolltemplate-power_roll_private td,
.sheet-rolltemplate-attack_roll_private td,
.sheet-rolltemplate-skill_roll_private td,
.sheet-rolltemplate-damage_roll_private td,
.sheet-rolltemplate-action_roll_private td,
.sheet-rolltemplate-action_roll td {
padding:5px;
line-height:1.1em;
vertical-align:top;
}
.sheet-rolltemplate-castpower_roll_private td:first-child,
.sheet-rolltemplate-castattack_roll_private td:first-child,
.sheet-rolltemplate-castskill_roll_private td:first-child,
.sheet-rolltemplate-castpower_roll td:first-child,
.sheet-rolltemplate-castattack_roll td:first-child,
.sheet-rolltemplate-castskill_roll td:first-child,
.sheet-rolltemplate-plotdie_roll td:first-child,
.sheet-rolltemplate-burnout_roll td:first-child,
.sheet-rolltemplate-init_roll td:first-child,
.sheet-rolltemplate-power_roll td:first-child,
.sheet-rolltemplate-attack_roll td:first-child,
.sheet-rolltemplate-skill_roll td:first-child,
.sheet-rolltemplate-damage_roll td:first-child,
.sheet-rolltemplate-plotdie_roll_private td:first-child,
.sheet-rolltemplate-burnout_roll_private td:first-child,
.sheet-rolltemplate-init_roll_private td:first-child,
.sheet-rolltemplate-power_roll_private td:first-child,
.sheet-rolltemplate-attack_roll_private td:first-child,
.sheet-rolltemplate-skill_roll_private td:first-child,
.sheet-rolltemplate-damage_roll_private td:first-child,
.sheet-rolltemplate-action_roll_private td:first-child,
.sheet-rolltemplate-action_roll td:first-child {
color: black;
text-align:Left;
min-width:50px;
padding-right:5px;
}
.sheet-rolltemplate-castpower_roll tr:nth-child(even),
.sheet-rolltemplate-castattack_roll tr:nth-child(even),
.sheet-rolltemplate-castskill_roll tr:nth-child(even),
.sheet-rolltemplate-castpower_roll_private tr:nth-child(even),
.sheet-rolltemplate-castattack_roll_private tr:nth-child(even),
.sheet-rolltemplate-castskill_roll_private tr:nth-child(even),
.sheet-rolltemplate-plotdie_roll tr:nth-child(even),
.sheet-rolltemplate-burnout_roll tr:nth-child(even),
.sheet-rolltemplate-init_roll tr:nth-child(even),
.sheet-rolltemplate-power_roll tr:nth-child(even),
.sheet-rolltemplate-attack_roll tr:nth-child(even),
.sheet-rolltemplate-skill_roll tr:nth-child(even),
.sheet-rolltemplate-damage_roll tr:nth-child(even),
.sheet-rolltemplate-plotdie_roll_private tr:nth-child(even),
.sheet-rolltemplate-burnout_roll_private tr:nth-child(even),
.sheet-rolltemplate-init_roll_private tr:nth-child(even),
.sheet-rolltemplate-power_roll_private tr:nth-child(even),
.sheet-rolltemplate-attack_roll_private tr:nth-child(even),
.sheet-rolltemplate-skill_roll_private tr:nth-child(even),
.sheet-rolltemplate-damage_roll_private tr:nth-child(even),
.sheet-rolltemplate-action_roll_private tr:nth-child(even),
.sheet-rolltemplate-action_roll tr:nth-child(even) {
background-color:#EEEEEE
}
/* ================ End Roll Templates ================ */
span {
font-family: Ariel;
text-align: left;
font-size: 100%;
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 ================ */
/* ---- Detail or Quick Sheet ---- */
.sheet-block-a,
.sheet-block-switch:checked ~ .sheet-block-b {
display: block;
margin-top: 1em;
}
.sheet-block-b,
.sheet-block-switch:checked ~ .sheet-block-a {
display: none;
}
/* ---- 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: 135px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span.sheet-tab {
text-align: center;
display: inline-block;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
width: 125px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -140px;
border: 2px solid #490f00; /* - Layout: tab borders- */
color: black; /* - Layout: font color for tabs not selected - */
background: #ede5e3; /* - Layout: color of the tabs not selected - */
border-radius:4px;
font-size: 14px;
font-weight: normal;
}
input.sheet-tab::before {
content: attr(title);
text-align: center;
margin-top: 5px;
display: inline-block;
width: 75%;
height: 100%;
background: #490f00; /* - Layout: color of the selected tab - */
color:white; /* - Layout: font color for selected tab - */
}
input.sheet-tab:checked::before {
background: #490f00; /* - 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 {
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 {
background: #490f00; /* - 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: ComicSans;
font-variant: small-caps;
font-weight: Bold;
text-align: center;
color: black;
font-size: 100%;
}
h1 {
font-size: 150%;
margin-bottom: 10px;
}
h2 {
font-style: Italic;
margin-bottom: 5px;
}
h3 { /* - Table Headers with TH - */
font-size: 80%;
}
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: 80%;
margin-top: 0px;
margin-bottom: 0px;
}
/* ================ END HEADERS and LABELS ================ */
/* ================ TEXTAREAS ================ */
textarea[name=attr_background] {
resize: vertical;
display: block;
width: 92.5% !important;
height: 11.75em;
margin-left: 10px !important;
}
textarea[name=attr_BuiltItem] {
resize: vertical;
display: block;
width: 92.5% !important;
height: 4em;
margin-left: 10px !important;
}
/* ================ END TEXTAREAS ================ */
/* ================ SECTION FORMATTING ================ */
.sheet-header {
margin-bottom: 4px;
padding: 2px 4px;
text-align: center;
background: #490f00; /* - 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: Ariel;
color: black;
}
.sheet-select-attr {
/* configure attribute drop down box */
Font-size: 75% !important;
width: 7.6em;
}
.sheet-dropdown,
.sheet-smalldropdown,
.sheet-meddropdown,
.sheet-largedropdown,
.sheet-select-attr {
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-subsection {
border: 1px solid #490f00; /* - 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: Ariel;
font-size: 120%;
font-variant: small-caps;
position: absolute;
left: 5px;
bottom: 0px;
}
table { width: 100%; }
/* ================ 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 ================ */
button.sheet-diebutton-private,
button.sheet-diebutton-public {
margin: 0;
border-radius: 0 !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
color: blue; /* - Layout: button image color #490f00 - */
background-color: transparent;
font-size: 175% !important;
}
button.sheet-diebutton-private {
color: red; /* - Layout: button image color #490f00 - */
display: none;
}
input.sheet-roll-semiprivate:unchecked ~ div table button.sheet-diebutton-public { display: inline; }
input.sheet-roll-semiprivate:unchecked ~ div table button.sheet-diebutton-private { display: none; }
input.sheet-roll-semiprivate:checked ~ div table button.sheet-diebutton-private { display: inline; }
input.sheet-roll-semiprivate:checked ~ div table button.sheet-diebutton-public { 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;
pointer-events: none;
position: absolute;
bottom: 60%;
left: 0%;
word-wrap: break-word;
text-align: left;
background-color: white;
border: 1px solid black;
border-radius: 5px;
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;
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;
align: 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;
align: 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 WhiteSmoke;
/* border: 1px solid black; Table borders - turned on only for design work */
border-collapse: collapse;
}
th {
text-align: center;
}
.sheet-tagline{
font: Rockwell;
size: 100%;
font-style: Italic Bold;
margin-top: 10px;
margin-left: 5px;
background-color: WhiteSmoke;
}
.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-width-W100 {width: 100%;}
.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: 35%;}
.sheet-width-W33 {width: 33%;}
.sheet-width-W30 {width: 30%;}
.sheet-width-W25 {width: 25%;}
.sheet-width-W23 {width: 23%;}
.sheet-width-W22 {width: 22%;}
.sheet-width-W20 {width: 20%;}
.sheet-width-W18 {width: 18%;}
.sheet-width-W15 {width: 15%;}
.sheet-width-W10 {width: 10%;}
.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-attr-display {width: 5.75em !important; Font-size: 90% !important;}
.sheet-verysmall-textblock {width: 3em !important;}
.sheet-small-textblock {width: 4em !important;}
.sheet-med-textblock {width: 7.5em !important;}
.sheet-large-textblock {width: 10em !important;}
.sheet-verylarge-textblock {width: 15em !important;}
.sheet-smalldropdown {width: 3.5em !important;}
.sheet-meddropdown {width: 5.5em !important;}
.sheet-largedropdown {width: 7em !important;}
.sheet-spin-button {width: 3.6em !important;}
.sheet-bigspin-button {width: 5.25em !important;}
.sheet-pad-text {padding-left: 10px;}
.sheet-margin {margin-left: 10px;}
.sheet-tooltip-override {bottom: 100%;}