Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
roll20-character-sheets/HeroSystem6eHeroic/HeroSystem6eHeroic.css
T

8933 lines
259 KiB
CSS
Raw Permalink Blame History

/* --------------------------------------------------- */
/* Roll20-specific styling */
/* --------------------------------------------------- */
.charsheet {
background: white;
}
body.sheet-darkmode .charsheet {
background: #1f1f1f;
}
/* Roll20 Roll Button re-styling, Thanks to Scott C. */
button[type=roll] {
/* Override Roll20 default styling */
border: none;
text-shadow: none;
line-height: 14px;
background-image: none;
box-shadow: none;
/* Set global border radius of 'Roll' buttons here. */
border-radius: 2px;
/* Set global font weight and size here. */
font-style: normal;
font-weight: bold;
font-size: 13px !important;
}
button[type=roll]::before{
/* Remove Roll20 d20 */
content: "" !important;
}
/* --------------------------------------------------- */
/* Browser-specific Styling */
/* --------------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
input[type=number]:hover,
input[type=number]:focus {
padding-right: 1px; /* Keeps some numbers from shifting during mouse hover and click. */
}
input:read-only::-webkit-outer-spin-button,
input:read-only::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Stop Safari from offering to autofill name fields. */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
visibility: hidden;
position: absolute;
top: -50px;
}
}
@-moz-document url-prefix() {
/* CSS Statements that only apply on Firefox */
input[type=number]:hover,
input[type=number]:focus {
-moz-appearance: number-input;
padding-right: 0px; /* Keeps some numbers from shifting during mouse hover and click. */
}
input[type=number]:read-only {
-moz-appearance: textfield;
}
}
/* ---------------------------------------------------- */
/* General Styling */
/* ---------------------------------------------------- */
/* For better color accessibility, the sheet makes */
/* frequent use of the Okabe and Ito palette and its */
/* tints and shades. */
/* */
/* Green: #009E73 */
/* Blue: #0072B2 */
/* Light blue: #4ba6ff */
/* Yellow: #F0E442 */
/* Orange: #E69F00 */
/* Orange-red: #D55E00 */
/* Violet: #CC79A7 */
/* A mid-tone gray: #8A8A8A */
/* */
/* The HERO blue theme is based on: */
/* Royal blue: #4169E1 */
/* Dodger blue: #1E90FF */
textarea {
font-size: 14px;
resize: none;
}
input {
font-size: 13px;
border: hidden;
border-radius: 2px;
padding: 0px;
text-align: center;
}
input[type=number]:focus {
outline: none;
}
input[type=text]:focus,
textarea:focus,
button:focus {
}
input.customCheckbox {
width: 20px;
height: 20px;
vertical-align: middle;
}
::selection {
background: #f2ceb2;
}
::-moz-selection {
background: #f2ceb2;
}
/* Custom Scrollbars */
/* These don't work in Safari. */
/* First page */
.item-portrait-02,
.item-characteristics-history {
scrollbar-width: thin;
scrollbar-color: #a0b4f0 transparent;
}
/* Remaining text areas */
.item-martial-maneuver-block-text,
.item-tab-gear-slide-treasure-text,
.flex-container-talents-notes,
.flex-container-complications-notes,
.item-power-block-text,
.item-talent-block-text,
.item-complication-block-text {
scrollbar-width: thin;
scrollbar-color: #78bcff transparent;
}
/* Skills and Talents lists */
.item-flex-container-skill-list,
.flex-container-talent-selectors-list {
scrollbar-width: thin;
scrollbar-color: #f0c566 transparent;
}
.flex-container-talent-selectors-list {
transform: rotateY(180deg);
}
/* --------------------------------------------------------------- */
/* Custom select used due to differences between Firefox, */
/* Chrome, and Safari. From: */
/* @link https://moderncss.dev/custom-select-styles-with-pure-css/ */
/* --------------------------------------------------------------- */
select,
select::before,
select::after {
box-sizing: border-box;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
padding: 0 1em 0 0;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 12px;
cursor: inherit;
line-height: inherit;
z-index: 1;
outline: none;
max-height: 22px;
}
.custom-select,
.custom-select-skill,
.custom-select-alternate,
.custom-select-propulsion,
.custom-select-gear,
.custom-select-option {
display: grid;
grid-template-areas: "select";
align-items: center;
position: relative;
max-height: 20px;
padding: 0px;
padding-bottom: 1px;
padding-right: 3px;
cursor: pointer;
}
.custom-select {
min-width: 34px;
padding-left: 0px;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
border: 1px solid #f2cf7f;
border-radius: 3px;
}
.custom-select-skill {
margin-top: 2px;
margin-bottom: 1px;
max-height: 20px;
min-width: 34px;
padding-left: 0px;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
border: 1px solid #f2cf7f;
border-radius: 3px;
}
.custom-select-alternate {
min-width: 34px;
padding-left: 0px;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
border: 1px solid #78bcff;
border-radius: 3px;
}
.custom-select-propulsion {
min-width: 76px;
text-align-last: left;
border: none;
background-color: #f4ec7a;
border-radius: 0px;
}
.custom-select-gear {
width: 42px;
padding-left: 4px;
padding-bottom: 2px;
margin-right: 18px;
max-height: 16px;
border: solid 1px #F0E442;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
border-radius: 3px;
}
.custom-select-option {
padding-left: 4px;
margin-left: 0px;
margin-right: 8px;
background-color: #fff;
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
border: 1px solid #f2cf7f;
border-radius: 3px;
}
.custom-select-option:first-child {
width: 55px;
}
.custom-select-option:not(:first-child) {
margin-left: 5px;
width: 85px;
}
.custom-select select,
.custom-select-skill select,
.custom-select-alternate select,
.custom-select-gear select,
.custom-select-option select,
.custom-select-propulsion select,
.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-gear::after,
.custom-select-option::after,
.custom-select-propulsion::after {
grid-area: select;
}
.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-gear::after,
.custom-select-option::after,
.custom-select-propulsion::after {
content: "";
justify-self: end;
width: 12px;
height: 8px;
-webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
.custom-select::after,
.custom-select-skill::after,
.custom-select-alternate::after,
.custom-select-propulsion::after {
background-color: #8A8A8A;
}
.select-skill-state-01[value="0"] ~ .custom-select-skill::after,
.select-skill-state-02[value="0"] ~ .custom-select-skill::after,
.select-skill-state-03[value="0"] ~ .custom-select-skill::after,
.select-skill-state-04[value="0"] ~ .custom-select-skill::after,
.select-skill-state-05[value="0"] ~ .custom-select-skill::after,
.select-skill-state-06[value="0"] ~ .custom-select-skill::after,
.select-skill-state-07[value="0"] ~ .custom-select-skill::after,
.select-skill-state-08[value="0"] ~ .custom-select-skill::after,
.select-skill-state-09[value="0"] ~ .custom-select-skill::after,
.select-skill-state-10[value="0"] ~ .custom-select-skill::after,
.select-skill-state-11[value="0"] ~ .custom-select-skill::after,
.select-skill-state-12[value="0"] ~ .custom-select-skill::after,
.select-skill-state-13[value="0"] ~ .custom-select-skill::after,
.select-skill-state-14[value="0"] ~ .custom-select-skill::after,
.select-skill-state-15[value="0"] ~ .custom-select-skill::after,
.select-skill-state-16[value="0"] ~ .custom-select-skill::after,
.select-skill-state-17[value="0"] ~ .custom-select-skill::after,
.select-skill-state-18[value="0"] ~ .custom-select-skill::after,
.select-skill-state-19[value="0"] ~ .custom-select-skill::after,
.select-skill-state-20[value="0"] ~ .custom-select-skill::after,
.select-skill-state-21[value="0"] ~ .custom-select-skill::after,
.select-skill-state-22[value="0"] ~ .custom-select-skill::after,
.select-skill-state-23[value="0"] ~ .custom-select-skill::after,
.select-skill-state-24[value="0"] ~ .custom-select-skill::after,
.select-skill-state-25[value="0"] ~ .custom-select-skill::after,
.select-skill-state-26[value="0"] ~ .custom-select-skill::after,
.select-skill-state-27[value="0"] ~ .custom-select-skill::after,
.select-skill-state-28[value="0"] ~ .custom-select-skill::after,
.select-skill-state-29[value="0"] ~ .custom-select-skill::after,
.select-skill-state-30[value="0"] ~ .custom-select-skill::after,
.select-skill-state-31[value="0"] ~ .custom-select-skill::after,
.select-skill-state-32[value="0"] ~ .custom-select-skill::after,
.select-skill-state-33[value="0"] ~ .custom-select-skill::after,
.select-skill-state-34[value="0"] ~ .custom-select-skill::after,
.select-skill-state-35[value="0"] ~ .custom-select-skill::after,
.select-skill-state-36[value="0"] ~ .custom-select-skill::after,
.select-skill-state-37[value="0"] ~ .custom-select-skill::after,
.select-skill-state-38[value="0"] ~ .custom-select-skill::after,
.select-skill-state-39[value="0"] ~ .custom-select-skill::after,
.select-skill-state-40[value="0"] ~ .custom-select-skill::after,
.select-skill-state-41[value="0"] ~ .custom-select-skill::after,
.select-skill-state-42[value="0"] ~ .custom-select-skill::after,
.select-skill-state-43[value="0"] ~ .custom-select-skill::after,
.select-skill-state-44[value="0"] ~ .custom-select-skill::after,
.select-skill-state-45[value="0"] ~ .custom-select-skill::after,
.select-skill-state-46[value="0"] ~ .custom-select-skill::after,
.select-skill-state-47[value="0"] ~ .custom-select-skill::after,
.select-skill-state-48[value="0"] ~ .custom-select-skill::after,
.select-skill-state-49[value="0"] ~ .custom-select-skill::after,
.select-skill-state-50[value="0"] ~ .custom-select-skill::after {
background-color: #8A8A8A;
}
.select-skill-state-01[value="1"] ~ .custom-select-skill::after,
.select-skill-state-02[value="1"] ~ .custom-select-skill::after,
.select-skill-state-03[value="1"] ~ .custom-select-skill::after,
.select-skill-state-04[value="1"] ~ .custom-select-skill::after,
.select-skill-state-05[value="1"] ~ .custom-select-skill::after,
.select-skill-state-06[value="1"] ~ .custom-select-skill::after,
.select-skill-state-07[value="1"] ~ .custom-select-skill::after,
.select-skill-state-08[value="1"] ~ .custom-select-skill::after,
.select-skill-state-09[value="1"] ~ .custom-select-skill::after,
.select-skill-state-10[value="1"] ~ .custom-select-skill::after,
.select-skill-state-11[value="1"] ~ .custom-select-skill::after,
.select-skill-state-12[value="1"] ~ .custom-select-skill::after,
.select-skill-state-13[value="1"] ~ .custom-select-skill::after,
.select-skill-state-14[value="1"] ~ .custom-select-skill::after,
.select-skill-state-15[value="1"] ~ .custom-select-skill::after,
.select-skill-state-16[value="1"] ~ .custom-select-skill::after,
.select-skill-state-17[value="1"] ~ .custom-select-skill::after,
.select-skill-state-18[value="1"] ~ .custom-select-skill::after,
.select-skill-state-19[value="1"] ~ .custom-select-skill::after,
.select-skill-state-20[value="1"] ~ .custom-select-skill::after,
.select-skill-state-21[value="1"] ~ .custom-select-skill::after,
.select-skill-state-22[value="1"] ~ .custom-select-skill::after,
.select-skill-state-23[value="1"] ~ .custom-select-skill::after,
.select-skill-state-24[value="1"] ~ .custom-select-skill::after,
.select-skill-state-25[value="1"] ~ .custom-select-skill::after,
.select-skill-state-26[value="1"] ~ .custom-select-skill::after,
.select-skill-state-27[value="1"] ~ .custom-select-skill::after,
.select-skill-state-28[value="1"] ~ .custom-select-skill::after,
.select-skill-state-29[value="1"] ~ .custom-select-skill::after,
.select-skill-state-30[value="1"] ~ .custom-select-skill::after,
.select-skill-state-31[value="1"] ~ .custom-select-skill::after,
.select-skill-state-32[value="1"] ~ .custom-select-skill::after,
.select-skill-state-33[value="1"] ~ .custom-select-skill::after,
.select-skill-state-34[value="1"] ~ .custom-select-skill::after,
.select-skill-state-35[value="1"] ~ .custom-select-skill::after,
.select-skill-state-36[value="1"] ~ .custom-select-skill::after,
.select-skill-state-37[value="1"] ~ .custom-select-skill::after,
.select-skill-state-38[value="1"] ~ .custom-select-skill::after,
.select-skill-state-39[value="1"] ~ .custom-select-skill::after,
.select-skill-state-40[value="1"] ~ .custom-select-skill::after,
.select-skill-state-41[value="1"] ~ .custom-select-skill::after,
.select-skill-state-42[value="1"] ~ .custom-select-skill::after,
.select-skill-state-43[value="1"] ~ .custom-select-skill::after,
.select-skill-state-44[value="1"] ~ .custom-select-skill::after,
.select-skill-state-45[value="1"] ~ .custom-select-skill::after,
.select-skill-state-46[value="1"] ~ .custom-select-skill::after,
.select-skill-state-47[value="1"] ~ .custom-select-skill::after,
.select-skill-state-48[value="1"] ~ .custom-select-skill::after,
.select-skill-state-49[value="1"] ~ .custom-select-skill::after,
.select-skill-state-50[value="1"] ~ .custom-select-skill::after {
background-color: #1e90ff;
}
.select-skill-state-01[value="2"] ~ .custom-select-skill::after,
.select-skill-state-02[value="2"] ~ .custom-select-skill::after,
.select-skill-state-03[value="2"] ~ .custom-select-skill::after,
.select-skill-state-04[value="2"] ~ .custom-select-skill::after,
.select-skill-state-05[value="2"] ~ .custom-select-skill::after,
.select-skill-state-06[value="2"] ~ .custom-select-skill::after,
.select-skill-state-07[value="2"] ~ .custom-select-skill::after,
.select-skill-state-08[value="2"] ~ .custom-select-skill::after,
.select-skill-state-09[value="2"] ~ .custom-select-skill::after,
.select-skill-state-10[value="2"] ~ .custom-select-skill::after,
.select-skill-state-11[value="2"] ~ .custom-select-skill::after,
.select-skill-state-12[value="2"] ~ .custom-select-skill::after,
.select-skill-state-13[value="2"] ~ .custom-select-skill::after,
.select-skill-state-14[value="2"] ~ .custom-select-skill::after,
.select-skill-state-15[value="2"] ~ .custom-select-skill::after,
.select-skill-state-16[value="2"] ~ .custom-select-skill::after,
.select-skill-state-17[value="2"] ~ .custom-select-skill::after,
.select-skill-state-18[value="2"] ~ .custom-select-skill::after,
.select-skill-state-19[value="2"] ~ .custom-select-skill::after,
.select-skill-state-20[value="2"] ~ .custom-select-skill::after,
.select-skill-state-21[value="2"] ~ .custom-select-skill::after,
.select-skill-state-22[value="2"] ~ .custom-select-skill::after,
.select-skill-state-23[value="2"] ~ .custom-select-skill::after,
.select-skill-state-24[value="2"] ~ .custom-select-skill::after,
.select-skill-state-25[value="2"] ~ .custom-select-skill::after,
.select-skill-state-26[value="2"] ~ .custom-select-skill::after,
.select-skill-state-27[value="2"] ~ .custom-select-skill::after,
.select-skill-state-28[value="2"] ~ .custom-select-skill::after,
.select-skill-state-29[value="2"] ~ .custom-select-skill::after,
.select-skill-state-30[value="2"] ~ .custom-select-skill::after,
.select-skill-state-31[value="2"] ~ .custom-select-skill::after,
.select-skill-state-32[value="2"] ~ .custom-select-skill::after,
.select-skill-state-33[value="2"] ~ .custom-select-skill::after,
.select-skill-state-34[value="2"] ~ .custom-select-skill::after,
.select-skill-state-35[value="2"] ~ .custom-select-skill::after,
.select-skill-state-36[value="2"] ~ .custom-select-skill::after,
.select-skill-state-37[value="2"] ~ .custom-select-skill::after,
.select-skill-state-38[value="2"] ~ .custom-select-skill::after,
.select-skill-state-39[value="2"] ~ .custom-select-skill::after,
.select-skill-state-40[value="2"] ~ .custom-select-skill::after,
.select-skill-state-41[value="2"] ~ .custom-select-skill::after,
.select-skill-state-42[value="2"] ~ .custom-select-skill::after,
.select-skill-state-43[value="2"] ~ .custom-select-skill::after,
.select-skill-state-44[value="2"] ~ .custom-select-skill::after,
.select-skill-state-45[value="2"] ~ .custom-select-skill::after,
.select-skill-state-46[value="2"] ~ .custom-select-skill::after,
.select-skill-state-47[value="2"] ~ .custom-select-skill::after,
.select-skill-state-48[value="2"] ~ .custom-select-skill::after,
.select-skill-state-49[value="2"] ~ .custom-select-skill::after,
.select-skill-state-50[value="2"] ~ .custom-select-skill::after {
background-color: #8fc8ff;
}
.custom-select-gear::after,
.custom-select-option::after {
background-color: #4ba6ff;
}
select:focus + .focus {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
}
.custom-select--disabled,
.custom-select-skill--disabled,
.custom-select-alternate--disabled,
.custom-select-gear--disabled,
.custom-select-option--disabled,
.custom-select-propulsion--disabled {
cursor: not-allowed;
background-color: #eee;
background-image: linear-gradient(to top, #ddd, #eee 33%);
}
.custom-select-skill {
width: 64px;
}
/* --------------------------------------------------- */
/* Tab Styling */
/* --------------------------------------------------- */
.tab {
display: flex;
justify-content: space-between;
height:36px;
padding: 0px;
widows: 100%;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
width: 680px;
background: #2e4a9e;
border: 8px;
border-bottom: 0px;
border-radius: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-color: #2e4a9e;
border-style: solid;
}
/* Style the buttons inside the tab */
.tab button {
background-color: #b3c3f3;
float: left;
outline: none;
cursor: pointer;
padding: 10px 10px;
margin-right: 0px;
font-size: 18px;
border: none;
border-bottom: solid 3px #2e4a9e;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #F0E442;
border-bottom: solid 3px #2e4a9e;
}
/* Create an active/current tab class */
.tab button.active {
background-color: #F0E442;
}
/* show the selected tab */
.sheet-tabs-toggle[value="characteristics"] ~ .tab .button-tab[name="act_characteristics"],
.sheet-tabs-toggle[value="gear"] ~ .tab .button-tab[name="act_gear"],
.sheet-tabs-toggle[value="skills"] ~ .tab .button-tab[name="act_skills"],
.sheet-tabs-toggle[value="powers"] ~ .tab .button-tab[name="act_powers"],
.sheet-tabs-toggle[value="complications"] ~ .tab .button-tab[name="act_complications"],
.sheet-tabs-toggle[value="options"] ~ .tab .button-tab[name="act_options"] {
background-color: #4169e1;
color: white;
border: none;
border-bottom: solid 3px #4169e1;
}
/* --------------------------------------------------- */
/* Configure sheet and tab buttons */
/* --------------------------------------------------- */
.sheet-characteristics,
.sheet-skills,
.sheet-powers,
.sheet-complications,
.sheet-gear,
.sheet-options {
display: none;
width: 680px;
background: #2e4a9e;
border: 8px;
border-top: 6px;
border-color: #2e4a9e;
border-style: solid;
}
/* show the selected tab */
.sheet-tabs-toggle[value="characteristics"] ~ div.sheet-characteristics,
.sheet-tabs-toggle[value="gear"] ~ div.sheet-gear,
.sheet-tabs-toggle[value="skills"] ~ div.sheet-skills,
.sheet-tabs-toggle[value="powers"] ~ div.sheet-powers,
.sheet-tabs-toggle[value="complications"] ~ div.sheet-complications,
.sheet-tabs-toggle[value="options"] ~ div.sheet-options {
display: block;
}
/* Bottom border radius based on Tally Bar visibility. */
.sheet-tally-toggle[value="true"] ~ div.sheet-characteristics,
.sheet-tally-toggle[value="true"] ~ div.sheet-skills,
.sheet-tally-toggle[value="true"] ~ div.sheet-powers,
.sheet-tally-toggle[value="true"] ~ div.sheet-complications,
.sheet-tally-toggle[value="true"] ~ div.sheet-gear,
.sheet-tally-toggle[value="true"] ~ div.sheet-options {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.sheet-tally-toggle[value="false"] ~ div.sheet-characteristics,
.sheet-tally-toggle[value="false"] ~ div.sheet-skills,
.sheet-tally-toggle[value="false"] ~ div.sheet-powers,
.sheet-tally-toggle[value="false"] ~ div.sheet-complications,
.sheet-tally-toggle[value="false"] ~ div.sheet-gear,
.sheet-tally-toggle[value="false"] ~ div.sheet-options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/* Styling for characteristics tab labels */
.sheet-characteristics label {
display:inline-block;
font-size: 13px;
}
/* --------------------------------------------------- */
/* Tally Bar styling */
/* --------------------------------------------------- */
.sheet-tally-toggle[value="true"] ~ div.sheet-tallybar {
display: block;
}
.sheet-tally-toggle[value="false"] ~ div.sheet-tallybar {
display: none;
}
.sheet-tallybar {
width: 680px;
background: #2e4a9e;
border: 8px;
border-top: 0px;
border-radius: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-color: #2e4a9e;
border-style: solid;
}
.sheet-flex-tallybar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-evenly;
width: 670px;
height: 25px;
border: 2px solid #6787e7;
border-radius: 0px;
background: royalblue;
margin: 0px;
padding-top: 6px;
padding-left: 3px;
padding-right: 3px;
}
.sheet-flex-tallybar span {
color: white;
}
.sheet-flex-tallybar input[type=number] {
min-width: 42px;
text-align: right;
padding-right: 0px;
margin-bottom: 1px;
}
.sheet-flex-tallybar input[type=number]:hover,
.sheet-flex-tallybar input[type=number]:focus {
padding-right: 0px; /* Keeps some numbers from shifting during mouse hover and click. Both webkit and moz. For some reason. */
}
.sheet-flex-tallybar input[readonly] {
background: #f4ec7a;
padding-right: 0px;
min-width: 38px;
max-width: 42px;
text-align: center;
}
/* Tally Method */
.tally-net,
.tally-spent {
display: none;
}
.tally-method[value="net"] ~ div.tally-net {
display: block;
position: relative;
}
.tally-method[value="spent"] ~ div.tally-spent {
display: block;
position: relative;
}
/* --------------------------------------------------- */
/* Characteristics Tab styling */
/* --------------------------------------------------- */
.grid-container-tab-characteristics {
display: grid;
grid-template-areas: "leftGrid rightGrid";
grid-template-columns: 335px 335px;
max-width: 676px;
height: 803px;
font-size: 16px;
grid-gap: 5px;
background-color: royalblue;
border: 2px solid #6787e7;
border-radius: 0px;
margin-bottom: 0px;
}
.grid-container-tab-characteristics input[readonly]{
background: #f4ec7a;
}
/* Vehicle versus Standard Sheet Display */
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-earnings,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-primary-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-combat-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-movement-abilities,
.sheet-health-display[value="standard"] ~ div.item-characteristics-health:nth-child(3),
.sheet-health-display[value="standard"] ~ div.item-gear-health:nth-child(9),
.sheet-health-display[value="standard"] ~ div.item-powers-health:nth-child(3),
.sheet-health-display[value="vehicle"] ~ div.item-characteristics-health:nth-child(4),
.sheet-health-display[value="vehicle"] ~ div.item-gear-health:nth-child(10),
.sheet-health-display[value="vehicle"] ~ div.item-powers-health:nth-child(4),
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-size-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-primary-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-systems-draw,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-systems,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-propulsion-systems {
display: flex;
}
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-earnings,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-primary-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-combat-attributes,
.sheet-attributes[value="vehicle"] ~ div.item-characteristics-attributes .item-characteristics-movement-abilities,
.sheet-health-display[value="vehicle"] ~ div.item-characteristics-health:nth-child(3),
.sheet-health-display[value="vehicle"] ~ div.item-gear-health:nth-child(9),
.sheet-health-display[value="vehicle"] ~ div.item-powers-health:nth-child(3),
.sheet-health-display[value="standard"] ~ div.item-characteristics-health:nth-child(4),
.sheet-health-display[value="standard"] ~ div.item-gear-health:nth-child(10),
.sheet-health-display[value="standard"] ~ div.item-powers-health:nth-child(4),
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-size-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-primary-attributes,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-draw,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-power-systems,
.sheet-attributes[value="standard"] ~ div.item-characteristics-attributes .item-characteristics-vehicle-propulsion-systems {
display: none;
}
/* characteristics tab left side */
.grid-container-characteristics-leftGrid {
grid-area: leftGrid;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 5px;
}
.grid-container-characteristics-leftGrid h1 {
padding-left: 0px;
padding-top: 5px;
padding-bottom: 0px;
margin: 0px;
font-size: 13px;
font-style: normal;
line-height: 1.40;
min-width: 54px;
}
.grid-container-characteristics-leftGrid h2 {
height: 20px;
line-height: 1.6;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 2px;
font-size: 13px;
font-style: normal;
}
.item-characteristics-bio {
max-width: 330px;
height: 156px;
margin-bottom: 4px;
align-items: left;
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/HeroSystemGraphic.png?raw=true");
}
.item-characteristics-bio .item-name input[type=text] {
font-family: Helvetica, Arial, sans-serif;
background: transparent;
font-size: 32px;
font-weight: 400;
text-align: left;
margin-left: 7px;
margin-top: 17px;
margin-bottom: 0px;
width: 217px;
color: #eef7fc;
line-height: 1.0;
&:focus {
background-color: #6787e7;
outline: none;
}
&:hover {
color: white;
}
&::placeholder {
color: white;
opacity: 0.25;
}
}
.item-characteristics-bio .item-title input[type=text] {
font-family: Helvetica, Arial, sans-serif;
background: transparent;
font-size: 22px;
text-align: left;
margin-left: 8px;
margin-top: -1px;
width: 216px;
color: #d9e1f9;
line-height: 1.0;
&:focus {
background-color: #6787e7;
outline: none;
}
&:hover {
color: white;
}
&::placeholder {
color: white;
opacity: 0.25;
}
}
.item-characteristics-bio textarea {
width: 215px;
max-height: 72px;
padding: 0px;
margin-top: 8px;
margin-left: 9px;
border: none;
text-align: left;
background: transparent;
color: #d9e1f9;
font-size: 15px;
overflow: hidden;
line-height: 1.1;
&:focus {
background-color: #6787e7;
outline: none;
}
&:hover {
color: white;
}
&::placeholder {
color: white;
opacity: 0.25;
}
}
.item-earnings,
.item-characteristics-vehicle-size-attributes,
.item-characteristics-vehicle-power-draw {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
margin-top: 2px;
margin-left: 6px;
max-height: 27px;
min-height: 27px;
padding-top: 1px;
min-width: 313px;
background: #c6d2f6;
border: solid 1px #8da5ed;
border-bottom: solid 2px #8da5ed;
border-radius: 3px;
}
.item-earnings {
padding-left: 5px;
padding-right: 4px;
margin-bottom: 6px;
}
.item-characteristics-vehicle-size-attributes {
padding-left: 0px;
padding-right: 0px;
margin-bottom: 6px;
}
.item-characteristics-vehicle-power-draw {
margin-bottom: 1px;
}
.item-earnings h1,
.item-earnings input[type=text] {
font-size: 13px;
line-height: 1em;
text-align: left;
font-weight: bold;
background: transparent;
padding: 0px;
margin: 0px;
color: black;
}
.item-earnings input[type=text] {
max-width: 104px;
min-width: 104px;
text-align: right;
margin-left: 4px;
&:focus {
background-color: #d9e1f9;
outline: none;
}
&:hover {
color: white;
}
}
.item-earnings input[type=number] {
padding: 0px;
font-size: 14px;
line-height: 1em;
text-align: center;
color: black;
text-align: right;
background: transparent;
&:focus {
background-color: #d9e1f9;
outline: none;
}
&:hover {
background-color: #f9f4b3;
}
}
.item-earnings input[type=number]:nth-child(2) {
max-width: 52px;
min-width: 52px;
}
.item-earnings input[type=number]:nth-child(4) {
max-width: 68px;
min-width: 68px;
}
/* Characteristic block */
.item-characteristics-attributes {
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 330px;
height: 634px;
}
/* Vehicle Size Block */
.item-characteristics-size-attributes-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
min-width: 318px;}
.item-characteristics-size-attributes-row input[readonly] {
padding-right: 0px;
border: none;
background: transparent;
&:focus {
outline: none;
}
}
.item-characteristics-size-attributes-row input[readonly]:nth-child(2) {
max-width: 48px;
}
.item-characteristics-size-attributes-row input[readonly]:nth-child(4) {
max-width: 48px;
}
.item-characteristics-size-attributes-row input[readonly]:nth-child(6) {
max-width: 26px;
}
.item-characteristics-size-attributes-row input[readonly]:nth-child(8) {
max-width: 26px;
}
/* Item: core abilities */
.item-characteristics-primary-attributes,
.item-characteristics-vehicle-primary-attributes {
display: flex;
justify-content: space-between;
flex-direction: column;
min-width: 300px;
margin-left: 6px;
background-color: #f4ec7a;
border: solid 1px #ebb232;
border-bottom: solid 2px #ebb232;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-bottom: 6px;
}
.item-characteristics-primary-attributes {
min-height: 168px;
max-height: 168px;
}
.item-characteristics-vehicle-primary-attributes {
min-height: 237px;
max-height: 237px;
margin-bottom: 3px;
}
.item-characteristics-primary-attributes input[readonly],
.item-characteristics-combat-attributes input[readonly],
.item-characteristics-movement-abilities input[readonly],
.item-characteristics-vehicle-primary-attributes input[readonly],
.item-characteristics-vehicle-movement-abilities input[readonly] {
text-align: center;
padding-right: 0px;
border: none;
max-width: 26px;
&:focus {
outline: none;
}
}
.item-characteristics-primary-attributes input[type=number],
.item-characteristics-combat-attributes input[type=number],
.item-characteristics-movement-abilities input[type=number],
.item-characteristics-vehicle-primary-attributes input[type=number],
.item-characteristics-vehicle-movement-abilities input[type=number] {
text-align: right;
padding-right: 0px;
margin-left: 0px;
border: solid 1px transparent;
margin-right: 0px;
max-width: 44px;
background: transparent;
&:focus {
background-color: #f9f4b3;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.item-characteristics-primary-attributes-heading,
.item-characteristics-primary-attributes-row,
.item-characteristics-combat-attributes-heading,
.item-characteristics-combat-attributes-row,
.item-characteristics-movement-abilities-heading,
.item-characteristics-movement-abilities-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
min-width: 285px;
}
.item-characteristics-primary-attributes-heading,
.item-characteristics-combat-attributes-heading,
.item-characteristics-movement-abilities-heading {
border-top: solid 1px #ebb232;
background-color: #f0c566;
border-bottom: solid 1px #ebb232;
max-height: 22px;
padding-left: 0px;
padding-right: 4px;
}
.item-characteristics-primary-attributes-row,
.item-characteristics-combat-attributes-row,
.item-characteristics-movement-abilities-row {
max-height: 20px;
padding-left: 5px;
padding-right: 4px;
}
.item-characteristics-primary-attributes-heading h2 {
margin-bottom: 0px;
}
.item-characteristics-primary-attributes-heading h2:nth-child(1),
.item-characteristics-combat-attributes-heading h2:nth-child(1),
.item-characteristics-movement-abilities-heading h2:nth-child(1) {
width: 108px;
}
.item-characteristics-primary-attributes-heading h2:nth-child(2),
.item-characteristics-combat-attributes-heading h2:nth-child(2),
.item-characteristics-movement-abilities-heading h2:nth-child(2) {
width: 18px;
}
.item-characteristics-primary-attributes-heading h2:nth-child(3),
.item-characteristics-combat-attributes-heading h2:nth-child(3),
.item-characteristics-movement-abilities-heading h2:nth-child(3) {
text-align: center;
width: 40px;
}
.item-characteristics-primary-attributes-heading h2:nth-child(4),
.item-characteristics-primary-attributes-heading h2:nth-child(5),
.item-characteristics-combat-attributes-heading h2:nth-child(4),
.item-characteristics-combat-attributes-heading h2:nth-child(5),
.item-characteristics-movement-abilities-heading h2:nth-child(4),
.item-characteristics-movement-abilities-heading h2:nth-child(5) {
width: 35px;
text-align: center;
}
.item-characteristics-primary-attributes-heading h2:nth-child(6),
.item-characteristics-combat-attributes-heading h2:nth-child(6),
.item-characteristics-movement-abilities-heading h2:nth-child(6) {
width: 25px;
text-align: center;
}
.item-characteristics-primary-attributes-row input[type=text]:nth-child(1),
.item-characteristics-combat-attributes-row input[type=text]:nth-child(1),
.item-characteristics-movement-abilities-row input[type=text]:nth-child(1) {
min-width: 29px;
font-size: 16px;
text-align: center;
font-weight: 500;
color: white;
background-color: #7c7c7c;
}
.item-characteristics-primary-attributes-row h2:nth-child(2),
.item-characteristics-combat-attributes-row h2:nth-child(2),
.item-characteristics-movement-abilities-row h2:nth-child(2) {
width: 100px;
text-align: left;
}
.item-characteristics-vehicle-primary-attributes .item-characteristics-primary-attributes-row:nth-child(2) h2:nth-child(4),
.item-characteristics-vehicle-primary-attributes .item-characteristics-primary-attributes-row:nth-child(2) h2:nth-child(5) {
width: 35px;
}
/* Item: combat abilities */
.item-characteristics-combat-attributes {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 300px;
min-height: 297px;
max-height: 297px;
margin-left: 6px;
background-color: #f4ec7a;
border: solid 1px #ebb232;
border-bottom: none;
border-top: none;
padding-bottom: 6px;
}
.item-characteristics-combat-attributes-heading,
.item-characteristics-movement-abilities-heading {
padding-bottom: 1px;
}
.item-characteristics-combat-attributes-row h2:nth-child(5) {
width: 32px;
}
/* Item: combat movement abilities */
.item-characteristics-movement-abilities {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 300px;
margin-left: 6px;
margin-bottom: 1px;
padding-bottom: 6px;
background-color: #f4ec7a;
border: solid 1px #ebb232;
border-top: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.item-characteristics-movement-abilities {
min-height: 98px;
max-height: 98px;
}
.item-characteristics-movement-abilities-row input[type=text]:nth-child(5) {
margin-left: 6px;
margin-right: 5px;
}
/* Item: vehicle propulsion systems */
.item-characteristics-vehicle-power-systems,
.item-characteristics-vehicle-propulsion-systems {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 324px;
margin-left: 6px;
margin-bottom: 3px;
padding: 0px;
background-color: transparent;
}
.item-characteristics-vehicle-power-systems {
min-height: 116px;
max-height: 116px;
}
.item-characteristics-vehicle-propulsion-systems {
min-height: 157px;
max-height: 157px;
}
.item-characteristics-power-system,
.item-characteristics-propulsion-system {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.item-characteristics-power-system input[type=text],
.item-characteristics-propulsion-system input[type=text] {
font-size: 13px;
max-width: 148px;
text-align: center;
background-color: transparent;
color: white;
font-weight: bold;
margin-top: 2px;
&::placeholder {
opacity: 1;
color: white;
}
&:focus::placeholder {
color: transparent;
}
}
.item-characteristics-propulsion-system-essentials,
.item-characteristics-propulsion-system-more {
flex-direction: column;
justify-content: space-between;
max-width: 146px;
min-height: 68px;
}
.item-characteristics-power-system-block,
.item-characteristics-propulsion-system-block {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2px;
padding-bottom: 3px;
gap: 2px;
min-width: 153px;
}
.item-characteristics-power-system-block {
background-color: #c6d2f6;
border: solid 1px #8da5ed;
border-bottom: solid 2px #8da5ed;
min-height: 85px;
max-height: 85px;
}
.item-characteristics-propulsion-system-block {
background-color: #f4ec7a;
border: solid 1px #ebb232;
border-bottom: solid 2px #ebb232;
min-height: 126px;
max-height: 126px;
}
.item-characteristics-power-system-row,
.item-characteristics-propulsion-system-row {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: transparent;
align-items: baseline;
padding-left: 3px;
padding-right: 1px;
gap: 6px;
width: 148px;
min-height: 20px;
max-height: 20px;
}
.item-characteristics-power-system-row input[type=number],
.item-characteristics-propulsion-system-row input[type=number] {
text-align: right;
font-weight: normal;
margin: 0px;
margin-bottom: 2px;
margin-left: 1px;
padding: 0px;
max-width: 43px;
border: none;
background-color: transparent;
}
.item-characteristics-power-system-row h2,
.item-characteristics-propulsion-system-row h2 {
margin: 0px;
font-size: 13px;
text-align: left;
}
.item-characteristics-power-system-row input[readonly],
.item-characteristics-propulsion-system-row input[readonly] {
text-align: center;
padding-right: 0px;
border: none;
width: 26px;
color: #1b1b1b;
background-color: transparent;
&:focus {
outline: none;
}
}
.item-characteristics-propulsion-system-row input[type=text]:first-child {
min-width: 29px;
font-size: 16px;
text-align: center;
font-weight: 500;
color: white;
background-color: #7c7c7c;
}
.item-characteristics-system-heading {
display: grid;
align-items: baseline;
min-height: 20px;
max-height: 20px;
}
.subitem-characterstics-system-heading-deletebox,
.subitem-characterstics-system-heading-text {
grid-column: 1;
grid-row: 1;
}
.item-characteristics-propulsion-system-row .container-checkbox-small {
top: -13px;
left: 0px;
padding: 0px;
margin: 0px;
}
/* System subitems */
.subitem-characteristics-system-cost {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
max-width: 50px;
}
.subitem-characteristics-system-cost h2 {
font-size: 13px;
font-weight: bold;
}
.subitem-characteristics-system-cost input[type=text] {
font-size: 13px;
font-weight: bold;
}
.subitem-characteristics-system-value {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
min-width: 71px;
}
.item-characteristics-power-system-row .custom-select-alternate {
top: -1px;
padding-left: 3px;
padding-bottom: 3px;
margin: 0px;
max-height: 17px;
text-align-last: center;
}
.item-characteristics-power-system-row .custom-select-alternate {
width: 40px;
border: solid 1px #8da5ed;
}
.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:first-child {
padding-top: 1px;
}
.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:nth-child(2) {
padding-bottom: 2px;
}
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(4) .custom-select-propulsion,
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion {
min-width: 40px;
}
.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row .custom-select-propulsion {
min-width: 90px;
}
.item-characteristics-propulsion-system-more .item-characteristics-propulsion-system-row:nth-child(3) .custom-select-propulsion {
min-width: 70px;
}
.item-characteristics-power-system-block textarea,
.item-characteristics-propulsion-system-block textarea {
width: 148px;
padding: 2px;
margin-top: 4px;
border: none;
text-align: left;
background: transparent;
color: #373737;
font-size: 13px;
overflow: hidden;
line-height: 1.2;
}
.item-characteristics-power-system-block textarea {
min-height: 30px;
}
.item-characteristics-propulsion-system-block textarea {
min-height: 46px;
}
.item-characteristics-power-system-block textarea {
&:focus {
background-color: #d9e1f9;
outline: none;
}
&:hover {
background-color: #d9e1f9;
}
&::placeholder {
opacity: 0.25;
}
}
.item-characteristics-propulsion-system-block textarea {
&:focus {
background-color: #f7f1a0;
outline: none;
}
&:hover {
background-color: #f7f1a0;
}
&::placeholder {
opacity: 0.5;
}
}
/* Propulsion Mode Movement Values */
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(3),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(4),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(5),
.item-characteristics-propulsion-system-essentials .item-characteristics-propulsion-system-row:nth-child(6) {
display: none;
}
.primary-propulsion-details[value="standard"] ~ div.item-characteristics-propulsion-system-row:nth-child(3),
.primary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(4),
.primary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(5),
.primary-propulsion-details[value="teleport"] ~ div.item-characteristics-propulsion-system-row:nth-child(6),
.secondary-propulsion-details[value="standard"] ~ div.item-characteristics-propulsion-system-row:nth-child(3),
.secondary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(4),
.secondary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(5),
.secondary-propulsion-details[value="teleport"] ~ div.item-characteristics-propulsion-system-row:nth-child(6) {
display: flex;
}
.primary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.primary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.secondary-propulsion-details[value="ftl"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion,
.secondary-propulsion-details[value="extra"] ~ div.item-characteristics-propulsion-system-row:nth-child(7) .custom-select-propulsion {
display: none;
}
/* Show additional modifiers for propulsion systems */
.show-primary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-essentials,
.show-primary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-more,
.show-secondary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-essentials,
.show-secondary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-more {
display: flex;
}
.show-primary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-essentials,
.show-primary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-more,
.show-secondary-propulsion[value="more"] ~ div.item-characteristics-propulsion-system-essentials,
.show-secondary-propulsion[value="essentials"] ~ div.item-characteristics-propulsion-system-more {
display: none;
}
/* characteristics tab right side */
.grid-container-characteristics-rightGrid {
grid-area: rightGrid;
display: grid;
grid-template-areas:
"portrait health"
"turnSegmentIndicators turnTracker"
"perception perception"
"history history";
grid-template-columns: 264px 68px;
grid-template-rows: 260px 24px 102px 419px;
background: royalblue;
max-height: 800px;
max-width: 328px;
}
/* Item: character portrait graphic */
.item-characteristics-portrait {
grid-area: portrait;
position: relative;
max-width: 252px;
padding: 0px;
height: 250px;
margin: 3px;
margin-left: 2px;
margin-top: 4px;
background-color: #5478e4;
}
.item-characteristics-portrait textarea {
width: 242px;
margin-left: 0px;
margin-right: 5px;
margin-bottom: 4px;
background-color: #c6d2f6;
height: 242px;
font-size: 14px;
border-radius: 0px;
}
.item-characteristics-portrait img {
width: 100%;
height: auto;
margin-left: 0px;
border-right: solid #959595 1px;
border-bottom: solid #959595 1px;
border-left: solid #adadad 1px;
border-top: solid #adadad 1px;
color: white;
}
.item-characteristics-portrait img:not([src]) {
font-size: 0;
position: relative;
top: 0%;
left: 0%;
}
.item-characteristics-portrait img:not([src]):after {
content: attr(alt);
position: absolute;
top: 92px;
left: 0%;
width: 248px;
height: 25px;
font-size: 16px;
text-align: center;
}
.item-characteristics-portrait .button-left-arrow,
.item-characteristics-portrait .button-right-arrow {
position: absolute;
transform: translate(-50%, -50%);
color: transparent;
background-color: transparent;
font-size: 16px;
padding: 12px 12px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.item-characteristics-portrait .button-left-arrow {
top: 50%;
left: 8%;
}
.item-characteristics-portrait .button-right-arrow {
top: 50%;
left: 92.3%;
}
.item-characteristics-portrait .button-right-arrow:hover,
.item-characteristics-portrait .button-left-arrow:hover {
background-color: #F0E442;
border: solid 1px #E69F00;
}
/* By deafult, hides all portrait images. Add more numbered entries to add more images, notes, or cards. */
.item-portrait-00,
.item-portrait-01,
.item-portrait-02 {
display: none;
}
/* show the selected portrait frame. Add more numbered entries to add more images, notes, or cards. */
.item-portrait-slideshow[value="0"] ~ div.item-portrait-00,
.item-portrait-slideshow[value="1"] ~ div.item-portrait-01,
.item-portrait-slideshow[value="2"] ~ div.item-portrait-02 {
display: block;
position: relative;
}
/* Alternate styling for rule cards instead of portraits */
.item-portrait-00 {
background-color: white;
border: solid 1px #8A8A8A;
height: 250px;
width: 249px;
margin-left: 1px;
}
.item-portrait-00 h1 {
font-size: 16px;
color: white;
text-align: center;
padding-left: 0px;
background-color: crimson;
}
.item-portrait-flex-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-height: 240px;
padding: 0px;
}
.item-portrait-rule-description {
max-width: 250px;
margin: 0px;
padding: 0px;
line-height: 1.0;
}
.item-portrait-rule-description h1 {
font-size: 16px;
color: firebrick;
text-align: center;
padding-left: 4px;
background-color: inherit;
line-height: 1.4;
padding-bottom: 0px;
}
.item-portrait-rule-description p {
font-size: 13px;
padding: 4px;
margin: 0px;
text-align: left;
line-height: 1.2;
}
/* Item: health status */
/* Item: gear tab health status */
/* Sheet worker used to synchronizes the contents of each */
.item-characteristics-health,
.item-gear-health {
padding: 0px;
width: 68px;
background: royalblue;
border: white;
margin-top: 4px;
margin-right: 2px;
height: 250px;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item-characteristics-health {
grid-area: health;
}
.item-gear-health {
grid-area: gearHealth;
}
.item-gear-health h2,
.item-characteristics-health h2,
.item-powers-health h2 {
color: white;
background-color: inherit;
text-align: center;
font-size: 17px;
line-height: 1.0em;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
.item-health-stat {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 63px;
height: 30px;
border-radius: 3px;
align-items: center;
padding: 0px;
margin-right: 1px;
margin-bottom: 2px;
background-color: #F0E442;
border: solid 1px #ebb232;
}
.item-health-stat-enclosure {
padding: none;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 57px;
}
.item-health-stat-plus-minus-enclosure {
display: flex;
flex-direction: column;
justify-content: center;
max-height: 20px;
width: 20px;
align-items: center;
padding: 1px;
}
.item-health-stat input[type=text] {
max-width: 45px;
height: 30px;
font-size: 20px;
background-color: #F0E442;
}
.item-health-stat input[type=text]:focus{
outline: transparent;
}
.item-health-stat button.buttonPlus,
.item-health-stat button.buttonMinus {
background-color: LemonChiffon;
border: solid 1px slategray;
color: slategray;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
display: inline-block;
font-size: 16px;
margin: 0px 0px;
line-height: 1.4ch;
border-radius: 0px;
}
.item-health-stat button.buttonPlus span,
.item-health-stat button.buttonMinus span {
display: inline-block;
transform: rotate(-90deg);
text-align: center;
}
.item-health-stat button.buttonPlus:hover,
.item-health-stat button.buttonMinus:hover {
background-color: gray;
color: white;
transition: 0.05s;
}
.item-health-selection-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 3px;
}
/* Maneuver modifier line */
.item-maneuver-button-line h2 {
font-size: 14px;
max-height: 20px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
line-height: 1.0em;
}
.item-maneuver-modifier {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 48px;
height: 20px;
align-items: center;
background-color: white;
border: solid 1px #359bff;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.item-maneuver-modifier input[type=text]{
max-width: 17px;
height: 18px;
font-size: 14px;
margin: 0px;
background-color: transparent;
text-align: right;
}
.item-maneuver-modifier input[type=text]:focus{
outline: transparent;
}
.item-maneuver-modifier input[readonly] {
max-width: 16px;
margin-top: 2px;
margin-bottom: 1px;
margin-right: 1px;
height: 18px;
font-size: 8px;
background-color: transparent;
}
/* Item: Turn Tracker Button Space */
.item-characteristics-turn-tracker {
grid-area: turnTracker;
width: 64px;
height: 22px;
padding: 0px;
padding-left: 2px;
}
/* Item: character history */
.item-characteristics-history {
grid-area: history;
text-align: left;
padding: 2px;
max-width: 343px;
background-color: inherit;
margin-right: 6px;
max-height: 399px;
margin-bottom: 6px;
}
.item-characteristics-history textarea {
width: 316px;
height: 100%;
border: solid 1px #c4c4c4;
}
/* Item: Speed Phase Indicator Buttons */
.item-characteristics-speedIndicatorButtons {
grid-area: speedIndicatorButtons;
padding-left: 2px;
padding-top: 1px;
padding-bottom: 1px;
background-color: royalblue;
width: 264px;
margin: 0px;
}
/* Item: Perception */
.item-characteristics-perception {
grid-area: perception;
max-width: 326px;
background-color: inherit;
max-height: 95px;
margin-left: 2px;
border: transparent;
margin-top: 0px;
}
.item-characteristics-perception h1 {
font-size: 13px;
line-height: 1.6;
text-align: left;
background-color: royalblue;
color: white;
}
.subitem-characteristics-perception-row-container {
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 2px;
}
.subitem-characteristics-perception-stat-container {
display: flex;
justify-content: space-between;
flex-direction: column;
background-color: inherit;
padding-left: 0px;
align-items: center;
}
.subitem-characteristics-perception-stat-container input[type=text] {
font-size: 13px;
max-width: 65px;
text-align: center;
background-color: transparent;
color: white;
font-weight: bold;
margin-top: 2px;
&::placeholder {
opacity: 1;
color: white;
}
&:focus::placeholder {
color: transparent;
}
}
.subitem-characteristics-perception-column-container-first,
.subitem-characteristics-perception-column-container {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 1px;
padding-bottom: 3px;
align-items: center;
background: #c6d2f6;
border: solid 1px #8da5ed;
border-bottom: solid 2px #8da5ed;
border-radius: 2px;
}
.subitem-characteristics-perception-column-container-first {
width: 72px;
}
.subitem-characteristics-perception-column-container {
width: 60px;
}
.item-characteristics-perception input[type=number] {
text-align: right;
font-weight: bold;
margin: 0px;
margin-bottom: 2px;
margin-left: 2px;
padding: 0px;
max-width: 36px;
background-color: white;
border: solid 1px #8da5ed;
}
.subitem-characteristics-perception-column-container-first input[type=text],
.subitem-characteristics-perception-column-container input[type=text] {
font-size: 13px;
font-weight: bold;
text-align: center;
padding: 0px;
margin: 0px;
margin-bottom: 2px;
max-width: 20px;
color: black;
background-color: #c6d2f6;
}
/* --------------------------------------------------- */
/* Options Tab */
/* --------------------------------------------------- */
.grid-container-tab-options {
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: 16px;
background-color: royalblue;
border: 2px solid #6787e7;
border-radius: 0px;
margin-bottom: 0px;
min-height: 802px;
min-width: 676px;
}
.grid-container-tab-options h1 {
font-size: 14px;
margin: 0px;
color: black;
font-weight: 400;
}
.grid-container-tab-options h2 {
font-size: 18px;
text-align: center;
font-weight: 400;
color: black;
}
.grid-container-tab-options label {
max-width: 12px;
padding: 8px;
}
.item-options-title {
width: 450px;
height: 26px;
margin-left: 0px;
align-items: bottom;
margin-bottom: 2px;
maring-left: -6px;
}
/* Sub-Item: options */
.item-options {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 15px;
width: 450px;
margin: 0px;
margin-left: 110px;
margin-bottom: 20px;
background-color: #f7f1a0;
border: solid 2px #f0c566;
border-radius: 3px;
}
.item-options-row{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
min-width: 400px;
max-height: 28px;
}
.item-options-row {
margin-left: 12px;
}
.item-options-row input[type=text]{
max-width: 22px;
max-height: 22px;
font-size: 15px;
color: black;
border: 1px solid #f0c566;
margin-right: 7px;
margin-left: -1px;
}
/* Thematic breaks */
.item-thematic-break {
display: block;
border: 0px;
height: 26px;
width: auto;
margin-left: -2px;
margin-top: 10px;
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/ThematicBreak.png?raw=true");
background-position: center;
background-repeat: no-repeat;
}
.item-thematic-break-alt {
display: block;
border: 0px;
height: 26px;
width: auto;
margin-left: -2px;
margin-top: 10px;
background-image: url("https://github.com/Roll20/roll20-character-sheets/blob/master/HeroSystem6eHeroic/images/ThematicBreakAlt.png?raw=true");
background-position: center;
background-repeat: no-repeat;
}
/* --------------------------------------------------- */
/* Version Info */
/* --------------------------------------------------- */
.item-version-row {
display: flex;
justify-content: flex-end;
align-items: baseline;
margin-right: 3px;
}
.item-version-label h2 {
font-size: 13px;
color: #a0b4f0;
height: 20px;
}
.item-version-information input[readonly] {
background-color: transparent;
color: #a0b4f0;
max-width: 35px;
height: 20px;
margin-bottom: 1px;
}
/* --------------------------------------------------- */
/* Custom buttons */
/* --------------------------------------------------- */
.button {
border: none;
color: white;
text-decoration: none;
display: inline-block;
cursor: pointer;
transition-duration: 0.2s;
text-align: center;
}
.buttonRecover,
.buttonReset,
.buttonTracker {
padding: 0px;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 1px;
align-content: center;
vertical-align: middle;
font-size: 13px;
font-weight: bold;
text-align: center;
border-radius: 2px;
}
.buttonRecover {
background-color: #19a781;
max-width: 61px;
min-width: 61px;
margin-bottom: 1px;
}
.buttonReset {
background-color: #E69F00;
max-width: 61px;
min-width: 61px;
}
.buttonTracker {
background-color: #90A8EE;
max-width: 51px;
min-width: 51px;
}
.buttonRollPower,
.button-Power-END,
.button-system-more {
padding-top: 2px;
padding-bottom: 3px;
padding-right: 2px;
padding-left: 2px;
min-width: 34px;
max-width: 35px;
min-height: 16px;
max-height: 16px;
text-align: middle;
font-weight: bold;
border-radius: 2.5px;
margin-right: 0px;
}
.buttonRoll,
.buttonRollAttack,
.buttonRollActivate,
.buttonRollNormalAttack,
.buttonShow,
.buttonManeuverEND,
.buttonRollPowerArmor {
padding-left: 3px;
padding-right: 3px;
text-align: center;
line-height: 13px;
padding-top: 2px;
padding-bottom: 2px;
font-weight: bold;
max-height: 16px;
min-height: 16px;
}
.buttonRoll,
.buttonRollAttack,
.buttonRollActivate {
min-width: 25px;
max-width: 26px;
}
.buttonRollPower {
min-width: 32px;
max-width: 34px;
}
.buttonRollPowerArmor {
min-width: 48px;
max-width: 50px;
background-color: #90A8EE;
border-radius: 2px;
}
.button:hover,
.buttonRecover:hover,
.buttonReset:hover,
.buttonRoll:hover,
.buttonRollAttack:hover,
.buttonRollActivate:hover,
.buttonRollNormalAttack:hover,
.buttonShow:hover,
.buttonRollPower:hover,
.buttonRollPowerArmor:hover,
.button-system-more:hover {
color: black;
background-color: #d0d0d0;
text-align: center;
}
.button-Power-END:hover,
.buttonManeuverEND:hover {
background-color: #ff9900;
color: black;
}
.buttonRoll {
margin-right: 3px;
margin-left: 3px;
background-color: #E69F00;
border-radius: 2px;
}
.buttonRollAttack {
background-color: #D55E00;
border-radius: 2px;
}
.item-talent-heading .buttonShow,
.item-complication-heading .buttonShow,
.item-flex-maneuver .buttonRollAttack,
.item-flex-maneuver .buttonShow,
.item-flex-maneuver .buttonManeuverEND {
margin-right: 3px;
margin-left: 3px;
border-radius: 3px;
min-width: 36px;
max-width: 38px;
}
.item-flex-maneuver .buttonRollAttack {
margin-left: 61px;
}
/* Change attack button color indicate a weapon block or other defensive action. */
.weapon-type01[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="defense"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="defense"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
background-color: #4ba6ff;
}
/* Change attack button color indicate a weapon-assisted maneuver like disarm. */
.weapon-type01[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="maneuver"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="maneuver"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
background-color: #E69F00;
}
/* Change attack button color to indicate weapon normal damage. */
.weapon-type01[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="normal"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="normal"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
background-color: #009E73;
}
/* Change attack button color to indicate weapon does power damage. */
.weapon-type01[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
.weapon-type02[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
.weapon-type03[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
.weapon-type04[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
.weapon-type05[value="power"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover),
.weapon-type06[value="power"] ~ .buttonRollAttack[name="act_attackWeapon06"]:not(:hover)
{
background-color: #CC79A7;
}
/* Change attack button color to indicate standard maneuver override. Gray with no hover changes. */
.weapon-type01[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"],
.weapon-type02[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"],
.weapon-type03[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"],
.weapon-type04[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"],
.weapon-type05[value="override"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"],
.weapon-type06[value="override"] ~ .buttonRollAttack[name="act_attackWeapon06"]
{
background-color: #d0d0d0;
color: white;
cursor: default;
}
/* Martial maneuver button color default indicates killing. */
.item-martial-maneuver-button-line .buttonManeuver {
background-color: #D55E00;
}
.item-martial-maneuver-button-line .buttonManeuver:hover {
background-color: #dbdbdb;
color: black;
}
/* Change maneuver attack button color to indicate normal damage. */
.maneuver-type01[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="normal"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
background-color: #009E73;
}
/* Change maneuver attack button color to indicate a non-damaging defensive action. */
.maneuver-type01[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="defense"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
background-color: #4ba6ff;
}
/* Change maneuver attack button color to indicate a dodge action. */
.maneuver-type01[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="dodge"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
background-color: #0072B2;
}
/* Change maneuver attack button color to indicate a some other action such as a disarm. */
.maneuver-type01[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"]:not(:hover),
.maneuver-type02[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"]:not(:hover),
.maneuver-type03[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"]:not(:hover),
.maneuver-type04[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"]:not(:hover),
.maneuver-type05[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"]:not(:hover),
.maneuver-type06[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"]:not(:hover),
.maneuver-type07[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"]:not(:hover),
.maneuver-type08[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"]:not(:hover),
.maneuver-type09[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"]:not(:hover),
.maneuver-type10[value="maneuver"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]:not(:hover)
{
background-color: #E69F00;
}
/* Change maneuver attack button color to indicate weapon override. Gray with no hover changes. */
.maneuver-type01[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack01"],
.maneuver-type02[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack02"],
.maneuver-type03[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack03"],
.maneuver-type04[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack04"],
.maneuver-type05[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack05"],
.maneuver-type06[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack06"],
.maneuver-type07[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack07"],
.maneuver-type08[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack08"],
.maneuver-type09[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack09"],
.maneuver-type10[value="override"] ~ .item-martial-maneuver-button-line .buttonManeuver[name="act_maneuverAttack10"]
{
background-color: #d0d0d0;
color: white;
cursor: default;
}
.buttonRollActivate {
margin-right: 3px;
margin-left: 3px;
background-color: #0072B2;
border-radius: 2px;
}
.buttonRollNormalAttack,
.buttonManeuverEND,
.buttonShow {
margin-right: 3px;
margin-left: 3px;
border-radius: 2px;
min-width: 34px;
max-width: 36px;
}
.buttonRollNormalAttack {
margin-left: 61px;
background-color: #D55E00;
}
.button-Power-END {
background-color: #8A8A8A;
font-weight: bold;
}
.button-system-more {
background-color: #f2cf7f;
font-weight: bold;
border-radius: 0px;
}
.buttonShow,
.buttonManeuverEND {
background-color: #8A8A8A;
}
.item-power-block-heading-container .buttonShow {
background-color: #4ba6ff;
&:hover {
background-color: #bcdeff;
}
}
.buttonRollPower {
background-color: #CC79A7;
}
.buttonSetDamage {
background-color: #f3f3f3;
color: black;
min-width: 66px;
max-width: 68px;
height: 18px;
border: solid 1px #F0E442;
border-radius: 2px;
padding: 0px;
&:hover {
background-color: #bcdeff;
}
}
.buttonSetDefense {
background-color: #f3f3f3;
color: black;
min-width: 148px;
max-width: 150px;
height: 18px;
border: solid 1px #F0E442;
border-radius: 2px;
padding: 0px;
&:hover {
background-color: #bcdeff;
}
}
.buttonManeuver,
.buttonDefense,
.buttonAttackStrength {
color: white;
font-weight: bold;
border-radius: 2px;
width: 70px;
max-height: 22px;
}
.buttonManeuver {
background-color: #E69F00;
}
.buttonDefense {
background-color: #0072B2;
}
.buttonAttackStrength {
background-color: #009E73;
}
.buttonOK {
color: white;
font-weight: bold;
background-color: #E69F00;
border-radius: 2px;
border: solid 1px #b87f00;
max-height: 19px;
width: 45px;
padding: 0px;
}
/* Hide the hidden button */
.hiddenButton {
max-width: 1px;
max-height: 1px;
background-color: transparent;
color: transparent;
pointer-events: none;
}
.hiddenButton:hover {
background-color: transparent;
color: transparent;
}
/* Custom Expand Button */
.expand-button {
margin-right: 3px;
width: 14px;
height: 12px;
line-height: 1.0em;
position: relative;
top: 2px;
}
.expand-button:hover .expand-icon {
background-color: #f2cf7f;
}
.expand-button:hover .expandButton {
background-color: white;
}
.expandButton {
padding: 0px;
background-color: #f2cf7f;
width: 12px;
height: 10px;
border: solid 1px #f2cf7f;
position: relative;
top: -5px;
}
.expand-icon {
height: 6px;
width: 7px;
position: relative;
top: -2px;
background-color: white;
}
/* --------------------------------------------------- */
/* Custom Checkbox used for options */
/* From w3 schools */
/* --------------------------------------------------- */
/* Customize the label (the container) */
.container-checkbox {
display: inline-block;
position: relative;
padding-top: 2px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: transparent;
}
/* Hide the browser's default checkbox */
.container-checkbox input,
.container-checkbox-small input,
.container-checkbox-small-light input,
.container-checkbox-small-dark input,
.container-checkbox-tiny input,
.container-checkbox-tiny-light input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #f2cf7f;
}
/* On mouse-over, add background color */
.container-checkbox:hover input ~ .checkmark,
.container-checkbox-small:hover input ~ .checkmark-small,
.container-checkbox-tiny:hover input ~ .checkmark-tiny {
background-color: #edbb4c;
border: solid 1px #E69F00;
}
.container-checkbox-small-light:hover input ~ .checkmark-small-light,
.container-checkbox-small-dark:hover input ~ .checkmark-small-dark,
.container-checkbox-tiny-light:hover input ~ .checkmark-tiny-light {
background-color: #4ba6ff;
border: solid 1px #359bff;
}
/* When the checkbox is checked, add a gold background */
.container-checkbox input:checked ~ .checkmark,
.container-checkbox-small input:checked ~ .checkmark-small,
.container-checkbox-tiny input:checked ~ .checkmark-tiny {
background-color: #f0c566;
}
.container-checkbox-small-light input:checked ~ .checkmark-small-light,
.container-checkbox-tiny-light input:checked ~ .checkmark-tiny-light {
background-color: #8fc8ff;
}
.container-checkbox-small-dark input:checked ~ .checkmark-small-dark {
background-color: #4ba6ff;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after,
.checkmark-small:after,
.checkmark-tiny:after {
content: "";
position: absolute;
display: none;
border: solid 1px #E69F00;
}
.checkmark-small-light:after,
.checkmark-tiny-light:after {
content: "";
position: absolute;
display: none;
border: solid 1px #4ba6ff;
}
.checkmark-small-dark:after {
content: "";
position: absolute;
display: none;
border: solid 1px #4ba6ff;
}
/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after,
.container-checkbox-small input:checked ~ .checkmark-small:after,
.container-checkbox-small-light input:checked ~ .checkmark-small-light:after,
.container-checkbox-small-dark input:checked ~ .checkmark-small-dark:after,
.container-checkbox-tiny input:checked ~ .checkmark-tiny:after,
.container-checkbox-tiny-light input:checked ~ .checkmark-tiny-light:after {
display: block;
}
/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
left: 7px;
top: 2px;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* --------------------------------------------------- */
/* Custom Checkbox (small) used for skill enhancers */
/* From w3 schools */
/* --------------------------------------------------- */
/* Customize the label (the container) */
.container-checkbox-small,
.container-checkbox-small-light,
.container-checkbox-small-dark,
.container-checkbox-tiny,
.container-checkbox-tiny-light {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container-checkbox-small,
.container-checkbox-small-light,
.container-checkbox-small-dark {
padding-left: 20px;
padding-top: 0px;
max-height: 15px;
max-width: 15px;
}
.container-checkbox-tiny,
.container-checkbox-tiny-light {
padding: 0px;
margin: 0px;
max-height: 11px;
max-width: 11px;
}
/* Create a custom checkbox */
.checkmark-small,
.checkmark-small-light,
.checkmark-small-dark,
.checkmark-tiny,
.checkmark-tiny-light {
position: absolute;
left: 0px;
margin: 0px;
padding: 0px;
left: 0px;
}
.checkmark-small,
.checkmark-small-light,
.checkmark-small-dark {
height: 15px;
width: 15px;
}
.checkmark-tiny-light,
.checkmark-tiny {
height: 11px;
width: 11px;
}
.checkmark-small,
.checkmark-tiny {
background-color: #f2cf7f;
}
.checkmark-small-light,
.checkmark-tiny-light {
background-color: #8fc8ff;
}
.checkmark-small-dark {
background-color: #62b1ff;
}
/* Style the checkmark/indicator */
.container-checkbox-small .checkmark-small:after,
.container-checkbox-small-light .checkmark-small-light:after {
left: 4px;
top: 2px;
width: 4px;
height: 7px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container-checkbox-small-dark .checkmark-small-dark:after {
left: 4px;
top: 2px;
width: 4px;
height: 7px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container-checkbox-tiny .checkmark-tiny:after {
left: 3px;
top: 1px;
width: 2px;
height: 5px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container-checkbox-tiny-light .checkmark-tiny-light:after {
left: 3px;
top: 1px;
width: 2px;
height: 5px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.subitem-flex-container-martial-cv-damage-row {
margin-bottom: 14px;
padding: 0px;
}
/* Increase space for paragraph description */
.container-checkbox-small-dark ~ p {
margin-left: 20px;
line-height: 1.1;
}
/* Other adjustments to check boxes */
.item-maneuver-block-stats-half-row .container-checkbox-small-light {
padding-left: 10px;
margin-left: 3px;
margin-top: -5px;
}
.subitem-tab-gear-flex-container-shield-heading .container-checkbox-tiny {
top: 0px;
left: 0px;
}
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-small {
padding-left: 10px;
padding-right: 6px;
margin-left: 7px;
padding-bottom: 8px;
}
.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
margin-top: 3px;
padding-right: 0px;
}
.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light {
margin-top: 4px;
padding-right: 0px;
}
.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny,
.subitem-tab-gear-flex-container-shield-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny,
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny {
padding-right: 0px;
}
/* --------------------------------------------------- */
/* Custom Checkboxes used for turn segment indicators */
/* Modification of custom checkbox above */
/* --------------------------------------------------- */
.grid-container-container-turn-segments {
grid-area: turnSegmentIndicators;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: top;
justify-content: space-evenly;
width: 255px;
height: 24px;
background: royalblue;
padding: 0px;
padding-left: 2px;
margin-top: 3px;
}
.grid-container-container-turn-segments label {
display: inline;
pointer-events: none;
font-style: normal;
}
/* Custom checkbox indicator */
.container-speed-indicator {
display: inline-block;
position: relative;
padding-left: 5px;
margin-bottom: 0px;
cursor: pointer;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container-speed-indicator input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Custom checkbox */
.checkmark01,
.checkmark02,
.checkmark03,
.checkmark04,
.checkmark05,
.checkmark06,
.checkmark07,
.checkmark08,
.checkmark09,
.checkmark10,
.checkmark11,
.checkmark12 {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 19px;
background-color: #6787e7;
border: none;
border-radius: 2px;
pointer-events: none;
}
/* Custom segment indicator checkbox: Status */
.container-speed-indicator input:checked ~ .checkmark01,
.container-speed-indicator input:checked ~ .checkmark02,
.container-speed-indicator input:checked ~ .checkmark03,
.container-speed-indicator input:checked ~ .checkmark04,
.container-speed-indicator input:checked ~ .checkmark05,
.container-speed-indicator input:checked ~ .checkmark06,
.container-speed-indicator input:checked ~ .checkmark07,
.container-speed-indicator input:checked ~ .checkmark08,
.container-speed-indicator input:checked ~ .checkmark09,
.container-speed-indicator input:checked ~ .checkmark10,
.container-speed-indicator input:checked ~ .checkmark11,
.container-speed-indicator input:checked ~ .checkmark12 {
background-color: hotpink;
border: none;
border-radius: 2px;
}
/* Custom segment indicator checkbox 01. Active/checked. */
.checkmark01:after {
content: "1";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 01. Inactive/not checked. */
.checkmark01:before {
content: "1";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 02. Active/checked. */
.checkmark02:after {
content: "2";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 02. Inactive/not checked. */
.checkmark02:before {
content: "2";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 03. Active/checked. */
.checkmark03:after {
content: "3";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 03. Inactive/not checked. */
.checkmark03:before {
content: "3";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 04. Active/checked. */
.checkmark04:after {
content: "4";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 04. Inactive/not checked. */
.checkmark04:before {
content: "4";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 05. Active/checked. */
.checkmark05:after {
content: "5";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 05. Inactive/not checked. */
.checkmark05:before {
content: "5";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 06. Active/checked. */
.checkmark06:after {
content: "6";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 06. Inactive/not checked. */
.checkmark06:before {
content: "6";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 07. Active/checked. */
.checkmark07:after {
content: "7";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 07. Inactive/not checked. */
.checkmark07:before {
content: "7";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 08. Active/checked. */
.checkmark08:after {
content: "8";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 08. Inactive/not checked. */
.checkmark08:before {
content: "8";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 09. Active/checked. */
.checkmark09:after {
content: "9";
color: white;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 09. Inactive/not checked. */
.checkmark09:before {
content: "9";
color: black;
position: absolute;
padding-left: 6px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 10. Active/checked. */
.checkmark10:after {
content: "10";
color: white;
position: absolute;
padding-left: 2px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 10. Inactive/not checked. */
.checkmark10:before {
content: "10";
color: black;
position: absolute;
padding-left: 2px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 11. Active/checked. */
.checkmark11:after {
content: "11";
color: white;
position: absolute;
padding-left: 3px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 11. Inactive/not checked. */
.checkmark11:before {
content: "11";
color: black;
position: absolute;
padding-left: 3px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 12. Active/checked. */
.checkmark12:after {
content: "12";
color: white;
position: absolute;
padding-left: 2px;
padding-top: 1px;
display: none;
}
/* Custom segment indicator checkbox 12. Inactive/not checked. */
.checkmark12:before {
content: "12";
color: black;
position: absolute;
padding-left: 2px;
padding-top: 1px;
display: none;
}
/* Show the checkmark when checked */
.container-speed-indicator input:checked ~ .checkmark01:after,
.container-speed-indicator input:checked ~ .checkmark02:after,
.container-speed-indicator input:checked ~ .checkmark03:after,
.container-speed-indicator input:checked ~ .checkmark04:after,
.container-speed-indicator input:checked ~ .checkmark05:after,
.container-speed-indicator input:checked ~ .checkmark06:after,
.container-speed-indicator input:checked ~ .checkmark07:after,
.container-speed-indicator input:checked ~ .checkmark08:after,
.container-speed-indicator input:checked ~ .checkmark09:after,
.container-speed-indicator input:checked ~ .checkmark10:after,
.container-speed-indicator input:checked ~ .checkmark11:after,
.container-speed-indicator input:checked ~ .checkmark12:after {
display: block;
}
/* Show the checkmark when checked */
.container-speed-indicator input:not(:checked) ~ .checkmark01:before,
.container-speed-indicator input:not(:checked) ~ .checkmark02:before,
.container-speed-indicator input:not(:checked) ~ .checkmark03:before,
.container-speed-indicator input:not(:checked) ~ .checkmark04:before,
.container-speed-indicator input:not(:checked) ~ .checkmark05:before,
.container-speed-indicator input:not(:checked) ~ .checkmark06:before,
.container-speed-indicator input:not(:checked) ~ .checkmark07:before,
.container-speed-indicator input:not(:checked) ~ .checkmark08:before,
.container-speed-indicator input:not(:checked) ~ .checkmark09:before,
.container-speed-indicator input:not(:checked) ~ .checkmark10:before,
.container-speed-indicator input:not(:checked) ~ .checkmark11:before,
.container-speed-indicator input:not(:checked) ~ .checkmark12:before {
display: block;
}
/* Custom checkboxes or xbox for deletion actions. */
.container-xbox,
.container-xbox-tiny {
display: inline-block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
max-height: 1px;
max-width: 1px;
}
.container-xbox input,
.container-xbox-tiny input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0px;
width: 0px;
}
/* Create a custom checkbox */
.container-xbox .checkmark {
position: absolute;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
background-color: #f2cf7f;
}
.container-xbox-tiny .checkmark {
position: absolute;
margin: 0px;
padding: 0px;
left: 0px;
height: 9px;
width: 9px;
background-color: white;
border: solid 1px #c4c4c4;
}
.subitem-tab-gear-flex-container-armor .container-xbox-tiny .checkmark {
top: 0px;
}
.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny .checkmark {
top: -1px;
}
.subitem-tab-gear-flex-container-equipment .container-xbox-tiny .checkmark {
top: 4px;
}
.subitem-characterstics-system-heading-deletebox .container-xbox-tiny .checkmark {
top: 1px;
}
/* On mouse-over, add warning background color */
.container-xbox:hover input ~ .checkmark {
background-color: #fb3422;
}
.container-xbox-tiny:hover input ~ .checkmark {
background-color: #fb3422;
border: solid 1px #fb3422;
}
/* When the checkbox is checked, add alarming background color */
.container-xbox input:checked ~ .checkmark {
background-color: #fb3422;
}
.container-xbox-tiny input:checked ~ .checkmark {
background-color: #fb3422;
border: solid 1px #fb3422;
}
/* Create the checkmark/indicator (hidden when not checked) */
.container-xbox .checkmark:after,
.container-xbox-tiny .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container-xbox input:checked ~ .checkmark:after,
.container-xbox-tiny input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark cross indicator */
.container-xbox .checkmark:after {
left: 2px;
top: 2px;
width: 16px;
height: 16px;
border: transparent;
background: linear-gradient(
to bottom,
transparent 35%,
white 35%,
white 65%,
transparent 65%
), linear-gradient(
to right,
transparent 35%,
white 35%,
white 65%,
transparent 65%
);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container-xbox-tiny .checkmark:after {
left: -1px;
top: -1px;
width: 11px;
height: 11px;
border: transparent;
background: linear-gradient(
to bottom,
transparent 35%,
white 35%,
white 65%,
transparent 65%
), linear-gradient(
to right,
transparent 35%,
white 35%,
white 65%,
transparent 65%
);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Dummy xbox for heading indicator */
.tiny-xbox-dummy-container {
left: 0px;
max-height: 11px;
min-height: 11px;
max-width: 1px;
min-width: 1px;
display: inline-block;
position: relative;
}
.tiny-xbox-dummy-container {
background-color: #fb3422;
}
.subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container {
top: 5px;
}
.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container,
.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container,
.subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
top: 6px;
}
.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
top: 3px;
}
.subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container {
top: 4px;
left: -116px;
}
.tiny-xbox-dummy {
position: absolute;
margin: 0px;
padding: 0px;
top: 0px;
left: 0px;
height: 11px;
width: 11px;
background: linear-gradient(
to bottom,
transparent 35%,
white 35%,
white 65%,
transparent 65%
), linear-gradient(
to right,
transparent 35%,
white 35%,
white 65%,
transparent 65%
);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* --------------------------------------------------- */
/* Talents, Perks, and Complications */
/* --------------------------------------------------- */
.grid-container-complications-talents {
display: grid;
grid-template-areas:
"talentsTitle talentsTextTitle"
"talents talentsNotes"
"complicationsTitle complicationsTextTitle"
"complications complicationsNotes";
grid-template-columns: 448px 228px;
grid-template-rows: 31px 365px 33px 365px;
align-self: start;
font-size: 16px;
background-color: royalblue;
border: 2px solid #6787e7;
min-height: 803px;
min-width: 676px;
border-radius: 0px;
margin-bottom: 0px;
}
.flex-container-talents-title,
.flex-container-complications-title {
height: 26px;
width: 448px;
padding-top: 4px;
display: flex;
flex-direction: row-reverse;
}
.flex-container-talents-title {
grid-area: talentsTitle;
}
.flex-container-complications-title {
grid-area: complicationsTitle;
}
.flex-container-talents-title h2,
.flex-container-complications-title h2 {
font-size: 18px;
width: 220px;
text-align: center;
font-weight: normal;
color: white;
}
.flex-container-talents-title h2 {
line-height: 1.4;
}
.flex-container-complications-title h2 {
line-height: 1.6;
}
.flex-container-talents-text-title {
grid-area: talentsTextTitle;
display: flex;
flex-direction: row-reverse;
padding-top: 4px;
padding-right: 5px;
}
.flex-container-talents {
grid-area: talents;
display: grid;
grid-template-areas:
"selectors slides";
height: 354px;
width: 430px;
padding: 4px;
padding-left:1px;
margin-left: 6px;
border: 2px solid #f0c566;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background: #f4ec7a; /* Color Block */
}
.flex-container-talents-notes {
grid-area: talentsNotes;
align-items: left;
margin-left: 3px;
margin-right: 6px;
padding: 0px;
max-width: 217px;
height: 362px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: solid 2px #dbdbdb;
background: white;
}
.flex-container-complications {
grid-area: complications;
display: grid;
grid-template-areas:
"selectors slides";
height: 354px;
width: 427px;
padding: 4px;
margin-left: 6px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #a5d3ff;
border: 2px solid #66bbeb;
}
.flex-container-complications-notes {
grid-area: complicationsNotes;
align-items: left;
margin-left: 3px;
margin-right: 6px;
padding: 0px;
max-width: 217px;
height: 362px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: solid 2px #dbdbdb;
background: white;
}
.container-talents-text textarea,
.container-complications-text textarea {
padding: 0px;
margin: 0px;
height: 356px;
width: 209px;
border-radius: 0px;
border: solid 3px transparent;
background: white;
display: block;
}
/* Talent and Complication selectors */
.flex-container-talent-selectors-list,
.flex-container-complication-selectors {
grid-area: selectors;
height: 354px;
margin-left: 0px;
overflow-y: automatic;
overflow-x: hidden;
}
.flex-container-talent-selectors-list {
width: 193px;
}
.flex-container-talent-selectors {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 708px;
transform: rotateY(180deg);
}
.flex-container-complication-selectors {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 190px;
}
.flex-container-talent-selectors button,
.flex-container-complication-selectors button {
height: 16px;
text-align: left;
font-weight: bold;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
padding-left: 4px;
padding-right: 0px;
line-height: 1.1;
}
.flex-container-talents .flex-container-talent-selectors-list .flex-container-talent-selectors button {
border: 1px solid #faf6c6;
background-color: #f9f4b3;
height: 22px;
}
.flex-container-complications .flex-container-complication-selectors button {
border: 1px solid #d2e9ff;
background-color: #bcdeff;
height: 22px;
}
.flex-container-talents .flex-container-talent-selectors-list .flex-container-talent-selectors button:hover {
background-color: #d2e9ff;
}
.flex-container-complications .flex-container-complication-selectors button:hover {
background-color: #faf6c6;
}
/* Talent and Complication slides */
.container-talent-slides,
.container-complication-slides {
grid-area: slides;
}
.container-talent-slides,
.container-complication-slides {
background-color: white;
width: 224px;
margin-right: 4px;
border: 1px solid #bcdeff;
border-left: none;
align-content: center;
padding: 6px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.item-talent-block-heading,
.item-complication-block-heading {
max-height: 60px;
width: 213px;
padding: 6px;
background-color: #4ba6ff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item-talent-block-heading h1,
.item-complication-block-heading h1 {
font-size: 17px;
color: white;
text-align: left;
width: 30px;
}
.item-talent-block-heading input[type=text]:hover,
.item-complication-block-heading input[type=text]:hover {
border: 2px solid #66bbeb;
}
.item-talent-block-heading input[readonly],
.item-complication-block-heading input[readonly] {
text-align: right;
font-size: 17px;
font-weight: bold;
text-align: right;
color: white;
pointer-events: none;
}
.item-talent-block-heading input[type=text],
.item-complication-block-heading input[type=text] {
font-size: 14px;
font-weight: bold;
color: white;
text-align: center;
background: transparent;
width: 92%;
margin: 0px;
padding-bottom: 0px;
height: 25px;
border: 2px solid transparent;
&::placeholder {
color: white;
opacity: 0.4;
}
}
.item-talent-block,
.item-complication-block {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.item-talent-block-stats,
.item-complication-block-stats {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 213px;
}
.item-talent-block-stats {
height: 87px;
}
.item-complication-block-stats {
height: 116px;
}
.item-talent-block-stats h1,
.item-complication-block-stats h1 {
text-align: left;
line-height: 1.2;
font-size: 12px;
margin: 0px;
}
.item-talent-block-stats-row .container-checkbox-small-light,
.item-complication-block-stats-row .container-checkbox-small-light {
padding: 0px;
margin: 0px;
margin-top: 1px;
margin-right: 8px;
padding-right: -5px;
padding-bottom: 16px;
}
.item-complication-block-stats-row .custom-select-alternate {
padding-left: 6px;
text-align-last: center;
}
.item-talent-block-stats-row,
.item-talent-block-stats-half-row,
.item-complication-block-stats-row,
.item-complication-block-stats-half-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 29px;
}
.item-talent-block-stats-row,
.item-complication-block-stats-row {
width: 217px;
padding-left: 4px;
padding-right: 4px;
}
.item-talent-block-stats-half-row:nth-child(1),
.item-complication-block-stats-half-row:nth-child(1) {
width: 75px;
padding-right: 4px;
}
.item-talent-block-stats-half-row:nth-child(2),
.item-complication-block-stats-half-row:nth-child(2) {
width: 120px;
padding-left: 4px;
}
.item-talent-block-stats-row:nth-child(odd),
.item-complication-block-stats-row:nth-child(odd),
.item-talent-block-stats h2:nth-child(odd),
.item-complication-block-stats h2:nth-child(odd) {
background-color: #e9f4ff;
}
.item-talent-block-stats-row:nth-child(3),
.item-complication-block-stats-row:nth-child(4) {
justify-content: space-evenly;
}
.item-talent-block-stats-row input[type=text],
.item-complication-block-stats-row input[type=text] {
text-align: center;
height: 21px;
padding-left: 2px;
padding-right: 4px;
border: solid 1px #bcdeff;
}
.item-talent-block-stats-row:nth-child(1) input[type=text] {
width: 80px;
}
.item-complication-block-stats-row:nth-child(1) input[type=text] {
width: 178px;
}
.item-complication-block-stats-row:nth-child(2) input[type=text] {
width: 80px;
}
.item-talent-block-stats-row input[type=number],
.item-talent-block-stats-half-row input[type=number],
.item-complication-block-stats-row input[type=number],
.item-complication-block-stats-half-row input[type=number] {
text-align: center;
min-width: 48px;
height: 21px;
border: solid 1px #bcdeff;
}
.item-talent-block-text,
.item-complication-block-text {
width: 217px;
background-color: #a5d3ff;
padding: 4px;
}
.item-talent-block-text {
height: 207px;
}
.item-complication-block-text {
height: 178px;
}
.item-talent-block-text textarea,
.item-complication-block-text textarea {
font-size: 13px;
text-align: left;
color: black;
width: 205px;
border: solid 2px transparent;
background: #a5d3ff;
display: block;
margin: 0px;
&::placeholder {
color: black;
opacity: 0.33;
}
}
.item-talent-block-text textarea {
height: 190px;
}
.item-complication-block-text textarea {
height: 161px;
}
.item-talent-block-text textarea:hover,
.item-complication-block-text textarea:hover {
border: solid 2px #d2e9ff;
}
/* Talent and complication slide selection */
.item-talent-slide01,
.item-talent-slide02,
.item-talent-slide03,
.item-talent-slide04,
.item-talent-slide05,
.item-talent-slide06,
.item-talent-slide07,
.item-talent-slide08,
.item-talent-slide09,
.item-talent-slide10,
.item-talent-slide11,
.item-talent-slide12,
.item-talent-slide13,
.item-talent-slide14,
.item-talent-slide15,
.item-talent-slide16,
.item-talent-slide17,
.item-talent-slide18,
.item-talent-slide19,
.item-talent-slide20 {
display: flex;
flex-direction: column;
justify-content: flex-start;
display: none;
}
.item-complication-slide01,
.item-complication-slide02,
.item-complication-slide03,
.item-complication-slide04,
.item-complication-slide05,
.item-complication-slide06,
.item-complication-slide07,
.item-complication-slide08,
.item-complication-slide09,
.item-complication-slide10 {
display: flex;
flex-direction: column;
justify-content: flex-start;
display: none;
}
/* show the selected talent slide */
.item-talent-selection[value="talent01"] ~ div.container-talent-slides .item-talent-slide01,
.item-talent-selection[value="talent02"] ~ div.container-talent-slides .item-talent-slide02,
.item-talent-selection[value="talent03"] ~ div.container-talent-slides .item-talent-slide03,
.item-talent-selection[value="talent04"] ~ div.container-talent-slides .item-talent-slide04,
.item-talent-selection[value="talent05"] ~ div.container-talent-slides .item-talent-slide05,
.item-talent-selection[value="talent06"] ~ div.container-talent-slides .item-talent-slide06,
.item-talent-selection[value="talent07"] ~ div.container-talent-slides .item-talent-slide07,
.item-talent-selection[value="talent08"] ~ div.container-talent-slides .item-talent-slide08,
.item-talent-selection[value="talent09"] ~ div.container-talent-slides .item-talent-slide09,
.item-talent-selection[value="talent10"] ~ div.container-talent-slides .item-talent-slide10,
.item-talent-selection[value="talent11"] ~ div.container-talent-slides .item-talent-slide11,
.item-talent-selection[value="talent12"] ~ div.container-talent-slides .item-talent-slide12,
.item-talent-selection[value="talent13"] ~ div.container-talent-slides .item-talent-slide13,
.item-talent-selection[value="talent14"] ~ div.container-talent-slides .item-talent-slide14,
.item-talent-selection[value="talent15"] ~ div.container-talent-slides .item-talent-slide15,
.item-talent-selection[value="talent16"] ~ div.container-talent-slides .item-talent-slide16,
.item-talent-selection[value="talent17"] ~ div.container-talent-slides .item-talent-slide17,
.item-talent-selection[value="talent18"] ~ div.container-talent-slides .item-talent-slide18,
.item-talent-selection[value="talent19"] ~ div.container-talent-slides .item-talent-slide19,
.item-talent-selection[value="talent20"] ~ div.container-talent-slides .item-talent-slide20 {
display: block;
position: relative;
}
/* Show the selected complication slide */
.item-complication-selection[value="complication01"] ~ div.container-complication-slides .item-complication-slide01,
.item-complication-selection[value="complication02"] ~ div.container-complication-slides .item-complication-slide02,
.item-complication-selection[value="complication03"] ~ div.container-complication-slides .item-complication-slide03,
.item-complication-selection[value="complication04"] ~ div.container-complication-slides .item-complication-slide04,
.item-complication-selection[value="complication05"] ~ div.container-complication-slides .item-complication-slide05,
.item-complication-selection[value="complication06"] ~ div.container-complication-slides .item-complication-slide06,
.item-complication-selection[value="complication07"] ~ div.container-complication-slides .item-complication-slide07,
.item-complication-selection[value="complication08"] ~ div.container-complication-slides .item-complication-slide08,
.item-complication-selection[value="complication09"] ~ div.container-complication-slides .item-complication-slide09,
.item-complication-selection[value="complication10"] ~ div.container-complication-slides .item-complication-slide10 {
display: block;
position: relative;
}
/* Make a selection button appear to be continuous with its slide via color and border */
.item-talent-selection[value="talent01"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent01"]:not(:hover),
.item-talent-selection[value="talent02"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent02"]:not(:hover),
.item-talent-selection[value="talent03"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent03"]:not(:hover),
.item-talent-selection[value="talent04"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent04"]:not(:hover),
.item-talent-selection[value="talent05"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent05"]:not(:hover),
.item-talent-selection[value="talent06"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent06"]:not(:hover),
.item-talent-selection[value="talent07"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent07"]:not(:hover),
.item-talent-selection[value="talent08"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent08"]:not(:hover),
.item-talent-selection[value="talent09"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent09"]:not(:hover),
.item-talent-selection[value="talent10"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent10"]:not(:hover),
.item-talent-selection[value="talent11"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent11"]:not(:hover),
.item-talent-selection[value="talent12"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent12"]:not(:hover),
.item-talent-selection[value="talent13"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent13"]:not(:hover),
.item-talent-selection[value="talent14"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent14"]:not(:hover),
.item-talent-selection[value="talent15"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent15"]:not(:hover),
.item-talent-selection[value="talent16"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent16"]:not(:hover),
.item-talent-selection[value="talent17"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent17"]:not(:hover),
.item-talent-selection[value="talent18"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent18"]:not(:hover),
.item-talent-selection[value="talent19"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent19"]:not(:hover),
.item-talent-selection[value="talent20"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent20"]:not(:hover) {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
.item-complication-selection[value="complication01"] ~ .flex-container-complication-selectors button[name="act_complication01"]:not(:hover),
.item-complication-selection[value="complication02"] ~ .flex-container-complication-selectors button[name="act_complication02"]:not(:hover),
.item-complication-selection[value="complication03"] ~ .flex-container-complication-selectors button[name="act_complication03"]:not(:hover),
.item-complication-selection[value="complication04"] ~ .flex-container-complication-selectors button[name="act_complication04"]:not(:hover),
.item-complication-selection[value="complication05"] ~ .flex-container-complication-selectors button[name="act_complication05"]:not(:hover),
.item-complication-selection[value="complication06"] ~ .flex-container-complication-selectors button[name="act_complication06"]:not(:hover),
.item-complication-selection[value="complication07"] ~ .flex-container-complication-selectors button[name="act_complication07"]:not(:hover),
.item-complication-selection[value="complication08"] ~ .flex-container-complication-selectors button[name="act_complication08"]:not(:hover),
.item-complication-selection[value="complication09"] ~ .flex-container-complication-selectors button[name="act_complication09"]:not(:hover),
.item-complication-selection[value="complication10"] ~ .flex-container-complication-selectors button[name="act_complication10"]:not(:hover) {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
/* Ignore hover styling for selector button of current slide */
.item-talent-selection[value="talent01"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent01"]:hover,
.item-talent-selection[value="talent02"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent02"]:hover,
.item-talent-selection[value="talent03"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent03"]:hover,
.item-talent-selection[value="talent04"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent04"]:hover,
.item-talent-selection[value="talent05"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent05"]:hover,
.item-talent-selection[value="talent06"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent06"]:hover,
.item-talent-selection[value="talent07"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent07"]:hover,
.item-talent-selection[value="talent08"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent08"]:hover,
.item-talent-selection[value="talent09"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent09"]:hover,
.item-talent-selection[value="talent10"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent10"]:hover,
.item-talent-selection[value="talent11"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent11"]:hover,
.item-talent-selection[value="talent12"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent12"]:hover,
.item-talent-selection[value="talent13"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent13"]:hover,
.item-talent-selection[value="talent14"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent14"]:hover,
.item-talent-selection[value="talent15"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent15"]:hover,
.item-talent-selection[value="talent16"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent16"]:hover,
.item-talent-selection[value="talent17"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent17"]:hover,
.item-talent-selection[value="talent18"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent18"]:hover,
.item-talent-selection[value="talent19"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent19"]:hover,
.item-talent-selection[value="talent20"] ~ .flex-container-talent-selectors-list .flex-container-talent-selectors button[name="act_talent20"]:hover {
background-color: white;
border: 1px solid #f9f4b3;
border-right: none;
}
.item-complication-selection[value="complication01"] ~ .flex-container-complication-selectors button[name="act_complication01"]:hover,
.item-complication-selection[value="complication02"] ~ .flex-container-complication-selectors button[name="act_complication02"]:hover,
.item-complication-selection[value="complication03"] ~ .flex-container-complication-selectors button[name="act_complication03"]:hover,
.item-complication-selection[value="complication04"] ~ .flex-container-complication-selectors button[name="act_complication04"]:hover,
.item-complication-selection[value="complication05"] ~ .flex-container-complication-selectors button[name="act_complication05"]:hover,
.item-complication-selection[value="complication06"] ~ .flex-container-complication-selectors button[name="act_complication06"]:hover,
.item-complication-selection[value="complication07"] ~ .flex-container-complication-selectors button[name="act_complication07"]:hover,
.item-complication-selection[value="complication08"] ~ .flex-container-complication-selectors button[name="act_complication08"]:hover,
.item-complication-selection[value="complication09"] ~ .flex-container-complication-selectors button[name="act_complication09"]:hover,
.item-complication-selection[value="complication10"] ~ .flex-container-complication-selectors button[name="act_complication10"]:hover {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
/* ----------------------------------------------------- */
/* Powers */
/* Organized in two columns with different color styles. */
/* ----------------------------------------------------- */
.grid-container-powers {
display: grid;
grid-template-areas:
"combatMods powerHealth"
"upperPowers upperPowers"
"lowerPowers lowerPowers";
grid-gap: 0px 0px;
grid-template-columns: 367px 305px;
grid-template-rows: 78px 361px 361px;
max-width: 676px;
height: 803px;
font-size: 16px;
grid-gap: 0px 0px;
background-color: royalblue;
border: 2px solid #6787e7;
border-radius: 0px;
margin-bottom: 0px;
padding: 0px;
}
.item-powers-combat-mods {
grid-area: combatMods;
padding: 0px;
padding-left: 10px;
padding-top: 7px;
max-width: 345px;
max-height: 56px;
margin: 0px;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item-powers-range-mods {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 4px;
max-height: 22px;
width: 345px;
margin-left: 3px;
}
.item-powers-range-mods h1 {
font-size: 13px;
line-height: 1.2;
color: white;
}
.item-powers-range-mods input[type=number] {
max-width: 38px;
}
.item-powers-range-mods .container-checkbox-small-dark {
padding: 0px;
margin: 0px;
margin-top: 1px;
padding-right: -5px;
padding-bottom: 16px;
}
.item-powers-combat-mods .subitem-tab-gear-slide-flex-container-range-modifiers {
max-width: 338px;
height: 29px;
}
.item-powers-health {
grid-area: powerHealth;
padding-top: 10px;
width: 300px;
height: 56px;
margin: 0px;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.flex-container-upper-powers {
grid-area: upperPowers;
display: grid;
grid-template-areas:
"actions selectors slides";
width: 652px;
height: 344px;
padding: 4px;
margin-left: 6px;
border: 2px solid #f0c566;
border-radius: 3px;
background: #f4ec7a; /* Color Block */
}
.flex-container-lower-powers {
grid-area: lowerPowers;
display: grid;
grid-template-areas:
"actions selectors slides";
width: 652px;
height: 344px;
padding: 4px;
margin-left: 6px;
border: 2px solid #66bbeb;
border-radius: 3px;
background: #a5d3ff;
}
/* Power Actions */
.flex-container-power-actions {
grid-area: actions;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 82px;
padding: 0px;
}
.item-power-action-block {
display: flex;
flex-direction: row;
justify-content: center;
gap: 5px;
width: 82px;
height: 26px;
padding-top: 2px;
}
/* Power Selectors */
.flex-container-power-selectors {
grid-area: selectors;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 152px;
margin-left: 5px;
}
.flex-container-power-selectors button {
height: 16px;
text-align: left;
font-weight: bold;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
padding-left: 4px;
padding-right: 0px;
line-height: 1.1;
}
.flex-container-upper-powers .flex-container-power-selectors button {
border: 1px solid #faf6c6;
background-color: #f9f4b3;
}
.flex-container-lower-powers .flex-container-power-selectors button {
border: 1px solid #d2e9ff;
background-color: #bcdeff;
}
.flex-container-power-selectors button {
height: 22px;
}
.flex-container-upper-powers .flex-container-power-selectors button:hover {
background-color: #d2e9ff;
}
.flex-container-lower-powers .flex-container-power-selectors button:hover {
background-color: #faf6c6;
}
/* Power slides */
.grid-container-power-slides {
grid-area: slides;
background-color: white;
width: 400px;
margin-right: 4px;
border: 1px solid #bcdeff;
border-left: none;
align-content: center;
padding: 6px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.item-power-slide01,
.item-power-slide02,
.item-power-slide03,
.item-power-slide04,
.item-power-slide05,
.item-power-slide06,
.item-power-slide07,
.item-power-slide08,
.item-power-slide09,
.item-power-slide10,
.item-power-slide11,
.item-power-slide12,
.item-power-slide13,
.item-power-slide14,
.item-power-slide15,
.item-power-slide16,
.item-power-slide17,
.item-power-slide18,
.item-power-slide19,
.item-power-slide20 {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-height: 330px;
}
.item-power-block-heading {
max-height: 30px;
width: 388px;
padding: 6px;
background-color: #4ba6ff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item-power-block-heading h1 {
font-size: 17px;
color: white;
text-align: left;
width: 30px;
}
.item-power-block-heading input[type=text]:hover {
border: 2px solid #66bbeb;
}
.item-power-block-heading input[readonly] {
text-align: right;
font-size: 17px;
font-weight: bold;
text-align: right;
color: white;
pointer-events: none;
}
.item-power-block-heading input[type=text] {
font-size: 17px;
font-weight: bold;
color: white;
text-align: center;
background: transparent;
width: 50%;
margin: 0px;
padding-bottom: 0px;
height: 25px;
border: 2px solid transparent;
&::placeholder {
color: white;
opacity: 0.33;
}
}
.item-power-block-heading-container {
display: flex;
flex-direction: row;
align-items: center;
background-color: transparent;
}
.item-power-block-heading-container:nth-child(1) {
justify-content: flex-start;
width: 78px;
}
.item-power-block-heading-container:nth-child(3) {
justify-content: space-between;
gap: 5px;
padding-right: 3px;
}
.item-power-block {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.item-power-block-stats {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 198px;
min-height: 280px;
}
.item-power-block-stats h1 {
text-align: left;
line-height: 1.2;
font-size: 12px;
margin: 0px;
}
.item-power-block-stats-row .container-checkbox-small-light {
padding: 0px;
margin: 0px;
margin-top: 1px;
padding-right: -5px;
padding-bottom: 16px;
}
.item-powers-range-mods .custom-select-alternate,
.item-power-block-stats-row .custom-select-alternate {
padding-left: 4px;
}
.item-power-block-stats-row:first-child .custom-select-alternate {
width: 87px;
}
.item-power-block-stats-row:nth-child(7) .custom-select-alternate {
width: 104px;
}
.item-power-block-stats-row,
.item-power-block-stats-half-row,
.item-power-block-stats-thirds-row,
.item-power-block-stats-quarter-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 29px;
}
.item-power-block-stats-row {
width: 190px;
padding-left: 4px;
padding-right: 4px;
}
.item-power-block-stats-half-row {
width: 91px;
}
.item-power-block-stats-thirds-row {
width: 65px;
}
.item-power-block-stats-quarter-row {
width: 47px;
}
.item-power-block-stats-row:nth-child(odd),
.item-power-block-stats h2:nth-child(odd) {
background-color: #e9f4ff;
}
.item-power-block-stats-row input[type=text] {
text-align: center;
height: 21px;
padding-left: 2px;
padding-right: 4px;
border: solid 1px #bcdeff;
background: transparent;
}
.item-power-block-stats-row:nth-child(2) input[type=text] {
width: 140px;
}
.item-power-block-stats-row:nth-child(3) input[type=text] {
width: 60px;
}
.item-power-block-stats-row input[type=number],
.item-power-block-stats-half-row input[type=number] {
text-align: center;
min-width: 48px;
height: 21px;
border: solid 1px transparent;
background: transparent;
}
.item-power-block-stats-thirds-row .container-checkbox-small-light {
padding-right: 9px;
}
.item-power-block-stats-row:nth-child(4) input[type=number],
.item-power-block-stats-row:nth-child(5) input[type=number] {
max-width: 38px;
min-width: 38px;
}
.item-power-block-stats input[readonly] {
text-align: center;
font-weight: bold;
width: 30px;
height: 21px;
padding-left: 2px;
padding-bottom: 1px;
padding-right: 4px;
background-color: transparent;
border: 1px solid transparent;
&:focus {
outline: none;
}
}
.item-power-block-text {
width: 194px;
min-height: 280px;
background-color: #a5d3ff;
padding: 4px;
}
.item-power-block-text textarea {
font-size: 13px;
text-align: left;
color: black;
height: 267px;
width: 182px;
border: solid 2px transparent;
background: #a5d3ff;
display: block;
margin: 0px;
&::placeholder {
color: black;
opacity: 0.33;
}
}
.item-power-block-text textarea:hover {
border: solid 2px #d2e9ff;
}
/* Power slide selection display */
/* default slide visibility */
.item-power-slide01,
.item-power-slide02,
.item-power-slide03,
.item-power-slide04,
.item-power-slide05,
.item-power-slide06,
.item-power-slide07,
.item-power-slide08,
.item-power-slide09,
.item-power-slide10,
.item-power-slide11,
.item-power-slide12,
.item-power-slide13,
.item-power-slide14,
.item-power-slide15,
.item-power-slide16,
.item-power-slide17,
.item-power-slide18,
.item-power-slide19,
.item-power-slide20 {
display: none;
}
/* show the selected power slide */
.item-upper-power-selection[value="power01"] ~ div.grid-container-power-slides .item-power-slide01,
.item-upper-power-selection[value="power02"] ~ div.grid-container-power-slides .item-power-slide02,
.item-upper-power-selection[value="power03"] ~ div.grid-container-power-slides .item-power-slide03,
.item-upper-power-selection[value="power04"] ~ div.grid-container-power-slides .item-power-slide04,
.item-upper-power-selection[value="power05"] ~ div.grid-container-power-slides .item-power-slide05,
.item-upper-power-selection[value="power06"] ~ div.grid-container-power-slides .item-power-slide06,
.item-upper-power-selection[value="power07"] ~ div.grid-container-power-slides .item-power-slide07,
.item-upper-power-selection[value="power08"] ~ div.grid-container-power-slides .item-power-slide08,
.item-upper-power-selection[value="power09"] ~ div.grid-container-power-slides .item-power-slide09,
.item-upper-power-selection[value="power10"] ~ div.grid-container-power-slides .item-power-slide10 {
display: block;
position: relative;
}
.item-lower-power-selection[value="power11"] ~ div.grid-container-power-slides .item-power-slide11,
.item-lower-power-selection[value="power12"] ~ div.grid-container-power-slides .item-power-slide12,
.item-lower-power-selection[value="power13"] ~ div.grid-container-power-slides .item-power-slide13,
.item-lower-power-selection[value="power14"] ~ div.grid-container-power-slides .item-power-slide14,
.item-lower-power-selection[value="power15"] ~ div.grid-container-power-slides .item-power-slide15,
.item-lower-power-selection[value="power16"] ~ div.grid-container-power-slides .item-power-slide16,
.item-lower-power-selection[value="power17"] ~ div.grid-container-power-slides .item-power-slide17,
.item-lower-power-selection[value="power18"] ~ div.grid-container-power-slides .item-power-slide18,
.item-lower-power-selection[value="power19"] ~ div.grid-container-power-slides .item-power-slide19,
.item-lower-power-selection[value="power20"] ~ div.grid-container-power-slides .item-power-slide20 {
display: block;
position: relative;
}
/* Make a selection button appear to be continuous with its slide via color and border */
.item-upper-power-selection[value="power01"] ~ .flex-container-power-selectors button[name="act_power01"]:not(:hover),
.item-upper-power-selection[value="power02"] ~ .flex-container-power-selectors button[name="act_power02"]:not(:hover),
.item-upper-power-selection[value="power03"] ~ .flex-container-power-selectors button[name="act_power03"]:not(:hover),
.item-upper-power-selection[value="power04"] ~ .flex-container-power-selectors button[name="act_power04"]:not(:hover),
.item-upper-power-selection[value="power05"] ~ .flex-container-power-selectors button[name="act_power05"]:not(:hover),
.item-upper-power-selection[value="power06"] ~ .flex-container-power-selectors button[name="act_power06"]:not(:hover),
.item-upper-power-selection[value="power07"] ~ .flex-container-power-selectors button[name="act_power07"]:not(:hover),
.item-upper-power-selection[value="power08"] ~ .flex-container-power-selectors button[name="act_power08"]:not(:hover),
.item-upper-power-selection[value="power09"] ~ .flex-container-power-selectors button[name="act_power09"]:not(:hover),
.item-upper-power-selection[value="power10"] ~ .flex-container-power-selectors button[name="act_power10"]:not(:hover) {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
.item-lower-power-selection[value="power11"] ~ .flex-container-power-selectors button[name="act_power11"]:not(:hover),
.item-lower-power-selection[value="power12"] ~ .flex-container-power-selectors button[name="act_power12"]:not(:hover),
.item-lower-power-selection[value="power13"] ~ .flex-container-power-selectors button[name="act_power13"]:not(:hover),
.item-lower-power-selection[value="power14"] ~ .flex-container-power-selectors button[name="act_power14"]:not(:hover),
.item-lower-power-selection[value="power15"] ~ .flex-container-power-selectors button[name="act_power15"]:not(:hover),
.item-lower-power-selection[value="power16"] ~ .flex-container-power-selectors button[name="act_power16"]:not(:hover),
.item-lower-power-selection[value="power17"] ~ .flex-container-power-selectors button[name="act_power17"]:not(:hover),
.item-lower-power-selection[value="power18"] ~ .flex-container-power-selectors button[name="act_power18"]:not(:hover),
.item-lower-power-selection[value="power19"] ~ .flex-container-power-selectors button[name="act_power19"]:not(:hover),
.item-lower-power-selection[value="power20"] ~ .flex-container-power-selectors button[name="act_power20"]:not(:hover) {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
/* Ignore hover styling for selector button of current slide */
.item-upper-power-selection[value="power01"] ~ .flex-container-power-selectors button[name="act_power01"]:hover,
.item-upper-power-selection[value="power02"] ~ .flex-container-power-selectors button[name="act_power02"]:hover,
.item-upper-power-selection[value="power03"] ~ .flex-container-power-selectors button[name="act_power03"]:hover,
.item-upper-power-selection[value="power04"] ~ .flex-container-power-selectors button[name="act_power04"]:hover,
.item-upper-power-selection[value="power05"] ~ .flex-container-power-selectors button[name="act_power05"]:hover,
.item-upper-power-selection[value="power06"] ~ .flex-container-power-selectors button[name="act_power06"]:hover,
.item-upper-power-selection[value="power07"] ~ .flex-container-power-selectors button[name="act_power07"]:hover,
.item-upper-power-selection[value="power08"] ~ .flex-container-power-selectors button[name="act_power08"]:hover,
.item-upper-power-selection[value="power09"] ~ .flex-container-power-selectors button[name="act_power09"]:hover,
.item-upper-power-selection[value="power10"] ~ .flex-container-power-selectors button[name="act_power10"]:hover {
background-color: white;
border: 1px solid #f9f4b3;
border-right: none;
}
.item-lower-power-selection[value="power11"] ~ .flex-container-power-selectors button[name="act_power11"]:hover,
.item-lower-power-selection[value="power12"] ~ .flex-container-power-selectors button[name="act_power12"]:hover,
.item-lower-power-selection[value="power13"] ~ .flex-container-power-selectors button[name="act_power13"]:hover,
.item-lower-power-selection[value="power14"] ~ .flex-container-power-selectors button[name="act_power14"]:hover,
.item-lower-power-selection[value="power15"] ~ .flex-container-power-selectors button[name="act_power15"]:hover,
.item-lower-power-selection[value="power16"] ~ .flex-container-power-selectors button[name="act_power16"]:hover,
.item-lower-power-selection[value="power17"] ~ .flex-container-power-selectors button[name="act_power17"]:hover,
.item-lower-power-selection[value="power18"] ~ .flex-container-power-selectors button[name="act_power18"]:hover,
.item-lower-power-selection[value="power19"] ~ .flex-container-power-selectors button[name="act_power19"]:hover,
.item-lower-power-selection[value="power20"] ~ .flex-container-power-selectors button[name="act_power20"]:hover {
background-color: white;
border: 1px solid #bcdeff;
border-right: none;
}
/* Show Power Roll Buttons */
.item-power-roll01,
.item-power-roll02,
.item-power-roll03,
.item-power-roll04,
.item-power-roll05,
.item-power-roll06,
.item-power-roll07,
.item-power-roll08,
.item-power-roll09,
.item-power-roll10,
.item-power-roll11,
.item-power-roll12,
.item-power-roll13,
.item-power-roll14,
.item-power-roll15,
.item-power-roll16,
.item-power-roll17,
.item-power-roll18,
.item-power-roll19,
.item-power-roll20 {
visibility: hidden;
}
.item-upper-power-action01[value="all"] ~ div.item-power-action-block .item-power-roll01,
.item-upper-power-action02[value="all"] ~ div.item-power-action-block .item-power-roll02,
.item-upper-power-action03[value="all"] ~ div.item-power-action-block .item-power-roll03,
.item-upper-power-action04[value="all"] ~ div.item-power-action-block .item-power-roll04,
.item-upper-power-action05[value="all"] ~ div.item-power-action-block .item-power-roll05,
.item-upper-power-action06[value="all"] ~ div.item-power-action-block .item-power-roll06,
.item-upper-power-action07[value="all"] ~ div.item-power-action-block .item-power-roll07,
.item-upper-power-action08[value="all"] ~ div.item-power-action-block .item-power-roll08,
.item-upper-power-action09[value="all"] ~ div.item-power-action-block .item-power-roll09,
.item-upper-power-action10[value="all"] ~ div.item-power-action-block .item-power-roll10 {
visibility: visible;
}
.item-lower-power-action11[value="all"] ~ div.item-power-action-block .item-power-roll11,
.item-lower-power-action12[value="all"] ~ div.item-power-action-block .item-power-roll12,
.item-lower-power-action13[value="all"] ~ div.item-power-action-block .item-power-roll13,
.item-lower-power-action14[value="all"] ~ div.item-power-action-block .item-power-roll14,
.item-lower-power-action15[value="all"] ~ div.item-power-action-block .item-power-roll15,
.item-lower-power-action16[value="all"] ~ div.item-power-action-block .item-power-roll16,
.item-lower-power-action17[value="all"] ~ div.item-power-action-block .item-power-roll17,
.item-lower-power-action18[value="all"] ~ div.item-power-action-block .item-power-roll18,
.item-lower-power-action19[value="all"] ~ div.item-power-action-block .item-power-roll19,
.item-lower-power-action20[value="all"] ~ div.item-power-action-block .item-power-roll20 {
visibility: visible;
}
.item-upper-power-action01[value="roll"] ~ div.item-power-action-block .item-power-roll01,
.item-upper-power-action02[value="roll"] ~ div.item-power-action-block .item-power-roll02,
.item-upper-power-action03[value="roll"] ~ div.item-power-action-block .item-power-roll03,
.item-upper-power-action04[value="roll"] ~ div.item-power-action-block .item-power-roll04,
.item-upper-power-action05[value="roll"] ~ div.item-power-action-block .item-power-roll05,
.item-upper-power-action06[value="roll"] ~ div.item-power-action-block .item-power-roll06,
.item-upper-power-action07[value="roll"] ~ div.item-power-action-block .item-power-roll07,
.item-upper-power-action08[value="roll"] ~ div.item-power-action-block .item-power-roll08,
.item-upper-power-action09[value="roll"] ~ div.item-power-action-block .item-power-roll09,
.item-upper-power-action10[value="roll"] ~ div.item-power-action-block .item-power-roll10 {
visibility: visible;
}
.item-lower-power-action11[value="roll"] ~ div.item-power-action-block .item-power-roll11,
.item-lower-power-action12[value="roll"] ~ div.item-power-action-block .item-power-roll12,
.item-lower-power-action13[value="roll"] ~ div.item-power-action-block .item-power-roll13,
.item-lower-power-action14[value="roll"] ~ div.item-power-action-block .item-power-roll14,
.item-lower-power-action15[value="roll"] ~ div.item-power-action-block .item-power-roll15,
.item-lower-power-action16[value="roll"] ~ div.item-power-action-block .item-power-roll16,
.item-lower-power-action17[value="roll"] ~ div.item-power-action-block .item-power-roll17,
.item-lower-power-action18[value="roll"] ~ div.item-power-action-block .item-power-roll18,
.item-lower-power-action19[value="roll"] ~ div.item-power-action-block .item-power-roll19,
.item-lower-power-action20[value="roll"] ~ div.item-power-action-block .item-power-roll20 {
visibility: visible;
}
/* Show Power END Buttons */
.item-power-end01,
.item-power-end02,
.item-power-end03,
.item-power-end04,
.item-power-end05,
.item-power-end06,
.item-power-end07,
.item-power-end08,
.item-power-end09,
.item-power-end10,
.item-power-end11,
.item-power-end12,
.item-power-end13,
.item-power-end14,
.item-power-end15,
.item-power-end16,
.item-power-end17,
.item-power-end18,
.item-power-end19,
.item-power-end20 {
visibility: hidden;
}
.item-upper-power-action01[value="all"] ~ div.item-power-action-block .item-power-end01,
.item-upper-power-action02[value="all"] ~ div.item-power-action-block .item-power-end02,
.item-upper-power-action03[value="all"] ~ div.item-power-action-block .item-power-end03,
.item-upper-power-action04[value="all"] ~ div.item-power-action-block .item-power-end04,
.item-upper-power-action05[value="all"] ~ div.item-power-action-block .item-power-end05,
.item-upper-power-action06[value="all"] ~ div.item-power-action-block .item-power-end06,
.item-upper-power-action07[value="all"] ~ div.item-power-action-block .item-power-end07,
.item-upper-power-action08[value="all"] ~ div.item-power-action-block .item-power-end08,
.item-upper-power-action09[value="all"] ~ div.item-power-action-block .item-power-end09,
.item-upper-power-action10[value="all"] ~ div.item-power-action-block .item-power-end10 {
visibility: visible;
}
.item-lower-power-action11[value="all"] ~ div.item-power-action-block .item-power-end11,
.item-lower-power-action12[value="all"] ~ div.item-power-action-block .item-power-end12,
.item-lower-power-action13[value="all"] ~ div.item-power-action-block .item-power-end13,
.item-lower-power-action14[value="all"] ~ div.item-power-action-block .item-power-end14,
.item-lower-power-action15[value="all"] ~ div.item-power-action-block .item-power-end15,
.item-lower-power-action16[value="all"] ~ div.item-power-action-block .item-power-end16,
.item-lower-power-action17[value="all"] ~ div.item-power-action-block .item-power-end17,
.item-lower-power-action18[value="all"] ~ div.item-power-action-block .item-power-end18,
.item-lower-power-action19[value="all"] ~ div.item-power-action-block .item-power-end19,
.item-lower-power-action20[value="all"] ~ div.item-power-action-block .item-power-end20 {
visibility: visible;
}
.item-upper-power-action01[value="end"] ~ div.item-power-action-block .item-power-end01,
.item-upper-power-action02[value="end"] ~ div.item-power-action-block .item-power-end02,
.item-upper-power-action03[value="end"] ~ div.item-power-action-block .item-power-end03,
.item-upper-power-action04[value="end"] ~ div.item-power-action-block .item-power-end04,
.item-upper-power-action05[value="end"] ~ div.item-power-action-block .item-power-end05,
.item-upper-power-action06[value="end"] ~ div.item-power-action-block .item-power-end06,
.item-upper-power-action07[value="end"] ~ div.item-power-action-block .item-power-end07,
.item-upper-power-action08[value="end"] ~ div.item-power-action-block .item-power-end08,
.item-upper-power-action09[value="end"] ~ div.item-power-action-block .item-power-end09,
.item-upper-power-action10[value="end"] ~ div.item-power-action-block .item-power-end10 {
visibility: visible;
}
.item-lower-power-action11[value="end"] ~ div.item-power-action-block .item-power-end11,
.item-lower-power-action12[value="end"] ~ div.item-power-action-block .item-power-end12,
.item-lower-power-action13[value="end"] ~ div.item-power-action-block .item-power-end13,
.item-lower-power-action14[value="end"] ~ div.item-power-action-block .item-power-end14,
.item-lower-power-action15[value="end"] ~ div.item-power-action-block .item-power-end15,
.item-lower-power-action16[value="end"] ~ div.item-power-action-block .item-power-end16,
.item-lower-power-action17[value="end"] ~ div.item-power-action-block .item-power-end17,
.item-lower-power-action18[value="end"] ~ div.item-power-action-block .item-power-end18,
.item-lower-power-action19[value="end"] ~ div.item-power-action-block .item-power-end19,
.item-lower-power-action20[value="end"] ~ div.item-power-action-block .item-power-end20 {
visibility: visible;
}
/* Buttons for maneuver, power, talent, and complication movers. */
.maneuver-mover-plus-minus-enclosure,
.power-mover-plus-minus-enclosure,
.talent-mover-plus-minus-enclosure,
.complication-mover-plus-minus-enclosure {
display: flex;
flex-direction: row;
justify-content: space-between;
max-height: 22px;
max-width: 13px;
}
.maneuver-mover-plus-minus-button,
.power-mover-plus-minus-button,
.talent-mover-plus-minus-button,
.complication-mover-plus-minus-button {
display: flex;
flex-direction: column;
justify-content: center;
height: 22px;
width: 13px;
align-items: center;
padding: 0px;
margin-right: 1px;
}
.maneuver-mover-plus-minus-button button.buttonPlus,
.maneuver-mover-plus-minus-button button.buttonMinus,
.power-mover-plus-minus-button button.buttonPlus,
.power-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonMinus {
display: inline-block;
margin: 0px 0px;
padding: 0px 0px;
border-radius: 0px;
max-height: 9px;
min-height: 9px;
max-width: 13px;
min-width: 13px;
}
.maneuver-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonPlus {
position: absolute;
top: 6px;
}
.maneuver-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonMinus {
position: absolute;
top: 17px;
}
.power-mover-plus-minus-button button.buttonPlus {
position: absolute;
top: 9px;
}
.power-mover-plus-minus-button button.buttonMinus {
position: absolute;
top: 20px;
}
.maneuver-mover-plus-minus-button .upArrow,
.maneuver-mover-plus-minus-button .downArrow,
.power-mover-plus-minus-button .upArrow,
.power-mover-plus-minus-button .downArrow,
.talent-mover-plus-minus-button .upArrow,
.talent-mover-plus-minus-button .downArrow,
.complication-mover-plus-minus-button .upArrow,
.complication-mover-plus-minus-button .downArrow {
position: absolute;
left: 3px;
right: 5px;
height: 5px;
width: 5px;
padding: 0px;
border: solid #62b1ff;
border-width: 0 2px 2px 0;
display: inline-block;
}
.maneuver-mover-plus-minus-button .upArrow,
.power-mover-plus-minus-button .upArrow,
.talent-mover-plus-minus-button .upArrow,
.complication-mover-plus-minus-button .upArrow {
top: 3px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
.maneuver-mover-plus-minus-button .downArrow,
.power-mover-plus-minus-button .downArrow,
.talent-mover-plus-minus-button .downArrow,
.complication-mover-plus-minus-button .downArrow {
top: -1px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.maneuver-mover-plus-minus-button button.buttonPlus,
.maneuver-mover-plus-minus-button button.buttonMinus,
.power-mover-plus-minus-button button.buttonPlus,
.power-mover-plus-minus-button button.buttonMinus,
.talent-mover-plus-minus-button button.buttonPlus,
.talent-mover-plus-minus-button button.buttonMinus,
.complication-mover-plus-minus-button button.buttonPlus,
.complication-mover-plus-minus-button button.buttonMinus {
background-color: white;
border: solid 1px #8fc8ff;
}
.maneuver-mover-plus-minus-button button.buttonPlus:hover,
.maneuver-mover-plus-minus-button button.buttonMinus:hover,
.power-mover-plus-minus-button button.buttonPlus:hover,
.power-mover-plus-minus-button button.buttonMinus:hover,
.talent-mover-plus-minus-button button.buttonPlus:hover,
.talent-mover-plus-minus-button button.buttonMinus:hover,
.complication-mover-plus-minus-button button.buttonPlus:hover,
.complication-mover-plus-minus-button button.buttonMinus:hover {
background-color: #8A8A8A;
transition: 0.05s;
}
.maneuver-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.maneuver-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.power-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.power-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.talent-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.talent-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.complication-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.complication-mover-plus-minus-button button.buttonMinus:hover > .downArrow {
height: 5px;
width: 5px;
padding: 0px;
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
}
/* ----------------------------------------------------- */
/* Skills */
/* Organized into a 2x3 grid of containers */
/* ----------------------------------------------------- */
.grid-container-skills-tab {
display: grid;
grid-template-areas: "generalSkills otherSkills";
grid-gap: 6px;
grid-template-columns: 358px 322px;
grid-template-rows: 783px;
max-width: 692px;
padding: 0px;
padding-left: 0px;
padding-top: 6px;
margin-bottom: 0px;
font-size: 16px;
background-color: #f0c566;
border: 3px solid #6787e7;
border-radius: 0px;
justify-content: middle;
min-height: 795px;
}
.grid-container-skills-tab h1 {
display:inline-block;
margin-left: 0px;
padding-left: 2px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
margin-top: 1px;
font-size: 13px;
font-style: normal;
line-height: 1.10;
text-align: center;
}
.grid-container-skills-tab input[type=text] {
height: 22px;
}
.flex-container-skills-left {
grid-area: "generalSkills";
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 790px;
}
.flex-container-skills-right {
grid-area: "otherSkills";
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 790px;
}
.grid-container-skills-tab .custom-select,
.grid-container-skills-tab .custom-select-skill,
.grid-container-skills-tab .custom-select-alternate {
font-size: 13px;
margin-left: 3px;
padding-left: 3px;
}
/* Item: Skill Containers for Skill Groups */
.item-skillsTab-flex-container-cap,
.item-flex-container-skill-list,
.item-skillsTab-flex-container-base {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 358px;
margin-left: 5px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
line-height: 1.10;
padding-left: 1px;
padding-right: 4px;
}
.item-flex-container-skill-list {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
.item-flex-container-skill-list ul {
flex: 1 0 auto;
}
.item-skillsTab-flex-container-cap {
border-bottom: none;
border-radius: 3px 3px 0px 0px;
padding-top: 5px;
min-height: 19px;
max-height: 19px;
}
.item-flex-container-skill-list {
border-top: none;
border-bottom: none;
max-height: 750px;
}
.item-skillsTab-flex-container-base {
border-top: none;
border-radius: 0px 0px 3px 3px;
display: flex;
flex-direction: row;
justify-content: center;
min-height: 14px;
max-height: 14px;
}
.item-flex-container-skill-list input[type=number] {
text-align: center;
padding-left: 3px;
padding-right: 1px; /* Fix for shifting spinners on focus */
max-width: 36px;
max-height: 22px;
border: transparent;
background: transparent;
&:focus {
background-color: #fcf9d9;;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.item-flex-container-skill-list input[readonly] {
text-align: center;
max-width: 24px;
background-color: transparent;
border: transparent;
&:focus {
outline: none;
}
}
.item-flex-container-skill-list input[type=text]:nth-child(1) {
max-width: 140px;
margin-top: 1px;
margin-bottom: 1px;
font-size: 13px;
text-align: left;
margin-left: 4px;
margin-right: 1px;
padding-left: 2px;
padding-right: 1px;
background: transparent;
border: solid 1px transparent;
}
.item-flex-container-skill-list input[type=text]:nth-child(1):focus {
background-color: #fcf9d9;
outline: none;
}
.item-flex-container-skill-list input[type=text]:nth-child(1):hover {
background-color: #ddf0fa;
}
/* Sub-Item: Flex containers for rows */
.subitem-skillsTab-grid-container-skills-heading-left {
grid-template-areas: "skillName skillType rollChance . skillCost";
grid-template-columns: 164px 70px 30px 22px 58px;
display: grid;
}
.subitem-skillsTab-grid-container-skills-heading-left-name {
grid-area: skillName;
padding-left: 5px;
}
.subitem-skillsTab-grid-container-skills-heading-left-name h2 {
text-align: left;
}
.subitem-skillsTab-grid-container-skills-heading-left-type {
grid-area: skillType;
text-align: center;
}
.subitem-skillsTab-grid-container-skills-heading-left-roll {
grid-area: rollChance;
text-align: center;
}
.subitem-skillsTab-grid-container-skills-heading-left-cost {
grid-area: skillCost;
text-align: center;
}
.subitem-skillsTab-flex-container-skill {
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: 2px;
max-height: 24px;
min-width: 340px;
margin-bottom: 1px;
align-items: center;
}
/* Item: Skill Container for combat skills. */
.item-skillsTab-flex-container-combat-skills {
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 292px;
min-height: 261px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-radius: 3px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 1px;
padding-top: 4px;
}
.combat-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-combat-skills {
min-height: 381px;
}
.combat-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-combat-skills .item-flex-container-combat-skills-extension {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.combat-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-combat-skills {
min-height: 261px;
}
.combat-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-combat-skills .item-flex-container-combat-skills-extension {
display: none;
}
.subitem-skillsTab-flex-container-combat-skill,
.subitem-skillsTab-flex-container-combat-levels {
display: flex;
flex-direction: row;
justify-content: space-between;
min-width: 285px;
align-items: center;
margin-bottom: 2px;
}
.subitem-skillsTab-flex-container-combat-skill:nth-child(n+2),
.subitem-skillsTab-flex-container-combat-levels {
height: 22px;
}
.subitem-skillsTab-flex-container-combat-skill h1{
min-height: 16px;
text-align: center;
}
.subitem-skillsTab-flex-container-combat-skill h1:nth-child(1) {
text-align: left;
min-width: 148px;
}
.subitem-skillsTab-flex-container-combat-skill h1:nth-child(3) {
min-width: 50px;
}
.subitem-skillsTab-flex-container-combat-skill h1:nth-child(5) {
padding-right: 2px;
}
.subitem-skillsTab-flex-container-combat-skill input[type=text]:nth-child(1) {
text-align: left;
padding-left: 2px;
width: 150px;
margin-right: 1px;
background: transparent;
border: solid 1px transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.subitem-skillsTab-flex-container-combat-skill .custom-select {
max-width: 55px;
text-align: center;
height: 19px;
margin-left: 2px;
}
.subitem-skillsTab-flex-container-combat-skill input[type=number],
.subitem-skillsTab-flex-container-combat-levels input[type=number] {
text-align: center;
padding-left: 3px;
padding-right: 1px; /* Fix for shifting spinners on focus */
max-width: 36px;
max-height: 22px;
border: transparent;
background: transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
/* background-color: #faf6c6; */
background-color: #ddf0fa;
}
}
.subitem-skillsTab-flex-container-combat-skill input[type=text]:nth-child(6),
.subitem-skillsTab-flex-container-combat-levels input[readonly] {
text-align: center;
background-color: transparent;
max-width: 24px;
margin: 0px;
margin-left: 2px;
border: transparent;
&:focus {
outline: none;
}
}
.subitem-skillsTab-flex-container-combat-levels h1:nth-child(1) {
text-align: left;
min-width: 226px;
margin-right: 0px;
max-height: 16px;
margin-top: 2px;
}
/* Item: Skill Container for Language Skills */
.item-skillsTab-flex-container-languages {
grid-area: theLanguageSkills;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 292px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-radius: 3px;
padding-left: 4px;
padding-right: 4px;
padding-bottom: 3px;
padding-top: 2px;
}
.language-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-languages {
min-height: 236px;
}
.language-skills-extension[value="true"] ~ div.item-skillsTab-flex-container-languages .item-flex-container-language-block-extension {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.language-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-languages {
min-height: 116px;
}
.language-skills-extension[value="false"] ~ div.item-skillsTab-flex-container-languages .item-flex-container-language-block-extension {
display: none;
}
.subitem-skillsTab-flex-container-language,
.subitem-skillsTab-flex-container-language-heading {
display: flex;
flex-direction: row;
justify-content: space-between;
min-width: 285px;
align-items: center;
margin-bottom: 2px;
}
.subitem-skillsTab-flex-container-language-heading {
height: 16px;
}
.subitem-skillsTab-flex-container-language-heading h1{
min-height: 16px;
text-align: center;
}
.subitem-skillsTab-flex-container-language-heading h1:nth-child(1) {
text-align: left;
width: 149px;
}
.subitem-skillsTab-flex-container-language-heading h1:nth-child(3) {
padding-left: 5px;
min-width: 56px;
}
.subitem-skillsTab-flex-container-language-heading h1:nth-child(4) {
padding-left: 10px;
}
.subitem-skillsTab-flex-container-language-heading h1:nth-child(5) {
margin-right: 2px;
}
.subitem-skillsTab-flex-container-language {
height: 22px;
}
.subitem-skillsTab-flex-container-language input[type=text] {
text-align: left;
padding-left: 2px;
width: 150px;
margin-right: 1px;
background: transparent;
border: solid 1px transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.subitem-skillsTab-flex-container-language input[readonly] {
text-align: center;
background-color: transparent;
border: transparent;
max-width: 24px;
margin-right: 1px;
&:hover {
outline: none;
background: transparent;
}
&:focus {
outline: none;
background: transparent;
}
}
.subitem-skillsTab-flex-container-language .container-checkbox-small {
padding: 0px;
margin: 0px;
margin-top: 1px;
padding-right: -5px;
padding-bottom: 16px;
}
.subitem-skillsTab-flex-container-language .custom-select {
min-width: 63px;
text-align: left;
height: 19px;
margin-right: 6px;
}
/* Item: Skill Container for Skill Enhancers */
.item-skillsTab-flex-container-enhancers {
grid-area: theEnhancers;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 295px;
min-height: 260px;
grid-gap:0px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-radius: 3px;
padding-left: 4px;
padding-right: 1px;
padding-bottom: 3px;
padding-top: 2px;
}
.subitem-skillsTab-flex-container-enhancers-heading,
.subitem-skillsTab-flex-container-enhancers-row,
.subitem-skillsTab-flex-container-levels-row {
display: flex;
flex-direction: row;
justify-content: space-between;
min-width: 280px;
}
.subitem-skillsTab-flex-container-enhancers-heading {
height: 16px;
}
.subitem-skillsTab-flex-container-enhancers-heading h1{
min-height: 16px;
text-align: center;
}
.subitem-skillsTab-flex-container-enhancers-heading h1:nth-child(1) {
text-align: left;
min-width: 60px;
}
.subitem-skillsTab-flex-container-enhancers-heading h1:nth-child(2) {
padding-right: 5px;
}
.subitem-skillsTab-flex-container-enhancers-row,
.subitem-skillsTab-flex-container-levels-row {
height: 19px;
}
.subitem-skillsTab-flex-container-enhancers-row .container-checkbox-small {
padding-right: 3px;
margin-left: 2px;
}
.subitem-skillsTab-flex-container-enhancers-row h1{
max-height: 16px;
text-align: left;
min-width: 241px;
}
.subitem-skillsTab-flex-container-enhancers-row input[readonly],
.subitem-skillsTab-flex-container-levels-row input[readonly] {
text-align: center;
background-color: transparent;
max-width: 24px;
margin-right: 3px;
padding-bottom: 4px;
border: transparent;
&:focus {
outline: none;
}
}
.subitem-skillsTab-flex-container-levels-row h1 {
text-align: left;
min-width: 220px;
}
.subitem-skillsTab-flex-container-levels-row input[type=number] {
text-align: center;
padding-left: 3px;
padding-right: 1px; /* Fix for shifting spinners on focus */
max-width: 45px;
max-height: 22px;
border: transparent;
background: transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
background-color: #faf6c6;
}
}
/* ----------------------------------------------------- */
/* Gear: armor, weapons, and equipment */
/* Organized into a 3x4 grid of containers */
/* ----------------------------------------------------- */
.grid-container-tab-gear {
display: grid;
grid-template-areas:
"theEncumbrance theEncumbrance gearHealth"
"theArmor theArmor gearHealth"
"theShield theShield gearHealth"
"theWeapons theWeapons theWeapons"
"theEquipment theSlides theSlides";
grid-template-columns: 258px 344px 86px;
max-width: 694px;
padding: 0px;
padding-left: 2px;
font-size: 16px;
background-color: royalblue;
border: 2px solid #6787e7;
border-radius: 0px;
justify-content: middle;
min-height: 803px;
}
.shield-expanded[value="true"] ~ div.grid-container-tab-gear {
grid-template-rows: 77px 130px 47px 164px 322px;
}
.shield-expanded[value="false"] ~ div.grid-container-tab-gear {
grid-template-rows: 97px 130px 27px 164px 322px;
}
.grid-container-tab-gear h1 {
display: inline-block;
margin-left: 0px;
padding-left: 2px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
margin-top: 1px;
font-size: 13px;
font-style: normal;
line-height: 1.10;
}
.grid-container-tab-gear .custom-select {
font-size: 13px;
max-width: 110px;
max-height: 19px;
}
/* Health status styling grouped with item-health-characteristics */
.shield-expanded[value="true"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield,
.shield-expanded[value="false"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield-expanded {
display: none;
}
.shield-expanded[value="false"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield,
.shield-expanded[value="true"] ~ div.grid-container-tab-gear .item-tab-gear-grid-container-shield .subitem-tab-gear-flex-container-shield-expanded {
display: flex;
}
/* Encumbrance */
.item-tab-gear-flex-container-encumbrance {
grid-area: theEncumbrance;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 4px;
margin-top: 8px;
padding: 0px;
max-width: 594px;
height: 60px;
padding-right: 10px;
text-align: left;
vertical-align: middle;
border: none;
}
.item-tab-gear-flex-container-encumbrance h1 {
text-align: center;
color: white;
font-size: 13px;
}
.item-tab-gear-flex-container-encumbrance h1:nth-child(2) {
margin-bottom: 2px;
}
.item-tab-gear-flex-container-encumbrance input[type=number],
.item-tab-gear-flex-container-encumbrance input[readonly] {
text-align: center;
max-width: 65px;
background-color: #d2e9ff;
border: solid 2px #8da5ed;
font-size: 16px;
margin-left: 0px;
padding-right: 0px;
min-height: 22px;
}
.subitem-tab-gear-flex-container-encumbrance,
.subitem-tab-gear-flex-container-encumbrance-bonus {
display:flex;
flex-direction: column;
justify-content: space-between;
max-width: 75px;
align-items: center;
}
.subitem-tab-gear-flex-container-encumbrance-bonus {
margin-left: 0px;
}
.subitem-tab-gear-flex-container-cv-status {
display:flex;
flex-direction: column;
justify-content: space-between;
max-width: 55px;
max-height: 62px;
padding-top: 3px;
padding-bottom: 3px;
background-color: transparent;
align-items: center;
}
.cv-status-label-container {
max-width: 34px;
min-width: 34px;
}
.cv-status-label-container h1 {
font-size: 12px;
color: white;
}
.subitem-tab-gear-flex-container-ocv-status,
.subitem-tab-gear-flex-container-dcv-status {
display: flex;
flex-direction: row;
justify-content: space-between;
min-width: 55px;
max-width: 55px;
max-height: 22px;
font-size: 12px;
padding: 0px;
background-color: transparent;
align-items: center;
}
.subitem-tab-gear-flex-container-ocv-status input[readonly],
.subitem-tab-gear-flex-container-dcv-status input[readonly] {
max-width: 22px;
max-height: 15px;
font-size: 13px;
font-weight: bold;
padding: 0px;
background-color: #d2e9ff;
border: solid 2px #8da5ed;
color: black;
}
.subitem-tab-gear-plus-minus-enclosure {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 50px;
max-height: 20px;
background-color: #d2e9ff;
border: solid 2px #8da5ed;
border-radius: 3px;
}
.subitem-tab-gear-plus-minus-enclosure input[type=text] {
max-width: 40px;
height: 20px;
font-size: 16px;
background-color: transparent;
text-align: center;
vertical-align: center;
}
.subitem-tab-gear-plus-minus-enclosure input[type=text]:focus{
outline: transparent;
}
.subitem-tab-gear-flex-container-stat {
display: flex;
flex-direction: column;
justify-content: center;
height: 20px;
width: 10px;
align-items: center;
padding: 0px;
}
.subitem-tab-gear-flex-container-stat button.buttonPlus,
.subitem-tab-gear-flex-container-stat button.buttonMinus {
background-color: LemonChiffon;
border: solid 1px slategray;
color: slategray;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
display: inline-block;
font-size: 10px;
margin: 0px 0px;
line-height: 1.4ch;
border-radius: 0px;
max-width: 10px;
}
.subitem-tab-gear-flex-container-stat button.buttonPlus span,
.subitem-tab-gear-flex-container-stat button.buttonMinus span {
display: inline-block;
transform: rotate(-90deg);
text-align: center;
}
.subitem-tab-gear-flex-container-stat button.buttonPlus:hover,
.subitem-tab-gear-flex-container-stat button.buttonMinus:hover {
background-color: gray;
color: white;
transition: 0.05s;
}
/* ------------- */
/* Item: Armor */
/* ------------- */
.item-tab-gear-grid-container-armor {
grid-area: theArmor;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 585px;
padding-bottom: 4px;
padding-top: 0px;
margin-left: 4px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-bottom: none;
border-radius: 2px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
height: 132px;
}
.subitem-tab-gear-flex-container-armor-heading,
.subitem-tab-gear-flex-container-armor-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
max-width: 575px;
height: 24px;
}
.subitem-tab-gear-flex-container-armor-heading {
padding-left: 2px;
}
.subitem-tab-gear-flex-container-armor-row {
padding-left: 3px;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(3) {
min-width: 43px;
text-align: left;
padding-left: 3px;
}
.subitem-tab-gear-flex-container-armor-heading .set-AtoB-button {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
min-width: 31px;
margin-right: 46px;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(5) {
min-width: 147px;
text-align: center;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(6) {
min-width: 44px;
text-align: left;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(7) {
min-width: 34px;
text-align: left;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(8) {
min-width: 32px;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(9) {
text-align: center;
min-width: 98px;
}
.subitem-tab-gear-flex-container-armor-heading h1:nth-child(10) {
text-align: center;
min-width: 46px;
}
.subitem-tab-gear-flex-container-armor-row input {
max-height: 22px;
background: transparent;
border: transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.subitem-tab-gear-flex-container-armor-row input[type=number] {
text-align: right;
padding-left: 2px;
max-width: 36px;
min-width: 34px;
padding-right: 0px;
margin-right: 0px;
margin-left: 0px;
}
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(4),
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
padding-left: 2px;
padding-right: 1px;
margin-right: 0px;
}
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(4) {
text-align: left;
max-width: 122px;
margin-right: 2px;
}
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
text-align: center;
max-width: 100px;
}
.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(10) {
text-align: right;
min-width: 48px;
}
.subitem-tab-gear-flex-container-armor-row select {
text-align-last: center; /* For Chrome */
text-align: center; /* Firefox */
}
/* Display or hide the armor list and set item defense worksheets */
.item-tab-gear-flex-container-armor,
.item-tab-gear-flex-container-set-defense-01,
.item-tab-gear-flex-container-set-defense-02,
.item-tab-gear-flex-container-set-defense-03,
.item-tab-gear-flex-container-set-defense-04 {
display: none;
}
/* Set Armor Defense Worksheets */
.set-defense-toggle[value="0"] ~ div.item-tab-gear-flex-container-armor {
display: block;
padding-left: 2px;
}
.set-defense-toggle[value="01"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-01,
.set-defense-toggle[value="02"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-02,
.set-defense-toggle[value="03"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-03,
.set-defense-toggle[value="04"] ~ div.item-tab-gear-set-defense .item-tab-gear-flex-container-set-defense-04 {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100%;
}
.subitem-tab-gear-flex-container-set-defense-column {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 90%;
margin-bottom: 3%;
border-bottom: solid 2px #ebb232;
}
.subitem-tab-gear-flex-container-set-defense-column:nth-child(1),
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) {
width: 40%;
}
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) {
width: 60%;
}
.subitem-tab-gear-flex-container-set-defense-row {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 23px;
}
.subitem-tab-gear-flex-container-set-defense-column:nth-child(1) .subitem-tab-gear-flex-container-set-defense-row {
padding-right: 5%;
}
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2) .subitem-tab-gear-flex-container-set-defense-row {
padding-left: 2%;
}
.subitem-flash-defense,
.subitem-flash-defense-sense {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.subitem-flash-defense {
width: 57%;
}
.subitem-flash-defense-sense {
width: 33%;
}
/* ------------- */
/* Item: Shield */
/* ------------- */
.item-tab-gear-grid-container-shield {
display: flex;
flex-direction: column;
grid-area: theShield;
width: 598px;
}
.subitem-tab-gear-flex-container-shield {
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-top: none;
border-radius: 2px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
height: 23px;
margin-right: 5px;
padding-left: 2px;
margin-left: 4px;
}
.subitem-tab-gear-flex-container-shield-expanded {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-top: none;
border-radius: 2px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
height: 43px;
margin-right: 5px;
padding-left: 2px;
margin-left: 4px;
grid-gap: 3px;
}
.subitem-tab-gear-flex-container-shield-heading {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
min-height: 38px;
max-height: 38px;
}
.shield-title-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.shield-title-container h1 {
margin-left: 16px;
}
/* ------------- */
/* Item: Weapons */
/* ------------- */
.item-tab-gear-flex-container-weapons,
.item-tab-gear-set-damage {
grid-area: theWeapons;
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 4px;
padding: 0px;
padding-bottom: 1px;
margin-top: 8px;
height: 142px;
background-color: #f6ee8d;
border: solid 2px #ebb232;
border-right: solid 2px #ebb232;
border-radius: 3px;
}
.item-tab-gear-flex-container-weapons {
width: 657px;
padding-left: 3px;
padding-bottom: 1px;
}
.item-tab-gear-set-damage {
width: 660px;
}
.subitem-tab-gear-flex-container-shield-checks {
min-width: 14px;
min-height: 38px;
max-height: 38px;
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-gap: 11px;
margin-left: 2px;
}
.subitem-tab-gear-flex-container-shield-heading:nth-child(3) {
align-items: start;
}
.subitem-tab-gear-flex-container-shield-heading:nth-child(3) h1 {
padding-left: 0px;
}
.subitem-tab-gear-flex-container-weapon-heading,
.subitem-tab-gear-flex-container-weapon-row {
display: flex;
flex-direction: row;
align-items: center;
max-width: 652px;
height: 20px;
}
.subitem-tab-gear-flex-container-weapon-heading {
justify-content: flex-start;
gap: 3px;
padding-left: 1px;
}
.subitem-tab-gear-flex-container-weapon-row {
justify-content: space-between;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(3) {
min-width: 61px;
max-width: 61px;
text-align: left;
padding-left: 4px;
}
.subitem-tab-gear-flex-container-weapon-heading .set-AtoB-button {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
min-width: 31px;
margin-right: 25px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:not(:nth-child(3)) {
text-align: center;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(5) {
min-width: 67px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(6) {
min-width: 42px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(7) {
min-width: 36px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(8) {
min-width: 37px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(9) {
min-width: 41px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(10) {
min-width: 29px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(11) {
min-width: 42px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(12) {
min-width: 48px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(13) {
min-width: 41px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(14) {
min-width: 33px;
}
.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(15) {
min-width: 40px;
}
.item-tab-gear-flex-container-weapons .subitem-tab-gear-flex-container-weapon-row:nth-child(7) {
max-height: 40px;
}
.item-tab-gear-flex-container-weapons .subitem-tab-gear-flex-container-weapon-row:nth-child(n+8) {
max-height: 20px;
}
.subitem-tab-gear-flex-container-shield-heading input,
.subitem-tab-gear-flex-container-weapon-row input {
max-height: 20px;
border: transparent;
background: transparent;
&:focus {
background-color: #fcf9d9;
outline: none;
}
&:hover {
background-color: #ddf0fa;
}
}
.subitem-tab-gear-flex-container-shield-heading label,
.subitem-tab-gear-flex-container-weapon-row label {
max-width: 5px;
margin-left: 2px;
margin-top: 3px;
padding-right: 0px;
}
.subitem-tab-gear-flex-container-shield-heading input[readonly]:focus,
.subitem-tab-gear-flex-container-weapon-row input[readonly]:focus {
outline: none;
}
.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure:nth-child(1) {
margin-right: 1px;
}
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2) {
margin-right: 1px;
}
.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny:nth-child(3) {
margin-right: 8px;
}
.subitem-tab-gear-flex-container-shield-expanded .subitem-tab-gear-flex-container-shield-heading:nth-child(3) input[type=text],
.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(4) {
text-align: left;
padding-left: 0px;
padding-right: 2px;
max-width: 120px;
margin-right: 0px;
}
.weapon-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure {
max-width: 12px;
margin-left: 2px;
}
.subitem-tab-gear-flex-container-shield-heading input[type=number],
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(12) {
text-align: right;
padding-left: 3px;
max-width: 38px;
padding-right: 0px;
}
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(6),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(8),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(12) {
margin-right: 3px;
margin-left: 3px;
}
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(9) {
margin: 0px;
}
.subitem-tab-gear-flex-container-shield-heading:nth-child(13) input[type=number],
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(11),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(14),
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(15) {
text-align: right;
padding-left: 3px;
max-width: 46px;
padding-right: 0px;
margin-right: 0px;
margin-left: 0px;
}
.subitem-tab-gear-flex-container-shield-expanded .subitem-tab-gear-flex-container-shield-heading:nth-child(10) input[readonly],
.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10) {
background-color: inherit;
text-align: center;
padding-left: 0px;
max-width: 30px;
padding-right: 0px;
margin-right: 0px;
margin-left: 0px;
margin-top: 3px;
margin-bottom: 2px;
}
.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10) {
padding-left: 7px;
}
/* Switch weapon sets */
.set-AtoB-button button,
.set-AtoB-button-light button {
color: white;
font-size: 12px;
font-weight: bold;
padding: 0px;
text-align: center;
border: none;
cursor: pointer;
border-radius: 2px;
line-height: 1.4;
}
.set-AtoB-button button,
.set-AtoB-button-light button {
width: 29px;
height: 17px;
}
.set-AtoB-button button {
background-color: #f2cf7f;
:hover {
background-color: #ddf0fa;
border-radius: 2px;
color: black;
}
}
.set-AtoB-button-light button {
background-color: #9aceff;
:hover {
background-color: #fcf9d9;
border-radius: 2px;
color: black;
}
}
/* Show weapons or appropriate Set Damage Dialogs */
.item-tab-gear-flex-container-set-damage-01,
.item-tab-gear-flex-container-set-damage-02,
.item-tab-gear-flex-container-set-damage-03,
.item-tab-gear-flex-container-set-damage-04,
.item-tab-gear-flex-container-set-damage-05,
.item-tab-gear-flex-container-set-damage-06 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.subitem-tab-gear-flex-container-set-defense-column input[type=number],
.subitem-tab-gear-flex-container-set-damage-column input[type=number] {
min-width: 50px;
max-height: 20px;
border: solid 1px #F0E442;
}
.subitem-tab-gear-flex-container-set-defense-column input[type=text],
.subitem-tab-gear-flex-container-set-damage-column input[type=text] {
width: 80px;
max-height: 19px;
}
.subitem-tab-gear-flex-container-set-defense-column input[readonly],
.subitem-tab-gear-flex-container-set-damage-column input[readonly] {
background: transparent;
border: none;
margin-bottom: 1px;
padding: 0px;
max-height: 16px;
}
.subitem-tab-gear-flex-container-set-defense-column input[readonly]:focus,
.subitem-tab-gear-flex-container-set-damage-column input[readonly]:focus {
outline: none;
}
.item-tab-gear-set-defense-title,
.item-tab-gear-set-damage-title {
background-color: #f2cf7f;
padding-bottom: 1px;
margin-bottom: 2px;
}
.item-tab-gear-set-defense-title input[type=text],
.item-tab-gear-set-damage-title input[type=text] {
width: 160px;
text-align: left;
background: transparent;
font-size: 14px;
font-weight: bold;
color: black;
padding-left: 5px;
&:focus {
background-color: #f7e2b2;
outline: none;
}
&:hover {
background-color: #cce8f8;
}
}
.item-tab-gear-set-defense-title h1,
.item-tab-gear-set-damage-title h1 {
margin-left: 5px;
}
.subitem-tab-gear-flex-container-set-damage-column {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 140px;
width: 220px;
padding: 0px;
padding-bottom: 3px;
}
.subitem-tab-gear-flex-container-set-damage-row {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 215px;
margin-right: 5px;
height: 23px;
}
.subitem-tab-gear-flex-container-set-damage-row:nth-child(2) {
margin-top: 1px;
}
.subitem-tab-gear-flex-container-set-defense-row h1,
.subitem-tab-gear-flex-container-set-defense-row h2,
.subitem-tab-gear-flex-container-set-damage-row h1,
.subitem-tab-gear-flex-container-set-damage-row h2 {
max-height: 100%;
text-align: left;
margin-left: 5px;
padding: 0px;
padding-left: 5px;
font-size: 13px;
line-height: 1.2;
}
.subitem-tab-gear-flex-container-set-defense-row h2,
.subitem-tab-gear-flex-container-set-damage-row h2 {
font-weight: normal;
}
.subitem-tab-gear-flex-container-set-damage-row select {
max-height: 18px;
}
.subitem-tab-gear-flex-container-set-damage-row .container-checkbox-small {
margin-top: 2px;
}
.subitem-tab-gear-flex-container-set-damage-row .custom-select-gear {
margin-right: 0px;
}
.subitem-tab-gear-flex-container-set-damage-button {
height: 23px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
/* First column styling */
.subitem-tab-gear-flex-container-set-damage-column:first-child input[type=number] {
margin-right: 15px;
}
.subitem-tab-gear-flex-container-set-damage-column:first-child .custom-select-gear {
width: 55px;
border: solid 1px #f2cf7f;
margin-right: 8px;
}
.subitem-tab-gear-flex-container-set-defense-column:first-child .subitem-tab-gear-flex-container-set-defense-row input,
.subitem-tab-gear-flex-container-set-damage-column:first-child .subitem-tab-gear-flex-container-set-damage-row input {
&:read-only {
border: none;
}
&:not(:read-only) {
border: solid 1px #f2cf7f;
}
}
.subitem-tab-gear-flex-container-set-damage-column:first-child .container-checkbox-small {
padding: 0px;
margin: 0px;
margin-top: 1px;
padding-right: 35px;
}
.subitem-tab-gear-flex-container-set-damage-column:first-child h1,
.subitem-tab-gear-flex-container-set-damage-column:first-child h2 {
width: 110px;
}
/* Other column styling */
.subitem-tab-gear-flex-container-set-defense-column:nth-child(2),
.subitem-tab-gear-flex-container-set-damage-column:nth-child(2) {
background-color: #faf6c6;
}
.subitem-tab-gear-flex-container-set-damage-column:nth-child(3) input[readonly] {
text-align: right;
}
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) h1,
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) h2 {
width: 150px;
}
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) .custom-select-gear {
width: 41px;
border: solid 1px #F0E442;
}
.subitem-tab-gear-flex-container-set-defense-column:not(:first-child) .container-checkbox-small,
.subitem-tab-gear-flex-container-set-damage-column:not(:first-child) .container-checkbox-small {
padding: 0px;
margin: 0px;
margin-top: 1px;
padding-right: 17px;
}
/* Default weapon and set damage window states. */
.set-damage-toggle:not([value="0"]) ~ div.item-tab-gear-flex-container-weapons,
.set-damage-toggle:not([value="01"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-01,
.set-damage-toggle:not([value="02"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-02,
.set-damage-toggle:not([value="03"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-03,
.set-damage-toggle:not([value="04"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-04,
.set-damage-toggle:not([value="05"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-05,
.set-damage-toggle:not([value="06"]) ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-06 {
display: none;
}
/* Show weapons or selected weapon damage dialog. */
.set-damage-toggle[value="0"] ~ div.item-tab-gear-flex-container-weapons,
.set-damage-toggle[value="01"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-01,
.set-damage-toggle[value="02"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-02,
.set-damage-toggle[value="03"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-03,
.set-damage-toggle[value="04"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-04,
.set-damage-toggle[value="05"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-05,
.set-damage-toggle[value="06"] ~ div.item-tab-gear-set-damage .item-tab-gear-flex-container-set-damage-06 {
display: flex;
}
/* --------------- */
/* Item: Equipment */
/* --------------- */
.item-tab-gear-flex-container-equipment {
grid-area: theEquipment;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 234px;
margin-left: 4px;
padding: 4px;
padding-top: 3px;
background-color: #bcdeff;
border: solid 2px #66bbeb;
border-radius: 3px;
height: 368px;
}
.subitem-tab-gear-flex-container-equipment-heading {
display: flex;
flex-direction: row;
justify-content: flex-start;
min-height: 20px;
max-height: 20px;
max-width: 240px;
gap: 4px;
}
.subitem-tab-gear-flex-container-equipment-heading .set-AtoB-button-light {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
min-width: 31px;
margin-right: 52px;
}
.subitem-tab-gear-flex-container-equipment {
display: flex;
flex-direction: row;
justify-content: space-between;
min-height: 20px;
max-height: 20px;
padding-left: 1px;
}
.subitem-tab-gear-flex-container-equipment-heading h1,
.subitem-tab-gear-flex-container-equipment h1 {
margin-bottom: 2px;
}
.subitem-tab-gear-flex-container-equipment-heading h1:nth-child(3) {
min-width: 70px;
}
.subitem-tab-gear-flex-container-equipment-heading h1:nth-child(5) {
min-width: 54px;
text-align: right;
}
.subitem-tab-gear-flex-container-equipment input[type=text] {
text-align: left;
padding-left: 2px;
padding-right: 1px;
max-width: 162px;
max-height: 20px;
margin-right: 0px;
}
/* Close spacing of equipment items means the focus border is clipped unless we move the z position to relative. */
.subitem-tab-gear-flex-container-equipment input[type=text]:focus {
position: relative;
}
.subitem-tab-gear-flex-container-equipment input[type=number] {
text-align: right;
padding-left: 3px;
max-width: 120px;
min-width: 50px;
max-height: 21px;
padding-right: 0px;
margin-right: 0px;
margin-left: 2px;
}
.subitem-tab-gear-flex-container-equipment input {
border: transparent;
background: transparent;
&:focus {
background-color: #e9f4ff;
outline: none;
}
&:hover {
background-color: #faf6c6;
}
}
/* Buttons for armor, weapon, equipment, and skill movers. */
.armor-mover-plus-minus-enclosure,
.weapon-mover-plus-minus-enclosure,
.gear-mover-plus-minus-enclosure,
.skill-mover-plus-minus-enclosure {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.skill-mover-plus-minus-enclosure,
.modifier-plus-minus-enclosure {
position: relative;
max-height: 20px;
max-width: 10px;
}
.armor-mover-plus-minus-button,
.weapon-mover-plus-minus-button,
.gear-mover-plus-minus-button,
.skill-mover-plus-minus-button,
.modifier-plus-minus-button {
display: flex;
flex-direction: column;
justify-content: center;
height: 20px;
width: 10px;
align-items: center;
padding: 0px;
margin-right: 1px;
}
.armor-mover-plus-minus-button button.buttonPlus,
.armor-mover-plus-minus-button button.buttonMinus,
.weapon-mover-plus-minus-button button.buttonPlus,
.weapon-mover-plus-minus-button button.buttonMinus,
.gear-mover-plus-minus-button button.buttonPlus,
.gear-mover-plus-minus-button button.buttonMinus,
.skill-mover-plus-minus-button button.buttonPlus,
.skill-mover-plus-minus-button button.buttonMinus {
display: inline-block;
margin: 0px 0px;
padding: 0px 0px;
border-radius: 0px;
max-height: 8px;
min-height: 8px;
max-width: 12px;
min-width: 12px;
}
.modifier-plus-minus-button button.buttonPlus,
.modifier-plus-minus-button button.buttonMinus {
display: inline-block;
margin: 0px 0px;
padding: 0px 0px;
border-radius: 0px;
max-height: 9px;
min-height: 9px;
max-width: 12px;
min-width: 12px;
}
.skill-mover-plus-minus-button > button.buttonPlus {
position: absolute;
top: 0px;
}
.skill-mover-plus-minus-button button.buttonMinus {
position: absolute;
top: 10px;
}
.armor-mover-plus-minus-button .upArrow,
.armor-mover-plus-minus-button .downArrow,
.weapon-mover-plus-minus-button .upArrow,
.weapon-mover-plus-minus-button .downArrow {
position: absolute;
left: 2px;
height: 4px;
width: 4px;
padding: 0px;
border: solid #b8b8b8;
border-width: 0 2px 2px 0;
display: inline-block;
}
.gear-mover-plus-minus-button .upArrow,
.gear-mover-plus-minus-button .downArrow {
position: absolute;
left: 2px;
height: 4px;
width: 4px;
padding: 0px;
border: solid #8fc8ff;
border-width: 0 2px 2px 0;
display: inline-block;
}
.skill-mover-plus-minus-button .upArrow,
.skill-mover-plus-minus-button .downArrow {
position: absolute;
left: 3px;
right: 4px;
height: 4px;
width: 4px;
padding: 0px;
border: solid #b8b8b8;
border-width: 0 2px 2px 0;
display: inline-block;
}
.modifier-plus-minus-button .upArrow,
.modifier-plus-minus-button .downArrow {
position: absolute;
left: 2px;
height: 4px;
width: 4px;
padding: 0px;
border: solid 1px #359bff;
border-width: 0 2px 2px 0;
display: inline-block;
}
.armor-mover-plus-minus-button .upArrow,
.weapon-mover-plus-minus-button .upArrow,
.gear-mover-plus-minus-button .upArrow,
.modifier-plus-minus-button .upArrow {
top: 3px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
.armor-mover-plus-minus-button .downArrow,
.weapon-mover-plus-minus-button .downArrow,
.gear-mover-plus-minus-button .downArrow,
.modifier-plus-minus-button .downArrow {
top: 11px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.skill-mover-plus-minus-button .upArrow {
top: 2px;
transform: rotate(225deg);
-webkit-transform: rotate(225deg);
}
.skill-mover-plus-minus-button .downArrow {
top: 0px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.armor-mover-plus-minus-button button.buttonPlus,
.armor-mover-plus-minus-button button.buttonMinus,
.weapon-mover-plus-minus-button button.buttonPlus,
.weapon-mover-plus-minus-button button.buttonMinus,
.skill-mover-plus-minus-button button.buttonPlus,
.skill-mover-plus-minus-button button.buttonMinus {
background-color: #fcf9d9;
border: solid 1px #b8b8b8;
}
.gear-mover-plus-minus-button button.buttonPlus,
.gear-mover-plus-minus-button button.buttonMinus {
background-color: white;
border: solid 1px #8fc8ff;
}
.modifier-plus-minus-button button.buttonPlus,
.modifier-plus-minus-button button.buttonMinus {
background-color: #ecf0fc;
border: solid 1px #359bff;
}
.armor-mover-plus-minus-button button.buttonPlus:hover,
.armor-mover-plus-minus-button button.buttonMinus:hover,
.weapon-mover-plus-minus-button button.buttonPlus:hover,
.weapon-mover-plus-minus-button button.buttonMinus:hover,
.gear-mover-plus-minus-button button.buttonPlus:hover,
.gear-mover-plus-minus-button button.buttonMinus:hover,
.skill-mover-plus-minus-button button.buttonPlus:hover,
.skill-mover-plus-minus-button button.buttonMinus:hover,
.modifier-plus-minus-button button.buttonPlus:hover,
.modifier-plus-minus-button button.buttonMinus:hover {
background-color: #8A8A8A;
transition: 0.05s;
}
.armor-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.armor-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.weapon-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.weapon-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.gear-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.gear-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.skill-mover-plus-minus-button button.buttonPlus:hover .upArrow,
.skill-mover-plus-minus-button button.buttonMinus:hover .downArrow,
.modifier-plus-minus-button button.buttonPlus:hover .upArrow,
.modifier-plus-minus-button button.buttonMinus:hover .downArrow {
height: 4px;
width: 4px;
padding: 0px;
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
}
.armor-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.armor-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.weapon-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.weapon-mover-plus-minus-button button.buttonMinus:hover > .downArrow,
.gear-mover-plus-minus-button button.buttonPlus:hover > .upArrow,
.gear-mover-plus-minus-button button.buttonMinus:hover > .downArrow {
left: 2px;
}
/* ---------------------------------- */
/* Sheet line item DELETE check boxes */
/* ---------------------------------- */
/* Show or hide vehicle system checkmarks */
.subitem-characterstics-system-heading-deletebox {
display: none;
}
.vehicle-checks[value="delete"] ~ div.item-characteristics-vehicle-propulsion-systems .item-characteristics-propulsion-system .item-characteristics-system-heading .subitem-characterstics-system-heading-deletebox,
.vehicle-checks[value="delete"] ~ div.item-characteristics-vehicle-power-systems .item-characteristics-power-system .item-characteristics-system-heading .subitem-characterstics-system-heading-deletebox {
display: block;
position: relative;
}
/* Show or hide armor carried checkmarks */
.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny,
.subitem-tab-gear-flex-container-armor-row .armor-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-armor-row .container-xbox-tiny,
.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container {
display: none;
}
.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny {
display: block;
position: relative;
}
.armor-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-armor-row .container-checkbox-tiny {
display: block;
position: relative;
}
.armor-checks[value="move"] ~ div.subitem-tab-gear-flex-container-armor-row .armor-mover-plus-minus-enclosure {
display: block;
position: relative;
}
.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-row .container-xbox-tiny,
.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .tiny-xbox-dummy-container {
display: block;
position: relative;
}
.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .container-checkbox-tiny {
display: none;
}
.armor-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-armor-heading .set-AtoB-button button {
background-color: #d0d0d0;
color: white;
cursor: default;
:hover {
color: white;
background-color: #d0d0d0;
}
:focus {
color: white;
background-color: #d0d0d0;
}
}
/* Show or hide shield ready or delete checkmarks */
.subitem-tab-gear-flex-container-shield-checks .container-checkbox-tiny,
.subitem-tab-gear-flex-container-shield-checks .container-xbox-tiny {
display: none;
top: 0px;
}
.shield-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-shield-checks .container-checkbox-tiny {
display: block;
position: relative;
}
.shield-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-shield-checks .container-xbox-tiny {
display: block;
position: relative;
}
/* Show or hide weapons readied or deletion checkmarks */
.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
max-width: 10px;
align-text: center;
}
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2),
.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny,
.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container {
display: none;
}
.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
display: block;
position: relative;
}
.weapon-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-weapon-row .container-checkbox-tiny:nth-child(2) {
display: block;
position: relative;
max-width: 11px;
padding-bottom: 4px;
}
.weapon-checks[value="move"] ~ div.subitem-tab-gear-flex-container-weapon-row .weapon-mover-plus-minus-enclosure {
display: block;
position: relative;
}
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-row .container-xbox-tiny,
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .tiny-xbox-dummy-container {
display: block;
position: relative;
}
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading h1:nth-child(3),
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(4) {
margin-left: -1px;
}
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .container-checkbox-tiny {
display: none;
}
.weapon-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-weapon-heading .set-AtoB-button button {
background-color: #d0d0d0;
color: white;
cursor: default;
:hover {
color: white;
background-color: #d0d0d0;
}
:focus {
color: white;
background-color: #d0d0d0;
}
}
/* Show or hide equipment carried checkmarks */
.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light,
.subitem-tab-gear-flex-container-equipment .gear-mover-plus-minus-enclosure,
.subitem-tab-gear-flex-container-equipment .container-xbox-tiny,
.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
display: none;
}
.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
display: block;
position: relative;
}
.equipment-checks[value="carry"] ~ div.subitem-tab-gear-flex-container-equipment .container-checkbox-tiny-light {
display: block;
position: relative;
}
.equipment-checks[value="move"] ~ div.subitem-tab-gear-flex-container-equipment .gear-mover-plus-minus-enclosure {
display: block;
position: relative;
}
.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment .container-xbox-tiny,
.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .tiny-xbox-dummy-container {
display: block;
position: relative;
}
.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .container-checkbox-tiny-light {
display: none;
}
.equipment-checks[value="delete"] ~ div.subitem-tab-gear-flex-container-equipment-heading .set-AtoB-button-light button {
background-color: #d0d0d0;
color: white;
cursor: default;
:hover {
color: white;
background-color: #d0d0d0;
}
:focus {
color: white;
background-color: #d0d0d0;
}
}
/* Martial Skill Delete Boxes */
.item-martial-skill-delete-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 33px;
left: 114px;
background: transparent;
width: 14px;
height: 286px;
}
.item-martial-skill-delete-panel {
display: none;
}
.maneuver-checks[value="delete"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers .item-martial-skill-delete-panel {
display: flex;
}
/* Skill delete boxes */
.subitem-skillsTab-flex-container-skill .container-xbox-tiny,
.item-skillsTab-flex-container-combat-skills .container-xbox-tiny,
.subitem-skillsTab-flex-container-language .container-xbox-tiny,
.subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container{
display: none;
}
.subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container,
.subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
opacity: 0;
}
.subitem-skillsTab-flex-container-skill .skill-mover-plus-minus-enclosure,
.item-skillsTab-flex-container-combat-skills .skill-mover-plus-minus-enclosure,
.subitem-skillsTab-flex-container-language .skill-mover-plus-minus-enclosure {
display: none;
}
.skill-checks[value="move"] ~ div.flex-container-skills-left .item-flex-container-skill-list .subitem-skillsTab-flex-container-skill .skill-mover-plus-minus-enclosure,
.skill-checks[value="move"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .skill-mover-plus-minus-enclosure,
.skill-checks[value="move"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language .skill-mover-plus-minus-enclosure {
display: flex;
}
.skill-checks[value="delete"] ~ div.flex-container-skills-left .item-skillsTab-flex-container-cap .subitem-skillsTab-grid-container-skills-heading-left .tiny-xbox-dummy-container,
.skill-checks[value="delete"] ~ div.flex-container-skills-left .item-flex-container-skill-list .subitem-skillsTab-flex-container-skill .container-xbox-tiny,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .container-xbox-tiny,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language .container-xbox-tiny {
display: flex;
}
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-combat-skills .subitem-skillsTab-flex-container-combat-skill .tiny-xbox-dummy-container,
.skill-checks[value="delete"] ~ div.flex-container-skills-right .item-skillsTab-flex-container-languages .subitem-skillsTab-flex-container-language-heading .tiny-xbox-dummy-container {
opacity: 1;
}
/* Power Delete Boxes */
.item-upper-power-delete-panel,
.item-lower-power-delete-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
top: -337px;
left: 226px;
background: transparent;
width: 14px;
height: 329px;
}
.item-upper-power-delete-panel,
.item-lower-power-delete-panel {
display: none;
}
.upper-power-checks[value="delete"] ~ div.item-upper-power-delete-panel,
.lower-power-checks[value="delete"] ~ div.item-lower-power-delete-panel {
display: flex;
}
/* Talent and Complication Delete Boxes */
.item-talent-delete-panel,
.item-complication-delete-panel {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
top: -346px;
left: 177px;
background: transparent;
width: 14px;
height: 338px;
}
.item-talent-delete-panel,
.item-complication-delete-panel {
display: none;
}
.talent-checks[value="delete"] ~ div.item-talent-delete-panel,
.complication-checks[value="delete"] ~ div.item-complication-delete-panel {
display: flex;
}
/* ----------------------------------------------------------- */
/* Item: Attacks and Maneuvers or treasures text box slideshow */
/* ----------------------------------------------------------- */
.item-tab-gear-slide-container {
grid-area: theSlides;
position: relative;
}
.flex-container-maneuvers-heading,
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
padding-left: 2px;
}
.flex-container-maneuvers-heading h1,
.item-tab-gear-slide-flex-container-hit-locations h1,
.item-tab-gear-slide-flex-container-martial-maneuvers h1 {
text-align: left;
line-height: 1.2;
font-size: 12px;
margin: 0px;
}
.item-tab-gear-slide-flex-container-hit-locations h2,
.item-tab-gear-slide-flex-container-martial-maneuvers h2,
.subitem-tab-gear-slide-flex-container-range-modifiers h2 {
font-size: 12px;
text-align: center;
font-weight: 400;
line-height: 1.2;
}
.item-tab-gear-slide-container .button-gear-slide {
position: absolute;
transform: translate(-50%, -50%);
color: white;
background-color: #4ba6ff;
width: 19px;
height: 17px;
font-size: 12px;
font-weight: bold;
padding: 0px;
text-align: center;
border: none;
cursor: pointer;
line-height: 1.4;
}
.maneuver-checks[value="delete"] ~ .button-gear-slide {
background-color: #d0d0d0;
}
.maneuver-checks[value="delete"] ~ .button-gear-slide:hover {
background-color: #d0d0d0;
border: 2px solid #d2e9ff;
color: white;
cursor: default;
}
.item-tab-gear-slide-container .button-gear-slide > div {
padding-left: 0px;
}
.item-tab-gear-slide-container .button-gear-slide .container {
position: absolute;
top: 1px;
left: 2px;
height: 15px;
width: 15px;
background-color: #D55E00;
border-radius: 50%;
padding: 0px;
}
.maneuver-checks[value="delete"] ~ .button-gear-slide .container {
background-color: #a1a1a1;
}
.item-tab-gear-slide-container .button-gear-slide .container .circle {
position: absolute;
top: 2px;
left: 2px;
height: 11px;
width: 11px;
background-color: white;
border-radius: 50%;
padding: 0px;
}
.item-tab-gear-slide-container .button-gear-slide .container .circle .spot {
position: absolute;
top: 2px;
left: 2px;
height: 7px;
width: 7px;
background-color: #D55E00;
border-radius: 50%;
padding: 0px;
}
.maneuver-checks[value="delete"] ~ .button-gear-slide .container .circle .spot {
background-color: #a1a1a1;
}
.item-tab-gear-slide-container .button-gear-slide:nth-of-type(1) {
top: 13px;
left: 325px;
border: 2px solid #d2e9ff;
border-radius: 0px;
}
.item-tab-gear-slide-container .button-gear-slide:nth-of-type(2) {
top: 13px;
left: 348px;
border: 2px solid #d2e9ff;
border-radius: 0px;
}
.item-tab-gear-slide-container .button-gear-slide:nth-of-type(3) {
top: 13px;
left: 371px;
border: 2px solid #d2e9ff;
border-radius: 0px;
}
.item-tab-gear-slide-container .button-gear-slide:nth-of-type(4) {
top: 13px;
left: 394px;
border: 2px solid #d2e9ff;
border-radius: 0px;
}
.item-tab-gear-slide-container .button-gear-slide:hover {
background-color: #F0E442;
border: solid 2px #4ba6ff;
border-radius: 0px;
color: black;
}
.item-tab-gear-slide-flex-container-maneuvers,
.item-tab-gear-slide-flex-container-martial-maneuvers {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 406px;
height: 374px;
padding: 0px;
padding-top: 1px;
margin-left: 0px;
margin-bottom: 0px;
background-color: #bcdeff;
border: solid 2px #66bbeb;
border-radius: 3px;
}
.flex-container-maneuvers {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 303px;
}
.flex-container-maneuver-selectors {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 120px;
margin-left: 5px;
}
.flex-container-maneuver-selectors button {
height: 16px;
text-align: left;
font-weight: bold;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 1px solid #e9f4ff;
background-color: #d2e9ff;
padding-left: 4px;
padding-right: 0px;
line-height: 1.1;
}
.flex-container-maneuver-selectors button:hover {
background-color: #faf6c6;
}
.item-tab-gear-slide-flex-container-martial-maneuvers .flex-container-maneuvers .flex-container-maneuver-selectors button {
height: 22px;
}
.flex-container-maneuver-slides {
background-color: white;
min-width: 264px;
margin-right: 4px;
border-top: 1px solid white;
border-right: 1px solid #a5d3ff;
border-bottom: 1px solid #a5d3ff;
border-left: none;
padding: 6px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.item-maneuver-block-heading {
height: 30px;
background-color: #4ba6ff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 1px;
}
.item-maneuver-block-heading h1 {
width: 252px;
font-size: 17px;
font-weight: bold;
color: white;
text-align: center;
}
.item-maneuver-block-heading input[type=text] {
font-size: 17px;
font-weight: bold;
color: white;
text-align: center;
background: transparent;
width: 150px;
padding-bottom: 3px;
height: 25px;
border: 2px solid transparent;
&::placeholder {
color: white;
opacity: 0.33;
}
}
.item-maneuver-block-heading input[type=text]:hover {
border: 2px solid #66bbeb;
}
.item-maneuver-block-heading-container {
display: flex;
flex-direction: row;
align-items: center;
}
.item-maneuver-block-heading-container:nth-child(1) {
justify-content: flex-start;
margin-bottom: 4px;
margin-right: 2px;
}
.item-maneuver-block-heading-container input[type=number] {
max-width: 30px;
font-size: 16px;
padding: 0px;
margin-bottom: 4px;
font-weight: bold;
color: white;
background-color: transparent;
}
.item-maneuver-block-heading-container h1 {
font-size: 13px;
color: #bcdeff;
text-align: center;
width: 24px;
margin-bottom: 3px;
}
.item-maneuver-block-heading-container:nth-child(3) {
justify-content: flex-end;
margin-left: 31px;
margin-right: 3px;
}
.item-martial-maneuver-block-stats {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.item-martial-maneuver-block-stats {
height: 114px;
}
.item-maneuver-block-stats input[type=text],
.item-martial-maneuver-block-stats input[type=text] {
width: 24px;
background: transparent;
}
.item-maneuver-block-stats-full-row,
.item-maneuver-block-stats-half-row,
.item-maneuver-block-stats-half-row-alt {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
padding-left: 6px;
}
.item-maneuver-block-stats-half-row,
.item-maneuver-block-stats-half-row-alt {
min-width: 120px;
padding-right: 6px;
}
.item-maneuver-block-stats-full-row {
min-width: 240px;
padding-right: 12px;
}
.item-maneuver-block-stats-standard-row,
.item-maneuver-block-stats-special-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
padding-left: 6px;
}
.item-maneuver-block-stats-full-row input[type=text],
.item-maneuver-block-stats-half-row input[type=text] {
text-align: center;
height: 21px;
padding-left: 2px;
padding-right: 4px;
}
.item-maneuver-block-stats-half-row input[type=text] {
width: 30px;
margin-right: 3px;
}
.item-maneuver-block-stats-standard-row input[type=number],
.item-maneuver-block-stats-special-row input[type=number],
.item-maneuver-block-stats-full-row input[type=number],
.item-maneuver-block-stats-half-row input[type=number],
.item-maneuver-block-stats-half-row-alt input[type=number] {
padding-right: 1px;
margin-left: 2px;
margin-bottom: 2px;
background: transparent;
border: none;
}
.item-maneuver-block-stats-standard-row input[type=number],
.item-maneuver-block-stats-full-row input[type=number],
.item-maneuver-block-stats-half-row input[type=number] {
text-align: right;
max-width: 30px;
}
.item-maneuver-block-stats-special-row input[type=number]:nth-child(2) {
text-align: right;
max-width: 40px;
}
.item-maneuver-block-stats-special-row input[type=number]:nth-child(4) {
text-align: right;
max-width: 30px;
}
.item-maneuver-block-stats-half-row-alt input[type=number] {
text-align: right;
max-width: 60px;
}
.item-maneuver-block-stats-half-row-alt input[type=text] {
width: 80px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
}
.item-maneuver-block-stats-half-row .custom-select-alternate,
.item-maneuver-block-stats-half-row-alt .custom-select-alternate {
padding-left: 3px;
}
.item-maneuver-block-stats-standard-row h2,
.item-maneuver-block-stats-special-row h2 {
font-size: 12px;
color: black;
text-align: center;
line-height: 28px;
}
.item-maneuver-block-stats-row,
.item-maneuver-block-stats-row-empty {
display: flex;
justify-content: space-between;
flex-direction: row;
min-height: 28px;
}
.item-maneuver-block-stats-standard-row:nth-child(odd),
.item-maneuver-block-stats-row:nth-child(odd),
.item-maneuver-block-stats-special-row:nth-child(odd) {
background-color: #e9f4ff;
}
.item-maneuver-block-stats-row-empty {
background-color: #8fc8ff;
}
.item-maneuver-block-text,
.item-martial-maneuver-block-text {
background-color: #8fc8ff;
height: 126px;
padding-top: 4px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 0px;
}
.item-martial-maneuver-block-text {
background-color: #8fc8ff;
height: 96px;
padding: 4px;
padding-bottom: 0px;
}
.item-martial-maneuver-block-text textarea {
font-size: 13px;
text-align: left;
color: black;
max-height: 76px;
max-width: 245px;
margin-top: 5px;
border-radius: 3px;
border: solid 2px transparent;
background: transparent;
display: block;
&::placeholder {
color: black;
opacity: 0.33;
}
}
.item-martial-maneuver-block-text textarea:hover {
border: solid 2px #b2d4e7;
}
.item-maneuver-button-line {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 264px;
height: 30px;
padding-bottom: 5px;
background-color: #8fc8ff;
}
.item-martial-maneuver-button-line {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 264px;
height: 30px;
padding-bottom: 5px;
background-color: #8fc8ff;
}
.item-maneuver-line-flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
}
.item-maneuver-line-flex input[type=number] {
width: 30px;
border: 1px solid #8fc8ff;
text-align: center;
padding-left: 2px;
height: 20px;
margin-left: 3px;
}
/* Maneuver type-specific variables */
.item-maneuver-block-stats-attack01,
.item-maneuver-block-stats-attack02,
.item-maneuver-block-stats-attack03,
.item-maneuver-block-stats-attack04,
.item-maneuver-block-stats-attack05,
.item-maneuver-block-stats-attack06,
.item-maneuver-block-stats-attack07,
.item-maneuver-block-stats-attack08,
.item-maneuver-block-stats-attack09,
.item-maneuver-block-stats-attack10,
.item-maneuver-block-stats-defense01,
.item-maneuver-block-stats-defense02,
.item-maneuver-block-stats-defense03,
.item-maneuver-block-stats-defense04,
.item-maneuver-block-stats-defense05,
.item-maneuver-block-stats-defense06,
.item-maneuver-block-stats-defense07,
.item-maneuver-block-stats-defense08,
.item-maneuver-block-stats-defense09,
.item-maneuver-block-stats-defense10,
.item-maneuver-block-stats-contest01,
.item-maneuver-block-stats-contest02,
.item-maneuver-block-stats-contest03,
.item-maneuver-block-stats-contest04,
.item-maneuver-block-stats-contest05,
.item-maneuver-block-stats-contest06,
.item-maneuver-block-stats-contest07,
.item-maneuver-block-stats-contest08,
.item-maneuver-block-stats-contest09,
.item-maneuver-block-stats-contest10,
.item-maneuver-block-stats-wp-attack01,
.item-maneuver-block-stats-wp-attack02,
.item-maneuver-block-stats-wp-attack03,
.item-maneuver-block-stats-wp-attack04,
.item-maneuver-block-stats-wp-attack05,
.item-maneuver-block-stats-wp-attack06,
.item-maneuver-block-stats-wp-attack07,
.item-maneuver-block-stats-wp-attack08,
.item-maneuver-block-stats-wp-attack09,
.item-maneuver-block-stats-wp-attack10,
.item-maneuver-block-stats-wp-contest01,
.item-maneuver-block-stats-wp-contest02,
.item-maneuver-block-stats-wp-contest03,
.item-maneuver-block-stats-wp-contest04,
.item-maneuver-block-stats-wp-contest05,
.item-maneuver-block-stats-wp-contest06,
.item-maneuver-block-stats-wp-contest07,
.item-maneuver-block-stats-wp-contest08,
.item-maneuver-block-stats-wp-contest09,
.item-maneuver-block-stats-wp-contest10 {
display: none;
}
.martial-damage-display01[value="attack"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-attack01,
.martial-damage-display02[value="attack"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-attack02,
.martial-damage-display03[value="attack"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-attack03,
.martial-damage-display04[value="attack"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-attack04,
.martial-damage-display05[value="attack"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-attack05,
.martial-damage-display06[value="attack"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-attack06,
.martial-damage-display07[value="attack"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-attack07,
.martial-damage-display08[value="attack"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-attack08,
.martial-damage-display09[value="attack"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-attack09,
.martial-damage-display10[value="attack"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-attack10 {
display: block;
position: relative;
}
.martial-damage-display01[value="defense"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-defense01,
.martial-damage-display02[value="defense"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-defense02,
.martial-damage-display03[value="defense"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-defense03,
.martial-damage-display04[value="defense"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-defense04,
.martial-damage-display05[value="defense"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-defense05,
.martial-damage-display06[value="defense"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-defense06,
.martial-damage-display07[value="defense"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-defense07,
.martial-damage-display08[value="defense"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-defense08,
.martial-damage-display09[value="defense"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-defense09,
.martial-damage-display10[value="defense"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-defense10 {
display: block;
position: relative;
}
.martial-damage-display01[value="contest"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-contest01,
.martial-damage-display02[value="contest"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-contest02,
.martial-damage-display03[value="contest"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-contest03,
.martial-damage-display04[value="contest"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-contest04,
.martial-damage-display05[value="contest"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-contest05,
.martial-damage-display06[value="contest"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-contest06,
.martial-damage-display07[value="contest"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-contest07,
.martial-damage-display08[value="contest"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-contest08,
.martial-damage-display09[value="contest"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-contest09,
.martial-damage-display10[value="contest"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-contest10 {
display: block;
position: relative;
}
.martial-damage-display01[value="wpAttack"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-wp-attack01,
.martial-damage-display02[value="wpAttack"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-wp-attack02,
.martial-damage-display03[value="wpAttack"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-wp-attack03,
.martial-damage-display04[value="wpAttack"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-wp-attack04,
.martial-damage-display05[value="wpAttack"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-wp-attack05,
.martial-damage-display06[value="wpAttack"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-wp-attack06,
.martial-damage-display07[value="wpAttack"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-wp-attack07,
.martial-damage-display08[value="wpAttack"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-wp-attack08,
.martial-damage-display09[value="wpAttack"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-wp-attack09,
.martial-damage-display10[value="wpAttack"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-wp-attack10 {
display: block;
position: relative;
}
.martial-damage-display01[value="wpContest"] ~ div.item-maneuver-block-type01 .item-maneuver-block-stats-wp-contest01,
.martial-damage-display02[value="wpContest"] ~ div.item-maneuver-block-type02 .item-maneuver-block-stats-wp-contest02,
.martial-damage-display03[value="wpContest"] ~ div.item-maneuver-block-type03 .item-maneuver-block-stats-wp-contest03,
.martial-damage-display04[value="wpContest"] ~ div.item-maneuver-block-type04 .item-maneuver-block-stats-wp-contest04,
.martial-damage-display05[value="wpContest"] ~ div.item-maneuver-block-type05 .item-maneuver-block-stats-wp-contest05,
.martial-damage-display06[value="wpContest"] ~ div.item-maneuver-block-type06 .item-maneuver-block-stats-wp-contest06,
.martial-damage-display07[value="wpContest"] ~ div.item-maneuver-block-type07 .item-maneuver-block-stats-wp-contest07,
.martial-damage-display08[value="wpContest"] ~ div.item-maneuver-block-type08 .item-maneuver-block-stats-wp-contest08,
.martial-damage-display09[value="wpContest"] ~ div.item-maneuver-block-type09 .item-maneuver-block-stats-wp-contest09,
.martial-damage-display10[value="wpContest"] ~ div.item-maneuver-block-type10 .item-maneuver-block-stats-wp-contest10 {
display: block;
position: relative;
}
/* default standard maneuver slide visibility */
.item-maneuver-block,
.item-maneuver-disarm,
.item-maneuver-dodge,
.item-maneuver-grab,
.item-maneuver-grabBy,
.item-maneuver-haymaker,
.item-maneuver-moveBy,
.item-maneuver-moveThrough,
.item-maneuver-multipleAttack,
.item-maneuver-set,
.item-maneuver-shove,
.item-maneuver-strike,
.item-maneuver-throw,
.item-maneuver-trip {
display: none;
}
/* show the selected maneuver slide */
.item-maneuver-selection[value="block"] ~ div.flex-container-maneuver-slides .item-maneuver-block,
.item-maneuver-selection[value="disarm"] ~ div.flex-container-maneuver-slides .item-maneuver-disarm,
.item-maneuver-selection[value="dodge"] ~ div.flex-container-maneuver-slides .item-maneuver-dodge,
.item-maneuver-selection[value="grab"] ~ div.flex-container-maneuver-slides .item-maneuver-grab,
.item-maneuver-selection[value="grabBy"] ~ div.flex-container-maneuver-slides .item-maneuver-grabBy,
.item-maneuver-selection[value="haymaker"] ~ div.flex-container-maneuver-slides .item-maneuver-haymaker,
.item-maneuver-selection[value="moveBy"] ~ div.flex-container-maneuver-slides .item-maneuver-moveBy,
.item-maneuver-selection[value="moveThrough"] ~ div.flex-container-maneuver-slides .item-maneuver-moveThrough,
.item-maneuver-selection[value="multipleAttack"] ~ div.flex-container-maneuver-slides .item-maneuver-multipleAttack,
.item-maneuver-selection[value="set"] ~ div.flex-container-maneuver-slides .item-maneuver-set,
.item-maneuver-selection[value="shove"] ~ div.flex-container-maneuver-slides .item-maneuver-shove,
.item-maneuver-selection[value="strike"] ~ div.flex-container-maneuver-slides .item-maneuver-strike,
.item-maneuver-selection[value="throw"] ~ div.flex-container-maneuver-slides .item-maneuver-throw,
.item-maneuver-selection[value="trip"] ~ div.flex-container-maneuver-slides .item-maneuver-trip {
display: block;
position: relative;
}
/* Make a selection button appear to be continuous with its slide via color and border */
.item-maneuver-selection[value="block"] ~ .flex-container-maneuver-selectors button[name="act_block"]:not(:hover),
.item-maneuver-selection[value="disarm"] ~ .flex-container-maneuver-selectors button[name="act_disarm"]:not(:hover),
.item-maneuver-selection[value="dodge"] ~ .flex-container-maneuver-selectors button[name="act_dodge"]:not(:hover),
.item-maneuver-selection[value="grab"] ~ .flex-container-maneuver-selectors button[name="act_grab"]:not(:hover),
.item-maneuver-selection[value="grabBy"] ~ .flex-container-maneuver-selectors button[name="act_grabBy"]:not(:hover),
.item-maneuver-selection[value="haymaker"] ~ .flex-container-maneuver-selectors button[name="act_haymaker"]:not(:hover),
.item-maneuver-selection[value="moveBy"] ~ .flex-container-maneuver-selectors button[name="act_moveBy"]:not(:hover),
.item-maneuver-selection[value="moveThrough"] ~ .flex-container-maneuver-selectors button[name="act_moveThrough"]:not(:hover),
.item-maneuver-selection[value="multipleAttack"] ~ .flex-container-maneuver-selectors button[name="act_multipleAttack"]:not(:hover),
.item-maneuver-selection[value="set"] ~ .flex-container-maneuver-selectors button[name="act_set"]:not(:hover),
.item-maneuver-selection[value="shove"] ~ .flex-container-maneuver-selectors button[name="act_shove"]:not(:hover),
.item-maneuver-selection[value="strike"] ~ .flex-container-maneuver-selectors button[name="act_strike"]:not(:hover),
.item-maneuver-selection[value="throw"] ~ .flex-container-maneuver-selectors button[name="act_throw"]:not(:hover),
.item-maneuver-selection[value="trip"] ~ .flex-container-maneuver-selectors button[name="act_trip"]:not(:hover) {
background-color: white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid #a5d3ff;
border-right: none;
}
/* Ignore hover styling for selector button of current slide */
.item-maneuver-selection[value="block"] ~ .flex-container-maneuver-selectors button[name="act_block"]:hover,
.item-maneuver-selection[value="disarm"] ~ .flex-container-maneuver-selectors button[name="act_disarm"]:hover,
.item-maneuver-selection[value="dodge"] ~ .flex-container-maneuver-selectors button[name="act_dodge"]:hover,
.item-maneuver-selection[value="grab"] ~ .flex-container-maneuver-selectors button[name="act_grab"]:hover,
.item-maneuver-selection[value="grabBy"] ~ .flex-container-maneuver-selectors button[name="act_grabBy"]:hover,
.item-maneuver-selection[value="haymaker"] ~ .flex-container-maneuver-selectors button[name="act_haymaker"]:hover,
.item-maneuver-selection[value="moveBy"] ~ .flex-container-maneuver-selectors button[name="act_moveBy"]:hover,
.item-maneuver-selection[value="moveThrough"] ~ .flex-container-maneuver-selectors button[name="act_moveThrough"]:hover,
.item-maneuver-selection[value="multipleAttack"] ~ .flex-container-maneuver-selectors button[name="act_multipleAttack"]:hover,
.item-maneuver-selection[value="set"] ~ .flex-container-maneuver-selectors button[name="act_set"]:hover,
.item-maneuver-selection[value="shove"] ~ .flex-container-maneuver-selectors button[name="act_shove"]:hover,
.item-maneuver-selection[value="strike"] ~ .flex-container-maneuver-selectors button[name="act_strike"]:hover,
.item-maneuver-selection[value="throw"] ~ .flex-container-maneuver-selectors button[name="act_throw"]:hover,
.item-maneuver-selection[value="trip"] ~ .flex-container-maneuver-selectors button[name="act_trip"]:hover {
background-color: white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid #a5d3ff;
border-right: none;
}
/* Martial Maneuvers */
/* default slide visibility */
.item-martial-maneuver01,
.item-martial-maneuver02,
.item-martial-maneuver03,
.item-martial-maneuver04,
.item-martial-maneuver05,
.item-martial-maneuver06,
.item-martial-maneuver07,
.item-martial-maneuver08,
.item-martial-maneuver09,
.item-martial-maneuver10 {
display: none;
}
/* show the selected maneuver slide */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ div.flex-container-maneuver-slides .item-martial-maneuver01,
.item-martial-maneuver-selection[value="martialManeuver02"] ~ div.flex-container-maneuver-slides .item-martial-maneuver02,
.item-martial-maneuver-selection[value="martialManeuver03"] ~ div.flex-container-maneuver-slides .item-martial-maneuver03,
.item-martial-maneuver-selection[value="martialManeuver04"] ~ div.flex-container-maneuver-slides .item-martial-maneuver04,
.item-martial-maneuver-selection[value="martialManeuver05"] ~ div.flex-container-maneuver-slides .item-martial-maneuver05,
.item-martial-maneuver-selection[value="martialManeuver06"] ~ div.flex-container-maneuver-slides .item-martial-maneuver06,
.item-martial-maneuver-selection[value="martialManeuver07"] ~ div.flex-container-maneuver-slides .item-martial-maneuver07,
.item-martial-maneuver-selection[value="martialManeuver08"] ~ div.flex-container-maneuver-slides .item-martial-maneuver08,
.item-martial-maneuver-selection[value="martialManeuver09"] ~ div.flex-container-maneuver-slides .item-martial-maneuver09,
.item-martial-maneuver-selection[value="martialManeuver10"] ~ div.flex-container-maneuver-slides .item-martial-maneuver10 {
display: block;
position: relative;
}
/* Make a selection button appear to be continuous with its slide via color and border */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver01"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver02"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver02"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver03"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver03"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver04"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver04"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver05"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver05"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver06"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver06"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver07"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver07"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver08"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver08"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver09"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver09"]:not(:hover),
.item-martial-maneuver-selection[value="martialManeuver10"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver10"]:not(:hover) {
background-color: white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid #a5d3ff;
border-right: none;
}
/* Ignore hover styling for selector button of current slide */
.item-martial-maneuver-selection[value="martialManeuver01"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver01"]:hover,
.item-martial-maneuver-selection[value="martialManeuver02"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver02"]:hover,
.item-martial-maneuver-selection[value="martialManeuver03"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver03"]:hover,
.item-martial-maneuver-selection[value="martialManeuver04"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver04"]:hover,
.item-martial-maneuver-selection[value="martialManeuver05"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver05"]:hover,
.item-martial-maneuver-selection[value="martialManeuver06"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver06"]:hover,
.item-martial-maneuver-selection[value="martialManeuver07"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver07"]:hover,
.item-martial-maneuver-selection[value="martialManeuver08"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver08"]:hover,
.item-martial-maneuver-selection[value="martialManeuver09"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver09"]:hover,
.item-martial-maneuver-selection[value="martialManeuver10"] ~ .flex-container-maneuver-selectors button[name="act_martialManeuver10"]:hover {
background-color: white;
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid #a5d3ff;
border-right: none;
}
/* Range Modifier Table */
.subitem-tab-gear-slide-flex-container-range-modifiers {
flex-direction: row;
display: flex;
justify-content: space-between;
width: 390px;
height: 30px;
padding: 3px;
margin-top: 6px;
margin-bottom: 7px;
margin-right: 0px;
margin-left: 4px;
background-color: white;
border-radius: 3px;
border: solid 1px #a5d3ff;
}
.subitem-tab-gear-slide-range-modifier-container {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 33px;
align-items: top;
padding: 0px;
margin: 0px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(1) {
width: 60px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(2) {
width: 37px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(3) {
width: 43px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(4) {
width: 49px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(5) {
width: 50px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(6) {
width: 57px;
}
.subitem-range-modifier-container-column h2:nth-child(1) {
font-weight: bold;
}
.subitem-range-modifier-container-column {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 30px;
padding-top: 0px;
}
.subitem-range-modifier-button-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 30px;
padding-top: 1px;
}
.subitem-tab-gear-slide-range-modifier-container:nth-child(1) .subitem-range-modifier-container-column {
margin-bottom: 3px;
height: 30px;
}
/* Item: Hit Locations */
.item-tab-gear-slide-flex-container-hit-locations {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 403px;
height: 375px;
padding: 0px;
padding-left: 3px;
margin-left: 0px;
margin-bottom: 0px;
background-color: #bcdeff;
border: solid 2px #66bbeb;
border-radius: 3px;
}
.item-gear-slide-container-hit-locations-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
border-radius: 3px;
width: 400px;
}
/* Special Hit Locations */
.item-gear-slide-flex-container-hit-locations-special {
width: 260px;
height: 145px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item-gear-slide-flex-container-hit-locations-special label {
display: inline-block;
margin-left: 14px;
margin-right: 4px;
margin-top: 2px; /* A fix to get a uniform look with the hit location table */
}
.subitem-gear-slide-flex-container-hit-locations-special-heading {
height: 20px;
margin-bottom: 3px;
}
.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(1){
width: 42px;
text-align: left;
margin-left: 2px;
}
.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(2){
width: 40px;
text-align: center;
margin-left: 3px;
}
.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(3){
width: 52px;
text-align: center;
margin-left: 30px;
}
.subitem-gear-slide-flex-container-hit-locations-special-heading h1:nth-child(4){
width: 44px;
text-align: right;
margin-left: 15px;
}
.subitem-gear-slide-flex-container-hit-locations-special-top-row,
.subitem-gear-slide-flex-container-hit-locations-special-middle-row,
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: white;
border-left: solid 1px #a5d3ff;
border-right: solid 1px #a5d3ff;
width: 260px;
height: 20px;
}
.subitem-gear-slide-flex-container-hit-locations-special-top-row {
border-top: solid 1px #a5d3ff;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding-top: 5px;
}
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
border-bottom: solid 1px #a5d3ff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.subitem-gear-slide-flex-container-hit-locations-special-top-row h1,
.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1,
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1 {
width: 65px;
text-align: center;
}
.subitem-gear-slide-flex-container-hit-locations-special-top-row h1:nth-child(4),
.subitem-gear-slide-flex-container-hit-locations-special-middle-row h1:nth-child(4),
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row h1:nth-child(4) {
width: 35px;
text-align: right;
padding-right: 19px;
}
/* Targeting Options */
.item-gear-slide-container-hit-locations-options {
width: 130px;
height: 100px;
margin-top: 50px;
}
.subitem-gear-slide-container-hit-locations-options-top,
.subitem-gear-slide-container-hit-locations-options-bottom {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 115px;
margin: 3px;
margin-bottom: 15px;
}
.subitem-gear-slide-container-hit-locations-options-top {
margin-left: 10px;
}
.subitem-gear-slide-container-hit-locations-options-top h1,
.subitem-gear-slide-container-hit-locations-options-bottom h1 {
padding-top: 4px;
margin: 0px;
}
.subitem-gear-slide-container-hit-locations-options-top label {
max-width: 0px;
margin-left: 2px;
margin-right: 0px;
margin-top: 3px;
padding-right: 0px;
}
.subitem-gear-slide-container-hit-locations-options-bottom input {
margin-left: 5px;
border: solid 1px #a5d3ff;
}
/* Hit Location Table */
.item-gear-slide-container-hit-locations-table {
width: 399px;
height: 215px;
}
.item-gear-slide-container-hit-locations-table h1 {
width: 51px;
text-align: center;
}
.item-gear-slide-container-hit-locations-table label {
display: inline-block;
margin-left: 14px;
margin-right: 3px;
}
.subitem-gear-slide-container-hit-locations-table-heading {
height: 20px;
margin-bottom: 3px;
}
.subitem-gear-slide-container-hit-locations-table-heading h1 {
text-align: center;
margin-left: 2px;
}
.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(1){
width: 42px;
text-align: left;
}
.subitem-gear-slide-container-hit-locations-table-heading h1:nth-child(2){
width: 34px;
text-align: center;
margin-right: 9px;
margin-left: 3px;
}
.subitem-gear-slide-container-hit-locations-table-top-row,
.subitem-gear-slide-container-hit-locations-table-middle-row,
.subitem-gear-slide-container-hit-locations-table-bottom-row {
height: 19px;
}
.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
width: 40x;
text-align: center;
margin-right: 11px;
}
.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(2),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(2){
width: 34px;
text-align: center;
margin-left: 21px;
}
.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(6),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(6),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(6){
width: 45px;
text-align: center;
margin-left: 6px;
margin-right: 0px;
}
.subitem-gear-slide-container-hit-locations-table-top-row h1:nth-child(7),
.subitem-gear-slide-container-hit-locations-table-middle-row h1:nth-child(7),
.subitem-gear-slide-container-hit-locations-table-bottom-row h1:nth-child(7){
width: 34px;
text-align: right;
margin-left: 4px;
margin-right: 17px;
}
.subitem-gear-slide-container-hit-locations-table-top-row {
background-color: white;
border: solid 1px #a5d3ff;
border-bottom: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.subitem-gear-slide-container-hit-locations-table-middle-row {
background-color: white;
border-left: solid 1px #a5d3ff;
border-right: solid 1px #a5d3ff;
}
.subitem-gear-slide-container-hit-locations-table-bottom-row {
background-color: white;
border: solid 1px #a5d3ff;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding-bottom: 5px;
}
/* Item: Slide of treasure and notes box */
.item-tab-gear-slide-treasure-text {
width: 402px;
height: 367px;
padding: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
.item-tab-gear-slide-treasure-text textarea {
width: 398px;
height: 367px;
margin: 0px;
border: solid 2px #66bbeb;
border-radius: 3px;
}
/* hide all gear tab slides by default */
.item-tab-gear-slide-flex-container-maneuvers,
.item-tab-gear-slide-flex-container-martial-maneuvers,
.item-tab-gear-slide-flex-container-hit-locations,
.item-tab-gear-slide-treasure-text {
display: none;
}
/* show the selected gear slide */
.item-gear-slide-selection[value="gearManeuvers"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
.item-gear-slide-selection[value="gearMartialManeuvers"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
.item-gear-slide-selection[value="gearHitLocations"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
.item-gear-slide-selection[value="gearTreasures"] ~ div.item-tab-gear-slide-treasure-text {
display: block;
}
/* ---------------------------------------------------------------- */
/* Custom radio button from w3 schools. */
/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
/* ---------------------------------------------------------------- */
/* Customize the label (the container) */
.custom-radio-button-container {
display: block;
position: relative;
padding: 0px;
margin: 0px;
cursor: pointer;
font-size: 12px;
max-width: 0px;
max-height: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.custom-radio-button-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom radio button */
.custom-radio-button,
.custom-radio-button-health {
position: absolute;
left: 0px;
height: 11px;
width: 11px;
border-radius: 50%;
margin-bottom: 0px;
padding: 0px;
}
.custom-radio-button {
top: -2px;
background-color: white;
border: solid 2px lightsteelblue;
}
.custom-radio-button-health {
top: 1px;
background-color: white;
border: solid 2px white;
}
/* On mouse-over, add a grey background color */
.custom-radio-button-container:hover input ~ .custom-radio-button {
background-color: lightsteelblue;
}
.custom-radio-button-container:hover input ~ .custom-radio-button-health {
background-color: #009E73;
}
/* When the radio button is checked, add a blue background */
.custom-radio-button-container input:checked ~ .custom-radio-button {
background-color: #D55E00;
border: solid 2px #D55E00;
}
.custom-radio-button-container input:checked ~ .custom-radio-button-health {
background-color: #009E73;
border: solid 2px white;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio-button:after,
.custom-radio-button-health:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.custom-radio-button-container input:checked ~ .custom-radio-button:after,
.custom-radio-button-container input:checked ~ .custom-radio-button-health:after {
display: block;
}
/* Style the indicator (dot/circle) */
.custom-radio-button-container .custom-radio-button:after,
.custom-radio-button-container .custom-radio-button-health:after {
top: 0px;
left: 0px;
width: 7px;
height: 7px;
border-radius: 50%;
margin: 0px;
padding: 0px;
}
.custom-radio-button-container .custom-radio-button:after {
border: solid 2px white;
background: #D55E00;
}
.custom-radio-button-container .custom-radio-button-health:after {
border: solid 2px #009E73;
background: #32b18f;
}
/* ---------------------------------------------------------------- */
/* Jackob's Roll Template */
/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
/* ---------------------------------------------------------------- */
.sheet-rolltemplate-custom-contest a[href^='!'],
.sheet-rolltemplate-custom-contest a[href^='~'],
.sheet-rolltemplate-custom-attack a[href^='!'],
.sheet-rolltemplate-custom-attack a[href^='~'],
.sheet-rolltemplate-custom-normal-attack a[href^='!'],
.sheet-rolltemplate-custom-normal-attack a[href^='~'],
.sheet-rolltemplate-custom-power-attack a[href^='!'],
.sheet-rolltemplate-custom-power-attack a[href^='~'] {
color: white;
font-weight: bold;
line-height: 12px;
border-radius: 3px;
}
.sheet-rolltemplate-custom-attack a[href^='!'],
.sheet-rolltemplate-custom-attack a[href^='~']{
background-color: #D55E00;
border: 2px solid #aa4b00;
}
.sheet-rolltemplate-custom-normal-attack a[href^='!'],
.sheet-rolltemplate-custom-normal-attack a[href^='~']{
background-color: #009E73;
border: 2px solid #007e5c;
}
.sheet-rolltemplate-custom-contest a[href^='!'],
.sheet-rolltemplate-custom-contest a[href^='~']{
background-color: #E69F00;
border: 2px solid #b87f00;
}
.sheet-rolltemplate-custom-power-attack a[href^='!'],
.sheet-rolltemplate-custom-power-attack a[href^='~']{
background-color: #CC79A7;
border: 2px solid #a36085;
}
.sheet-rolltemplate-custom-contest a[href^='!']:hover,
.sheet-rolltemplate-custom-contest a[href^='~']:hover,
.sheet-rolltemplate-custom-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-attack a[href^='~']:hover,
.sheet-rolltemplate-custom-normal-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-normal-attack a[href^='~']:hover,
.sheet-rolltemplate-custom-power-attack a[href^='!']:hover,
.sheet-rolltemplate-custom-power-attack a[href^='~']:hover {
background-color: #d0d0d0;
color: black;
border: 2px solid transparent;
}
/* Three different Templates for attacks, armor activation, and skills ability checks. */
.sheet-rolltemplate-custom,
.sheet-rolltemplate-custom-success-roll,
.sheet-rolltemplate-custom-defense,
.sheet-rolltemplate-custom-attack,
.sheet-rolltemplate-custom-normal-attack,
.sheet-rolltemplate-custom-power-attack,
.sheet-rolltemplate-custom-damage,
.sheet-rolltemplate-custom-normal-damage,
.sheet-rolltemplate-custom-power-damage,
.sheet-rolltemplate-custom-contest-damage,
.sheet-rolltemplate-custom-activate,
.sheet-rolltemplate-custom-contest,
.sheet-rolltemplate-custom-show {
margin-left: -37px;
color: #181818;
}
.withoutavatars .sheet-rolltemplate-custom,
.withoutavatars .sheet-rolltemplate-custom-success-roll,
.withoutavatars .sheet-rolltemplate-custom-defense,
.withoutavatars .sheet-rolltemplate-custom-attack,
.withoutavatars .sheet-rolltemplate-custom-normal-attack,
.withoutavatars .sheet-rolltemplate-custom-power-attack,
.withoutavatars .sheet-rolltemplate-custom-damage,
.withoutavatars .sheet-rolltemplate-custom-normal-damage,
.withoutavatars .sheet-rolltemplate-custom-power-damage,
.withoutavatars .sheet-rolltemplate-custom-contest-damage,
.withoutavatars .sheet-rolltemplate-custom-activate,
.withoutavatars .sheet-rolltemplate-custom-contest,
.withoutavatars .sheet-rolltemplate-custom-show {
margin-left: -7px;
color: #181818;
}
.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-success-roll .sheet-container,
.sheet-rolltemplate-custom-defense .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-damage .sheet-container,
.sheet-rolltemplate-custom-normal-damage .sheet-container,
.sheet-rolltemplate-custom-power-damage .sheet-container,
.sheet-rolltemplate-custom-contest-damage .sheet-container,
.sheet-rolltemplate-custom-activate .sheet-container,
.sheet-rolltemplate-custom-contest .sheet-container,
.sheet-rolltemplate-custom-show .sheet-container {
border: 1px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: var(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header,
.sheet-rolltemplate-custom-success-roll .sheet-header,
.sheet-rolltemplate-custom-contest .sheet-header,
.sheet-rolltemplate-custom-contest-damage .sheet-header, {
background-color: #E69F00;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-defense .sheet-header {
background-color: #4ba6ff;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-damage .sheet-header,
.sheet-rolltemplate-custom-attack .sheet-header {
background-color: #D55E00;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-normal-damage .sheet-header,
.sheet-rolltemplate-custom-normal-attack .sheet-header {
background-color: #009E73;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-power-damage .sheet-header,
.sheet-rolltemplate-custom-power-attack .sheet-header {
background-color: #CC79A7;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-activate .sheet-header {
background-color: #0072B2;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom-show .sheet-header {
background-color: #8A8A8A;
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title,
.sheet-rolltemplate-custom-success-roll .sheet-title,
.sheet-rolltemplate-custom-defense .sheet-title,
.sheet-rolltemplate-custom-attack .sheet-title,
.sheet-rolltemplate-custom-normal-attack .sheet-title,
.sheet-rolltemplate-custom-power-attack .sheet-title,
.sheet-rolltemplate-custom-damage .sheet-title,
.sheet-rolltemplate-custom-normal-damage .sheet-title,
.sheet-rolltemplate-custom-power-damage .sheet-title,
.sheet-rolltemplate-custom-contest-damage .sheet-title,
.sheet-rolltemplate-custom-activate .sheet-title,
.sheet-rolltemplate-custom-contest .sheet-title,
.sheet-rolltemplate-custom-show .sheet-title {
padding-top: 0.4em;
font-size: 1.2em;
font-weight: bold;
}
.sheet-rolltemplate-custom-defense .sheet-header,
.sheet-rolltemplate-custom-attack .sheet-header,
.sheet-rolltemplate-custom-normal-attack .sheet-header,
.sheet-rolltemplate-custom-power-attack .sheet-header,
.sheet-rolltemplate-custom-contest .sheet-header,
.sheet-rolltemplate-custom-activate .sheet-header {
display: grid;
width: 98%;
grid-template-areas:
"title label"
"title data"
"subtitle data";
grid-template-columns: auto 40px;
padding-left: 1%;
padding-right: 1%;
padding-top: 4px;
padding-bottom: 4px;
}
.sheet-rolltemplate-custom-defense .sheet-header .sheet-title,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-title,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-title,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-title {
grid-area: title;
padding-right: 3px;
}
.sheet-rolltemplate-custom-defense .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-subtitle,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-subtitle {
grid-area: subtitle;
padding-right: 3px;
}
.sheet-rolltemplate-custom-defense .sheet-header .sheet-label,
.sheet-rolltemplate-custom-defense .sheet-header .sheet-data {
border: 2px solid #a5d3ff;
}
.sheet-rolltemplate-custom-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-data {
border: 2px solid #eaae7f;
}
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-data {
border: 2px solid #7fceb9;
}
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-data {
border: 2px solid #e5bcd3;
}
.sheet-rolltemplate-custom-contest .sheet-header .sheet-label,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-data {
border: 2px solid #f2cf7f;
}
.sheet-rolltemplate-custom-activate .sheet-header .sheet-label,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-data {
border: 2px solid #a0b4f0;
}
.sheet-rolltemplate-custom-defense .sheet-header .sheet-label,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-label,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-label,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-label {
grid-area: label;
text-align: center;
font-size: 0.8em;
width: 34px;
height: 12px;
padding: 0px;
padding-bottom: 3px;
border-bottom: none;
border-radius: 3px 3px 0px 0px;
background-color: #8A8A8A;
}
.sheet-rolltemplate-custom-defense .sheet-header .sheet-data,
.sheet-rolltemplate-custom-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-normal-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-power-attack .sheet-header .sheet-data,
.sheet-rolltemplate-custom-contest .sheet-header .sheet-data,
.sheet-rolltemplate-custom-activate .sheet-header .sheet-data {
grid-area: data;
font-size: 2.2em;
font-weight: bold;
text-align: center;
width: 34px;
height: 24px;
padding: 0px;
padding-top: 2px;
color: white;
border-top: none;
border-radius: 0px 0px 3px 3px;
background-color: #8A8A8A;
}
.sheet-rolltemplate-custom .sheet-subtitle,
.sheet-rolltemplate-custom-success-roll .sheet-subtitle,
.sheet-rolltemplate-custom-defense .sheet-subtitle,
.sheet-rolltemplate-custom-attack .sheet-subtitle,
.sheet-rolltemplate-custom-normal-attack .sheet-subtitle,
.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
.sheet-rolltemplate-custom-damage .sheet-subtitle,
.sheet-rolltemplate-custom-normal-damage .sheet-subtitle,
.sheet-rolltemplate-custom-power-damage .sheet-subtitle,
.sheet-rolltemplate-custom-contest-damage .sheet-subtitle,
.sheet-rolltemplate-custom-activate .sheet-subtitle,
.sheet-rolltemplate-custom-contest .sheet-subtitle,
.sheet-rolltemplate-custom-show .sheet-subtitle {
font-size: 1.0em;
padding-bottom: 0.2em;
}
/* example colors */
.sheet-rolltemplate-custom .sheet-container,
.sheet-rolltemplate-custom-success-roll .sheet-container,
.sheet-rolltemplate-custom-defense .sheet-container,
.sheet-rolltemplate-custom-attack .sheet-container,
.sheet-rolltemplate-custom-normal-attack .sheet-container,
.sheet-rolltemplate-custom-power-attack .sheet-container,
.sheet-rolltemplate-custom-damage .sheet-container,
.sheet-rolltemplate-custom-normal-damage .sheet-container,
.sheet-rolltemplate-custom-power-damage .sheet-container,
.sheet-rolltemplate-custom-contest-damage .sheet-container,
.sheet-rolltemplate-custom-activate .sheet-container,
.sheet-rolltemplate-custom-contest .sheet-container,
.sheet-rolltemplate-custom-show .sheet-container {
/* this is the default color */
--header-bg-color: black;
--header-text-color: #FFF;
}
/* Allprops part */
.sheet-rolltemplate-custom .sheet-content,
.sheet-rolltemplate-custom-success-roll .sheet-content,
.sheet-rolltemplate-custom-defense .sheet-content,
.sheet-rolltemplate-custom-attack .sheet-content,
.sheet-rolltemplate-custom-normal-attack .sheet-content,
.sheet-rolltemplate-custom-power-attack .sheet-content,
.sheet-rolltemplate-custom-damage .sheet-content,
.sheet-rolltemplate-custom-normal-damage .sheet-content,
.sheet-rolltemplate-custom-power-damage .sheet-content,
.sheet-rolltemplate-custom-contest-damage .sheet-content,
.sheet-rolltemplate-custom-activate .sheet-content,
.sheet-rolltemplate-custom-contest .sheet-content,
.sheet-rolltemplate-custom-show .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div,
.sheet-rolltemplate-custom-success-roll .sheet-content > div,
.sheet-rolltemplate-custom-defense .sheet-content > div,
.sheet-rolltemplate-custom-attack .sheet-content > div,
.sheet-rolltemplate-custom-normal-attack .sheet-content > div,
.sheet-rolltemplate-custom-power-attack .sheet-content > div,
.sheet-rolltemplate-custom-damage .sheet-content > div,
.sheet-rolltemplate-custom-normal-damage .sheet-content > div,
.sheet-rolltemplate-custom-power-damage .sheet-content > div,
.sheet-rolltemplate-custom-contest-damage .sheet-content > div,
.sheet-rolltemplate-custom-activate .sheet-content > div,
.sheet-rolltemplate-custom-contest .sheet-content > div,
.sheet-rolltemplate-custom-show .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key,
.sheet-rolltemplate-custom-success-roll .sheet-content .sheet-key,
.sheet-rolltemplate-custom-defense .sheet-content .sheet-key,
.sheet-rolltemplate-custom-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-normal-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-power-attack .sheet-content .sheet-key,
.sheet-rolltemplate-custom-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-normal-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-power-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-contest-damage .sheet-content .sheet-key,
.sheet-rolltemplate-custom-activate .sheet-content .sheet-key,
.sheet-rolltemplate-custom-contest .sheet-content .sheet-key,
.sheet-rolltemplate-custom-show .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
color: #222222; /* To fix dark mode in Chrome. */
}
/* Right column. Color to fix dark mode in Chrome. */
.sheet-rolltemplate-custom .sheet-value,
.sheet-rolltemplate-custom-success-roll .sheet-value,
.sheet-rolltemplate-custom-defense .sheet-value,
.sheet-rolltemplate-custom-attack .sheet-value,
.sheet-rolltemplate-custom-normal-attack .sheet-value,
.sheet-rolltemplate-custom-power-attack .sheet-value,
.sheet-rolltemplate-custom-damage .sheet-value,
.sheet-rolltemplate-custom-normal-damage .sheet-value,
.sheet-rolltemplate-custom-power-damage .sheet-value,
.sheet-rolltemplate-custom-contest-damage .sheet-value,
.sheet-rolltemplate-custom-activate .sheet-value,
.sheet-rolltemplate-custom-contest .sheet-value,
.sheet-rolltemplate-custom-show .sheet-value {
color: #222222;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-success-roll .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-success-roll .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-defense .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-defense .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-normal-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-power-attack .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-normal-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-normal-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-power-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-power-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-contest-damage .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-contest-damage .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-activate .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-contest .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-contest .sheet-content :nth-child(4n),
.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom-show .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-custom .sheet-desc,
.sheet-rolltemplate-custom-success-roll .sheet-desc,
.sheet-rolltemplate-custom-defense .sheet-desc,
.sheet-rolltemplate-custom-attack .sheet-desc,
.sheet-rolltemplate-custom-normal-attack .sheet-desc,
.sheet-rolltemplate-custom-power-attack .sheet-desc,
.sheet-rolltemplate-custom-damage .sheet-desc,
.sheet-rolltemplate-custom-normal-damage .sheet-desc,
.sheet-rolltemplate-custom-power-damage .sheet-desc,
.sheet-rolltemplate-custom-contest-damage .sheet-desc,
.sheet-rolltemplate-custom-activate .sheet-desc,
.sheet-rolltemplate-custom-contest .sheet-desc,
.sheet-rolltemplate-custom-show .sheet-desc {
grid-column: span 2;
padding-right: 10px;
text-align: left;
color: #222222; /* To fix dark mode in Chrome. */
}
/* Dice roll face colors. Needed to prevent problems with dark mode. */
.sheet-rolltemplate-custom .inlinerollresult,
.sheet-rolltemplate-custom-success-roll .inlinerollresult,
.sheet-rolltemplate-custom-defense .inlinerollresult,
.sheet-rolltemplate-custom-attack .inlinerollresult,
.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
.sheet-rolltemplate-custom-power-attack .inlinerollresult,
.sheet-rolltemplate-custom-damage .inlinerollresult,
.sheet-rolltemplate-custom-normal-damage .inlinerollresult,
.sheet-rolltemplate-custom-power-damage .inlinerollresult,
.sheet-rolltemplate-custom-contest-damage .inlinerollresult,
.sheet-rolltemplate-custom-activate .inlinerollresult,
.sheet-rolltemplate-custom-contest .inlinerollresult,
.sheet-rolltemplate-custom-show .inlinerollresult {
display: inline-block;
/* min-width: 1.5em; */
text-align: center;
background: #fff990;
border: 2px solid #d8cd3b;
}
.sheet-rolltemplate-custom-activate .sheet-header .sheet-data .inlinerollresult {
background-color: transparent;
border: none;
}
.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
background-color: #fff990;
border: 2px solid #d8cd3b;
}
.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult.fullcrit,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullcrit {
border: 2px solid #228833;
}
.sheet-rolltemplate-custom .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-success-roll .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-defense .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-normal-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-normal-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-power-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-contest-damage .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-activate .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-contest .sheet-template-wrapper .inlinerollresult.fullfail,
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
border: 2px solid #AA3377;
}
Reference in New Issue View Git Blame Copy Permalink