Files
roll20-character-sheets/LND/legendsneverdie.css
T
G-G-G e33449f836 [Legends Never Die] Default Sheet Settings
Discovered an error in the wiki - for Text and Number options, the default value was incorrect.

Also found chrome styling was different to firefox, so corrected that.
2023-08-31 22:32:00 +01:00

1523 lines
34 KiB
CSS

.sheet-rolltemplate-default .inlinerollresult {
color: blue;
}
.sheet-rolltemplate-default .inlinerollresult.fullcrit {
color: green;
border: 0;
}
.sheet-rolltemplate-default .inlinerollresult.fullfail {
color: red;
border: 0;
}
.sheet-rolltemplate-default .inlinerollresult.importantroll {
color: purple;
border: 0;
}
.sheet-rolltemplate-attack {
background-color: white;
line-height: 1.9em;
}
.sheet-rolltemplate-attack .sheet-template-title {
background-color: black;
color: white;
text-align: center;
}
.sheet-rolltemplate-attack {
display: grid;
grid-template-columns: 45% 45%;
column-gap: 10%;
}
.sheet-rolltemplate-attack div:nth-child(odd) {
text-align: right;
}
.sheet-rolltemplate-attack div:nth-child(even) {
text-align: left;
}
.sheet-rolltemplate-attack div.sheet-damage-roll {
grid-column: 1 / -1;
text-align: center;
}
/* can we change things differently, like add a way to have two types of line
jakob's template takes things further, changing colours.
*/
/*Re-styles buttons into text links - change these back to buttons, but prettier ones, curved borders, etc*/
.sheet-rolltemplate-default a[href^="`"],
.sheet-rolltemplate-default a[href^="!"],
.sheet-rolltemplate-default a[href^="~"] {
border: none;
border-radius: 10px;
background-color: #333;
color: #eee;
padding-left: 5px;
padding-right: 5px;
margin-right: 2px;
}
/*Enlarges Righthand Column when possible*/
.sheet-rolltemplate-default td:first-child {
/* font-weight: bold;
text-align: right; */
min-width: 0px;
padding-right: 5px;
}
.sheet-rolltemplate-default tr:nth-child(even) {
background-color: #ccc;
}
/*Recolors Header*/
.sheet-rolltemplate-default caption {
background-color: #333;
/* color: #eee;
font-family: "Helvetica Neue", Helvetica, sans-serif; */
font-size: 1.2em;
line-height: 1.2em;
padding: 2px;
font-weight: bold;
text-align: center;
}
/*The following two blocks control size and position*/
.sheet-rolltemplate-default td {
padding: 1px;
line-height: 1.7em;
vertical-align: top;
}
.sheet-rolltemplate-default {
margin-left: -30px;
}
.repcontrol {
margin-top: 5px;
}
div.settings,
div.xp {
position: absolute;
left: 790px;
}
/*
.d20[value="0"] ~ div.settings,
.d20[value="0"] ~ div.xp {
left: 820px;
}
*/
div.xp button {
background-color: green;
}
div.settings-show {
display: grid;
column-gap: 5px;
grid-template-columns: 1fr 50px;
left: 670px;
top: 107px;
}
div.settings-show,
div.xp-show {
z-index: 999;
position: absolute;
border: 1pt solid black;
border-radius: 5px;
background: gainsboro; /* seashell palegreen; */
padding: 5px;
}
div.xp-show {
left: 255px;
top: 107px;
display: grid;
grid-template-columns: 410px 130px;
column-gap: 5px;
align-content: start;
}
div.xp-show .xp-awards {
display: grid;
column-gap: 5px;
grid-template-columns: 20px 1fr;
align-content: start;
}
div.xp-show .xp-awards input[type="checkbox"] {
height:20px;
}
div.xp-show .xp-awards span {
margin-top: 2px;
}
div.xp-show .xp-awards p {
grid-column: 1 / -1;
margin-bottom: 2px;
}
.ui-dialog .charsheet div.buying-advances span:nth-of-type(1) {
width: 20px;
}
.ui-dialog .charsheet .buying-advances input.xp {
width: 100px;
}
.repcontrol[data-groupname="repeating_advances"] {
margin-top: 0;
padding-bottom: 0;
}
div.buying-advances .repcontrol[data-groupname="repeating_advances"] button {
background:purple;
}
div.xp-show button {
margin-top: 5px;
margin-bottom: 5px;
grid-column: 1 / -1;
}
div.xp-show .buying-advances {
width: 130px;
border-left: 1pt solid rgb(139, 0, 0);
padding-left: 5px;
}
div.xp-show .buying-advances select {
margin-bottom: 2px;
}
.ui-dialog .charsheet div.xp-show input {
margin-bottom: 2px;
}
.ui-dialog .charsheet div.settings-show input,
.ui-dialog .charsheet div.settings-show select {
width: 50px;
padding: 0;
text-align: center;
height: 24px;
margin-bottom: 1px;
}
.section {
counter-reset: section;
}
.counter::before {
counter-increment: section;
content: counter(section) '. ';
}
/*[data-groupname="repeating_example"]:not(.repcontrol) {
display: flex;
flex-wrap: wrap;
gap: 0.5%;
width: 800px;
}*/
/*
[data-groupname="repeating_example"] .repitem {
border: 1pt solid red;
margin-bottom: 5px;
}*/
[data-groupname="repeating_example"] .repcontrol_add::after {
content: " Item";
}
[data-groupname="repeating_example"] .repcontrol_edit::before {
content: "Click ";
}
/* reappears after editing, so need to retrigger this after any change to the repeating section
set opacity:0, and position the add button over the top - how?
*/
select,
input,
textarea,
input[readonly] {
background-color: seashell; /*antiquewhite, darkseagreen, floralwhite, gainsboro, ghostwhite, honeydew, ivory, lab, lawngreen, mintcream, seashell, snow */
}
.ui-dialog .charsheet button[type="action"].exit,
.ui-dialog .charsheet div.front .derived button[type="action"].recovery,
.derived .health,
.ui-dialog .charsheet div.front dib.one-demon button[type="action"],
.derived .health,
.ui-dialog .tab-content .charsheet div.front button[type="action"].skill,
.front .damage-init,
.demon-stats button {
background: rgb(2240, 215, 176);
color: black;
}
.sheetform {
/* background-color: rgb(51, 51, 51) !important;*/
width: 735px;
}
.sheet-darkmode .sheetform .charsheet {
background-color: rgb(31, 31, 31);
}
.sheet-rolltemplate-darkmode .sheet-container span {
color: white;
}
hr {
margin-top: 5px;
margin-bottom: 5px;
border-top: 1pt dotted black;
}
div.passthru {
display: contents;
}
/*no spinners */
.charsheet input[type=number]::-webkit-outer-spin-button,
.charsheet input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
text-align: center;
}
.front .derived span.left-button {
margin-left: 0;
}
.ui-dialog .charsheet .front .derived button[type="action"].left-button {
padding-right: 2px;
}
select.noarrow {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.charsheet input[type=number] {
-moz-appearance:textfield;
text-align: center;
}
.bold {
font-weight: bold;
}
.ui-dialog .charsheet input.gm-name {
height: 22px;
font-weight: bold;
}
.wide {
grid-column: 2/ -1;
}
.center {
text-align: center;
}
h3,h4 {
text-decoration: underline;
text-align: center;
}
.ui-dialog .charsheet div.titles {
height: 16px;
margin-bottom: 5px;
}
.ui-dialog .charsheet .gm-notes input {
height: 22px;
margin-top: 2px;
}
.charsheet .extra-skills select {
margin-bottom: 1px;
}
input {
width: initial;
}
.stuff {
grid-area: centre;
}
.outer {
grid-area: right;
}
.demon hr {
border-top: 1pt dashed darkred;
}
.front {
display: grid;
grid-template-areas:
"bio bio glory numbers"
"creation creation creation numbers"
"attacks gear gear numbers"
"skills stats demon numbers"
"skills derived demon numbers"
"skills power demon numbers"
"skills loyalty demon numbers"
"skills vagary demon numbers"
;
grid-template-columns: 300px 200px 205px 30px; /* 300px 200px 50px 150px; Move Glory to its own section above Power Words, or leave it at 300 and add a modifier */
grid-auto-rows: 35px auto auto 190px 135px auto auto auto;
align-content: start;
column-gap: 5px;
}
.ui-dialog .charsheet .toggle[value="design"] ~ .front {
grid-template-areas:
"bio bio glory numbers"
"creation creation creation numbers"
"skills stats demon numbers"
"skills derived demon numbers"
"skills power demon numbers"
"skills loyalty demon numbers"
"skills vagary demon numbers"
;
grid-auto-rows: 35px auto auto 135px auto auto auto;
}
.ui-dialog .charsheet .flipped[value="1"] ~ .front {
grid-template-areas:
"bio bio glory numbers"
"creation creation creation numbers"
"skills stats demon numbers"
"skills derived demon numbers"
"skills power demon numbers"
"skills loyalty demon numbers"
"skills vagary demon numbers"
"attacks gear gear numbers"
;
grid-auto-rows: 35px auto auto 135px auto auto auto auto;
}
.flipped[value="1"] ~ .front > .gear,
.flipped[value="1"] ~ .front > .attack {
margin-top: 5px;
}
.charsheet .front .loyalties .loyalty {
display: grid;
column-gap: 5px;
grid-template-columns: 145px 40px;
}
.charsheet .front .loyalties .loyalty input {
height: 22px;
}
.charsheet .front .numbers {
grid-area: numbers;
width: 50px;
padding-left: 3px;
}
.charsheet .front .numbers h3 {
margin-left: -2px;
text-decoration: none;
padding: 0;
}
.charsheet .front .numbers .reset h3 {
text-decoration: none;
font-size: 16px;
}
.charsheet .front .numbers button {
width: 35px;
height: 30px;
background: transparent;
color: black;
font-size: 24px;
border-radius: 10px;
}
.demon {
grid-area:demon;
}
.demon details .daemon-hidden {
display: grid;
grid-template-columns: 15% 80%;
column-gap: 5%;;
}
.demon textarea {
width: 180px;
margin-left: 5px;
margin-bottom: 0;
height: 30px;
font-size: 0.9em;
}
.demon textarea.abilities {
height:50px;
}
.demon span.stats {
display: inline-block;
width: 36px;
border: 0;
}
.front,
.back {
margin-top: 10px;
background: grey;
padding: 5px;
width: 775px;
border-radius: 5px;
}
.back {
width: 715px;
}
.charsheet .bottom-margin {
margin-bottom: 5px;
}
.creation-front {
margin-bottom: 5px;
}
.creation-front {
grid-area: creation;
}
div.back div.extras {
display: grid;
grid-template-columns: 130px 580px;
column-gap: 5px;
}
.back textarea {
margin-left: 5px;
margin-bottom: 1px;
height: 50px;
width: 559px;
}
.ui-dialog .charsheet .back details.career textarea {
margin-left: 1px;
width: 98%;
}
.back textarea.notes {
height: 35px;
background-color: white;
}
div.buttons {
display: grid;
grid-template-columns: 180px 250px 310px;
column-gap: 10px;
width: 760px;
}
.d20[value="1"] ~ .buttons {
grid-template-columns: 210px 245px 310px;
column-gap: 7px;
}
.recover-title {
background-color: transparent;
border: 0;
width: 200px;
margin-bottom: 5px;
}
div.creation-front h3 {
margin-bottom: 5px;
}
button.exit h4 {
margin-left: -8px;
}
.six select,
.six-skills select,
.eight select,
.legends select {
margin-top: -5px;
}
.six-skills select {
margin-top: 0;
}
.separator {
visibility: hidden;
}
.bio input[type="text"] {
/*margin-top: 3px;*/
}
.ui-dialog .charsheet span.legend-display {
font-weight: bold;
font-size: 1.1em;
text-align: center;
margin-top: -1px;
}
span.bold {
font-weight: bold;
}
div.repcontrol[data-groupname=repeating_careers] {
margin-top: 5px;
}
.toggle[value="design"] ~ div button.design,
.toggle[value="play"] ~ div button.play,
.toggle[value="front"] ~ div button.front-button,
.toggle[value="back"] ~ div button.back-button,
.toggle[value="gm"] ~ div button.gms-only {
background-color: green;
}
.visibility-toggle:not([value="1"]) + div.skill,
.ui-dialog .charsheet .load[value="0"] + .grid,
.toggle:not([value="1"]) + .toggled,
.toggle-epic:not([value="1"]) + button.epic,
.toggle-epic:not([value="1"]) + div.settings,
.xp-button-toggle:not([value="1"]) + div.xp,
.toggle-settings[value="0"] ~ .settings-show,
.toggle-xp[value="0"] ~ div.xp-show,
.d20[value="0"] ~ .gms-only,
.d20[value="0"] ~ div.front div.creation-front div.careers div.repcontrol[data-groupname=repeating_careers],
.d20[value="0"] ~ div.back div.extras div.notes div.concept div.careers div.repcontrol[data-groupname=repeating_careers],
input.toggle:not([value="front"]) ~ div.front,
input.toggle:not([value="back"]) ~ div.back,
input.toggle:not([value="gm"]) ~ div.gm,
.ui-dialog .charsheet .bio-toggled[value="1"] ~ div.concept,
.ui-dialog .charsheet .bio-toggled[value='0'] ~ div.concept-toggled,
.ui-dialog .charsheet .toggle[value="design"] ~ div.play,
.ui-dialog .charsheet .toggle[value="design"] ~ div.gear,
.ui-dialog .charsheet .toggle[value="design"] ~ div.attack,
.ui-dialog .charsheet .toggle[value='play'] ~ div.design,
.ui-dialog .charsheet .toggle[value="play"] ~ div.creation-front,
.ui-dialog .charsheet .skill-toggle[value='0'] ~ div.eight,
.ui-dialog .charsheet .skill-toggle[value='1'] ~ div.six,
.ui-dialog .charsheet .skill-toggle[value='1'] + div.passthru {
display: none;
}
input.toggle-show:not([value="1"]) ~ div.spell-display {
display: none;
}
.front .damage-init,
.front .derived .health,
.ui-dialog .charsheet .front .derived button[type="action"].left-button,
.charsheet .front .loyalties .loyalty {
margin-left: 1px;
}
/* .vagary summary */
.front .loyalties {
margin-top: 5px;
grid-area: loyalty;
}
.front .vagaries {
margin-top: 5px;
grid-area: vagary;
}
.front .stats {
grid-area: stats;
}
.front .damage-init {
grid-column: 1/-1;
display: grid;
grid-template-columns: 50% 50%;
column-gap: 5px;
margin-top: 5px;
margin-bottom: 2px;
width: 192px;
border-radius: 5px;
border: 1pt solid black;
}
.front .derived h3 {
margin-bottom: -10px;
}
.front .derived span {
margin-left: 2px;
}
.front .derived .two-column {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 55% 45%;
font-size: 1.2em;
margin-bottom: 2px;
margin-top: 2px;
}
.front .one-demon {
font-size: 90%;
}
.front div.one-demon {
margin-top:5px;
}
.front .one-demon input[type="text"],
.front .one-demon select {
height: 26px;
}
.demon-type-label {
margin-top: 10px;
}
.front .one-demon details span.demon {
display: inline-block;
width: 42px;
border: none;
}
.demon-stats button {
/* color: red; */
padding:0;
width:39px;
text-align: left;
height: 22px;
}
.front .one-demon details input[type="text"] {
width: 150px;
}
.front .one-demon details select {
width: 121px;
margin-bottom: 0;
margin-top: 5px;
}
.front .one-demon details input[type="number"] {
width: 25px;
height: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.front .one-demon details input[type=number].demon-binding {
margin-top: -10px;
height:25px;
}
.ui-dialog .charsheet button[type="action"].bio-toggle {
margin-left: calc(50% - 38px);
background-color: transparent;
border: none;
}
.ui-dialog .charsheet div.front .derived button[type="action"].recovery {
border: 1pt solid black;
border-radius: 5px;
}
.ui-dialog .charsheet button[type="action"].exit {
width: 22px;
text-align: center;
margin-left: -10px;
border: 1pt solid black;
border-radius: 5px;
padding-left: 10px;
}
.ui-dialog .charsheet button[type="action"].exit.terms {
width: auto;
position: absolute;
left: 550px;
top: 150px;
}
.ui-dialog .charsheet button[type="action"].exit.terms h4 {
text-decoration: none;
}
.ui-dialog .charsheet button[type="action"].glory-button {
background-color: transparent;
color: black;
border: none;
text-align: left;
font-weight: bold;
margin: 0;
margin-left: -5px;
margin-top: -5px;
}
.ui-dialog .charsheet div.front button[type="action"].nod20,
.ui-dialog .charsheet div.front button[type="roll"].nod20 {
background: transparent;
text-align:left;
border: 1pt solid gray;
border-radius: 4px;
font-weight: bold;
font-size: 1.0em;
width: 75px;
height: 18px;
margin: 0;
}
.ui-dialog .charsheet div.front div.attacks button[type="roll"].unmod {
height: 18px;
padding-top: 0;
}
.ui-dialog .charsheet input[type="number"].health-stats {
width: 2.7em;
border-radius: 10px;
margin-left: 2px;
}
.ui-dialog .charsheet div.front .stats button[type="action"].nod20 {
width: 50px;
}
.ui-dialog .charsheet button.nod20:before {
content: "";
}
.ui-dialog .charsheet div.front button[type="roll"].damage {
border: 0;
margin-bottom: 2px;
margin-top: -2px;
}
.ui-dialog .charsheet div.front .damage-init button[type="action"].recovery {
/*background: rgb(2240, 215, 176);
color: black;*/
border: 0;
border-radius: 0;
padding-top: 2px;
}
.ui-dialog .charsheet div.front button[type="action"].recover {
border: 0;
width: auto;
margin-left:-3px;
margin-top: -2px;
color: black;
}
h3 {
grid-column: 1 / -1;
}
div.skill {
display:contents;
}
.front .demon-buttons {
display:grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 5px;
margin-left: 5px;
margin-right: 5px;
}
.charsheet .six {
margin-top: 10px;
margin-left: 7px;
display: grid;
grid-template-columns: repeat(6, 113px);
column-gap: 4px;
}
.charsheet .six-skills {
margin-top: 5px;
margin-left: 5px;
display: grid;
grid-template-columns: repeat(6, 93px);
column-gap: 2px;
}
.charsheet details.career summary span {
text-align: center;
}
.charsheet .eight {
display: grid;
grid-template-columns: 53px repeat(8, 80px);
column-gap: 2px;
}
.charsheet .six-skills .skill-choices {
width: 90px;
}
.charsheet .six .skill-choices {
width: 113px;
}
.charsheet .eight .skill-choices {
width: 80px;
font-size: 0.9em;
}
.charsheet .legends {
display: grid;
grid-template-columns: 50px repeat(2, 145px 25px) repeat(2,145px);
column-gap: 5px;
}
.charsheet .legend-choices {
width: 145px;
}
.charsheet .legends .swap {
margin-top: -5px;
height: 22px;
}
.charsheet .title {
display:inline-block;
width: 50px;
font-weight: bold;
}
.creation-front,
.bio,
.stats,
.skills,
.attack,
.derived,
.power,
.demon,
.passions,
.vagaries,
.glory,
.gear,
.loyalties,
.extra-skills,
.notes,
.rolls-d20,
.rolls-d6,
.gm-notes,
.gm-intro,
.numbers {
border: 1pt solid black;
border-radius: 5px;
background-color: blanchedalmond;
}
.rolls-d6 {
margin-top: 5px;
}
div.gm-intro {
grid-column: 1/-1;
margin-bottom: 5px;
text-align: center;
}
div.gm {
display: grid;
grid-template-columns: 285px 425px;
column-gap: 5px;
margin-top: 10px;
background: grey;
padding: 5px;
border-radius: 5px;
width: 715px;
}
.ui-dialog .charsheet .gm-rolls {
display: grid;
grid-template-columns: 75px 75px 50px repeat(2, 30px);
column-gap: 5px;
height: 22px;
padding-bottom: 2px;
}
.gm-notes details summary {
display: grid;
grid-template-columns: 20px 420px;
column-gap: 5px;
text-align: center;
}
.gm-notes details textarea {
height:35px;
width: 430px;
margin-left: 5px;
}
.ui-dialog .charsheet .gm-rolls input {
height: 22px;
}
.ui-dialog .charsheet .gm-rolls input[type=number].mod {
width: 30px;
}
div.ui-dialog div.charsheet div.gm-rolls button[type="roll"] {
height: 17px;
padding-top: 0;
}
div.gm-notes {
}
button {
background-color: purple;
color: white;
}
.charsheet .front .numbers button.reset {
border-radius: 10px;
}
.buttons .red button,
.charsheet .front .numbers .reset,
.charsheet .front .numbers .reset h3,
.charsheet .front .numbers .glory[value="1"] + .active,
.repcontrol .repcontrol_add,
.repcontrol .repcontrol_edit,
.repcontrol .repcontrol_del,
div.settings button {
background: darkred;
color: white;
}
.buttons .blue button {
background: blueviolet;
color: white;
}
.repcontrol .repcontrol_add,
.repcontrol .repcontrol_edit,
.repcontrol .repcontrol_del {
margin-left: 5px;
margin-right: 5px;
height: 12px;
font-size: 0.9em;
line-height: 12px;
}
.ui-dialog .charsheet div.front button[type="action"].skill {
color:black;
}
.concept input[type="text"] {
width: 100%;
}
.bio {
grid-area: bio;
display: grid;
grid-template-columns: 35px 180px 175px 100px;
column-gap: 3px;
padding: 5px;
height: 20px;
margin-bottom: 5px;
}
.bio div.wealth select {
width:auto;
height: 24px;
margin-bottom: 0;
}
.creation-front .careers .titles,
.creation-front details.career summary {
display: grid;
grid-template-columns: 20px 85px 70px 50px 387px 87px;
column-gap: 2px;
}
.charsheet details.career div.legend-desc {
display: grid;
grid-template-areas:
"desc where"
"desc event1"
"desc event2"
"outcome event3"
"note note";
}
.charsheet .front details.career div.legend-desc {
display: grid;
grid-template-areas:
"desc where"
"desc event1"
"desc event2"
"outcome event3"
"note note";
}
.charsheet .back details.career div.legend-desc {
grid-template-columns: repeat(2, 283px);
column-gap: 5px;
}
.charsheet .creation-front details.career div.legend-desc {
grid-template-columns: repeat(2, 344px);
column-gap: 10px;
}
.charsheet details.career div.legend-desc .description {
grid-area: desc;
height: 136px;
}
.charsheet .back details.career div.legend-desc .description {
height: 150px;
}
.charsheet details.career div.legend-desc input.where {
grid-area: where;
height: 24px;
margin-bottom: 1px;
margin-left: 1px;
}
.charsheet .creation-front details.career div.legend-desc input.where {
width: 352px;
}
.charsheet .back details.career div.legend-desc textarea.event,
.charsheet .back details.career div.legend-desc textarea.event1,
.charsheet .back details.career div.legend-desc textarea.event2,
.charsheet .back details.career div.legend-desc textarea.event3 {
grid-area: event;
height: 57px;
}
.charsheet .back details.career div.legend-desc textarea.event1 {
grid-area: event1;
height: 57px;
}
.charsheet .back details.career div.legend-desc textarea.event2 {
grid-area: event2;
height: 57px;
}
.charsheet .back details.career div.legend-desc textarea.event3 {
grid-area: event3;
height: 57px;
}
.charsheet details.career div.legend-desc textarea.event {
height: 45px;
}
.charsheet details.career div.legend-desc textarea.outcome {
grid-area: outcome;
height: 57px;
}
.charsheet .creation-front details.career div.legend-desc textarea.outcome {
height: 50px;
}
.charsheet details.career div.legend-desc .note {
grid-area: note;
height: 30px;
width: 695px;
}
.charsheet .back details.career div.legend-desc .note {
width: 565px;
}
.ui-dialog .charsheet input[type="number"].time {
width: 30px;
}
.careers .titles,
details.career summary {
display: grid;
grid-template-columns: 20px 85px 70px 50px 257px 82px;
column-gap: 2px;
}
.charsheet details.career summary select {
padding: 0;
}
.charsheet details.career summary input.event,
.charsheet details.career summary input.outcome {
text-align: center;
font-weight: bold;;
}
.charsheet details.career summary input,
.charsheet details.career summary select {
height: 24px;
font-size: 0.9em;
padding-top: 2px;
padding-bottom: 0;
}
.charsheet .creation-front details.career summary select {
font-size: 1em;
}
.charsheet details.career summary input.event,
.charsheet details.career summary input.outcome {
text-align: center;
font-weight: bold;;
font-size: 16px;
}
.charsheet details.career summary select {
width: 83px;
margin-bottom: 2px;
}
.charsheet .creation-front details.career textarea {
width:99%
}
.charsheet details.career summary select.skill {
width: 81px;
}
.charsheet .creation-front details.career summary select {
width: 85px;
}
.charsheet details.career summary textarea {
height: 22px;
padding: 0;
margin-bottom: 0;
line-height: 12px;
font-size: 11px;
resize: none;
}
.charsheet .creation-front details.career summary textarea {
font-size: 12px;
}
.charsheet details.career summary button[type="action"] {
background-color: white;
color: black;
height: 16px;
margin-top: 2px;
padding-bottom: 2px;
}
.charsheet details.career textarea {
margin-left: 2px;
margin-bottom: 2px;
height: 50px;
}
.charsheet details.career textarea.outcome {
height: 20px;
}
.charsheet div.bio input {
margin-top: -2px;
height: 22px;
}
.ui-dialog .charsheet .front .glory {
padding-top: 4px;
padding-left: 5px;
}
.ui-dialog .charsheet .front .stats input[type="number"],
.ui-dialog .charsheet .front .skills input[type="number"] {
width: 100%;
height: 22px;
}
.ui-dialog .charsheet .front .glory input[type="number"] {
width: 3em;
height: 22px;
margin-top: -1px;
}
.passions,
.vagaries {
min-height: 60px;
}
.passions {
counter-reset: passion;
}
.passion::before {
counter-increment: passion;
content: counter(passion) '. ';
text-align: center;
}
.ui-dialog .charsheet .passions .passion {
display: grid;
grid-template-columns: 5px 1fr;
column-gap: 5px;
padding-left: 5px;
}
.repcontrol {
padding-bottom: 5px;
}
.ui-dialog .charsheet .stuff > div,
.derived /*,
.gear,
.attack */ {
margin-top: 5px;
}
.ui-dialog .charsheet .stuff div.stats,
.ui-dialog .charsheet .outer div.derived {
margin-top: 0;
}
.ui-dialog .charsheet .vagaries input,
.ui-dialog .charsheet .passions input,
.ui-dialog .charsheet .passions span {
height: 22px;
font-weight: bold;
}
.ui-dialog .charsheet .vagaries input[type="checkbox"] {
width: 25px;
}
.ui-dialog .charsheet .vagaries textarea {
margin-left: 5px;
height: 35px;
width: 86%;
grid-column: 1/-1;
}
.ui-dialog .charsheet .passions div.details,
.ui-dialog .charsheet .vagaries div.details {
display:grid;
grid-template-columns: repeat(4,1fr);
column-gap: 5px;
}
.ui-dialog .charsheet input.xp {
height: 22px;
width: 97%;
margin-left: 2px;
}
.ui-dialog .charsheet input[type="text"].passion {
width: 95%;
margin-left: 4px;
}
.vagary summary {
display: grid;
grid-template-columns: 160px 25px;
column-gap: 5px;
margin-left: 5px;
}
div.vagary input {
margin-bottom: 2px;;
}
.glory {
grid-area: glory;
display: grid;
grid-template-columns: repeat(2, 40px 1fr);
height: 26px;
}
.stats {
display: grid;
grid-template-columns: 55px 25px 35px 40px 30px;
column-gap: 2px;
padding-left: 2px;
align-content: start;
}
.skills {
grid-area: skills;
display: grid;
grid-template-columns: 80px 55px 20px 40px 40px 30px;
/*grid-auto-rows: 25px 20px;*/
column-gap: 5px;
padding-left: 2px;
align-content: start;
}
.skills .red[value="1"] ~ .number {
color: red;
font-weight: bold;
}
.skills .number,
.stats .number {
text-align:center;
}
.ui-dialog .charsheet div.front .skills button[type="action"],
.ui-dialog .charsheet div.front .stats button[type="action"] {
margin-bottom: 2px;
}
.power {
grid-area: power;
min-height: 100px;
/*min-height: 50px;
height:auto;*/
/*display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column: 5px;*/
}
.sorcery {
text-align: center;
font-weight: bold;
}
div.extra-advances {
display:grid;
grid-template-columns: 88px 35px;
column-gap: 2px;
}
div.extra-advances select {
width: 88px;
padding-top: 0;
font-size: 0.9em;
}
.ui-dialog .charsheet div.extra-advances input,
div.extra-advances select {
height: 22px;
}
.ui-dialog .charsheet div.extra-advances input {
width: 35px;
}
.ui-dialog .charsheet .extra-skills input[type="number"].xp-cost,
.ui-dialog .charsheet .buying-advances input[type="number"].xp-cost {
width: 35px;
height: 22px;
margin-top: -3px;
}
.ui-dialog .charsheet .extra-skills span,
.ui-dialog .charsheet .buying-advances span {
margin-top: 3px;
display: inline-block;
width: 88px;
}
div.repcontainer[data-groupname=repeating_power] .repitem {
width: 49%;
}
/* apply a style to all repitems, but not the add/remove buttons */
[data-groupname=repeating_power]:not(.repcontrol) {
display: flex;
flex-wrap: wrap;
gap: 0.5%;
}
.ui-dialog .charsheet .power input[type="text"] {
width: 98%;
height: 22px;
font-size: 0.9em;
font-weight: bold;
}
.derived {
grid-area: derived;
display: grid;
grid-template-columns: 85px 55px 55px;
column-gap: 5px;
padding-bottom: 2px;
padding-left: 2px;
margin-bottom: 5px;
align-content: start;
}
.gear .slots .grid-header,
.gear .slots .grid summary {
display: grid;
grid-template-columns: 77% 2.5em;
column-gap: 3%;
margin-left: 2px;
}
.gear .slots .grid details textarea {
width: 92%;
height: 30px;
margin-bottom: 3px;
}
.gear .slots .grid input {
height: 22px;
margin-bottom: 1px;
}
.gear .slots .grid input[type="number"] {
width: 2.5em;
}
.gear .gear-stats {
grid-column: 1 /-1;
display: grid;
column-gap: 5px;
grid-template-columns: 115px 85px repeat(2, 100px);
margin-left: 5px;
}
.gear .gear-stats .armour {
display: grid;
column-gap: 5px;
grid-template-columns: 60px 65px;
}
.gear .gear-stats span {
margin-top: -2px;
}
.gear .gear-stats input[type=number] {
height: 22px;
width: 3em;
text-align: center;
margin-bottom: 2px;
}
.gear .gear-stats select {
width:65px;
height: 24px;
padding: 0;
margin-bottom: 0;
margin-left: -15px;
margin-top: -2px;
}
.derived .damage-roll {
grid-column: 2 / -1;
}
.derived .health {
border-top: 1pt dotted grey;
border-bottom: 1pt dotted grey;
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2px;
margin-left: 2px;
margin-right: 6px;
width: 192px;
border-radius: 5px;
border: 1pt solid black;
}
.front .derived span.inset-1 {
margin-left: 0;
}
.front .derived span.inset-2 {
margin-left: -4px;
}
.derived .health input {
height: 22px;
margin-top: -5px;
}
details.career summary input.event {
padding-left: 0;
padding-right: 0;
}
.attack {
grid-area: attacks;
margin-bottom: 5px;
padding-bottom: 5px;
min-height: 70px;
}
.attack .attacks {
display: grid;
grid-template-columns: 80px 80px 30px 30px 30px 30px /* 100px 80px 30px 30px 30px 75px 40px */;
column-gap: 3px;
}
.charsheet .attack .attacks .name {
padding-left: 5px;
}
.charsheet .attack .attacks button {
width: 20px;
}
.attack .attacks select.type {
text-align: center;
}
.charsheet .attack .attacks select,
.charsheet .attack .attacks input {
width: auto;
height: 22px;
padding:0;
font-size: 0.9em;
margin-bottom: 1px;
}
.gear {
grid-area: gear;
margin-bottom: 5px;
display: grid;
grid-template-columns: repeat(2, 50%);
column-gap: 5px;
align-content: start;
}
.gear h3 {
margin-bottom: 0;
max-height: 24px;
}
.gear .slots {
padding-bottom: 5px;
}
.gear .carried {
display: grid;
grid-template-columns: 100px repeat(3, 30px);
column-gap: 2px;
}
.charsheet .gear .carried input {
height: 24px;
font-size: 0.9em;
width: auto;
}
.skills span.summary {
grid-column: 1 / -1;
text-align: center;
font-size: 0.9em;
font-weight: bold;
}
/* JAKOB */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-pages {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-pages {
margin-left: -7px;
}
.sheet-rolltemplate-pages .sheet-container {
border: 1px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: var(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-pages .sheet-header {
background-color: var(--header-bg-color);
/* change text-align to center to center the header text */
text-align: left;
color: var(--header-text-color);
padding: 5px;
}
.sheet-rolltemplate-pages .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-pages .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-pages .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-pages .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-pages .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-pages .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: 55% 45%;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-pages .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-pages .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: right;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-pages .sheet-value {
}
*/
.sheet-rolltemplate-pages .sheet-center {
text-align: center;
padding: 5px;
background: #FFF;
line-height:1.4em;
}
.sheet-rolltemplate-pages .sheet-border {
border-top: 1pt dotted gray;
border-bottom: 1pt dotted gray;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-pages .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-pages .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-pages .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
background-color: white;
}
.sheet-rolltemplate-special .sheet-content {
display: grid;
grid-template-columns: 50% 50%;
}