diff --git a/Cyberrats/Cyberrats.css b/Cyberrats/Cyberrats.css index 50510dc8ec..fd5114ed04 100644 --- a/Cyberrats/Cyberrats.css +++ b/Cyberrats/Cyberrats.css @@ -12,7 +12,7 @@ main { grid-template-columns: 240px 10px 240px 260px; grid-template-rows: 40px 230px 300px 1fr 1fr 1fr 1fr; grid-template-areas: - "settings settings settings settings" + "settings settings settings settings" "header header header header" ". . . portrait" "powers powers powers background" @@ -30,7 +30,7 @@ height:2000px; position: absolute; width: 95%; z-index: -1; -} +} section { padding: 5px; @@ -97,7 +97,7 @@ section { } section.empty { - grid-area: empty; + grid-area: empty; } .skill { @@ -107,36 +107,36 @@ section.empty { } .tabholder { - display: flex; - flex-direction: row; - justify-content: center; + display: flex; + flex-direction: row; + justify-content: center; } .tabholder > button { - margin-left: 2px; - margin-right: 2px; + margin-left: 2px; + margin-right: 2px; } .powers { grid-area: powers; - margin-top: -280px; + margin-top: -280px; } .background { grid-area: background; - height: fit-content; - min-height: 707px; + height: fit-content; + min-height: 707px; } .loadout { - grid-area: loadout; + grid-area: loadout; } .settings { - grid-area: settings; - display: flex; - flex-direction: row; - justify-content: space-between; + grid-area: settings; + display: flex; + flex-direction: row; + justify-content: space-between; } .power .repcontainer[data-groupname="repeating_power"]{ @@ -152,31 +152,31 @@ section.empty { } div.briny { - margin-top:10px; - display: none; /*default*/ + margin-top:10px; + display: none; /*default*/ } h4.briny { - text-align:center; + text-align:center; } div.briny > h5 { - margin-top: 10px; + margin-top: 10px; } .items { - grid-area: items; + grid-area: items; } .portrait { - grid-area: portrait; + grid-area: portrait; } section.notes { grid-area: notes; - min-height: 120px; - height:fit-content; + min-height: 120px; + height:fit-content; } @@ -185,180 +185,180 @@ section.notes { \*------------------------------------*/ .flexheader { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } textarea.textnotes { - height: unset; - min-height:70%; + height: unset; + min-height:70%; } .header-left { - align-self: flex-end; - width: 70%; - margin-bottom: 2px; + align-self: flex-end; + width: 70%; + margin-bottom: 2px; } .header-left.empty { - flex-grow: 1; + flex-grow: 1; } .header-right { - width: 30%; + width: 30%; } .mainbase .header-right { - width: 29%; + width: 29%; } .stack { - display: flex; - flex-direction: column; - padding: 0; + display: flex; + flex-direction: column; + padding: 0; } hr.underline { - border: unset; - margin: 0; - border-bottom: 2px solid #acadb0; + border: unset; + margin: 0; + border-bottom: 2px solid #acadb0; } hr.underline ~ label { - margin-top: -4px; - margin-left: 4px; + margin-top: -4px; + margin-left: 4px; } hr.divide { - margin-top: 10px; - border-top: 3px solid #afafaf; + margin-top: 10px; + border-top: 3px solid #afafaf; } .nintety { - width: 80%; + width: 80%; } button.inline { - margin-left: 1px !important; - margin-right: 1px !important; + margin-left: 1px !important; + margin-right: 1px !important; } input.item { - width: 58%; - margin-left: 1px !important; - margin-right: 0px !important; + width: 58%; + margin-left: 1px !important; + margin-right: 0px !important; } input.item ~ label.inline { - position: relative; - bottom: -2px; - margin-left: 1px; - margin-right: 0px; + position: relative; + bottom: -2px; + margin-left: 1px; + margin-right: 0px; } input.harmcounter { - width: 3em !important; + width: 3em !important; } label.harmlabel { - position: relative; - bottom: -2px; - margin-left: 1px; - margin-right: 0px; - display: inline; + position: relative; + bottom: -2px; + margin-left: 1px; + margin-right: 0px; + display: inline; } input.weapon { - width: 40%; + width: 40%; } span.ammo { - display: none; + display: none; } span.ammo > label { - width: fit-content; + width: fit-content; } span.ammo > p.slash { - font-size: 2em; - font-weight: bold; - position: relative; - top: 6px; + font-size: 2em; + font-weight: bold; + position: relative; + top: 6px; } input.hasammo[value="true"] + span.ammo { - display: flex; + display: flex; } input.header-input { - margin: 0; - margin-left: 0px !important; + margin: 0; + margin-left: 0px !important; } img { - border: 5px solid #e8e8e9; - max-width:95% + border: 5px solid #e8e8e9; + max-width:95% } h4.caption { - font-variant: small-caps; - text-align: right; - width: 95%; + 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; + font-variant: small-caps; + margin-bottom:-10px; + margin-top: 10px; + font-size: 1.3em; } h4.sidebar ~ h4.sidebar { - margin-top: 0px; + margin-top: 0px; } h2 { - font-variant: small-caps; + font-variant: small-caps; } .borderless { - border: none; + border: none; } h4.second { - margin-top: 20px; + margin-top: 20px; } div.weapon:not(:first-child) { - margin-top: 15px; + margin-top: 15px; } div.minmax { - display:flex; - margin-top:10px; - justify-content:center; + display:flex; + margin-top:10px; + justify-content:center; } span.minmax { - font-weight: bold; - font-size: 2.4em; + font-weight: bold; + font-size: 2.4em; } input.minmax { - margin-bottom: 10px; + margin-bottom: 10px; } .inline { - display: inline !important; + display: inline !important; } label.inline ~ input { - display: inline; + display: inline; } .autoExpand { @@ -367,12 +367,12 @@ label.inline ~ input { min-width: 100px; width: fit-content; height: 28px; - width: 100%; + width: 100%; } .autoExpand.long { - min-width: 230px; - width: 80% + min-width: 230px; + width: 80% } .autoExpand span { @@ -387,86 +387,86 @@ label.inline ~ input { } span.range > input { - margin-right: 5px; + margin-right: 5px; } .small { - font-size: 1em !important; + font-size: 1em !important; } .sidebar-input { - display:inline; - width: 30%; - margin-left:10px; + 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; + dispaly: inline; + width: 50%; + margin-left: 10%; + align-self: flex-end; + margin-bottom: 10px; + font-variant: small-caps; } hr.overline { - border: unset; - margin: 0; - border-top: 2px solid #acadb0; - width:100%; + border: unset; + margin: 0; + border-top: 2px solid #acadb0; + width:100%; } div.sideholder { - display: flex; - flex-direction: row; - flex-wrap:wrap; + display: flex; + flex-direction: row; + flex-wrap:wrap; } h3.sidebar { - text-align: left; - font-variant: small-caps; + text-align: left; + font-variant: small-caps; } img.charPort { - height: 247px; - width: 247px; + height: 247px; + width: 247px; } label.setting { - font-size: 1em; - width: fit-content; + font-size: 1em; + width: fit-content; } label.setting ~ input { - width:fit-content; - margin-top:3px; + width:fit-content; + margin-top:3px; } span.briny-setting { - position: relative; - bottom: -5px; - float:right; - margin-bottom: 5px; + position: relative; + bottom: -5px; + float:right; + margin-bottom: 5px; } input.sheet-briny { - margin-bottom:4px; + margin-bottom:4px; } input.sheet-briny:checked ~ div.briny { - display:block; + display:block; } .hidden { - display: none; + display: none; } input.powername { - width: 180px; + width: 180px; } input.cost { - width: 45px; + width: 45px; } @@ -480,18 +480,18 @@ button[type=roll].sheet-d6-dice::before { } button.d6 { - padding: 2px 3px; - font-size: 1.3em; - margin: 0px 3px 0px 3px; + padding: 2px 3px; + font-size: 1.3em; + margin: 0px 3px 0px 3px; } button.d6::before { - font-family: 'dicefontd6'; + font-family: 'dicefontd6'; content: 'F '; } button.disab { - display: none !important; + display: none !important; } button.enab { @@ -500,19 +500,19 @@ button.enab { /* Grief */ div.outergrief { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } button.grief { - align-self: center; - display: flex; - margin-top: 12px; - height: fit-content; + align-self: center; + display: flex; + margin-top: 12px; + height: fit-content; } div.grief { - background: transparent; + background: transparent; box-sizing: border-box; display: flex; height: 6em; @@ -520,64 +520,64 @@ div.grief { padding: 1em 0; position: relative; width: 100%; - padding-bottom:30px; + padding-bottom:30px; } div.grief::before { - content: ""; - display: block; - position: absolute; - - top: 4em; - width: 100%; + content: ""; + display: block; + position: absolute; + + top: 4em; + width: 100%; } .progressbar__radio { - display: none; + display: none; } label.progressbar__label { - text-align: center; - padding-top: 0px; + text-align: center; + padding-top: 0px; } /* Labels after the one we've clicked */ .progressbar__radio:checked + label ~ label { - color: black; + color: black; } /* Every circle that follows the one clicked */ .progressbar__radio:checked + label ~ label::before { - background: #4286f4; - border: 2px solid #4286f4; + background: #4286f4; + border: 2px solid #4286f4; } .progressbar__radio:checked + label ~ label::after { - background: #aaa; + background: #aaa; } /* The checked circle */ .progressbar__radio:checked + label::before { - background: #4286f4; + background: #4286f4; } /* The checked label */ .progressbar__radio:checked + label { - color: black; - text-align: center; + 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; + color: #aaa; + display: table-cell; + font-weight: bold; + position: relative; + text-align: center; } .progressbar__label::before { - background: white; + background: white; border: 2px solid #4286f4; bottom: calc((100% - 40px) - 2px); content: ""; @@ -593,113 +593,113 @@ label.progressbar__label { /* Threat */ div.outerthreat { - display: flex; - flex-direction: column; - width:50%; + 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; + 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%; + content: ""; + display: block; + position: absolute; + top: 4em; + width: 100%; } .threatbar { - display: none; + display: none; } label.threatlabel { - text-align: center; - padding-top: 0px; + text-align: center; + padding-top: 0px; } .threatbar:checked + label ~ label { - color: #aaa; + color: #aaa; } .threatbar:checked + label ~ label::before { - background: white; - border-color: #aaa; + background: white; + border-color: #aaa; } .threatbar:checked + label ~ label::after { - background: #aaa; + background: #aaa; } .threatlabel { - color: #4286f4; - display: table-cell; - font-weight: bold; - position: relative; - text-align: center; - text-transform: uppercase; + 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; + 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); + background: var(--threatLevel1Color); + border-color: var(--threatLevel1Color); } .threatlabel.threat1 { - color: var(--threatLevel1Color); + color: var(--threatLevel1Color); } .threat2::before { - background: var(--threatLevel2Color); - border-color: var(--threatLevel2Color); + background: var(--threatLevel2Color); + border-color: var(--threatLevel2Color); } .threatlabel.threat2 { - color: var(--threatLevel2Color); + color: var(--threatLevel2Color); } .threat3::before { - background: var(--threatLevel3Color); - border-color: var(--threatLevel3Color); + background: var(--threatLevel3Color); + border-color: var(--threatLevel3Color); } .threatlabel.threat3 { - color: var(--threatLevel3Color); + color: var(--threatLevel3Color); } .threat4::before { - background: var(--threatLevel4Color); - border-color: var(--threatLevel4Color); + background: var(--threatLevel4Color); + border-color: var(--threatLevel4Color); } .threatlabel.threat4 { - color: var(--threatLevel4Color); + color: var(--threatLevel4Color); } @@ -707,33 +707,33 @@ label.threatlabel { .prog { - display: flex; - flex-direction: row; - justify-content: start; + display: flex; + flex-direction: row; + justify-content: start; } .leftprog, .rightprog { - width: 40%; - margin-left: 10% + width: 40%; + margin-left: 10% } .enemyheader { - text-align: center; + text-align: center; } .threat.status { - width: 70%; + width: 70%; } h3.final { - text-align: left; + text-align: left; } hr.separate { - border: 3px solid black; - border-style: solid; - border-top: none; + border: 3px solid black; + border-style: solid; + border-top: none; } .break { @@ -742,35 +742,35 @@ hr.separate { } .victoryholder { - margin-top: 10px; + margin-top: 10px; } .threat.status.victory { - display: flex; - padding-left: 10%; - padding-right: 10%; - width: 100%; + display: flex; + padding-left: 10%; + padding-right: 10%; + width: 100%; } input.attr + span.minmax + input.attr + label { - width:30%; + width:30%; } .minmax.short { - height: 20px; - margin-top: -5px; + height: 20px; + margin-top: -5px; } input.sheer-disabler:checked ~ button.disab { - display: inline !important; -} + display: inline !important; +} input.sheer-disabler:checked ~ button.enab { - display: none !important; -} + display: none !important; +} hr.separaotr { - border-top: 3px solid #c9c9c9; + border-top: 3px solid #c9c9c9; } button[type=roll]::before { @@ -779,28 +779,28 @@ button[type=roll]::before { } label.rellabel { - width: 30%; + width: 30%; } label.rellabel + input.relinput { - width: 70% + width: 70% } textarea.adjustable { - margin-top: 2px; - min-height: 80px; + margin-top: 2px; + min-height: 80px; } textarea.adjustable:last-of-type { } .right { - float: right; - margin-right: 10px; + float: right; + margin-right: 10px; } textarea.powertext { - margin-top: 2px; + margin-top: 2px; } /* Tab Switching */ @@ -808,11 +808,11 @@ textarea.powertext { .basesheet, .campaignsheet { display: none; - background-color: #f8f8f8; /* Maybe remove */ + background-color: #f8f8f8; /* Maybe remove */ } .charactersheet section:not(.hiveroom) { - background-color: #f8f8f8; + background-color: #f8f8f8; } .hivebase:before { @@ -835,19 +835,19 @@ z-index: -1; .tabstoggle[value="basesheet"] ~ div.tabholder > .basesheetbtn, .tabstoggle[value="charactersheet"] ~ div.tabholder > .charsheetbtn, .tabstoggle[value="campaignsheet"] ~ div.tabholder > .campaignsheetbtn { - background-color:#3287a8; - color: white; + background-color:#3287a8; + color: white; } /* Tab switching for base sub sheets (e.g. submarine) */ input.sheet-briny:not(:checked) ~ div.basesheet > .basetabholder { - display: none; + display: none; } .basetabholder { - position: relative; + position: relative; bottom: 15px; } @@ -869,8 +869,8 @@ input.sheet-briny:not(:checked) ~ div.basesheet > .basetabholder { .basetabstoggle[value="mainbase"] ~ div.tabholder > .mainbasebtn, .basetabstoggle[value="subbase"] ~ div.tabholder > .subbasebtn, .basetabstoggle[value="hivebase"] ~ div.tabholder > .hivebasebtn { - background-color:#3287a8; - color: white; + background-color:#3287a8; + color: white; } @@ -878,21 +878,21 @@ input.sheet-briny:not(:checked) ~ div.basesheet > .basetabholder { /* Filtered Powers */ .filtered_powers ~.repcontrol { - display: none; /* Hide the add/modify buttons*/ + 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*/ + 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.*/ + display:none !important; /*This has to be important because labels do NOT want to hide.*/ } .knownname { - width: 125px !important; + width: 125px !important; } @@ -900,114 +900,114 @@ input.equipped:not(:checked) ~ * { /* 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: + 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 basenotes basenotes basenotes"; } .basenotes { - grid-area: basenotes; - height: fit-content; + grid-area: basenotes; + height: fit-content; } .basehead { - grid-area: basehead; - background-color: #e8e8e9 !important; + grid-area: basehead; + background-color: #e8e8e9 !important; flex-direction: column; } .basehead > .header-left { - margin-left: 10px; + margin-left: 10px; } .basehead > .header-left > label { - margin-top: 2px; + margin-top: 2px; } h2.pull-left { - float: left; - display: float; - align-self: flex-start; - margin-left: 15px; + float: left; + display: float; + align-self: flex-start; + margin-left: 15px; } .room1 { - grid-area: room1; + grid-area: room1; } .room2 { - grid-area: room2; + grid-area: room2; } .room3 { - grid-area: room3; + grid-area: room3; } .room4 { - grid-area: room4; + grid-area: room4; } .room5 { - grid-area: room5; + grid-area: room5; } .room6 { - grid-area: room6; + grid-area: room6; } .room7 { - grid-area: room7; + grid-area: room7; } .room8 { - grid-area: room8; + grid-area: room8; } .room9 { - grid-area: room9; + grid-area: room9; } .room10 { - grid-area: room10; + grid-area: room10; } .room11 { - grid-area: room11; + grid-area: room11; } .room12 { - grid-area: room12; + grid-area: room12; } .room13 { - grid-area: room13; + grid-area: room13; } .room14 { - grid-area: room14; + grid-area: room14; } .room15 { - grid-area: room15; + grid-area: room15; } .room16 { - grid-area: room16; + grid-area: room16; } .baseside { - grid-area: baseside; + grid-area: baseside; } @@ -1016,125 +1016,125 @@ h2.pull-left { .basenotes > textarea { - min-height: 70%; + min-height: 70%; } section.room { - display: flex; - flex-direction: column; - justify-content: center; + 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; + font-size: 16em; + display: flex; + align-self: center; + justify-self: center; + color: #efefef; + position: relative; + left: 23%; + top: 5%; + user-select: none; } span.baselocker { - justify-self: center; - align-self: center; - display: flex; - position: relative; - bottom: 5px; + justify-self: center; + align-self: center; + display: flex; + position: relative; + bottom: 5px; } span.baselocker.sub { - margin-top: unset !important; + margin-top: unset !important; } input.baselocked:not(:checked) ~ span.baselocker { - margin-top: auto; + margin-top: auto; } /* The checkbox before "locked" */ input.baselocked:not(:checked) ~ span.baselocker > input { - margin-top: 3px; - position: relative; + margin-top: 3px; + position: relative; } /* Name of the building */ .buildinglist { - width: 150px; + width: 150px; } /* Checkbox itself */ input.baselocked:checked, input.baselocked[value="on"] { - width: 1.35em; - top: 4px; - position: relative; + width: 1.35em; + top: 4px; + position: relative; } /* "locked" text */ .baselabel { - position: relative; - top: 1px; + position: relative; + top: 1px; } /* The word "locked" */ input.baselocked:checked + label.baselabel { - font-variant: small-caps; + font-variant: small-caps; font-size: 2em; } /*When the room is UNLOCKED, "locked" label and big number*/ input.baselocked:not(:checked) + label{ - display: none; + display: none; } /*Room label (its name) and its description*/ input.baselocked:checked ~ input, input.baselocked:checked ~ textarea { - display: none; + display: none; } - /* Toggle between briny input and reuglar */ + /* Toggle between briny input and reuglar */ /* 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. */ input.sheet-briny:checked ~ div.basesheet > div.mainbase > section > input.corebuildings { - display: none; + display: none; } input.sheet-briny:not(:checked) ~ div.basesheet > div.mainbase > section > input.brinybuildings { - display: none; + display: none; } /* Hide the Briny Bastards lieutenants page if we're not on BB mode */ input.sheet-briny:not(:checked) ~ .campaignsheet .lieutenants { - display: none; + display: none; } .liename { - font-variant: small-caps; - text-align: left !important; + font-variant: small-caps; + text-align: left !important; } .liename:not(.first) { - margin-top: 5px; + margin-top: 5px; } .lieuholder { - width: 100%; - text-align: left; + width: 100%; + text-align: left; } .maxwidth { - max-width: 97%; + max-width: 97%; } .lieuholder:last-child { - margin-bottom: 10px; + margin-bottom: 10px; } .lieustats { - flex-direction: column; + flex-direction: column; } .centered { @@ -1154,139 +1154,139 @@ input.sheet-briny:not(:checked) ~ .campaignsheet .lieutenants { .spacebefore { - margin-top: 35px; + 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; + 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; + 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; + display: none; } span.decay { - display: flex; - z-index: 1; + display: flex; + z-index: 1; } label.decayed { - display: none; + display: none; } span.decay > p { - font-size: 2.2em; - position: relative; - top: 5px; + font-size: 2.2em; + position: relative; + top: 5px; } label.decay { - width: fit-content; + 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; -} + 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 ."; + 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; + grid-area: subhead; + margin-bottom: 100px; + position: relative; + left: 10%; + width: 80%; + top: 100px; } .subnotes { - grid-area: subnotes; - left: 5%; - position: relative; - width: 93%; + grid-area: subnotes; + left: 5%; + position: relative; + width: 93%; } .subroom { - max-width: 1fr; + max-width: 1fr; } .subroom1 { - grid-area: subroom1; + grid-area: subroom1; } .subroom2 { - grid-area: subroom2; + grid-area: subroom2; } .subroom3 { - grid-area: subroom3; + grid-area: subroom3; } .subroom4 { - grid-area: subroom4; + grid-area: subroom4; } .subroom5 { - grid-area: subroom5; + grid-area: subroom5; } .subroom6 { - grid-area: subroom6; + grid-area: subroom6; } span.subinfo { - display: flex; + display: flex; } label.narrow { - width: fit-content; + width: fit-content; } h2.narrow { - width:fit-content; + width:fit-content; } span.spacer { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } input.subdamaged[value="on"] ~ label.damagelabel { @@ -1299,38 +1299,38 @@ input.subdamaged[value="on"] ~ label.damagelabel { bottom: 40%; } label.damagelabel { - display: none; - + display: none; + } .pullright{ - margin-left: auto !important; + margin-left: auto !important; } input.subdamaged { - margin-right: 10px; + margin-right: 10px; } .pulldown { - margin-top: 40px; + margin-top: 40px; } .rightsubmarine { - position: relative; - top: -30px; + position: relative; + top: -30px; } .subname { - position: relative; - bottom: 30px; + position: relative; + bottom: 30px; } .submarine_heading_holder { - display: flex; + display: flex; } textarea.subsource { - height: 40%; + height: 40%; } @@ -1372,9 +1372,9 @@ textarea.subsource { -ms-transform: skewY(-30deg) rotate(60deg); transform: skewY(-30deg) rotate(60deg); overflow: hidden; - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } @@ -1394,121 +1394,121 @@ textarea.subsource { .hiveroom { - border: none; + 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 190px 1fr 200px; - grid-template-areas: - "camphead camphead" - "drops drops" - "friendbar progress" - "friendbar campnotes"; + 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 190px 1fr 200px; + grid-template-areas: + "camphead camphead" + "drops drops" + "friendbar progress" + "friendbar campnotes"; } .drops { - grid-area: drops; + grid-area: drops; } .camphead { - grid-area: camphead + grid-area: camphead } .friendbar { - grid-area: friendbar; + grid-area: friendbar; } .camprogress { - grid-area: progress; + grid-area: progress; } .campnotes { - grid-area: campnotes; - height: fit-content; - min-height: 185px; + grid-area: campnotes; + height: fit-content; + min-height: 185px; } .flexspan { - display: flex; + display: flex; } div > input.allyname { - width: 65%; + width: 65%; margin-left: 0px !important; } .friend > h3, .foe > h3 { - margin-bottom: 15px; + margin-bottom: 15px; } hr.separator { - margin-top: 60px; - margin-bottom: 60px; - border-color: #7d7d7d; - border-width: 2px; - border-style: dashed; + margin-top: 60px; + margin-bottom: 60px; + border-color: #7d7d7d; + border-width: 2px; + border-style: dashed; } prog > h3, prog > h2 { - font-variant: small-caps; + font-variant: small-caps; } input.sheet-briny:not(:checked) + .brinyhide { - display: none; + display: none; } .eighty { - width: 80%; + width: 80%; } /* Drops */ .alldrops { - display: flex; - flex-direction: row; - justify-content: space-around; + display: flex; + flex-direction: row; + justify-content: space-around; } .drop { - align-items: center; - display: flex; - flex-direction: column; + align-items: center; + display: flex; + flex-direction: column; } .sectiontop { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .adj { - display: flex; + display: flex; } div.centerbtn { - display: flex; - display: flex; - justify-content: center; - margin-top: 10px; + display: flex; + display: flex; + justify-content: center; + margin-top: 10px; } .dropbtn { - width: 15% + width: 15% } .sheet-briny:not(:checked) ~ .campaignsheet .brinydrop { - display: none; + display: none; } @@ -1517,7 +1517,7 @@ div.centerbtn { /* Attribute template */ .sheet-rolltemplate-attributeroll { font-family: "IBM Plex Mono"; - margin: 0 -3px -4px -42px; + margin: 0 -3px -4px -42px; position: relative; font-size: 15px; line-height: 1.2; @@ -1530,51 +1530,51 @@ div.centerbtn { 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"); + 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 1fr 1fr; - grid-column-gap: 3px; + grid-template-areas: + "name roll" + "title roll" + "results results" + "details details"; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto 1fr 1fr; + grid-column-gap: 3px; } .sheet-rolltemplate-attributeroll .sheet-cybertitle { - color: green; + color: green; } .sheet-rolltemplate-attributeroll .sheet-smashtitle { - color: red; + color: red; } .sheet-rolltemplate-attributeroll .sheet-slytitle { - color: blue; + color: blue; } .sheet-rolltemplate-attributeroll .sheet-result { grid-area: results; - display: flex; - justify-content: center; - text-align: center; + display: flex; + justify-content: center; + text-align: center; } .sheet-rolltemplate-attributeroll .sheet-reprecussion { color: red; font-size: 1.2em; - margin-top: 5px; + margin-top: 5px; } .sheet-rolltemplate-attributeroll .sheet-success { - color: green; - font-size: 1.3em; + color: green; + font-size: 1.3em; } .sheet-rolltemplate-attributeroll .sheet-reprecussion:first-letter { - text-transform: uppercase; + text-transform: uppercase; } .sheet-rolltemplate-attributeroll .sheet-container { @@ -1611,12 +1611,12 @@ div.centerbtn { } .sheet-rolltemplate-attributeroll .sheet-title { - grid-area: title; + grid-area: title; letter-spacing: 0.5px; } .sheet-rolltemplate-attributeroll .sheet-name { - grid-area: name; + grid-area: name; } .sheet-rolltemplate-attributeroll .sheet-subtitle { @@ -1654,8 +1654,8 @@ div.centerbtn { .sheet-rolltemplate-attributeroll .sheet-main-roll { font-size: 1.1em; - text-align: center; - margin-right: 5px; + text-align: center; + margin-right: 5px; } .sheet-rolltemplate-attributeroll .inlinerollresult { border: none !important; @@ -1671,16 +1671,16 @@ div.centerbtn { .sheet-rolltemplate-attributeroll .sheet-details { grid-column: span 2; font-size: .9em; - grid-area: details; - margin-top: auto; - letter-spacing: -0.4px; - text-align: center; + grid-area: details; + margin-top: auto; + letter-spacing: -0.4px; + text-align: center; } /* Drops Template*/ -.sheet-rolltemplate-drops { - font-family: "IBM Plex Mono"; - margin: 0 -3px -4px -42px; +.sheet-rolltemplate-drops { + font-family: "IBM Plex Mono"; + margin: 0 -3px -4px -42px; position: relative; font-size: 15px; line-height: 1.2; @@ -1692,29 +1692,29 @@ div.centerbtn { cursor: default; box-sizing: border-box; background-repeat: repeat-y; - align-items: center; + align-items: center; background-size: 100% auto; - background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg"); + background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg"); display: flex; - flex-direction: column; + flex-direction: column; } .sheet-rolltemplate-drops .sheet-title { - text-align: center; - font-size: 1.4em; - font-weight: bold; + 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; + border: unset; + background-color: unset; + font-size: unset; } -.sheet-rolltemplate-grief { - font-family: "IBM Plex Mono"; - margin: 0 -3px -4px -42px; +.sheet-rolltemplate-grief { + font-family: "IBM Plex Mono"; + margin: 0 -3px -4px -42px; position: relative; font-size: 15px; line-height: 1.2; @@ -1726,41 +1726,41 @@ div.centerbtn { cursor: default; box-sizing: border-box; background-repeat: repeat-y; - align-items: center; + align-items: center; background-size: 100% auto; - background-image: url("https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg.jpg"); + 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; + 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; + 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; + 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; + display: flex; + justify-content: center; + text-align: center; + font-size: medium; + margin-top:10px; + align-items: center; } .sheet-rolltemplate-grief .sheet-main-roll{ @@ -1773,33 +1773,33 @@ div.centerbtn { max-width: 80px; text-align: center; font-size: 0.9em; - margin-right: 15px; - margin-top: 15px; + 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; + 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; + border: 2px solid #b31515; } .sheet-rolltemplate-grief .sheet-main-roll > .fullcrit { - border: 2px solid #3fb315; + border: 2px solid #3fb315; } /* Power Template */ -.sheet-rolltemplate-powers { - font-family: "IBM Plex Mono"; - margin: 0 -3px -4px -42px; +.sheet-rolltemplate-powers { + font-family: "IBM Plex Mono"; + margin: 0 -3px -4px -42px; position: relative; font-size: 15px; line-height: 1.2; @@ -1812,149 +1812,149 @@ div.centerbtn { 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"); + 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 . " - "pdesc pdesc"; - grid-template-columns: 1fr auto; - grid-template-rows: auto auto 1fr 1fr; - grid-column-gap: 3px; + grid-template-areas: + "powertitle powertitle" + "pOperName powercost" + "powerName . " + "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; + display: grid; } .sheet-rolltemplate-powers .sheet-title { - grid-area: powertitle; - text-align: center; - font-size: 1.4em; - font-weight: bold; - margin-bottom: 5px; + 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; + grid-area: pOperName; + font-size: 1.4em; + font-weight: bold; } .sheet-rolltemplate-powers .sheet-powername { - grid-area: powerName; - font-style: italic; + grid-area: powerName; + font-style: italic; } .sheet-rolltemplate-powers .sheet-description { - grid-area: pdesc; + grid-area: pdesc; } .sheet-rolltemplate-powers .sheet-cost { - grid-area: powercost; + grid-area: powercost; } /* 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"; - grid-template-columns: 2fr 1fr; - grid-template-rows: auto auto auto auto auto auto; - grid-column-gap: 3px; +.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"; + grid-template-columns: 2fr 1fr; + grid-template-rows: auto auto auto auto auto auto; + grid-column-gap: 3px; } .sheet-rolltemplate-weapon .sheet-header { - display: grid; + display: grid; } .sheet-rolltemplate-weapon .sheet-ammo { - grid-area: ammo; - text-align: center; + grid-area: ammo; + text-align: center; } .sheet-rolltemplate-weapon .sheet-range { - grid-area: range; - font-size: .86em; - margin-bottom: 15px; - margin-top:11px; + grid-area: range; + 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; + 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; + grid-area: operName; + font-size: 1.1em; + font-weight: bold; } .sheet-rolltemplate-weapon .sheet-red { - color: red; + color: red; } .sheet-rolltemplate-weapon .sheet-weaponname { - grid-area: weaponName; - font-style: italic; - margin-top: 5px; + grid-area: weaponName; + font-style: italic; + margin-top: 5px; } .sheet-rolltemplate-weapon .sheet-description { - grid-area: pdesc; - display: flex; + grid-area: pdesc; + display: flex; justify-content: end; } .sheet-rolltemplate-weapon .sheet-harm { - grid-area: harm; - margin-bottom: 15px; + 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); + --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, @@ -1964,24 +1964,24 @@ body.sheet-darkmode select, body.sheet-darkmode textarea, body.sheet-darkmode label, body.sheet-darkmode .charsheet { - color: var(--colorDark); + 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 + 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; + border-color: var(--gentleOrange) !important; } body.sheet-darkmode h1, @@ -1989,7 +1989,7 @@ body.sheet-darkmode h2, body.sheet-darkmode h3, body.sheet-darkmode h4, body.sheet-darkmode h5 { - color: var(--colorLight) + color: var(--colorLight) } body.sheet-darkmode .header, @@ -1999,74 +1999,74 @@ 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); + background-color: var(--backgroundDark); } body.sheet-darkmode .basehead, body.sheet-darkmode .header { - background-color: var(--backgroundDark) !important; + background-color: var(--backgroundDark) !important; } body.sheet-darkmode .autoExpand + hr.underline + label { - margin-top: 0px; + margin-top: 0px; } body.sheet-darkmode label.basecost { - width: fit-content; - margin-right: 50%; + width: fit-content; + margin-right: 50%; } body.sheet-darkmode input { - accent-color: var(--gentleOrange); + 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; + background-color: var(--gentleOrange); + color: black; } body.sheet-darkmode .submarine { - border-color: transparent #FFF transparent #FFF; + border-color: transparent #FFF transparent #FFF; } body.sheet-darkmode label:not(.progressbar__label, .threatlabel ) { - width: fit-content; + width: fit-content; background: transparent; } body.sheet-darkmode .sideholder label { - margin-right: auto; + margin-right: auto; } body.sheet-darkmode .sideholder { - justify-content: space-between; + justify-content: space-between; } body.sheet-darkmode input.baselocked:checked + label.baselabel { - color: var(--gentleOrange); + color: var(--gentleOrange); } body.sheet-darkmode .hiveroom input.baselocked:checked + label.baselabel { - color: black; + color: black; } body.sheet-darkmode .hiveroom textarea, body.sheet-darkmode .hiveroom input { - accent-color: var(--colorLight); - background-color: var(--accentBlue); + accent-color: var(--colorLight); + background-color: var(--accentBlue); } body.sheet-darkmode .hiveroom label { - color: var(--accentBlue); + color: var(--accentBlue); } body.sheet-darkmode .hexagon { - background: var(--gentleOrange) !important; + background: var(--gentleOrange) !important; } @@ -2074,119 +2074,119 @@ body.sheet-darkmode .hexagon { /* Labels after the one we've clicked */ body.sheet-darkmode .progressbar__radio:checked + label ~ label { - color: var(--gentleOrange); - background: transparent; + 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); + background: var(--gentleOrange); + border: 2px solid var(--gentleOrange); } body.sheet-darkmode .progressbar__radio:checked + label ~ label::after { - background: #aaa; + background: #aaa; } /* The checked square */ body.sheet-darkmode .progressbar__radio:checked + label::before { - background: var(--gentleOrange); + background: var(--gentleOrange); } /* The checked label */ body.sheet-darkmode .progressbar__radio:checked + label { - color: var(--gentleOrange); - background: transparent; + color: var(--gentleOrange); + background: transparent; } /*Labels before the one we clicked*/ body.sheet-darkmode .progressbar__label { - color: #aaa; - background: transparent; + color: #aaa; + background: transparent; } body.sheet-darkmode .progressbar__label::before { - background: white; - border: 2px solid var(--gentleOrange); + background: white; + border: 2px solid var(--gentleOrange); } /* Dark Threat */ body.sheet-darkmode .threatbar:checked + label ~ label { - color: #aaa; + color: #aaa; } body.sheet-darkmode .threatbar:checked + label ~ label::before { - background: white; - border-color: #aaa; + background: white; + border-color: #aaa; } body.sheet-darkmode .threatbar:checked + label ~ label::after { - background: #aaa; + background: #aaa; } body.sheet-darkmode .threatlabel { - background: transparent; - display: table-cell; - font-weight: bold; - position: relative; - text-align: center; - text-transform: uppercase; + 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; + 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); + background: var(--threatLevel1ColorDark); + border-color: var(--threatLevel1ColorDark); } body.sheet-darkmode .threatlabel.threat1 { - color: var(--threatLevel1Color)D50C59; + color: var(--threatLevel1Color)D50C59; } body.sheet-darkmode .threat2::before { - background: var(--threatLevel2ColorDark); - border-color: var(--threatLevel2ColorDark); + background: var(--threatLevel2ColorDark); + border-color: var(--threatLevel2ColorDark); } body.sheet-darkmode .threatlabel.threat2 { - color: var(--threatLevel2Color); + color: var(--threatLevel2Color); } body.sheet-darkmode .threat3::before { - background: var(--threatLevel3ColorDark); - border-color: var(--threatLevel3ColorDark); + background: var(--threatLevel3ColorDark); + border-color: var(--threatLevel3ColorDark); } body.sheet-darkmode .threatlabel.threat3 { - color: var(--threatLevel3ColorDark); + color: var(--threatLevel3ColorDark); } body.sheet-darkmode .threat4::before { - background: var(--threatLevel4ColorDark); - border-color: var(--threatLevel4ColorDark); + background: var(--threatLevel4ColorDark); + border-color: var(--threatLevel4ColorDark); } body.sheet-darkmode .threatlabel.threat4 { - color: var(--threatLevel4ColorDark); + 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; + background: transparent; } @@ -2195,12 +2195,12 @@ body.sheet-darkmode .threatlabel.threat4 { /* 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""https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg-dark.jpg"); + --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""https://raw.githubusercontent.com/roll20/roll20-character-sheets/master/Cyberrats/paper-bg-dark.jpg"); } @@ -2211,15 +2211,15 @@ body.sheet-darkmode .threatlabel.threat4 { } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-cybertitle { - color: var(--greenDark); + color: var(--greenDark); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-smashtitle { - color: var(--redDark); + color: var(--redDark); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-slytitle { - color: var(--blueDark); + color: var(--blueDark); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-reprecussion { @@ -2227,50 +2227,50 @@ body.sheet-darkmode .threatlabel.threat4 { } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .sheet-success { - color: var(--greenDark); + 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; + 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; + padding-left: 4px; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-attributeroll .inlinerollresult { border: none !important; background-color: var(--lightOffset); - color: var(--darkText) + color: var(--darkText) } /* End Dark Attribute */ /* Begin Dark Grief */ .sheet-rolltemplate-darkmode.sheet-rolltemplate-grief { - border: 2px solid var(--lightOffset); + border: 2px solid var(--lightOffset); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .inlinerollresult { - border: 2px solid var(--lightOffset); - background-color: var(--lightOffset); + border: 2px solid var(--lightOffset); + background-color: var(--lightOffset); - color: var(--darkText) + color: var(--darkText) } .sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .fullfail { - border: 2px solid var(--redDark); + border: 2px solid var(--redDark); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-grief .sheet-main-roll > .fullcrit { - border: 3px solid var(--greenDark); + border: 3px solid var(--greenDark); } .sheet-rolltemplate-darkmode.sheet-rolltemplate-weapon .sheet-red { - color: var(--redDark); + color: var(--redDark); } diff --git a/Cyberrats/Cyberrats.html b/Cyberrats/Cyberrats.html index fa7e1d06cd..dc286940f7 100644 --- a/Cyberrats/Cyberrats.html +++ b/Cyberrats/Cyberrats.html @@ -1,363 +1,357 @@ -
- - -
- - -
- - - - -
-
- +
+ + +
+ + +
+ + + + +
+
+
-
-
- -
-
- - -
-
- -
-
-
-
- - -
-
- -
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ + +
+
+ +
-
- -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - -
- - -
-
- - +
+ +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ + -
-
+
+ -
- -

All Known Powers

-

Equipped /5

-
-
- - - - - - - - - -
-
- -
-

Portrait of Applicant

- -
- - +
+ +

All Known Powers

+
+
+ + + + + + + + + +
+
+ +
+

Portrait of Applicant

+ +
+
+ + + + + +
+
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+
+ + +
+
+ + -
- - - - - -
+
+ + + +
+
+ +
+ + + +
+
+ +
+ + + +
+
+ +
+ + / + + +
+
+ +
+ + / + + +
+
+ +
+ + / + + +
+
+ + +
+ + / + +
+ + +
+ + / + +
+ + +
+

Relationships

+ +
+ +
+ + + + + + + + + + + + + + +
+
+ +
+ + + + + + + + +
+
+
-
- -
- - -
-
- -
- - -
-
- -
- - -
-
- -
- - -
-
+
+

Gear

+

Armor

+
+ + + + +
+ +

Weapons

+
+
+ + + + + + + + + + + + +

/

+ + +
+ + + + + + + + + + -
- - -
-
- - - -
- - - -
-
- -
- - - -
-
- -
- - - -
-
- -
- - / - - -
-
- -
- - / - - -
-
- -
- - / - - -
-
- - -
- - / - -
- - -
- - / - -
- - -
-

Relationships

- -
- -
- - - - - - - - - - - - - - -
-
- -
- - - - - - - - -
-
-
- -
-

Gear

-

Armor

-
- - - - -
- -

Weapons

-
-
- - - - - - - - - - - - -

/

- - -
- - - - - - - - - - - - -
-
- -
- -
-

Items

-
- - - - - - - - - - - - -
- - -
-

Drones

- -
Equipped Protocols
-
- - - - - - - - - - - - - -
- -
-
Known Protocols
-
- - - - -
-
-
- -
-

Loadout

-
- - - - - - - - -
-
- -
-

Notes

- -
+ + + + +
+ +
+

Items

+
+ + + + + + + + + + + + +
+ + +
+

Drones

+ +
Equipped Protocols
+
+ + + + + + + + + + + + + +
+ +
+
Known Protocols
+
+ + + + +
+
+
+ +
+

Loadout

+
+ + + + + + + + +
+
+ +
+

Notes

+ +
@@ -369,612 +363,612 @@
- -
- - - -
- -
-
-

HQ

-
-
-
- - -
-
- -
+ +
+ + + +
+ +
+
+

HQ

+
+
+
+ + +
+
+ +
-
-
- - -
-
- - -
- - -
-
- - -
- - -
-
- -
-
+
+
+ + +
+
+ + +
+ + +
+
+ + +
+ + +
+
+ +
+
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
-

Notes

- -
+
+

Notes

+ +
- -
+ +
-
+
-
-
-

Submarine

- -
-
-
-
- - -
-
- -
-
- - - -
-
- -
- -
- - - - - - - - - -
+
+
+

Submarine

+ +
+
+
+
+ + +
+
+ +
+
+ + + +
+
+ +
+ +
+ + + + + + + + + +
-
- - - - - - - - - -
- +
+ + + + + + + + + +
+ -
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
+
+ + + + + + + + + +
-
- - - - - - - - - -
- -
- - - - - - - - - - - - - - - - -
- - - - -
-

Notes

- -
-
-
- - -
- -
    +
    + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + +
    + + + + +
    +

    Notes

    + +
    +
+
+ + +
+ +
  • -
    - - - - -

    /

    -

    4

    - - -
    - - - - - - - - -
    - -
    +
    + + + + +

    /

    +

    4

    + + +
    + + + + + + + + +
    + +
  • -
    - - - - -

    /

    -

    4

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    4

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    3

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    3

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    3

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    3

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    3

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    3

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    2

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    2

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    2

    - - -
    - - - - - - - - -
    -
    +
    + + + + +

    /

    +

    2

    + + +
    + + + + + + + + +
    +
  • -
    - - - - -

    /

    -

    2

    - - -
    - - - - - - - - -
    - -
    +
    + + + + +

    /

    +

    2

    + + +
    + + + + + + + + +
    + +
  • - - - + + + @@ -982,317 +976,317 @@
    -
    -
    -

    Campaign Progress

    -
    -
    -

    Friends and Foes

    -
    -

    Assistants

    -
    - - - - -
    -
    - -
    -
    -

    Adversaries

    -
    - - - - -
    -
    - -
    -
    -

    Corporate Requests

    -

    Corporate Mission

    - - - - -

    Corporate Cutbacks

    -
    - - - -
    -
    -
    - -
    -
    -

    Generate Drops

    - - - - -
    -
    +
    +
    +

    Campaign Progress

    +
    +
    +

    Friends and Foes

    +
    +

    Assistants

    +
    + + + + +
    +
    + +
    +
    +

    Adversaries

    +
    + + + + +
    +
    + +
    +
    +

    Corporate Requests

    +

    Corporate Mission

    + + + + +

    Corporate Cutbacks

    +
    + + + +
    +
    +
    + +
    +
    +

    Generate Drops

    + + + + +
    +
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    -
    - -
    -
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    +
    + +
    +
    -
    -

    Military

    -
    -
    - -
    -
    - - - - - - - - -
    -

    Threat Level

    - -
    -
    -
    -
    - - - - - - - - - - -
    -

    Final Mission

    - -
    -
    -
    - - - -

    Valdivian

    -
    -
    - -
    -
    - - - - - - - - -
    -

    Threat Level

    - -
    -
    -
    -
    - - - - - - - - - - -
    -
    -

    Final Mission

    - -
    -
    - -
    -
    -

    Victory Meter

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - -
    - - -

    Interloper

    -
    -
    - -
    -
    - - - - - - - - -
    -

    Threat Level

    - -
    -
    -
    -
    - - - - - - - - - - -
    -
    -

    Final Mission

    - -
    -
    - -
    -
    -

    Victory Meter

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    - -
    -
    - -

    Briny Bastards

    -
    -
    -

    The Progenitor

    -
    - - -
    -
    - - -
    -
    - -
    -

    The Diver

    -
    - - -
    -
    - - -
    -
    - -
    -

    The Three

    -
    - - -
    -
    - - -
    -
    -
    -
    -
    +
    +

    Military

    +
    +
    + +
    +
    + + + + + + + + +
    +

    Threat Level

    + +
    +
    +
    +
    + + + + + + + + + + +
    +

    Final Mission

    + +
    +
    +
    + + + +

    Valdivian

    +
    +
    + +
    +
    + + + + + + + + +
    +

    Threat Level

    + +
    +
    +
    +
    + + + + + + + + + + +
    +
    +

    Final Mission

    + +
    +
    + +
    +
    +

    Victory Meter

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + +
    + + +

    Interloper

    +
    +
    + +
    +
    + + + + + + + + +
    +

    Threat Level

    + +
    +
    +
    +
    + + + + + + + + + + +
    +
    +

    Final Mission

    + +
    +
    + +
    +
    +

    Victory Meter

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + +
    +
    + +

    Briny Bastards

    +
    +
    +

    The Progenitor

    +
    + + +
    +
    + + +
    +
    + +
    +

    The Diver

    +
    + + +
    +
    + + +
    +
    + +
    +

    The Three

    +
    + + +
    +
    + + +
    +
    +
    +
    +
    -
    -

    Notes

    - -
    -
    +
    +

    Notes

    + +
    +
    @@ -1302,262 +1296,262 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - + + + + + + - - - + + + - - - + + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - {{#title}} -
    - {{title}} -
    - {{/title}} - - {{#name}} -
    - {{name}} -
    - {{/name}} - - {{#powerName}} -
    - {{powerName}} -
    - {{/powerName}} - - {{#description}} -
    - {{description}} -
    - {{/description}} - - {{#cost}} -
    - Biotech Cost: {{cost}} -
    - {{/cost}} + {{#title}} +
    + {{title}} +
    + {{/title}} + + {{#name}} +
    + {{name}} +
    + {{/name}} + + {{#powerName}} +
    + {{powerName}} +
    + {{/powerName}} + + {{#description}} +
    + {{description}} +
    + {{/description}} + + {{#cost}} +
    + Biotech Cost: {{cost}} +
    + {{/cost}}
    - {{#title}} -
    - {{title}} -
    - {{/title}} - - {{#name}} -
    - {{name}} -
    - {{/name}} - - {{#weaponname}} -
    - {{weaponname}} -
    - {{/weaponname}} - - {{#description}} -
    - {{description}} -
    - {{/description}} - - {{#harm}} -
    - {{harm}} Harm -
    - {{/harm}} - {{#ammo}} -
    - {{#lowAmmo}} - After making this attack, {{weaponname}} has {{ammo}} ammo remaining. - {{/lowAmmo}} - - {{^lowAmmo}} - After making this attack, {{weaponname}} has {{ammo}} ammo remaining. - {{/lowAmmo}} + {{#title}} +
    + {{title}} +
    + {{/title}} + + {{#name}} +
    + {{name}} +
    + {{/name}} + + {{#weaponname}} +
    + {{weaponname}} +
    + {{/weaponname}} + + {{#description}} +
    + {{description}} +
    + {{/description}} + + {{#harm}} +
    + {{harm}} Harm +
    + {{/harm}} + {{#ammo}} +
    + {{#lowAmmo}} + After making this attack, {{weaponname}} has {{ammo}} ammo remaining. + {{/lowAmmo}} + + {{^lowAmmo}} + After making this attack, {{weaponname}} has {{ammo}} ammo remaining. + {{/lowAmmo}} -
    - {{/ammo}} - {{#range}} -
    - {{range}} -
    - {{/range}} +
    + {{/ammo}} + {{#range}} +
    + {{range}} +
    + {{/range}}
    -
    - Grief -
    -
    {{name}}
    - {{#roll}}
    -
    {{roll}}
    -
    {{/roll}} -
    - {{#rollLess() roll 2}} - You will be grieving the loss of your relationship for the next {{roll}} mission. - {{/rollLess() roll 2}} - {{#rollGreater() roll 1}} - You will be grieving the loss of your relationship for the next {{roll}} missions. - {{/rollGreater() roll 1}} -
    +
    + Grief +
    +
    {{name}}
    + {{#roll}}
    +
    {{roll}}
    +
    {{/roll}} +
    + {{#rollLess() roll 2}} + You will be grieving the loss of your relationship for the next {{roll}} mission. + {{/rollLess() roll 2}} + {{#rollGreater() roll 1}} + You will be grieving the loss of your relationship for the next {{roll}} missions. + {{/rollGreater() roll 1}} +
    -
    - Drops -
    -
    - {{drops}} -
    +
    + Drops +
    +
    + {{drops}} +
    -
    - {{#smash}} - {{title}} - {{/smash}} - {{#sly}} - {{title}} - {{/sly}} - {{#cyber}} - {{title}} - {{/cyber}} -
    -
    {{name}}
    - {{#roll}}
    -
    {{roll}}
    -
    {{results}}
    -
    {{/roll}} -
    - {{#rollBetween() roll 1 2}} - {{success_at_cost}} - {{/rollBetween() roll 1 2}} - {{#rollBetween() roll 3 4}} - You succeed, but {{success_at_cost}} - {{/rollBetween() roll 3 4}} - {{#rollBetween() roll 5 6}} - Sucess! - {{/rollBetween() roll 5 6}} -
    - {{#details}}
    {{details}}
    {{/details}} +
    + {{#smash}} + {{title}} + {{/smash}} + {{#sly}} + {{title}} + {{/sly}} + {{#cyber}} + {{title}} + {{/cyber}} +
    +
    {{name}}
    + {{#roll}}
    +
    {{roll}}
    +
    {{results}}
    +
    {{/roll}} +
    + {{#rollBetween() roll 1 2}} + {{success_at_cost}} + {{/rollBetween() roll 1 2}} + {{#rollBetween() roll 3 4}} + You succeed, but {{success_at_cost}} + {{/rollBetween() roll 3 4}} + {{#rollBetween() roll 5 6}} + Sucess! + {{/rollBetween() roll 5 6}} +
    + {{#details}}
    {{details}}
    {{/details}}
    @@ -1566,444 +1560,444 @@