mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
mortaine
3d18741d00
Updated for the published game, which renames several skills and elements (does not change the crew sheet) Added Translation strings for everything and a translation.json file to comply with Roll20 guidelines. Updated the sheet preview images. Added self in sheet.json as contributor. Don't know original authors Roll20 ID to add for credit on Roll20 site.
1181 lines
25 KiB
CSS
1181 lines
25 KiB
CSS
.sheet-main {
|
|
display: grid;
|
|
width: 820px;
|
|
height: 1200px;
|
|
background-color: #ADD2AD;
|
|
grid-gap: 0px;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 50px 1fr ;
|
|
grid-template-areas:"header header header"
|
|
"main main main"
|
|
}
|
|
|
|
/*--------- Sheet Toggle -----------*/
|
|
.sheet-character,
|
|
.sheet-block-switch:checked ~ .sheet-crew {
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-crew,
|
|
.sheet-block-switch:checked ~ .sheet-character {
|
|
display: none;
|
|
}
|
|
/*----------------------------------*/
|
|
|
|
|
|
.sheet-character {
|
|
grid-area: main;
|
|
display: grid;
|
|
width: 820px;
|
|
height: 1200px;
|
|
background-color: #ADD2AD;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: repeat(1fr) ;
|
|
grid-template-areas:"common common common"
|
|
"edges edges edges"
|
|
"skills skills skills"
|
|
"skills skills skills"
|
|
"skills skills skills"
|
|
"aspect aspect aspect"
|
|
"aspect aspect aspect"
|
|
"temp temp temp"
|
|
"drivmir drivmir drivmir"
|
|
"inv inv inv"
|
|
"lang miles miles"
|
|
"notes notes notes"
|
|
}
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.sheet-section input[type=number] {
|
|
text-align: center;
|
|
width: 30px;
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
}
|
|
|
|
.sheet-sectionNoBorder {
|
|
border-style: none;
|
|
}
|
|
|
|
.sheet-drivmirSection {
|
|
padding: 0px;
|
|
border-style: none;
|
|
}
|
|
|
|
.sheet-skillSection {
|
|
padding: 5px;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
width: 115px;
|
|
}
|
|
|
|
.sheet-flex-col {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.sheet-flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-alignLeft {
|
|
float: left;
|
|
}
|
|
|
|
.sheet-alignRight {
|
|
padding-top: 3px;
|
|
float: right;
|
|
}
|
|
|
|
.sheet-alignRight button {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/*------------- Section-specific CSS -------------*/
|
|
|
|
.sheet-header {
|
|
grid-area: header;
|
|
background-color: #228B22;
|
|
width: 804px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/********Common**********/
|
|
.sheet-common {
|
|
grid-area: common;
|
|
background-color: #E4F0E4;
|
|
flex-direction: row;
|
|
height: 30px;
|
|
display: grid;
|
|
grid-gap: 1px;
|
|
grid-template-columns: 270px 190px 1fr 1fr;
|
|
grid-template-rows: 50px 1fr;
|
|
grid-template-areas:"name bloodline origin post"
|
|
}
|
|
|
|
.sheet-common select {
|
|
width: 110px;
|
|
}
|
|
|
|
.sheet-common label {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sheet-name {
|
|
grid-area: name;
|
|
}
|
|
|
|
.sheet-bloodline {
|
|
grid-area: bloodline;
|
|
}
|
|
|
|
.sheet-origin {
|
|
grid-area: origin;
|
|
}
|
|
|
|
.sheet-post {
|
|
grid-area: post;
|
|
}
|
|
/*************************/
|
|
|
|
.sheet-edges {
|
|
grid-area: edges;
|
|
background-color: #E4F0E4;
|
|
display: grid;
|
|
grid-gap: 1px;
|
|
grid-template-columns: repeat(50px);
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas:"grace iron instinct sharps teeth tides veils"
|
|
}
|
|
|
|
.sheet-edges input[type=checkbox] {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.sheet-grace {
|
|
grid-area: grace;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-iron {
|
|
grid-area: iron;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-instinct {
|
|
grid-area: instinct;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-sharps {
|
|
grid-area: sharps;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-teeth {
|
|
grid-area: teeth;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-tides {
|
|
grid-area: tides;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-veils {
|
|
grid-area: veils;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-grace label,
|
|
.sheet-iron label,
|
|
.sheet-instinct label,
|
|
.sheet-sharps label,
|
|
.sheet-teeth label,
|
|
.sheet-tides label,
|
|
.sheet-veils label {
|
|
text-align: center;
|
|
}
|
|
|
|
/*******Mires/Drives******/
|
|
.sheet-drivmir {
|
|
grid-area:drivmir;
|
|
background-color: #E4F0E4;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas:"drives mires";
|
|
}
|
|
|
|
.sheet-drives {
|
|
grid-area: drives;
|
|
width: 392px;
|
|
}
|
|
|
|
.sheet-drives input[type=text] {
|
|
width: 390px;
|
|
}
|
|
|
|
.sheet-mires {
|
|
grid-area: mires;
|
|
width: 392px;
|
|
}
|
|
|
|
.sheet-mires input[type=text] {
|
|
width: 340px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.sheet-lang {
|
|
grid-area: lang;
|
|
width: 400px;
|
|
background-color: #E4F0E4;
|
|
}
|
|
|
|
.sheet-shorterBox {
|
|
width: 130px;
|
|
}
|
|
|
|
/*************************/
|
|
|
|
.sheet-aspect {
|
|
grid-area: aspect;
|
|
background-color: #E4F0E4;
|
|
width: 804px;
|
|
}
|
|
|
|
/*******************/
|
|
|
|
.sheet-auto-expand {
|
|
position: relative;
|
|
cursor: text;
|
|
word-wrap: break-word;
|
|
box-shadow: 1px;
|
|
width: 420px;
|
|
min-height: 25px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-bottom: 5px;
|
|
padding-top: 3px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.sheet-auto-expand span {
|
|
visibility: hidden;
|
|
white-space: pre-wrap;
|
|
display: block;
|
|
}
|
|
|
|
.sheet-auto-expand textarea {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
color: inherit;
|
|
font: inherit;
|
|
letter-spacing: inherit;
|
|
padding: inherit;
|
|
text-align: inherit;
|
|
text-transform: inherit;
|
|
}
|
|
|
|
|
|
/*******************/
|
|
|
|
.sheet-aspectTitle {
|
|
font-weight: 700;
|
|
width: 180px;
|
|
height: 25px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-aspect input[type=checkbox],
|
|
.sheet-temp input[type=checkbox],
|
|
.sheet-mires input[type=checkbox] {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.sheet-aspect select,
|
|
.sheet-temp select {
|
|
appearance: none;
|
|
width: 20px;
|
|
}
|
|
|
|
.sheet-skills {
|
|
grid-area: skills;
|
|
background-color: #E4F0E4;
|
|
width: 804px;
|
|
display: grid;
|
|
grid-gap: 1px;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 20px 1fr;
|
|
grid-template-areas:"header . . . . . "
|
|
"movement detection survival creation social combat";
|
|
}
|
|
|
|
/****** Roll Buttons ******/
|
|
/* Roll buttons for attributes and skils */
|
|
.sheet-skills button[type=roll] {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
|
|
color: inherit;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.sheet-skills button[type=roll]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sheet-skills button[type=roll]::before {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-skills button[type=roll]:hover {
|
|
color: #245486;
|
|
}
|
|
|
|
.sheet-skills span {
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
/******Skills************/
|
|
.sheet-movement {
|
|
grid-area: movement;
|
|
}
|
|
|
|
.sheet-detection {
|
|
grid-area: detection;
|
|
}
|
|
|
|
.sheet-survival {
|
|
grid-area: survival;
|
|
}
|
|
|
|
.sheet-creation {
|
|
grid-area: creation;
|
|
}
|
|
|
|
.sheet-social {
|
|
grid-area: social;
|
|
}
|
|
|
|
.sheet-combat {
|
|
grid-area: combat;
|
|
}
|
|
|
|
.sheet-center {
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-skillInterior {
|
|
display: grid;
|
|
grid-template-columns: max-content max-content;
|
|
grid-gap: 5px;
|
|
float: right;
|
|
}
|
|
|
|
.sheet-skillInterior label {
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
|
|
/*************************/
|
|
|
|
.sheet-temp {
|
|
grid-area: temp;
|
|
background-color: #E4F0E4;
|
|
width: 804px;
|
|
}
|
|
|
|
/**********Inventory**********/
|
|
.sheet-inv {
|
|
grid-area: inv;
|
|
display: grid;
|
|
background-color: #E4F0E4;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: repeat(15px, 200fr);
|
|
grid-template-areas:"header ."
|
|
"salvage specimens"
|
|
"whispers charts";
|
|
}
|
|
|
|
.sheet-inv-name {
|
|
width: 250px;
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-inv-tag {
|
|
width: 120px;
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-salvage {
|
|
grid-area: salvage;
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-specimens {
|
|
grid-area: specimens;
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-whispers {
|
|
grid-area: whispers;
|
|
width: 95%;
|
|
}
|
|
|
|
.sheet-charts {
|
|
grid-area: charts;
|
|
width: 95%;
|
|
}
|
|
|
|
/*************************/
|
|
|
|
|
|
/*******Milestones********/
|
|
.sheet-miles {
|
|
grid-area: miles;
|
|
background-color: #E4F0E4;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 30px 1fr 1fr;
|
|
grid-template-areas:"header"
|
|
"major"
|
|
"minor";
|
|
}
|
|
|
|
.sheet-miles input[type=text] {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-major {
|
|
grid-area: major;
|
|
}
|
|
|
|
.sheet-minor {
|
|
grid-area: minor;
|
|
}
|
|
/*************************/
|
|
|
|
.sheet-notes {
|
|
grid-area: notes;
|
|
background-color: #E4F0E4;
|
|
}
|
|
|
|
.sheet-bigtext {
|
|
width: 650px;
|
|
}
|
|
|
|
/* Checkboxes */
|
|
/* hide original check so I can style it*/
|
|
.sheet-edges input[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 15px;
|
|
margin: -10px;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* create my own checkbox */
|
|
.sheet-edges input[type="checkbox"] + span::before {
|
|
margin-right: 4px;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
line-height: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
width: 25px;
|
|
height: 25px;
|
|
content: "";
|
|
|
|
background: #E4F0E4;
|
|
}
|
|
|
|
.sheet-edges input[type="checkbox"]:checked + span::before {
|
|
content: "";
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 25px;
|
|
color: white;
|
|
background-color: #245486;
|
|
}
|
|
|
|
.sheet-mires input[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 6px;
|
|
margin: -10px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-mires input[type="checkbox"] + span::before {
|
|
margin-right: 4px;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
line-height: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
width: 16px;
|
|
height: 16px;
|
|
content: "";
|
|
|
|
background: #E4F0E4;
|
|
}
|
|
|
|
.sheet-mires input[type="checkbox"]:checked + span::before {
|
|
content: "";
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 16px;
|
|
color: white;
|
|
background-color: #245486;
|
|
}
|
|
|
|
/* aspect selectors */
|
|
.sheet-databox,
|
|
.sheet-div-show-radio {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-div-show-1:checked ~ .sheet-aspectBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-2:checked ~ .sheet-aspectBox1,
|
|
.sheet-div-show-2:checked ~ .sheet-aspectBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-3:checked ~ .sheet-aspectBox1,
|
|
.sheet-div-show-3:checked ~ .sheet-aspectBox2,
|
|
.sheet-div-show-3:checked ~ .sheet-aspectBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-4:checked ~ .sheet-aspectBox1,
|
|
.sheet-div-show-4:checked ~ .sheet-aspectBox2,
|
|
.sheet-div-show-4:checked ~ .sheet-aspectBox3,
|
|
.sheet-div-show-4:checked ~ .sheet-aspectBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-5:checked ~ .sheet-aspectBox1,
|
|
.sheet-div-show-5:checked ~ .sheet-aspectBox2,
|
|
.sheet-div-show-5:checked ~ .sheet-aspectBox3,
|
|
.sheet-div-show-5:checked ~ .sheet-aspectBox4,
|
|
.sheet-div-show-5:checked ~ .sheet-aspectBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox1,
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox2,
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox3,
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox4,
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox5,
|
|
.sheet-div-show-6:checked ~ .sheet-aspectBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
/**********************************************/
|
|
|
|
.sheet-temp-div-show-1:checked ~ .sheet-tempAspectBox1 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-temp-div-show-2:checked ~ .sheet-tempAspectBox1,
|
|
.sheet-temp-div-show-2:checked ~ .sheet-tempAspectBox2 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-temp-div-show-3:checked ~ .sheet-tempAspectBox1,
|
|
.sheet-temp-div-show-3:checked ~ .sheet-tempAspectBox2,
|
|
.sheet-temp-div-show-3:checked ~ .sheet-tempAspectBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-temp-div-show-4:checked ~ .sheet-tempAspectBox1,
|
|
.sheet-temp-div-show-4:checked ~ .sheet-tempAspectBox2,
|
|
.sheet-temp-div-show-4:checked ~ .sheet-tempAspectBox3,
|
|
.sheet-temp-div-show-4:checked ~ .sheet-tempAspectBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-temp-div-show-5:checked ~ .sheet-tempAspectBox1,
|
|
.sheet-temp-div-show-5:checked ~ .sheet-tempAspectBox2,
|
|
.sheet-temp-div-show-5:checked ~ .sheet-tempAspectBox3,
|
|
.sheet-temp-div-show-5:checked ~ .sheet-tempAspectBox4,
|
|
.sheet-temp-div-show-5:checked ~ .sheet-tempAspectBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox1,
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox2,
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox3,
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox4,
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox5,
|
|
.sheet-temp-div-show-6:checked ~ .sheet-tempAspectBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
/* Remove arrows from number inputs */
|
|
/* Chrome etc */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/*****************************************************************************************************************************/
|
|
.sheet-crew {
|
|
display: none;
|
|
width: 820px;
|
|
height: 1200px;
|
|
background-color: #ADD2AD;
|
|
grid-gap: 4px;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: repeat(1fr) ;
|
|
grid-template-areas:"common common"
|
|
"ratings design"
|
|
"fittings fittings"
|
|
"cargo cargo"
|
|
"condition condition"
|
|
"undercrew undercrew"
|
|
"reputation reputation"
|
|
"notes notes"
|
|
}
|
|
|
|
.sheet-section input[type=number] {
|
|
text-align: center;
|
|
width: 30px;
|
|
}
|
|
|
|
.sheet-flex-col {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
|
|
.sheet-flex-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-section {
|
|
padding: 5px;
|
|
border-style: solid;
|
|
background-color: #E4F0E4;
|
|
}
|
|
|
|
.sheet-header {
|
|
grid-area: header;
|
|
background-color: #228B22;
|
|
flex-direction: column;
|
|
height: 30px;
|
|
}
|
|
|
|
.sheet-crew-common {
|
|
grid-area: common;
|
|
background-color: #E4F0E4;
|
|
}
|
|
|
|
.sheet-crew-common label {
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-design {
|
|
grid-area: design;
|
|
width: 392px;
|
|
}
|
|
|
|
.sheet-design-name {
|
|
float: left;
|
|
clear: left;
|
|
width: 50px;
|
|
margin-top: 5px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-design-description {
|
|
width: 190px;
|
|
float: left;
|
|
}
|
|
|
|
.sheet-design-effects {
|
|
width: 140px;
|
|
float: right;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.sheet-ratings {
|
|
grid-area: ratings;
|
|
}
|
|
|
|
.sheet-ratings label {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-fittings {
|
|
grid-area: fittings;
|
|
}
|
|
|
|
.sheet-fittings select {
|
|
width: 125px;
|
|
}
|
|
|
|
.sheet-cargo {
|
|
grid-area: cargo;
|
|
}
|
|
|
|
.sheet-undercrew {
|
|
grid-area: undercrew;
|
|
}
|
|
|
|
.sheet-condition {
|
|
grid-area: condition;
|
|
}
|
|
|
|
.sheet-reputation {
|
|
grid-area: reputation;
|
|
}
|
|
|
|
.sheet-inline {
|
|
display: inline;
|
|
}
|
|
|
|
.sheet-rep-headers {
|
|
display: inline;
|
|
margin-left: 520px;
|
|
}
|
|
|
|
.sheet-rep-label {
|
|
display: inline;
|
|
margin-left: 8px;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rep-box-container {
|
|
display: inline;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.sheet-rep-box {
|
|
margin-left: 11px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.sheet-notes {
|
|
grid-area: notes;
|
|
}
|
|
|
|
.sheet-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-bigtext {
|
|
width: 650px;
|
|
}
|
|
|
|
/* custom checkboxes */
|
|
/* hide original check so I can style it*/
|
|
input[type="checkbox"]
|
|
{
|
|
opacity: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 15px;
|
|
margin: -10px;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* create my own checkbox */
|
|
input[type="checkbox"] + span::before
|
|
{
|
|
margin-right: 4px;
|
|
border: solid 2px black;
|
|
border-radius: 5px;
|
|
line-height: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
width: 25px;
|
|
height: 25px;
|
|
content: "";
|
|
|
|
background: #E4F0E4;
|
|
}
|
|
|
|
input[type="checkbox"]:checked + span::before
|
|
{
|
|
content: "";
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
line-height: 25px;
|
|
color: white;
|
|
background-color: #245486;
|
|
}
|
|
|
|
.sheet-rating-container {
|
|
display: inline;
|
|
}
|
|
|
|
/* undercrew aspect selectors */
|
|
.sheet-databox,
|
|
.sheet-div-show-radio {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-undercrew select,
|
|
.sheet-ratings select {
|
|
appearance: none;
|
|
width: 20px;
|
|
}
|
|
|
|
.sheet-undercrewDesc {
|
|
width: 410px;
|
|
}
|
|
|
|
.sheet-undercrewTitle {
|
|
font-weight: 700;
|
|
width: 200px;
|
|
}
|
|
|
|
.sheet-div-undercrew-show-1:checked ~ .sheet-undercrewBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-undercrew-show-2:checked ~ .sheet-undercrewBox1,
|
|
.sheet-div-undercrew-show-2:checked ~ .sheet-undercrewBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-undercrew-show-3:checked ~ .sheet-undercrewBox1,
|
|
.sheet-div-undercrew-show-3:checked ~ .sheet-undercrewBox2,
|
|
.sheet-div-undercrew-show-3:checked ~ .sheet-undercrewBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-undercrew-show-4:checked ~ .sheet-undercrewBox1,
|
|
.sheet-div-undercrew-show-4:checked ~ .sheet-undercrewBox2,
|
|
.sheet-div-undercrew-show-4:checked ~ .sheet-undercrewBox3,
|
|
.sheet-div-undercrew-show-4:checked ~ .sheet-undercrewBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-undercrew-show-5:checked ~ .sheet-undercrewBox1,
|
|
.sheet-div-undercrew-show-5:checked ~ .sheet-undercrewBox2,
|
|
.sheet-div-undercrew-show-5:checked ~ .sheet-undercrewBox3,
|
|
.sheet-div-undercrew-show-5:checked ~ .sheet-undercrewBox4,
|
|
.sheet-div-undercrew-show-5:checked ~ .sheet-undercrewBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox1,
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox2,
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox3,
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox4,
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox5,
|
|
.sheet-div-undercrew-show-6:checked ~ .sheet-undercrewBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
/****** Ratings ******/
|
|
.sheet-div-show-armor-1:checked ~ .sheet-armorBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-armor-2:checked ~ .sheet-armorBox1,
|
|
.sheet-div-show-armor-2:checked ~ .sheet-armorBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-armor-3:checked ~ .sheet-armorBox1,
|
|
.sheet-div-show-armor-3:checked ~ .sheet-armorBox2,
|
|
.sheet-div-show-armor-3:checked ~ .sheet-armorBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-armor-4:checked ~ .sheet-armorBox1,
|
|
.sheet-div-show-armor-4:checked ~ .sheet-armorBox2,
|
|
.sheet-div-show-armor-4:checked ~ .sheet-armorBox3,
|
|
.sheet-div-show-armor-4:checked ~ .sheet-armorBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-armor-5:checked ~ .sheet-armorBox1,
|
|
.sheet-div-show-armor-5:checked ~ .sheet-armorBox2,
|
|
.sheet-div-show-armor-5:checked ~ .sheet-armorBox3,
|
|
.sheet-div-show-armor-5:checked ~ .sheet-armorBox4,
|
|
.sheet-div-show-armor-5:checked ~ .sheet-armorBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox1,
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox2,
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox3,
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox4,
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox5,
|
|
.sheet-div-show-armor-6:checked ~ .sheet-armorBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-seals-1:checked ~ .sheet-sealsBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-seals-2:checked ~ .sheet-sealsBox1,
|
|
.sheet-div-show-seals-2:checked ~ .sheet-sealsBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-seals-3:checked ~ .sheet-sealsBox1,
|
|
.sheet-div-show-seals-3:checked ~ .sheet-sealsBox2,
|
|
.sheet-div-show-seals-3:checked ~ .sheet-sealsBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-seals-4:checked ~ .sheet-sealsBox1,
|
|
.sheet-div-show-seals-4:checked ~ .sheet-sealsBox2,
|
|
.sheet-div-show-seals-4:checked ~ .sheet-sealsBox3,
|
|
.sheet-div-show-seals-4:checked ~ .sheet-sealsBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-seals-5:checked ~ .sheet-sealsBox1,
|
|
.sheet-div-show-seals-5:checked ~ .sheet-sealsBox2,
|
|
.sheet-div-show-seals-5:checked ~ .sheet-sealsBox3,
|
|
.sheet-div-show-seals-5:checked ~ .sheet-sealsBox4,
|
|
.sheet-div-show-seals-5:checked ~ .sheet-sealsBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox1,
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox2,
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox3,
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox4,
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox5,
|
|
.sheet-div-show-seals-6:checked ~ .sheet-sealsBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-speed-1:checked ~ .sheet-speedBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-speed-2:checked ~ .sheet-speedBox1,
|
|
.sheet-div-show-speed-2:checked ~ .sheet-speedBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-speed-3:checked ~ .sheet-speedBox1,
|
|
.sheet-div-show-speed-3:checked ~ .sheet-speedBox2,
|
|
.sheet-div-show-speed-3:checked ~ .sheet-speedBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-speed-4:checked ~ .sheet-speedBox1,
|
|
.sheet-div-show-speed-4:checked ~ .sheet-speedBox2,
|
|
.sheet-div-show-speed-4:checked ~ .sheet-speedBox3,
|
|
.sheet-div-show-speed-4:checked ~ .sheet-speedBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-speed-5:checked ~ .sheet-speedBox1,
|
|
.sheet-div-show-speed-5:checked ~ .sheet-speedBox2,
|
|
.sheet-div-show-speed-5:checked ~ .sheet-speedBox3,
|
|
.sheet-div-show-speed-5:checked ~ .sheet-speedBox4,
|
|
.sheet-div-show-speed-5:checked ~ .sheet-speedBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox1,
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox2,
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox3,
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox4,
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox5,
|
|
.sheet-div-show-speed-6:checked ~ .sheet-speedBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-saws-1:checked ~ .sheet-sawsBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-saws-2:checked ~ .sheet-sawsBox1,
|
|
.sheet-div-show-saws-2:checked ~ .sheet-sawsBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-saws-3:checked ~ .sheet-sawsBox1,
|
|
.sheet-div-show-saws-3:checked ~ .sheet-sawsBox2,
|
|
.sheet-div-show-saws-3:checked ~ .sheet-sawsBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-saws-4:checked ~ .sheet-sawsBox1,
|
|
.sheet-div-show-saws-4:checked ~ .sheet-sawsBox2,
|
|
.sheet-div-show-saws-4:checked ~ .sheet-sawsBox3,
|
|
.sheet-div-show-saws-4:checked ~ .sheet-sawsBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-saws-5:checked ~ .sheet-sawsBox1,
|
|
.sheet-div-show-saws-5:checked ~ .sheet-sawsBox2,
|
|
.sheet-div-show-saws-5:checked ~ .sheet-sawsBox3,
|
|
.sheet-div-show-saws-5:checked ~ .sheet-sawsBox4,
|
|
.sheet-div-show-saws-5:checked ~ .sheet-sawsBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox1,
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox2,
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox3,
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox4,
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox5,
|
|
.sheet-div-show-saws-6:checked ~ .sheet-sawsBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-stealth-1:checked ~ .sheet-stealthBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-stealth-2:checked ~ .sheet-stealthBox1,
|
|
.sheet-div-show-stealth-2:checked ~ .sheet-stealthBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-stealth-3:checked ~ .sheet-stealthBox1,
|
|
.sheet-div-show-stealth-3:checked ~ .sheet-stealthBox2,
|
|
.sheet-div-show-stealth-3:checked ~ .sheet-stealthBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-stealth-4:checked ~ .sheet-stealthBox1,
|
|
.sheet-div-show-stealth-4:checked ~ .sheet-stealthBox2,
|
|
.sheet-div-show-stealth-4:checked ~ .sheet-stealthBox3,
|
|
.sheet-div-show-stealth-4:checked ~ .sheet-stealthBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-stealth-5:checked ~ .sheet-stealthBox1,
|
|
.sheet-div-show-stealth-5:checked ~ .sheet-stealthBox2,
|
|
.sheet-div-show-stealth-5:checked ~ .sheet-stealthBox3,
|
|
.sheet-div-show-stealth-5:checked ~ .sheet-stealthBox4,
|
|
.sheet-div-show-stealth-5:checked ~ .sheet-stealthBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox1,
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox2,
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox3,
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox4,
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox5,
|
|
.sheet-div-show-stealth-6:checked ~ .sheet-stealthBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-tilt-1:checked ~ .sheet-tiltBox1 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-tilt-2:checked ~ .sheet-tiltBox1,
|
|
.sheet-div-show-tilt-2:checked ~ .sheet-tiltBox2 {
|
|
display: initial;
|
|
}
|
|
.sheet-div-show-tilt-3:checked ~ .sheet-tiltBox1,
|
|
.sheet-div-show-tilt-3:checked ~ .sheet-tiltBox2,
|
|
.sheet-div-show-tilt-3:checked ~ .sheet-tiltBox3 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-tilt-4:checked ~ .sheet-tiltBox1,
|
|
.sheet-div-show-tilt-4:checked ~ .sheet-tiltBox2,
|
|
.sheet-div-show-tilt-4:checked ~ .sheet-tiltBox3,
|
|
.sheet-div-show-tilt-4:checked ~ .sheet-tiltBox4 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-tilt-5:checked ~ .sheet-tiltBox1,
|
|
.sheet-div-show-tilt-5:checked ~ .sheet-tiltBox2,
|
|
.sheet-div-show-tilt-5:checked ~ .sheet-tiltBox3,
|
|
.sheet-div-show-tilt-5:checked ~ .sheet-tiltBox4,
|
|
.sheet-div-show-tilt-5:checked ~ .sheet-tiltBox5 {
|
|
display: initial;
|
|
}
|
|
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox1,
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox2,
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox3,
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox4,
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox5,
|
|
.sheet-div-show-tilt-6:checked ~ .sheet-tiltBox6 {
|
|
display: initial;
|
|
}
|
|
|
|
/****** Roll Buttons ******/
|
|
/* Roll buttons crew ratings */
|
|
.sheet-ratings button[type=roll] {
|
|
background-color: transparent;
|
|
color: black;
|
|
border: none;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
|
|
color: inherit;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
padding: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.sheet-ratings button[type=roll]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.sheet-ratings button[type=roll]::before {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-ratings button[type=roll]:hover {
|
|
color: #245486;
|
|
}
|
|
|