mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
3280 lines
77 KiB
CSS
3280 lines
77 KiB
CSS
/* General CSS for Lyrian Chronicles character sheet */
|
|
.sheet-darkmode .sheetform {
|
|
background: #181818 !important;
|
|
}
|
|
|
|
/* PC/NPC switch */
|
|
.charsheet div.sheet-section-pc,
|
|
.charsheet div.sheet-section-npc {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input.sheet-is-npc:checked ~ div.sheet-section-npc,
|
|
.charsheet input.sheet-is-npc:not(:checked) ~ div.sheet-section-pc {
|
|
display: block;
|
|
}
|
|
|
|
.charsheet input.sheet-is-npc {
|
|
width: 20%;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.charsheet span.sheet-is-npc-tab::before {
|
|
content: "Player Sheet";
|
|
}
|
|
|
|
.charsheet span.sheet-is-npc-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 20%;
|
|
height: 16px;
|
|
font-size: 9px;
|
|
background: #65763c;
|
|
color: white;
|
|
font-weight: bold;
|
|
border-radius: 4px;
|
|
margin-left: -20%
|
|
}
|
|
|
|
.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab {
|
|
background: #93537c;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.charsheet input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
|
|
content: "NPC Sheet"
|
|
}
|
|
|
|
|
|
/* ROLL BUTTONS */
|
|
.charsheet button[type="action"],
|
|
.charsheet button[type="roll"] {
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
width: 100%;
|
|
line-height: 0.5;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: baseline;
|
|
text-align: center;
|
|
}
|
|
.charsheet button[type="action"]:hover,
|
|
.charsheet button[type="roll"]:hover {
|
|
color: #b61037;
|
|
}
|
|
.sheet-darkmode button[type="action"]:hover,
|
|
.sheet-darkmode button[type="roll"]:hover {
|
|
color: #49efc8; /* inverted #b61037 */
|
|
}
|
|
.charsheet button[type="action"]:focus,
|
|
.charsheet button[type="roll"]:focus {
|
|
color: #b61037;
|
|
outline: none;
|
|
}
|
|
.sheet-darkmode button[type="action"]:focus,
|
|
.sheet-darkmode button[type="roll"]:focus {
|
|
color: #49efc8; /* inverted #b61037 */
|
|
}
|
|
.charsheet button[type="action"]::before,
|
|
.charsheet button[type="roll"]::before {
|
|
display: none;
|
|
}
|
|
.charsheet button[type="action"]:hover,
|
|
.charsheet button[type="roll"]:hover {
|
|
background: none !important;
|
|
}
|
|
.charsheet button[type="roll"]:active {
|
|
background: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
color: inherit !important;
|
|
border: none !important;
|
|
}
|
|
/* ROLL BUTTONS */
|
|
|
|
/* CUSTOM RADIO CHECKBOX START */
|
|
.charsheet .custom-radio-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 15px;
|
|
}
|
|
.charsheet .custom-radio-checkbox input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
.charsheet .custom-radio-checkbox label {
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 2px solid #6c6c6c;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
transition: border-color 0.2s;
|
|
margin-bottom: 0px;
|
|
box-sizing: border-box;
|
|
padding: 0px;
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox label {
|
|
border: 2px solid #0f0f0f;
|
|
background: #ffffff;
|
|
}
|
|
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -0.5px;
|
|
top: -0.5px;
|
|
width: 11px;
|
|
height: 11px;
|
|
background: #6c6c6c;
|
|
border-radius: 50%;
|
|
display: block;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0px;
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label::after {
|
|
background: #0f0f0f;
|
|
}
|
|
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:hover::after {
|
|
background: #b61037;
|
|
}
|
|
.charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:active::after{
|
|
background: #ff0000;
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:hover::after {
|
|
background: #49efc8; /* inverted #b61037 */
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox input[type="checkbox"]:checked + label:active::after{
|
|
background: #00ffff; /* inverted #ff0000 */
|
|
}
|
|
.charsheet .custom-radio-checkbox label:hover {
|
|
border-color: #b61037;
|
|
}
|
|
.sheet-darkmode .custom-radio-checkbox label:active{
|
|
border-color: #ff0000;
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox label:hover {
|
|
border-color: #49efc8; /* inverted #b61037 */
|
|
}
|
|
.sheet-darkmode .charsheet .custom-radio-checkbox label:active{
|
|
border-color: #00ffff; /* inverted #ff0000 */
|
|
}
|
|
.charsheet .custom-radio-checkbox span {
|
|
font-size: 11px;
|
|
}
|
|
/* CUSTOM RADIO CHECKBOX END */
|
|
|
|
/* Hide number input spinners for Chrome, Safari, Edge, Opera */
|
|
.charsheet input[type="number"]::-webkit-outer-spin-button,
|
|
.charsheet input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hide number input spinners for Firefox */
|
|
.charsheet input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
|
|
/* GENERAL INPUT COMPONENTS STYLES START */
|
|
.charsheet input:hover,
|
|
.charsheet input:focus,
|
|
.charsheet textarea:hover,
|
|
.charsheet textarea:focus {
|
|
background: #e5fffb;
|
|
outline: none;
|
|
}
|
|
.sheet-darkmode .charsheet input:hover,
|
|
.sheet-darkmode .charsheet input:focus,
|
|
.sheet-darkmode .charsheet textarea:hover,
|
|
.sheet-darkmode .charsheet textarea:focus {
|
|
background: #333;
|
|
}
|
|
.charsheet select:hover,
|
|
.charsheet select:focus {
|
|
background: #e5fffb;
|
|
}
|
|
.sheet-darkmode .charsheet select:hover,
|
|
.sheet-darkmode .charsheet select:focus {
|
|
background: #333;
|
|
}
|
|
.charsheet select:hover option,
|
|
.charsheet select:focus option {
|
|
background: white;
|
|
}
|
|
.sheet-darkmode .charsheet select:hover option,
|
|
.sheet-darkmode .charsheet select:focus option {
|
|
background: #222;
|
|
}
|
|
/* GENERAL INPUT COMPONENTS STYLES END */
|
|
|
|
/* GENERAL USE CLASS SELECTORS START */
|
|
.charsheet .flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.charsheet .flex-row.space-between {
|
|
justify-content: space-between;
|
|
}
|
|
.charsheet .full-width {
|
|
width: 100%;
|
|
}
|
|
.charsheet .flex-1 {
|
|
flex: 1;
|
|
}
|
|
.charsheet .flex-2 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .column-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.charsheet .row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.charsheet .align-center {
|
|
align-items: center;
|
|
}
|
|
.charsheet .justify-center {
|
|
justify-content: center;
|
|
}
|
|
.charsheet .pt-5 {
|
|
padding-top: 5px;
|
|
}
|
|
.charsheet .pb-5 {
|
|
padding-bottom: 5px;
|
|
}
|
|
.charsheet .p10 {
|
|
padding: 10px;
|
|
}
|
|
.charsheet .margin10 {
|
|
margin: 10px;
|
|
}
|
|
.charsheet .push-to-end {
|
|
margin-top: auto;
|
|
}
|
|
.charsheet .d-inline {
|
|
display: inline;
|
|
}
|
|
/* GENERAL USE CLASS SELECTORS END */
|
|
|
|
/* General CSS for Lyrian Chronicles character sheet */
|
|
.charsheet {
|
|
padding: 0px !important;
|
|
width: 880px;
|
|
position: relative;
|
|
z-index: 1000; /* or any high value */
|
|
}
|
|
.charsheet .sheet-lyrian-chronicles {
|
|
background: white;
|
|
color: black;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
/* overflow: scroll; */
|
|
border-image: url("https://iili.io/K6nRyHF.png")
|
|
100 100 100 100 fill stretch;
|
|
border-style: solid;
|
|
border-width: 30px 30px;
|
|
box-sizing: border-box;
|
|
/* height: auto; */
|
|
}
|
|
.sheet-darkmode .charsheet .sheet-lyrian-chronicles {
|
|
background: #181818;
|
|
color: #eee;
|
|
border-image: url("https://iili.io/K6nRmS1.png")
|
|
100 100 100 100 fill stretch;
|
|
}
|
|
.charsheet .sheet-section-pc {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
/* height: auto; */
|
|
}
|
|
|
|
.charsheet .section-container {
|
|
border-image: url("https://iili.io/K6o3GUl.png")
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 15px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
.sheet-darkmode .charsheet .section-container {
|
|
filter: invert(1) brightness(0.9) contrast(1.1);
|
|
}
|
|
.charsheet .section-container .header {
|
|
grid-area: header;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-top: -5px;
|
|
margin-bottom: 5px;
|
|
padding-left: 10px;
|
|
color: #717171;
|
|
}
|
|
.sheet-darkmode .charsheet .section-container .header {
|
|
color: #aaa;
|
|
}
|
|
/* General CSS for Lyrian Chronicles character sheet */
|
|
|
|
/* SHEET HEADER (NOT TO BE CONFUSED WITH TABLE HEADERS) START */
|
|
.charsheet .sheet-section-pc-header {
|
|
display: grid;
|
|
grid-template-areas: "logo details";
|
|
grid-template-columns: 350px auto;
|
|
gap: 10px;
|
|
height: 160px;
|
|
margin-bottom: 40px;
|
|
}
|
|
.charsheet .sheet-section-pc-header-logo {
|
|
grid-area: logo;
|
|
}
|
|
.charsheet .sheet-section-pc-header-logo div {
|
|
background: url("https://iili.io/K6o5UG4.png"); /* Logo Image */
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: block;
|
|
background-size: 100%;
|
|
margin: 0, auto;
|
|
}
|
|
.sheet-darkmode .charsheet .sheet-section-pc-header-logo div {
|
|
filter: invert(1) brightness(0.9) contrast(1.1);
|
|
}
|
|
|
|
.charsheet .header-details-container {
|
|
grid-area: details;
|
|
border-image: url("https://iili.io/K6oBcFa.png") /* Header Details Box Light */
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 20px 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-darkmode .header-details-container {
|
|
border-image: url("https://iili.io/K6ouZZv.png") /* Header Details Box Dark */
|
|
50 50 50 50 fill stretch;
|
|
}
|
|
.charsheet .header-details-title {
|
|
border-bottom: 2px solid #202020;
|
|
color: #202020;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
line-height: 14px;
|
|
margin-left: -20px;
|
|
margin-right: -20px;
|
|
margin-top: -10px;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-darkmode .charsheet .header-details-title {
|
|
border-bottom: 2px solid #ccc;
|
|
color: #ccc;
|
|
}
|
|
|
|
.charsheet .sheet-section-pc .header-details-content {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"name spiritcore experience"
|
|
"race subrace gender"
|
|
"age c-weight c-height";
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
row-gap: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
margin-bottom: -10px;
|
|
}
|
|
.charsheet .header-details-content .name {
|
|
grid-area: name;
|
|
}
|
|
.charsheet .header-details-content .spiritcore {
|
|
grid-area: spirit-core;
|
|
}
|
|
.charsheet .header-details-content .experience {
|
|
grid-area: experience;
|
|
}
|
|
.charsheet .header-details-content .race {
|
|
grid-area: race;
|
|
}
|
|
.charsheet .header-details-content .subrace {
|
|
grid-area: subrace;
|
|
}
|
|
.charsheet .header-details-content .gender {
|
|
grid-area: gender;
|
|
}
|
|
.charsheet .header-details-content .age {
|
|
grid-area: age;
|
|
}
|
|
.charsheet .header-details-content .weight {
|
|
grid-area: c-weight;
|
|
}
|
|
.charsheet .header-details-content .height {
|
|
grid-area: c-height;
|
|
}
|
|
.charsheet .header-details-content div {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
}
|
|
.charsheet .header-details-content input {
|
|
margin-bottom: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 0;
|
|
height: 19px;
|
|
padding: 0;
|
|
width: 100% !important;
|
|
border-color: #cccccc;
|
|
background-color: white;
|
|
}
|
|
.sheet-darkmode .charsheet .header-details-content input {
|
|
background-color: #000000;
|
|
color: #eee;
|
|
border-color: #444;
|
|
}
|
|
.charsheet .header-details-content select {
|
|
margin-bottom: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 0;
|
|
height: 19px;
|
|
padding: 0;
|
|
width: 100%;
|
|
border-color: #cccccc;
|
|
}
|
|
.sheet-darkmode .charsheet .header-details-content select {
|
|
background-color: #000;
|
|
color: #eee;
|
|
border-color: #444;
|
|
}
|
|
.charsheet .header-details-content label {
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
color: #cccccc;
|
|
}
|
|
.sheet-darkmode .charsheet .header-details-content label {
|
|
color: #d4d4d4;
|
|
}
|
|
/* SHEET HEADER (NOT TO BE CONFUSED WITH TABLE HEADERS) END */
|
|
|
|
/* TABS START */
|
|
.charsheet .sheet-tabs {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.charsheet .sheet-tabs::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.charsheet .sheet-tab {
|
|
width: 100%;
|
|
}
|
|
.charsheet .sheet-tab:nth-of-type(2) > input[type="radio"],
|
|
.charsheet .sheet-tab:nth-of-type(2) > .sheet-tab-label {
|
|
margin-left: 16.66667%;
|
|
}
|
|
.charsheet .sheet-tab:nth-of-type(3) > input[type="radio"],
|
|
.charsheet .sheet-tab:nth-of-type(3) > .sheet-tab-label {
|
|
margin-left: 33.33333%;
|
|
}
|
|
.charsheet .sheet-tab:nth-of-type(4) > input[type="radio"],
|
|
.charsheet .sheet-tab:nth-of-type(4) > .sheet-tab-label {
|
|
margin-left: 50%;
|
|
}
|
|
.charsheet .sheet-tab:nth-of-type(5) > input[type="radio"],
|
|
.charsheet .sheet-tab:nth-of-type(5) > .sheet-tab-label {
|
|
margin-left: 66.66667%;
|
|
}
|
|
.charsheet .sheet-tab:nth-of-type(6) > input[type="radio"],
|
|
.charsheet .sheet-tab:nth-of-type(6) > .sheet-tab-label {
|
|
margin-left: 83.33333%;
|
|
}
|
|
.charsheet .sheet-tab > input[type="radio"] {
|
|
height: 30px;
|
|
margin: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 16.66667%;
|
|
z-index: 1;
|
|
}
|
|
.charsheet .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label {
|
|
background: #979797;
|
|
border-bottom-color: #ffffff;
|
|
color: #575757;
|
|
}
|
|
.sheet-darkmode .charsheet .sheet-tab > input[type="radio"]:hover ~ .sheet-tab-label {
|
|
background: #333;
|
|
border-bottom-color: #222;
|
|
color: #aaa;
|
|
}
|
|
.charsheet .sheet-tab > .sheet-tab-label {
|
|
align-items: center;
|
|
background: #dddddd;
|
|
border-radius: 6px 6px 0 0;
|
|
border: 2px solid #dddddd;
|
|
color: #8a8a8a;
|
|
display: flex;
|
|
font-size: 11px;
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
height: 30px;
|
|
justify-content: center;
|
|
margin: 0;
|
|
position: absolute;
|
|
text-transform: uppercase;
|
|
top: 0;
|
|
width: 16.66667%;
|
|
border-left-color: white;
|
|
border-top-color: white;
|
|
border-right-color: white;
|
|
border-bottom-color: lightgrey;
|
|
}
|
|
.sheet-darkmode .charsheet .sheet-tab > .sheet-tab-label {
|
|
background: #222;
|
|
border: 2px solid #333;
|
|
color: #aaa;
|
|
border-left-color: #333;
|
|
border-top-color: #333;
|
|
border-right-color: #333;
|
|
border-bottom-color: #222;
|
|
}
|
|
.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label {
|
|
background: white;
|
|
border-color: #575757;
|
|
border-bottom-color: white;
|
|
color: black;
|
|
}
|
|
.sheet-darkmode .charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-label {
|
|
background: #181818;
|
|
border-color: #aaa;
|
|
border-bottom-color: #181818;
|
|
color: #eee;
|
|
}
|
|
.charsheet .sheet-tab > input[type="radio"]:checked {
|
|
cursor: auto;
|
|
}
|
|
.charsheet .sheet-tab > input[type="radio"]:checked ~ .sheet-tab-content {
|
|
display: flex;
|
|
}
|
|
.charsheet .sheet-tab-content {
|
|
/* min-height: 847px; */
|
|
display: none;
|
|
padding: 10px;
|
|
padding-top: 45px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
gap: 10px;
|
|
}
|
|
/* TABS END */
|
|
|
|
/* COLUMNS START */
|
|
.charsheet .flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.charsheet .core-left-column {
|
|
width: 310px;
|
|
}
|
|
.charsheet .core-middle-column {
|
|
width: 245px;
|
|
}
|
|
.charsheet .core-right-column {
|
|
width: 240px;
|
|
}
|
|
.charsheet .features-left-column {
|
|
width: 350px;
|
|
}
|
|
.charsheet .features-right-column {
|
|
width: 450px;
|
|
}
|
|
.charsheet .inventory-left-column{
|
|
width: 400px;
|
|
|
|
}
|
|
.charsheet .inventory-right-column {
|
|
width: 400px;
|
|
}
|
|
.charsheet .skills-left-column{
|
|
width: 400px;
|
|
}
|
|
.charsheet .notes-left-column{
|
|
width: 300px;
|
|
}
|
|
.charsheet .notes-right-column{
|
|
width: 500px;
|
|
}
|
|
/* COLUMNS START */
|
|
|
|
/* ATTRIBUTES START */
|
|
.charsheet .main-stats-container {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"focus fitness"
|
|
"power cunning"
|
|
"agility reason"
|
|
"toughness awareness"
|
|
". presence";
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 310px;
|
|
}
|
|
.charsheet .main-stats-container .focus {
|
|
grid-area: focus;
|
|
padding-right: 5px;
|
|
}
|
|
.charsheet .main-stats-container .power {
|
|
grid-area: power;
|
|
padding-right: 5px;
|
|
}
|
|
.charsheet .main-stats-container .agility {
|
|
grid-area: agility;
|
|
padding-right: 5px;
|
|
}
|
|
.charsheet .main-stats-container .toughness {
|
|
grid-area: toughness;
|
|
padding-right: 5px;
|
|
}
|
|
.charsheet .main-stats-container .cunning {
|
|
grid-area: cunning;
|
|
border-left: #afafaf 1px solid;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .main-stats-container .cunning {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .main-stats-container .awareness {
|
|
grid-area: awareness;
|
|
border-left: #afafaf 1px solid;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .main-stats-container .awareness {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .main-stats-container .presence {
|
|
grid-area: presence;
|
|
border-left: #afafaf 1px solid;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .main-stats-container .presence {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .main-stats-container .reason {
|
|
grid-area: reason;
|
|
border-left: #afafaf 1px solid;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .main-stats-container .reason {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .main-stats-container .fitness {
|
|
grid-area: fitness;
|
|
border-left: #afafaf 1px solid;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .main-stats-container .fitness {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .attribute-container,
|
|
.charsheet .attribute-container2 {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: start;
|
|
}
|
|
.charsheet .attribute-container .label,
|
|
.charsheet .attribute-container2 .label {
|
|
display: flex;
|
|
color: #717171;
|
|
height: 30px;
|
|
width: 110px;
|
|
border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 10px 10px;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
margin-left: -15px; /*this is to fit the 2 pieces*/
|
|
padding-left: 10px; /*without this it ends too close to the edge*/
|
|
text-align: center;
|
|
justify-content: start;
|
|
line-height: 0.5;
|
|
}
|
|
.sheet-darkmode .charsheet .attribute-container .label,
|
|
.sheet-darkmode .charsheet .attribute-container2 .label,
|
|
.sheet-darkmode .charsheet .attribute-container3 .label {
|
|
color: #000000;
|
|
}
|
|
.charsheet .attribute-container .value {
|
|
width: 37px;
|
|
height: 37px;
|
|
border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 10px 10px;
|
|
box-sizing: border-box;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-content: center;
|
|
z-index: 10;
|
|
}
|
|
.charsheet .attribute-container .value input,
|
|
.charsheet .attribute-container2 .value input {
|
|
border: 0;
|
|
background: transparent;
|
|
width: 30px !important;
|
|
height: 26px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
margin-left: -6.5px;
|
|
margin-top: -4px;
|
|
color: #505050;
|
|
cursor: default;
|
|
}
|
|
.sheet-darkmode .charsheet .attribute-container .value input,
|
|
.sheet-darkmode .charsheet .attribute-container2 .value input,
|
|
.sheet-darkmode .charsheet .attribute-container3 .value input {
|
|
color: #0f0f0f;
|
|
}
|
|
|
|
.charsheet .attribute-container3 {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
align-items: center;
|
|
justify-content: start;
|
|
border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 8px 10px;
|
|
box-sizing: border-box;
|
|
width: 80px;
|
|
margin: 0 6px;
|
|
}
|
|
.charsheet .attribute-container3 .label {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
justify-content: start;
|
|
line-height: 0.5;
|
|
color: #8c8c8c;
|
|
}
|
|
.charsheet .attribute-container3 .value input {
|
|
border: 0;
|
|
background: transparent;
|
|
width: 100%;
|
|
height: 20px;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
color: #505050;
|
|
cursor: default;
|
|
}
|
|
/* ATTRIBUTE END */
|
|
|
|
/* DERIVED ATTRIBUTES START*/
|
|
.charsheet .gap-5 {
|
|
gap: 5px;
|
|
}
|
|
|
|
.charsheet .attribute-container .label.composite {
|
|
justify-content: center;
|
|
width: 160px;
|
|
cursor: default;
|
|
}
|
|
.charsheet .attribute-container .label.composite2 {
|
|
justify-content: center;
|
|
width: 120px;
|
|
cursor: default;
|
|
}
|
|
.charsheet .attribute-container .label button[type="action"],
|
|
.charsheet .attribute-container .label button[type="roll"] {
|
|
font-size: 12px !important;
|
|
margin-left: 0px;
|
|
line-height: 0.1;
|
|
text-align: start;
|
|
}
|
|
.charsheet .attribute-container .value.composite {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
width: 160px;
|
|
}
|
|
.charsheet .attribute-container .value.composite2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
width: 100px;
|
|
}
|
|
.charsheet .attribute-container .value.composite input {
|
|
width: 42px !important;
|
|
margin-left: 0px;
|
|
font-size: 15px;
|
|
}
|
|
.charsheet .attribute-container .value.composite2 input {
|
|
width: 75px !important;
|
|
margin-left: 0px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.charsheet .attribute-container .value.composite input:nth-of-type(2) {
|
|
border-left: #a7a7a7 1px solid;
|
|
border-radius: 0%;
|
|
}
|
|
.sheet-darkmode .charsheet .attribute-container .value.composite input:nth-of-type(2) {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .attribute-container .value.composite input:nth-of-type(3) {
|
|
border-left: #a7a7a7 1px solid;
|
|
border-radius: 0%;
|
|
}
|
|
.sheet-darkmode .charsheet .attribute-container .value.composite input:nth-of-type(3) {
|
|
border-left: #555555 1px solid;
|
|
}
|
|
.charsheet .attribute-container2 .value {
|
|
background: url("https://iili.io/K6nyElI.png"); /*Derived Attribute DiamondBox*/
|
|
width: 40px;
|
|
height: 40px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: flex;
|
|
background-size: 100%;
|
|
margin: 0, auto;
|
|
z-index: 20;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.charsheet .attribute-container2 .label {
|
|
margin-left: -30px;
|
|
padding-left: 25px;
|
|
width: 130px;
|
|
}
|
|
.charsheet .attribute-container2 .label button[type="action"],
|
|
.charsheet .attribute-container2 .label button[type="roll"] {
|
|
font-size: 12px !important;
|
|
margin-left: 2px;
|
|
line-height: 0.1;
|
|
text-align: start;
|
|
}
|
|
.charsheet .attribute-container2 .value input {
|
|
width: 40 !important;
|
|
margin-top: 0.3px;
|
|
margin-left: 0px;
|
|
font-size: 16px;
|
|
}
|
|
.charsheet input:checked ~ .attribute-container.all-mount-hp,
|
|
.charsheet input:checked ~ .mount-divider{
|
|
display: flex;
|
|
}
|
|
.charsheet .mount-divider{
|
|
display: none;
|
|
text-transform: uppercase;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #161616;
|
|
}
|
|
.charsheet .attribute-container.all-mount-hp{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .derived-stats {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"evasion dodge"
|
|
"guard blocking"
|
|
"save-bonus potency"
|
|
"initiative speed";
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 5px;
|
|
}
|
|
.charsheet .derived-stats .evasion {
|
|
grid-area: evasion;
|
|
}
|
|
.charsheet .derived-stats .dodge {
|
|
grid-area: dodge;
|
|
}
|
|
.charsheet .derived-stats .guard {
|
|
grid-area: guard;
|
|
}
|
|
.charsheet .derived-stats .blocking {
|
|
grid-area: blocking;
|
|
}
|
|
.charsheet .derived-stats .save-bonus {
|
|
grid-area: save-bonus;
|
|
}
|
|
.charsheet .derived-stats .potency {
|
|
grid-area: potency;
|
|
}
|
|
.charsheet .derived-stats .speed {
|
|
grid-area: speed;
|
|
}
|
|
.charsheet .derived-stats .initiative {
|
|
grid-area: initiative;
|
|
}
|
|
|
|
.charsheet .section-container.basic-attacks {
|
|
display: grid;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"misc-bonuses"
|
|
"main-weapon-attack"
|
|
"generic-attack";
|
|
gap: 5px;
|
|
}
|
|
.charsheet .section-container.basic-attacks .picker {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.charsheet .section-container.basic-attacks .picker label{
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: #cccccc;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
.sheet-darkmode .charsheet .section-container.basic-attacks .picker label{
|
|
color: #2e2e2e;
|
|
}
|
|
.charsheet .section-container.basic-attacks .picker select{
|
|
margin-bottom: 0;
|
|
border: none;
|
|
border-bottom: #cccccc 1px solid;
|
|
border-radius: 0%;
|
|
height: 15px;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-darkmode .section-container.basic-attacks .picker select{
|
|
color: #131313;
|
|
border-bottom: #1e1e1e 1px solid;
|
|
background: #fff;
|
|
}
|
|
.sheet-darkmode .charsheet .section-container.basic-attacks .picker select:focus,
|
|
.sheet-darkmode .charsheet .section-container.basic-attacks .picker select:hover{
|
|
background: #fff;
|
|
color: #131313;
|
|
}
|
|
.charsheet .section-container.core-skills {
|
|
height: 100%;
|
|
}
|
|
.charsheet .section-container.core-abilities {
|
|
height: 100%;
|
|
}
|
|
.charsheet .basic-attack.mwp {
|
|
grid-area: main-weapon-attack;
|
|
}
|
|
.charsheet .basic-attack.generic {
|
|
grid-area: generic-attack;
|
|
}
|
|
|
|
.charsheet .attribute-container .label.basic-attack {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: 0px;
|
|
width: 210px;
|
|
}
|
|
.charsheet .attribute-container .label.basic-attack button {
|
|
font-size: 14px !important;
|
|
line-height: 0.3;
|
|
text-align: center;
|
|
}
|
|
|
|
.charsheet .static-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.charsheet .attribute-value.single-block {
|
|
display: flex;
|
|
width: 70px;
|
|
height: 37px;
|
|
border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 10px 10px;
|
|
box-sizing: border-box;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
justify-content: center;
|
|
align-content: center;
|
|
z-index: 10;
|
|
}
|
|
.charsheet .attribute-value.single-block input {
|
|
margin-top: 3px;
|
|
}
|
|
.charsheet .small-attribute-label {
|
|
font-size: 7px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
line-height: 1.5;
|
|
color: #454545;
|
|
margin-bottom: -12px;
|
|
z-index: 30;
|
|
}
|
|
.sheet-darkmode .charsheet .small-attribute-label {
|
|
color: #b0b0b0;
|
|
}
|
|
/* DERIVED ATTRIBUTES END */
|
|
|
|
/* TABLES START */
|
|
.charsheet .table-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-image: url("https://iili.io/K6nUJmF.png") /*Attribute HexBox*/
|
|
50 50 50 50 fill stretch;
|
|
border-style: solid;
|
|
border-width: 10px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.charsheet .table-container.minH300 {
|
|
min-height: 300px;
|
|
}
|
|
.charsheet .table-container.minH200 {
|
|
min-height: 200px;
|
|
}
|
|
.charsheet .table-container.minH100 {
|
|
min-height: 100px;
|
|
}
|
|
/* TABLES START */
|
|
|
|
/* INJURIES TABLE START*/
|
|
.charsheet .table-container .injuries-grid {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"head-injury eye-injury"
|
|
"main-hand-injury off-hand-injury"
|
|
"leg-injury foot-injury"
|
|
"muscle-injury laceration-injury"
|
|
"spirit-circuit-injury wound-injury";
|
|
width: 100%;
|
|
gap: 2px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .injuries-grid {
|
|
color: #0f0f0f;
|
|
}
|
|
.charsheet .injuries-grid span{
|
|
cursor: default;
|
|
}
|
|
.charsheet .injuries-grid .head {
|
|
grid-area: head-injury;
|
|
}
|
|
.charsheet .injuries-grid .eye {
|
|
grid-area: eye-injury;
|
|
}
|
|
.charsheet .injuries-grid .main-hand {
|
|
grid-area: main-hand-injury;
|
|
}
|
|
.charsheet .injuries-grid .off-hand {
|
|
grid-area: off-hand-injury;
|
|
}
|
|
.charsheet .injuries-grid .leg {
|
|
grid-area: leg-injury;
|
|
}
|
|
.charsheet .injuries-grid .foot {
|
|
grid-area: foot-injury;
|
|
}
|
|
.charsheet .injuries-grid .muscle {
|
|
grid-area: muscle-injury;
|
|
}
|
|
.charsheet .injuries-grid .laceration {
|
|
grid-area: laceration-injury;
|
|
}
|
|
.charsheet .injuries-grid .spirit-circuit {
|
|
grid-area: spirit-circuit-injury;
|
|
}
|
|
.charsheet .injuries-grid .wound {
|
|
grid-area: wound-injury;
|
|
}
|
|
.charsheet .injury-container {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
justify-content: start;
|
|
width: 100%;
|
|
}
|
|
/* INJURIES TABLE END*/
|
|
|
|
/* =========================================================================== */
|
|
|
|
/* GENERAL REPEATING TABLES STYLES START */
|
|
.charsheet .table-container .table-body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
flex:1;
|
|
}
|
|
.charsheet .table-container .item-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
border-bottom: #717171 1px solid;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .item-container {
|
|
border-bottom: #444 1px solid;
|
|
}
|
|
.charsheet .table-container .table-name2 {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-top: -5px;
|
|
margin-bottom: 5px;
|
|
color: #717171;
|
|
border-bottom: #202020 2px solid;
|
|
text-align: center;
|
|
padding: 0px;
|
|
width: 100%;
|
|
cursor: default;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-name2 {
|
|
color: #2c2c2c;
|
|
border-bottom: #202020 2px solid;
|
|
}
|
|
.charsheet .table-container .headers-container{
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
border-bottom: #717171 1px solid;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .headers-container {
|
|
border-bottom: #444 1px solid;
|
|
}
|
|
.charsheet .table-container .headers-container .header2{
|
|
font-size: 10px;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .headers-container .header2{
|
|
color: #0f0f0f;
|
|
}
|
|
.charsheet .table-container .row-container{
|
|
display: none;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
.charsheet .table-container input[type="checkbox"]:checked + .row-container,
|
|
.charsheet .npc-sheet-content .row-container {
|
|
display: flex;
|
|
}
|
|
.charsheet .table-container .table-row{
|
|
font-size: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row{
|
|
color: #0f0f0f;
|
|
}
|
|
.charsheet .table-container .table-row .name-button{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
justify-content: start;
|
|
height: 20px;
|
|
width: 100%;
|
|
}
|
|
.charsheet .table-container .table-row .name-button button[type="action"]{
|
|
opacity: 100;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: 200px;
|
|
min-height: 20px;
|
|
z-index: 10;
|
|
}
|
|
.charsheet .table-container .table-row .name-button span{
|
|
display: flex;
|
|
font-size: 10px;
|
|
width: 100%;
|
|
/* min-height: 20px; */
|
|
height: 20px;
|
|
width: 200px;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
color: #202020;
|
|
text-align: start;
|
|
align-items: center;
|
|
justify-content: start;
|
|
padding-top: 2px;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 0px;
|
|
box-sizing: border-box;
|
|
white-space: nowrap; /* Prevents wrapping */
|
|
overflow: hidden; /* Hides overflow */
|
|
text-overflow: ellipsis; /* Shows "..." if text is cut off */
|
|
display: inline-block;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .name-button span{
|
|
color: #141414;
|
|
}
|
|
.charsheet .table-container .table-row .name-button button:hover + span {
|
|
color: #b61037;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .name-button button:hover + span {
|
|
color: #49efc8;
|
|
}
|
|
.charsheet .table-container .table-row .name-button button:active + span {
|
|
color: #ff0000;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .name-button button:active + span {
|
|
color: #0ff;
|
|
}
|
|
|
|
.charsheet .table-container .table-row select{
|
|
margin-bottom: 0;
|
|
border: none;
|
|
height: 20px;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 11px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row select{
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
.charsheet .table-container .table-row .actions .view-details{
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
margin-bottom: 1px;
|
|
line-height: 0.7;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item.thin {
|
|
width: 13px;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item input[type="checkbox"] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
margin-left: -10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
z-index: 10;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item.thin input[type="checkbox"] {
|
|
width: 13px;
|
|
margin-left: 0px;
|
|
}
|
|
.sheet-darkmode .charsheet .npc-icon,
|
|
.charsheet .table-container .table-row .actions .item span {
|
|
display: flex;
|
|
width: 20px;
|
|
height: 20px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #9e9e9e;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
margin-top: 0px;
|
|
}
|
|
.sheet-darkmode .charsheet .npc-icon,
|
|
.sheet-darkmode .charsheet .table-container .table-row .actions .item span {
|
|
color: #272626;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item.thin span {
|
|
width: 13px;
|
|
}
|
|
.charsheet input:hover + .npc-icon,
|
|
.charsheet .table-container .table-row .actions .item input:hover + span {
|
|
border-color: #b61037;
|
|
color: #b61037;
|
|
}
|
|
.sheet-darkmode .charsheet input:hover + .npc-icon,
|
|
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:hover + span {
|
|
border-color: #49efc8;
|
|
color: #49efc8;
|
|
}
|
|
.charsheet input:active + .npc-icon,
|
|
.charsheet .table-container .table-row .actions .item input:active + span {
|
|
border-color: #ff0000;
|
|
color: #ff0000;
|
|
}
|
|
.sheet-darkmode .charsheet input:active + .npc-icon,
|
|
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:active + span {
|
|
border-color: #0ff;
|
|
color: #0ff;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item .favorite{
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item input:checked + .favorite{
|
|
color: rgb(255, 225, 0);
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:checked + .favorite{
|
|
color: rgb(0, 102, 255);
|
|
}
|
|
.charsheet .table-container .table-row .actions .item .info{
|
|
display: inline-block;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item input:checked + .info{
|
|
color: blue;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .actions .item input:checked + .info{
|
|
color: #c37200;
|
|
}
|
|
.charsheet .table-container .table-row .actions .item .edit{
|
|
display: inline-block;
|
|
font-size: 15px;
|
|
margin-top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
.charsheet .table-container .table-row .row-details{
|
|
display: none;
|
|
gap: 5px;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
font-size: 9px;
|
|
text-align: justify;
|
|
padding: 5px;
|
|
background-color: #f3f3f3;
|
|
border: #717171 1px solid;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
gap: 8px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .row-details {
|
|
background-color: #222;
|
|
border: #444 1px solid;
|
|
}
|
|
.charsheet .table-container .table-row .row-details .details-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
align-items: center;
|
|
}
|
|
.charsheet .table-container .table-row .row-details .details-label{
|
|
flex: 1;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet .table-container .table-row .row-details span{
|
|
flex: 1;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.charsheet .table-container .details-container {
|
|
display: none;
|
|
flex-direction: column;
|
|
font-size: 10px;
|
|
text-align: justify;
|
|
padding: 5px;
|
|
background-color: #f3f3f3;
|
|
border: #717171 1px solid;
|
|
border-radius: 5px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
gap: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .details-container {
|
|
background-color: #222;
|
|
border: #444 1px solid;
|
|
}
|
|
.charsheet .table-container .details-container .details-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-label {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-value {
|
|
flex: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
line-height: 1.5;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-label2 {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-value2 {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.charsheet .form-container{
|
|
display: grid;
|
|
min-height: 100px;
|
|
padding: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
border: #717171 1px solid;
|
|
border-radius: 5px;
|
|
align-items: center;
|
|
margin: 5px;
|
|
gap: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container {
|
|
border: #444 1px solid;
|
|
}
|
|
.charsheet .table-container input[type="checkbox"]:checked + .form-container {
|
|
display: none;
|
|
}
|
|
.charsheet .form-container input[type="number"],
|
|
.charsheet .form-container input[type="text"]{
|
|
margin-bottom: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 0;
|
|
height: 15px;
|
|
padding: 0;
|
|
width: 100%;
|
|
border-color: #cccccc;
|
|
background-color: white;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container input[type="number"],
|
|
.sheet-darkmode .charsheet .form-container input[type="text"]{
|
|
color: #131313;
|
|
border-color: #1e1e1e;
|
|
}
|
|
.charsheet .form-container .block-textarea {
|
|
width: 100%;
|
|
min-height: 48px;
|
|
height: 48px;
|
|
resize: vertical; /* Allows user to resize vertically */
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container .block-textarea:hover,
|
|
.sheet-darkmode .charsheet .form-container .block-textarea:focus{
|
|
background: #fff;
|
|
color: #131313;
|
|
}
|
|
.charsheet .form-container label{
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
color: #cccccc;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container label{
|
|
color: #2e2e2e;
|
|
}
|
|
.charsheet .form-container .picker select{
|
|
margin-bottom: 0;
|
|
border: none;
|
|
border-bottom: #cccccc 1px solid;
|
|
border-radius: 0%;
|
|
height: 15px;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container .picker select{
|
|
color: #131313;
|
|
border-bottom: #1e1e1e 1px solid;
|
|
background: #fff;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container .picker select:focus,
|
|
.sheet-darkmode .charsheet .form-container .picker select:hover{
|
|
background: #fff;
|
|
color: #131313;
|
|
}
|
|
.charsheet .form-container .custom-enabler:checked ~ .custom{
|
|
display: flex;
|
|
}
|
|
|
|
|
|
.charsheet .form-container .form-close{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 20px;
|
|
width: 100%;
|
|
grid-area: close;
|
|
}
|
|
.charsheet .form-container .form-close input[type="checkbox"] {
|
|
opacity: 0;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
width: 90px;
|
|
height: 20px;
|
|
z-index: 10;
|
|
}
|
|
.charsheet .form-container .form-close span {
|
|
display: flex;
|
|
font-size: 10px;
|
|
width: 90px;
|
|
height: 20px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 2px;
|
|
border: #8a8a8a 2px solid;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-top: 0px;
|
|
box-sizing: border-box;
|
|
border-color: #2e2e2e;
|
|
color: #2e2e2e;
|
|
}
|
|
.charsheet .form-container .form-close input:hover + span {
|
|
border-color: #b61037;
|
|
color: #b61037;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container .form-close input:hover + span {
|
|
border-color: #49efc8;
|
|
color: #49efc8;
|
|
}
|
|
.charsheet .form-container .form-close input:active + span {
|
|
border-color: #ff0000;
|
|
color: #ff0000;
|
|
}
|
|
.sheet-darkmode .charsheet .form-container .form-close input:active + span {
|
|
border-color: #00ffff;
|
|
color: #00ffff;
|
|
}
|
|
|
|
/* THIS IS TO HANDLE THE AUTO GENERATED REPEATING TABLE CONTROLS */
|
|
.charsheet .table-container .repcontrol {
|
|
margin-top: auto;
|
|
padding-top: 5px;
|
|
}
|
|
.charsheet .table-container .repcontrol_del, .charsheet .table-container .repcontrol_move{
|
|
z-index: 100;
|
|
position: relative;
|
|
pointer-events: auto;
|
|
}
|
|
.charsheet .table-container .repcontrol_add,
|
|
.charsheet .table-container .repcontrol_edit {
|
|
font-size: 10px;
|
|
background: none;
|
|
/* width: 90px; */
|
|
height: 15px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #717171;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 2px;
|
|
border: #8a8a8a 2px solid;
|
|
border-radius: 4px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_add,
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_edit {
|
|
border-color: #2e2e2e;
|
|
color: #2e2e2e;
|
|
}
|
|
.charsheet .table-container .repcontrol_add:hover,
|
|
.charsheet .table-container .repcontrol_edit:hover {
|
|
border-color: #b61037;
|
|
color: #b61037;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_add:hover,
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_edit:hover {
|
|
border-color: #49efc8;
|
|
color: #49efc8;
|
|
}
|
|
.charsheet .table-container .repcontrol_add:active,
|
|
.charsheet .table-container .repcontrol_edit:active {
|
|
border-color: #ff0000;
|
|
color: #ff0000;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_add:active,
|
|
.sheet-darkmode .charsheet .table-container .repcontrol_edit:active {
|
|
border-color: #00ffff;
|
|
color: #00ffff;
|
|
}
|
|
/* GENERAL REPEATING TABLES STYLES END */
|
|
|
|
/* =========================================================================== */
|
|
|
|
/* CLASSES REVAMPED STYLES START */
|
|
|
|
.charsheet .table-container .headers-container .header2.name {
|
|
flex: 8;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.tier {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.level {
|
|
flex: 3;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.xp {
|
|
flex: 3;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions {
|
|
flex: 1;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name{
|
|
font-size: 10px;
|
|
flex: 8;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .tier {
|
|
flex: 2;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .level{
|
|
flex:3;
|
|
|
|
}
|
|
.charsheet .table-container .table-row .xp {
|
|
flex: 3;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .actions{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: end;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.class-grid{
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown xp-modifier"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
.charsheet .table-container .custom-enabler:checked ~ .class-grid {
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown xp-modifier"
|
|
"name name name tier"
|
|
"close close close close";
|
|
}
|
|
.charsheet .form-container .name {
|
|
display: none;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .tier {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: tier;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .xp-modifier {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: xp-modifier;
|
|
width: 100%;
|
|
}
|
|
/* CLASSES REVAMPED STYLES END */
|
|
|
|
/* =========================================================================== */
|
|
|
|
/* BREAKTHROUGH REVAMPED STYLES START */
|
|
|
|
.charsheet .table-container .headers-container .header2.name2 {
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.xp2 {
|
|
flex: 3;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions2 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name2{
|
|
font-size: 10px;
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .xp2 {
|
|
flex: 3;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .actions2{
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: end;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.breakthrough-grid{
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown starter"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
}
|
|
.charsheet .table-container .custom-enabler:checked ~ .breakthrough-grid {
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown starter"
|
|
"name name name xp"
|
|
"requirements requirements requirements requirements"
|
|
"description description description description"
|
|
"close close close close";
|
|
}
|
|
.charsheet .form-container .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker.starter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: starter;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .name {
|
|
display: none;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .xp {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: xp;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .requirements {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: requirements;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .description {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .table-container input:checked + .details-container.breakthrough {
|
|
display: flex;
|
|
}
|
|
|
|
|
|
/* BREAKTHROUGH REVAMPED STYLES END */
|
|
|
|
.charsheet button[type="action"].autofill-button {
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 20px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #717171;
|
|
text-align: center;
|
|
border: #8a8a8a 2px solid;
|
|
border-radius: 4px;
|
|
}
|
|
.charsheet button[type="action"].autofill-button:hover {
|
|
border-color: #b61037;
|
|
color: #b61037;
|
|
}
|
|
|
|
.sheet-darkmode .charsheet button[type="action"].autofill-button {
|
|
border-color: #dcdcdc;
|
|
color: #dadada;
|
|
}
|
|
.sheet-darkmode .charsheet button[type="action"].autofill-button:hover {
|
|
border-color: #b61037;
|
|
color: #b61037;
|
|
}
|
|
|
|
|
|
/* ABILITIES REVAMPED STYLES START */
|
|
|
|
.charsheet .table-container.abilities {
|
|
min-height: 450px;
|
|
}
|
|
.charsheet .table-container.abilities.keyab {
|
|
min-height: 150px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.name3 {
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.range3 {
|
|
flex: 3;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.cost3 {
|
|
flex: 4;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions3 {
|
|
flex: 4;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name3{
|
|
font-size: 10px;
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name3 button{
|
|
width: 150px;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name3 span{
|
|
width: 150px;
|
|
}
|
|
.charsheet .table-container .table-row .range3 {
|
|
flex: 3;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .range3 span{
|
|
white-space: nowrap; /* Prevents wrapping */
|
|
overflow: hidden; /* Hides overflow */
|
|
text-overflow: ellipsis; /* Shows "..." if text is cut off */
|
|
display: inline-block; /* Needed for width to apply */
|
|
max-width: 55px;
|
|
vertical-align: middle;
|
|
height: 100%;
|
|
}
|
|
.charsheet .table-container .table-row .cost3 {
|
|
flex: 4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.icon button{
|
|
width: 20px;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.icon span{
|
|
width: 20px;
|
|
font-size: 15px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.charsheet .table-container .table-row .actions3{
|
|
flex: 4;
|
|
}
|
|
|
|
.charsheet .table-container input:checked + input:checked + .details-container.ability {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.ability-grid{
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown dropdown"
|
|
"rolls rolls rolls rolls"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .table-container .custom-enabler:checked ~ .ability-grid {
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown dropdown"
|
|
"name name name atype"
|
|
"keywords keywords range costs"
|
|
"requirements requirements requirements requirements"
|
|
"description description description description"
|
|
"rolls rolls rolls rolls"
|
|
"close close close close";
|
|
}
|
|
.charsheet .form-container .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .name {
|
|
display: none;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker.atype {
|
|
display: none;
|
|
grid-area: atype;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container input:checked + .picker.atype {
|
|
display: flex;
|
|
}
|
|
.charsheet .form-container .block-textarea.requirements-ba {
|
|
min-height: 25px;
|
|
height: 25px;
|
|
}
|
|
.charsheet .form-container .range {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: range;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .keywords {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: keywords;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .costs {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: costs;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .requirements {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: requirements;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .description {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker.rolls {
|
|
display: flex;
|
|
grid-area: rolls;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.charsheet .form-container .custom-macro {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-top: 5px;
|
|
}
|
|
.charsheet .form-container input:checked + .custom-macro {
|
|
display: flex;
|
|
}
|
|
.charsheet .form-container .custom-macro .block-textarea {
|
|
font-size: 10px;
|
|
margin:0px;
|
|
min-height: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
|
|
/* ABILITIES REVAMPED STYLES END */
|
|
|
|
|
|
/* FAVORITE ABILITIES REVAMPED STYLES START */
|
|
.charsheet .table-container.favorite-abilities{
|
|
height: 100%;
|
|
}
|
|
.charsheet .table-container.favorite-abilities input:checked + .item-container{
|
|
display: flex;
|
|
}
|
|
.charsheet .table-container.favorite-abilities input:checked + .item-container .row-container{
|
|
display: flex;
|
|
}
|
|
.charsheet .table-container.favorite-abilities .item-container{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .table-container.favorite-abilities .table-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.charsheet .table-container.favorite-abilities .table-row .name-button.name3 {
|
|
flex:11
|
|
}
|
|
.charsheet .table-container.favorite-abilities .table-row .name-button.icon {
|
|
display: flex;
|
|
justify-content: end;
|
|
flex:1;
|
|
}
|
|
.charsheet .table-container.favorite-abilities .table-row .name-button span {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .table-container.favorite-abilities .table-row .name-button.name3 button{
|
|
width: 100%;
|
|
}
|
|
.charsheet .table-container.favorite-abilities .table-row .name-button.name3 span{
|
|
width: 100%;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .table-container.favorite-abilities .repcontrol{
|
|
/* display: none; */
|
|
}
|
|
.charsheet .table-container.favorite-abilities .repcontrol .repcontrol_add{
|
|
display: none !important;
|
|
}
|
|
.charsheet .table-container.favorite-abilities .repitem .repcontrol_del{
|
|
display: none;
|
|
}
|
|
/* FAVORITE ABILITIES REVAMPED STYLES END */
|
|
|
|
/* FAVORITE EXPERTISES REVAMPED STYLES START */
|
|
.charsheet .table-container.favorite-expertises{
|
|
height: 100%;
|
|
}
|
|
.charsheet .table-container.favorite-expertises input:checked + .item-container{
|
|
display: flex;
|
|
}
|
|
.charsheet .table-container.favorite-expertises input:checked + .item-container .row-container{
|
|
display: flex;
|
|
}
|
|
.charsheet .table-container.favorite-expertises .item-container{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .table-container.favorite-expertises .table-row .name-button.name3 button{
|
|
width: 192px;
|
|
}
|
|
.charsheet .table-container.favorite-expertises .table-row .name-button.name3 span{
|
|
width: 192px;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .table-container.favorite-expertises .repcontrol{
|
|
display: none;
|
|
}
|
|
/* FAVORITE EXPERTISES REVAMPED STYLES END */
|
|
|
|
/* ARMORS REVAMPED STYLES START */
|
|
|
|
.charsheet .table-container .headers-container .header2.name4 {
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.burden4 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.status4 {
|
|
flex: 3;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions4 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name4{
|
|
font-size: 10px;
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .burden4 {
|
|
flex: 3;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .status4 {
|
|
flex: 3;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
.charsheet .table-container .form-container.armor-grid{
|
|
grid-template-areas:
|
|
"name name status status burden"
|
|
"guard block evasion dodge initiative"
|
|
"description description description description description"
|
|
"close close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .form-container.armor-grid .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .burden {
|
|
flex-direction: column;
|
|
grid-area: burden;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .status {
|
|
flex-direction: column;
|
|
grid-area: status;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .evasion {
|
|
grid-area: evasion;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .dodge {
|
|
grid-area: dodge;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .initiative {
|
|
grid-area: initiative;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .guard {
|
|
grid-area: guard;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .block {
|
|
grid-area: block;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.armor-grid .description textarea{
|
|
margin-bottom: 0px;
|
|
}
|
|
.charsheet .table-container input:checked + .details-container.armor {
|
|
display: flex;
|
|
}
|
|
|
|
/* ARMORS REVAMPED STYLES END */
|
|
|
|
/* WEAPONS REVAMPED STYLES START */
|
|
|
|
.charsheet .table-container .headers-container .header2.name5 {
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.burden5 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.status5 {
|
|
flex: 4;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions5 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name5{
|
|
font-size: 10px;
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .burden5 {
|
|
flex: 2;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .status5 {
|
|
flex: 4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-label2.flex-2{
|
|
flex: 2;
|
|
}
|
|
|
|
|
|
.charsheet .table-container .form-container.weapon-grid{
|
|
grid-template-areas:
|
|
"name name status status"
|
|
"burden focus power critrange"
|
|
"wpn-type wpn-type wpn-type dmgtype"
|
|
"description description description description"
|
|
"customroll customroll customroll customroll"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .form-container.weapon-grid .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .burden {
|
|
flex-direction: column;
|
|
grid-area: burden;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .status {
|
|
flex-direction: column;
|
|
grid-area: status;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .wpn-type {
|
|
grid-area: wpn-type;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .dmgtype {
|
|
grid-area: dmgtype;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .focus {
|
|
grid-area: focus;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .power {
|
|
grid-area: power;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .critrange {
|
|
grid-area: critrange;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.weapon-grid .customroll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: customroll;
|
|
width: 100%;
|
|
font-family: "Courier New", Courier, monospace;
|
|
}
|
|
.charsheet .form-container.weapon-grid .description textarea{
|
|
margin-bottom: 0px;
|
|
}
|
|
.charsheet .table-container input:checked + .details-container.weapon {
|
|
display: flex;
|
|
}
|
|
|
|
/* WEAPONS REVAMPED STYLES END */
|
|
|
|
|
|
/* MISC ITEMS REVAMPED STYLES START */
|
|
|
|
.charsheet .section-container.misc-inventory {
|
|
min-height: 740px;
|
|
height: 100%;
|
|
}
|
|
.charsheet .table-container.misc-inventory {
|
|
height: 100%;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.name6 {
|
|
flex: 8;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.amount6 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.burden6 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.status6 {
|
|
flex: 4;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions6 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name6{
|
|
font-size: 10px;
|
|
flex: 8;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .amount6 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .table-row .amount6 input{
|
|
margin-bottom: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
border-radius: 0;
|
|
height: 15px;
|
|
padding: 0;
|
|
width: 100%;
|
|
border-color: #cccccc;
|
|
background-color: #f0f0f0;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .table-row .amount6 input{
|
|
color: #131313;
|
|
border-color: #393939;
|
|
background-color: #bcbcbc;
|
|
}
|
|
.charsheet .table-container .table-row .burden6 {
|
|
flex: 2;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .status6 {
|
|
flex: 4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.misc-grid{
|
|
grid-template-areas:
|
|
"name name burden status"
|
|
"description description description description"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .form-container.misc-grid .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.misc-grid .name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.misc-grid .burden {
|
|
flex-direction: column;
|
|
grid-area: burden;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.misc-grid .status {
|
|
flex-direction: column;
|
|
grid-area: status;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.misc-grid .description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.misc-grid .description textarea{
|
|
margin-bottom: 0px;
|
|
}
|
|
.charsheet .table-container input:checked + .details-container.misc-item {
|
|
display: flex;
|
|
}
|
|
|
|
/* MISC ITEMS REVAMPED STYLES END */
|
|
|
|
/* MOUNTS STYLES START */
|
|
|
|
.charsheet .table-container .headers-container .header2.name10 {
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.mtype10 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.status10 {
|
|
flex: 4;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions10 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name10{
|
|
font-size: 10px;
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .mtype10 {
|
|
flex: 2;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .status10 {
|
|
flex: 4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .details-container .details-row .details-label2.flex-2{
|
|
flex: 2;
|
|
}
|
|
|
|
|
|
.charsheet .table-container .form-container.mount-grid{
|
|
grid-template-areas:
|
|
"name name status mtype"
|
|
"hp speed focus power"
|
|
"description description description description"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .form-container.mount-grid .name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .status {
|
|
flex-direction: column;
|
|
grid-area: status;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .mtype {
|
|
flex-direction: column;
|
|
grid-area: mtype;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .hp {
|
|
grid-area: hp;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .speed {
|
|
grid-area: speed;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .focus {
|
|
grid-area: focus;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .power {
|
|
grid-area: power;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.mount-grid .description textarea{
|
|
margin-bottom: 0px;
|
|
}
|
|
.charsheet .table-container input:checked + .details-container.mount {
|
|
display: flex;
|
|
}
|
|
|
|
/* MOUNTS REVAMPED STYLES END */
|
|
|
|
/* SKILLS REVAMPED STYLES START */
|
|
.charsheet .table-container .headers-container .header2.name7 {
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.total7 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.stat7 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.points7 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.misc7 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .skill-row {
|
|
font-size: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
border-top: #717171 1px solid;
|
|
}
|
|
.charsheet .table-container .skill-row.no-top {
|
|
border-top: none !important;
|
|
}
|
|
.charsheet .table-container .skill-row .name {
|
|
font-size: inherit;
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .skill-row .name button[type="action"],
|
|
.charsheet .table-container .skill-row .name button[type="roll"] {
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
height: 20px;
|
|
text-align: start;
|
|
width: 150px;
|
|
}
|
|
.charsheet .table-container .skill-row .name button[type="action"]:hover,
|
|
.charsheet .table-container .skill-row .name button[type="roll"]:hover {
|
|
color: #b61037;
|
|
border-color: #b61037;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"]:hover,
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"]:hover {
|
|
color: #49efc8;
|
|
border-color: #49efc8;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"],
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"] {
|
|
color: #131313;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="action"]:hover,
|
|
.sheet-darkmode .charsheet .table-container .skill-row .name button[type="roll"]:hover {
|
|
color: #49efc8;
|
|
border-color: #49efc8;
|
|
}
|
|
.charsheet .table-container .skill-row .name button[type="action"]:active,
|
|
.charsheet .table-container .skill-row .name button[type="roll"]:active {
|
|
color: #ff0000;
|
|
border-color: #ff0000;
|
|
}
|
|
|
|
.charsheet .table-container .skill-row .total {
|
|
font-size: inherit;
|
|
flex: 2;
|
|
text-align: center;
|
|
}
|
|
.charsheet .table-container .skill-row .total input{
|
|
font-weight: bold;
|
|
}
|
|
.charsheet .table-container .skill-row .stat {
|
|
font-size: inherit;
|
|
flex: 2;
|
|
text-align: center;
|
|
}
|
|
.charsheet .table-container .skill-row .points {
|
|
font-size: inherit;
|
|
flex: 2;
|
|
text-align: center;
|
|
}
|
|
.charsheet .table-container .skill-row .misc {
|
|
font-size: inherit;
|
|
flex: 2;
|
|
text-align: center;
|
|
}
|
|
.charsheet .table-container .skill-row input[type="number"] {
|
|
border: 0;
|
|
font-size: 11px;
|
|
background: transparent;
|
|
width: 30px !important;
|
|
text-align: center;
|
|
padding: 0;
|
|
color: black;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container .skill-row input[type="number"] {
|
|
color: #131313;
|
|
}
|
|
/* SKILLS REVAMPED STYLES END */
|
|
|
|
|
|
/* EXPERTISE STYLES START */
|
|
.charsheet .table-container .headers-container .header2.name8 {
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.total8,
|
|
.charsheet .table-container .headers-container .header2.skill8,
|
|
.charsheet .table-container .headers-container .header2.points8,
|
|
.charsheet .table-container .headers-container .header2.misc8{
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions8 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name8{
|
|
font-size: 10px;
|
|
flex: 9;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .total8 input,
|
|
.charsheet .table-container .table-row .skill8 input,
|
|
.charsheet .table-container .table-row .points8 input,
|
|
.charsheet .table-container .table-row .misc8 input{
|
|
border: 0;
|
|
font-size: 11px;
|
|
background: transparent;
|
|
width: 100% !important;
|
|
text-align: center;
|
|
padding: 0;
|
|
color: black;
|
|
}
|
|
.charsheet .table-container .table-row .total8,
|
|
.charsheet .table-container .table-row .skill8,
|
|
.charsheet .table-container .table-row .points8,
|
|
.charsheet .table-container .table-row .misc8 {
|
|
flex: 2;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .actions.action8 {
|
|
flex: 2;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name8 button{
|
|
width: 160px;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name8 span{
|
|
width: 160px;
|
|
text-align: start;
|
|
justify-content: start;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.expertise-grid{
|
|
grid-template-areas:
|
|
"name name skill"
|
|
"close close close";
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .form-container.expertise-grid .name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container.expertise-grid .skill {
|
|
flex-direction: column;
|
|
grid-area: skill;
|
|
width: 100%;
|
|
}
|
|
/* EXPERTISE STYLES END */
|
|
|
|
|
|
/* CRAFTING AND GATHERING STYLES START */
|
|
|
|
.charsheet .table-container.artabilities {
|
|
min-height:300px;
|
|
}
|
|
.charsheet .table-container.artabilities .item-container{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.charsheet .table-container .headers-container .header2.name9 {
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.cost9 {
|
|
flex: 4;
|
|
}
|
|
.charsheet .table-container .headers-container .header2.actions9 {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .name9{
|
|
font-size: 10px;
|
|
flex: 10;
|
|
text-align: left;
|
|
padding-left: 5px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name9 button{
|
|
width: 150px;
|
|
}
|
|
.charsheet .table-container .table-row .name-button.name9 span{
|
|
width: 150px;
|
|
}
|
|
.charsheet .table-container .table-row .cost9 {
|
|
flex: 4;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .actions9{
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container input:checked + .details-container.artability {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .table-container .form-container.artability-grid{
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown dropdown"
|
|
"rolls rolls rolls rolls"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
.charsheet .table-container .custom-enabler:checked ~ .artability-grid {
|
|
grid-template-areas:
|
|
"dropdown dropdown dropdown dropdown"
|
|
"name name name name"
|
|
"atype atype costs costs"
|
|
"requirements requirements requirements requirements"
|
|
"description description description description"
|
|
"rolls rolls rolls rolls"
|
|
"close close close close";
|
|
}
|
|
.charsheet .form-container .picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: dropdown;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .name {
|
|
display: none;
|
|
flex-direction: column;
|
|
grid-area: name;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker.atype {
|
|
display: none;
|
|
grid-area: atype;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container input:checked + .picker.atype {
|
|
display: flex;
|
|
}
|
|
.charsheet .form-container .block-textarea.requirements-ba {
|
|
min-height: 25px;
|
|
height: 25px;
|
|
}
|
|
.charsheet .form-container .costs {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: costs;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .requirements {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: requirements;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .description {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
grid-area: description;
|
|
width: 100%;
|
|
}
|
|
.charsheet .form-container .picker.rolls {
|
|
display: flex;
|
|
grid-area: rolls;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
.charsheet .form-container .custom-macro {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding-top: 5px;
|
|
}
|
|
.charsheet .form-container input:checked + .custom-macro {
|
|
display: flex;
|
|
}
|
|
.charsheet .form-container .custom-macro .block-textarea {
|
|
font-size: 10px;
|
|
margin:0px;
|
|
min-height: 60px;
|
|
height: 60px;
|
|
}
|
|
/* CRAFTING AND GATHERING STYLES END */
|
|
|
|
|
|
/* LANGUAGE AND PROFICIENCIES STYLES START */
|
|
|
|
.charsheet .table-container.lang-prof textarea{
|
|
width: 100%;
|
|
min-height: 100px;
|
|
height: 100px;
|
|
resize: vertical; /* Allows user to resize vertically */
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container.lang-prof textarea{
|
|
color: #131313;
|
|
}
|
|
.charsheet .table-container.npc-notes textarea{
|
|
width: 100%;
|
|
min-height: 400px;
|
|
height: 400px;
|
|
resize: vertical; /* Allows user to resize vertically */
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container.npc-notes textarea{
|
|
color: #131313;
|
|
}
|
|
.charsheet .table-container.general-notes textarea{
|
|
width: 100%;
|
|
min-height: 590px;
|
|
height: 590px;
|
|
resize: vertical; /* Allows user to resize vertically */
|
|
padding: 6px 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
.sheet-darkmode .charsheet .table-container.general-notes textarea{
|
|
color: #131313;
|
|
}
|
|
|
|
/* LANGUAGE AND PROFICIENCIES STYLES END */
|
|
|
|
|
|
/* SETUP STYLES START */
|
|
.charsheet .table-container.setup .table-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding:5px;
|
|
}
|
|
.charsheet .table-container.setup .table-body .setup-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
.charsheet .table-container.setup .table-body .setup-pair{
|
|
flex:1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: start;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 10px;
|
|
}
|
|
.charsheet .table-container.setup .table-body .setup-row label{
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
align-self: center;
|
|
margin-bottom: 0px;
|
|
width: auto;
|
|
}
|
|
.charsheet .table-container.setup .table-body .setup-row input[type="number"],
|
|
.charsheet .table-container.setup .table-body .setup-row input[type="text"]{
|
|
min-width: 40px;
|
|
font-size: 14px;
|
|
padding: 4px 6px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
.charsheet .table-container.setup .table-body .setup-row input[type="number"].disabled,
|
|
.charsheet .table-container.setup .table-body .setup-row input[type="text"].disabled{
|
|
background: #f0f0f0;
|
|
pointer-events: none;
|
|
color: #a0a0a0;
|
|
border: none;
|
|
}
|
|
|
|
/* SETUP STYLES END */
|
|
|
|
|
|
/* FOOTER */
|
|
.charsheet .footer{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: -30px;
|
|
}
|
|
|
|
.charsheet .footer-stamp img{
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.sheet-darkmode .charsheet .footer-stamp img{
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* FOOTER */
|
|
|
|
|
|
/* DEFAULT TEMPLATE STYLES START */
|
|
.sheet-rolltemplate-default td{
|
|
line-height:2;
|
|
}
|
|
/* DEFAULT TEMPLATE STYLES END */
|
|
|
|
/* NPC STUFF START */
|
|
.charsheet .sheet-section-npc-header {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .header-details-content {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"name rank type danger size";
|
|
grid-template-columns: 3fr 1fr 2fr 1fr 1fr;
|
|
gap: 10px;
|
|
row-gap: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.charsheet .header-details-content .rank {
|
|
grid-area: rank;
|
|
}
|
|
|
|
.charsheet .header-details-content .type {
|
|
grid-area: type;
|
|
}
|
|
|
|
.charsheet .header-details-content .danger {
|
|
grid-area: danger;
|
|
}
|
|
|
|
.charsheet .header-details-content .size {
|
|
grid-area: size;
|
|
}
|
|
.charsheet .header-details-content label {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.charsheet .npc-sheet-content {
|
|
padding-top: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
gap: 10px;
|
|
}
|
|
|
|
.charsheet .npc-left-column {
|
|
width: 300px;
|
|
}
|
|
.charsheet .npc-right-column {
|
|
width: calc(100% - 300px);
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .section-container {
|
|
border-width: 12px;
|
|
}
|
|
|
|
.charsheet .npc-main-stats {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"focus power"
|
|
"agility toughness";
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.charsheet .sheet-section-npc .derived-stats {
|
|
grid-template-areas:
|
|
"accuracy damage"
|
|
"evasion dodge"
|
|
"guard blocking"
|
|
"save-bonus potency"
|
|
"initiative speed";
|
|
}
|
|
.charsheet .derived-stats .accuracy {
|
|
grid-area: accuracy;
|
|
}
|
|
.charsheet .derived-stats .damage {
|
|
grid-area: damage;
|
|
}
|
|
|
|
.charsheet .npc-sub-stats {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .attribute-container2 .label {
|
|
width: 128px;
|
|
margin-left: -33px;
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .value input {
|
|
cursor: text !important;
|
|
}
|
|
|
|
.charsheet .npc-button-container {
|
|
position: relative;
|
|
}
|
|
.charsheet .npc-button,
|
|
.charsheet .npc-icon {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
top: -10px;
|
|
right: -12px;
|
|
}
|
|
.charsheet .npc-button {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
.charsheet .npc-icon {
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.charsheet .npc-autocalculate,
|
|
.charsheet .npc-autocalculate + span {
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 16px !important;
|
|
top: -18px;
|
|
right: 12px;
|
|
}
|
|
.charsheet .npc-autocalculate {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
.charsheet .npc-autocalculate + span {
|
|
font-size: 9px;
|
|
background: #333;
|
|
color: #eee;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
.charsheet .npc-autocalculate:checked + span {
|
|
background: #0a0;
|
|
color: #fff;
|
|
}
|
|
.charsheet .npc-autocalculate + span::before {
|
|
text-transform: uppercase;
|
|
content: "Manual";
|
|
}
|
|
.charsheet .npc-autocalculate:checked + span::before {
|
|
content: "Autocalc";
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .custom {
|
|
display: flex;
|
|
}
|
|
.charsheet .sheet-section-npc .table-container input:checked + .details-container.ability {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .table-container .npcaction-grid {
|
|
grid-template-areas:
|
|
"name name name name"
|
|
"keywords keywords range costs"
|
|
"requirements requirements requirements requirements"
|
|
"description description description description"
|
|
"rolls rolls rolls rolls"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
|
|
.charsheet .sheet-section-npc .table-container .npcability-grid {
|
|
grid-template-areas:
|
|
"name name name name"
|
|
"description description description description"
|
|
"close close close close";
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap:10px;
|
|
}
|
|
|
|
/* NPC STUFF END */
|
|
|
|
/* FULL VITALS START */
|
|
.charsheet .partial-vitals-block,
|
|
.charsheet .full-vitals-block {
|
|
display: none;
|
|
}
|
|
.charsheet .full-vitals-toggle:not(:checked) ~ .partial-vitals-block {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
}
|
|
.charsheet .full-vitals-toggle:checked ~ .full-vitals-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
/* FULL VITALS END */
|
|
|
|
/* NPC TABLES START */
|
|
.charsheet .table-container .npc-skill-name {
|
|
flex: 6;
|
|
text-align: left !important;
|
|
padding-left: 5px;
|
|
}
|
|
.charsheet .table-container .npc-skill-name select {
|
|
text-align: left;
|
|
}
|
|
.charsheet .table-container .npc-skill-expertise {
|
|
flex: 5;
|
|
}
|
|
|
|
.charsheet .table-container .npc-action-name,
|
|
.charsheet .table-container .npc-ability-name {
|
|
flex: 8;
|
|
text-align: left !important;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.charsheet .table-container .npc-skill-total,
|
|
.charsheet .table-container .npc-skill-stat,
|
|
.charsheet .table-container .npc-skill-base,
|
|
.charsheet .table-container .npc-skill-actions,
|
|
.charsheet .table-container .npc-action-cost,
|
|
.charsheet .table-container .npc-action-range {
|
|
text-align: center;
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .npc-action-actions,
|
|
.charsheet .table-container .npc-ability-actions {
|
|
flex: 2;
|
|
}
|
|
|
|
.charsheet .table-container .table-row .npc-skill-name,
|
|
.charsheet .table-container .table-row .npc-action-name,
|
|
.charsheet .table-container .table-row .npc-ability-name {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
cursor: default;
|
|
}
|
|
.charsheet .table-container .table-row .npc-skill-expertise input,
|
|
.charsheet .table-container .table-row .npc-skill-total input,
|
|
.charsheet .table-container .table-row .npc-skill-stat input,
|
|
.charsheet .table-container .table-row .npc-skill-base input,
|
|
.charsheet .table-container .table-row .npc-action-range input,
|
|
.charsheet .table-container .table-row .npc-action-cost input {
|
|
border: 0;
|
|
font-size: 11px;
|
|
background: transparent;
|
|
width: 100% !important;
|
|
text-align: center;
|
|
padding: 0;
|
|
color: black;
|
|
}
|
|
.charsheet .table-container .table-row .npc-skill-expertise,
|
|
.charsheet .table-container .table-row .npc-skill-total,
|
|
.charsheet .table-container .table-row .npc-skill-stat,
|
|
.charsheet .table-container .table-row .npc-skill-base,
|
|
.charsheet .table-container .table-row .npc-action-range input,
|
|
.charsheet .table-container .table-row .npc-action-cost input {
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
/* NPC TABLES END/
|