mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
lexibrown
b629e7de00
- update crit calculation - added new images - fixed layout issue on char actions - added auto crit/hit/pierce modifiers - added multi select aspects
3594 lines
78 KiB
CSS
3594 lines
78 KiB
CSS
/*----------------- Font ------------------*/
|
|
|
|
@font-face {
|
|
font-family: Kungfont;
|
|
src: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Emberwind/fonts/Kungfont-Regular.ttf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: ProximaNova;
|
|
src: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Emberwind/fonts/ProximaNova-Regular.ttf");
|
|
}
|
|
|
|
.charsheet .kungfont {
|
|
font-family: Kungfont, ProximaNova, serif;
|
|
font-size: 32px;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.charsheet .d20font {
|
|
font-family: dicefontd20, serif;
|
|
}
|
|
|
|
.charsheet * {
|
|
font-family: ProximaNova, "Proxima Nova", "ProximaNova-Regular", serif;
|
|
}
|
|
|
|
.top-logo {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/emberwind-logo-black.png");
|
|
float: right;
|
|
margin-bottom: -60px
|
|
}
|
|
|
|
body.sheet-darkmode .top-logo {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/emberwind-logo-white.png");
|
|
margin-bottom: -40px
|
|
}
|
|
|
|
/*----------------- Container ------------------*/
|
|
|
|
.charsheet {
|
|
background-color: transparent;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-darkmode .sheetform {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.container {
|
|
background-color: transparent;
|
|
max-width: 1100px;
|
|
height: 900px;
|
|
}
|
|
|
|
.charsheet label {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
/*----------------- Common Dark Mode ------------------*/
|
|
|
|
body.sheet-darkmode input,
|
|
body.sheet-darkmode textarea {
|
|
color: #eee;
|
|
background-color: #878787;
|
|
}
|
|
|
|
body.sheet-darkmode summary {
|
|
color: #eee;
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode button,
|
|
body.sheet-darkmode optgroup,
|
|
body.sheet-darkmode select,
|
|
body.sheet-darkmode .charsheet label,
|
|
body.sheet-darkmode .charsheet {
|
|
color: #eee;
|
|
background-color: transparent;
|
|
}
|
|
|
|
body.sheet-darkmode select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
/*background: transparent url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSd3aGl0ZScgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+) no-repeat;*/
|
|
background-position-x: 100%;
|
|
border-radius: 2px;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
body.sheet-darkmode select > option {
|
|
background: dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .btn,
|
|
body.sheet-darkmode .btn.btn-default {
|
|
color: #ffffff;
|
|
text-shadow: rgba(24, 26, 27, .75) 0 1px 1px;
|
|
background-color: #1e2021;
|
|
background-image: linear-gradient(#181a1b, #26292b);
|
|
border-color: #3e4446 #3e4446 #43494c;
|
|
box-shadow: rgba(24, 26, 27, .2) 0 1px 0 inset, rgba(0, 0, 0, .05) 0 1px 2px
|
|
}
|
|
|
|
body.sheet-darkmode .btn:hover,
|
|
body.sheet-darkmode .btn.btn-default:hover {
|
|
color: #c8c3bc;
|
|
background-image: linear-gradient(#3e4446, #3e4446);
|
|
background-color: #3e4446;
|
|
}
|
|
|
|
.charsheet .btn-danger,
|
|
body.sheet-darkmode .btn-danger {
|
|
background-color: rgb(218, 79, 73);
|
|
background-image: -webkit-linear-gradient(top, rgb(238, 95, 91), rgb(189, 54, 47));
|
|
}
|
|
|
|
.btn-danger:hover,
|
|
body.sheet-darkmode .btn-danger:hover {
|
|
background-color: #bd362f;
|
|
}
|
|
|
|
/*----------------- Images ------------------*/
|
|
|
|
img.toughness-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
|
|
}
|
|
|
|
body.sheet-darkmode img.toughness-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-w.png");
|
|
}
|
|
|
|
img.resistance-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
|
|
}
|
|
|
|
body.sheet-darkmode img.resistance-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-w.png");
|
|
}
|
|
|
|
img.dodge-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
|
|
}
|
|
|
|
body.sheet-darkmode img.dodge-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
|
|
}
|
|
|
|
img.willpower-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
|
|
}
|
|
|
|
body.sheet-darkmode img.willpower-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
|
|
}
|
|
|
|
.toughness-image {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
|
|
}
|
|
|
|
.resistance-image {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
|
|
}
|
|
|
|
.dodge-image,
|
|
body.sheet-darkmode .dodge-image {
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
|
|
}
|
|
|
|
.dodge-image:hover,
|
|
body.sheet-darkmode .dodge-image:hover {
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
|
|
}
|
|
|
|
.willpower-image,
|
|
body.sheet-darkmode .willpower-image {
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
|
|
}
|
|
|
|
.willpower-image:hover,
|
|
body.sheet-darkmode .willpower-image:hover {
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
|
|
}
|
|
|
|
.npc-rank-img {
|
|
height: 25px;
|
|
width: 25px;
|
|
}
|
|
|
|
.npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/grunt-w.png");
|
|
}
|
|
|
|
.init-btn:hover > .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/grunt-b.png");
|
|
}
|
|
|
|
.npc-rank-indicator[value="Awakened"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/awakened-w.png");
|
|
}
|
|
|
|
.init-btn:hover > .npc-rank-indicator[value="Awakened"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/awakened-b.png");
|
|
}
|
|
|
|
.npc-rank-indicator[value="Elite"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/elite-w.png");
|
|
}
|
|
|
|
.init-btn:hover > .npc-rank-indicator[value="Elite"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/elite-b.png");
|
|
}
|
|
|
|
.npc-rank-indicator[value="Boss"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/boss-w.png");
|
|
}
|
|
|
|
.init-btn:hover > .npc-rank-indicator[value="Boss"] ~ .npc-rank-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/boss-b.png");
|
|
}
|
|
|
|
/*------------ Repeating Buttons ------------*/
|
|
|
|
.repcontrol .btn {
|
|
border: 0 solid transparent;
|
|
background: none;
|
|
font-size: 0;
|
|
box-shadow: none;
|
|
margin-bottom: 1px;
|
|
font-family: Pictos, serif;
|
|
font-style: normal;
|
|
}
|
|
|
|
body.sheet-darkmode .repcontrol .btn {
|
|
border: 0 solid transparent;
|
|
background: none;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit::after {
|
|
content: '(';
|
|
}
|
|
|
|
.editmode ~ .repcontrol .repcontrol_edit::after {
|
|
content: ')';
|
|
}
|
|
|
|
.repcontrol .repcontrol_add::before {
|
|
content: '&';
|
|
}
|
|
|
|
.repcontrol .repcontrol_add::before,
|
|
.repcontrol .repcontrol_edit::after {
|
|
visibility: visible;
|
|
background-color: #fff;
|
|
border: 1px solid #999;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
height: 12px;
|
|
width: 12px;
|
|
padding: 2px 4px 2px 4px;
|
|
color: #333;
|
|
}
|
|
|
|
body.sheet-darkmode .repcontrol .repcontrol_add::before,
|
|
body.sheet-darkmode .repcontrol .repcontrol_edit::after {
|
|
background-color: #3e4446;
|
|
}
|
|
|
|
.repcontrol .repcontrol_edit:hover::after,
|
|
.repcontrol .repcontrol_add:hover::before {
|
|
background-color: #EFEFEF;
|
|
}
|
|
|
|
div.repcontrol button.repcontrol_add::before,
|
|
div.repcontrol button.repcontrol_edit::before {
|
|
font-family: Pictos, serif;
|
|
position: relative;
|
|
color: #000;
|
|
}
|
|
|
|
body.sheet-darkmode div.repcontrol button.repcontrol_add::before,
|
|
body.sheet-darkmode div.repcontrol button.repcontrol_edit::after {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.repitem .repcontrol_del {
|
|
font-family: Pictos, serif;
|
|
}
|
|
|
|
.repitem .repcontrol_move {
|
|
|
|
}
|
|
|
|
/*----------------- Sheet Settings ------------------*/
|
|
.tab-button + span,
|
|
.tab-button + span + span {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
input.tab-button {
|
|
height: 21px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tab-button:hover + span,
|
|
.tab-button:hover + span + span,
|
|
.tab-button:hover * {
|
|
color: blue;
|
|
}
|
|
|
|
.text-pictos {
|
|
font-family: pictos, fantasy;
|
|
}
|
|
|
|
input.nav:checked + span,
|
|
input.nav:not(:checked) + span + span {
|
|
display: none;
|
|
}
|
|
|
|
input.nav:checked ~ .block-container.block-settings {
|
|
display: block;
|
|
}
|
|
|
|
.block-settings {
|
|
border: 2px dashed dimgrey;
|
|
width: auto;
|
|
}
|
|
|
|
.settings-row {
|
|
padding: 5px;
|
|
}
|
|
|
|
.settings-col {
|
|
padding: 5px;
|
|
}
|
|
|
|
/*----------------- PC / NPC ------------------*/
|
|
|
|
.block-container {
|
|
display: none;
|
|
}
|
|
|
|
input.page-control[value="pc"] ~ .block-container.block-pc {
|
|
padding-top: 10px;
|
|
display: block;
|
|
width: 1100px;
|
|
}
|
|
|
|
input.page-control[value="npc"] ~ .block-container.block-npc {
|
|
padding-top: 10px;
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- Tabs ------------------*/
|
|
|
|
.charsheet .tabs-toggle[value="inventory"] ~ div.tab-inventory,
|
|
.charsheet .tabs-toggle[value="conditions"] ~ div.tab-conditions,
|
|
.charsheet .tabs-toggle[value="guide"] ~ div.tab-guide {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .tabs-toggle[value="character"] ~ div.tab-character {
|
|
display: grid;
|
|
}
|
|
|
|
.charsheet .tab-content {
|
|
display: none;
|
|
}
|
|
|
|
button.tab {
|
|
width: 150px;
|
|
height: 25px;
|
|
border: none;
|
|
margin: -5px 0 0 0;
|
|
text-align: center;
|
|
display: inline-block;
|
|
background: #bababa;
|
|
color: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body.sheet-darkmode button.tab {
|
|
background: #414042;
|
|
color: white;
|
|
}
|
|
|
|
button.tab:hover {
|
|
background: dimgrey;
|
|
color: white;
|
|
font-weight: bold;
|
|
/*border-style: solid;*/
|
|
}
|
|
|
|
body.sheet-darkmode button.tab:hover {
|
|
background: dimgrey;
|
|
}
|
|
|
|
button.tab:focus,
|
|
button.tab:visited {
|
|
background: dimgrey;
|
|
/*color: white;*/
|
|
font-weight: bold;
|
|
/*border-style: solid;*/
|
|
}
|
|
|
|
body.sheet-darkmode button.tab:focus,
|
|
body.sheet-darkmode button.tab:visited {
|
|
background: dimgrey;
|
|
}
|
|
|
|
input.tab {
|
|
width: 150px;
|
|
height: 25px;
|
|
position: relative;
|
|
left: 6px;
|
|
top: 2px;
|
|
margin: -1.5px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
input.tab + span::before {
|
|
content: attr(title);
|
|
border: 2px solid white;
|
|
margin: -5px 0 0 0;
|
|
text-align: center;
|
|
display: inline-block;
|
|
background: #bababa;
|
|
width: 150px;
|
|
height: 23px;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
left: 30px;
|
|
color: white;
|
|
}
|
|
|
|
input.tab:checked + span::before {
|
|
background: dimgrey;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-style: solid;
|
|
}
|
|
|
|
input.tab2 + span::before {
|
|
left: 181px;
|
|
}
|
|
|
|
input.tab3 + span::before {
|
|
left: 331px;
|
|
}
|
|
|
|
input.tab4 + span::before {
|
|
left: 481px;
|
|
}
|
|
|
|
div.tab-content {
|
|
padding: 5px 0 5px 0;
|
|
}
|
|
|
|
.separator {
|
|
width: auto;
|
|
background-color: #bababa;
|
|
height: 3px;
|
|
}
|
|
|
|
body.sheet-darkmode .separator {
|
|
background-color: #414042;
|
|
}
|
|
|
|
/*----------------- Advantage Tabs ------------------*/
|
|
|
|
.advantage-box {
|
|
width: auto;
|
|
/*height: 125px;*/
|
|
/*background-color: #EE5F57;*/
|
|
}
|
|
|
|
.small-hex.advantage-hex,
|
|
.hex.advantage-hex,
|
|
.large-hex.advantage-hex {
|
|
background: #EE5F57;
|
|
}
|
|
|
|
.toggle-advantage,
|
|
.toggle-normal,
|
|
.toggle-disadvantage {
|
|
/*content: attr(title);*/
|
|
border: 2px solid white;
|
|
margin: -5px 0 0 0;
|
|
text-align: center;
|
|
background: dimgrey;
|
|
/*font-size: 16px;*/
|
|
color: white;
|
|
}
|
|
|
|
body.sheet-darkmode .toggle-advantage,
|
|
body.sheet-darkmode .toggle-normal,
|
|
body.sheet-darkmode .toggle-disadvantage {
|
|
border: 2px solid darkgray;
|
|
}
|
|
|
|
.toggle-advantage:hover,
|
|
.toggle-normal:hover,
|
|
.toggle-disadvantage:hover {
|
|
background: darkgray;
|
|
color: white;
|
|
}
|
|
|
|
input.page-control[value="on"] ~ .block-container.mod-block {
|
|
display: block;
|
|
}
|
|
|
|
.mod-box {
|
|
border: 5px solid #bababa;
|
|
}
|
|
|
|
body.sheet-darkmode .mod-box {
|
|
border: 5px solid #878787;
|
|
}
|
|
|
|
.mod-box-red {
|
|
border: 5px solid #FEB8AE;
|
|
}
|
|
|
|
body.sheet-darkmode .mod-box-red {
|
|
border: 5px solid #f58e8d;
|
|
}
|
|
|
|
.mod-box-blue {
|
|
border: 5px solid #B8DCF9;
|
|
}
|
|
|
|
body.sheet-darkmode .mod-box-blue {
|
|
border: 5px solid #72c8eb;
|
|
}
|
|
|
|
.mod-box-green {
|
|
border: 5px solid #BAE0CB;
|
|
}
|
|
|
|
body.sheet-darkmode .mod-box-green {
|
|
border: 5px solid #80cfac;
|
|
}
|
|
|
|
.mod-box-yellow {
|
|
border: 5px solid #FDD5B0;
|
|
}
|
|
|
|
body.sheet-darkmode .mod-box-yellow {
|
|
border: 5px solid #f9b174;
|
|
}
|
|
|
|
/*----------------- GRIDS ------------------*/
|
|
|
|
.main {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 31% 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "main-stats main-actions";
|
|
}
|
|
|
|
.main-stats {
|
|
grid-area: main-stats;
|
|
display: grid;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
padding-right: 5px;
|
|
grid-row-gap: 2px;
|
|
grid-column-gap: 5px;
|
|
grid-template-columns: auto;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "image" "name" "tier" "info" "aspects" "attribute1" "header1" "stats1" "common1" "attribute2" "header2" "stats2" "common2" "header3" "common3" "header4" "common4" "header5" "common5";
|
|
}
|
|
|
|
.main-inventory {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
grid-area: main-stats;
|
|
}
|
|
|
|
.main-actions {
|
|
grid-area: main-actions;
|
|
}
|
|
|
|
.skills-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
grid-template-columns: 47% 1fr 47%;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "skill-left skill-label skill-right"
|
|
}
|
|
|
|
.actions-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
padding-bottom: 3px;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 0.5fr 1.5fr 1fr 1fr 1fr 40% 1.5fr;
|
|
grid-template-areas: "action-button action-name action-type action-target action-range action-effect action-speed";
|
|
}
|
|
|
|
.actions-info-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
padding-bottom: 3px;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 0.5fr 1.5fr 1fr 1fr 1fr 40% 1fr;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "action-button action-name action-name action-name action-name action-effect action-effect";
|
|
}
|
|
|
|
.action-detail-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: auto;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "top-detail" "middle-detail" "bottom-detail";
|
|
}
|
|
|
|
.quick-guide-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: auto;
|
|
padding-bottom: 3px;
|
|
grid-row-gap: 3px;
|
|
grid-template-columns: 1fr;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "guide-top" "guide-middle" "guide-bottom";
|
|
}
|
|
|
|
.npc-actions-grid {
|
|
display: grid;
|
|
height: fit-content;
|
|
padding-bottom: 3px;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 0.5fr 1.5fr 1fr 1fr 50%;
|
|
grid-template-areas: "action-button action-name action-type action-range action-effect";
|
|
}
|
|
|
|
.npc-actions-info-grid {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
padding-bottom: 3px;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 0.5fr 1.5fr 1fr 1fr 50%;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "action-button action-name action-name action-name action-effect";
|
|
}
|
|
|
|
.npc-grid {
|
|
margin: 0 auto;
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-count: 2;
|
|
-moz-column-gap: 25px;
|
|
-webkit-column-gap: 25px;
|
|
column-gap: 25px;
|
|
}
|
|
|
|
@media screen and (max-width: 1100px) {
|
|
.npc-grid {
|
|
-moz-column-count: 1;
|
|
-webkit-column-count: 1;
|
|
column-count: 1;
|
|
}
|
|
}
|
|
|
|
.npc-grid-item {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
width: 100%;
|
|
/*margin: 5px 0;*/
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.npc-conditions-grid {
|
|
margin: 0 auto;
|
|
-moz-column-count: 3;
|
|
-webkit-column-count: 3;
|
|
column-count: 3;
|
|
padding-left: 10px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
@media screen and (max-width: 690px) {
|
|
.npc-conditions-grid {
|
|
-moz-column-count: 2;
|
|
-webkit-column-count: 2;
|
|
column-count:2;
|
|
}
|
|
}
|
|
|
|
body.sheet-darkmode .npc-conditions-grid {
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
.npc-condition {
|
|
background-color: lightgrey;
|
|
border-bottom: 2px solid whitesmoke;
|
|
}
|
|
|
|
body.sheet-darkmode .npc-condition {
|
|
background-color: dimgrey;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.npc-condition-item-grid {
|
|
display: grid;
|
|
width: auto;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-rows: fit-content(100%);
|
|
}
|
|
|
|
.grid-2-col {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.grid-3-col {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.grid-4-col {
|
|
display: grid;
|
|
width: auto;
|
|
height: fit-content;
|
|
grid-column-gap: 3px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
|
|
/*----------------- Quick Guide ------------------*/
|
|
|
|
.guide-top {
|
|
grid-area: guide-top;
|
|
padding: 7px;
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
grid-gap: 15px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
.guide-top > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.guide-middle {
|
|
grid-area: guide-middle;
|
|
padding: 7px;
|
|
}
|
|
|
|
.guide-middle-grid {
|
|
border: 5px solid #bababa;
|
|
padding: 7px;
|
|
display: grid;
|
|
grid-template-columns: 1fr max-content 1fr max-content 1fr;
|
|
grid-gap: 5px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
body.sheet-darkmode .guide-middle-grid {
|
|
border: 5px solid #414042;
|
|
}
|
|
|
|
.chevron-arrow-right {
|
|
display: inline-block;
|
|
background-color: #bababa;
|
|
width: 33px;
|
|
height: 111%;
|
|
margin-top: -10px;
|
|
clip-path: polygon(52% 0, 100% 53%, 52% 100%, 36% 100%, 81% 52%, 35% 0);
|
|
}
|
|
|
|
body.sheet-darkmode .chevron-arrow-right {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.guide-bottom {
|
|
grid-area: guide-bottom;
|
|
padding: 7px;
|
|
display: grid;
|
|
grid-template-columns: 30% 1fr;
|
|
grid-gap: 15px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
.guide-special {
|
|
padding: 25px 10px 10px 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 15px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
margin-top: -25px;
|
|
z-index: -1;
|
|
position: relative;
|
|
}
|
|
|
|
.guide-header {
|
|
height: 50px;
|
|
width: fit-content;
|
|
padding: 0 50px 0 50px;
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
color: white;
|
|
background-position-y: 2px;
|
|
background-position-x: 0;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
|
|
}
|
|
|
|
.guide-header-big {
|
|
font-weight: bold;
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.guide-header-long {
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/red-bar-tall.png");
|
|
}
|
|
|
|
.guide-header-small {
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.guide-p {
|
|
/*background: -webkit-linear-gradient(130deg, #f1413a 60%, #B8DCF9 50%);*/
|
|
background: -webkit-linear-gradient(130deg, #f1413a 65%, #14a4de 50%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
body.sheet-darkmode .guide-p {
|
|
background: -webkit-linear-gradient(130deg, #FEB8AE 65%, #B8DCF9 50%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/*----------------- Conditions ------------------*/
|
|
|
|
.condition-grid {
|
|
display: grid;
|
|
width: auto;
|
|
grid-template-columns: 2fr 0.75fr 75%;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "condition value description";
|
|
}
|
|
|
|
.condition-with-foe-grid {
|
|
display: grid;
|
|
width: auto;
|
|
grid-template-columns: 2fr 0.75fr 37.5% 37.5%;
|
|
grid-auto-rows: fit-content(100%);
|
|
grid-template-areas: "condition value description-hero description-foe";
|
|
}
|
|
|
|
.condition-grid > div,
|
|
.condition-with-foe-grid > div {
|
|
background-color: white;
|
|
padding: 5px;
|
|
border-bottom: 1px solid dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .condition-grid > div,
|
|
body.sheet-darkmode .condition-with-foe-grid > div {
|
|
background-color: inherit;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
.condition-grid > div:nth-child(1),
|
|
.condition-grid > div:nth-child(2),
|
|
.condition-with-foe-grid > div:nth-child(1),
|
|
.condition-with-foe-grid > div:nth-child(2),
|
|
.condition-with-foe-grid > div:nth-child(3) {
|
|
border-right: 1px solid dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .condition-grid > div:nth-child(1),
|
|
body.sheet-darkmode .condition-grid > div:nth-child(2),
|
|
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(1),
|
|
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(2),
|
|
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(3) {
|
|
border-right: 1px solid white;
|
|
}
|
|
|
|
.condition-grid > .condition,
|
|
.condition-with-foe-grid > .condition,
|
|
.condition-grid > .value,
|
|
.condition-with-foe-grid > .value {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.condition-grid > .description,
|
|
.condition-with-foe-grid > .description-hero,
|
|
.condition-with-foe-grid > .description-foe {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.condition-selector-max {
|
|
grid-area: condition-selector;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.condition-selector-max {
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
|
|
/*----------------- Sections ------------------*/
|
|
|
|
.section {
|
|
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
/*justify-content: flex-start;*/
|
|
}
|
|
|
|
.charsheet .flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .flex-center-left {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/*----------------- Image section ------------------*/
|
|
.image {
|
|
grid-area: image;
|
|
height: 55px;
|
|
text-align: center;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.image:active {
|
|
box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.init-btn::before {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
.init-btn {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #EE5F57;
|
|
background-image: none;
|
|
border: none;
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
body.sheet-darkmode .init-btn {
|
|
background-color: #EE5F57;
|
|
background-image: none;
|
|
}
|
|
|
|
.init-btn:hover,
|
|
body.sheet-darkmode .init-btn:hover {
|
|
background-color: #EE5F57;
|
|
background-image: none;
|
|
}
|
|
|
|
.init-btn span {
|
|
font-size: 1.25em;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.init-btn:hover span {
|
|
color: black;
|
|
}
|
|
|
|
.class-img {
|
|
height: 50px;
|
|
width: 50px;
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
.class-control[value="archer"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/archer-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="archer"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/archer-b.png");
|
|
}
|
|
|
|
.class-control[value="ardent"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/ardent-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="ardent"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/ardent-b.png");
|
|
}
|
|
|
|
.class-control[value="atlanta"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/atlanta-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="atlanta"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/atlanta-b.png");
|
|
}
|
|
|
|
.class-control[value="druid"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/druid-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="druid"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/druid-b.png");
|
|
}
|
|
|
|
.class-control[value="invoker"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/invoker-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="invoker"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/invoker-b.png");
|
|
}
|
|
|
|
.class-control[value="rogue"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/rouge-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="rogue"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/rouge-b.png");
|
|
}
|
|
|
|
.class-control[value="spiritualist"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/spiritualist-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="spiritualist"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/spiritualist-b.png");
|
|
}
|
|
|
|
.class-control[value="tactician"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/tactician-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="tactician"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/tactician-b.png");
|
|
}
|
|
|
|
.class-control[value="warrior"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/warrior-w.png");
|
|
display: inline-flex;
|
|
}
|
|
|
|
.init-btn:hover > .class-control[value="warrior"] ~ .class-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/warrior-b.png");
|
|
}
|
|
|
|
/*----------------- Button section ------------------*/
|
|
|
|
.action-button {
|
|
grid-area: action-button;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*----------------- Name section ------------------*/
|
|
|
|
.name {
|
|
grid-area: name;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.name-header {
|
|
height: 40px;
|
|
width: 115px;
|
|
margin-left: -20px;
|
|
padding: 0 5px 0 5px;
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
color: white;
|
|
background-position-y: 2px;
|
|
background-position-x: 0;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.name-header span {
|
|
float: left;
|
|
width: fit-content;
|
|
font-weight: bold;
|
|
margin-left: 20px;
|
|
padding-top: 10px;
|
|
position: center;
|
|
font-size: 1.25em;
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.name input {
|
|
width: 85%;
|
|
padding: 3px;
|
|
border-bottom: 1px solid dimgrey;
|
|
}
|
|
|
|
/*----------------- Tier section ------------------*/
|
|
|
|
.tier {
|
|
grid-area: tier;
|
|
display: flex;
|
|
border-bottom: 2px solid lightgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .tier {
|
|
border-bottom: 2px solid #414042;
|
|
}
|
|
|
|
.tier span {
|
|
font-weight: bold;
|
|
padding: 3px;
|
|
}
|
|
|
|
.tier input {
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.info-tier-box {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
/*----------------- Info section ------------------*/
|
|
.info {
|
|
grid-area: info;
|
|
height: auto;
|
|
/*border: 3px solid #EE5F57;*/
|
|
}
|
|
|
|
.info-hp-text {
|
|
border: 3px solid lightgrey;
|
|
background-color: lightgrey;
|
|
padding: 10px 5px 10px 5px;
|
|
color: dimgrey;
|
|
font-weight: bold;
|
|
}
|
|
|
|
body.sheet-darkmode .info-hp-text {
|
|
border: 3px solid #414042;
|
|
background-color: #414042;
|
|
color: white;
|
|
}
|
|
|
|
.npc-info-hp-text {
|
|
background-color: #EE5F57;
|
|
padding: 4px 5px 3px 5px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-hp-box {
|
|
width: 35%;
|
|
background-color: #e6e7e8;
|
|
padding-top: 5px;
|
|
padding-bottom: 7px;
|
|
padding-left: 10px;
|
|
margin-left: -5px;
|
|
border: 3px solid lightgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .info-hp-box {
|
|
background-color: dimgrey;
|
|
border: 3px solid #414042;
|
|
}
|
|
|
|
.info-hp-box input {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
background: transparent;
|
|
}
|
|
|
|
input.medium {
|
|
width: 50%;
|
|
padding: 2px;
|
|
}
|
|
|
|
.info-tier-box {
|
|
float: right;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.info-class-box {
|
|
align-content: center;
|
|
padding-top: 7px;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-subclass-box {
|
|
padding: 2px 5px 2px 5px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-custom-class {
|
|
padding: 2px 0 2px 5px;
|
|
display: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.class-control[value="custom"] ~ .info-custom-class {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- Aspects section ------------------*/
|
|
.aspects {
|
|
grid-area: aspects;
|
|
border-bottom: 3px solid lightgrey;
|
|
display: none;
|
|
}
|
|
|
|
.aspects-col {
|
|
width: 30%;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.aspect-dropdown {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.aspect-button {
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 4px 3px;
|
|
background-color: #ffffff;
|
|
border: 1px solid lightgrey;
|
|
cursor: pointer;
|
|
white-space: normal;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
body.sheet-darkmode .aspect-button {
|
|
background-color: inherit;
|
|
border: 1px solid lightgrey;
|
|
}
|
|
|
|
.aspect-button > span {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.aspect-button:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 5px solid transparent;
|
|
border-right: 5px solid transparent;
|
|
border-top: 5px solid black;
|
|
}
|
|
|
|
body.sheet-darkmode .aspect-button:after {
|
|
border-top: 5px solid lightgrey;
|
|
}
|
|
|
|
.aspect-button:hover {
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
body.sheet-darkmode .aspect-button:hover {
|
|
background-color: dimgray;
|
|
}
|
|
|
|
.aspect-off-switch:checked ~ .aspect-button,
|
|
.aspect-def-switch:checked ~ .aspect-button,
|
|
.aspect-util-switch:checked ~ .aspect-button {
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .aspect-off-switch:checked ~ .aspect-button,
|
|
body.sheet-darkmode .aspect-def-switch:checked ~ .aspect-button,
|
|
body.sheet-darkmode .aspect-util-switch:checked ~ .aspect-button {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.charsheet .aspect-off-switch,
|
|
.charsheet .aspect-def-switch,
|
|
.charsheet .aspect-util-switch {
|
|
display: none;
|
|
}
|
|
|
|
.aspect-off-switch ~ .aspect-off,
|
|
.aspect-def-switch ~ .aspect-def,
|
|
.aspect-util-switch ~ .aspect-util {
|
|
display: none;
|
|
}
|
|
|
|
.aspect-off-switch:checked ~ .aspect-off,
|
|
.aspect-def-switch:checked ~ .aspect-def,
|
|
.aspect-util-switch:checked ~ .aspect-util {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- Headers ------------------*/
|
|
|
|
div.header {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
body.sheet-darkmode div.header {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.header1 {
|
|
grid-area: header1;
|
|
}
|
|
|
|
.header2 {
|
|
grid-area: header2;
|
|
}
|
|
|
|
.header3 {
|
|
grid-area: header3;
|
|
}
|
|
|
|
.header4 {
|
|
grid-area: header4;
|
|
}
|
|
|
|
.header5 {
|
|
grid-area: header5;
|
|
}
|
|
|
|
.header1, .header2, .header3, .header4, .header5 {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
body.sheet-darkmode .header1,
|
|
body.sheet-darkmode .header2,
|
|
body.sheet-darkmode .header3,
|
|
body.sheet-darkmode .header4,
|
|
body.sheet-darkmode .header5 {
|
|
background-color: #414042;
|
|
}
|
|
|
|
/*----------------- Attribute section ------------------*/
|
|
|
|
.attribute1 {
|
|
grid-area: attribute1;
|
|
display: none;
|
|
}
|
|
|
|
.attribute2 {
|
|
grid-area: attribute2;
|
|
display: none;
|
|
}
|
|
|
|
.attribute-col {
|
|
display: inline-flex;
|
|
width: 70%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: 6px;
|
|
padding-bottom: 8px;
|
|
padding-right: 2px;
|
|
color: black;
|
|
}
|
|
|
|
.character-version-control[value="aspect"] ~ .aspects,
|
|
.character-version-control[value="attribute"] ~ .attribute1,
|
|
.character-version-control[value="attribute"] ~ .attribute2 {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- Stats ------------------*/
|
|
|
|
.stats1 {
|
|
grid-area: stats1;
|
|
}
|
|
|
|
.stats2 {
|
|
grid-area: stats2;
|
|
}
|
|
|
|
.stats-col {
|
|
width: 70%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 3px 0 4px 2px;
|
|
color: black;
|
|
}
|
|
|
|
.stat-value {
|
|
float: right;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.stat-value input {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*----------------- Common ------------------*/
|
|
|
|
.common1 {
|
|
grid-area: common1;
|
|
}
|
|
|
|
.common2 {
|
|
grid-area: common2;
|
|
}
|
|
|
|
.skill-left {
|
|
grid-area: skill-left;
|
|
border: 1px solid dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .skill-left {
|
|
border: 1px solid #414042;
|
|
}
|
|
|
|
.skill-label {
|
|
grid-area: skill-label;
|
|
background-color: dimgrey;
|
|
color: white;
|
|
writing-mode: vertical-rl;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
body.sheet-darkmode .skill-label {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.skill-right {
|
|
grid-area: skill-right;
|
|
border: 1px solid dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .skill-right {
|
|
border: 1px solid #414042;
|
|
}
|
|
|
|
.skill {
|
|
display: block;
|
|
/*width: 99%;*/
|
|
height: auto;
|
|
/*text-align: center;*/
|
|
font-weight: bold;
|
|
font-size: 0.75em;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
border: 1px solid dimgrey;
|
|
background: #e6e7e8;
|
|
/*margin-bottom: -5px;*/
|
|
}
|
|
|
|
body.sheet-darkmode .skill {
|
|
border: 1px solid #414042;
|
|
background: dimgrey;
|
|
}
|
|
|
|
.skill input {
|
|
float: right;
|
|
text-align: right;
|
|
border: none;
|
|
background: transparent;
|
|
font-weight: bold;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.skill button[type=roll] {
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: bold;
|
|
/*float: left;*/
|
|
padding: 2px;
|
|
}
|
|
|
|
body.sheet-darkmode .skill button[type=roll] {
|
|
color: white;
|
|
}
|
|
|
|
.skill button[type=roll]:before {
|
|
/*content: " ";*/
|
|
}
|
|
|
|
.skill button[type=roll]:hover {
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .skill button[type=roll]:hover {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.common3 {
|
|
grid-area: common3;
|
|
}
|
|
|
|
.common4 {
|
|
grid-area: common4;
|
|
}
|
|
|
|
.common5 {
|
|
grid-area: common5;
|
|
}
|
|
|
|
/*----------------- Actions ------------------*/
|
|
|
|
.action-damage-vs {
|
|
display: none;
|
|
}
|
|
|
|
.tide-action-damage-indicator[value="1"] ~ .action-damage-vs,
|
|
.tide-action-damage-indicator[value="2"] ~ .action-damage-vs,
|
|
.action-damage-indicator[value="1"] ~ .action-damage-vs,
|
|
.action-damage-indicator[value="2"] ~ .action-damage-vs {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.tide-action-damage-indicator[value="1"] ~ .tide-action-damage-toughness,
|
|
.tide-action-damage-indicator[value="2"] ~ .tide-action-damage-resistance,
|
|
.tide-action-damage-indicator[value="3"] ~ .tide-action-damage-piercing,
|
|
.action-damage-indicator[value="1"] ~ .action-damage-toughness,
|
|
.action-damage-indicator[value="2"] ~ .action-damage-resistance,
|
|
.action-damage-indicator[value="3"] ~ .action-damage-piercing,
|
|
.melee-damage-indicator[value="1"] ~ .melee-damage-toughness,
|
|
.melee-damage-indicator[value="2"] ~ .melee-damage-resistance,
|
|
.ranged-damage-indicator[value="1"] ~ .ranged-damage-toughness,
|
|
.ranged-damage-indicator[value="2"] ~ .ranged-damage-resistance {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tide-action-damage-resistance,
|
|
.tide-action-damage-piercing,
|
|
.action-damage-resistance,
|
|
.action-damage-piercing {
|
|
margin-left: -23px;
|
|
}
|
|
|
|
.melee-damage-resistance,
|
|
.ranged-damage-resistance {
|
|
margin-left: -20px;
|
|
}
|
|
|
|
.tide-action-damage-resistance,
|
|
.tide-action-damage-toughness,
|
|
.tide-action-damage-piercing,
|
|
.action-damage-resistance,
|
|
.action-damage-toughness,
|
|
.action-damage-piercing,
|
|
.melee-damage-resistance,
|
|
.melee-damage-toughness,
|
|
.ranged-damage-resistance,
|
|
.ranged-damage-toughness {
|
|
opacity: 0;
|
|
}
|
|
|
|
.description-control[value="Amplify"] ~ .action-amp-effect,
|
|
.description-control[value="Trigger"] ~ .action-trig-effect,
|
|
.description-control[value="Sustain"] ~ .action-sust-effect {
|
|
display: block;
|
|
}
|
|
|
|
.action-amp-effect,
|
|
.action-trig-effect,
|
|
.action-sust-effect {
|
|
display: none;
|
|
}
|
|
|
|
.action-amp-effect,
|
|
.action-trig-effect,
|
|
.action-sust-effect,
|
|
.action-description {
|
|
padding: 2px 5px 0 5px;
|
|
}
|
|
|
|
.indicator,
|
|
.sheet-rolltemplate-action .indicator {
|
|
padding: 1px;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.action-name {
|
|
grid-area: action-name;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.action-name button[type=roll] {
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
height: 100%;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
font-size: 1.0em;
|
|
}
|
|
|
|
.action-name button[type=roll]:before {
|
|
content: " ";
|
|
}
|
|
|
|
.action-name button[type=roll]:hover {
|
|
background-color: #e6e7e8;
|
|
color: blue;
|
|
}
|
|
|
|
.action-type {
|
|
grid-area: action-type;
|
|
}
|
|
|
|
.action-type-border-bottom-1 {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
body.sheet-darkmode .action-type-border-bottom-1 {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
.action-target {
|
|
grid-area: action-target;
|
|
}
|
|
|
|
.action-range {
|
|
grid-area: action-range;
|
|
}
|
|
|
|
.action-effect {
|
|
grid-area: action-effect;
|
|
}
|
|
|
|
.action-speed {
|
|
grid-area: action-speed;
|
|
}
|
|
|
|
.action-centered {
|
|
background-color: #e6e7e8;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
.action-leftCentered {
|
|
background-color: #e6e7e8;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
.action-text {
|
|
background-color: #e6e7e8;
|
|
text-align: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
body.sheet-darkmode .action-centered,
|
|
body.sheet-darkmode .action-leftCentered,
|
|
body.sheet-darkmode .action-text {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
}
|
|
|
|
.action-tide-centered {
|
|
background-color: #FEE9D4;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
.action-tide-leftCentered {
|
|
background-color: #FEE9D4;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
.action-tide-text {
|
|
background-color: #FEE9D4;
|
|
text-align: center;
|
|
padding: 3px;
|
|
}
|
|
|
|
body.sheet-darkmode .action-tide-centered,
|
|
body.sheet-darkmode .action-tide-leftCentered,
|
|
body.sheet-darkmode .action-tide-text {
|
|
background-color: #F9B276;
|
|
color: black;
|
|
}
|
|
|
|
.action-header {
|
|
width: auto;
|
|
height: auto;
|
|
background-color: dimgrey;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
margin-right: -5px;
|
|
}
|
|
|
|
.action-header-left {
|
|
width: auto;
|
|
height: auto;
|
|
background-color: dimgrey;
|
|
color: white;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
padding-top: 3px;
|
|
padding-left: 5px;
|
|
margin-right: -5px;
|
|
}
|
|
|
|
body.sheet-darkmode .action-header,
|
|
body.sheet-darkmode .action-header-left {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.action-info-title {
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-info {
|
|
font-size: 0.8em;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
input.roll-control[value="0"] ~ .action-damage,
|
|
input.roll-control[value="2"] ~ .action-damage,
|
|
input.roll-control[value="3"] ~ .action-healing,
|
|
input.roll-control[value="4"] ~ .action-trigger {
|
|
display: block;
|
|
}
|
|
|
|
input.custom-damage-control[value="0"] ~ .action-custom-damage {
|
|
display: block;
|
|
}
|
|
|
|
.action-damage {
|
|
display: none;
|
|
}
|
|
|
|
.action-custom-damage {
|
|
display: none;
|
|
}
|
|
|
|
.action-healing {
|
|
display: none;
|
|
}
|
|
|
|
.action-trigger {
|
|
display: none;
|
|
}
|
|
|
|
input.action-description-indicator[value="3"] ~ .action-healing-description,
|
|
input.action-description-indicator[value="0"] ~ .action-damage-description,
|
|
input.action-description-indicator[value="2"] ~ .action-auto-hit-description {
|
|
display: block;
|
|
}
|
|
|
|
.action-damage-description {
|
|
display: none;
|
|
}
|
|
|
|
.action-auto-hit-description {
|
|
display: none;
|
|
}
|
|
|
|
.action-healing-description {
|
|
display: none;
|
|
}
|
|
|
|
.action-field {
|
|
display: none;
|
|
}
|
|
|
|
.action-field-indicator[value="show"] ~ .action-field {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- Character Columns ------------------*/
|
|
|
|
.stats {
|
|
top: 45px;
|
|
width: 33%;
|
|
height: auto;
|
|
position: absolute;
|
|
}
|
|
|
|
.skills {
|
|
top: 45px;
|
|
width: 66%;
|
|
height: auto;
|
|
position: absolute;
|
|
}
|
|
|
|
/*----------------- Colours ------------------*/
|
|
|
|
.charsheet .black-text,
|
|
body.sheet-darkmode .black-text {
|
|
color: black;
|
|
}
|
|
|
|
.charsheet .white-text,
|
|
body.sheet-darkmode .white-text {
|
|
color: white;
|
|
}
|
|
|
|
.light-red {
|
|
background-color: #feeceb;
|
|
/*background-color: #fbd4c9;*/
|
|
}
|
|
|
|
body.sheet-darkmode .light-red {
|
|
background-color: #f58e8d;
|
|
}
|
|
|
|
.light-red-text {
|
|
color: #FEB8AE;
|
|
}
|
|
|
|
.red {
|
|
background-color: #FEB8AE;
|
|
}
|
|
|
|
body.sheet-darkmode .red {
|
|
background-color: #f15d5c;
|
|
}
|
|
|
|
.red-only-text {
|
|
color: #f1413a;
|
|
}
|
|
|
|
.red-text {
|
|
color: #f1413a;
|
|
}
|
|
|
|
body.sheet-darkmode .red-text {
|
|
color: #FEB8AE;
|
|
}
|
|
|
|
.deep-red {
|
|
background-color: #f1413a;
|
|
color: white;
|
|
}
|
|
|
|
.deep-red-text {
|
|
color: #f1413a;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #B8DCF9;
|
|
}
|
|
|
|
body.sheet-darkmode .blue {
|
|
background-color: #14a4de;
|
|
}
|
|
|
|
.blue-text {
|
|
color: #14a4de;
|
|
}
|
|
|
|
body.sheet-darkmode .blue-text {
|
|
color: #cbe0f5;
|
|
}
|
|
|
|
.light-blue {
|
|
background-color: #cbe0f5;
|
|
}
|
|
|
|
body.sheet-darkmode .light-blue {
|
|
background-color: #72c8eb;
|
|
}
|
|
|
|
.green {
|
|
background-color: #BAE0CB;
|
|
}
|
|
|
|
body.sheet-darkmode .green {
|
|
background-color: #4abb88;
|
|
}
|
|
|
|
.green-text {
|
|
color: #4abb88;
|
|
}
|
|
|
|
body.sheet-darkmode .green-text {
|
|
color: #d3ebdc;
|
|
}
|
|
|
|
.light-green {
|
|
background-color: #d3ebdc;
|
|
}
|
|
|
|
body.sheet-darkmode .light-green {
|
|
background-color: #80cfac;
|
|
}
|
|
|
|
.yellow {
|
|
background-color: #FDD5B0;
|
|
}
|
|
|
|
body.sheet-darkmode .yellow {
|
|
background-color: #f89e51;
|
|
}
|
|
|
|
.yellow-text {
|
|
color: #F9B276;
|
|
}
|
|
|
|
body.sheet-darkmode .yellow-text {
|
|
color: #fee3cb;
|
|
}
|
|
|
|
.light-yellow {
|
|
background-color: #fee3cb;
|
|
}
|
|
|
|
body.sheet-darkmode .light-yellow {
|
|
background-color: #f9b174;
|
|
}
|
|
|
|
.red .blue .green .yellow {
|
|
text-align: center;
|
|
text-decoration-style: double;
|
|
}
|
|
|
|
.lightestgrey {
|
|
background-color: #ededed;
|
|
}
|
|
|
|
.lightgrey {
|
|
/*background-color: #E7E8EA;*/
|
|
background-color: #e6e7e8;
|
|
}
|
|
|
|
.grey {
|
|
/*background-color: darkgrey;*/
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
.dimgrey {
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
.purple-text {
|
|
color: #845a91;
|
|
}
|
|
|
|
.purple {
|
|
background-color: #E5DCED;
|
|
}
|
|
|
|
body.sheet-darkmode .purple {
|
|
background-color: #845a91;
|
|
}
|
|
|
|
.npc-red-text {
|
|
color: indianred;
|
|
}
|
|
|
|
/*----------------- Selectors ------------------*/
|
|
|
|
select.selector {
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
select.selector-fit {
|
|
width: auto;
|
|
}
|
|
|
|
/*----------------- Inputs ------------------*/
|
|
|
|
input.x-small {
|
|
width: 8%;
|
|
margin: 4px;
|
|
}
|
|
|
|
input.small,
|
|
.charsheet input.small {
|
|
width: 20%;
|
|
}
|
|
|
|
input[type=number].medium {
|
|
width: 50%;
|
|
}
|
|
|
|
input.cap {
|
|
width: 60%;
|
|
}
|
|
|
|
input.right {
|
|
text-align: right;
|
|
}
|
|
|
|
/*----------------- CAP Check ------------------*/
|
|
|
|
.critical {
|
|
border: 5px solid #FEB8AE;
|
|
}
|
|
|
|
body.sheet-darkmode .critical {
|
|
border: 5px solid #f58e8d;
|
|
}
|
|
|
|
.accuracy {
|
|
border: 5px solid #BAE0CB;
|
|
}
|
|
|
|
body.sheet-darkmode .accuracy {
|
|
border: 5px solid #80cfac;
|
|
}
|
|
|
|
.penetration {
|
|
border: 5px solid;
|
|
border-image: linear-gradient(to bottom, #72c8eb 50%, #FEB8AE 50%, #FEB8AE 50%) 5;
|
|
}
|
|
|
|
body.sheet-darkmode .penetration {
|
|
border-image: linear-gradient(to bottom, #72c8eb 50%, #f58e8d 50%, #f58e8d 50%) 5;
|
|
}
|
|
|
|
.cap-main-col {
|
|
width: 30%;
|
|
}
|
|
|
|
.cap-sep-col {
|
|
width: fit-content;
|
|
padding: 12px 3px 12px 3px;
|
|
}
|
|
|
|
/*----------------- ------------------*/
|
|
|
|
.title {
|
|
float: left;
|
|
font-weight: bold;
|
|
padding: 3px;
|
|
}
|
|
|
|
.subtitle {
|
|
padding: 1px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.charsheet .bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.normal {
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.center-text {
|
|
text-align: center;
|
|
}
|
|
|
|
.right-text {
|
|
text-align: right;
|
|
}
|
|
|
|
.size-25-box {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.size-20-box {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.padding-2 {
|
|
padding: 2px;
|
|
}
|
|
|
|
.padding-3 {
|
|
padding: 3px;
|
|
}
|
|
|
|
.padding-2505 {
|
|
padding: 2px 5px 0 5px;
|
|
}
|
|
|
|
.padding-2525 {
|
|
padding: 2px 5px 2px 5px;
|
|
}
|
|
|
|
.padding-0525 {
|
|
padding: 0 5px 2px 5px;
|
|
}
|
|
|
|
.padding-top-2 {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.padding-top-3 {
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.padding-top4 {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.padding-top5 {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.padding-left10 {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.padding-right2 {
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.charsheet .padding-right5 {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.charsheet .padding-right10 {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.padding-right20 {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.padding-bottom3 {
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.padding-bottom5 {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.padding-bottom10 {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.padding-bottom15 {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.padding-bottom20 {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.padding-bottom25 {
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
.padding-v-2 {
|
|
padding-bottom: 2px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.padding-v-3 {
|
|
padding-bottom: 3px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
.padding-v-5 {
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.padding-v-10 {
|
|
padding-bottom: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.padding-v-15 {
|
|
padding-bottom: 15px;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.padding-v-20 {
|
|
padding-bottom: 20px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.padding-h-5 {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.padding-h-10 {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.padding-h-15 {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.padding-h-20 {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.no-border {
|
|
border: none;
|
|
}
|
|
|
|
.transparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
body.sheet-darkmode .transparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.border-bottom-1 {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.border-bottom-2 {
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
body.sheet-darkmode .border-bottom-2 {
|
|
border-bottom: 2px solid #414042;
|
|
}
|
|
|
|
.border-bottom-grey-1 {
|
|
border-bottom: 1px solid dimgrey;
|
|
}
|
|
|
|
.border-bottom-grey-2 {
|
|
border-bottom: 2px solid dimgrey;
|
|
}
|
|
|
|
.border-red {
|
|
border: 3px solid #EE5F57;
|
|
}
|
|
|
|
input.custom-number-input::-webkit-outer-spin-button,
|
|
input.custom-number-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number].custom-number-input {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
width: 1.4em;
|
|
height: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type=number].small-number-input {
|
|
width: 1.4em;
|
|
height: 1.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
input.move-number-input::-webkit-outer-spin-button,
|
|
input.move-number-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number].move-number-input {
|
|
-moz-appearance: textfield; /* Firefox */
|
|
width: 1.9em;
|
|
height: 1.5em;
|
|
border: none;
|
|
border-bottom: 1px solid grey;
|
|
}
|
|
|
|
.charsheet button[type=roll].custom-roll-button::before {
|
|
content: "";
|
|
}
|
|
|
|
.charsheet button[type=roll].custom-roll-button,
|
|
body.sheet-darkmode .custom-roll-button {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-color: transparent;
|
|
/*background-image: none;*/
|
|
}
|
|
|
|
body.sheet-darkmode .custom-roll-button:hover {
|
|
/*background-image: none;*/
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*----------------- Inventory / Bio ------------------*/
|
|
|
|
.inventory-header {
|
|
font-weight: bold;
|
|
/*font-variant: small-caps;*/
|
|
font-size: 1.7em;
|
|
border-bottom: 2px solid dimgrey;
|
|
width: fit-content;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.inventory-title {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
body.sheet-darkmode .inventory-title {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.inventory-box {
|
|
border: 2px solid dimgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .inventory-box {
|
|
border: 2px solid #414042;
|
|
}
|
|
|
|
.inventory-box-upper {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
border-bottom: 2px solid lightgrey;
|
|
padding: 2px;
|
|
}
|
|
|
|
body.sheet-darkmode .inventory-box-upper {
|
|
background-color: #414042;
|
|
border-bottom: 2px solid dimgrey;
|
|
}
|
|
|
|
.inventory-box-lower {
|
|
background-color: #e6e7e8;
|
|
}
|
|
|
|
body.sheet-darkmode .inventory-box-lower {
|
|
background-color: dimgrey;
|
|
border-bottom: 2px solid #414042;
|
|
}
|
|
|
|
.inventory-selector {
|
|
border-color: lightgrey;
|
|
}
|
|
|
|
input.white-text[type=text] {
|
|
color: white;
|
|
}
|
|
|
|
/*** FOR CHECKBOX SELECTION ***/
|
|
/*** FOR SHOW/HIDE ***/
|
|
input[type=checkbox].tab-hide {
|
|
display: inline-block;
|
|
width: 24px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
input[type=checkbox].tab-hide + div {
|
|
display: inline-block;
|
|
margin-left: -27px;
|
|
width: 25px;
|
|
font-family: pictos, fantasy;
|
|
font-size: 2.0em;
|
|
color: #A0A0A0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=checkbox].tab-hide:checked + div {
|
|
display: inline-block;
|
|
color: black;
|
|
}
|
|
|
|
input[type=checkbox].tab-hide:hover + div,
|
|
input[type=checkbox].tab-hide:hover * {
|
|
display: inline-block;
|
|
color: blue;
|
|
}
|
|
|
|
/*** END FOR SHOW/HIDE ***/
|
|
/*** END FOR CHECKBOX SELECTION ***/
|
|
|
|
.inlineBlock {
|
|
display: inline-block;
|
|
}
|
|
|
|
.vertTop {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.padLeft {
|
|
padding-Left: 10px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*----------------- Settings ------------------*/
|
|
|
|
.settings-box {
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
background: #3FB315;
|
|
}
|
|
|
|
.settings {
|
|
z-index: 2;
|
|
opacity: 0;
|
|
bottom: 50%;
|
|
left: -50%;
|
|
position: absolute;
|
|
}
|
|
|
|
/* Settings button as gear (uses letter 'y' in pictos font) as a checkbox to be used with js */
|
|
.settings + span {
|
|
display: inline-block;
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: -50%;
|
|
font-size: 20px;
|
|
font-family: pictos, fantasy;
|
|
color: #A0A0A0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings:checked + span {
|
|
color: black;
|
|
display: inline-block;
|
|
}
|
|
|
|
.settings:hover + span,
|
|
.settings:hover * {
|
|
color: blue;
|
|
display: inline-block;
|
|
}
|
|
|
|
.show-hide {
|
|
display: none;
|
|
}
|
|
|
|
input[type=checkbox].tab-hide:checked ~ .show-hide {
|
|
display: inline-block;
|
|
}
|
|
|
|
.displaySettings {
|
|
display: block;
|
|
background-color: #ededed;
|
|
border: 2px dotted dimgrey;
|
|
margin-bottom: 10px;
|
|
margin-left: 9%;
|
|
}
|
|
|
|
body.sheet-darkmode .displaySettings {
|
|
background-color: dimgrey;
|
|
border: 2px dotted #414042;
|
|
}
|
|
|
|
.melee_display_settings_flag[value="hide"] ~ .displaySettings,
|
|
.ranged_display_settings_flag[value="hide"] ~ .displaySettings,
|
|
.maneuver_display_settings_flag[value="hide"] ~ .displaySettings,
|
|
.displaySettingsFlag[value="hide"] ~ .displaySettings {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.action-type-bar {
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
.action-type-bar > div > label {
|
|
color: white;
|
|
}
|
|
|
|
body.sheet-darkmode .action-type-bar {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.action-attack-bar {
|
|
background-color: lightgrey;
|
|
}
|
|
|
|
body.sheet-darkmode .action-attack-bar {
|
|
background-color: #545355;
|
|
}
|
|
|
|
/*----------------- NPC Sheet ------------------*/
|
|
|
|
.npc-action-check-indicator[value="1"] ~ .npc-action-check-description,
|
|
.npc-action-check-indicator[value="2"] ~ .npc-action-check-description,
|
|
.npc-action-check-indicator[value="4"] ~ .npc-action-check-description,
|
|
.npc-action-check-indicator[value="1"] ~ .npc-action-dodge,
|
|
.npc-action-check-indicator[value="2"] ~ .npc-action-willpower,
|
|
.npc-action-check-indicator[value="3"] ~ .npc-action-auto-hit,
|
|
.npc-action-check-indicator[value="4"] ~ .npc-action-skill {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.npc-action-check-description,
|
|
.npc-action-dodge,
|
|
.npc-action-willpower,
|
|
.npc-action-auto-hit,
|
|
.npc-action-skill {
|
|
display: none
|
|
}
|
|
|
|
.description-control[value="4"] ~ .npc-action-trigger,
|
|
.description-control[value="2"] ~ .npc-action-damage {
|
|
display: block;
|
|
}
|
|
|
|
.npc-action-trigger,
|
|
.npc-action-damage {
|
|
display: none;
|
|
}
|
|
|
|
/*----------------- Expandable textarea ------------------*/
|
|
|
|
.auto-expand {
|
|
position: relative;
|
|
min-height: 18px;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
border-radius: 2px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.auto-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
|
|
.auto-expand textarea {
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 2px;
|
|
box-shadow: none;
|
|
color: inherit;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
padding: inherit;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
}
|
|
|
|
/*----------------- ------------------*/
|
|
|
|
.top-detail {
|
|
grid-area: top-detail;
|
|
background-color: #3FB315;
|
|
width: fit-content;
|
|
}
|
|
|
|
.middle-detail {
|
|
grid-area: middle-detail;
|
|
align-content: center;
|
|
width: fit-content;
|
|
}
|
|
|
|
.bottom-detail {
|
|
grid-area: bottom-detail;
|
|
align-content: center;
|
|
background-color: cadetblue;
|
|
}
|
|
|
|
/* Boring Pre-defined width & height options */
|
|
|
|
.charsheet .width-auto {
|
|
width: auto;
|
|
}
|
|
|
|
.charsheet .width-half {
|
|
width: 49%;
|
|
}
|
|
|
|
.charsheet .width-third {
|
|
width: 32%;
|
|
}
|
|
|
|
.charsheet .width5 {
|
|
width: 5%;
|
|
}
|
|
|
|
.charsheet .width6 {
|
|
width: 6%;
|
|
}
|
|
|
|
.charsheet .width10 {
|
|
width: 10%;
|
|
}
|
|
|
|
.charsheet .width15 {
|
|
width: 15%;
|
|
}
|
|
|
|
.charsheet .width20 {
|
|
width: 20%;
|
|
}
|
|
|
|
.charsheet .width25 {
|
|
width: 25%;
|
|
}
|
|
|
|
.charsheet .width30 {
|
|
width: 30%;
|
|
}
|
|
|
|
.charsheet .width35 {
|
|
width: 35%;
|
|
}
|
|
|
|
.charsheet .width39 {
|
|
width: 39%;
|
|
}
|
|
|
|
.charsheet .width40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.charsheet .width45 {
|
|
width: 45%;
|
|
}
|
|
|
|
.charsheet .width50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.charsheet .width55 {
|
|
width: 55%;
|
|
}
|
|
|
|
.charsheet .width60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.charsheet .width65 {
|
|
width: 65%;
|
|
}
|
|
|
|
.charsheet .width70 {
|
|
width: 70%;
|
|
}
|
|
|
|
.charsheet .width75 {
|
|
width: 75%;
|
|
}
|
|
|
|
.charsheet .width80 {
|
|
width: 80%;
|
|
}
|
|
|
|
.charsheet .width85 {
|
|
width: 85%;
|
|
}
|
|
|
|
.charsheet .width90 {
|
|
width: 90%;
|
|
}
|
|
|
|
.charsheet .width95 {
|
|
width: 95%;
|
|
}
|
|
|
|
.charsheet .width100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet .height5 {
|
|
height: 5px;
|
|
}
|
|
|
|
.charsheet .height10 {
|
|
height: 10px;
|
|
}
|
|
|
|
.charsheet .height15 {
|
|
height: 15px;
|
|
}
|
|
|
|
.charsheet .height17 {
|
|
height: 17px;
|
|
}
|
|
|
|
.charsheet .height20 {
|
|
height: 20px;
|
|
}
|
|
|
|
.charsheet .height25 {
|
|
height: 25px;
|
|
}
|
|
|
|
.charsheet .height30 {
|
|
height: 30px;
|
|
}
|
|
|
|
.charsheet .height35 {
|
|
height: 35px;
|
|
}
|
|
|
|
.charsheet .height40 {
|
|
height: 40px;
|
|
}
|
|
|
|
.charsheet .height50 {
|
|
height: 50px;
|
|
}
|
|
|
|
.charsheet .height75 {
|
|
height: 75px;
|
|
}
|
|
|
|
.charsheet .height80 {
|
|
height: 80px;
|
|
}
|
|
|
|
.charsheet .height100 {
|
|
height: 100px;
|
|
}
|
|
|
|
.charsheet .height150 {
|
|
height: 150px;
|
|
}
|
|
|
|
/*----------------- Hexagons ------------------*/
|
|
|
|
.enemy-dice,
|
|
.small-enemy-dice {
|
|
font-family: dicefontd6, fantasy;
|
|
position: absolute;
|
|
z-index: 3;
|
|
color: #9E76B3;
|
|
}
|
|
|
|
.enemy-dice {
|
|
font-size: 50px;
|
|
}
|
|
|
|
.small-enemy-dice {
|
|
font-size: 35px;
|
|
}
|
|
|
|
div.enemy-hex {
|
|
display: none;
|
|
}
|
|
|
|
.grunt {
|
|
padding-top: 50px;
|
|
min-width: 390px;
|
|
height: 330px;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
.awakened {
|
|
padding-top: 75px;
|
|
padding-left: 40px;
|
|
height: 375px;
|
|
min-width: 440px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.elite {
|
|
padding-left: 40px;
|
|
height: 400px;
|
|
min-width: 410px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.boss {
|
|
padding-left: 40px;
|
|
height: 500px;
|
|
min-width: 520px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.npc-ring-indicator[value="1"] ~ div.grunt,
|
|
.npc-ring-indicator[value="2"] ~ div.awakened,
|
|
.npc-ring-indicator[value="3"] ~ div.elite,
|
|
.npc-ring-indicator[value="4"] ~ div.boss {
|
|
display: block;
|
|
}
|
|
|
|
/*------------- Hex colours ------------------*/
|
|
|
|
.hex.hex-4, .small-hex.hex-4, .large-hex.hex-4 {
|
|
background: #ece3f0;
|
|
}
|
|
|
|
.hex.hex-3, .small-hex.hex-3, .large-hex.hex-3 {
|
|
background: #d6c6e1;
|
|
}
|
|
|
|
.hex.hex-2, .small-hex.hex-2, .large-hex.hex-2 {
|
|
background: #b796c6;
|
|
}
|
|
|
|
.hex.hex-1, .small-hex.hex-1, .large-hex.hex-1 {
|
|
background: #a074b2;
|
|
}
|
|
|
|
.hex.hex-0, .small-hex.hex-0, .large-hex.hex-0 {
|
|
background: #a074b2;
|
|
}
|
|
|
|
.hex.veteran-hex-4, .small-hex.veteran-hex-4 {
|
|
background: #fabeaf;
|
|
}
|
|
|
|
.hex.veteran-hex-3, .small-hex.veteran-hex-3 {
|
|
background: #f9b09f;
|
|
}
|
|
|
|
.hex.veteran-hex-2, .small-hex.veteran-hex-2 {
|
|
background: #f69e8c;
|
|
}
|
|
|
|
.hex.veteran-hex-1, .small-hex.veteran-hex-1 {
|
|
background: #fdbeaf;
|
|
}
|
|
|
|
/*------------- Hexes ------------------*/
|
|
|
|
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-1,
|
|
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-2,
|
|
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-3,
|
|
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-4,
|
|
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-1,
|
|
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-2,
|
|
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-3,
|
|
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-4 {
|
|
background-color: transparent;
|
|
}
|
|
|
|
input[type=checkbox].hex-button:checked + span::before,
|
|
input[type=checkbox].small-hex-button:checked + span::before {
|
|
content: "&";
|
|
font-family: pictos, fantasy;
|
|
color: black;
|
|
}
|
|
|
|
body.sheet-darkmode input[type=checkbox].hex-button:checked + span::before,
|
|
body.sheet-darkmode input[type=checkbox].small-hex-button:checked + span::before {
|
|
color: white;
|
|
}
|
|
|
|
.charsheet input[type=checkbox].hex-button:hover + span + div,
|
|
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-1,
|
|
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-2,
|
|
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-3,
|
|
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-4,
|
|
.charsheet input[type=checkbox].hex-button:hover + span + div,
|
|
.charsheet input[type=checkbox].small-hex-button:hover + span + div,
|
|
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-1,
|
|
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-2,
|
|
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-3,
|
|
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-4 {
|
|
background-color: indianred;
|
|
}
|
|
|
|
body.sheet-darkmode .hex-button + span::before,
|
|
body.sheet-darkmode .small-hex-button + span::before {
|
|
color: whitesmoke;
|
|
}
|
|
|
|
body.sheet-darkmode .hex-button + span,
|
|
body.sheet-darkmode .small-hex-button + span {
|
|
border-color: #1f1f1f;
|
|
background-color: #1f1f1f;
|
|
}
|
|
|
|
input[type=checkbox].hex-button {
|
|
opacity: 0;
|
|
z-index: 5;
|
|
margin-left: -50px;
|
|
position: relative;
|
|
top: 55px;
|
|
width: 20px;
|
|
height: 20px
|
|
}
|
|
|
|
.hex-button + span,
|
|
.small-hex-button + span {
|
|
background-color: white;
|
|
border-color: white;
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: 4;
|
|
}
|
|
|
|
.hex-button + span {
|
|
width: 24px;
|
|
height: 12px;
|
|
top: 62px;
|
|
margin-left: -21px;
|
|
}
|
|
|
|
.small-hex-button + span {
|
|
width: 15px;
|
|
height: 8px;
|
|
top: 37px;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
.hex-button + span:before,
|
|
.small-hex-button + span::before {
|
|
cursor: pointer;
|
|
content: "3";
|
|
font-family: pictos, fantasy;
|
|
color: black;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 0;
|
|
height: 0;
|
|
border-bottom: 8px solid;
|
|
border-color: inherit;
|
|
border-left: 12px solid transparent;
|
|
border-right: 12px solid transparent;
|
|
position: absolute;
|
|
top: -7px;
|
|
font-size: 1.35em;
|
|
}
|
|
|
|
.small-hex-button + span::before {
|
|
border-bottom: 5px solid;
|
|
border-color: inherit;
|
|
border-left: 8px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
top: -4.5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.hex-button + span:after,
|
|
.small-hex-button + span:after {
|
|
content: "";
|
|
width: 0;
|
|
position: absolute;
|
|
bottom: -7.5px;
|
|
border-top: 8px solid;
|
|
border-color: inherit;
|
|
border-left: 12px solid transparent;
|
|
border-right: 12px solid transparent;
|
|
}
|
|
|
|
.small-hex-button + span::after {
|
|
border-top: 4px solid;
|
|
border-color: inherit;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
bottom: -3px;
|
|
}
|
|
|
|
.hex {
|
|
width: 75px;
|
|
height: 43px;
|
|
background-color: #ccc;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: auto 173px;
|
|
position: relative;
|
|
float: left;
|
|
margin: 13px 2px;
|
|
text-align: center;
|
|
zoom: 1;
|
|
}
|
|
|
|
.hex .corner-1,
|
|
.hex .corner-2,
|
|
.small-hex .corner-1,
|
|
.small-hex .corner-2,
|
|
.large-hex .corner-1,
|
|
.large-hex .corner-2 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: inherit;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.hex .corner-1,
|
|
.small-hex .corner-1,
|
|
.large-hex .corner-1 {
|
|
z-index: 0;
|
|
transform: rotate(60deg);
|
|
}
|
|
|
|
.hex .corner-2,
|
|
.small-hex .corner-2,
|
|
.large-hex .corner-2 {
|
|
transform: rotate(-60deg);
|
|
}
|
|
|
|
.hex .corner-1::before,
|
|
.hex .corner-2::before,
|
|
.small-hex .corner-1::before,
|
|
.small-hex .corner-2::before,
|
|
.large-hex .corner-1::before,
|
|
.large-hex .corner-2::before {
|
|
width: 173px;
|
|
height: 173px;
|
|
content: "";
|
|
position: absolute;
|
|
background: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
background-repeat: no-repeat;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.hex .corner-1::before,
|
|
.small-hex .corner-1::before,
|
|
.large-hex .corner-1::before {
|
|
transform: rotate(-60deg) translate(-87px, 0px);
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.hex .corner-2::before,
|
|
.small-hex .corner-2::before,
|
|
.large-hex .corner-2::before {
|
|
transform: rotate(60deg) translate(-48px, -11px);
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Custom styles*/
|
|
.hex .inner,
|
|
.small-hex .inner,
|
|
.large-hex .inner {
|
|
color: #eee;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.inner > textarea,
|
|
.sheet-darkmode .inner > textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
color: black;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
resize: none
|
|
}
|
|
|
|
.small-hex .inner > textarea {
|
|
line-height: 1.25em;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.hex .inner > textarea {
|
|
line-height: 1em;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.large-hex .inner > textarea {
|
|
line-height: 1.5em;
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
/*------------- Small/Large hexes ---------------*/
|
|
|
|
input[type=checkbox].small-hex-button {
|
|
opacity: 0;
|
|
margin-left: -34px;
|
|
margin-top: -10px;
|
|
z-index: 5;
|
|
position: relative;
|
|
top: 40px;
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
|
|
.small-hex {
|
|
width: 50px;
|
|
height: 30px;
|
|
background-color: #ccc;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: auto 173px;
|
|
position: relative;
|
|
float: left;
|
|
margin: 8px 2px;
|
|
text-align: center;
|
|
zoom: 1;
|
|
}
|
|
|
|
.large-hex {
|
|
width: 100px;
|
|
height: 57px;
|
|
background-color: #ccc;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
background-size: auto 173px;
|
|
position: relative;
|
|
float: left;
|
|
margin: 16px 2px;
|
|
text-align: center;
|
|
zoom: 1;
|
|
}
|
|
|
|
/*----------------- Tools Tips ------------------*/
|
|
|
|
.hover-tip {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hover-tip-text {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 6;
|
|
|
|
width: 150px;
|
|
background-color: black;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 5px 2px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hover-tip:hover ~ .hover-tip-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
/*----------------- Roll templates ------------------*/
|
|
|
|
.sheet-rolltemplate-condition-info *,
|
|
.sheet-rolltemplate-turn *,
|
|
.sheet-rolltemplate-skill *,
|
|
.sheet-rolltemplate-action *,
|
|
.sheet-rolltemplate-basic-action * {
|
|
font-family: "Proxima Nova", "ProximaNova-Regular", serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-kungfont,
|
|
.sheet-rolltemplate-turn .sheet-kungfont,
|
|
.sheet-rolltemplate-skill .sheet-kungfont,
|
|
.sheet-rolltemplate-action .sheet-kungfont,
|
|
.sheet-rolltemplate-basic-action .sheet-kungfont {
|
|
font-family: "Kungfont-Regular", Kungfont, "Proxima Nova", "ProximaNova-Regular", ProximaNova, serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-container,
|
|
.sheet-rolltemplate-turn .sheet-container,
|
|
.sheet-rolltemplate-skill .sheet-container,
|
|
.sheet-rolltemplate-basic-action .sheet-container,
|
|
.sheet-rolltemplate-action .sheet-container {
|
|
background-color: #ffffff;
|
|
border: 1px solid white;
|
|
padding: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-container,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-container {
|
|
background-color: dimgrey;
|
|
color: white;
|
|
border: 1px solid dimgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-header-bar,
|
|
.sheet-rolltemplate-turn .sheet-header-bar,
|
|
.sheet-rolltemplate-skill .sheet-header-bar,
|
|
.sheet-rolltemplate-basic-action .sheet-header-bar,
|
|
.sheet-rolltemplate-action .sheet-header-bar {
|
|
background-color: dimgrey;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-header-bar,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-bar,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-header-bar,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-bar,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-bar {
|
|
background-color: #414042;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-header-tide-bar {
|
|
background-color: #F9B276;
|
|
}
|
|
|
|
.sheet-rolltemplate-turn .sheet-header-npc-special-bar,
|
|
.sheet-rolltemplate-action .sheet-header-npc-special-bar {
|
|
background-color: #a074b2;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-npc-special-bar,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-special-bar {
|
|
background-color: #845a91;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-header-npc-learned-bar {
|
|
background-color: #f8a18c;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar {
|
|
background-color: #f15d5c;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-header-tide-bar > div,
|
|
.sheet-rolltemplate-action .sheet-header-tide-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-tide-bar > div > h1 {
|
|
color: black;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-header-bar > div,
|
|
.sheet-rolltemplate-condition-info .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-turn .sheet-header-bar > div,
|
|
.sheet-rolltemplate-turn .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div,
|
|
.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div > h1,
|
|
.sheet-rolltemplate-skill .sheet-header-bar > div,
|
|
.sheet-rolltemplate-skill .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-action .sheet-header-bar > div,
|
|
.sheet-rolltemplate-action .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-basic-action .sheet-header-bar > div,
|
|
.sheet-rolltemplate-basic-action .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-bar > div > h1,
|
|
.sheet-rolltemplate-action .sheet-header-npc-special-bar > div,
|
|
.sheet-rolltemplate-action .sheet-header-npc-special-bar > div > h1,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-special-bar > div > h1 {
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info div,
|
|
.sheet-rolltemplate-turn div,
|
|
.sheet-rolltemplate-skill div,
|
|
.sheet-rolltemplate-basic-action div,
|
|
.sheet-rolltemplate-action div {
|
|
padding: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-tcat,
|
|
.sheet-rolltemplate-turn .sheet-tcat,
|
|
.sheet-rolltemplate-skill .sheet-tcat,
|
|
.sheet-rolltemplate-basic-action .sheet-tcat,
|
|
.sheet-rolltemplate-action .sheet-tcat {
|
|
font-weight: bold;
|
|
font-size: 0.75em;
|
|
font-variant: small-caps;
|
|
line-height: 1.6em;
|
|
padding-left: 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-tcat-text,
|
|
.sheet-rolltemplate-turn .sheet-tcat-text,
|
|
.sheet-rolltemplate-skill .sheet-tcat-text,
|
|
.sheet-rolltemplate-basic-action .sheet-tcat-text,
|
|
.sheet-rolltemplate-action .sheet-tcat-text {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-tcat-header,
|
|
.sheet-rolltemplate-turn .sheet-tcat-header,
|
|
.sheet-rolltemplate-skill .sheet-tcat-header,
|
|
.sheet-rolltemplate-basic-action .sheet-tcat-header,
|
|
.sheet-rolltemplate-action .sheet-tcat-header {
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
font-variant: small-caps;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-tcat-subheader,
|
|
.sheet-rolltemplate-turn .sheet-tcat-subheader,
|
|
.sheet-rolltemplate-skill .sheet-tcat-subheader,
|
|
.sheet-rolltemplate-basic-action .sheet-tcat-subheader,
|
|
.sheet-rolltemplate-action .sheet-tcat-subheader {
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-separator,
|
|
.sheet-rolltemplate-turn .sheet-separator,
|
|
.sheet-rolltemplate-skill .sheet-separator,
|
|
.sheet-rolltemplate-basic-action .sheet-separator,
|
|
.sheet-rolltemplate-action .sheet-separator {
|
|
background-color: #d3d3d3;
|
|
width: auto;
|
|
padding: 1px;
|
|
}
|
|
|
|
.sheet-rolltemplate-turn .inlinerollresult,
|
|
.sheet-rolltemplate-skill .inlinerollresult,
|
|
.sheet-rolltemplate-basic-action .inlinerollresult,
|
|
.sheet-rolltemplate-action .inlinerollresult {
|
|
background-color: #ffffff;
|
|
border: 3px solid #000000;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .inlinerollresult {
|
|
background-color: grey;
|
|
border: 3px solid #414042;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-basic-action .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-action .inlinerollresult.fullcrit {
|
|
border: 3px solid #3FB315;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-basic-action .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-action .inlinerollresult.fullfail {
|
|
border: 3px solid #B31515;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-crit .inlinerollresult,
|
|
.sheet-rolltemplate-basic-action .sheet-crit .inlinerollresult,
|
|
.sheet-rolltemplate-action .sheet-crit .inlinerollresult {
|
|
border: 3px solid #3FB315;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-fail .inlinerollresult,
|
|
.sheet-rolltemplate-basic-action .sheet-fail .inlinerollresult,
|
|
.sheet-rolltemplate-action .sheet-fail .inlinerollresult {
|
|
border: 3px solid #B31515;
|
|
}
|
|
|
|
.sheet-rolltemplate-skill .sheet-pierce .inlinerollresult,
|
|
.sheet-rolltemplate-basic-action .sheet-pierce .inlinerollresult,
|
|
.sheet-rolltemplate-action .sheet-pierce .inlinerollresult {
|
|
border: 3px solid dodgerblue;
|
|
background-color: rgba(255,255,255,0.75);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-pierce .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-pierce .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-pierce .inlinerollresult {
|
|
background-color: rgba(50,50,50,0.75);
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-critical,
|
|
.sheet-rolltemplate-basic-action .sheet-critical {
|
|
height: 51px;
|
|
width: 154px;
|
|
margin-top: -10px;
|
|
padding: 0 5px 0 5px;
|
|
text-align: center;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
color: white;
|
|
font-family: "Kungfont-Regular", Kungfont, "Proxima Nova", "ProximaNova-Regular", ProximaNova, serif;
|
|
font-variant: small-caps;
|
|
font-size: 20px;
|
|
background-position-y: 2px;
|
|
background-position-x: 0;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-piercing,
|
|
.sheet-rolltemplate-basic-action .sheet-piercing {
|
|
padding: 7px;
|
|
background-position-y: 0;
|
|
background-position-x: 0;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step3.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-toughness-img,
|
|
.sheet-rolltemplate-basic-action .sheet-toughness-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-toughness-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-toughness-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-resistance-img,
|
|
.sheet-rolltemplate-basic-action .sheet-resistance-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-resistance-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-resistance-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-dodge-img,
|
|
.sheet-rolltemplate-basic-action .sheet-dodge-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-dodge-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-dodge-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-willpower-img,
|
|
.sheet-rolltemplate-basic-action .sheet-willpower-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-willpower-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-willpower-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-dodge-img,
|
|
.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-dodge-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-dodge-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-dodge-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-willpower-img,
|
|
.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-willpower-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-willpower-img,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-willpower-img {
|
|
content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
|
|
}
|
|
|
|
.sheet-rolltemplate-condition-info .sheet-flex-center,
|
|
.sheet-rolltemplate-turn .sheet-flex-center,
|
|
.sheet-rolltemplate-skill .sheet-flex-center,
|
|
.sheet-rolltemplate-action .sheet-flex-center,
|
|
.sheet-rolltemplate-basic-action .sheet-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-indicator,
|
|
.sheet-rolltemplate-basic-action .sheet-indicator {
|
|
padding: 1px;
|
|
font-variant: small-caps;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-footer,
|
|
.sheet-rolltemplate-basic-action .sheet-footer {
|
|
color: grey;
|
|
font-size: 0.8em;
|
|
margin-top: -3px;
|
|
margin-bottom: -5px;
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-footer,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-footer {
|
|
color: whitesmoke;
|
|
}
|
|
|
|
.sheet-rolltemplate-action .sheet-damage .inlinerollresult,
|
|
.sheet-rolltemplate-basic-action .sheet-damage .inlinerollresult {
|
|
border: none;
|
|
background-color: lightgrey;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-damage .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-damage .inlinerollresult {
|
|
border: none;
|
|
background-color: grey;
|
|
}
|
|
|
|
.sheet-rolltemplate-turn .sheet-damage .inlinerollresult {
|
|
border: none;
|
|
background-color: lightgrey;
|
|
padding: 0 7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-damage .inlinerollresult {
|
|
background-color: grey;
|
|
}
|
|
|
|
/*-------------------------*/ |