mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
2913 lines
53 KiB
CSS
2913 lines
53 KiB
CSS
|
|
/*----------------- Main Layout ------------------*/
|
|
|
|
/* A CSS Grid example using "grid-template-areas"
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
|
|
*/
|
|
|
|
/* This is a clever way to redefine our grid area if mech isn't present. Must keep the two aligned or we get nasty spaces! */
|
|
input.sheet-space:not(:checked) ~ div > main {
|
|
grid-template-rows: 40px auto auto 300px auto auto auto auto;
|
|
grid-template-areas:
|
|
"settings settings settings settings"
|
|
"header header header header"
|
|
"conditions conditions conditions conditions"
|
|
". . . portrait"
|
|
"powers powers powers background"
|
|
"gear . items background"
|
|
"loadout loadout loadout background"
|
|
"notes notes notes background"
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
width: 800px;
|
|
min-height: 1660px;
|
|
height: auto;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 240px 10px 240px 260px;
|
|
grid-template-rows: 40px auto auto 300px auto auto auto auto auto auto;
|
|
grid-template-areas:
|
|
"settings settings settings settings"
|
|
"header header header header"
|
|
"conditions conditions conditions conditions"
|
|
". . . portrait"
|
|
"powers powers powers background"
|
|
"gear . items background"
|
|
". . . background"
|
|
"loadout loadout loadout perks"
|
|
"mech mech mech mechstats"
|
|
"notes notes notes mechstats"
|
|
}
|
|
|
|
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
main:before {
|
|
content:"";
|
|
background-color:#f8f8f8;
|
|
height:2000px;
|
|
position: absolute;
|
|
width: 95%;
|
|
z-index: -1;
|
|
}
|
|
|
|
section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
/* CSS Flexbox styling, used for adjusting how content inside section behaves */
|
|
.f-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.f-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.wrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nowrap {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.f-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
|
|
/*----------------- Text & Input styling -----------------*/
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Lexend|IBM+Plex+Mono:wght@400;700&display=swap");
|
|
|
|
/* these are for overwriting default CSS that comes from Roll20 */
|
|
|
|
.charsheet * {
|
|
font-family: "Lexend";
|
|
}
|
|
|
|
.charsheet h3{
|
|
text-align: center;
|
|
}
|
|
.charsheet label{
|
|
margin: 3px;
|
|
padding: 3px 0 0 0;
|
|
}
|
|
|
|
.charsheet input[type="text"], input[type="number"]{
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
.charsheet textarea {
|
|
width: 95%;
|
|
height: 85%;
|
|
}
|
|
|
|
/*------------- Section-specific CSS -------------*/
|
|
|
|
.header {
|
|
grid-area: header;
|
|
background-color: #e8e8e9 !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
|
|
section.empty {
|
|
grid-area: empty;
|
|
}
|
|
|
|
.skill {
|
|
grid-area: skill;
|
|
background-color: orange;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.tabholder {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tabholder > button {
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.powers {
|
|
grid-area: powers;
|
|
margin-top: -280px;
|
|
}
|
|
|
|
.background {
|
|
grid-area: background;
|
|
height: fit-content;
|
|
min-height: 707px;
|
|
}
|
|
|
|
.loadout {
|
|
grid-area: loadout;
|
|
}
|
|
|
|
.mechStuff {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* gap: 1rem; */
|
|
}
|
|
|
|
.outerhot {
|
|
display: flex;
|
|
gap: 2em;
|
|
}
|
|
|
|
h3.hb {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Heat Level Colors */
|
|
.heatlevel {
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Style based on the adjacent input's value */
|
|
input.heat-color[value="OVERHEATING"] ~ .heatlevel {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(247, 0, 0, 1) 0%,
|
|
rgba(250, 138, 0, 1) 50%,
|
|
rgba(234, 245, 30, 1) 68%,
|
|
rgba(255, 255, 255, 1) 93%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
}
|
|
input.heat-color[value="OVERHEATING"] ~ .heatlevel {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(247, 0, 0, 1) 0%,
|
|
rgba(250, 138, 0, 1) 50%,
|
|
rgba(234, 245, 30, 1) 68%,
|
|
rgba(255, 255, 255, 1) 93%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
}
|
|
input.heat-color[value="Hot"] ~ .heatlevel {
|
|
color: red;
|
|
}
|
|
input.heat-color[value="Warm"] ~ .heatlevel {
|
|
color: orange;
|
|
}
|
|
input.heat-color[value="Cool"] ~ .heatlevel {
|
|
color: blue;
|
|
}
|
|
input.heat-color[value="Cold"] ~ .heatlevel {
|
|
color: gray;
|
|
}
|
|
|
|
|
|
|
|
.mechleft, .mechright {
|
|
flex: 1 1 50%;
|
|
box-sizing: border-box;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.mechleft {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.mechright {
|
|
flex: 1 1 40%;
|
|
}
|
|
|
|
|
|
.level.overheating {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(247, 0, 0, 1) 0%,
|
|
rgba(250, 138, 0, 1) 50%,
|
|
rgba(234, 245, 30, 1) 68%,
|
|
rgba(255, 255, 255, 1) 93%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
background-clip: text;
|
|
color: transparent;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.level.hot {
|
|
color: red;
|
|
}
|
|
.level.warm {
|
|
color: orange;
|
|
}
|
|
.level.cool {
|
|
color: blue;
|
|
}
|
|
.level.cold {
|
|
color: gray;
|
|
}
|
|
|
|
|
|
.mech {
|
|
grid-area: mech;
|
|
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
rgba(0, 0, 0, 0.2),
|
|
rgba(0, 0, 0, 0.2) 10px,
|
|
rgba(0, 0, 0, 0.3) 10px,
|
|
rgba(0, 0, 0, 0.3) 20px
|
|
),
|
|
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);
|
|
}
|
|
|
|
.perks {
|
|
grid-area: perks;
|
|
}
|
|
|
|
.mechstats {
|
|
grid-area: mechstats;
|
|
}
|
|
|
|
.conditions {
|
|
grid-area: conditions;
|
|
}
|
|
|
|
.conditions h2 {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.allConditions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
height: 200px;
|
|
}
|
|
|
|
.conds {
|
|
display: flex;
|
|
}
|
|
|
|
.cond input[type=text], .cond input[type=number] {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
input.sheet-briny:not(:checked) + input.sheet-space + section.conditions div .brinycond {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-briny:not(:checked) + input.sheet-space:not(:checked) + section.conditions div .spacecond {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-briny:not(:checked) + input.sheet-space:not(:checked) + section.conditions div .brinyorspacecond {
|
|
display: none;
|
|
}
|
|
|
|
.settings {
|
|
grid-area: settings;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.power .repcontainer[data-groupname="repeating_power"]{
|
|
padding-bottom: 0.2em;
|
|
}
|
|
|
|
.power .repcontainer[data-groupname="repeating_power"] .repitem{
|
|
margin: 4px 0px;
|
|
}
|
|
|
|
.gear {
|
|
grid-area: gear;
|
|
}
|
|
|
|
div.briny {
|
|
margin-top:10px;
|
|
display: none; /*default*/
|
|
}
|
|
section.mech {
|
|
display: none; /*default*/
|
|
}
|
|
section.perks {
|
|
display: none; /*default*/
|
|
}
|
|
section.mechstats {
|
|
display: none; /*default*/
|
|
}
|
|
|
|
h4.briny {
|
|
text-align:center;
|
|
}
|
|
|
|
div.briny > h5 {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.items {
|
|
grid-area: items;
|
|
}
|
|
|
|
.portrait {
|
|
grid-area: portrait;
|
|
|
|
}
|
|
|
|
section.notes {
|
|
grid-area: notes;
|
|
min-height: 120px;
|
|
height:fit-content;
|
|
}
|
|
|
|
|
|
/*------------------------------------*\
|
|
#My Custom CSS
|
|
\*------------------------------------*/
|
|
|
|
.flexheader {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
textarea.textnotes {
|
|
height: unset;
|
|
min-height:70%;
|
|
}
|
|
|
|
|
|
.header-left {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.header-left.empty {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.header-left-wrapper {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.header-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mainbase .header-right {
|
|
width: 29%;
|
|
}
|
|
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
}
|
|
|
|
hr.underline {
|
|
border: unset;
|
|
margin: 0;
|
|
border-bottom: 2px solid #acadb0;
|
|
}
|
|
|
|
div.autoExpand + hr.underline {
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
hr.underline ~ label {
|
|
margin-top: -4px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
hr.divide {
|
|
margin-top: 10px;
|
|
border-top: 3px solid #afafaf;
|
|
}
|
|
|
|
.nintety {
|
|
width: 80%;
|
|
}
|
|
|
|
button.inline {
|
|
margin-left: 1px !important;
|
|
margin-right: 1px !important;
|
|
}
|
|
|
|
input.item {
|
|
width: 58%;
|
|
margin-left: 1px !important;
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
input.item ~ label.inline {
|
|
position: relative;
|
|
bottom: -2px;
|
|
margin-left: 1px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
input.harmcounter {
|
|
width: 3em !important;
|
|
}
|
|
|
|
label.harmlabel {
|
|
position: relative;
|
|
bottom: -2px;
|
|
margin-left: 1px;
|
|
margin-right: 0px;
|
|
display: inline;
|
|
}
|
|
|
|
input.weapon {
|
|
width: 40%;
|
|
}
|
|
|
|
span.ammo {
|
|
display: none;
|
|
}
|
|
|
|
|
|
span.ammo > label, span.upgrades > label {
|
|
width: fit-content;
|
|
}
|
|
|
|
span.upgrades {
|
|
display: flex;
|
|
}
|
|
|
|
span.ammo > p.slash {
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
position: relative;
|
|
top: 6px;
|
|
}
|
|
|
|
div.hotboxDetail {
|
|
display: none;
|
|
}
|
|
input[name="attr_show_hotbox"][value="1"] ~ div.hotboxDetail {
|
|
display: flex;
|
|
}
|
|
|
|
.hotboxDetail {
|
|
flex-direction: column;
|
|
}
|
|
.heatholder {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
input.hasammo[value="true"] + span.ammo {
|
|
display: flex;
|
|
}
|
|
|
|
span.entire {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
input.weapon {
|
|
width: 12em;
|
|
}
|
|
|
|
|
|
input.header-input {
|
|
margin: 0;
|
|
margin-left: 0px !important;
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
|
|
img {
|
|
border: 5px solid #e8e8e9;
|
|
max-width:95%
|
|
}
|
|
|
|
h4.caption {
|
|
font-variant: small-caps;
|
|
text-align: right;
|
|
width: 95%;
|
|
}
|
|
|
|
h4.sidebar {
|
|
font-variant: small-caps;
|
|
margin-bottom:-10px;
|
|
margin-top: 10px;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
h4.sidebar ~ h4.sidebar {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
h2 {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.borderless {
|
|
border: none;
|
|
}
|
|
|
|
h4.second {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
div.weapon:not(:first-child) {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
div.minmax {
|
|
display:flex;
|
|
margin-top:10px;
|
|
justify-content:center;
|
|
}
|
|
|
|
span.minmax {
|
|
font-weight: bold;
|
|
font-size: 2.4em;
|
|
}
|
|
|
|
input.minmax {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
label.inline ~ input {
|
|
display: inline;
|
|
}
|
|
|
|
label.desc {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.autoExpand {
|
|
overflow: hidden;
|
|
position: relative;
|
|
min-width: 100px;
|
|
width: fit-content;
|
|
height: 28px;
|
|
width: 100%;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.autoExpand.long {
|
|
min-width: 230px;
|
|
width: 80%
|
|
}
|
|
|
|
.autoExpand span {
|
|
visibility: hidden;
|
|
font-size: 1em;
|
|
padding: 0 8px; /* Matching my input's padding so that the widths are correct */
|
|
}
|
|
.autoExpand input {
|
|
position: absolute; /* removes the input from the DOM flow, allowing the span to exist in the same space */
|
|
width: 100%;
|
|
font-size: 1em;
|
|
}
|
|
|
|
span.range > input {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.small {
|
|
font-size: 1em !important;
|
|
}
|
|
|
|
.sidebar-input {
|
|
display:inline;
|
|
width: 30%;
|
|
margin-left:10px;
|
|
}
|
|
|
|
.sidebar-input ~ label {
|
|
dispaly: inline;
|
|
width: 50%;
|
|
margin-left: 10%;
|
|
align-self: flex-end;
|
|
margin-bottom: 10px;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.mechholder > .sidebar-input ~ label {
|
|
margin-left: 1%;
|
|
}
|
|
|
|
hr.overline {
|
|
border: unset;
|
|
margin: 0;
|
|
border-top: 2px solid #acadb0;
|
|
width:100%;
|
|
}
|
|
|
|
div.sideholder {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
div.mechholder {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
h3.sidebar {
|
|
text-align: left;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
img.charPort {
|
|
height: 247px;
|
|
width: 247px;
|
|
}
|
|
|
|
label.setting {
|
|
font-size: 1em;
|
|
width: fit-content;
|
|
}
|
|
|
|
label.setting ~ input {
|
|
width:fit-content;
|
|
margin-top:3px;
|
|
}
|
|
|
|
span.briny-setting span.space-setting {
|
|
position: relative;
|
|
bottom: -5px;
|
|
float:right;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
span.space-setting {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
|
|
input.sheet-briny {
|
|
margin-bottom:4px;
|
|
}
|
|
|
|
input.sheet-briny:checked ~ div.briny {
|
|
display:block;
|
|
}
|
|
|
|
input.sheet-space {
|
|
margin-bottom:4px;
|
|
}
|
|
|
|
div.space {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-space:checked ~ div.space {
|
|
display:block;
|
|
}
|
|
|
|
input.sheet-space:checked ~ section.mech {
|
|
display:block;
|
|
}
|
|
input.sheet-space:checked ~ section.perks {
|
|
display:block;
|
|
}
|
|
input.sheet-space:checked ~ section.mechstats {
|
|
display:block;
|
|
}
|
|
|
|
input.sheet-space:checked ~ div.optional {
|
|
display:block;
|
|
}
|
|
|
|
div.optional {
|
|
display:none;
|
|
}
|
|
|
|
.pictos {
|
|
font-family: 'Pictos' !important;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
input.powername {
|
|
width: 180px;
|
|
}
|
|
|
|
input.cost {
|
|
width: 45px;
|
|
}
|
|
|
|
|
|
.centerme {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.mech-abilities {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.mech-ability-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.mech-ability-section label {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.mech-ability-section .mshop-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.mech-ability-section .mshop-header label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mech-ability-section input[type="checkbox"].mshop-toggle {
|
|
margin: 0;
|
|
width: auto;
|
|
}
|
|
|
|
.mech-ability-section textarea {
|
|
width: 100%;
|
|
min-height: 60px;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mech-ability-section:has(input[type="checkbox"]:not(:checked)) textarea {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.mech-ability-divider {
|
|
width: 2px;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
align-self: center;
|
|
height: 70px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
/* Buttons */
|
|
|
|
|
|
button[type=roll].sheet-d6-dice::before {
|
|
font-family: 'dicefontd6';
|
|
content: 'F ';
|
|
}
|
|
|
|
button.d6 {
|
|
padding: 2px 3px;
|
|
font-size: 1.3em;
|
|
margin: 0px 3px 0px 3px;
|
|
}
|
|
|
|
button.d6::before {
|
|
font-family: 'dicefontd6';
|
|
content: 'F ';
|
|
}
|
|
|
|
button.disab {
|
|
display: none !important;
|
|
}
|
|
|
|
button.enab {
|
|
}
|
|
|
|
|
|
/* Grief */
|
|
div.outergrief {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
button.grief {
|
|
align-self: center;
|
|
display: flex;
|
|
margin-top: 12px;
|
|
height: fit-content;
|
|
}
|
|
|
|
div.grief {
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 6em;
|
|
overflow: hidden;
|
|
padding: 1em 0;
|
|
position: relative;
|
|
width: 100%;
|
|
padding-bottom:30px;
|
|
}
|
|
|
|
div.grief::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
|
|
top: 4em;
|
|
width: 100%;
|
|
}
|
|
|
|
.progressbar__radio {
|
|
display: none;
|
|
}
|
|
|
|
label.progressbar__label {
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
/* Labels after the one we've clicked */
|
|
.progressbar__radio:checked + label ~ label {
|
|
color: black;
|
|
}
|
|
|
|
/* Every circle that follows the one clicked */
|
|
.progressbar__radio:checked + label ~ label::before {
|
|
background: #4286f4;
|
|
border: 2px solid #4286f4;
|
|
}
|
|
|
|
.progressbar__radio:checked + label ~ label::after {
|
|
background: #aaa;
|
|
}
|
|
|
|
/* The checked circle */
|
|
.progressbar__radio:checked + label::before {
|
|
background: #4286f4;
|
|
}
|
|
|
|
/* The checked label */
|
|
.progressbar__radio:checked + label {
|
|
color: black;
|
|
text-align: center;
|
|
}
|
|
|
|
/*Labels before the one we clicked*/
|
|
.progressbar__label {
|
|
color: #aaa;
|
|
display: table-cell;
|
|
font-weight: bold;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.progressbar__label::before {
|
|
background: white;
|
|
border: 2px solid #4286f4;
|
|
bottom: calc((100% - 40px) - 2px);
|
|
content: "";
|
|
display: block;
|
|
height: 20px;
|
|
position: absolute;
|
|
width: 20px;
|
|
z-index: 9;
|
|
}
|
|
|
|
/* End Grief */
|
|
|
|
/* Threat */
|
|
|
|
div.outerthreat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width:50%;
|
|
}
|
|
|
|
|
|
.threat {
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
height: 6em;
|
|
overflow: hidden;
|
|
padding: 1em 0;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
--threatLevel1Color: #2D9606;
|
|
--threatLevel2Color: #F3DA35;
|
|
--threatLevel3Color: #E67F45;
|
|
--threatLevel4Color: #D50C59;
|
|
}
|
|
|
|
.threat::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 4em;
|
|
width: 100%;
|
|
}
|
|
|
|
.threatbar {
|
|
display: none;
|
|
}
|
|
|
|
label.threatlabel {
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.threatbar:checked + label ~ label {
|
|
color: #aaa;
|
|
}
|
|
|
|
.threatbar:checked + label ~ label::before {
|
|
background: white;
|
|
border-color: #aaa;
|
|
}
|
|
|
|
.threatbar:checked + label ~ label::after {
|
|
background: #aaa;
|
|
}
|
|
|
|
.threatlabel {
|
|
color: #4286f4;
|
|
display: table-cell;
|
|
font-weight: bold;
|
|
position: relative;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.threatlabel::before {
|
|
background: #4286f4;
|
|
border: 2px solid #4286f4;
|
|
bottom: calc((100% - 40px) - 2px);
|
|
content: "";
|
|
display: block;
|
|
height: 20px;
|
|
left: calc((50% - 1em) - 2px);
|
|
position: absolute;
|
|
width: 20px;
|
|
z-index: 9;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.threat1::before {
|
|
background: var(--threatLevel1Color);
|
|
border-color: var(--threatLevel1Color);
|
|
}
|
|
.threatlabel.threat1 {
|
|
color: var(--threatLevel1Color);
|
|
}
|
|
|
|
.threat2::before {
|
|
background: var(--threatLevel2Color);
|
|
border-color: var(--threatLevel2Color);
|
|
}
|
|
.threatlabel.threat2 {
|
|
color: var(--threatLevel2Color);
|
|
}
|
|
|
|
|
|
.threat3::before {
|
|
background: var(--threatLevel3Color);
|
|
border-color: var(--threatLevel3Color);
|
|
}
|
|
.threatlabel.threat3 {
|
|
color: var(--threatLevel3Color);
|
|
}
|
|
|
|
|
|
.threat4::before {
|
|
background: var(--threatLevel4Color);
|
|
border-color: var(--threatLevel4Color);
|
|
}
|
|
.threatlabel.threat4 {
|
|
color: var(--threatLevel4Color);
|
|
}
|
|
|
|
|
|
/* End Threat */
|
|
|
|
|
|
.prog {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
}
|
|
|
|
.leftprog, .rightprog {
|
|
width: 40%;
|
|
margin-left: 10%
|
|
}
|
|
|
|
|
|
.enemyheader {
|
|
text-align: center;
|
|
}
|
|
|
|
.threat.status {
|
|
width: 70%;
|
|
}
|
|
|
|
h3.final {
|
|
text-align: left;
|
|
}
|
|
|
|
hr.separate {
|
|
border: 3px solid black;
|
|
border-style: solid;
|
|
border-top: none;
|
|
}
|
|
|
|
.break {
|
|
flex-basis: 100%;
|
|
width: 0;
|
|
}
|
|
|
|
.victoryholder {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.threat.status.victory {
|
|
display: flex;
|
|
padding-left: 10%;
|
|
padding-right: 10%;
|
|
width: 100%;
|
|
}
|
|
|
|
input.attr + span.minmax + input.attr + label {
|
|
width:30%;
|
|
}
|
|
|
|
.minmax.short {
|
|
height: 20px;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
input.sheer-disabler:checked ~ button.disab {
|
|
display: inline !important;
|
|
}
|
|
|
|
input.sheer-disabler:checked ~ button.enab {
|
|
display: none !important;
|
|
}
|
|
|
|
.pull-right {
|
|
font-size: 1.3em;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
hr.separaotr {
|
|
border-top: 3px solid #c9c9c9;
|
|
}
|
|
|
|
button[type=roll]::before {
|
|
font-family: 'dicefontd6' !important;
|
|
content: 'F ' !important;
|
|
}
|
|
|
|
label.rellabel {
|
|
width: 30%;
|
|
}
|
|
|
|
label.rellabel + input.relinput {
|
|
width: 70%
|
|
}
|
|
|
|
textarea.adjustable {
|
|
margin-top: 2px;
|
|
min-height: 80px;
|
|
}
|
|
|
|
textarea.adjustable:last-of-type {
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
textarea.powertext {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Tab Switching */
|
|
.charactersheet,
|
|
.basesheet,
|
|
.campaignsheet {
|
|
display: none;
|
|
background-color: #f8f8f8; /* Maybe remove */
|
|
}
|
|
|
|
.charactersheet section:not(.hiveroom) {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.hivebase:before {
|
|
content:"";
|
|
background-color:#f8f8f8;
|
|
height:930px;
|
|
position: absolute;
|
|
width: 95%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.campaignCore, .campaignSpace, .campaignCustom {
|
|
display: none;
|
|
}
|
|
|
|
.campaignType[value="campaignCore"] ~ div.campaignCore,
|
|
.campaignType[value="campaignSpace"] ~ div.campaignSpace,
|
|
.campaignType[value="campaignCustom"] ~ div.campaignCustom {
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
/* show the selected tab */
|
|
.tabstoggle[value="basesheet"] ~ div.basesheet,
|
|
.tabstoggle[value="charactersheet"] ~ div.charactersheet,
|
|
.tabstoggle[value="campaignsheet"] ~ div.campaignsheet {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.tabstoggle[value="basesheet"] ~ div.tabholder > .basesheetbtn,
|
|
.tabstoggle[value="charactersheet"] ~ div.tabholder > .charsheetbtn,
|
|
.tabstoggle[value="campaignsheet"] ~ div.tabholder > .campaignsheetbtn {
|
|
background-color:#3287a8;
|
|
color: white;
|
|
}
|
|
|
|
.campaignToggle[value="campaignCore"] ~ div.campaignHolder > .campaignCoreBtn,
|
|
.campaignToggle[value="campaignSpace"] ~ div.campaignHolder > .campaignSpaceBtn,
|
|
.campaignToggle[value="campaignCustom"] ~ div.campaignHolder > .campaignCustomBtn {
|
|
background-color:#3287a8;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
/* Tab switching for base sub sheets (e.g. submarine) */
|
|
input.sheet-briny:not(:checked) ~ div.basesheet > .basetabholder {
|
|
display: none;
|
|
}
|
|
|
|
.basetabholder {
|
|
position: relative;
|
|
bottom: 15px;
|
|
}
|
|
|
|
.mainbase,
|
|
.subbase,
|
|
.hivebase{
|
|
display: none !important;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.basetabstoggle[value="mainbase"] ~ div.mainbase,
|
|
.basetabstoggle[value="subbase"] ~ div.subbase,
|
|
.basetabstoggle[value="hivebase"] ~ div.hivebase {
|
|
display: grid !important;
|
|
}
|
|
|
|
.campaignToggle[value="mainbase"] ~ div.mainbase,
|
|
.campaignToggle[value="subbase"] ~ div.subbase,
|
|
.campaignToggle[value="hivebase"] ~ div.hivebase {
|
|
display: grid !important;
|
|
}
|
|
|
|
|
|
.basetabstoggle[value="campaignCore"] ~ div.campaignHolder > .campaignCoreBtn,
|
|
.basetabstoggle[value="campaignSpace"] ~ div.campaignHolder > .campaignSpaceBtn,
|
|
.basetabstoggle[value="campaignCustom"] ~ div.campaignHolder > .campaignCustomBtn {
|
|
background-color:#3287a8;
|
|
color: white;
|
|
}
|
|
|
|
span.centertext {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* Filtered Powers */
|
|
.filtered_powers ~.repcontrol {
|
|
display: none; /* Hide the add/modify buttons*/
|
|
}
|
|
|
|
.filtered ~.repcontrol {
|
|
display: none; /* Hide the add/modify buttons*/
|
|
}
|
|
|
|
/* Not sure what it thinks the first one is but ok */
|
|
.filtered_drones ~.repcontrol:nth-of-type(2) {
|
|
display: none; /* Hide the add/modify buttons*/
|
|
}
|
|
|
|
/* Any child of a repitem of a filtered_power that is a sibling of an unchecked equipped box */
|
|
input.equipped:not(:checked) ~ * {
|
|
display:none !important; /*This has to be important because labels do NOT want to hide.*/
|
|
}
|
|
|
|
.knownname {
|
|
width: 125px !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Base Sheet */
|
|
.mainbase {
|
|
display: grid;
|
|
width: 800px;
|
|
height: 1460px;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 230px 1fr 1fr 1fr 1fr 200px;
|
|
grid-template-areas:
|
|
"basehead basehead basehead basehead"
|
|
"room1 room2 room3 room4 "
|
|
"room5 room6 room7 room8 "
|
|
"room9 room10 room11 room12 "
|
|
"room13 room14 room15 room16 "
|
|
"basenotes basenotes basenotes basenotes";
|
|
}
|
|
|
|
|
|
.basenotes {
|
|
grid-area: basenotes;
|
|
height: fit-content;
|
|
}
|
|
|
|
.basehead {
|
|
grid-area: basehead;
|
|
background-color: #e8e8e9 !important;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.basehead > .header-left {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.basehead > .header-left > label {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
h2.pull-left {
|
|
float: left;
|
|
display: float;
|
|
align-self: flex-start;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.room1 {
|
|
grid-area: room1;
|
|
}
|
|
|
|
.room2 {
|
|
grid-area: room2;
|
|
}
|
|
|
|
.room3 {
|
|
grid-area: room3;
|
|
}
|
|
|
|
.room4 {
|
|
grid-area: room4;
|
|
}
|
|
|
|
.room5 {
|
|
grid-area: room5;
|
|
}
|
|
|
|
.room6 {
|
|
grid-area: room6;
|
|
}
|
|
|
|
.room7 {
|
|
grid-area: room7;
|
|
}
|
|
|
|
.room8 {
|
|
grid-area: room8;
|
|
}
|
|
|
|
.room9 {
|
|
grid-area: room9;
|
|
}
|
|
|
|
.room10 {
|
|
grid-area: room10;
|
|
}
|
|
|
|
.room11 {
|
|
grid-area: room11;
|
|
}
|
|
|
|
.room12 {
|
|
grid-area: room12;
|
|
}
|
|
|
|
.room13 {
|
|
grid-area: room13;
|
|
}
|
|
|
|
.room14 {
|
|
grid-area: room14;
|
|
}
|
|
|
|
.room15 {
|
|
grid-area: room15;
|
|
}
|
|
|
|
.room16 {
|
|
grid-area: room16;
|
|
}
|
|
|
|
.baseside {
|
|
grid-area: baseside;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
/* Base Customizations */
|
|
|
|
|
|
.basenotes > textarea {
|
|
min-height: 70%;
|
|
}
|
|
|
|
section.room {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
label.basecost {
|
|
font-size: 16em;
|
|
display: flex;
|
|
align-self: center;
|
|
justify-self: center;
|
|
color: #efefef;
|
|
position: relative;
|
|
left: 23%;
|
|
top: 5%;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.mech {
|
|
font-color: white;
|
|
}
|
|
|
|
span.subspan {
|
|
display: flex;
|
|
}
|
|
|
|
span.subspan label {
|
|
width: 3em;
|
|
}
|
|
|
|
span.subspan select {
|
|
width: 10em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
span.subspan button {
|
|
height: 1em;
|
|
}
|
|
|
|
|
|
span.baselocker {
|
|
justify-self: center;
|
|
align-self: center;
|
|
display: flex;
|
|
position: relative;
|
|
bottom: 5px;
|
|
}
|
|
|
|
.Munholder {
|
|
display: flex;
|
|
}
|
|
|
|
span.baselocker.sub {
|
|
margin-top: unset !important;
|
|
}
|
|
|
|
input.baselocked:not(:checked) ~ span.baselocker {
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* The checkbox before "locked" */
|
|
input.baselocked:not(:checked) ~ span.baselocker > input {
|
|
margin-top: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Name of the building */
|
|
.buildinglist {
|
|
width: 150px;
|
|
}
|
|
|
|
/* Checkbox itself */
|
|
input.baselocked:checked, input.baselocked[value="on"] {
|
|
width: 1.35em;
|
|
top: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
/* "locked" text */
|
|
.baselabel {
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
/* The word "locked" */
|
|
input.baselocked:checked + label.baselabel {
|
|
font-variant: small-caps;
|
|
font-size: 2em;
|
|
}
|
|
|
|
|
|
/*When the room is UNLOCKED, "locked" label and big number*/
|
|
input.baselocked:not(:checked) + label{
|
|
display: none;
|
|
}
|
|
|
|
/*Room label (its name) and its description*/
|
|
input.baselocked:checked ~ input, input.baselocked:checked ~ textarea {
|
|
display: none;
|
|
}
|
|
|
|
/* Toggle between briny, space, and regular inputs */
|
|
/* This specificity trick saved us from having to create 16 hidden checkboxes. */
|
|
/* Also lost an hour becuase didn't realize JQuery is ONLY available in dev server but c'est la vie. */
|
|
|
|
/* Hide core buildings when either briny or space is checked */
|
|
input.sheet-briny:checked ~ div.basesheet > div.mainbase > section > input.corebuildings {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-space:checked ~ div.basesheet > div.mainbase > section > input.corebuildings {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide briny buildings when briny is not checked OR when space is checked */
|
|
input.sheet-briny:not(:checked) ~ div.basesheet > div.mainbase > section > input.brinybuildings {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-space:checked ~ div.basesheet > div.mainbase > section > input.brinybuildings {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide space buildings when space is not checked */
|
|
input.sheet-space:not(:checked) ~ div.basesheet > div.mainbase > section > input.spacebuildings {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide the Briny Bastards lieutenants page if we're not on BB mode */
|
|
input.sheet-briny:not(:checked) ~ .campaignsheet .lieutenants {
|
|
display: none;
|
|
}
|
|
|
|
.liename {
|
|
font-variant: small-caps;
|
|
text-align: left !important;
|
|
}
|
|
|
|
.liename:not(.first) {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.lieuholder {
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.maxwidth {
|
|
max-width: 97%;
|
|
}
|
|
|
|
.lieuholder:last-child {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.lieustats {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.centered {
|
|
text-align: left;
|
|
margin-left: 5%;
|
|
width: 100%;
|
|
}
|
|
|
|
.cutbacks.lieutenants {
|
|
counter-reset: repitem;
|
|
}
|
|
|
|
.counter::before {
|
|
counter-increment: repitem;
|
|
content: counter(repitem) '. ';
|
|
}
|
|
|
|
|
|
.spacebefore {
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.corpmiss.allyname {
|
|
width: 160px !important;
|
|
word-wrap: break-word;
|
|
min-height: fit-content !important;
|
|
height: 100%;
|
|
overflow: auto;
|
|
margin-right: 0px;
|
|
margin-top: 10px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.fieldbutton {
|
|
vertical-align: top;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
input.baselocked[value="on"] + span.subinfo, input.baselocked[value="on"] + textarea, input.baselocked:checked + span.subinfo, input.baselocked:checked+ textarea{
|
|
display: none;
|
|
}
|
|
|
|
span.decay {
|
|
display: flex;
|
|
z-index: 1;
|
|
}
|
|
|
|
label.decayed {
|
|
display: none;
|
|
}
|
|
|
|
span.decay > p {
|
|
font-size: 2.2em;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
|
|
label.decay {
|
|
width: fit-content;
|
|
}
|
|
|
|
input.decayed[value="on"] + label.decayed {
|
|
color: red;
|
|
transform: rotate(45deg);
|
|
top: 55px;
|
|
position: relative;
|
|
right: 45px;
|
|
font-size: 1.4em;
|
|
display: block;
|
|
}
|
|
|
|
/* Submarine */
|
|
.submarine {
|
|
border-radius: 20% 20% 20% 20% / 50% 50% 49% 50%;
|
|
border: 5px solid #000;
|
|
height: 800px;
|
|
border-color: transparent #000 transparent #000;
|
|
display: grid;
|
|
width: 800px;
|
|
height: 1460px;
|
|
padding-left: 29px;
|
|
padding-right: 29px;
|
|
grid-gap: 4px;
|
|
grid-template-columns:20px 1fr 1fr 20px;
|
|
grid-template-rows: 230px 1fr 1fr 1fr 200px;
|
|
grid-template-areas:
|
|
"subhead subhead subhead subhead"
|
|
". subroom1 subroom2 ."
|
|
". subroom3 subroom4 ."
|
|
". subroom5 subroom6 ."
|
|
". subnotes subnotes .";
|
|
}
|
|
|
|
.subhead {
|
|
grid-area: subhead;
|
|
margin-bottom: 100px;
|
|
position: relative;
|
|
left: 10%;
|
|
width: 80%;
|
|
top: 100px;
|
|
}
|
|
|
|
.subnotes {
|
|
grid-area: subnotes;
|
|
left: 5%;
|
|
position: relative;
|
|
width: 93%;
|
|
}
|
|
|
|
.subroom {
|
|
max-width: 1fr;
|
|
}
|
|
|
|
.subroom1 {
|
|
grid-area: subroom1;
|
|
}
|
|
|
|
.subroom2 {
|
|
grid-area: subroom2;
|
|
}
|
|
|
|
.subroom3 {
|
|
grid-area: subroom3;
|
|
}
|
|
|
|
.subroom4 {
|
|
grid-area: subroom4;
|
|
}
|
|
|
|
.subroom5 {
|
|
grid-area: subroom5;
|
|
}
|
|
|
|
.subroom6 {
|
|
grid-area: subroom6;
|
|
}
|
|
|
|
span.subinfo {
|
|
display: flex;
|
|
}
|
|
|
|
label.narrow {
|
|
width: fit-content;
|
|
}
|
|
|
|
h2.narrow {
|
|
width:fit-content;
|
|
}
|
|
|
|
span.spacer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
input.subdamaged[value="on"] ~ label.damagelabel {
|
|
color: red;
|
|
display: inline;
|
|
position: relative;
|
|
font-size: 3em;
|
|
left: 15%;
|
|
transform: rotate(30deg);
|
|
bottom: 40%;
|
|
}
|
|
label.damagelabel {
|
|
display: none;
|
|
|
|
}
|
|
|
|
.pullright{
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
input.subdamaged {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.pulldown {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.rightsubmarine {
|
|
position: relative;
|
|
top: -30px;
|
|
}
|
|
|
|
.subname {
|
|
position: relative;
|
|
bottom: 30px;
|
|
}
|
|
|
|
.submarine_heading_holder {
|
|
display: flex;
|
|
}
|
|
|
|
textarea.subsource {
|
|
height: 40%;
|
|
}
|
|
|
|
|
|
|
|
/* Beehive */
|
|
|
|
#grid li {
|
|
list-style-type: none;
|
|
position: relative;
|
|
float: left;
|
|
width: 27.85714285714286%;
|
|
padding: 0 0 32.16760145166612% 0;
|
|
-o-transform: rotate(-60deg) skewY(30deg);
|
|
-moz-transform: rotate(-60deg) skewY(30deg);
|
|
-webkit-transform: rotate(-60deg) skewY(30deg);
|
|
-ms-transform: rotate(-60deg) skewY(30deg);
|
|
transform: rotate(-60deg) skewY(30deg);
|
|
background: #fd005f;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
#grid li * {
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
#grid li .hexagon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fdbf00;
|
|
-o-transform: skewY(-30deg) rotate(60deg);
|
|
-moz-transform: skewY(-30deg) rotate(60deg);
|
|
-webkit-transform: skewY(-30deg) rotate(60deg);
|
|
-ms-transform: skewY(-30deg) rotate(60deg);
|
|
transform: skewY(-30deg) rotate(60deg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
#grid li:nth-child(3n+2) {
|
|
margin: 0 1%;
|
|
}
|
|
|
|
#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
|
|
margin-top: -6.9285714285%;
|
|
margin-bottom: -6.9285714285%;
|
|
-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
transform: translateX(50%) rotate(-60deg) skewY(30deg);
|
|
}
|
|
|
|
|
|
.hiveroom {
|
|
border: none;
|
|
}
|
|
|
|
|
|
/* Campaign sheet */
|
|
.campaignzone {
|
|
height: 800px;
|
|
border-color: transparent #000 transparent #000;
|
|
display: grid;
|
|
width: 800px;
|
|
height: 1460px;
|
|
padding-left: 29px;
|
|
padding-right: 29px;
|
|
grid-gap: 4px;
|
|
grid-template-columns:1fr 2fr;
|
|
grid-template-rows: 200px 220px 190px 1fr 200px;
|
|
grid-template-areas:
|
|
"camphead camphead"
|
|
"secondary secondary"
|
|
"drops drops"
|
|
"friendbar progress"
|
|
"friendbar campnotes";
|
|
}
|
|
|
|
.drops {
|
|
grid-area: drops;
|
|
}
|
|
|
|
.secondary {
|
|
grid-area: secondary;
|
|
}
|
|
|
|
.camphead {
|
|
grid-area: camphead
|
|
}
|
|
|
|
.friendbar {
|
|
grid-area: friendbar;
|
|
}
|
|
|
|
.camprogress {
|
|
grid-area: progress;
|
|
}
|
|
|
|
.campnotes {
|
|
grid-area: campnotes;
|
|
height: fit-content;
|
|
min-height: 185px;
|
|
}
|
|
|
|
.flexspan {
|
|
display: flex;
|
|
}
|
|
|
|
div > input.allyname {
|
|
width: 65%;
|
|
margin-left: 0px !important;
|
|
}
|
|
|
|
.friend > h3, .foe > h3 {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
hr.separator {
|
|
margin-top: 60px;
|
|
margin-bottom: 60px;
|
|
border-color: #7d7d7d;
|
|
border-width: 2px;
|
|
border-style: dashed;
|
|
}
|
|
|
|
prog > h3, prog > h2 {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
input.sheet-briny:not(:checked) + .brinyhide {
|
|
display: none;
|
|
}
|
|
|
|
.eighty {
|
|
width: 80%;
|
|
}
|
|
|
|
/* Drops */
|
|
.alldrops {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.drop {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sectiontop {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.adj {
|
|
display: flex;
|
|
}
|
|
|
|
.myRow {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
span.bonus {
|
|
display:flex;
|
|
}
|
|
|
|
div.centerbtn {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dropbtn {
|
|
width: 15%
|
|
}
|
|
|
|
.sheet-briny:not(:checked) ~ .campaignsheet .brinydrop {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* Roll Templates */
|
|
|
|
/* Attribute template */
|
|
.sheet-rolltemplate-attributeroll {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: grid;
|
|
grid-template-areas:
|
|
"name roll"
|
|
"title roll"
|
|
"results results"
|
|
"details details";
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto auto auto;
|
|
grid-column-gap: 3px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-cybertitle {
|
|
color: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-smashtitle {
|
|
color: red;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-slytitle {
|
|
color: blue;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-result {
|
|
grid-area: results;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-reprecussion {
|
|
color: red;
|
|
font-size: 1.2em;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-success {
|
|
color: green;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-reprecussion:first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-container {
|
|
border: 3px solid black;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-roll{
|
|
grid-area: roll;
|
|
align-self: center;
|
|
justify-self: center;
|
|
border: 2px solid black;
|
|
border-radius: 10px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
max-width: 80px;
|
|
text-align: center;
|
|
padding: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-header {
|
|
background-color: var(--header-bg-color, #a83521);
|
|
color: var(--header-text-color, #FFF);
|
|
text-align: left;
|
|
text-transform: capitalize;
|
|
padding: 5px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .sheet-title,
|
|
.sheet-rolltemplate-attributeroll .sheet-name {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-title {
|
|
grid-area: title;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-name {
|
|
grid-area: name;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-subtitle {
|
|
font-size: 1em;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .sheet-container {
|
|
--header-bg-color: #a83521;
|
|
--header-text-color: #FFF;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-content {
|
|
display: grid;
|
|
background: #FFF;
|
|
grid-template-columns: auto auto;
|
|
line-height: 1.4em;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .sheet-content > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-results-roll {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-content .sheet-key {
|
|
font-weight: bold;
|
|
padding-right: 10px;
|
|
text-align: right;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-attributeroll .sheet-content :nth-child(4n) {
|
|
background: #EEE;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-main-roll {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .inlinerollresult {
|
|
border: none !important;
|
|
background-color: transparent;
|
|
font-weight: bold;
|
|
padding: 0 3px 0 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-main-roll .inlinerollresult {
|
|
font-size: 1.6em;
|
|
}
|
|
.sheet-rolltemplate-attributeroll .sheet-details {
|
|
grid-column: span 2;
|
|
font-size: .9em;
|
|
grid-area: details;
|
|
margin-top: 5px;
|
|
letter-spacing: -0.4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-attributeroll .sheet-armament-reminder {
|
|
grid-column: span 2;
|
|
font-size: 0.75em;
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
padding-top: 5px;
|
|
border-top: 1px solid rgba(0,0,0,0.1);
|
|
color: #666;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Secondary mission templates */
|
|
.sheet-rolltemplate-mission {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: grid;
|
|
grid-template-areas:
|
|
"title roll"
|
|
"results results"
|
|
"failure failure"
|
|
"success success"
|
|
"costs costs"
|
|
"injured injured";
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto auto auto auto auto;
|
|
grid-column-gap: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-injured {
|
|
grid-area: injured;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-succMsg {
|
|
color: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission div.sheet-deets {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-failMsg {
|
|
color: red;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-costs {
|
|
grid-area: costs;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-success {
|
|
grid-area: success;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-failure {
|
|
grid-area: failure;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-title {
|
|
grid-area: title;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-result {
|
|
grid-area: results;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-roll{
|
|
grid-area: roll;
|
|
align-self: center;
|
|
justify-self: center;
|
|
border: 2px solid black;
|
|
border-radius: 10px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
max-width: 80px;
|
|
text-align: center;
|
|
padding: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-mission .sheet-results-roll {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-main-roll {
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
}
|
|
.sheet-rolltemplate-mission .inlinerollresult {
|
|
border: none !important;
|
|
background-color: transparent;
|
|
font-weight: bold;
|
|
padding: 0 3px 0 0;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-mission .sheet-main-roll .inlinerollresult {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Drops Template*/
|
|
.sheet-rolltemplate-drops {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
align-items: center;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-rolltemplate-drops .sheet-title {
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* Grief Template */
|
|
.sheet-rolltemplate-grief .sheet-grieflength > .inlinerollresult {
|
|
border: unset;
|
|
background-color: unset;
|
|
font-size: unset;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
align-items: center;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: grid;
|
|
grid-template-areas:
|
|
"grieftitle grieftitle"
|
|
"gOperName gRoll"
|
|
"result result";
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto 1fr 1.5fr;
|
|
grid-column-gap: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-title {
|
|
grid-area: grieftitle;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-name {
|
|
grid-area: gOperName;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-result {
|
|
grid-area: result;
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: medium;
|
|
margin-top:10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-main-roll{
|
|
grid-area: roll;
|
|
align-self: center;
|
|
justify-self: center;
|
|
border-radius: 10px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
max-width: 80px;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
margin-right: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-grief .sheet-main-roll > .inlinerollresult {
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
border-radius: 10px;
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-main-roll > .fullfail {
|
|
border: 2px solid #b31515;
|
|
}
|
|
|
|
.sheet-rolltemplate-grief .sheet-main-roll > .fullcrit {
|
|
border: 2px solid #3fb315;
|
|
}
|
|
|
|
|
|
|
|
/* Power Template */
|
|
.sheet-rolltemplate-powers {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: grid;
|
|
grid-template-areas:
|
|
"powertitle powertitle"
|
|
"pOperName powercost"
|
|
"powerName powerHarm"
|
|
"pdesc pdesc";
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto 1fr 1fr;
|
|
grid-column-gap: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-header {
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-title {
|
|
grid-area: powertitle;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-name {
|
|
grid-area: pOperName;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-powername {
|
|
grid-area: powerName;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-description {
|
|
grid-area: pdesc;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-cost {
|
|
grid-area: powercost;
|
|
}
|
|
|
|
.sheet-rolltemplate-powers .sheet-powerHarm {
|
|
grid-area: powerHarm;
|
|
}
|
|
|
|
|
|
/* Weapon template */
|
|
.sheet-rolltemplate-weapon {
|
|
font-family: "IBM Plex Mono";
|
|
margin: 0 -3px -4px -42px;
|
|
position: relative;
|
|
font-size: 15px;
|
|
line-height: 1.2;
|
|
border-radius: 10px;
|
|
border: 2px solid black;
|
|
padding: 5px;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
cursor: default;
|
|
box-sizing: border-box;
|
|
background-repeat: repeat-y;
|
|
background-size: 100% auto;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg");
|
|
display: grid;
|
|
grid-template-areas:
|
|
"weapontitle weapontitle"
|
|
"operName harm"
|
|
"weaponName ."
|
|
"pdesc pdesc"
|
|
"range range"
|
|
"ammo ammo"
|
|
"fuse fuse";
|
|
grid-template-columns: 2fr 1fr;
|
|
grid-template-rows: auto auto auto auto auto auto auto;
|
|
grid-column-gap: 3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-header {
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-ammo {
|
|
grid-area: ammo;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-range {
|
|
grid-area: range;
|
|
font-size: .86em;
|
|
margin-bottom: 15px;
|
|
margin-top:11px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-armUpgrades {
|
|
grid-area: fuse;
|
|
font-size: .86em;
|
|
margin-bottom: 15px;
|
|
margin-top:11px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-title {
|
|
grid-area: weapontitle;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-name {
|
|
grid-area: operName;
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-red {
|
|
color: red;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-weaponname {
|
|
grid-area: weaponName;
|
|
font-style: italic;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-description {
|
|
grid-area: pdesc;
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
.sheet-rolltemplate-weapon .sheet-harm {
|
|
grid-area: harm;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
|
|
/* Dark Mode */
|
|
|
|
body.sheet-darkmode {
|
|
--backgroundDark: #282828;
|
|
--backgroundDarkOffset: #1e1e1e;
|
|
--colorDark: #eee;
|
|
--colorLight: #dcdcdc;
|
|
--gentleOrange: #d79921;
|
|
--orange: orange;
|
|
--accentBlue: #458588;
|
|
|
|
--threatLevel4ColorDark: #9d0006;
|
|
--threatLevel3ColorDark: #af3a03;
|
|
--threatLevel2ColorDark: #d79921;
|
|
--threatLevel1ColorDark: #427b58;
|
|
|
|
background: var(--backgroundDark);
|
|
}
|
|
|
|
body.sheet-darkmode button,
|
|
body.sheet-darkmode input,
|
|
body.sheet-darkmode optgroup,
|
|
body.sheet-darkmode select,
|
|
body.sheet-darkmode textarea,
|
|
body.sheet-darkmode label,
|
|
body.sheet-darkmode .charsheet {
|
|
color: var(--colorDark);
|
|
background-color: var(--backgroundDarkOffset);
|
|
}
|
|
body.sheet-darkmode .btn,
|
|
body.sheet-darkmode .btn.btn-default {
|
|
color: #c8c3bc;
|
|
text-shadow: rgba(24,26,27,.75) 0px 1px 1px;
|
|
background-color: var(--backgroundDark);
|
|
background-image: linear-gradient(#181a1b, #26292b);
|
|
border-color: #3e4446 #3e4446 #43494c;
|
|
box-shadow: rgba(24,26,27,.2) 0px 1px 0px inset,rgba(0,0,0,.05) 0px 1px 2px
|
|
}
|
|
|
|
body.sheet-darkmode button,
|
|
body.sheet-darkmode textarea,
|
|
body.sheet-darkmode hr,
|
|
body.sheet-darkmode input {
|
|
border-color: var(--gentleOrange) !important;
|
|
}
|
|
|
|
body.sheet-darkmode h1,
|
|
body.sheet-darkmode h2,
|
|
body.sheet-darkmode h3,
|
|
body.sheet-darkmode h4,
|
|
body.sheet-darkmode h5 {
|
|
color: var(--colorLight)
|
|
}
|
|
|
|
body.sheet-darkmode .header,
|
|
body.sheet-darkmode .charactersheet,
|
|
body.sheet-darkmode .campaignsheet,
|
|
body.sheet-darkmode .basesheet,
|
|
body.sheet-darkmode .hivebase::before,
|
|
body.sheet-darkmode .charactersheet section:not(.hiveroom),
|
|
body.sheet-darkmode .charactersheet main::before {
|
|
background-color: var(--backgroundDark);
|
|
}
|
|
|
|
body.sheet-darkmode .basehead,
|
|
body.sheet-darkmode .header {
|
|
background-color: var(--backgroundDark) !important;
|
|
}
|
|
|
|
body.sheet-darkmode .autoExpand + hr.underline + label {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
body.sheet-darkmode label.basecost {
|
|
width: fit-content;
|
|
margin-right: 50%;
|
|
}
|
|
|
|
body.sheet-darkmode input {
|
|
accent-color: var(--gentleOrange);
|
|
}
|
|
|
|
body.sheet-darkmode .basetabstoggle[value="mainbase"] ~ div.tabholder > .mainbasebtn,
|
|
body.sheet-darkmode .basetabstoggle[value="subbase"] ~ div.tabholder > .subbasebtn,
|
|
body.sheet-darkmode .basetabstoggle[value="hivebase"] ~ div.tabholder > .hivebasebtn {
|
|
background-color: var(--gentleOrange);
|
|
color: black;
|
|
}
|
|
|
|
body.sheet-darkmode .submarine {
|
|
border-color: transparent #FFF transparent #FFF;
|
|
}
|
|
|
|
body.sheet-darkmode label:not(.progressbar__label, .threatlabel ) {
|
|
width: fit-content;
|
|
background: transparent;
|
|
}
|
|
|
|
body.sheet-darkmode .sideholder label {
|
|
margin-right: auto;
|
|
}
|
|
|
|
body.sheet-darkmode .sideholder {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
body.sheet-darkmode input.baselocked:checked + label.baselabel {
|
|
color: var(--gentleOrange);
|
|
}
|
|
|
|
|
|
|
|
body.sheet-darkmode .hiveroom input.baselocked:checked + label.baselabel {
|
|
color: black;
|
|
}
|
|
|
|
body.sheet-darkmode .hiveroom textarea,
|
|
body.sheet-darkmode .hiveroom input {
|
|
accent-color: var(--colorLight);
|
|
background-color: var(--accentBlue);
|
|
}
|
|
|
|
body.sheet-darkmode .hiveroom label {
|
|
color: var(--accentBlue);
|
|
}
|
|
|
|
body.sheet-darkmode .hexagon {
|
|
background: var(--gentleOrange) !important;
|
|
}
|
|
|
|
|
|
/* Dark Grief */
|
|
|
|
/* Labels after the one we've clicked */
|
|
body.sheet-darkmode .progressbar__radio:checked + label ~ label {
|
|
color: var(--gentleOrange);
|
|
background: transparent;
|
|
}
|
|
|
|
/* Every square that follows the one clicked */
|
|
body.sheet-darkmode .progressbar__radio:checked + label ~ label::before {
|
|
background: var(--gentleOrange);
|
|
border: 2px solid var(--gentleOrange);
|
|
}
|
|
|
|
body.sheet-darkmode .progressbar__radio:checked + label ~ label::after {
|
|
background: #aaa;
|
|
}
|
|
|
|
/* The checked square */
|
|
body.sheet-darkmode .progressbar__radio:checked + label::before {
|
|
background: var(--gentleOrange);
|
|
}
|
|
|
|
/* The checked label */
|
|
body.sheet-darkmode .progressbar__radio:checked + label {
|
|
color: var(--gentleOrange);
|
|
background: transparent;
|
|
}
|
|
|
|
/*Labels before the one we clicked*/
|
|
body.sheet-darkmode .progressbar__label {
|
|
color: #aaa;
|
|
background: transparent;
|
|
}
|
|
|
|
body.sheet-darkmode .progressbar__label::before {
|
|
background: white;
|
|
border: 2px solid var(--gentleOrange);
|
|
}
|
|
|
|
|
|
/* Dark Threat */
|
|
body.sheet-darkmode .threatbar:checked + label ~ label {
|
|
color: #aaa;
|
|
}
|
|
|
|
body.sheet-darkmode .threatbar:checked + label ~ label::before {
|
|
background: white;
|
|
border-color: #aaa;
|
|
}
|
|
|
|
body.sheet-darkmode .threatbar:checked + label ~ label::after {
|
|
background: #aaa;
|
|
}
|
|
|
|
body.sheet-darkmode .threatlabel {
|
|
background: transparent;
|
|
display: table-cell;
|
|
font-weight: bold;
|
|
position: relative;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body.sheet-darkmode .threatlabel::before {
|
|
background: var(--gentleOrange);
|
|
border: 2px solid var(--gentleOrange);
|
|
bottom: calc((100% - 40px) - 2px);
|
|
content: "";
|
|
display: block;
|
|
height: 20px;
|
|
left: calc((50% - 1em) - 2px);
|
|
position: absolute;
|
|
width: 20px;
|
|
z-index: 9;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
body.sheet-darkmode .threat1::before {
|
|
background: var(--threatLevel1ColorDark);
|
|
border-color: var(--threatLevel1ColorDark);
|
|
}
|
|
body.sheet-darkmode .threatlabel.threat1 {
|
|
color: var(--threatLevel1Color)D50C59;
|
|
}
|
|
|
|
body.sheet-darkmode .threat2::before {
|
|
background: var(--threatLevel2ColorDark);
|
|
border-color: var(--threatLevel2ColorDark);
|
|
}
|
|
body.sheet-darkmode .threatlabel.threat2 {
|
|
color: var(--threatLevel2Color);
|
|
}
|
|
|
|
|
|
body.sheet-darkmode .threat3::before {
|
|
background: var(--threatLevel3ColorDark);
|
|
border-color: var(--threatLevel3ColorDark);
|
|
}
|
|
body.sheet-darkmode .threatlabel.threat3 {
|
|
color: var(--threatLevel3ColorDark);
|
|
}
|
|
|
|
|
|
body.sheet-darkmode .threat4::before {
|
|
background: var(--threatLevel4ColorDark);
|
|
border-color: var(--threatLevel4ColorDark);
|
|
}
|
|
body.sheet-darkmode .threatlabel.threat4 {
|
|
color: var(--threatLevel4ColorDark);
|
|
}
|
|
|
|
body.sheet-darkmode .threatlabel.threat1,
|
|
body.sheet-darkmode .threatlabel.threat2,
|
|
body.sheet-darkmode .threatlabel.threat3,
|
|
body.sheet-darkmode .threatlabel.threat4 {
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Dark templates */
|
|
.sheet-rolltemplate-darkmode {
|
|
--greenDark: #689d6a;
|
|
--redDark: #cc241d;
|
|
--blueDark: #458588;
|
|
--lightOffset: #d5c4a1;
|
|
--darkText: #3c3836;
|
|
background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg-dark.jpg");
|
|
}
|
|
|
|
|
|
/* Begin Dark Attribute */
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll {
|
|
border: 3px solid var(--lightOffset);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-cybertitle {
|
|
color: var(--greenDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-smashtitle {
|
|
color: var(--redDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-slytitle {
|
|
color: var(--blueDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-reprecussion {
|
|
color: var(--redDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-success {
|
|
color: var(--greenDark);
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-main-roll {
|
|
font-size: 1.2em;
|
|
text-align: center;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-main-roll .inlinerollresult {
|
|
font-size: 1.3em;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .inlinerollresult {
|
|
border: none !important;
|
|
background-color: var(--lightOffset);
|
|
color: var(--darkText)
|
|
}
|
|
|
|
/* End Dark Attribute */
|
|
|
|
/* Begin Dark Grief */
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-grief {
|
|
border: 2px solid var(--lightOffset);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .inlinerollresult {
|
|
border: 2px solid var(--lightOffset);
|
|
background-color: var(--lightOffset);
|
|
|
|
color: var(--darkText)
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .fullfail {
|
|
border: 2px solid var(--redDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .fullcrit {
|
|
border: 3px solid var(--greenDark);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-weapon .sheet-red {
|
|
color: var(--redDark);
|
|
}
|
|
|
|
/* Armament checkbox styling */
|
|
.armament-checkboxes {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 8px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
margin: 0;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.armament-divider {
|
|
margin: 15px 0;
|
|
border: none;
|
|
border-top: 5px solid #333;
|
|
width: 100%;
|
|
}
|
|
|