974 lines
28 KiB
CSS
974 lines
28 KiB
CSS
|
|
/* Earthdawn.css */
|
|
/********************************************** css Reset ***************************************************************************/
|
|
|
|
input {
|
|
height: initial;
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
font-size: inherit;
|
|
line-height: 1em;
|
|
margin-bottom: initial;
|
|
padding-right: initial;
|
|
width: initial;
|
|
color: initial;
|
|
position: relative;
|
|
height: auto;
|
|
font-weight: normal;
|
|
}
|
|
select {
|
|
width: initial;
|
|
margin: initial;
|
|
}
|
|
textarea {
|
|
height: initial;
|
|
resize: initial;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/********************************************** Main section ***************************************************************************/
|
|
/* Colors: code description What used for. */
|
|
.sheet-user-root {
|
|
--bg-color: #B8C4C4; /* blue gray. Main background color */
|
|
--outline-color: #85867E; /* darker gray. Main border */
|
|
--input-color: #E8ECEC; /* Light gray Main section Input fields that are not disabled. */
|
|
--locked-color: #657878; /* medium Main section Input fields that are locked */
|
|
--control-secondary: #C6DCEA; /* header section background */
|
|
--control-main: #85867E; /* main section outline */
|
|
--button-color: #85867E; /* main section outline */
|
|
}
|
|
.sheet-header {
|
|
--bg-color: #C6DCEA; /* light blue. Header background */
|
|
--outline-color: #5283A4; /* outline darker blue. Header border */
|
|
--input-color: #D6E4EF; /* very light blue. Header Input fields that are not disabled */
|
|
--locked-color: #93BBD7; /* medium blue. Header Input fields that are locked */
|
|
}
|
|
|
|
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testNone[value="None"]+.sheet-HideIfSecondaryNone,
|
|
.sheet-show-most:checked~.sheet-sect > span > .sheet-testNone[value="None"]+.sheet-HideIfSecondaryNone,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testModType[value="(0)"]~.sheet-HideIfSecondaryNoRoll,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testZero[value="0"]+.sheet-HideIfSecondaryZero,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testAoE[value="x"]+.sheet-HideIfSecondaryX,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testAoE[value=" "]+.sheet-HideIfSecondaryX,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-testAoE[value=""]+.sheet-HideIfSecondaryX,
|
|
.sheet-testNum[value="0"]+.sheet-HideIfZero,
|
|
.sheet-testNum[value="1"]+.sheet-HideIfOne,
|
|
.sheet-testNum[value="2"]+.sheet-HideIfTwo,
|
|
.sheet-testModType[value="(0)"]~.sheet-HideIfNoRoll,
|
|
.sheet-sect-show:not(:checked)+.sheet-option-show+.sheet-sect,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-sect-showMost,
|
|
.sheet-show-most:checked~.sheet-sect .sheet-test-secondary:checked+.sheet-HideIfSecondaryChecked,
|
|
.sheet-hide-all:checked+.sheet-option+.sheet-sect,
|
|
.sheet-hidden-show:not(:checked)+.sheet-sect,
|
|
.sheet-checked-show:checked+.sheet-sect,
|
|
.sheet-testCloseChecked:checked+.sheet-HideIfCloseChecked,
|
|
.sheet-testCloseChecked:not(:checked)+.sheet-HideIfNotCloseChecked,
|
|
.sheet-testCloseChecked:not(:checked)+.sheet-HideIfCloseChecked+.sheet-HideIfNotCloseChecked,
|
|
.sheet-testChecked:checked~.sheet-HideIfChecked,
|
|
.sheet-testChecked:not(:checked)~.sheet-HideIfNotChecked,
|
|
.sheet-testChecked:checked~div>.sheet-HideIfChecked,
|
|
.sheet-testChecked:not(:checked)~div>.sheet-HideIfNotChecked,
|
|
.sheet-testChecked:not(:checked)~span>.sheet-HideIfNotChecked,
|
|
.sheet-testChecked:checked~div>div>.sheet-HideIfChecked,
|
|
.sheet-testChecked:not(:checked)~div>div>.sheet-HideIfNotChecked,
|
|
.sheet-testChecked:checked~span>.sheet-HideIfChecked,
|
|
.sheet-testChecked:not(:checked)~.sheet-table-row>.sheet-HideIfNotChecked,
|
|
.sheet-testRepSpecialChecked:checked~.repcontainer .sheet-HideIfRepSpecialChecked,
|
|
.sheet-edition3:checked~div .sheet-HideIfEdition3,
|
|
.sheet-edition3:not(:checked)~div .sheet-HideIfNotEdition3,
|
|
.sheet-edition4:checked~div .sheet-HideIfEdition4,
|
|
.sheet-edition4:not(:checked)~div .sheet-HideIfNotEdition4,
|
|
.sheet-testAPI:not(:checked)~.sheet-api, /* Knacks tab is not inside a div */
|
|
.sheet-testAPI:not(:checked)~div .sheet-api,
|
|
.sheet-testAPI:checked~div .sheet-NoAPI,
|
|
.sheet-testPlaceholder:not(:placeholder-shown)~.sheet-hideIfNotPlaceholder,
|
|
.sheet-testPlaceholder:not(:placeholder-shown)~div .sheet-hideIfNotPlaceholder,
|
|
input[type="number"]:disabled.sheet-hidden, /* Need this bit of extra specificity here */
|
|
.sheet-hidden {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.sheet-testNone[value="CorruptKarma"]+.sheet-UnhideIfCorruptKarma,
|
|
.sheet-testQuest[value^="QD-"]+.sheet-UnhideIfQuest
|
|
{ display: inline-block; }
|
|
|
|
/* use hide if not checked instead
|
|
.sheet-testChecked:checked~.sheet-UnhideIfChecked,
|
|
.sheet-testCloseChecked:checked~.sheet-UnhideIfChecked,
|
|
.sheet-testChecked:not(:checked)~.sheet-UnhideIfNotChecked,
|
|
.sheet-testCloseChecked:not(:checked)~.sheet-UnhideIfNotChecked {
|
|
display: inline;
|
|
} */
|
|
|
|
|
|
input[type="text"],
|
|
input[type="number"] {
|
|
background-color: var( --input-color );
|
|
border: 1px solid var( --outline-color );
|
|
padding: 2px;
|
|
}
|
|
|
|
select,
|
|
textarea,
|
|
.sheet-pale {
|
|
background-color: var( --input-color );
|
|
}
|
|
|
|
.sheet-Locked,
|
|
input[type="number"].sheet-Locked, /* Sometime need this bit of extra specificity */
|
|
input[type="text"].sheet-Locked,
|
|
.sheet-testLocked:checked~.sheet-LockIfChecked,
|
|
.sheet-testLocked:checked~span .sheet-LockIfChecked,
|
|
.sheet-testLocked:checked~label .sheet-LockIfChecked,
|
|
.sheet-testLocked:not(:checked)~.sheet-LockIfNotChecked,
|
|
.sheet-testLocked:not(:checked)~span .sheet-LockIfNotChecked,
|
|
.sheet-testLocked:not(:checked)~label .sheet-LockIfNotChecked {
|
|
background-color: var( --locked-color );
|
|
color: white;
|
|
pointer-events: none;
|
|
}
|
|
.sheet-testLocked:checked~span .sheet-pointer-important {
|
|
pointer-events: none !important;
|
|
}
|
|
.sheet-testNum[value="7"]+.sheet-UnlockIf7,
|
|
.sheet-testNum[value="99"]+.sheet-UnlockIf99,
|
|
.sheet-testLocked:checked~.sheet-UnlockIfChecked,
|
|
.sheet-testLocked:checked~span .sheet-UnlockIfChecked,
|
|
.sheet-testLocked:checked~label .sheet-UnlockIfChecked,
|
|
.sheet-testLocked:not(:checked)~.sheet-UnlockIfNotChecked,
|
|
.sheet-testLocked:not(:checked)~label .sheet-UnlockIfNotChecked,
|
|
.sheet-testLocked:not(:checked)~span .sheet-UnlockIfNotChecked {
|
|
background-color: var( --input-color );
|
|
color: black;
|
|
pointer-events: initial;
|
|
}
|
|
.sheet-testLocked:checked~.sheet-BoldIfChecked {
|
|
font-weight: Bold;
|
|
}
|
|
|
|
input[type="text"]:disabled,
|
|
input[type="number"]:disabled,
|
|
input[readonly],
|
|
.sheet-fakeCalc input:not(.sheet-hidden) {
|
|
background-color: var( --locked-color );
|
|
color: white;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-floatRight {
|
|
float: right;
|
|
clear: right;
|
|
}
|
|
|
|
.sheet-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-sect-show {
|
|
cursor: pointer;
|
|
height: 100%;
|
|
margin-right: -4em;
|
|
opacity: 0;
|
|
vertical-align: middle;
|
|
width: 4em;
|
|
z-index: 1;
|
|
}
|
|
|
|
input[type="checkbox"]+.sheet-option-show::before {
|
|
color: blue;
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
height: 100%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
width: 4em;
|
|
}
|
|
|
|
input[type="checkbox"] + .sheet-option-show::before {
|
|
content: "[show]";
|
|
}
|
|
input[type="checkbox"]:checked + .sheet-option-show::before {
|
|
content: "[hide]";
|
|
}
|
|
|
|
.sheet-show-all,
|
|
.sheet-show-most,
|
|
.sheet-hide-all {
|
|
cursor: pointer;
|
|
height: 24px !important;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
vertical-align: middle;
|
|
width: 24px;
|
|
z-index: 1;
|
|
}
|
|
/* These controls are not selected */
|
|
input[type="radio"].sheet-show-all+.sheet-option,
|
|
input[type="radio"].sheet-show-most+.sheet-option,
|
|
input[type="radio"].sheet-hide-all+.sheet-option {
|
|
background-color: var( --bg-color );
|
|
color: var( --control-main );
|
|
font-family: "Pictos";
|
|
font-size: 24px;
|
|
position: absolute;
|
|
top: 0px;
|
|
vertical-align: middle;
|
|
width: 24px;
|
|
}
|
|
|
|
/* These controls are selected */
|
|
input[type="radio"].sheet-hide-all:checked+.sheet-option,
|
|
input[type="radio"].sheet-show-all:checked+.sheet-option,
|
|
input[type="radio"].sheet-show-most:checked+.sheet-option {
|
|
background-color: var( --control-main );
|
|
color: var( --bg-color );
|
|
}
|
|
.sheet-show-all,
|
|
input[type="radio"].sheet-show-all+.sheet-option {
|
|
right: 90px
|
|
}
|
|
.sheet-show-most,
|
|
input[type="radio"].sheet-show-most+.sheet-option {
|
|
right: 60px
|
|
}
|
|
.sheet-hide-all,
|
|
input[type="radio"].sheet-hide-all+.sheet-option {
|
|
right: 30px
|
|
}
|
|
|
|
|
|
.sheet-bar {
|
|
vertical-align: middle;
|
|
font-size: 150%;
|
|
}
|
|
|
|
.sheet-Elementalist-section,
|
|
.sheet-Illusionist-section,
|
|
.sheet-Nethermancer-section,
|
|
.sheet-Wizard-section {
|
|
} /* Need a class here just to keep .sheet-section from inheriting, even if the class is empty */
|
|
|
|
.sheet-label {
|
|
line-height: 10px;
|
|
font-size: 85%;
|
|
padding-right: 3em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.sheet-label-flex {
|
|
font-size: 85%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/*
|
|
input[type="text"],
|
|
select {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
*/
|
|
|
|
|
|
.sheet-labeledDropdown {
|
|
display: table;
|
|
width: 90%
|
|
}
|
|
|
|
.sheet-labeledDropdown select {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-repeat-counter-reset {
|
|
counter-reset: sheet-rep-items;
|
|
}
|
|
|
|
.sheet-repeat-count::before
|
|
{
|
|
counter-increment: sheet-rep-items;
|
|
content: counter(sheet-rep-items) !important;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.sheet-clear {
|
|
clear: both;
|
|
}
|
|
|
|
.sheet-pictos {
|
|
font-family: "Pictos";
|
|
font-size: 24px;
|
|
}
|
|
|
|
.sheet-info {
|
|
float: right;
|
|
margin-top: -6px;
|
|
height: 30px;
|
|
font-family: "Pictos";
|
|
font-size: 24px;
|
|
}
|
|
/*
|
|
position: relative;
|
|
right: 12px;
|
|
|
|
float: right;
|
|
font-family: "Pictos";
|
|
font-size: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
*/
|
|
|
|
.sheet-text-button {
|
|
font-size: 100%;
|
|
color: white;
|
|
background-color: var( --button-color );
|
|
border: 0;
|
|
}
|
|
|
|
button,
|
|
button:hover,
|
|
button:active
|
|
{
|
|
background-image: none;
|
|
}
|
|
|
|
|
|
input[name*="combatOption"]:checked + b,
|
|
input[name*="condition"]:checked + b{
|
|
background-color: var( --outline-color );
|
|
color: white;
|
|
border-radius: 5px;
|
|
padding-right: 5px;
|
|
padding-bottom: 1px;
|
|
padding-top: 1px;
|
|
}
|
|
|
|
/*.sheet-hideIfThisChecked:checked,
|
|
.sheet-selectTest {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-selectTest:not(:checked) + div.sheet-labeledDropdown b {
|
|
background-color: var( --outline-color );
|
|
color: white;
|
|
padding-right: 2em;
|
|
padding: 0px 2em;
|
|
}
|
|
*/
|
|
.sheet-testCondition:not([value="0"])+.sheet-labeledDropdown b {
|
|
background-color: var( --outline-color );
|
|
color: white;
|
|
padding-right: 2em;
|
|
padding: 0px 2em;
|
|
}
|
|
|
|
.sheet-co-nothing {
|
|
vertical-align: middle;
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
padding-left: 1.5em;
|
|
padding-top: 3px;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
textarea {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.charsheet button[type=roll] {
|
|
margin: 2px 2px 0 2px !important;
|
|
}
|
|
|
|
.charsheet button[type=roll].sheet-button-nodice:before {
|
|
content: none;
|
|
}
|
|
|
|
|
|
input[type="number"].sheet-attrCostsRed {
|
|
background-color: red;
|
|
color: white; }
|
|
.sheet-testAttrCosts[value="0"]+span .sheet-attrCostsRed,
|
|
.sheet-testAttrCosts[value="1"]+span .sheet-attrCostsRed,
|
|
.sheet-testAttrCosts[value="2"]+span .sheet-attrCostsRed {
|
|
background-color: var( --locked-color );
|
|
color: white; }
|
|
input[type="number"].sheet-attrCostsGreen {
|
|
background-color: lawngreen; }
|
|
.sheet-testAttrCosts[value="0"]~div input[type="number"].sheet-attrCostsGreen,
|
|
.sheet-testAttrCosts[value="1"]~div input[type="number"].sheet-attrCostsGreen,
|
|
.sheet-testAttrCosts[value="2"]~div input[type="number"].sheet-attrCostsGreen {
|
|
background-color: var( --input-color ); }
|
|
|
|
|
|
|
|
/********************************************** Colors and Margins ***************************************************************************/
|
|
|
|
.ui-widget-content,
|
|
.charsheet {
|
|
position: absolute;
|
|
padding: 0 !important;
|
|
left: 0;
|
|
top: 46px;
|
|
}
|
|
|
|
.sheet-header {
|
|
margin-top: -8px;
|
|
border-top: 2px solid var( --outline-color );
|
|
}
|
|
|
|
.sheet-header,
|
|
.sheet-section,
|
|
.sheet-sec-border-top,
|
|
.sheet-sec-border-bottom {
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
border-left: 2px solid var( --outline-color );
|
|
border-right: 2px solid var( --outline-color );
|
|
background-color: var( --bg-color );
|
|
}
|
|
.sheet-border-right {
|
|
background-color: var( --bg-color );
|
|
height: 20px;
|
|
width: calc( 100% - 15px );
|
|
margin-left: 3px;
|
|
margin-right: 3px;
|
|
margin-bottom: -20px;
|
|
padding-left: 5px;
|
|
border-right: 2px solid var( --outline-color );
|
|
border-bottom: 2px solid var( --outline-color );
|
|
border-left: 2px solid var( --outline-color );
|
|
}
|
|
.sheet-sec-border-top {
|
|
border-top: 2px solid var( --outline-color );
|
|
padding-top: 3px;
|
|
}
|
|
.sheet-sec-border-bottom {
|
|
border-bottom: 2px solid var( --outline-color );
|
|
padding-bottom: 3px;
|
|
}
|
|
|
|
.sheet-tab1 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
.sheet-logo-Half {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 42%;
|
|
width: 16%;
|
|
}
|
|
.sheet-logo-Full {
|
|
position: absolute;
|
|
top: -8px;
|
|
left: 34%;
|
|
width: 32%;
|
|
}
|
|
|
|
.sheet-heading {
|
|
background-color: #d3d3d3;
|
|
}
|
|
|
|
/********************************************** Tables and cells ************************************************************/
|
|
|
|
.sheet-table {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-table-left {
|
|
display: table;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.sheet-table-left .sheet-table-row span {
|
|
border-style: hidden;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.sheet-table-name {
|
|
display: table-caption;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
background-color: var( --outline-color );
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-headerbar {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
background-color: black;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
.sheet-table-header {
|
|
display: table-cell;
|
|
text-align: center;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
vertical-align: bottom;
|
|
background-color: var( --outline-color );
|
|
}
|
|
|
|
.sheet-table-row {
|
|
display: table-row;
|
|
vertical-align: bottom;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-table-data {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
hr {
|
|
border-color: black;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.sheet-w15 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
width: 15%;
|
|
}
|
|
|
|
.sheet-w20 {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
width: 20%;
|
|
}
|
|
.sheet-w30 {
|
|
display: inline-block;
|
|
text-align: left;
|
|
width: 30%;
|
|
}
|
|
.sheet-w100p {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-flex-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.sheet-floatRight.sheet-flex-container {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
/********************************************** Formating and Length ************************************************************/
|
|
|
|
.sheet-fixed-width {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.sheet-fixed-width b,
|
|
.sheet-fixed-width+b {
|
|
background-color: var( --outline-color );
|
|
}
|
|
|
|
.sheet-nowrap0 {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-nowrap,
|
|
.sheet-nowrap1 {
|
|
white-space: nowrap;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.sheet-nowrap2 {
|
|
white-space: nowrap;
|
|
padding-right: 2em;
|
|
}
|
|
|
|
.sheet-nowrap3 {
|
|
white-space: nowrap;
|
|
padding-right: 3em;
|
|
}
|
|
|
|
.sheet-nowrap5 {
|
|
white-space: nowrap;
|
|
padding-right: 5em;
|
|
}
|
|
|
|
|
|
.sheet-w7 {
|
|
display: inline-block;
|
|
min-width: 7em;
|
|
padding-right: 0em;
|
|
}
|
|
|
|
.sheet-numShort {
|
|
width: 3em !important }
|
|
.sheet-numLong {
|
|
width: 4em !important }
|
|
.sheet-selShort {
|
|
width: 5em !important }
|
|
.sheet-selLong {
|
|
width: 6em !important }
|
|
.sheet-txtShort {
|
|
width: 8em !important }
|
|
.sheet-txtMed {
|
|
width: 10em !important }
|
|
|
|
.sheet-vaBottom {
|
|
vertical-align: bottom; }
|
|
.sheet-middle {
|
|
display: inline-block;
|
|
padding-top: 6px; }
|
|
.sheet-minWidth3 {
|
|
min-width: 3em; }
|
|
|
|
|
|
/********************************************** Variable length text boxes ************************************************************/
|
|
/* The next few blocks are for variable length text boxes that expand as needed. sheet-label-under2 is a tall box and has labels under the text input.
|
|
The form of the html is a label or span wrapper, an input box, an span that has the invisible auto-expanding field, and an optional span that has the label.
|
|
<label class="sheet-label-under2 sheet-autoexpand-wrap" title="@{height}">
|
|
<input type="text" name="attr_height" />
|
|
<span name="attr_height" class="sheet-autoexpand"></span>
|
|
<span>this is the label</span>
|
|
</label>
|
|
|
|
To have a label in front of the expanding field, use something like this.
|
|
<label title="@{Weight}: Characters Weight.">Weight: <span class="sheet-autoexpand-wrap">
|
|
<input name="attr_Weight" type="text" >
|
|
<span name="attr_Weight" class="sheet-autoexpand" ></span>
|
|
</span></label>
|
|
*/
|
|
|
|
/* This is the tag that wraps the entire thing. It can be a label or a span */
|
|
.sheet-autoexpand-wrap {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: auto;
|
|
min-width: 2em;
|
|
max-width: 50em;
|
|
margin-right: 1em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sheet-autoexpand-wrap:not(.sheet-label-under2) {
|
|
height: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sheet-label-under:not(button),
|
|
.sheet-label-under2 {
|
|
display: inline-block;
|
|
height: 2.75em;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* This is the input statement that is visible. */
|
|
.sheet-autoexpand-wrap input {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: absolute;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* This is the invisible copy of the input. This css changes this invisible fields size to the length of the text in the input. The outer wrapper then changes size to match this fields length. */
|
|
.sheet-autoexpand-wrap span.sheet-autoexpand {
|
|
visibility: hidden;
|
|
width: 100%;
|
|
white-space: pre; /* pre-wrap; for textarea which I never got working but "pre" should also work for spans */
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
overflow: hidden;
|
|
padding-right: .7em; /* We want the text box very slightly bigger than the text. */
|
|
/* also here make sure the font size is the same or slightly bigger than the input font size */
|
|
}
|
|
|
|
/* This is the span that holds the label that we want small at the bottom. */
|
|
.sheet-label-under2 span:not(.sheet-autoexpand) {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
line-height: .75em;
|
|
font-size: 85%;
|
|
padding-left: .25em;
|
|
}
|
|
|
|
/* When we have the label under the field, we don't want the label to ever be longer than the field */
|
|
.sheet-label-under,
|
|
.sheet-label-under2 {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-label-under span,
|
|
.sheet-label-under-select span {
|
|
line-height: 10px;
|
|
display: block;
|
|
font-weight: lighter;
|
|
font-size: 85%;
|
|
padding-left: .25em;
|
|
}
|
|
|
|
/********************************************** Filterboxes ************************************************************
|
|
* Filterboxes are basically repitems. Except that Filterboxes have been formated to allow certain items to be hidden
|
|
* if they don't match the requirements to be displayed.
|
|
*/
|
|
|
|
.charsheet .repcontainer .repitem, /* A filterbox should look exactly like a repitem. */
|
|
.sheet-filter-box {
|
|
padding: 5px 5px 2px 5px;
|
|
margin: 5px;
|
|
border: 2px solid #CCCCCC;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
fieldset.repeating_spell+.repcontainer>.repitem, /* A repitem within a spell list should functionally not exist, it's place is taken by a filterbox. */
|
|
fieldset.sheet-filtershortlist+.repcontainer .repitem,
|
|
fieldset.sheet-filtershortlist+.repcontainer .repitem .sheet-filter-box { /* if it is filtershortlist, then filter-boxes should also have no border/padding. */
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: none;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.sheet-filter-box, /* By default, display no items of a filter box */
|
|
fieldset.sheet-filtershortlist~.repcontrol { /* shortlists don't have any buttons to add stuff, that is a function of the main display */
|
|
display: none;
|
|
}
|
|
|
|
.repcontainer .repitem {
|
|
overflow: hidden;
|
|
}
|
|
|
|
fieldset.sheet-filtersummarylist+.repcontainer .repitem {
|
|
display: inline-block;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
|
|
/* Decide which specific repitems to display. */
|
|
input.sheet-spells-tab0:checked~.sheet-filter-box, /* Always display all spells of circle zero, since they have just been added and have not been assigned a circle yet. */
|
|
.sheet-spells-tab0:checked~fieldset.repeating_spell+.repcontainer>.repitem .sheet-filter-box, /* When tab0 is checked, display everything no matter what which of the inner boxes are checked. */
|
|
.sheet-spells-tab1:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab1:checked~.sheet-filter-box,
|
|
.sheet-spells-tab2:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab2:checked~.sheet-filter-box,
|
|
.sheet-spells-tab3:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab3:checked~.sheet-filter-box,
|
|
.sheet-spells-tab4:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab4:checked~.sheet-filter-box,
|
|
.sheet-spells-tab5:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab5:checked~.sheet-filter-box,
|
|
.sheet-spells-tab6:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab6:checked~.sheet-filter-box,
|
|
.sheet-spells-tab7:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab7:checked~.sheet-filter-box,
|
|
.sheet-spells-tab8:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab8:checked~.sheet-filter-box,
|
|
.sheet-spells-tab9:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab9:checked~.sheet-filter-box,
|
|
.sheet-spells-tab10:checked~fieldset.repeating_spell+.repcontainer>.repitem input.sheet-spells-tab10:checked~.sheet-filter-box,
|
|
fieldset.repeating_weapons.sheet-filtershortlist+.repcontainer>.repitem input.sheet-combattab:checked~.sheet-filter-box,
|
|
fieldset.repeating_talents.sheet-filtershortlist+.repcontainer>.repitem input.sheet-combattab:checked~.sheet-filter-box,
|
|
fieldset.repeating_knacks.sheet-filtershortlist+.repcontainer>.repitem input.sheet-combattab:checked~.sheet-filter-box,
|
|
fieldset.repeating_skills.sheet-filtershortlist+.repcontainer>.repitem input.sheet-combattab:checked~.sheet-filter-box {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/********************************************** Tabs ***************************************************************************/
|
|
|
|
|
|
|
|
div[class^="sheet-section"] { /* Every class that starts with "sheet-section" */
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.sheet-tab {
|
|
border-radius: 7px 7px 0 0;
|
|
}
|
|
|
|
input.sheet-tab {
|
|
width: 70px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
input.sheet-tab:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
background-color: var( --outline-color );
|
|
color: white;
|
|
font-weight: bold;
|
|
width: 70px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
margin-left: -75px;
|
|
}
|
|
|
|
span.sheet-spells-tab {
|
|
background-color: var( --control-secondary );
|
|
color: var( --control-main );
|
|
}
|
|
|
|
input.sheet-tab::before {
|
|
content: attr(title);
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input.sheet-tab1:not(:checked) ~ div.sheet-section-core,
|
|
input.sheet-tab2:not(:checked) ~ div.sheet-section-combat,
|
|
input.sheet-tab3:not(:checked) ~ div.sheet-section-talents,
|
|
input.sheet-tab4:not(:checked) ~ div.sheet-section-knacks,
|
|
input.sheet-tab5:not(:checked) ~ div.sheet-section-skills,
|
|
input.sheet-tab6:not(:checked) ~ div.sheet-section-spells,
|
|
input.sheet-tab7:not(:checked) ~ div.sheet-section-grimoire,
|
|
input.sheet-tab8:not(:checked) ~ div.sheet-section-equipment,
|
|
input.sheet-tab9:not(:checked) ~ div.sheet-section-gear,
|
|
input.sheet-tab10:not(:checked) ~ div.sheet-section-notes,
|
|
input.sheet-tab11:not(:checked) ~ div.sheet-section-record,
|
|
input.sheet-tab12:not(:checked) ~ div.sheet-section-adjustments {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
input.sheet-tab1:checked ~ div.sheet-section-core,
|
|
input.sheet-tab2:checked ~ div.sheet-section-combat,
|
|
input.sheet-tab3:checked ~ div.sheet-section-talents,
|
|
input.sheet-tab4:checked ~ div.sheet-section-knacks,
|
|
input.sheet-tab5:checked ~ div.sheet-section-skills,
|
|
input.sheet-tab6:checked ~ div.sheet-section-spells,
|
|
input.sheet-tab7:checked ~ div.sheet-section-grimoire,
|
|
input.sheet-tab8:checked ~ div.sheet-section-equipment,
|
|
input.sheet-tab9:checked ~ div.sheet-section-gear,
|
|
input.sheet-tab10:checked ~ div.sheet-section-notes,
|
|
input.sheet-tab11:checked ~ div.sheet-section-record,
|
|
input.sheet-tab12:checked ~ div.sheet-section-adjustments {
|
|
max-height: 999999px;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.5s linear 0s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
input.sheet-tab1:checked + span.sheet-tab1,
|
|
input.sheet-tab2:checked + span.sheet-tab2,
|
|
input.sheet-tab3:checked + span.sheet-tab3,
|
|
input.sheet-tab3:checked + .sheet-testCloseChecked + .sheet-HideIfCloseChecked.sheet-tab3,
|
|
input.sheet-tab3:checked + .sheet-testCloseChecked + .sheet-HideIfCloseChecked + .sheet-HideIfNotCloseChecked.sheet-tab3,
|
|
input.sheet-tab4:checked + span.sheet-tab4,
|
|
input.sheet-tab5:checked + span.sheet-tab5,
|
|
input.sheet-tab6:checked + span.sheet-tab6,
|
|
input.sheet-tab7:checked + span.sheet-tab7,
|
|
input.sheet-tab8:checked + span.sheet-tab8,
|
|
input.sheet-tab9:checked + span.sheet-tab9,
|
|
input.sheet-tab10:checked + span.sheet-tab10,
|
|
input.sheet-tab11:checked + span.sheet-tab11,
|
|
input.sheet-tab12:checked + span.sheet-tab12,
|
|
input.sheet-spells-tab0:checked + span.sheet-spells-tab0,
|
|
input.sheet-spells-tab1:checked + span.sheet-spells-tab1,
|
|
input.sheet-spells-tab2:checked + span.sheet-spells-tab2,
|
|
input.sheet-spells-tab3:checked + span.sheet-spells-tab3,
|
|
input.sheet-spells-tab4:checked + span.sheet-spells-tab4,
|
|
input.sheet-spells-tab5:checked + span.sheet-spells-tab5,
|
|
input.sheet-spells-tab6:checked + span.sheet-spells-tab6,
|
|
input.sheet-spells-tab7:checked + span.sheet-spells-tab7,
|
|
input.sheet-spells-tab8:checked + span.sheet-spells-tab8,
|
|
input.sheet-spells-tab9:checked + span.sheet-spells-tab9,
|
|
input.sheet-spells-tab10:checked + span.sheet-spells-tab10 {
|
|
background-color: var( --bg-color );
|
|
color: black;
|
|
}
|
|
|
|
|
|
|
|
/********************************************** Roll Templates & colors ***************************************************************************/
|
|
|
|
|
|
.sheet-rolltemplate-chatrecord {
|
|
background-color: LightBlue;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-chatrecord table,
|
|
.sheet-rolltemplate-rolltargetnumber table {
|
|
width: 100%;
|
|
border: 1px solid;
|
|
color: black;
|
|
font-size: 1em;
|
|
border-radius: 5px;
|
|
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord thead,
|
|
.sheet-rolltemplate-rolltargetnumber thead {
|
|
padding: 2px;
|
|
border-bottom: 1px solid black;
|
|
line-height: 1.6em;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord th {
|
|
background-color: rgba(112, 32, 130, 1);
|
|
color: white;
|
|
}
|
|
.sheet-rolltemplate-rolltargetnumber th {
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord td,
|
|
.sheet-rolltemplate-rolltargetnumber td {
|
|
padding: 5px;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord tr:nth-child(odd),
|
|
.sheet-rolltemplate-rolltargetnumber tr:nth-child(odd) {
|
|
background-color: rgba(217, 217, 214, 1);
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord tr:nth-child(even),
|
|
.sheet-rolltemplate-rolltargetnumber tr:nth-child(even) {
|
|
background-color: rgba(233, 233, 233, 1);
|
|
}
|
|
|
|
.sheet-rolltemplate-chatrecord td:first-child,
|
|
.sheet-rolltemplate-rolltargetnumber td:first-child {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-chatrecord a {
|
|
border: 0.8px;
|
|
padding: 5px;
|
|
background-color: PaleGreen;
|
|
color: black;
|
|
}
|
|
|
|
/********************************************** End ***************************************************************************/
|