Files

843 lines
19 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&display=swap');
.charactersheet.charsheet {
font-family: "Spline Sans Mono", monospace;
font-optical-sizing: auto;
}
h2 {
font-weight: 900;
font-family: "Spline Sans Mono", monospace;
font-size: 36px;
text-transform: uppercase;
margin-bottom: 8px;
}
h3 {
text-transform: uppercase;
text-decoration: underline;
margin-bottom: 8px;
}
.sheet-pilot h2 {
color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #F38E4B;
}
.sheet-mech h2 {
color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #73978E;
}
.sheet-cargo h2 {
color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #74C9E4;
}
/* All sheet styles */
.charactersheet input, .charactersheet textarea, .charactersheet select {
width: 100%;
max-width: 100%;
}
.charsheet.charactersheet img:not([src]) {
display: none;
}
.sheet-column-left,
.sheet-column-right {
border-top: 5px solid black;
border-bottom: 5px solid black;
}
.sheet-column-right {
border-right: 5px solid black;
}
.sheet-column-left {
border-left: 5px solid black;
}
.charsheet.charactersheet input {
font-weight: bold;
}
/* Hide all tab content by default */
.charsheet .sheet-pilot,
.charsheet .sheet-mech,
.charsheet .sheet-cargo {
display: none;
}
/* Roller button Wrapper */
.roller-buttons-wrapper {
margin-bottom: 12px;
}
.roller-buttons-wrapper button {
margin-bottom: 4px;
}
/* Tabs Styling */
.charsheet .sheet-tabstoggle[value="cargo"] ~ .sheet-cargo,
.charsheet .sheet-tabstoggle[value="pilot"] ~ .sheet-pilot,
.charsheet .sheet-tabstoggle[value="mech"] ~ .sheet-mech {
display: flex;
}
.sheet-tabs-wrapper {
display: flex;
}
.sheet-tabs-wrapper button {
font-size: 20px;
-webkit-text-stroke-width: 2px;
font-weight: normal;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0px;
font-family: "Spline Sans Mono", monospace;
padding: 8px 12px;
border: 0px solid;
margin-right: 0px;
margin-left: 0px;
}
.sheet-tabs-wrapper button:nth-child(1) {
background-color: rgb(245, 245, 245);
color: #444;
}
input[value="pilot"] ~ div.sheet-tabs-wrapper > button:nth-child(1) {
background-color: #F38E4B;
color: #000;
}
.sheet-tabs-wrapper button:nth-child(2) {
background-color: rgb(245, 245, 245);
color: #444;
}
input[value="mech"] ~ div.sheet-tabs-wrapper > button:nth-child(2) {
background-color: #73978E;
color: #000;
}
.sheet-tabs-wrapper button:nth-child(3) {
background-color: rgb(245, 245, 245);
color: #444;
}
input[value="cargo"] ~ div.sheet-tabs-wrapper > button:nth-child(3) {
background-color: #74C9E4;
color: #000;
}
.sheet-column-left,
.sheet-column-right {
flex: 1;
background-color: white;
padding: 8px;
}
/* Sheet Top Stats */
input[value="pilot"] ~ div.sheet-stats {
background-color: #F38E4B;
}
input[value="mech"] ~ div.sheet-stats {
background-color: #73978E;
}
input[value="cargo"] ~ div.sheet-stats {
background-color: #74C9E4;
}
.sheet-stats {
display: flex;
justify-content: space-between;
padding: 12px 8px 4px 8px;
z-index: 10;
position: relative;
}
.sheet-hp, .sheet-ap, .sheet-tp, .sheet-heat, .sheet-sp, .sheet-ep {
flex-direction: row;
justify-content: space-between;
align-items: baseline;
max-width: 32.5%;
display: inline-flex;
padding: 8px 14px;
background-color: black;
color: white
}
.sheet-ap {
background-color: #31506A;
padding-left: 22px;
padding-right: 22px;
border-radius: 10px;
margin-bottom: -6px;
}
.sheet-heat label, .sheet-sp label, .sheet-ep label,
.sheet-hp label, .sheet-ap label, .sheet-tp label {
color: white;
}
.sheet-heat label, .sheet-sp label, .sheet-ep label,
.sheet-hp label, .sheet-ap label, .sheet-tp label,
.sheet-heat input, .sheet-sp input, .sheet-ep input,
.sheet-hp input, .sheet-ap input, .sheet-tp input {
margin-bottom: 0px;
position: relative;
text-decoration: underline;
text-transform: uppercase;
}
.sheet-heat {
background-color: #C4454A;
}
.sheet-pilot textarea,
.sheet-cargo textarea,
.sheet-mech textarea {
max-width: 100%;
width: 100%;
box-sizing: border-box;
margin-top: 8px;
}
/* Pilot Sheet */
.sheet-pilot .sheet-column-left > span {
display: block;
}
input[value="pilot"] ~ div.sheet-pilot {
background-color: #F38E4B;
padding: 8px;
}
.sheet-pilot {
justify-content: space-between;
}
.inventory-item {
display: inline-block;
}
.inventory-item > div {
display: flex;
align-items: baseline;
}
.sheet-abilities {
margin-bottom: 8px;
}
.sheet-pilot > div > img,
.sheet-mech > div > img {
max-width: 65%;
height: auto;
margin: 8px 0;
}
div[data-groupname="repeating_abilities"] .repitem {
padding: 8px;
}
div[data-groupname="repeating_abilities"] .repitem:nth-child(even) {
background-color: #fef7f3;
}
.pilot-ability-stat-grid {
grid-template-columns: 1fr 2fr 2fr;
text-align: center;
display: grid;
gap: 10px;
margin: 4px 0;
}
div[data-groupname="repeating_inventory"] {
margin-bottom: 8px;
}
div[data-groupname="repeating_inventory"] .repitem {
border-bottom: 2px solid #e4e4e4;
}
/* Mech Sheet */
input[value="mech"] ~ div.sheet-mech {
background-color: #73978E;
padding: 8px;
}
input[value="mech"] ~ div.sheet-pilot .sheet-column-left,
input[value="mech"] ~ div.sheet-pilot .sheet-column-right {
background-color: white;
padding: 8px;
}
.sheet-system-stats,
.sheet-chassis-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 8px 0;
}
.sheet-system-stats div,
.sheet-chassis-stats div {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.sheet-system-stats label,
.sheet-chassis-stats label {
margin-bottom: 5px;
}
.sheet-system-stats input[type="number"],
.sheet-chassis-stats input[type="number"] {
width: 100%;
box-sizing: border-box;
}
.systems-item,
.sheet-chassis-info > div {
display: flex;
align-items: baseline;
}
.systems-item.tags-and-ep {
align-items: end;
justify-content: space-between;
}
.systems-item #system_or_module {
flex: .4;
}
.sheet-chassis-info > .mech-chassis-ability-block,
.sheet-chassis-info > .mech-appearance-block {
display: block;
}
div[data-groupname="repeating_systems"] .repitem {
padding: 8px;
}
div[data-groupname="repeating_systems"] .repitem:nth-child(even) {
background-color: #ecf3f2;
}
.charsheet.charactersheet .collapsed .systems-item, .charsheet.charactersheet .collapsed .sheet-system-stats {
display: none;
}
.charsheet.charactersheet .collapse-expand:before {
content: "▼";
}
.charsheet.charactersheet .collapsed .collapse-expand:before {
content: "▶";
}
/* cargo Sheet */
input[value="cargo"] ~ div.sheet-cargo {
background-color: #74C9E4;
padding: 8px;
}
input[value="cargo"] ~ div.sheet-pilot .sheet-column-left,
input[value="cargo"] ~ div.sheet-pilot .sheet-column-right {
background-color: white;
padding: 8px;
}
.cargo-wrapper,
.sheet-cargo {
width: 100%;
max-width: 100%;
}
.cargo-wrapper {
background-color: white;
padding: 8px;
border: 4px solid black;
}
.cargo-wrapper div.repcontainer {
display: flex;
flex-wrap: wrap;
}
.cargo-wrapper div.repcontainer > div {
flex: 1 1 calc(50% - 20px);
margin: 10px;
}
.cargo-item {
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
.cargo-item label {
margin-bottom: 4px;
}
.cargo-item > div:first-child {
width: calc(50% - 10px);
margin-right: 5px;
}
.cargo-item > div:first-child label {
text-align: left;
}
.cargo-item > div:nth-child(2),
.cargo-item > div:nth-child(3) {
width: calc(25% - 10px);
margin-right: 5px;
text-align: right;
align-items: center;
}
.cargo-item > div:nth-child(2) label,
.cargo-item > div:nth-child(3) label {
text-align: center;
}
.cargo-item > div:nth-child(3) > input {
width: 6.5em;
}
.cargo-item > div {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}
.cargo-item > div > label {
padding: 0 0;
margin: 0 0 4px 0;
position: relative;
display: block;
width: fit-content;
text-decoration: underline;
text-transform: uppercase;
}
.cargo-item > div:last-child {
margin-right: 0;
}
.characterviewer label.cargo-description {
margin-bottom: 4px;
}
input#cargo_over[value="1"] ~ label,
input#cargo_over[value="1"] ~ span {
color: red;
}
/* HP Bar */
.sheet-sp > span,
.sheet-ep > span,
.sheet-heat > span,
.sheet-hp > span,
.sheet-ap > span,
.sheet-tp > span {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 4px 0;
position: relative;
}
.sheet-sp span:nth-child(1),
.sheet-ep span:nth-child(1),
.sheet-heat span:nth-child(1),
.sheet-ap span:nth-child(1),
.sheet-hp span:nth-child(1) {
padding-right: 8px;
}
.sheet-sp span:nth-child(2),
.sheet-ep span:nth-child(2),
.sheet-heat span:nth-child(2),
.sheet-ap span:nth-child(2),
.sheet-hp span:nth-child(2) {
padding-left: 8px;
}
/* Label Tooltips */
.charactersheet.charsheet .sheet-column-right label,
.charactersheet.charsheet .sheet-column-left label {
position: relative;
text-align: center;
display: inline;
text-transform: uppercase;
text-decoration: underline;
flex: 0;
line-height: 1.2em;
}
.pilot-inline-attribute {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.pilot-block-attribute {
margin-top: 8px;
}
.pilot-background-attribute,
.pilot-appearance-attribute {
margin-top: 8px;
}
.sheet-column-left select,
.sheet-column-left input[type="text"],
.sheet-column-left input[type="textarea"],
.sheet-column-right select,
.sheet-column-right input[type="text"],
.sheet-column-right input[type="textarea"] {
flex: 1;
}
.charactersheet.charsheet label::after {
background-color: #333;
border-radius: 10px;
color: white;
display: none;
width: max-content;
max-width: 220px;
padding: 10px 15px;
position: absolute;
text-align: center;
z-index: 999;
content: attr(data-label-tooltip);
top: 0;
left: 50%;
transform: translate(-10%, calc(-100% - 10px));
}
.charactersheet.charsheet .tooltip-slide label::after,
.charactersheet.charsheet .sheet-tp label::after,
.charactersheet.charsheet .sheet-heat label::after {
transform: translate(-85%, calc(-100% - 10px));
}
.charactersheet.charsheet label::before {
background-color: #333;
content: ' ';
display: none;
position: absolute;
width: 15px;
height: 15px;
z-index: 999;
top: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}
.charactersheet.charsheet label:hover::after {
display: block;
}
.charactersheet.charsheet label:hover::before {
display: block;
}
/* Roller Templates */
.sheet-rolltemplate-salvageunion {
border: 4px solid black;
background-color: #8CC3D9;
padding: 8px;
}
.sheet-rolltemplate-salvageunion h3 {
text-transform: uppercase;
font-size: 25px;
color: #E96E4F;
-webkit-text-stroke-width: .75px;
-webkit-text-stroke-color: white;
font-weight: 900;
font-family: sans-serif;
margin-bottom: 8px;
}
.sheet-rolltemplate-salvageunion h4 span {
line-height: 1.5em;
}
.sheet-rolltemplate-salvageunion .inlinerollresult {
background-color: #222;
padding: 0px 3px 0px 3px;
font-weight: bold;
cursor: help;
font-size: 1.1em;
color: white;
font-family: monospace;
border: 0px;
}
.show-inventory-button,
.show-system-button,
.show-ability-button {
background-color: #3e3e3e;
}
.sheet-rolltemplate-salvageunion-ability h3 {
background-color: #3e3e3e;
font-family: "Spline Sans Mono", monospace;
color: white;
padding: 8px 8px 8px 5%;
border-radius: 0% 12px 12px 0%;
}
.sheet-rolltemplate-salvageunion-ability h4 {
font-family: "Spline Sans Mono", monospace;
display: inline-block;
margin: 0 0;
font-size: 14px;
}
.sheet-rolltemplate-salvageunion-systems h4.sheet-template-ep-chevron,
.sheet-rolltemplate-salvageunion-ability h4.sheet-ap-chevron {
background-color: #3e3e3e;
padding: 4px;
color: white;
position: relative;
display: inline-block;
}
.sheet-rolltemplate-salvageunion-systems h4.sheet-template-ep-chevron::after,
.sheet-rolltemplate-salvageunion-ability h4.sheet-ap-chevron::after {
content: "";
position: absolute;
top: 0px;
right: -13px;
height: 0px;
width: 0px;
border-top: solid 13.5px transparent;
border-left: solid 13.5px #3e3e3e;
border-bottom: solid 13px transparent;
display: block;
}
.sheet-rolltemplate-salvageunion-ability h4.sheet-ability-range {
text-transform: uppercase;
font-weight: 800;
}
.sheet-rolltemplate-salvageunion-ability > div > div {
background-color: white;
width: 87%;
padding: 5%;
}
.sheet-rolltemplate-salvageunion-ability > div > div > div {
padding: 4px 0;
}
.sheet-rolltemplate-salvageunion-ability .sheet-chevron-range-container {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.sheet-rolltemplate-salvageunion-ability .sheet-action-type {
font-size: 16px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-body,
.sheet-rolltemplate-salvageunion-inventory {
background-color: #A7B6BC;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-header h3,
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-header h4,
.sheet-rolltemplate-salvageunion-inventory .sheet-inventory-header h4,
.sheet-rolltemplate-salvageunion-inventory .sheet-inventory-header h3 {
color: white;
font-family: "Spline Sans Mono", monospace;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-header h3,
.sheet-rolltemplate-salvageunion-inventory .sheet-inventory-header h3 {
font-size: 21px;
}
.sheet-rolltemplate-salvageunion-inventory .sheet-inventory-header {
background-color: #063441;
padding: 6px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-header {
background-color: #A54733;
padding: 8px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-header > div {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 8px;
}
.sheet-rolltemplate-salvageunion-inventory .sheet-inventory-roll-template-container {
padding: 6px 6px 8px 6px;
}
.sheet-rolltemplate-salvageunion-inventory .sheet-roller-inventory-count h4 {
text-align: center;
background-color: #222;
color: white;
display: inline-block;
padding: 4px;
margin-bottom: 6px;
}
.sheet-rolltemplate-salvageunion-inventory .sheet-roller-inventory-description h4 {
font-size: 15px;
}
.sheet-rolltemplate-salvageunion-systems h4.sheet-template-tags {
position: relative;
width: fit-content;
background-color: #3e3e3e;
color: white;
padding: 8px;
font-family: "Spline Sans Mono", monospace;
}
.sheet-rolltemplate-salvageunion-systems .sheet-system-module-meta {
display: flex;
justify-content: space-between;
padding: 8px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-sv > h4,
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-slots > h4,
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-techlvl > h4 {
background-color: #3e3e3e;
border-radius: 4px;
color: white;
padding: 4px 5px;
position: relative;
font-family: "Spline Sans Mono", monospace;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-slots > h4 {
display: block;
height: 23px;
width: 20px;
border: inherit;
position: relative;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
transform: rotate(0deg);
border-radius: 0px 0 0 0.25em;
z-index: 17;
color: white;
background-color: #3e3e3e;
text-align: center;
padding-top: 0px;
line-height: 34px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-sv > h4 {
color: white;
position: relative;
aspect-ratio: 1;
clip-path: polygon(100% 50%,91.53% 61.13%,93.3% 75%,80.41% 80.41%,75% 93.3%,61.13% 91.53%,50% 100%,38.87% 91.53%,25% 93.3%,19.59% 80.41%,6.7% 75%,8.47% 61.13%,0% 50%,8.47% 38.87%,6.7% 25%,19.59% 19.59%,25% 6.7%,38.87% 8.47%,50% 0%,61.13% 8.47%,75% 6.7%,80.41% 19.59%,93.3% 25%,91.53% 38.87%);
padding: 4px 10px;
line-height: 19px;
}
.sheet-rolltemplate-salvageunion-systems .sheet-template-system-module-description h4 {
padding: 8px;
font-family: "Spline Sans Mono", monospace;
}
/* hide and show repeater sections with the css trick */
.sheet-systems > span.dash-separator {
margin: 0 8px;
}
.sheet-inventory {
padding: 8px 0;
}
input.expand-control[value="1"] ~ .sheet-inventory > .meta-system-name-collapsed,
input.expand-control[value="1"] ~ .sheet-ability > .dash-separator,
input.expand-control[value="1"] ~ .sheet-ability > .system-or-module,
input.expand-control[value="1"] ~ .sheet-ability > .meta-system-name-collapsed,
input.expand-control[value="1"] ~ .sheet-systems > .dash-separator,
input.expand-control[value="1"] ~ .sheet-systems > .system-or-module,
input.expand-control[value="1"] ~ .sheet-systems > .meta-system-name-collapsed {
display: none;
font-size: 14px;
font-weight: 700;
line-height: 27px;
}
input.expand-control[value="0"] ~ .sheet-inventory,
input.expand-control[value="0"] ~ .sheet-ability,
input.expand-control[value="0"] ~ .sheet-systems {
display: flex;
justify-content: space-between;
align-items: baseline;
}
input.expand-control[value="0"] ~ .sheet-inventory > *,
input.expand-control[value="0"] ~ .sheet-ability > *,
input.expand-control[value="0"] ~ .sheet-systems > * {
display: none;
}
input.expand-control[value="0"] ~ .sheet-inventory > .meta-system-name-collapsed,
input.expand-control[value="0"] ~ .sheet-ability > .dash-separator,
input.expand-control[value="0"] ~ .sheet-ability > .system-or-module,
input.expand-control[value="0"] ~ .sheet-ability > .meta-system-name-collapsed,
input.expand-control[value="0"] ~ .sheet-systems > .dash-separator,
input.expand-control[value="0"] ~ .sheet-systems > .system-or-module,
input.expand-control[value="0"] ~ .sheet-systems > .meta-system-name-collapsed {
display: inline-block;
}
.charsheet.charactersheet input.toggle-checkbox {
position: absolute;
top: 15px;
left: 0;
display: inline-block;
width: fit-content;
}
.charsheet.charactersheet .repeating_abilities input.toggle-checkbox {
top: 22px;
}
div[data-groupname="repeating_inventory"] > div.repitem,
div[data-groupname="repeating_abilities"] > div.repitem,
div[data-groupname="repeating_systems"] > div.repitem {
padding-left: 20px;
}