mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-01 12:42:32 +00:00
5244 lines
141 KiB
CSS
5244 lines
141 KiB
CSS
/* --------------------------------------------------- */
|
|
/* 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: 3px;
|
|
|
|
/* 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 uses the */
|
|
/* Okabe and Ito palette and its tints and shades. */
|
|
/* */
|
|
/* Green: #009E73 */
|
|
/* Blue: #0072B2 */
|
|
/* Light blue: #56B4E9 */
|
|
/* Yellow: #F0E442 */
|
|
/* Orange: #E69F00 */
|
|
/* Orange-red: #D55E00 */
|
|
/* Violet: #CC79A7 */
|
|
/* */
|
|
/* Plus: */
|
|
/* A mid-tone gray: #8A8A8A */
|
|
|
|
textarea {
|
|
font-size: 14px;
|
|
resize: none;
|
|
}
|
|
|
|
input {
|
|
font-size: 13px;
|
|
border: hidden;
|
|
border-radius: 3px;
|
|
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;
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------------------- */
|
|
/* 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: 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-alternate-skill,
|
|
.custom-select-option {
|
|
display: grid;
|
|
grid-template-areas: "select";
|
|
align-items: center;
|
|
position: relative;
|
|
max-height: 20px;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
padding: 0px;
|
|
padding-bottom: 1px;
|
|
padding-right: 3px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
|
|
}
|
|
|
|
.custom-select-alternate {
|
|
border: 1px solid #88caef;
|
|
}
|
|
|
|
.custom-select,
|
|
.custom-select-skill,
|
|
.custom-select-alternate-skill,
|
|
.custom-select-option {
|
|
border: 1px solid #f2cf7f;
|
|
}
|
|
|
|
.custom-select,
|
|
.custom-select-skill,
|
|
.custom-select-alternate,
|
|
.custom-select-alternate-skill {
|
|
min-width: 34px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.custom-select-option {
|
|
width: 58px;
|
|
padding-left: 4px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.custom-select-skill,
|
|
.custom-select-alternate-skill {
|
|
margin-top: 2px;
|
|
margin-bottom: 1px;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.custom-select select,
|
|
.custom-select-skill select,
|
|
.custom-select-alternate select,
|
|
.custom-select-alternate-skill select,
|
|
.custom-select-option select,
|
|
.custom-select::after,
|
|
.custom-select-skill::after,
|
|
.custom-select-alternate::after,
|
|
.custom-select-alternate-skill::after,
|
|
.custom-select-option::after {
|
|
grid-area: select;
|
|
}
|
|
|
|
.custom-select::after,
|
|
.custom-select-skill::after,
|
|
.custom-select-alternate::after,
|
|
.custom-select-alternate-skill::after,
|
|
.custom-select-option::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 {
|
|
background-color: #8A8A8A;
|
|
}
|
|
|
|
.custom-select-alternate-skill::after {
|
|
background-color: #66c4ab;
|
|
}
|
|
|
|
.custom-select-option::after {
|
|
background-color: #56B4E9;
|
|
}
|
|
|
|
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-alternate-skill--disabled,
|
|
.custom-select-alternate-option--disabled {
|
|
cursor: not-allowed;
|
|
background-color: #eee;
|
|
background-image: linear-gradient(to top, #ddd, #eee 33%);
|
|
}
|
|
|
|
.custom-select-skill,
|
|
.custom-select-alternate-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: dodgerblue;
|
|
border: 8px;
|
|
border-bottom: 0px;
|
|
border-radius: 4px;
|
|
border-bottom-left-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
border-color: dodgerblue;
|
|
border-style: solid;
|
|
}
|
|
|
|
/* Style the buttons inside the tab */
|
|
.tab button {
|
|
background-color: #CCCCFF;
|
|
float: left;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 10px 10px;
|
|
margin-right: 0px;
|
|
transition: 0.3s;
|
|
font-size: 18px;
|
|
border: 0px;
|
|
}
|
|
|
|
/* Change background color of buttons on hover */
|
|
.tab button:hover {
|
|
background-color: #F0E442;
|
|
}
|
|
|
|
/* Create an active/current tab class */
|
|
.tab button.active {
|
|
background-color: #F0E442;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Configure sheet and tab buttons */
|
|
/* --------------------------------------------------- */
|
|
.sheet-characteristics,
|
|
.sheet-skills,
|
|
.sheet-powers,
|
|
.sheet-complications,
|
|
.sheet-gear,
|
|
.sheet-options {
|
|
display: none;
|
|
width: 680px;
|
|
background: dodgerblue;
|
|
border: 8px;
|
|
border-color: dodgerblue;
|
|
border-style: solid;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="characteristics"] ~ div.sheet-characteristics,
|
|
.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
|
|
.sheet-tabstoggle[value="powers"] ~ div.sheet-powers,
|
|
.sheet-tabstoggle[value="complications"] ~ div.sheet-complications,
|
|
.sheet-tabstoggle[value="gear"] ~ div.sheet-gear,
|
|
.sheet-tabstoggle[value="options"] ~ div.sheet-options {
|
|
display: block;
|
|
}
|
|
|
|
/* Styling for characteristics tab labels */
|
|
.sheet-characteristics label {
|
|
display:inline-block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Tally Bar styling */
|
|
/* --------------------------------------------------- */
|
|
|
|
.sheet-tallybar {
|
|
width: 680px;
|
|
background: dodgerblue;
|
|
border: 8px;
|
|
border-top: 0px;
|
|
border-radius: 4px;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
border-color: dodgerblue;
|
|
border-style: solid;
|
|
}
|
|
|
|
.sheet-flex-tallybar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
width: 668px;
|
|
height: 36px;
|
|
border: 3px solid #f6ee8d;
|
|
border-radius: 5px;
|
|
background: royalblue;
|
|
margin: 0px;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.sheet-flex-tallybar span {
|
|
color: white;
|
|
}
|
|
|
|
.sheet-flex-tallybar span:nth-child(1) {
|
|
color: white;
|
|
|
|
}
|
|
|
|
.sheet-flex-tallybar input[type=number] {
|
|
min-width: 52px;
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.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: 36px;
|
|
max-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Characteristics Tab styling */
|
|
/* --------------------------------------------------- */
|
|
|
|
.grid-container-tab-characteristics {
|
|
display: grid;
|
|
grid-template-areas: "leftGrid rightGrid";
|
|
grid-template-columns: 335px 335px;
|
|
max-width: 674px;
|
|
height: 801px;
|
|
font-size: 16px;
|
|
grid-gap: 5px;
|
|
background-color: royalblue;
|
|
border: 3px solid #f6ee8d;
|
|
border-radius: 5px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.grid-container-tab-characteristics input[readonly]{
|
|
background: #f4ec7a;
|
|
}
|
|
|
|
/* characteristics tab left side */
|
|
|
|
.grid-container-characteristics-leftGrid {
|
|
grid-area: leftGrid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"logo"
|
|
"bio"
|
|
"earnings"
|
|
"primaryAbilities"
|
|
"combatAbilities"
|
|
"movementAbilities";
|
|
grid-template-columns: 329px;
|
|
grid-gap: 0px;
|
|
background: royalblue;
|
|
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: logo graphic bio0 */
|
|
|
|
.item-characteristics-logo {
|
|
grid-area: logo;
|
|
padding: 2px;
|
|
background-color: royalblue;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Item: character bio bio1*/
|
|
|
|
.item-characteristics-bio {
|
|
max-width: 330px;
|
|
grid-area: bio;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
margin-left: 6px;
|
|
margin-bottom: 0px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
background-color: #f2cf7f;
|
|
border: solid 1px #ebb232;
|
|
border-bottom: none;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.item-characteristics-bio-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.item-characteristics-bio-row h1 {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.item-characteristics-bio-row input[type=text] {
|
|
text-align:left;
|
|
width: 222px;
|
|
padding: 2px;
|
|
padding-left: 4px;
|
|
margin-left: 5px;
|
|
border: solid 1px #ebb232;
|
|
font-size: 13;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-characteristics-bio-row textarea {
|
|
width: 214px;
|
|
max-height: 36px;
|
|
padding: 2px;
|
|
padding-left: 4px;
|
|
margin-left: 5px;
|
|
border: solid 1px black;
|
|
text-align: left;
|
|
border: solid 1px #ebb232;
|
|
}
|
|
|
|
/* Item: character bio experience and money*/
|
|
|
|
.item-characteristics-earnings {
|
|
grid-area: earnings;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
max-width: 330px;
|
|
max-height: 27px;
|
|
margin-left: 6px;
|
|
margin-bottom: 6px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
background-color: #f4ec7a;
|
|
border: solid 1px #ebb232;
|
|
border-top: none;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.item-characteristics-earnings h1 {
|
|
padding-left: 3px;
|
|
padding-top: 4px;
|
|
line-height: 1.3;
|
|
min-width: 84px;
|
|
}
|
|
|
|
.item-characteristics-earnings input {
|
|
min-width: 54px;
|
|
padding-right: 0px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.item-characteristics-earnings input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
border: solid 1px #d8cd3b;
|
|
padding-top: 0px;
|
|
margin-bottom: 5px;
|
|
max-height: 22px;
|
|
}
|
|
|
|
.item-characteristics-earnings input[type=text] {
|
|
font-size: 13px;
|
|
max-width: 90px;
|
|
text-align: right;
|
|
background-color: #f4ec7a;
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
margin-bottom: 1px;
|
|
color: black;
|
|
}
|
|
|
|
.item-characteristics-earnings input[type=number]:nth-child(4) {
|
|
min-width: 70px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Item: core abilities */
|
|
.item-characteristics-primary-attributes {
|
|
grid-area: primaryAbilities;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
min-width: 300px;
|
|
min-height: 151px;
|
|
margin-left: 6px;
|
|
background-color: #f4ec7a;
|
|
border: solid 1px #ebb232;
|
|
border-bottom: none;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes input[readonly] {
|
|
text-align: center;
|
|
padding-right: 0px;
|
|
border: none;
|
|
max-width: 26px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #d8cd3b;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-heading,
|
|
.item-characteristics-primary-attributes-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
min-width: 285px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-heading {
|
|
background-color: #f2cf7f;
|
|
align-items: center;
|
|
max-height: 22px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-row {
|
|
max-height: 20px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-heading h2 {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-heading h2:nth-child(1) {
|
|
min-width: 113px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-row h2:nth-child(1) {
|
|
min-width: 108px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-heading h2:nth-child(5) {
|
|
min-width: 26px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-row input[type=text]:nth-child(3),
|
|
.item-characteristics-primary-attributes-heading h2:nth-child(n+2):nth-child(-n+4) {
|
|
min-width: 45px;
|
|
text-align: center;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-row input[type=text]:nth-child(5) {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* Item: combat abilities */
|
|
.item-characteristics-combat-attributes {
|
|
grid-area: combatAbilities;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-width: 300px;
|
|
min-height: 260px;
|
|
margin-left: 6px;
|
|
background-color: #f4ec7a;
|
|
border: solid 1px #ebb232;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes input[readonly] {
|
|
text-align: center;
|
|
padding-right: 0px;
|
|
border: none;
|
|
max-width: 26px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #d8cd3b;
|
|
margin-right: 116px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-heading,
|
|
.item-characteristics-combat-attributes-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
min-width: 285px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-heading {
|
|
background-color: #f2cf7f;
|
|
align-items: center;
|
|
max-height: 22px;
|
|
padding-left: 0px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-row {
|
|
max-height: 20px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-heading h2:nth-child(1) {
|
|
min-width: 115px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-heading h2:nth-child(2) {
|
|
min-width: 45px;
|
|
text-align: center;
|
|
margin-right: 121px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-heading h2:nth-child(3) {
|
|
min-width: 26px;
|
|
text-align: center;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-row h2:nth-child(1) {
|
|
min-width: 112px;
|
|
}
|
|
|
|
|
|
/* Item: combat movement abilities */
|
|
.item-characteristics-movement-abilities {
|
|
grid-area: movementAbilities;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-width: 300px;
|
|
max-height: 96px;
|
|
margin-left: 6px;
|
|
padding-bottom: 4px;
|
|
background-color: #f4ec7a;
|
|
border: solid 1px #ebb232;
|
|
border-top: none;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities input[readonly] {
|
|
text-align: center;
|
|
padding-right: 0px;
|
|
border: none;
|
|
max-width: 26px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #d8cd3b;
|
|
}
|
|
|
|
.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-movement-abilities-heading {
|
|
background-color: #f2cf7f;
|
|
max-height: 22px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-row {
|
|
max-height: 20px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-heading h2:nth-child(1) {
|
|
min-width: 115px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-row h2:nth-child(1) {
|
|
min-width: 112px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-heading h2:nth-child(n+2):nth-child(-n+3) {
|
|
min-width: 45px;
|
|
text-align: center;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-heading h2:nth-child(n+4) {
|
|
min-width: 26px;
|
|
text-align: center;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-row input[type=text]:nth-child(5) {
|
|
font-weight: bold;
|
|
color: white;
|
|
background-color: #8A8A8A;
|
|
}
|
|
|
|
/* 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 22px 100px 419px;
|
|
background: royalblue;
|
|
max-height: 800px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
|
|
/* Item: character portrait graphic */
|
|
.item-characteristics-portrait {
|
|
grid-area: portrait;
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 250px;
|
|
padding: 0px;
|
|
height: 250px;
|
|
margin: 3px;
|
|
margin-left: 0px;
|
|
margin-top: 4px;
|
|
background-color: royalblue;
|
|
}
|
|
|
|
.item-characteristics-portrait textarea {
|
|
width: 242px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
margin-bottom: 4px;
|
|
background-color: lavender;
|
|
height: 242px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.item-characteristics-portrait img {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-left: 7px;
|
|
border-right: solid #959595 1px;
|
|
border-bottom: solid #959595 1px;
|
|
border-left: solid #adadad 1px;
|
|
border-top: solid #adadad 1px;
|
|
}
|
|
|
|
.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: 11%;
|
|
}
|
|
|
|
.item-characteristics-portrait .button-right-arrow {
|
|
top: 50%;
|
|
left: 95%;
|
|
}
|
|
|
|
.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 2px #8A8A8A;
|
|
height: 250px;
|
|
width: 250px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.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-powers-health {
|
|
padding: 6px;
|
|
width: 319px;
|
|
height: 56px;
|
|
margin: 0px;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
background-color: royalblue;
|
|
border: 3px solid #f6ee8d;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.item-characteristics-health {
|
|
grid-area: health;
|
|
}
|
|
|
|
.item-gear-health {
|
|
grid-area: gearHealth;
|
|
}
|
|
|
|
.item-powers-health {
|
|
grid-area: powerHealth;
|
|
}
|
|
|
|
.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: Turn Tracker Button Space */
|
|
|
|
.item-characteristics-turn-tracker {
|
|
grid-area: turnTracker;
|
|
width: 72px;
|
|
height: 22px;
|
|
padding: 0px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* Item: character history */
|
|
.item-characteristics-history {
|
|
grid-area: history;
|
|
text-align: left;
|
|
padding: 2px;
|
|
max-width: 343px;
|
|
background-color: inherit;
|
|
margin-bottom: 1px;
|
|
margin-right: 6px;
|
|
max-height: 402px;
|
|
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: 323px;
|
|
background-color: inherit;
|
|
max-height: 95px;
|
|
margin-left: 3px;
|
|
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: royalblue;
|
|
color: white;
|
|
font-weight: bold;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.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;
|
|
border-radius: 5px;
|
|
background-color: #cce8f8;
|
|
border: solid #bbe1f6 2px;
|
|
}
|
|
|
|
.subitem-characteristics-perception-column-container-first {
|
|
width: 70px;
|
|
}
|
|
|
|
.subitem-characteristics-perception-column-container {
|
|
width: 55px;
|
|
}
|
|
|
|
.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 #88caef;
|
|
}
|
|
|
|
.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: #cce8f8;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Options Tab */
|
|
/* --------------------------------------------------- */
|
|
|
|
.grid-container-tab-options {
|
|
display: grid;
|
|
grid-template-areas: ". . ."
|
|
". options ."
|
|
". . .";
|
|
grid-template-columns: 110px 500px 100px;
|
|
grid-template-rows: 100px 185px 100px;
|
|
font-size: 16px;
|
|
background-color: royalblue;
|
|
border: 3px solid #fff990;
|
|
border-radius: 5px;
|
|
margin-bottom: 1px;
|
|
min-height: 800px;
|
|
min-width: 674px;
|
|
}
|
|
|
|
.grid-container-tab-options h1 {
|
|
font-size: 14px;
|
|
margin-left: 0px;
|
|
color: black;
|
|
padding-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.grid-container-tab-options label {
|
|
max-width: 13px;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* Sub-Item: options */
|
|
.item-options {
|
|
grid-area: options;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding-left: 2px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
background-color: #f7f1a0;
|
|
margin: 5px;
|
|
width: 450px;
|
|
height: 308px;
|
|
margin: 0px;
|
|
border: solid 2px #f0c566;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.item-options-row,
|
|
.item-version-row {
|
|
align-items: baseline;
|
|
min-width: 400px;
|
|
max-height: 28px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.item-options-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Version Info */
|
|
/* --------------------------------------------------- */
|
|
|
|
.item-version-row {
|
|
display: grid;
|
|
grid-template-areas: "versionLabel versionInfo";
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.item-version-label h2 {
|
|
font-size: 13px;
|
|
max-height: 28px;
|
|
color: black;
|
|
}
|
|
|
|
.item-version-information input[readonly] {
|
|
background-color: transparent;
|
|
color: black;
|
|
max-width: 35px;
|
|
padding-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 {
|
|
background-color: #19a781;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
padding-left: 4px;
|
|
padding-right: 3.5px;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.buttonReset {
|
|
background-color: #E69F00;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.buttonTracker {
|
|
background-color: dodgerblue;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.button-Power-END-right,
|
|
.button-Power-END-left {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-right: 2px;
|
|
padding-left: 2px;
|
|
min-height: 16px;
|
|
max-height: 16px;
|
|
text-align: middle;
|
|
font-weight: bold;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.button-Power-END-left {
|
|
background-color: #8A8A8A;
|
|
margin-right: 0px;
|
|
min-width: 34px;
|
|
max-width: 35px;
|
|
}
|
|
|
|
.button-Power-END-right {
|
|
background-color: #8A8A8A;
|
|
margin-right: 0px;
|
|
min-width: 34px;
|
|
max-width: 35px;
|
|
}
|
|
|
|
.buttonRoll,
|
|
.buttonRollAttack,
|
|
.buttonRollActivate,
|
|
.buttonRollNormalAttack,
|
|
.buttonRollShieldAttack,
|
|
.buttonRollShow,
|
|
.buttonRollPower,
|
|
.buttonManeuverEND {
|
|
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: 15px;
|
|
}
|
|
|
|
.buttonRoll,
|
|
.buttonRollAttack,
|
|
.buttonRollActivate,
|
|
.buttonRollShieldAttack {
|
|
min-width: 25px;
|
|
max-width: 26px;
|
|
}
|
|
|
|
|
|
.buttonRollPower {
|
|
min-width: 32px;
|
|
max-width: 34px;
|
|
}
|
|
|
|
.button:hover,
|
|
.buttonRecover:hover,
|
|
.buttonReset:hover,
|
|
.buttonRoll:hover,
|
|
.buttonRollAttack:hover,
|
|
.buttonRollActivate:hover,
|
|
.buttonRollNormalAttack:hover,
|
|
.buttonRollShieldAttack:hover,
|
|
.buttonRollShow:hover,
|
|
.buttonRollPower:hover {
|
|
color: black;
|
|
background-color: lightgray;
|
|
text-align: center;
|
|
}
|
|
|
|
.button-Power-END-left:hover,
|
|
.button-Power-END-right:hover,
|
|
.buttonManeuverEND:hover {
|
|
background-color: #ff9900;
|
|
color: black;
|
|
}
|
|
|
|
.buttonRoll {
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
background-color: #E69F00;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.buttonRollAttack {
|
|
background-color: #D55E00;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.item-talent-heading .buttonRollShow,
|
|
.item-complication-heading .buttonRollShow,
|
|
.item-flex-maneuver .buttonRollAttack,
|
|
.item-flex-maneuver .buttonRollShow,
|
|
.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 to indicate normal damage. */
|
|
.weapon-normal-damage01[value="on"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon01"]:not(:hover),
|
|
.weapon-normal-damage02[value="on"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon02"]:not(:hover),
|
|
.weapon-normal-damage03[value="on"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon03"]:not(:hover),
|
|
.weapon-normal-damage04[value="on"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon04"]:not(:hover),
|
|
.weapon-normal-damage05[value="on"] ~ .subitem-tab-gear-flex-container-weapon-row .buttonRollAttack[name="act_attackWeapon05"]:not(:hover)
|
|
{
|
|
background-color: #009E73;
|
|
}
|
|
|
|
/* Change maneuver attack button color to indicate normal damage. */
|
|
.maneuver-normal-damage01[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack01"]:not(:hover),
|
|
.maneuver-normal-damage02[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack02"]:not(:hover),
|
|
.maneuver-normal-damage03[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack03"]:not(:hover),
|
|
.maneuver-normal-damage04[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack04"]:not(:hover),
|
|
.maneuver-normal-damage05[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack05"]:not(:hover),
|
|
.maneuver-normal-damage06[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack06"]:not(:hover),
|
|
.maneuver-normal-damage07[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack07"]:not(:hover),
|
|
.maneuver-normal-damage08[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack08"]:not(:hover),
|
|
.maneuver-normal-damage09[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack09"]:not(:hover)
|
|
{
|
|
background-color: #009E73;
|
|
}
|
|
|
|
/* Change maneuver attack button color to indicate a non-damaging defensive action. */
|
|
.maneuver-block01[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack01"]:not(:hover),
|
|
.maneuver-block02[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack02"]:not(:hover),
|
|
.maneuver-block03[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack03"]:not(:hover),
|
|
.maneuver-block04[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack04"]:not(:hover),
|
|
.maneuver-block05[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack05"]:not(:hover),
|
|
.maneuver-block06[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack06"]:not(:hover),
|
|
.maneuver-block07[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack07"]:not(:hover),
|
|
.maneuver-block08[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack08"]:not(:hover),
|
|
.maneuver-block09[value="on"] ~ .item-flex-maneuver .buttonRollAttack[name="act_maneuverAttack09"]:not(:hover)
|
|
{
|
|
background-color: #56B4E9;
|
|
}
|
|
|
|
.buttonRollActivate {
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
background-color: #0072B2;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.buttonRollNormalAttack,
|
|
.buttonManeuverEND,
|
|
.buttonRollShow {
|
|
margin-right: 3px;
|
|
margin-left: 3px;
|
|
border-radius: 3px;
|
|
min-width: 34px;
|
|
max-width: 36px;
|
|
}
|
|
|
|
.buttonRollNormalAttack {
|
|
margin-left: 61px;
|
|
background-color: #D55E00;
|
|
}
|
|
|
|
.buttonManeuverEND {
|
|
background-color: #8A8A8A;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.buttonRollShow {
|
|
background-color: #8A8A8A;
|
|
}
|
|
|
|
.buttonRollShieldAttack {
|
|
background-color: #56B4E9;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.buttonRollPower {
|
|
background-color: #CC79A7;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Custom Checkbox used for options */
|
|
/* From w3 schools */
|
|
/* --------------------------------------------------- */
|
|
|
|
/* Customize the label (the container) */
|
|
.container-checkbox {
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left: 25px;
|
|
padding-top: 2px;
|
|
/* margin-bottom: 10px; */
|
|
cursor: pointer;
|
|
max-width: 400px;
|
|
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-gray 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 a grey background color */
|
|
.container-checkbox:hover input ~ .checkmark,
|
|
.container-checkbox-small:hover input ~ .checkmark-small {
|
|
background-color: #edbb4c;
|
|
border: solid 1px #E69F00;
|
|
}
|
|
|
|
.container-checkbox-small-gray:hover input ~ .checkmark-small-gray {
|
|
background-color: #56B4E9;
|
|
border: solid 1px #4490ba;
|
|
}
|
|
|
|
/* When the checkbox is checked, add a gold background */
|
|
.container-checkbox input:checked ~ .checkmark,
|
|
.container-checkbox-small input:checked ~ .checkmark-small {
|
|
background-color: #f2cf7f;
|
|
}
|
|
|
|
.container-checkbox-small-gray input:checked ~ .checkmark-small-gray {
|
|
background-color: #99d2f1;
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.checkmark:after,
|
|
.checkmark-small:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
border: solid 1px #E69F00;
|
|
}
|
|
|
|
.checkmark-small-gray:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
border: solid 1px #56B4E9;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.container-checkbox input:checked ~ .checkmark:after,
|
|
.container-checkbox-small input:checked ~ .checkmark-small:after,
|
|
.container-checkbox-small-gray input:checked ~ .checkmark-small-gray: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-gray {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
padding-top: 0px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
max-width: 20px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.checkmark-small {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 15px;
|
|
width: 15px;
|
|
background-color: #f2cf7f;
|
|
}
|
|
|
|
.checkmark-small-gray {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 15px;
|
|
width: 15px;
|
|
background-color: #99d2f1;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.container-checkbox-small .checkmark-small:after,
|
|
.container-checkbox-small-gray .checkmark-small-gray: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);
|
|
}
|
|
|
|
|
|
.subitem-flex-container-martial-cv-damage-row .container-checkbox-small-gray {
|
|
margin-bottom: 14px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Custom Checkboxes used for turn segment indicators */
|
|
/* Modification of custom checkbox above */
|
|
/* --------------------------------------------------- */
|
|
|
|
.grid-container-container-turn-segments {
|
|
grid-area: turnSegmentIndicators;
|
|
display: inline-flex; /* or inline-flex */
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: top;
|
|
justify-content: space-evenly;
|
|
width: 264px;
|
|
height: 24px;
|
|
background: royalblue;
|
|
margin-top: 2px;
|
|
margin-left: 1px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.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: 20px;
|
|
background-color: dodgerblue;
|
|
border: none;
|
|
border-radius: 5px;
|
|
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: 5px;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Talents, Perks, and Complications */
|
|
/* --------------------------------------------------- */
|
|
.grid-container-complications-talents {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-areas:
|
|
"theTalentsAndPerks theComplications"
|
|
"theNotes theNotes";
|
|
grid-template-columns: 338px 338px;
|
|
grid-template-rows: 642px 160px;
|
|
width: 676px;
|
|
padding: 0px;
|
|
font-size: 16px;
|
|
background-color: dodgerblue;
|
|
justify-content: middle;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.grid-container-complications-talents h2 {
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Complications and Talents Tab: Talents and Perks */
|
|
.flex-container-complications-talents-left {
|
|
grid-area: theTalentsAndPerks;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
border: 3px solid #f0c566;
|
|
border-radius: 5px;
|
|
width: 321px;
|
|
background: #f4ec7a;
|
|
height: 630px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.item-talent-heading {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
width: 321px;
|
|
}
|
|
|
|
.item-talent-heading input[type=text] {
|
|
max-width: 200px;
|
|
padding: 1px;
|
|
padding-left: 3px;
|
|
margin: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 2px;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
border: solid 1px #f2cf7f;
|
|
}
|
|
|
|
.item-talent-heading input[type=number] {
|
|
max-width: 45px;
|
|
padding: 2px;
|
|
margin: 0px;
|
|
padding-right: 0px;
|
|
text-align: right;
|
|
border: solid 1px #f2cf7f;
|
|
}
|
|
|
|
.item-talent-heading h1 {
|
|
font-size: 12px;
|
|
line-height: 1.1;
|
|
padding-right: 2px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.item-talent-textbox textarea {
|
|
max-width: 314px;
|
|
max-height: 36px;
|
|
padding: 3px;
|
|
border: solid 1px #f2cf7f;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
|
|
/* Complications and Talents Tab: Complications */
|
|
.flex-container-complications-talents-right {
|
|
grid-area: theComplications;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
border: 3px solid #66bbeb; /* Color Block Alt */
|
|
border-radius: 5px;
|
|
width: 321px;
|
|
background: #aad9f4;
|
|
height: 630px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.item-complication-heading {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
width: 322px;
|
|
}
|
|
|
|
.item-complication-heading input[type=text] {
|
|
max-width: 210px;
|
|
padding: 1px;
|
|
padding-left: 3px;
|
|
margin: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 2px;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
border: solid 1px #88caef;
|
|
}
|
|
|
|
.item-complication-heading input[type=number] {
|
|
max-width: 45px;
|
|
padding: 2px;
|
|
margin: 0px;
|
|
padding-right: 0px;
|
|
text-align: right;
|
|
border: solid 1px #88caef;
|
|
}
|
|
|
|
.item-complication-heading h1 {
|
|
font-size: 12px;
|
|
line-height: 1.1;
|
|
padding-right: 2px;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.item-complication-textbox textarea {
|
|
max-width: 314px;
|
|
max-height: 54px;
|
|
padding: 3px;
|
|
border: solid 1px #88caef;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* Complications Tab: Notes Text Panel */
|
|
|
|
.flex-container-complications-bottom {
|
|
grid-area: theNotes;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
border: none;
|
|
width: 679px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
min-height: 155px;
|
|
background: transparent;
|
|
}
|
|
|
|
.flex-container-complications-bottom textarea {
|
|
width: 331px;
|
|
min-height: 155px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 3px solid lightgray;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
}
|
|
|
|
/* ----------------------------------------------------- */
|
|
/* Powers */
|
|
/* Organized in two columns with different color styles. */
|
|
/* ----------------------------------------------------- */
|
|
.grid-container-powers {
|
|
display: grid;
|
|
grid-gap: 5px 5px;
|
|
grid-template-areas:
|
|
"leftPowers powerHealth"
|
|
"leftPowers rightPowers";
|
|
grid-template-columns: 337px 336px;
|
|
grid-template-rows: 74px 727px;
|
|
width: 679px;
|
|
padding: 0px;
|
|
font-size: 16px;
|
|
background-color: dodgerblue;
|
|
justify-content: middle;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.grid-container-powers 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.35;
|
|
}
|
|
|
|
.grid-container-powers input[type=number] {
|
|
padding-right: 0px;
|
|
padding-top: 2px;
|
|
width: 30px;
|
|
margin: 0px;
|
|
text-align: right;
|
|
height: 21px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.flex-container-powers-right,
|
|
.flex-container-powers-left {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
border-radius: 5px;
|
|
width: 323px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.flex-container-powers-left,
|
|
.flex-container-powers-right {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.flex-container-powers-left {
|
|
height: 795px;
|
|
}
|
|
|
|
.flex-container-powers-right {
|
|
height: 716px;
|
|
}
|
|
|
|
.flex-container-powers-left textarea,
|
|
.flex-container-powers-right textarea {
|
|
height: 54px;
|
|
padding: 3px;
|
|
margin: 0px;
|
|
margin-top: 1px;
|
|
font-size: 8;
|
|
}
|
|
|
|
.flex-container-powers-left textarea {
|
|
max-width: 316px;
|
|
}
|
|
|
|
.flex-container-powers-right textarea {
|
|
max-width: 315px;
|
|
}
|
|
|
|
/* Power subitems. */
|
|
|
|
.item-flex-power {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-top: 2px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left,
|
|
.subitem-flex-power-heading-right,
|
|
.subitem-flex-power-effect-left,
|
|
.subitem-flex-power-effect-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-top: 1px;
|
|
margin-bottom: 0px;
|
|
align-items: center;
|
|
max-height: 23px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left input[type=text],
|
|
.subitem-flex-power-heading-right input[type=text],
|
|
.subitem-flex-power-effect-left input[type=text],
|
|
.subitem-flex-power-effect-right input[type=text] {
|
|
min-height: 22px;
|
|
text-align: left;
|
|
padding-left: 2px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left input[type=text]:nth-child(2),
|
|
.subitem-flex-power-heading-right input[type=text]:nth-child(2) {
|
|
font-weight: bold;
|
|
max-width: 130px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left input[type=text]:nth-child(4),
|
|
.subitem-flex-power-heading-right input[type=text]:nth-child(4) {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left select,
|
|
.subitem-flex-power-heading-right select {
|
|
font-size: 13px;
|
|
height: 19px;
|
|
width: 98px;
|
|
margin: 0px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
/* Effect */
|
|
.subitem-flex-power-effect-left input[type=text]:nth-child(2),
|
|
.subitem-flex-power-effect-right input[type=text]:nth-child(2){
|
|
max-width: 130px;
|
|
max-height: 23px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
/* Dice */
|
|
.subitem-flex-power-effect-left input[type=text]:nth-child(3),
|
|
.subitem-flex-power-effect-right input[type=text]:nth-child(3) {
|
|
max-width: 58px;
|
|
text-align: center;
|
|
margin-left: 2px;
|
|
margin-right: 0px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
/* Roll chance */
|
|
.subitem-flex-power-effect-left input[type=number]:nth-child(5),
|
|
.subitem-flex-power-effect-right input[type=number]:nth-child(5) {
|
|
max-width: 41px;
|
|
min-width: 41px;
|
|
text-align: right;
|
|
margin-left: 1px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.subitem-flex-power-activeCost input[type=number]:nth-child(2), /* Advantages */
|
|
.subitem-flex-power-activeCost input[type=number]:nth-child(4) /* Limitations */ {
|
|
border: solid 1px #89ABB9;
|
|
min-width: 55px;
|
|
}
|
|
|
|
/* Powers Tab: Left Powers and general to right. */
|
|
.flex-container-powers-left {
|
|
grid-area: leftPowers;
|
|
border: 3px solid #66bbeb;
|
|
background: #aad9f4;
|
|
}
|
|
|
|
.flex-container-powers-left textarea {
|
|
border: solid 1px black;
|
|
}
|
|
|
|
.flex-container-powers-left input[readonly]{
|
|
background: #ddf0fa;
|
|
border: solid 1px #88caef;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.flex-container-powers-left textarea{
|
|
border: 1px solid #88caef;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left input[type=text]{
|
|
border: solid 1px #88caef;
|
|
max-width: 28px;
|
|
}
|
|
|
|
.subitem-flex-power-effect-left input[type=text],
|
|
.subitem-flex-power-effect-left input[type=number]{
|
|
border: solid 1px #88caef;
|
|
}
|
|
|
|
.subitem-flex-power-points-block-left,
|
|
.subitem-flex-power-points-block-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-height: 23px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.subitem-flex-power-points-block-left input[type=number] {
|
|
/* Active, Real Cost */
|
|
border: solid 1px #99d2f1;
|
|
}
|
|
|
|
.subitem-flex-power-points-block-left input[readonly] {
|
|
/* Active, Real Cost */
|
|
max-width: 38px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left,
|
|
.subitem-flex-power-limitations-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 333px;
|
|
margin-bottom: 2px;
|
|
max-height: 23px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left input[type=number]{
|
|
/* Advantages, limitations */
|
|
border: solid 1px #99d2f1;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left select,
|
|
.subitem-flex-power-limitations-right select {
|
|
font-size: 13px;
|
|
height: 19px;
|
|
max-width: 115px;
|
|
margin: 0px;
|
|
align-items: center;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
|
|
/* Powers Tab: Right Powers */
|
|
.flex-container-powers-right {
|
|
grid-area: rightPowers;
|
|
border: 3px solid #f0c566;
|
|
background: #f4ec7a; /* Color Block */
|
|
}
|
|
|
|
.flex-container-powers-right textarea {
|
|
border: solid 1px black;
|
|
}
|
|
|
|
.flex-container-powers-right input[readonly]{
|
|
background: #faf6c6;
|
|
border: solid 1px #f2cf7f;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.flex-container-powers-right textarea{
|
|
border: 1px solid #f2cf7f;
|
|
}
|
|
|
|
.subitem-flex-power-heading-right input[type=text] {
|
|
max-width: 28px;
|
|
border: solid 1px #f2cf7f;
|
|
}
|
|
|
|
.subitem-flex-power-effect-right input[type=text],
|
|
.subitem-flex-power-effect-right input[type=number]{
|
|
border: solid 1px #f2cf7f;
|
|
}
|
|
|
|
.subitem-flex-power-points-block-right input[type=number] {
|
|
/* Active, Real Cost */
|
|
border: solid 1px #f2cf7f;
|
|
}
|
|
|
|
.subitem-flex-power-points-block-right input[readonly] {
|
|
/* Active, Real Cost */
|
|
max-width: 38px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-right input[type=number]{
|
|
/* Advantages, limitations */
|
|
border: solid 1px #f2cf7f;
|
|
min-width: 50px;
|
|
}
|
|
|
|
|
|
/* Buttons for weapon, power, talent, and complication movers. */
|
|
.weapon-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;
|
|
}
|
|
|
|
.power-mover-plus-minus-button,
|
|
.talent-mover-plus-minus-button,
|
|
.complication-mover-plus-minus-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 24px;
|
|
width: 10px;
|
|
align-items: center;
|
|
padding: 0px;
|
|
margin-right: 2px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-right .power-mover-plus-minus-button button.buttonPlus,
|
|
.subitem-flex-power-heading-right .power-mover-plus-minus-button button.buttonMinus,
|
|
.subitem-flex-power-heading-left .power-mover-plus-minus-button button.buttonPlus,
|
|
.subitem-flex-power-heading-left .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 {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
margin: 0px 0px;
|
|
line-height: 1.125ch;
|
|
border-radius: 0px;
|
|
max-width: 10px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-right .power-mover-plus-minus-button button.buttonPlus,
|
|
.subitem-flex-power-heading-right .power-mover-plus-minus-button button.buttonMinus,
|
|
.talent-mover-plus-minus-button button.buttonPlus,
|
|
.talent-mover-plus-minus-button button.buttonMinus {
|
|
background-color: white; /* Color Mover */
|
|
border: solid 1px #a1a1a1; /* Color Mover Border */
|
|
color: #8A8A8A; /* Color Mover Chevron */
|
|
}
|
|
|
|
.subitem-flex-power-heading-left .power-mover-plus-minus-button button.buttonPlus,
|
|
.subitem-flex-power-heading-left .power-mover-plus-minus-button button.buttonMinus,
|
|
.complication-mover-plus-minus-button button.buttonPlus,
|
|
.complication-mover-plus-minus-button button.buttonMinus {
|
|
background-color: white; /* Color Mover */
|
|
border: solid 1px #56B4E9; /* Color Mover Border */
|
|
color: #56B4E9; /* Color Mover Chevron */
|
|
}
|
|
|
|
.power-mover-plus-minus-button button.buttonPlus span,
|
|
.power-mover-plus-minus-button button.buttonMinus span,
|
|
.talent-mover-plus-minus-button button.buttonPlus span,
|
|
.talent-mover-plus-minus-button button.buttonMinus span,
|
|
.complication-mover-plus-minus-button button.buttonPlus span,
|
|
.complication-mover-plus-minus-button button.buttonMinus span {
|
|
display: inline-block;
|
|
transform: rotate(-90deg);
|
|
text-align: center;
|
|
}
|
|
|
|
.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; /* Color Mover Hover */
|
|
color: white; /* Color Mover Chevron Hover */
|
|
transition: 0.05s;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- */
|
|
/* Skills */
|
|
/* Organized into a 2x3 grid of containers */
|
|
/* ----------------------------------------------------- */
|
|
.grid-container-skills-tab {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"theSkills1 theCombatSkills"
|
|
"theSkills2 theLanguageSkills"
|
|
"theSkills3 theEnhancers";
|
|
grid-gap: 6px;
|
|
grid-template-columns: 358px 322px;
|
|
grid-template-rows: 273px 251px 259px;
|
|
max-width: 692px;
|
|
padding: 0px;
|
|
padding-left: 0px;
|
|
padding-top: 6px;
|
|
margin-bottom: 0px;
|
|
font-size: 16px;
|
|
background-color: #f0c566;
|
|
border: 3px solid #f6ee8d;
|
|
border-radius: 5px;
|
|
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;
|
|
}
|
|
|
|
.grid-container-skills-tab .custom-select,
|
|
.grid-container-skills-tab .custom-select-skill,
|
|
.grid-container-skills-tab .custom-select-alternate,
|
|
.grid-container-skills-tab .custom-select-alternate-skill {
|
|
font-size: 13px;
|
|
max-width: 110px;
|
|
margin-left: 3px;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
/* Item: Skill Containers for Skill Groups 01, 02, and 03 */
|
|
.item-skillsTab-flex-container-skills-group01,
|
|
.item-skillsTab-flex-container-skills-group02,
|
|
.item-skillsTab-flex-container-skills-group03 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
max-width: 358px;
|
|
margin-left: 5px;
|
|
background-color: #f6ee8d;
|
|
border: solid 2px #ebb232;
|
|
border-radius: 3px;
|
|
line-height: 1.10;
|
|
padding-left: 1px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group01 {
|
|
grid-area: theSkills1;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group02 {
|
|
grid-area: theSkills2;
|
|
padding-top: 3px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group03 {
|
|
grid-area: theSkills3;
|
|
padding-top: 3px;
|
|
padding-bottom: 2px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group01 input[type=number],
|
|
.item-skillsTab-flex-container-skills-group02 input[type=number],
|
|
.item-skillsTab-flex-container-skills-group03 input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
border: solid 1px #F0E442;
|
|
max-height: 22px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group01 input[readonly],
|
|
.item-skillsTab-flex-container-skills-group02 input[readonly],
|
|
.item-skillsTab-flex-container-skills-group03 input[readonly] {
|
|
text-align: center;
|
|
background-color: #f6ee8d;
|
|
border: transparent;
|
|
max-width: 24px;
|
|
}
|
|
|
|
.item-skillsTab-flex-container-skills-group01 input[type=text]:nth-child(1),
|
|
.item-skillsTab-flex-container-skills-group02 input[type=text]:nth-child(1),
|
|
.item-skillsTab-flex-container-skills-group03 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: 1px;
|
|
padding-right: 1px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
/* 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 26px 38px 46px;
|
|
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;
|
|
max-height: 24px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Buttons for skill movers. */
|
|
.skill-mover-plus-minus-enclosure {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.skill-mover-plus-minus-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 24px;
|
|
width: 10px;
|
|
align-items: center;
|
|
padding: 0px;
|
|
margin-right: 2px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.skill-mover-plus-minus-button button.buttonPlus,
|
|
.skill-mover-plus-minus-button button.buttonMinus {
|
|
background-color: #fcf9d9; /* Color Mover */
|
|
border: solid 1px #b8b8b8; /* Color Mover Border */
|
|
color: #a1a1a1; /* Color Mover Chevron */
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
margin: 0px 0px;
|
|
line-height: 1.25ch;
|
|
border-radius: 0px;
|
|
max-width: 10px;
|
|
}
|
|
|
|
.skill-mover-plus-minus-button button.buttonPlus span,
|
|
.skill-mover-plus-minus-button button.buttonMinus span {
|
|
display: inline-block;
|
|
transform: rotate(-90deg);
|
|
text-align: center;
|
|
}
|
|
|
|
.skill-mover-plus-minus-button button.buttonPlus:hover,
|
|
.skill-mover-plus-minus-button button.buttonMinus:hover {
|
|
background-color: #8A8A8A;
|
|
color: white;
|
|
transition: 0.05s;
|
|
}
|
|
|
|
/* Item: Skill Container for combat skills. */
|
|
.item-skillsTab-grid-container-combat-skills {
|
|
grid-area: theCombatSkills;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: 292px;
|
|
max-height: 273px;
|
|
background-color: #f6ee8d;
|
|
border: solid 2px #ebb232;
|
|
border-radius: 3px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-bottom: 3px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skill,
|
|
.subitem-skillsTab-flex-container-combat-levels {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
min-width: 285px;
|
|
}
|
|
|
|
.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: 170px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skill h1:nth-child(3) {
|
|
padding-left: 9px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skill h1:nth-child(4) {
|
|
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: 2px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skill .custom-select {
|
|
max-width: 55px;
|
|
text-align: center;
|
|
height: 19px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.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: 45px;
|
|
max-height: 22px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skill input[type=text]:nth-child(5),
|
|
.subitem-skillsTab-flex-container-combat-levels input[readonly] {
|
|
text-align: center;
|
|
background-color: transparent;
|
|
max-width: 22px;
|
|
margin: 0px;
|
|
margin-left: 2px;
|
|
border: transparent;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-levels h1:nth-child(1) {
|
|
text-align: left;
|
|
min-width: 219px;
|
|
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;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language,
|
|
.subitem-skillsTab-flex-container-language-heading {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
min-width: 285px;
|
|
}
|
|
|
|
.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;
|
|
min-width: 165px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language-heading h1:nth-child(2) {
|
|
padding-left: 6px;
|
|
min-width: 55px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language-heading h1:nth-child(3) {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language-heading h1:nth-child(4) {
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.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: 2px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language input[readonly] {
|
|
text-align: center;
|
|
background-color: transparent;
|
|
max-width: 22px;
|
|
margin-right: 1px;
|
|
border: transparent;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language .container-checkbox-small {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.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-grid-container-enhancers {
|
|
grid-area: theEnhancers;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: 295px;
|
|
max-height: 246px;
|
|
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: 4px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-enhancers-row,
|
|
.subitem-skillsTab-flex-container-levels-row {
|
|
height: 19px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-enhancers-row .container-checkbox-small {
|
|
padding: 0px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-enhancers-row h1{
|
|
max-height: 16px;
|
|
text-align: left;
|
|
min-width: 245px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-enhancers-row input[readonly],
|
|
.subitem-skillsTab-flex-container-levels-row input[readonly] {
|
|
text-align: center;
|
|
background-color: transparent;
|
|
max-width: 22px;
|
|
margin-right: 3px;
|
|
padding-bottom: 4px;
|
|
border: transparent;
|
|
}
|
|
|
|
.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: solid 1px #F0E442;
|
|
}
|
|
|
|
/* ----------------------------------------------------- */
|
|
/* 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"
|
|
"theWeapons theWeapons theWeapons"
|
|
"theEquipment theSlides theSlides";
|
|
grid-gap: 8px;
|
|
grid-template-columns: 250px 336px 84px;
|
|
grid-template-rows: 63px 174px 155px 322px;
|
|
max-width: 692px;
|
|
padding: 0px;
|
|
padding-left: 2px;
|
|
font-size: 16px;
|
|
background-color: royalblue;
|
|
border: 3px solid #f6ee8d;
|
|
border-radius: 5px;
|
|
justify-content: middle;
|
|
min-height: 801px;
|
|
}
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
.grid-container-tab-gear .custom-select {
|
|
font-size: 13px;
|
|
max-width: 110px;
|
|
max-height: 19px;
|
|
}
|
|
|
|
/* Health status styling grouped with item-health-characteristics */
|
|
|
|
/* Encumbrance */
|
|
.item-tab-gear-flex-container-encumbrance {
|
|
grid-area: theEncumbrance;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-left: 4px;
|
|
margin-top: 6px;
|
|
padding: 0px;
|
|
max-width: 594px;
|
|
max-height: 56px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
background-color: royalblue;
|
|
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]{
|
|
text-align: center;
|
|
max-width: 70px;
|
|
background-color: #F0E442;
|
|
border: solid 1px #ebb232;
|
|
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: 80px;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-encumbrance-bonus {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-plus-minus-enclosure {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: #F0E442;
|
|
justify-content: space-between;
|
|
width: 50px;
|
|
max-height: 20px;
|
|
border: solid 1px #ebb232;
|
|
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;
|
|
max-width: 594px;
|
|
padding-left: 5px;
|
|
margin-left: 4px;
|
|
padding-top: 0px;
|
|
grid-gap: 3px;
|
|
background-color: #f6ee8d;
|
|
border: solid 2px #ebb232;
|
|
border-radius: 3px;
|
|
min-height: 179px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 575px;
|
|
margin-bottom: 1px;
|
|
height: 24px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(1) {
|
|
min-width: 134px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(2),
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(3),
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(4),
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(5) {
|
|
min-width: 34px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(6) {
|
|
min-width: 44px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(7) {
|
|
min-width: 34px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(8) {
|
|
min-width: 32px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(9) {
|
|
min-width: 98px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(10) {
|
|
min-width: 46px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input {
|
|
max-height: 22px;
|
|
}
|
|
|
|
.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;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1),
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(10) {
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
margin-right: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1) {
|
|
text-align: left;
|
|
max-width: 120px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(10) {
|
|
text-align: center;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(11) {
|
|
text-align: right;
|
|
min-width: 48px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row select {
|
|
text-align-last: center; /* For Chrome */
|
|
text-align: center; /* Firefox */
|
|
}
|
|
|
|
/* Shield */
|
|
|
|
.subitem-tab-gear-flex-container-shield {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1 {
|
|
margin-bottom: 3px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input {
|
|
max-height: 21px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row label {
|
|
max-width: 5px;
|
|
margin-left: 2px;
|
|
margin-top: 3px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row .container-checkbox-small {
|
|
padding-left: 10px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(1) {
|
|
min-width: 120px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(3) {
|
|
min-width: 67px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(4) {
|
|
min-width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(6) {
|
|
min-width: 38px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(7) {
|
|
min-width: 48px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(5),
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(8),
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(9) {
|
|
min-width: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(2),
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(10),
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(11) {
|
|
min-width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row h1:nth-child(12) {
|
|
min-width: 42px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1),
|
|
.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
margin-right: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(1) {
|
|
max-width: 120px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[type=text]:nth-child(3) {
|
|
max-width: 65px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[readonly]:nth-child(9){
|
|
background-color: inherit;
|
|
text-align: center;
|
|
padding-left: 0px;
|
|
max-width: 24px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 3px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[type=number] {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
max-width: 38px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row input[type=number]:nth-child(12) {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
min-width: 42px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-shield-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 576px;
|
|
}
|
|
|
|
/* ------------- */
|
|
/* Item: Weapons */
|
|
/* ------------- */
|
|
.item-tab-gear-flex-container-weapons {
|
|
grid-area: theWeapons;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
margin-left: 4px;
|
|
padding: 0px;
|
|
padding-left: 5px;
|
|
margin-top: 8px;
|
|
max-height: 145px;
|
|
max-width: 655px;
|
|
background-color: #f6ee8d;
|
|
border: solid 2px #ebb232;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 650px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input {
|
|
max-height: 21px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1 {
|
|
min-width: 39px;
|
|
text-align: center;
|
|
}
|
|
|
|
.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-weapon-row h1:nth-child(1) {
|
|
min-width: 140px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(2) {
|
|
min-width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(3) {
|
|
min-width: 26px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(4) {
|
|
min-width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(5) {
|
|
min-width: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(6) {
|
|
min-width: 42x;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(7) {
|
|
min-width: 42px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(8) {
|
|
min-width: 44px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(9) {
|
|
min-width: 31px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(10) {
|
|
min-width: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(11) {
|
|
min-width: 42px;
|
|
text-align: center;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(12) {
|
|
min-width: 32px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(13) {
|
|
min-width: 32px;
|
|
text-align: right;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(1) {
|
|
text-align: left;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
max-width: 120px;
|
|
margin-right: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(3) {
|
|
text-align: center;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
max-width: 68px;
|
|
margin-right: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row .container-checkbox-small {
|
|
padding-left: 10px;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row button:nth-child(5) {
|
|
margin-left: 0px;
|
|
margin-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(7),
|
|
.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(10) {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
max-width: 38px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.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),
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(14) {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
max-width: 46px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px #F0E442;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(11){
|
|
background-color: inherit;
|
|
text-align: center;
|
|
padding-left: 0px;
|
|
max-width: 24px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
margin-top: 3px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* --------------- */
|
|
/* Item: Equipment */
|
|
/* --------------- */
|
|
.item-tab-gear-flex-container-equipment {
|
|
grid-area: theEquipment;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: 248px;
|
|
margin-left: 4px;
|
|
padding: 4px;
|
|
padding-top: 3px;
|
|
background-color: #cce8f8;
|
|
border: solid 2px #88caef;
|
|
border-radius: 3px;
|
|
height: 367px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-equipment {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-equipment h1 {
|
|
margin-right: 8px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-equipment input[type=text] {
|
|
text-align: left;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
max-width: 162px;
|
|
max-height: 21px;
|
|
margin-right: 0px;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
/* Buttons for equipment movers. */
|
|
|
|
.weapon-mover-plus-minus-enclosure,
|
|
.maneuver-mover-plus-minus-enclosure,
|
|
.gear-mover-plus-minus-enclosure {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.armor-mover-plus-minus-button,
|
|
.weapon-mover-plus-minus-button,
|
|
.maneuver-mover-plus-minus-button,
|
|
.gear-mover-plus-minus-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 22px;
|
|
width: 10px;
|
|
align-items: center;
|
|
padding: 0px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.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,
|
|
.maneuver-mover-plus-minus-button button.buttonPlus,
|
|
.maneuver-mover-plus-minus-button button.buttonMinus,
|
|
.gear-mover-plus-minus-button button.buttonPlus,
|
|
.gear-mover-plus-minus-button button.buttonMinus {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
display: inline-block;
|
|
font-size: 8px;
|
|
margin: 0px 0px;
|
|
line-height: 1.25ch;
|
|
border-radius: 0px;
|
|
max-width: 10px;
|
|
}
|
|
|
|
.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 {
|
|
background-color: #fcf9d9; /* Color Mover */
|
|
border: solid 1px #b8b8b8; /* Color Mover Border */
|
|
color: #a1a1a1; /* Color Mover Chevron */
|
|
}
|
|
|
|
.maneuver-mover-plus-minus-button button.buttonPlus,
|
|
.maneuver-mover-plus-minus-button button.buttonMinus,
|
|
.gear-mover-plus-minus-button button.buttonPlus,
|
|
.gear-mover-plus-minus-button button.buttonMinus {
|
|
background-color: white;
|
|
border: solid 1px #99d2f1;
|
|
color: #66aad0;
|
|
}
|
|
|
|
.armor-mover-plus-minus-button button.buttonPlus span,
|
|
.armor-mover-plus-minus-button button.buttonMinus span,
|
|
.weapon-mover-plus-minus-button button.buttonPlus span,
|
|
.weapon-mover-plus-minus-button button.buttonMinus span,
|
|
.maneuver-mover-plus-minus-button button.buttonPlus span,
|
|
.maneuver-mover-plus-minus-button button.buttonMinus span,
|
|
.gear-mover-plus-minus-button button.buttonPlus span,
|
|
.gear-mover-plus-minus-button button.buttonMinus span {
|
|
display: inline-block;
|
|
transform: rotate(-90deg);
|
|
text-align: center;
|
|
}
|
|
|
|
.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,
|
|
.maneuver-mover-plus-minus-button button.buttonPlus:hover,
|
|
.maneuver-mover-plus-minus-button button.buttonMinus:hover,
|
|
.gear-mover-plus-minus-button button.buttonPlus:hover,
|
|
.gear-mover-plus-minus-button button.buttonMinus:hover {
|
|
background-color: #a1a1a1;
|
|
transition: 0.05s;
|
|
color: white;
|
|
}
|
|
|
|
/* ----------------------------------------------------------- */
|
|
/* Item: Attacks and Maneuvers or treasures text box slideshow */
|
|
/* ----------------------------------------------------------- */
|
|
|
|
.item-tab-gear-slide-container {
|
|
grid-area: theSlides;
|
|
position: relative;
|
|
}
|
|
|
|
.item-tab-gear-slide-container h1 {
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
font-size: 12px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-tab-gear-slide-container h2 {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.item-tab-gear-slide-container .button-left-arrow {
|
|
position: absolute;
|
|
top: 4.5%;
|
|
left: 88%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
background-color: #8A8A8A;
|
|
font-size: 12px;
|
|
padding: 1px 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-tab-gear-slide-container .button-right-arrow {
|
|
position: absolute;
|
|
top: 4.5%;
|
|
left: 92.5%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
background-color: #8A8A8A;
|
|
font-size: 12px;
|
|
padding: 1px 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-tab-gear-slide-container .button-right-arrow:hover,
|
|
.item-tab-gear-slide-container .button-left-arrow:hover {
|
|
background-color: #F0E442;
|
|
border: solid 1px #8A8A8A;
|
|
color: black;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-maneuvers,
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers {
|
|
width: 406px;
|
|
height: 374px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
margin-bottom: 0px;
|
|
background-color: #cce8f8;
|
|
border: solid 2px #88caef;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-top: 6px;
|
|
max-height: 310px;
|
|
min-height: 270px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text] {
|
|
border: solid 1px #bbe1f6;
|
|
height: 22px;
|
|
width: 30px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-row input {
|
|
text-align: center;
|
|
height: 22px;
|
|
border: solid 1px #bbe1f6;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-row input[type=number] {
|
|
text-align: right;
|
|
height: 22px;
|
|
border: solid 1px #bbe1f6;
|
|
max-width: 35px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-row input[type=text]:nth-child(2) {
|
|
width: 220px;
|
|
margin: 0px;
|
|
height: 22px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
padding-left: 2px;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-row input[type=text] {
|
|
width: 30px;
|
|
border: 1px solid #bbe1f6;
|
|
text-align: center;
|
|
padding-left: 2px;
|
|
height: 18px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers textarea {
|
|
width: 244px;
|
|
border: 1px solid #bbe1f6;
|
|
max-height: 37px;
|
|
padding: 0px 3px;
|
|
font-size: 12px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(1),
|
|
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(1) {
|
|
width: 108px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(2),
|
|
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(2),
|
|
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(3),
|
|
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(3),
|
|
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(4),
|
|
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(4) {
|
|
width: 40px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-maneuvers h1:nth-child(5),
|
|
.item-tab-gear-slide-flex-container-maneuvers h2:nth-child(5) {
|
|
text-align: left;
|
|
padding-left: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading h1:nth-child(1) {
|
|
padding-left: 2px;
|
|
width: 261px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading h1:nth-child(2),
|
|
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading h1:nth-child(3) {
|
|
text-align: center;
|
|
width: 39px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-maneuvers-heading,
|
|
.subitem-tab-gear-slide-flex-container-martial-maneuvers-heading {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 402px;
|
|
height: 19px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
padding-top: 5px;
|
|
padding-left: 4px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-maneuvers-light-row,
|
|
.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 402px;
|
|
height: 19px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
padding-top: 4px;
|
|
padding-left: 4px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-maneuvers-light-row {
|
|
background-color: white;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-maneuvers-dark-row {
|
|
background-color: #cce8f8;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-maneuvers-row {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 397px;
|
|
height: 40px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
padding-top: 0px;
|
|
padding-left: 4px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.item-flex-maneuver {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 399px;
|
|
padding-left: 4px;
|
|
margin-top: 1px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-row {
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-height: 24px;
|
|
}
|
|
|
|
/* Update when custom maneuver attack roll made */
|
|
.subitem-flex-container-martial-row .buttonRollAttack {
|
|
margin-top: 1px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-ocv-dcv {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-height: 40px;
|
|
max-width: 134px;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
/* Martial Maneuver Details */
|
|
|
|
.subitem-flex-container-martial-details-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: top;
|
|
max-width: 397px;
|
|
height: 48px;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
padding: 0px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-details-row .buttonRollShow {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-details-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 48px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-buttons-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 45px;
|
|
padding-top: 2px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-damage-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-height: 21px;
|
|
align-items: center;
|
|
padding-right: 1px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-damage-row h1 {
|
|
padding-right: 1px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-damage-row h1:not(:first-child) {
|
|
padding-left: 2px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-damage-row input[type=number] {
|
|
height: 21px;
|
|
max-width: 35px;
|
|
border: solid 1px #bbe1f6;
|
|
text-align: right;
|
|
padding-right: 1px;
|
|
}
|
|
|
|
.subitem-flex-container-martial-cv-damage-row input[type=text] {
|
|
text-align: center;
|
|
height: 21px;
|
|
width: 68px;
|
|
padding-left: 2px;
|
|
padding-right: 4px;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
.subitem-martial-description-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: bottom;
|
|
max-height: 22px;
|
|
min-width: 320px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.subitem-martial-description-row input[type=text] {
|
|
width: 220px;
|
|
height: 22px;
|
|
text-align: left;
|
|
padding-left: 2px;
|
|
margin-right: 0px;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
.subitem-martial-description-row h1 {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.subitem-martial-description-row input[type=number] {
|
|
height: 22px;
|
|
max-width: 35px;
|
|
border: solid 1px #bbe1f6;
|
|
text-align: right;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
|
|
/* Range Modifier Table */
|
|
.subitem-tab-gear-slide-flex-container-range-modifiers {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 391px;
|
|
height: 28px;
|
|
padding: 3px;
|
|
margin-top: 6px;
|
|
margin-bottom: 7px;
|
|
margin-right: 0px;
|
|
margin-left: 4px;
|
|
background-color: white;
|
|
border-radius: 3px;
|
|
border: solid 1px #bbe1f6;
|
|
}
|
|
|
|
.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;
|
|
background-color: #cce8f8;
|
|
margin-left: 0px;
|
|
margin-bottom: 0px;
|
|
border: solid 2px #88caef;
|
|
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 #bbe1f6;
|
|
border-right: solid 1px #bbe1f6;
|
|
width: 260px;
|
|
height: 20px;
|
|
}
|
|
|
|
.subitem-gear-slide-flex-container-hit-locations-special-top-row {
|
|
border-top: solid 1px #bbe1f6;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.subitem-gear-slide-flex-container-hit-locations-special-bottom-row {
|
|
border-bottom: solid 1px #bbe1f6;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.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 #bbe1f6;
|
|
}
|
|
|
|
/* 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 #bbe1f6;
|
|
border-bottom: none;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.subitem-gear-slide-container-hit-locations-table-middle-row {
|
|
background-color: white;
|
|
border-left: solid 1px #bbe1f6;
|
|
border-right: solid 1px #bbe1f6;
|
|
}
|
|
|
|
.subitem-gear-slide-container-hit-locations-table-bottom-row {
|
|
background-color: white;
|
|
border: solid 1px #bbe1f6;
|
|
border-top: none;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
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 lightgray;
|
|
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-slideshow[value="1"] ~ div.item-tab-gear-slide-flex-container-maneuvers,
|
|
.item-gear-slideshow[value="2"] ~ div.item-tab-gear-slide-flex-container-martial-maneuvers,
|
|
.item-gear-slideshow[value="3"] ~ div.item-tab-gear-slide-flex-container-hit-locations,
|
|
.item-gear-slideshow[value="4"] ~ div.item-tab-gear-slide-treasure-text {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* 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 {
|
|
position: absolute;
|
|
top: -2px; /* A fix to get a uniform look with the hit location table */
|
|
left: 0px;
|
|
height: 11px;
|
|
width: 11px;
|
|
background-color: white;
|
|
border: solid 2px lightsteelblue;
|
|
border-radius: 50%;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* On mouse-over, add a grey background color */
|
|
.custom-radio-button-container:hover input ~ .custom-radio-button {
|
|
background-color: lightsteelblue;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Create the indicator (the dot/circle - hidden when not checked) */
|
|
.custom-radio-button:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the indicator (dot/circle) when checked */
|
|
.custom-radio-button-container input:checked ~ .custom-radio-button:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the indicator (dot/circle) */
|
|
.custom-radio-button-container .custom-radio-button:after {
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
border: solid 2px white;
|
|
background: #D55E00;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Jackob's Roll Template */
|
|
/* https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates */
|
|
/* ---------------------------------------------------------------- */
|
|
|
|
/* 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-activate,
|
|
.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-activate,
|
|
.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-activate .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 {
|
|
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: #56B4E9;
|
|
/* change text-align to center to center the header text */
|
|
text-align: left;
|
|
color: var(--header-text-color);
|
|
padding: 5px;
|
|
}
|
|
|
|
.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-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-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-activate .sheet-title,
|
|
.sheet-rolltemplate-custom-show .sheet-title {
|
|
font-size:1.2em;
|
|
}
|
|
|
|
.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-activate .sheet-subtitle,
|
|
.sheet-rolltemplate-custom-show .sheet-subtitle {
|
|
font-size:1.0em;
|
|
padding-top: 0.1em;
|
|
}
|
|
|
|
/* 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-activate .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-activate .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-activate .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-activate .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-activate .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-activate .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom-activate .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-activate .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-activate .inlinerollresult,
|
|
.sheet-rolltemplate-custom-show .inlinerollresult {
|
|
display: inline-block;
|
|
min-width: 1.5em;
|
|
text-align: center;
|
|
border: 2px solid palegoldenrod;
|
|
background: #fff990;
|
|
}
|
|
|
|
.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-activate .sheet-template-wrapper .inlinerollresult,
|
|
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult {
|
|
background-color: #fff990;
|
|
border: 2px solid palegoldenrod;
|
|
}
|
|
|
|
.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-activate .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-activate .sheet-template-wrapper .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-custom-show .sheet-template-wrapper .inlinerollresult.fullfail {
|
|
border: 2px solid #AA3377;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Power block expanding/collapse functionality */
|
|
/* --------------------------------------------------- */
|
|
|
|
/* Nominal state for expanded areas */
|
|
.sheet-power-expand-01,
|
|
.sheet-power-expand-02,
|
|
.sheet-power-expand-03,
|
|
.sheet-power-expand-04,
|
|
.sheet-power-expand-05,
|
|
.sheet-power-expand-06,
|
|
.sheet-power-expand-07,
|
|
.sheet-power-expand-08,
|
|
.sheet-power-expand-09,
|
|
.sheet-power-expand-10,
|
|
.sheet-power-expand-11,
|
|
.sheet-power-expand-12,
|
|
.sheet-power-expand-13,
|
|
.sheet-power-expand-14,
|
|
.sheet-power-expand-15,
|
|
.sheet-power-expand-16,
|
|
.sheet-power-expand-17 {
|
|
display: none;
|
|
}
|
|
|
|
/* Expand the selected left power block. */
|
|
.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .sheet-power-expand-01,
|
|
.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .sheet-power-expand-02,
|
|
.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .sheet-power-expand-03,
|
|
.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .sheet-power-expand-04,
|
|
.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .sheet-power-expand-05,
|
|
.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .sheet-power-expand-06,
|
|
.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .sheet-power-expand-07,
|
|
.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .sheet-power-expand-08,
|
|
.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .sheet-power-expand-09 {
|
|
display: block;
|
|
}
|
|
|
|
/* Expand the selected right power block. */
|
|
.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .sheet-power-expand-10,
|
|
.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .sheet-power-expand-11,
|
|
.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .sheet-power-expand-12,
|
|
.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .sheet-power-expand-13,
|
|
.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .sheet-power-expand-14,
|
|
.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .sheet-power-expand-15,
|
|
.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .sheet-power-expand-16,
|
|
.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .sheet-power-expand-17 {
|
|
display: block;
|
|
}
|
|
|
|
/* Turn down the opacity on the left point values to help visibility overall. */
|
|
.sheet-left-power-toggle:not([value="powerExpand01"]) ~ div.item-flex-power .subitem-opacity-power01,
|
|
.sheet-left-power-toggle:not([value="powerExpand02"]) ~ div.item-flex-power .subitem-opacity-power02,
|
|
.sheet-left-power-toggle:not([value="powerExpand03"]) ~ div.item-flex-power .subitem-opacity-power03,
|
|
.sheet-left-power-toggle:not([value="powerExpand04"]) ~ div.item-flex-power .subitem-opacity-power04,
|
|
.sheet-left-power-toggle:not([value="powerExpand05"]) ~ div.item-flex-power .subitem-opacity-power05,
|
|
.sheet-left-power-toggle:not([value="powerExpand06"]) ~ div.item-flex-power .subitem-opacity-power06,
|
|
.sheet-left-power-toggle:not([value="powerExpand07"]) ~ div.item-flex-power .subitem-opacity-power07,
|
|
.sheet-left-power-toggle:not([value="powerExpand08"]) ~ div.item-flex-power .subitem-opacity-power08,
|
|
.sheet-left-power-toggle:not([value="powerExpand09"]) ~ div.item-flex-power .subitem-opacity-power09 {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Turn down the opacity on the right point values to help visibility overall. */
|
|
.sheet-right-power-toggle:not([value="powerExpand10"]) ~ div.item-flex-power .subitem-opacity-power10,
|
|
.sheet-right-power-toggle:not([value="powerExpand11"]) ~ div.item-flex-power .subitem-opacity-power11,
|
|
.sheet-right-power-toggle:not([value="powerExpand12"]) ~ div.item-flex-power .subitem-opacity-power12,
|
|
.sheet-right-power-toggle:not([value="powerExpand13"]) ~ div.item-flex-power .subitem-opacity-power13,
|
|
.sheet-right-power-toggle:not([value="powerExpand14"]) ~ div.item-flex-power .subitem-opacity-power14,
|
|
.sheet-right-power-toggle:not([value="powerExpand15"]) ~ div.item-flex-power .subitem-opacity-power15,
|
|
.sheet-right-power-toggle:not([value="powerExpand16"]) ~ div.item-flex-power .subitem-opacity-power16,
|
|
.sheet-right-power-toggle:not([value="powerExpand17"]) ~ div.item-flex-power .subitem-opacity-power17 {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Hide the base and active costs for a tidier look. */
|
|
.subitem-visibility-power01,
|
|
.subitem-visibility-power02,
|
|
.subitem-visibility-power03,
|
|
.subitem-visibility-power04,
|
|
.subitem-visibility-power05,
|
|
.subitem-visibility-power06,
|
|
.subitem-visibility-power07,
|
|
.subitem-visibility-power08,
|
|
.subitem-visibility-power09,
|
|
.subitem-visibility-power10,
|
|
.subitem-visibility-power11,
|
|
.subitem-visibility-power12,
|
|
.subitem-visibility-power13,
|
|
.subitem-visibility-power14,
|
|
.subitem-visibility-power15,
|
|
.subitem-visibility-power16,
|
|
.subitem-visibility-power17 {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power01,
|
|
.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power02,
|
|
.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power03,
|
|
.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power04,
|
|
.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power05,
|
|
.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power06,
|
|
.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power07,
|
|
.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power08,
|
|
.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .subitem-flex-power-points-block-left .subitem-visibility-power09 {
|
|
visibility: visible;
|
|
}
|
|
|
|
.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power10,
|
|
.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power11,
|
|
.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power12,
|
|
.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power13,
|
|
.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power14,
|
|
.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power15,
|
|
.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power16,
|
|
.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .subitem-flex-power-points-block-right .subitem-visibility-power17 {
|
|
visibility: visible;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Maneuver block expanding/collapse functionality */
|
|
/* --------------------------------------------------- */
|
|
|
|
/* Nominal state for expanded areas */
|
|
.sheet-maneuver-expand-01,
|
|
.sheet-maneuver-expand-02,
|
|
.sheet-maneuver-expand-03,
|
|
.sheet-maneuver-expand-04,
|
|
.sheet-maneuver-expand-05,
|
|
.sheet-maneuver-expand-06,
|
|
.sheet-maneuver-expand-07,
|
|
.sheet-maneuver-expand-08,
|
|
.sheet-maneuver-expand-09 {
|
|
display: none;
|
|
}
|
|
|
|
/* Expand the selected maneuver block. */
|
|
.sheet-maneuver-toggle[value="maneuverExpand01"] ~ div.item-flex-maneuver .sheet-maneuver-expand-01,
|
|
.sheet-maneuver-toggle[value="maneuverExpand02"] ~ div.item-flex-maneuver .sheet-maneuver-expand-02,
|
|
.sheet-maneuver-toggle[value="maneuverExpand03"] ~ div.item-flex-maneuver .sheet-maneuver-expand-03,
|
|
.sheet-maneuver-toggle[value="maneuverExpand04"] ~ div.item-flex-maneuver .sheet-maneuver-expand-04,
|
|
.sheet-maneuver-toggle[value="maneuverExpand05"] ~ div.item-flex-maneuver .sheet-maneuver-expand-05,
|
|
.sheet-maneuver-toggle[value="maneuverExpand06"] ~ div.item-flex-maneuver .sheet-maneuver-expand-06,
|
|
.sheet-maneuver-toggle[value="maneuverExpand07"] ~ div.item-flex-maneuver .sheet-maneuver-expand-07,
|
|
.sheet-maneuver-toggle[value="maneuverExpand08"] ~ div.item-flex-maneuver .sheet-maneuver-expand-08,
|
|
.sheet-maneuver-toggle[value="maneuverExpand09"] ~ div.item-flex-maneuver .sheet-maneuver-expand-09 {
|
|
display: block;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- */
|
|
/* Custom button for power expand */
|
|
/* ---------------------------------------------------------------- */
|
|
|
|
.custom-expand-button-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.custom-expand-button-container button.buttonExpand {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 24px;
|
|
width: 10px;
|
|
align-items: center;
|
|
padding: 0px;
|
|
margin-right: 2px;
|
|
margin-left: 0px;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-expand-button-container button.buttonExpand span {
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Rotate when expanded */
|
|
.sheet-left-power-toggle[value="powerExpand01"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-01,
|
|
.sheet-left-power-toggle[value="powerExpand02"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-02,
|
|
.sheet-left-power-toggle[value="powerExpand03"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-03,
|
|
.sheet-left-power-toggle[value="powerExpand04"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-04,
|
|
.sheet-left-power-toggle[value="powerExpand05"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-05,
|
|
.sheet-left-power-toggle[value="powerExpand06"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-06,
|
|
.sheet-left-power-toggle[value="powerExpand07"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-07,
|
|
.sheet-left-power-toggle[value="powerExpand08"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-08,
|
|
.sheet-left-power-toggle[value="powerExpand09"] ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-09,
|
|
.sheet-right-power-toggle[value="powerExpand10"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-10,
|
|
.sheet-right-power-toggle[value="powerExpand11"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-11,
|
|
.sheet-right-power-toggle[value="powerExpand12"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-12,
|
|
.sheet-right-power-toggle[value="powerExpand13"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-13,
|
|
.sheet-right-power-toggle[value="powerExpand14"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-14,
|
|
.sheet-right-power-toggle[value="powerExpand15"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-15,
|
|
.sheet-right-power-toggle[value="powerExpand16"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-16,
|
|
.sheet-right-power-toggle[value="powerExpand17"] ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-17,
|
|
.sheet-maneuver-toggle[value="maneuverExpand01"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-01,
|
|
.sheet-maneuver-toggle[value="maneuverExpand02"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-02,
|
|
.sheet-maneuver-toggle[value="maneuverExpand03"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-03,
|
|
.sheet-maneuver-toggle[value="maneuverExpand04"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-04,
|
|
.sheet-maneuver-toggle[value="maneuverExpand05"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-05,
|
|
.sheet-maneuver-toggle[value="maneuverExpand06"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-06,
|
|
.sheet-maneuver-toggle[value="maneuverExpand07"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-07,
|
|
.sheet-maneuver-toggle[value="maneuverExpand08"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-08,
|
|
.sheet-maneuver-toggle[value="maneuverExpand09"] ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-09
|
|
{
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* Rotate when not expanded, but hover */
|
|
.sheet-left-power-toggle:not([value="powerExpand01"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-01:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand02"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-02:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand03"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-03:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand04"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-04:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand05"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-05:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand06"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-06:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand07"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-07:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand08"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-08:hover,
|
|
.sheet-left-power-toggle:not([value="powerExpand09"]) ~ div.item-flex-power .subitem-flex-power-effect-left .custom-expand-button-container .custom-expand-button-container-09:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand10"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-10:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand11"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-11:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand12"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-12:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand13"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-13:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand14"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-14:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand15"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-15:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand16"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-16:hover,
|
|
.sheet-right-power-toggle:not([value="powerExpand17"]) ~ div.item-flex-power .subitem-flex-power-effect-right .custom-expand-button-container .custom-expand-button-container-17:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand01"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-01:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand02"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-02:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand03"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-03:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand04"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-04:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand05"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-05:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand06"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-06:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand07"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-07:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand08"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-08:hover,
|
|
.sheet-maneuver-toggle:not([value="maneuverExpand09"]) ~ div.item-flex-maneuver .subitem-flex-container-martial-row .custom-expand-button-container .custom-expand-button-container-09:hover
|
|
{
|
|
transition: 0.25s;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.custom-button-triangle,
|
|
.custom-button-triangle-alt,
|
|
.custom-button-triangle:hover,
|
|
.custom-button-triangle:after,
|
|
.custom-button-triangle-alt:hover,
|
|
.custom-button-triangle-alt:after {
|
|
position: relative;
|
|
border-top: 8px solid transparent;
|
|
border-bottom: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
top: 0px;
|
|
left: 5px;
|
|
}
|
|
|
|
.custom-button-triangle:before,
|
|
.custom-button-triangle-alt:before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
top: -6px;
|
|
left: -11px;
|
|
}
|
|
|
|
.custom-button-triangle:before {
|
|
border-left: 10px solid white; /* Color Triangle */
|
|
}
|
|
|
|
.custom-button-triangle-alt:before {
|
|
border-left: 10px solid white; /* Color Triangle Alt */
|
|
}
|
|
|
|
.custom-button-triangle,
|
|
.custom-button-triangle:hover,
|
|
.custom-button-triangle:after {
|
|
border-left: 12px solid #a1a1a1; /* Color Triangle Border */
|
|
}
|
|
|
|
.custom-button-triangle-alt,
|
|
.custom-button-triangle-alt:hover,
|
|
.custom-button-triangle-alt:after {
|
|
border-left: 12px solid #56B4E9; /* Color Triangle Alt Border */
|
|
}
|
|
|
|
.subitem-flex-container-martial-row .custom-expand-button-container button.buttonExpand {
|
|
height: 18px;
|
|
} |