mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
4726 lines
108 KiB
CSS
4726 lines
108 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;
|
|
}
|
|
}
|
|
|
|
@-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 */
|
|
/* --------------------------------------------------- */
|
|
|
|
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 {
|
|
display: grid;
|
|
grid-template-areas: "select";
|
|
align-items: center;
|
|
position: relative;
|
|
min-width: 34px;
|
|
max-height: 20px;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
padding: 0px;
|
|
padding-bottom: 1px;
|
|
padding-left: 0px;
|
|
padding-right: 3px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
|
|
}
|
|
|
|
.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::after,
|
|
.custom-select-skill::after,
|
|
.custom-select-alternate::after,
|
|
.custom-select-alternate-skill::after {
|
|
grid-area: select;
|
|
}
|
|
|
|
.custom-select::after,
|
|
.custom-select-skill::after,
|
|
.custom-select-alternate::after,
|
|
.custom-select-alternate-skill::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 {
|
|
background-color: olive;
|
|
}
|
|
|
|
.custom-select-alternate::after,
|
|
.custom-select-alternate-skill::after {
|
|
background-color: salmon;
|
|
}
|
|
|
|
select:focus + .focus {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
border: 2px solid goldenrod;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.custom-select--disabled,
|
|
.custom-select-skill--disabled,
|
|
.custom-select-alternate--disabled,
|
|
.custom-select-alternate-skill--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: yellow;
|
|
}
|
|
|
|
/* Create an active/current tab class */
|
|
.tab button.active {
|
|
background-color: yellow;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* 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 #fff990;
|
|
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: #fff990;
|
|
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 #fff990;
|
|
border-radius: 5px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.grid-container-tab-characteristics input[readonly]{
|
|
background: #fff990;
|
|
}
|
|
|
|
/* 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: grid;
|
|
grid-template-areas:
|
|
"nameLabel nameText nameText nameText"
|
|
"titleLabel titleText titleText titleText"
|
|
"backgroundLabel backgroundText backgroundText backgroundText";
|
|
grid-template-columns: 85px 105px 57px 73px;
|
|
grid-template-rows: 30px 30px 48px;
|
|
margin-left: 6px;
|
|
margin-bottom: 0px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
background-color: gold;
|
|
border-top: solid 1px goldenrod;
|
|
border-right: solid 1px goldenrod;
|
|
border-left: solid 1px goldenrod;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.item-characteristics-bio input[type=text] {
|
|
text-align:left;
|
|
width: 222px;
|
|
padding: 2px;
|
|
padding-left: 4px;
|
|
margin-left: 5px;
|
|
border: solid 1px goldenrod;
|
|
font-size: 13;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-characteristics-bio textarea {
|
|
width: 214px;
|
|
max-height: 36px;
|
|
padding: 2px;
|
|
padding-left: 4px;
|
|
margin-left: 5px;
|
|
border: solid 1px black;
|
|
text-align: left;
|
|
border: solid 1px goldenrod;
|
|
}
|
|
|
|
/* Subitem: Character Name Label */
|
|
.item-characteristics-bio-nameLabel {
|
|
grid-area: nameLabel;
|
|
background: gold;
|
|
}
|
|
|
|
/* Subitem: Character Name Text */
|
|
.item-characteristics-bio-name {
|
|
grid-area: nameText;
|
|
}
|
|
|
|
/* Subitem: Character Title Label */
|
|
.item-characteristics-bio-titleLabel {
|
|
grid-area: titleLabel;
|
|
background: gold;
|
|
}
|
|
|
|
/* Subitem: Character Title Text */
|
|
.item-characteristics-bio-titleText {
|
|
grid-area: titleText;
|
|
}
|
|
|
|
/* Subitem: Character background label */
|
|
.item-characteristics-bio-backgroundLabel {
|
|
grid-area: backgroundLabel;
|
|
background: gold;
|
|
}
|
|
|
|
/* Subitem: Character background text */
|
|
.item-characteristics-bio-backgroundText {
|
|
grid-area: backgroundText;
|
|
}
|
|
|
|
/* Item: character bio experience and money*/
|
|
|
|
.item-characteristics-earnings {
|
|
max-width: 330px;
|
|
grid-area: earnings;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"experienceLabel experience moneyLabel money";
|
|
grid-template-columns: 90px 57px 95px 83px;
|
|
grid-template-rows: 23px;
|
|
margin-left: 6px;
|
|
margin-bottom: 6px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
background-color: #fff990;
|
|
border-left: solid 1px goldenrod;
|
|
border-right: solid 1px goldenrod;
|
|
border-bottom: solid 1px goldenrod;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.item-characteristics-earnings h1 {
|
|
margin-bottom: 10px;
|
|
padding-left: 3px;
|
|
padding-top: 4px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.item-characteristics-earnings-experience 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 palegoldenrod;
|
|
padding-top: 0px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.item-characteristics-earnings input[type=text] {
|
|
font-size: 13px;
|
|
max-width: 90px;
|
|
text-align: right;
|
|
background-color: #fff990;
|
|
font-weight: bold;
|
|
margin-top: 0px;
|
|
margin-bottom: 1px;
|
|
color: black;
|
|
}
|
|
|
|
/* Subitem: Character Experience */
|
|
.item-characteristics-earnings-experienceLabel {
|
|
grid-area: experienceLabel;
|
|
}
|
|
|
|
/* Subitem: Character Experience */
|
|
.item-characteristics-earnings-experience {
|
|
grid-area: experience;
|
|
}
|
|
|
|
/* Subitem: Character Money */
|
|
.item-characteristics-earnings-moneyLabel {
|
|
grid-area: moneyLabel;
|
|
}
|
|
|
|
/* Subitem: Character Money */
|
|
.item-characteristics-earnings-money {
|
|
grid-area: money;
|
|
}
|
|
|
|
.item-characteristics-earnings-money input[type=number] {
|
|
min-width: 70px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Item: core abilities */
|
|
.item-characteristics-primary-attributes {
|
|
grid-area: primaryAbilities;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"primaryAbilityNames primaryAbilityValues primaryAbilityChances primaryAbilityButtons primaryAbilityCosts";
|
|
grid-template-columns: 126px 49px 50px 45px 45px;
|
|
min-width: 300px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
background-color: #fff990;
|
|
border-top: solid 1px goldenrod;
|
|
border-left: solid 1px goldenrod;
|
|
border-right: solid 1px goldenrod;
|
|
border-bottom: 0px;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes h1 {
|
|
background: gold;
|
|
padding-left: 5px;
|
|
padding-right: 6px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
margin: 0px;
|
|
margin-top: 0px;
|
|
font-size: 13px;
|
|
font-style: normal;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes h2 {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes input[readonly] {
|
|
text-align: center;
|
|
border: none;
|
|
max-width: 45px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities characteristics */
|
|
.item-characteristics-primary-attributes-names {
|
|
grid-area: primaryAbilityNames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
min-height: 130px;
|
|
max-height: 160px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-primary-attributes-values {
|
|
grid-area: primaryAbilityValues;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
min-height: 130px;
|
|
max-height: 160px;
|
|
max-width: 55px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-primary-attributes-rollChances {
|
|
grid-area: primaryAbilityChances;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
min-height: 130px;
|
|
max-height: 160px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-rollChances h1 {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-primary-attributes-rollButtons {
|
|
grid-area: primaryAbilityButtons;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 130px;
|
|
max-height: 160px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-primary-attributes-costs {
|
|
grid-area: primaryAbilityCosts;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 130px;
|
|
max-height: 160px;
|
|
}
|
|
|
|
.item-characteristics-primary-attributes-costs h1 {
|
|
margin-left: 8px;
|
|
text-align: left;
|
|
min-width: 32px;
|
|
}
|
|
|
|
/* Item: combat abilities */
|
|
.item-characteristics-combat-attributes {
|
|
grid-area: combatAbilities;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"combatAbilityNames combatAbilityValues . . combatAbilityCosts";
|
|
grid-template-columns: 126px 49px 50px 45px 45px;
|
|
min-width: 300px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
background-color: #fff990;
|
|
border: solid 1px goldenrod;
|
|
border-right: solid 1px goldenrod;
|
|
border-left: solid 1px goldenrod;
|
|
border-bottom: none;
|
|
border-top: none;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes input[readonly] {
|
|
text-align: center;
|
|
padding-right: 2px;
|
|
border: none;
|
|
max-width: 45px;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes h1 {
|
|
background: gold;
|
|
padding-left: 5px;
|
|
padding-right: 6px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
margin: 0px;
|
|
margin-top: 0px;
|
|
font-size: 13px;
|
|
font-style: normal;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes h2 {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Sub-Item: combat abilities characteristics */
|
|
.item-characteristics-combat-attributes-names {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
grid-area: combatAbilityNames;
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-combat-attributes-values {
|
|
text-align: center;
|
|
grid-area: combatAbilityValues;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-width: 152px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-combat-attributes-costs {
|
|
grid-area: combatAbilityCosts;
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-characteristics-combat-attributes-costs h1 {
|
|
margin-left: 8px;
|
|
text-align: left;
|
|
min-width: 32px;
|
|
}
|
|
|
|
/* Item: combat abilities */
|
|
.item-characteristics-movement-abilities {
|
|
grid-area: movementAbilities;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"movementNames movementValues . . movementCosts";
|
|
grid-template-columns: 126px 49px 50px 45px 45px;
|
|
background: purple;
|
|
min-width: 300px;
|
|
margin-left: 6px;
|
|
padding-bottom: 2px;
|
|
background-color: #fff990;
|
|
border-right: solid 1px goldenrod;
|
|
border-left: solid 1px goldenrod;
|
|
border-bottom: solid 1px goldenrod;
|
|
border-top: none;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities input[readonly] {
|
|
text-align: center;
|
|
padding-right: 0px;
|
|
border: none;
|
|
max-width: 45px;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities h1 {
|
|
background: gold;
|
|
padding-left: 5px;
|
|
padding-right: 6px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
margin: 0px;
|
|
margin-top: 0px;
|
|
font-size: 13px;
|
|
font-style: normal;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities h2 {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Sub-Item: combat abilities characteristics */
|
|
.item-characteristics-movement-abilities-names {
|
|
grid-area: movementNames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Sub-Item: core abilities values */
|
|
.item-characteristics-movement-abilities-values {
|
|
grid-area: movementValues;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-values h1 {
|
|
min-width: 141px;
|
|
}
|
|
|
|
/* Sub-Item: core abilities costs */
|
|
.item-characteristics-movement-abilities-costs {
|
|
grid-area: movementCosts;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item-characteristics-movement-abilities-costs h1 {
|
|
margin-left: 8px;
|
|
text-align: left;
|
|
min-width: 32px;
|
|
}
|
|
|
|
/* 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 gray 1px;
|
|
border-bottom: solid gray 1px;
|
|
border-left: solid darkgray 1px;
|
|
border-top: solid darkgray 1px;
|
|
}
|
|
|
|
.item-characteristics-portrait .button-left-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 11%;
|
|
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-right-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 95%;
|
|
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-right-arrow:hover,
|
|
.item-characteristics-portrait .button-left-arrow:hover {
|
|
background-color: gold;
|
|
}
|
|
|
|
|
|
/* 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;// #fff990;
|
|
border: solid 2px gray;
|
|
height: 250px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.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: 240px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.item-portrait-rule-description h1 {
|
|
font-size: 16px;
|
|
color: firebrick;
|
|
text-align: left;
|
|
padding-left: 4px;
|
|
background-color: inherit;
|
|
line-height: 1.4;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.item-portrait-rule-description p {
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
margin: 0px;
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Item: health status */
|
|
/* Item: gear tab health status */
|
|
/* Sheet worker used to synchronizes the contents of each */
|
|
|
|
.item-characteristics-health,
|
|
.item-gear-health {
|
|
padding: 0px;
|
|
width: 68px;
|
|
background: royalblue;
|
|
border: white;
|
|
margin-top: 4px;
|
|
margin-right: 2px;
|
|
height: 250px;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.item-characteristics-health {
|
|
grid-area: health;
|
|
}
|
|
|
|
.item-gear-health {
|
|
grid-area: gearHealth;
|
|
}
|
|
|
|
.item-gear-health h2,
|
|
.item-characteristics-health h2 {
|
|
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;
|
|
background-color: gold;
|
|
border-radius: 3px;
|
|
align-items: center;
|
|
padding: 0px;
|
|
margin-right: 1px;
|
|
margin-bottom: 2px;
|
|
border: solid 1px darkgoldenrod;
|
|
}
|
|
|
|
.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: gold;
|
|
}
|
|
|
|
.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: 68px;
|
|
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%;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.item-characteristics-perception input[type=number] {
|
|
text-align: right;
|
|
padding-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
margin: 0px;
|
|
margin-bottom: 3px;
|
|
background-color: white;
|
|
max-width: 40px;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
background-color: lightblue;
|
|
padding: 2px;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
border: solid lightcyan 2px;
|
|
}
|
|
|
|
.subitem-characteristics-perception-column-container input[type=text] {
|
|
font-size: 13px;
|
|
max-width: 32px;
|
|
line-height: 1.3;
|
|
text-align: center;
|
|
background-color: lightcyan;
|
|
padding: 0px;
|
|
color: black;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.subitem-characteristics-perception-row-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* 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: #fff990;
|
|
margin: 5px;
|
|
width: 450px;
|
|
height: 213px;
|
|
margin: 0px;
|
|
border: solid 2px goldenrod;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.item-options-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: baseline;
|
|
min-width: 400px;
|
|
max-height: 28px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* 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: darkseagreen;
|
|
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: orange;
|
|
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: olive;
|
|
margin-right: 0px;
|
|
min-width: 34px;
|
|
max-width: 35px;
|
|
}
|
|
|
|
.button-Power-END-right {
|
|
background-color: salmon;
|
|
margin-right: 0px;
|
|
min-width: 34px;
|
|
max-width: 35px;
|
|
}
|
|
|
|
.buttonRoll,
|
|
.buttonRollAttack,
|
|
.buttonRollActivate,
|
|
.buttonRollNormalAttack,
|
|
.buttonRollShieldAttack,
|
|
.buttonRollShow,
|
|
.buttonRollPower {
|
|
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,
|
|
.buttonRollNormalAttack,
|
|
.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 {
|
|
background-color: #ff9900;
|
|
color: black;
|
|
}
|
|
|
|
.buttonRoll {
|
|
background-color: orange;
|
|
}
|
|
|
|
.buttonRollAttack {
|
|
background-color: indianred;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.buttonRollActivate {
|
|
background-color: steelblue;
|
|
}
|
|
|
|
.buttonRollNormalAttack {
|
|
background-color: olivedrab;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.buttonRollShieldAttack {
|
|
background-color: DarkGoldenrod;
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
.buttonRollShow {
|
|
background-color: lightslategray;
|
|
min-width: 36px;
|
|
max-width: 38px;
|
|
}
|
|
|
|
.buttonRollPower {
|
|
background-color: #9184E2; /* lighter than mediumslateblue */
|
|
border-radius: 2.5px;
|
|
}
|
|
|
|
/* The d6 of dicefontd6 doesn't look good. Let's hold off for a better idea or stick with the label 'Roll' on the buttons.
|
|
|
|
.buttonRollNormalAttack::before {
|
|
font-family: 'dicefontd6';
|
|
font-size: 16px;
|
|
content: 'F';
|
|
} */
|
|
|
|
.portrait-display-button-left,
|
|
.portrait-display-button-right {
|
|
background-color: orange;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
margin: 4px 2px;
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
.portrait-display-button-left:hover,
|
|
.portrait-display-button-right:hover {
|
|
color: black;
|
|
background-color: limegreen;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------- */
|
|
/* 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: gold;
|
|
}
|
|
|
|
/* On mouse-over, add a grey background color */
|
|
.container-checkbox:hover input ~ .checkmark,
|
|
.container-checkbox-small:hover input ~ .checkmark-small {
|
|
background-color: goldenrod;
|
|
border: solid 1px darkgoldenrod;
|
|
}
|
|
|
|
.container-checkbox-small-gray:hover input ~ .checkmark-small-gray {
|
|
background-color: lightsteelblue;
|
|
border: solid 1px darkgray;
|
|
}
|
|
|
|
/* When the checkbox is checked, add a gold background */
|
|
.container-checkbox input:checked ~ .checkmark,
|
|
.container-checkbox-small input:checked ~ .checkmark-small {
|
|
background-color: gold;
|
|
}
|
|
|
|
.container-checkbox-small-gray input:checked ~ .checkmark-small-gray {
|
|
background-color: lightgray;
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.checkmark:after,
|
|
.checkmark-small:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
border: solid 1px darkgoldenrod;
|
|
}
|
|
|
|
.checkmark-small-gray:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
border: solid 1px gray;
|
|
}
|
|
|
|
/* 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: gold;
|
|
}
|
|
|
|
.checkmark-small-gray {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 15px;
|
|
width: 15px;
|
|
background-color: lightgray;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
|
|
/* --------------------------------------------------- */
|
|
/* 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;
|
|
max-width: 685px;
|
|
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 #fff990;
|
|
border-radius: 5px;
|
|
max-width: 333px;
|
|
background: gold;
|
|
height: 630px;
|
|
padding: 5px;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.item-talent-heading {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
max-width: 333px;
|
|
}
|
|
|
|
.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 darkgray;
|
|
}
|
|
|
|
.item-talent-heading input[type=number] {
|
|
max-width: 45px;
|
|
padding: 2px;
|
|
margin: 0px;
|
|
padding-right: 0px;
|
|
text-align: right;
|
|
border: solid 1px darkgray;
|
|
}
|
|
|
|
.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 darkgray;
|
|
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 lightcyan;
|
|
border-radius: 5px;
|
|
max-width: 333px;
|
|
background: lightblue;
|
|
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;
|
|
max-width: 333px;
|
|
}
|
|
|
|
.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 darkgray;
|
|
}
|
|
|
|
.item-complication-heading input[type=number] {
|
|
max-width: 45px;
|
|
padding: 2px;
|
|
margin: 0px;
|
|
padding-right: 0px;
|
|
text-align: right;
|
|
border: solid 1px darkgray;
|
|
}
|
|
|
|
.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 darkgray;
|
|
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: 3px solid lightgray;
|
|
border-radius: 5px;
|
|
max-width: 674px;
|
|
padding: 5px;
|
|
margin: 0px;
|
|
height: 145px;
|
|
background: white;
|
|
}
|
|
|
|
.flex-container-complications-bottom textarea {
|
|
width: 322px;
|
|
max-height: 143px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: transparent;
|
|
}
|
|
|
|
/* ----------------------------------------------------- */
|
|
/* Powers */
|
|
/* Organized in two columns with different color styles. */
|
|
/* ----------------------------------------------------- */
|
|
.grid-container-powers {
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
grid-template-areas:
|
|
"leftPowers rightPowers";
|
|
grid-template-columns: 338px 338px;
|
|
grid-template-rows: 806px;
|
|
max-width: 686px;
|
|
min-width: 676px;
|
|
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;
|
|
height: 20px;
|
|
margin: 0px;
|
|
text-align: right;
|
|
}
|
|
|
|
.flex-container-powers-right,
|
|
.flex-container-powers-left {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
border-radius: 5px;
|
|
max-width: 333px;
|
|
padding-top: 1px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-bottom: 2px;
|
|
margin: 0px;
|
|
height: 797px;
|
|
}
|
|
|
|
.flex-container-powers-left textarea,
|
|
.flex-container-powers-right textarea {
|
|
color: gray;
|
|
max-width: 316px;
|
|
height: 54px;
|
|
padding: 3px;
|
|
margin: 0px;
|
|
margin-top: 1px;
|
|
font-size: 8;
|
|
}
|
|
|
|
.flex-container-powers-right textarea {
|
|
border: solid 1px goldenrod;
|
|
}
|
|
|
|
// Subitems to organize rows within each power flex item.
|
|
|
|
.item-flex-power {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.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: 1px;
|
|
align-items: center;
|
|
}
|
|
|
|
.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;
|
|
min-width: 134px;
|
|
}
|
|
|
|
.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-effect-left input[type=text],
|
|
.subitem-flex-power-effect-right input[type=text]{
|
|
min-width: 140px;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left select,
|
|
.subitem-flex-power-heading-right select {
|
|
font-size: 13px;
|
|
height: 19px;
|
|
width: 96px;
|
|
margin: 0px;
|
|
}
|
|
|
|
.subitem-flex-power-effect-left input[type=text]:nth-child(1),
|
|
.subitem-flex-power-effect-right input[type=text]:nth-child(1){
|
|
min-width: 150px;
|
|
}
|
|
|
|
.subitem-flex-power-effect-left input[type=text]:nth-child(2), /* Dice */
|
|
.subitem-flex-power-effect-right input[type=text]:nth-child(2) /* Dice */ {
|
|
min-width: 58px;
|
|
text-align: center;
|
|
margin-left: 2px;
|
|
margin-right: 0px;
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.subitem-flex-power-effect-left input[type=number]:nth-child(4), /* Roll chance */
|
|
.subitem-flex-power-effect-right input[type=number]:nth-child(4) /* Roll chance */ {
|
|
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 gray;
|
|
min-width: 55px;
|
|
}
|
|
|
|
/* Powers Tab: Left Powers */
|
|
.flex-container-powers-left {
|
|
grid-area: leftPowers;
|
|
border: 3px solid lightcyan;
|
|
background: lightblue;
|
|
}
|
|
|
|
.flex-container-powers-left textarea {
|
|
border: solid 1px black;
|
|
}
|
|
|
|
.flex-container-powers-left input[readonly]{
|
|
background: lightcyan;
|
|
border: solid 1px #89abb9;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.flex-container-powers-left textarea{
|
|
border: 1px solid #89ABB9;
|
|
}
|
|
|
|
.subitem-flex-power-heading-left input[type=text]{
|
|
border: solid 1px #89ABB9;
|
|
max-width: 28px;
|
|
}
|
|
|
|
.subitem-flex-power-effect-left input[type=text],
|
|
.subitem-flex-power-effect-left input[type=number]{
|
|
border: solid 1px #89ABB9;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-left input[type=number] {
|
|
/* Active, Real Cost */
|
|
border: solid 1px #89ABB9;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-left input[readonly] {
|
|
/* Active, Real Cost */
|
|
max-width: 38px;
|
|
text-align: center;
|
|
padding: 0px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 333px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left input[type=number]{
|
|
/* Advantages, limitations */
|
|
border: solid 1px #89ABB9;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-left select {
|
|
font-size: 13px;
|
|
height: 19px;
|
|
max-width: 115px;
|
|
margin: 0px;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* Powers Tab: Right Powers */
|
|
.flex-container-powers-right {
|
|
grid-area: rightPowers;
|
|
border: 3px solid #fff990;
|
|
background: gold;
|
|
}
|
|
|
|
.flex-container-powers-right textarea {
|
|
border: solid 1px black;
|
|
}
|
|
|
|
.flex-container-powers-right input[readonly]{
|
|
background: #fff990;
|
|
border: solid 1px goldenrod;
|
|
line-height: 1.0;
|
|
}
|
|
|
|
.flex-container-powers-right textarea{
|
|
border: 1px solid goldenrod;
|
|
}
|
|
|
|
.subitem-flex-power-heading-right input[type=text] {
|
|
max-width: 28px;
|
|
border: solid 1px goldenrod;
|
|
}
|
|
|
|
.subitem-flex-power-effect-right input[type=text],
|
|
.subitem-flex-power-effect-right input[type=number]{
|
|
border: solid 1px goldenrod;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-right input[type=number] {
|
|
/* Active, Real Cost */
|
|
border: solid 1px goldenrod;
|
|
}
|
|
|
|
.subitem-flex-power-active-cost-right input[readonly] {
|
|
/* Active, Real Cost */
|
|
max-width: 38px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 333px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-right input[type=number]{
|
|
/* Advantages, limitations */
|
|
border: solid 1px goldenrod;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.subitem-flex-power-limitations-right select {
|
|
font-size: 13px;
|
|
height: 19px;
|
|
max-width: 115px;
|
|
margin: 0px;
|
|
}
|
|
|
|
// Buttons for power, talent, and complication movers.
|
|
|
|
.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;
|
|
}
|
|
|
|
.power-mover-plus-minus-button button.buttonPlus,
|
|
.power-mover-plus-minus-button button.buttonMinus,
|
|
.talent-mover-plus-minus-button button.buttonPlus,
|
|
.talent-mover-plus-minus-button button.buttonMinus,
|
|
.complication-mover-plus-minus-button button.buttonPlus,
|
|
.complication-mover-plus-minus-button button.buttonMinus {
|
|
background-color: LemonChiffon;
|
|
border: solid 1px silver;
|
|
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.25ch;
|
|
border-radius: 0px;
|
|
max-width: 10px;
|
|
}
|
|
|
|
.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: gray;
|
|
color: white;
|
|
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: gold;
|
|
border: 3px solid #fff990;
|
|
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;
|
|
}
|
|
|
|
/* 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: #fff990;
|
|
border: solid 2px goldenrod;
|
|
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 palegoldenrod;
|
|
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: #fff990;
|
|
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 palegoldenrod;
|
|
}
|
|
|
|
/* 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: LemonChiffon;
|
|
border: solid 1px silver;
|
|
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.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: gray;
|
|
color: white;
|
|
transition: 0.05s;
|
|
}
|
|
|
|
/* Item: Skill Container for combat skill flex "columns" */
|
|
.item-skillsTab-grid-container-combat-skills {
|
|
grid-area: theCombatSkills;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"skillNames skillLevels skillTypes skillCosts"
|
|
"skillLevelNames skillLevels . skillCosts";
|
|
grid-template-columns: 150px 50px 61px 38px;
|
|
grid-template-rows: 199px 76px;
|
|
max-width: 292px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-bottom: 3px;
|
|
padding-top: 0px;
|
|
background-color: #fff990;
|
|
border: solid 2px goldenrod;
|
|
border-radius: 3px;
|
|
line-height: 1.10;
|
|
}
|
|
|
|
/* Subitem: flex container for combat skill name "column" */
|
|
.subitem-skillsTab-flex-container-combat-skills-names {
|
|
grid-area: skillNames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-bottom: 3px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-names input[type=text] {
|
|
max-width: 140px;
|
|
margin-top: 0px;
|
|
margin-bottom: 3px;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
margin-left: 4px;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-names h1 {
|
|
text-align: left;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
max-height: 18px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-level-names {
|
|
grid-area: skillLevelNames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-level-names h1 {
|
|
text-align: left;
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
max-height: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Subitem: flex container for combat skill levels "column" */
|
|
.subitem-skillsTab-flex-container-combat-skills-levels {
|
|
grid-area: skillLevels;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-top: 7px;
|
|
margin-bottom: 6px;
|
|
max-height: 264px;
|
|
margin-top: 3px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-levels input[type=number] {
|
|
text-align: center;
|
|
padding-left: 3px;
|
|
padding-right: 1px; /* Fix for shifting spinners on focus */
|
|
max-width: 45px;
|
|
margin-right: 5px;
|
|
padding-bottom: 1px;
|
|
max-height: height: 22px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-levels h1 {
|
|
text-align: left;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
max-height: 18px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
/* Subitem: flex container for combat skill type "column" */
|
|
.subitem-skillsTab-flex-container-combat-skills-types {
|
|
grid-area: skillTypes;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-top: 3px;
|
|
margin-bottom: 5px;
|
|
margin-left: 0px;
|
|
height: 189px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-types h1 {
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
max-height: 18px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-types .custom-select {
|
|
max-width: 55px;
|
|
text-align: center;
|
|
height: 19px;
|
|
}
|
|
|
|
/* Subitem: flex container for combat skill costs "column" */
|
|
.subitem-skillsTab-flex-container-combat-skills-costs {
|
|
grid-area: skillCosts;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-bottom: 7px;
|
|
margin-top: 3px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-costs h1 {
|
|
text-align: center;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
padding-right: 0px;
|
|
max-height: 18px;
|
|
max-width: 40px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-combat-skills-costs input[readonly] {
|
|
text-align: center;
|
|
background-color: #fff990;
|
|
max-width: 30px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* Item: Skill Container for Language Skill "rows" */
|
|
.item-skillsTab-flex-container-languages {
|
|
grid-area: theLanguageSkills;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-width: 292px;
|
|
background-color: #fff990;
|
|
border: solid 2px goldenrod;
|
|
border-radius: 3px;
|
|
line-height: 1.10;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
/* Sub-Item: Flex containers for columns */
|
|
.subitem-skillsTab-flex-container-languages-heading {
|
|
grid-template-areas: "skillName skillFluency literacy skillCost";
|
|
grid-template-columns: 148px 83px 31px 36px;
|
|
display: grid;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-languages-heading-name {
|
|
grid-area: skillName;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-languages-heading-fluency {
|
|
grid-area: skillFluency;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-languages-heading-literacy {
|
|
grid-area: literacy;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-languages-heading-cost {
|
|
grid-area: skillCost;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
max-width: 285px;
|
|
margin-left: 0px;
|
|
padding: 0px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language input[type=text]:nth-child(1) {
|
|
text-align: left;
|
|
padding-left: 2px;
|
|
min-width: 140px;
|
|
margin-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language input[readonly] {
|
|
text-align: center;
|
|
background-color: #fff990;
|
|
max-width: 22px;
|
|
margin-right: 0px;
|
|
margin-left: 3px;
|
|
border: transparent;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language .container-checkbox-small {
|
|
margin-top: 3px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-language .custom-select {
|
|
min-width: 70px;
|
|
margin-left: 8px;
|
|
max-height: 19px;
|
|
}
|
|
|
|
|
|
/* Item: Skill Container for Skill Enhancers */
|
|
.item-skillsTab-grid-container-skill-enhancers {
|
|
grid-area: theEnhancers;
|
|
display: grid;
|
|
grid-template-areas:
|
|
". skillEnhancersHeading skillEnhancersHeading skillEnhancersHeading"
|
|
"checkboxes skillNames . skillCosts"
|
|
". skillNames skillLevels skillCosts";
|
|
grid-template-columns: 25px 175px 65px 38px;
|
|
grid-template-rows: 20px 112px 112px;
|
|
max-width: 295px;
|
|
padding-left: 5px;
|
|
grid-gap:0px;
|
|
background-color: #fff990;
|
|
border: solid 2px goldenrod;
|
|
border-radius: 3px;
|
|
max-height: 251px;
|
|
}
|
|
|
|
.item-skillsTab-grid-container-skill-enhancers input[readonly]{
|
|
background-color: #fff990;
|
|
text-align: center;
|
|
height: 18px;
|
|
max-width: 30px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-checkboxes {
|
|
grid-area: checkboxes;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
line-height: 1.2;
|
|
padding-bottom: 5px;
|
|
padding-top: 5px;
|
|
height: 113px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-heading {
|
|
grid-area: skillEnhancersHeading;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-top: 4px;
|
|
justify-content: space-between;
|
|
line-height: 1.15;
|
|
width: 264px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-heading h1:nth-child(2) {
|
|
padding-right: 0px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-names {
|
|
grid-area: skillNames;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
height: 229px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-names h1 {
|
|
text-align: left;
|
|
line-height: 1.15;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-levels {
|
|
grid-area: skillLevels;
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
line-height: 1.15;
|
|
margin-top: 11px;
|
|
height: 107px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-levels input[type=number]{
|
|
border: solid 1px palegoldenrod;
|
|
height: 19px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.subitem-skillsTab-flex-container-skill-enhancers-costs {
|
|
grid-area: skillCosts;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
line-height: 1.15;
|
|
height: 229px;
|
|
}
|
|
|
|
/* ----------------------------------------------------- */
|
|
/* 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 #fff990;
|
|
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 input[type=number]{
|
|
background-color: #fff990;
|
|
text-align: center;
|
|
max-width: 70px;
|
|
background-color: gold;
|
|
border: solid 1px goldenrod;
|
|
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: gold;
|
|
justify-content: space-between;
|
|
width: 50px;
|
|
max-height: 20px;
|
|
border: solid 1px goldenrod;
|
|
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: 3px;
|
|
padding-top: 0px;
|
|
grid-gap: 3px;
|
|
background-color: #fff990;
|
|
border: solid 2px goldenrod;
|
|
border-radius: 3px;
|
|
height: 175px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
max-width: 576px;
|
|
margin-bottom: 1px;
|
|
height: 24px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(1) {
|
|
min-width: 118px;
|
|
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),
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(7) {
|
|
min-width: 44px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row h1:nth-child(8) {
|
|
min-width: 36px;
|
|
}
|
|
|
|
.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 palegoldenrod;
|
|
}
|
|
|
|
.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(9) {
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
margin-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(1) {
|
|
text-align: left;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=text]:nth-child(9) {
|
|
text-align: center;
|
|
max-width: 100px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row input[type=number]:nth-child(10) {
|
|
text-align: right;
|
|
min-width: 48px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-armor-row select {
|
|
text-align-last: center; // For Chrome
|
|
text-align: center; // Firefox
|
|
}
|
|
|
|
// 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 palegoldenrod;
|
|
}
|
|
|
|
.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 palegoldenrod;
|
|
}
|
|
|
|
.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 palegoldenrod;
|
|
}
|
|
|
|
.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: #fff990;
|
|
border: solid 2px goldenrod;
|
|
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: 120px;
|
|
text-align: left;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(2) {
|
|
min-width: 65px;
|
|
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: 32px;
|
|
text-align: left;
|
|
}
|
|
|
|
.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: 40x;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(7) {
|
|
min-width: 44px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(8) {
|
|
min-width: 42px;
|
|
text-align: center;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(9) {
|
|
min-width: 32px;
|
|
text-align: right;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(10) {
|
|
min-width: 34px;
|
|
text-align: right;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row h1:nth-child(11) {
|
|
min-width: 45px;
|
|
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 palegoldenrod;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=text]:nth-child(2) {
|
|
text-align: center;
|
|
padding-left: 1px;
|
|
padding-right: 1px;
|
|
max-width: 68px;
|
|
margin-right: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.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(4) {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(5),
|
|
.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(9) {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
max-width: 38px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.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(11),
|
|
.subitem-tab-gear-flex-container-weapon-row input[type=number]:nth-child(13) {
|
|
text-align: right;
|
|
padding-left: 3px;
|
|
max-width: 46px;
|
|
padding-right: 0px;
|
|
margin-right: 0px;
|
|
margin-left: 0px;
|
|
border: solid 1px palegoldenrod;
|
|
}
|
|
|
|
.subitem-tab-gear-flex-container-weapon-row input[readonly]:nth-child(10){
|
|
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;
|
|
padding-left: 5px;
|
|
margin-left: 4px;
|
|
padding: 4px;
|
|
background-color: lightcyan;
|
|
border: solid 2px lightgray;
|
|
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;
|
|
}
|
|
|
|
.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 #eaeaea;
|
|
}
|
|
|
|
.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 #eaeaea;
|
|
}
|
|
|
|
// Buttons for equipment movers.
|
|
|
|
.gear-mover-plus-minus-enclosure {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.gear-mover-plus-minus-button button.buttonPlus,
|
|
.gear-mover-plus-minus-button button.buttonMinus {
|
|
background-color: white;
|
|
border: solid 1px lightgray;
|
|
color: lightskyblue;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.gear-mover-plus-minus-button button.buttonPlus:hover,
|
|
.gear-mover-plus-minus-button button.buttonMinus:hover {
|
|
background-color: silver;
|
|
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: gray;
|
|
background-color: lightgray;
|
|
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: gray;
|
|
background-color: lightgray;
|
|
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: gold;
|
|
color: black;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-maneuvers,
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers {
|
|
width: 406px;
|
|
height: 375px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
margin-bottom: 0px;
|
|
background-color: lightcyan;
|
|
border: solid 2px lightgray;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
max-height: 280px;
|
|
min-height: 270px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text] {
|
|
height: 20px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=number] {
|
|
height: 20px;
|
|
border: solid 1px lightgray;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(1) {
|
|
width: 135px;
|
|
border: 1px solid lightgray;
|
|
margin: 0px;
|
|
text-align: left;
|
|
padding-left: 2px;
|
|
height: 20px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(2),
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(3),
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(4) {
|
|
width: 30px;
|
|
border: 1px solid lightgray;
|
|
margin: 0px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers input[type=text]:nth-child(5) {
|
|
// Probably not going to be used.
|
|
width: 165px;
|
|
border: 1px solid lightgray;
|
|
margin: 0px;
|
|
margin-left: 3px;
|
|
text-align: left;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers textarea {
|
|
width: 135px;
|
|
border: 1px solid lightgray;
|
|
height: 36px;
|
|
padding: 1px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.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),
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(2),
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(3),
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers h1: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;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(1) {
|
|
width: 138px;
|
|
}
|
|
|
|
.item-tab-gear-slide-flex-container-martial-maneuvers h1:nth-child(5) {
|
|
text-align: left;
|
|
padding-left: 0px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.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;
|
|
background-color: lightcyan;
|
|
}
|
|
|
|
.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: lightcyan;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-name-and-points {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 42px;
|
|
max-width: 134px;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-name-and-points-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: right;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-name-and-points-row h1 {
|
|
padding-right: 0px;
|
|
padding-left: 30px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-martial-name-and-points-row input[type=number] {
|
|
max-width: 42px;
|
|
}
|
|
|
|
/* Basic Attack */
|
|
|
|
.subitem-tab-gear-slide-flex-container-standard-attack {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
margin-top: 13px;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-standard-attack h1 {
|
|
max-width: 90px;
|
|
margin-right: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-standard-attack span {
|
|
min-width: 42px;
|
|
align-content: left;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(3),
|
|
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(4),
|
|
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(5) {
|
|
width: 40px;
|
|
text-align: center;
|
|
padding-right: 0px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-standard-attack h2:nth-child(6) {
|
|
max-width: 130px;
|
|
text-align: left;
|
|
margin-right: 6px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-flex-container-range-modifiers {
|
|
flex-direction: row;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 397px;
|
|
height: 30px;
|
|
padding: 0px;
|
|
margin-left: 0px;
|
|
padding-top: 0px;
|
|
padding-left: 5px;
|
|
margin-top: 13px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-range-modifier-container-first,
|
|
.subitem-tab-gear-slide-range-modifier-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 30px;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-range-modifier-container-first {
|
|
min-width: 83px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-range-modifier-container {
|
|
min-width: 50px;
|
|
align-items: center;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-range-modifier-container h2:nth-child(1) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.subitem-tab-gear-slide-range-modifier-container-first h2 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 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: lightcyan;
|
|
margin-left: 0px;
|
|
margin-bottom: 0px;
|
|
border: solid 2px lightgray;
|
|
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 {
|
|
background-color: lightcyan;
|
|
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 lightgray;
|
|
border-right: solid 1px lightgray;
|
|
width: 260px;
|
|
height: 20px;
|
|
}
|
|
|
|
.subitem-gear-slide-flex-container-hit-locations-special-top-row {
|
|
border-top: solid 1px lightgray;
|
|
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 lightgray;
|
|
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 lightgray;
|
|
}
|
|
|
|
/* 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 {
|
|
background-color: lightcyan;
|
|
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-top: solid 1px lightgray;
|
|
border-left: solid 1px lightgray;
|
|
border-right: solid 1px lightgray;
|
|
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 lightgray;
|
|
border-right: solid 1px lightgray;
|
|
}
|
|
|
|
.subitem-gear-slide-container-hit-locations-table-bottom-row {
|
|
background-color: white;
|
|
border-left: solid 1px lightgray;
|
|
border-right: solid 1px lightgray;
|
|
border-bottom: solid 1px lightgray;
|
|
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;
|
|
background-color: orange;
|
|
}
|
|
|
|
/* 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: indianred;
|
|
border: solid 2px indianred;
|
|
}
|
|
|
|
/* 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: indianred;
|
|
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-normal-attack,
|
|
.sheet-rolltemplate-custom-power-attack,
|
|
.sheet-rolltemplate-custom-attack,
|
|
.sheet-rolltemplate-custom-activate,
|
|
.sheet-rolltemplate-custom-show {
|
|
margin-left: -37px;
|
|
color: #181818;
|
|
}
|
|
|
|
.withoutavatars .sheet-rolltemplate-custom,
|
|
.withoutavatars .sheet-rolltemplate-custom-normal-attack,
|
|
.withoutavatars .sheet-rolltemplate-custom-power-attack,
|
|
.withoutavatars .sheet-rolltemplate-custom-attack,
|
|
.withoutavatars .sheet-rolltemplate-custom-activate,
|
|
.withoutavatars .sheet-rolltemplate-custom-show {
|
|
margin-left: -7px;
|
|
color: #181818;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .sheet-container,
|
|
.sheet-rolltemplate-custom-normal-attack .sheet-container,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-container,
|
|
.sheet-rolltemplate-custom-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 {
|
|
background-color: orange;
|
|
/* 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: indianred;
|
|
/* 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: olivedrab;
|
|
/* 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: #9184E2; // lighter than mediumslateblue;
|
|
/* 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: steelblue;
|
|
/* 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: lightslategray;
|
|
/* 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-normal-attack .sheet-title,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-title,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-subtitle,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-subtitle,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-container,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-container,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-content,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-content,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-content > div,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-content > div,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-content .sheet-key,
|
|
.sheet-rolltemplate-custom-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;
|
|
}
|
|
|
|
/* Empty rule, use this if you want to change the right column
|
|
.sheet-rolltemplate-custom .sheet-value {
|
|
}
|
|
*/
|
|
|
|
/* 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-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-attack .sheet-content :nth-child(4n+3),
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-desc,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-desc,
|
|
.sheet-rolltemplate-custom-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;
|
|
}
|
|
|
|
// Dice roll face colors. Needed to prevent problems with dark mode.
|
|
|
|
.sheet-rolltemplate-custom .inlinerollresult,
|
|
.sheet-rolltemplate-custom-normal-attack .inlinerollresult,
|
|
.sheet-rolltemplate-custom-power-attack .inlinerollresult,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-template-wrapper .inlinerollresult,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult,
|
|
.sheet-rolltemplate-custom-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-normal-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-custom-power-attack .sheet-template-wrapper .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-custom-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 #3FB315;
|
|
}
|
|
|
|
.sheet-rolltemplate-custom .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-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 #B31515;
|
|
} |