mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
1094 lines
29 KiB
CSS
1094 lines
29 KiB
CSS
/* ************************************************************************************************************************************************ */
|
|
/* Colours */
|
|
/* ************************************************************************************************************************************************ */
|
|
/*
|
|
#948a54 (mid brown) - table borders, headings of older parts of the sheet
|
|
#ddd9c3 (beige) - header cells, active tab button
|
|
#b6ad7c (darker beige) - inactive tab buttons
|
|
#f6f5ef (pale beige) - input control backgrounds
|
|
#e0e0e0 (light grey) - read-only cell background
|
|
|
|
#c4bc96 (slightly darker beige) - tab button borders
|
|
*/
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Whole Sheet */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.charsheet {
|
|
background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/Paper.jpg");
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet {
|
|
min-height: 750px;
|
|
}
|
|
|
|
.sheet-background-flex-layout {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.sheet-background-column-fixed-left,
|
|
.sheet-background-column-fixed-right {
|
|
flex-grow: 0;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
width: 10px;
|
|
min-width: 10px;
|
|
max-width: 10px;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/border.png");
|
|
background-repeat: repeat-y;
|
|
}
|
|
|
|
.sheet-background-column-fixed-left {
|
|
margin-left: 5px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.sheet-background-column-fixed-right {
|
|
margin-left: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-background-column-grow {
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Tab buttons */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
input.sheet-tab,
|
|
span.sheet-tab {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet input.sheet-tab {
|
|
width: 94px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
opacity: 0;
|
|
z-index: 9999;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
span.sheet-tab {
|
|
text-align: center;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
color: maroon;
|
|
border: 2px solid maroon;
|
|
border-radius: 4px;
|
|
background: #b6ad7c;
|
|
width: 90px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
margin-left: -99px;
|
|
}
|
|
|
|
div[class^="sheet-section"] {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-tab1:checked~div.sheet-section-core,
|
|
input.sheet-tab2:checked~div.sheet-section-skills,
|
|
input.sheet-tab3:checked~div.sheet-section-combat,
|
|
input.sheet-tab4:checked~div.sheet-section-gear,
|
|
input.sheet-tab5:checked~div.sheet-section-mystic,
|
|
input.sheet-tab6:checked~div.sheet-section-abilities,
|
|
input.sheet-tab7:checked~div.sheet-section-reputation,
|
|
input.sheet-tab8:checked~div.sheet-section-notes {
|
|
display: block;
|
|
}
|
|
|
|
input.sheet-tab:checked+span {
|
|
background: #ddd9c3;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Headings */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #ddd9c3;
|
|
background-color: #590902;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/runes-dark.png');
|
|
background-position-y: center;
|
|
background-repeat: repeat-x;
|
|
border: 2px solid #590902;
|
|
border-radius: 4px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
color: maroon;
|
|
background-color: #ddd9c3;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
h2 {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
h3 {
|
|
text-align: left;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Expand/collapse (custom checkbox plus hiding a section)*/
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-collapse-wrapper {
|
|
border: 2px solid #948a54;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Hide the browser's default checkbox */
|
|
input.sheet-expand-collapse-checkbox {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
margin-left: 7px;
|
|
margin-top: 4px;
|
|
width: 16px;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
input.sheet-expand-collapse-checkbox:checked~.sheet-expand-collapse-symbol:after {
|
|
display: block;
|
|
height: 24px;
|
|
width: 20px;
|
|
margin-left: 4px;
|
|
content: " ";
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/expanded.png');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
input.sheet-expand-collapse-checkbox~.sheet-expand-collapse-symbol:after {
|
|
display: block;
|
|
height: 24px;
|
|
width: 20px;
|
|
margin-left: 4px;
|
|
content: " ";
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/collapsed.png');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-expand-collapse-checkbox~.sheet-collapsible {
|
|
display: none;
|
|
}
|
|
|
|
input[type="checkbox"].sheet-expand-collapse-checkbox:checked~.sheet-collapsible {
|
|
display: block;
|
|
}
|
|
|
|
/* Designed to spill over on to the expand/collapse element below */
|
|
.sheet-table-header-collapse {
|
|
height: 5px;
|
|
line-height: 30px;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-collapse-section {
|
|
background-color: #ddd9c3;
|
|
}
|
|
|
|
.sheet-collapsible table,
|
|
table.sheet-embedded-table {
|
|
border: 0;
|
|
}
|
|
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Flexbox columns */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-flex-section,
|
|
.sheet-flex-section-centre,
|
|
.sheet-flex-section-no-margin {
|
|
margin-left: -10px;
|
|
margin-right: -10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sheet-flex-section,
|
|
.sheet-flex-section-no-margin {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sheet-flex-section-centre {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.sheet-flex-section {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.sheet-column-fixed {
|
|
flex-grow: 0;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-column-grow {
|
|
flex-grow: 1;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-flex-form-container {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sheet-flex-form-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-flex-form-fixed {
|
|
flex-grow: 0;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
.sheet-centred-section {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Tables */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
table {
|
|
width: 100%;
|
|
border: 2px solid #948a54;
|
|
background-color: #ddd9c3;
|
|
table-layout: auto;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #c4bc96;
|
|
}
|
|
|
|
th {
|
|
max-width: max-content;
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: dimgray;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
th.sheet-small-table-header {
|
|
font-size: 0.7em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
height: 16px;
|
|
line-height: normal;
|
|
}
|
|
|
|
td.sheet-small-text,
|
|
th.sheet-small-text {
|
|
text-align: center;
|
|
height: 28px;
|
|
}
|
|
|
|
td.sheet-small-text {
|
|
font-size: 0.7em;
|
|
background-color: #f6f5ef;
|
|
}
|
|
|
|
th.sheet-small-text {
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
td.sheet-cell-numeric,
|
|
td.sheet-cell-numeric-readonly {
|
|
text-align: center;
|
|
max-width: 50px;
|
|
}
|
|
|
|
td.sheet-cell-numeric {
|
|
background-color: #f6f5ef;
|
|
}
|
|
|
|
.sheet-header-column {
|
|
width: 15em;
|
|
}
|
|
|
|
.sheet-button-cell {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Entry controls */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
input,
|
|
select,
|
|
textarea,
|
|
.sheet-input-like,
|
|
.sheet-input-like-no-padding {
|
|
width: 100%;
|
|
background-color: #f6f5ef;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet input[type=number],
|
|
.sheet-demon-gate-charsheet input[type=text],
|
|
.sheet-demon-gate-charsheet select {
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
input[type="number"].sheet-totalfield,
|
|
input[type="text"].sheet-totalfield {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: dimgray;
|
|
background-color: #e0e0e0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
td input[type=number] {
|
|
min-width: 2.2em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-input-narrow {
|
|
width: 5em;
|
|
min-width: 5em;
|
|
max-width: 5em;
|
|
}
|
|
|
|
.sheet-read-only-field,
|
|
td.sheet-cell-numeric-readonly,
|
|
td input:read-only {
|
|
color: lightslategray;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.sheet-text-centred,
|
|
td input[type=text].sheet-text-centred {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet input[type=number].sheet-numeric-wide {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-tall-control,
|
|
input.sheet-tall-control {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
td input[type=text].sheet-dice-field {
|
|
min-width: 7em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-input-like {
|
|
padding-left: 4px;
|
|
}
|
|
|
|
button.sheet-button,
|
|
button.btn {
|
|
border: 2px solid maroon;
|
|
border-radius: 4px;
|
|
color: maroon;
|
|
text-shadow: none;
|
|
}
|
|
|
|
button.btn {
|
|
background: #ddd9c3;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet button.sheet-display-text-button[type=roll]:before,
|
|
.sheet-demon-gate-charsheet button.sheet-display-text-button-small[type=roll]:before {
|
|
content: "";
|
|
}
|
|
|
|
button.sheet-display-text-button-small {
|
|
height: 20px;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet button.sheet-display-text-button-small[type=roll] {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet button.sheet-display-text-button[type=roll] {
|
|
font-size: 1em;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Top section of first sheet */
|
|
/* ************************************************************************************************************************************************ */
|
|
.sheet-demon-gate-logo {
|
|
height: 116px;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet table td input {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet table td select {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
margin: 0;
|
|
}
|
|
|
|
.sheet-input-wide {
|
|
min-width: 12em;
|
|
}
|
|
|
|
.sheet-input-like-no-padding input.sheet-input-narrow {
|
|
max-width: 7.5em;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet td input.sheet-prominent-label,
|
|
.sheet-demon-gate-charsheet td input.sheet-prominent-field {
|
|
height: 72px;
|
|
}
|
|
|
|
td input.sheet-prominent-field {
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-vertical-margin {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-vertical-margin-moderate {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
input[type=number].sheet-input-split {
|
|
max-width: 40%;
|
|
min-width: 1.1em;
|
|
}
|
|
|
|
td .sheet-input-spacer {
|
|
min-width: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-beauty-table-spacer-cell {
|
|
min-width: 19.5em;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* HP, Mana etc. */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-column-prominent-stat {
|
|
flex-grow: 0;
|
|
width: 120px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-demon-gate-charsheet td input.sheet-extra-prominent-field {
|
|
font-size: 36px;
|
|
height: 84px;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/** Physical and mental conditions, including gradient colours */
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-physical-condition-0,
|
|
.sheet-physical-condition-1,
|
|
.sheet-physical-condition-2,
|
|
.sheet-physical-condition-3,
|
|
.sheet-physical-condition-4,
|
|
.sheet-physical-condition-5,
|
|
.sheet-physical-condition-6,
|
|
.sheet-mental-condition-0,
|
|
.sheet-mental-condition-1,
|
|
.sheet-mental-condition-2,
|
|
.sheet-mental-condition-3,
|
|
.sheet-mental-condition-4,
|
|
.sheet-mental-condition-5,
|
|
.sheet-mental-condition-6 {
|
|
width: 14%;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-0,
|
|
tr td.sheet-mental-condition-0 {
|
|
background-color: white;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-1 {
|
|
background-color: #ffcccc;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-2 {
|
|
background-color: #ff9999;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-3 {
|
|
background-color: #ff6666;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-4 {
|
|
background-color: #ff3333;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-5 {
|
|
background-color: #cc0000;
|
|
}
|
|
|
|
tr td.sheet-physical-condition-6 {
|
|
background-color: #800000;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-1 {
|
|
background-color: #cce0ff;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-2 {
|
|
background-color: #80b3ff;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-3 {
|
|
background-color: #4d94ff;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-4 {
|
|
background-color: #0066ff;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-5 {
|
|
background-color: #0047b3;
|
|
}
|
|
|
|
tr td.sheet-mental-condition-6 {
|
|
background-color: #003380;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Skills tab
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-top-margin {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.charsheet select.sheet-skilldescshort {
|
|
width: 4.2em;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.sheet-skillname,
|
|
.sheet-skillname-indented {
|
|
padding-right: 10px;
|
|
width: 9em;
|
|
}
|
|
|
|
.sheet-skillname {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.sheet-skillname-indented {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.sheet-skillname-input-cell {
|
|
width: 10.5em;
|
|
}
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Abilities and notes tabs
|
|
/* ************************************************************************************************************************************************ */
|
|
.sheet-subsection-header,
|
|
.sheet-subsection-header-wide {
|
|
width: 100%;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
color: dimgray;
|
|
background-color: #ddd9c3;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sheet-subsection-header-wide {
|
|
min-width: 15em;
|
|
border: 2px solid #c4c1b2;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
textarea.sheet-text-area-full,
|
|
textarea.sheet-text-area-large,
|
|
textarea.sheet-standalone-textarea,
|
|
textarea.sheet-textarea-gems,
|
|
textarea.sheet-textarea-equipment {
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
textarea.sheet-text-area-full {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
border-radius: 0;
|
|
height: 150px;
|
|
}
|
|
|
|
textarea.sheet-text-area-large {
|
|
margin-top: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
height: 300px;
|
|
}
|
|
|
|
.sheet-repeating-section {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: #ddd9c3;
|
|
border: 2px solid #948a54;
|
|
}
|
|
|
|
/* This could probably be added to h2 (and maybe h1?) with a bit of reorg */
|
|
.sheet-spacer-top-margin {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
h1.sheet-spacer-top-margin {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.sheet-standalone-textarea,
|
|
.sheet-textarea-gems,
|
|
.sheet-textarea-equipment {
|
|
margin-top: 20px;
|
|
border: 2px solid #948a54;
|
|
border-radius: 0;
|
|
}
|
|
|
|
textarea.sheet-standalone-textarea {
|
|
height: 150px;
|
|
}
|
|
|
|
textarea.sheet-textarea-gems {
|
|
height: 530px;
|
|
}
|
|
|
|
textarea.sheet-textarea-equipment {
|
|
height: 570px;
|
|
}
|
|
|
|
|
|
/* TODO: This is a hack - sorting out heading spacing properly and removing it from flex sections should allow this to be removed */
|
|
.sheet-remove-margin-bottom {
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Mysic tab
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
.sheet-religion-table {
|
|
border: 2px solid #948a54;
|
|
}
|
|
|
|
.sheet-religion-table table {
|
|
border: 0;
|
|
}
|
|
|
|
.sheet-religion-table table td {
|
|
border-right: 0;
|
|
}
|
|
|
|
.sheet-spiritual-influence-header {
|
|
border: 2px solid #948a54;
|
|
}
|
|
|
|
.sheet-spiritual-influence-image {
|
|
background: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/Circle.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
height: 271px;
|
|
width: 288px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-spiritual-influence-image input[type=number].sheet-spiritual-influence {
|
|
width: 2.2em;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
border-radius: 20px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding: 0;
|
|
border: 2px solid maroon;
|
|
}
|
|
|
|
textarea.sheet-spell-description,
|
|
textarea.sheet-chi-ability-description {
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
width: 100%;
|
|
min-width: 30em;
|
|
margin: 0;
|
|
}
|
|
|
|
textarea.sheet-spell-description {
|
|
height: 120px;
|
|
}
|
|
|
|
textarea.sheet-chi-ability-description {
|
|
height: 105px;
|
|
}
|
|
|
|
th.sheet-cell-moderate-width {
|
|
width: 10em;
|
|
}
|
|
|
|
th.sheet-cell-narrow {
|
|
width: 4em;
|
|
}
|
|
|
|
tr.sheet-spell-padding-row {
|
|
height: 36px;
|
|
}
|
|
|
|
tr.sheet-spell-spacer-row {
|
|
height: 4px;
|
|
}
|
|
|
|
tr.sheet-spell-spacer-row td {
|
|
background-color: #948a54;
|
|
}
|
|
|
|
|
|
|
|
/* ************************************************************************************************************************************************ */
|
|
/* Roll Templates
|
|
/* ************************************************************************************************************************************************ */
|
|
|
|
|
|
.sheet-rolltemplate-text .sheet-template-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-text .sheet-template-box,
|
|
.sheet-rolltemplate-class-ability-text .sheet-template-box,
|
|
.sheet-rolltemplate-percentile .sheet-template-box,
|
|
.sheet-rolltemplate-attack .sheet-template-box,
|
|
.sheet-rolltemplate-damage .sheet-template-box,
|
|
.sheet-rolltemplate-roll .sheet-template-box,
|
|
.sheet-rolltemplate-spell-description .sheet-template-box,
|
|
.sheet-rolltemplate-spell-cast .sheet-template-box,
|
|
.sheet-rolltemplate-spell-effect .sheet-template-box,
|
|
.sheet-rolltemplate-simple .sheet-template-box,
|
|
.sheet-rolltemplate-two-part .sheet-template-box {
|
|
width: 100%;
|
|
border: 2px solid #948a54;
|
|
background-color: #f6f5ef;
|
|
}
|
|
|
|
.sheet-rolltemplate-text .sheet-template-title,
|
|
.sheet-rolltemplate-class-ability-text .sheet-template-title,
|
|
.sheet-rolltemplate-percentile .sheet-template-title,
|
|
.sheet-rolltemplate-attack .sheet-template-title,
|
|
.sheet-rolltemplate-damage .sheet-template-title,
|
|
.sheet-rolltemplate-roll .sheet-template-title,
|
|
.sheet-rolltemplate-spell-description .sheet-template-title,
|
|
.sheet-rolltemplate-spell-cast .sheet-template-title,
|
|
.sheet-rolltemplate-spell-effect .sheet-template-title,
|
|
.sheet-rolltemplate-simple .sheet-template-title,
|
|
.sheet-rolltemplate-two-part .sheet-template-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: maroon;
|
|
background-color: #ddd9c3;
|
|
font-weight: normal;
|
|
font-size: 16px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-text .sheet-template-subtitle,
|
|
.sheet-rolltemplate-class-ability-text .sheet-template-subtitle,
|
|
.sheet-rolltemplate-percentile .sheet-template-subtitle,
|
|
.sheet-rolltemplate-attack .sheet-template-subtitle,
|
|
.sheet-rolltemplate-damage .sheet-template-subtitle,
|
|
.sheet-rolltemplate-roll .sheet-template-subtitle,
|
|
.sheet-rolltemplate-spell-cast .sheet-template-subtitle,
|
|
.sheet-rolltemplate-spell-effect .sheet-template-subtitle,
|
|
.sheet-rolltemplate-simple .sheet-template-subtitle,
|
|
.sheet-rolltemplate-two-part .sheet-template-subtitle {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: maroon;
|
|
background-color: #ddd9c3;
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-class-ability-text .sheet-template-hr,
|
|
.sheet-rolltemplate-percentile .sheet-template-hr,
|
|
.sheet-rolltemplate-attack .sheet-template-hr,
|
|
.sheet-rolltemplate-spell-description .sheet-template-hr,
|
|
.sheet-rolltemplate-spell-cast .sheet-template-hr,
|
|
.sheet-rolltemplate-spell-effect .sheet-template-hr,
|
|
.sheet-rolltemplate-two-part .sheet-template-hr {
|
|
width: 100%;
|
|
height: 24px;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Demon%20Gate/roll-divider.png');
|
|
background-repeat: no-repeat;
|
|
background-position-x: center;
|
|
background-position-y: center;
|
|
background-size: contain;
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-text .sheet-template-text,
|
|
.sheet-rolltemplate-class-ability-text .sheet-template-text,
|
|
.sheet-rolltemplate-percentile .sheet-template-text,
|
|
.sheet-rolltemplate-spell-description .sheet-template-text {
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-class-ability-text th,
|
|
.sheet-rolltemplate-percentile th,
|
|
.sheet-rolltemplate-spell-description th,
|
|
.sheet-rolltemplate-spell-cast th,
|
|
.sheet-rolltemplate-spell-effect th {
|
|
font-size: 13px;
|
|
padding: 4px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack th,
|
|
.sheet-rolltemplate-damage th,
|
|
.sheet-rolltemplate-roll th {
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-class-ability-text td,
|
|
.sheet-rolltemplate-percentile td,
|
|
.sheet-rolltemplate-spell-description td,
|
|
.sheet-rolltemplate-spell-cast td,
|
|
.sheet-rolltemplate-spell-effect td {
|
|
font-size: 13px;
|
|
text-align: center;
|
|
min-width: 3em;
|
|
padding: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-attack td,
|
|
.sheet-rolltemplate-damage td,
|
|
.sheet-rolltemplate-roll td {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
min-width: 3em;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-percentile .sheet-template-success,
|
|
.sheet-rolltemplate-percentile .sheet-template-failure {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
margin-top: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-percentile .sheet-template-success {
|
|
color: darkgreen;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-percentile .sheet-template-failure {
|
|
color: maroon;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-rolltemplate-simple .sheet-template-text-prominent,
|
|
.sheet-rolltemplate-two-part .sheet-template-text-prominent {
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-two-part .sheet-template-text-supplementary {
|
|
font-size: 13px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Dark mode support */
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-box,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-box {
|
|
border: 2px solid #222222;
|
|
background-color: #555555;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-title,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .sheet-template-subtitle,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .sheet-template-subtitle {
|
|
color: #ddd9c3;
|
|
background-color: #590902;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult {
|
|
background-color: #353535;
|
|
border: 2px solid #222222;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult {
|
|
background-color: #353535;
|
|
border: 2px solid #222222;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult.fullfail,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult.fullfail {
|
|
border-color: #b30000;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-text .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-class-ability-text .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-attack .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-damage .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-roll .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-description .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-cast .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-spell-effect .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-simple .inlinerollresult.fullcrit,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-two-part .inlinerollresult.fullcrit {
|
|
border-color: #028502;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-success {
|
|
color: #05AD05;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-percentile .sheet-template-failure {
|
|
color: #f80303;
|
|
} |