Files

892 lines
22 KiB
CSS

/* =Generic Styles reused over the sheet= */
/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Sorts+Mill+Goudy&family=Source+Serif+Pro:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
/* Roll20 Overrides */
.repcontainer .itemcontrol { /* Make the repeating fieldset delete buttons appear above other elements */
z-index: 9999;
}
div.repcontrol { /* Give repeating fieldset repcontrol a height so it doesn't overflow in edit_mode */
display: block;
height: 18px !important;
}
button.recontrol_edit { /* Prevent done button from overflowing */
height: 18px !important;
display: inline-block;
}
/* Defaults */
*, *::before, *::after {
box-sizing: border-box;
}
.ui-dialog .charsheet textarea,
.ui-dialog .charsheet input,
.ui-dialog .charsheet .uneditable-input,
.ui-dialog .charsheet label,
.ui-dialog .charsheet select,
.ui-dialog .charsheet checkbox {
font-family: 'Merriweather', serif;
font-size: 12px;
line-height: 18px;
box-sizing: border-box;
padding: 0;
}
.ui-dialog .charsheet {
font-family: 'Merriweather', serif;
font-size: 12px;
line-height: 18px;
box-sizing: border-box;
background: white;
color: black;
border-color: black;
padding: 0;
}
.ui-dialog .charsheet textarea {
margin: 0;
color: inherit;
background: transparent;
}
body.sheet-darkmode option,
body.sheet-darkmode h1, body.sheet-darkmode h2, body.sheet-darkmode h3, body.sheet-darkmode h4, body.sheet-darkmode h5,
body.sheet-darkmode .charsheet {
background: #1f1f1f;
color: whitesmoke;
border-color: whitesmoke;
}
ul, ol {
margin: 0 0 0 25px;
}
li {
text-align: left;
}
h1 {
font-size: 20px;
font-family: "Sorts Mill Goudy", serif;
font-weight: normal;
border-bottom-width: 1px;
border-bottom-style: solid;
height: 24px;
line-height: 24px;
margin-bottom: 5px;
color: black;
}
body.sheet-darkmode h1 {
color: whitesmoke;
}
h2 {
font-size: 18px;
font-family: "Sorts Mill Goudy", serif;
font-weight: normal;
padding: 0;
margin: 0;
height: 21px;
line-height: 21px;
color: black;
}
h3 {
font-size: 15px;
font-family: "Sorts Mill Goudy", serif;
font-weight: bold;
padding: 0;
margin: 5px 0 0;
height: 21px;
line-height: 21px;
color: black;
}
body.sheet-darkmode h2 {
color: whitesmoke;
}
summary {
cursor: pointer;
}
/* Layout */
div.sheet-wrapper { /* Sets default size of the sheet */
min-width: 660px;
max-width: 860px;
}
div.sheet-inline {
display: inline-block;
}
div.sheet-flex {
display: flex;
}
div.sheet-inline-flex {
display: inline-flex;
}
div.sheet-flex-wrap {
flex-wrap: wrap;
}
div.sheet-flex-column {
display: flex;
flex-direction: column;
}
div.sheet-items-centered {
align-items: center;
}
div.sheet-gap {
gap: 5px;
}
div.sheet-space-between {
display: flex;
justify-content: space-between;
}
div.sheet-space-around {
display: flex;
justify-content: space-around;
}
.sheet-grow {
flex-grow: 1;
}
.sheet-shrink {
flex-shrink: 1;
}
.sheet-bpad {
padding-bottom: 5px;
}
.sheet-tmargin {
margin-top: 5px;
}
.sheet-bmargin {
margin-bottom: 5px;
}
.sheet-rmargin {
margin-right: 5px !important;
}
.sheet-lmargin {
margin-left: 5px !important;
}
.sheet-lmargin-x3 {
margin-left: 15px !important;
}
div.sheet-warnmsg {
border: 1px solid darkred;
color: darkred;
padding: 5px;
background: #f2dede;
margin: 5px 0;
border-radius: 5px;
}
/* Row highlighting */
div.sheet-hl:hover {
background: #fcf8e3;
}
.repitem:hover {
background: #fcf8e3;
}
body.sheet-darkmode div.sheet-hl:hover {
background: darkgoldenrod;
}
body.sheet-darkmode .repitem:hover {
background: darkgoldenrod;
}
/* Tables */
div.sheet-table {
display: table;
width: 100%;
}
div.sheet-tr {
display: table-row;
}
div.sheet-tr:hover {
background: #fcf8e3;
}
body.sheet-darkmode div.sheet-tr:hover {
background: darkgoldenrod;
}
div.sheet-table .repcontainer {
display: table-row-group;
}
div.sheet-th {
display:table-cell;
text-align: center;
background: dimgray;
color: whitesmoke;
padding: 1px 2px;
vertical-align: middle;
font-weight: normal;
white-space: nowrap;
vertical-align: top;
}
div.sheet-td {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 1px 2px;
white-space: nowrap;
vertical-align: top;
}
/* Popups */
div.sheet-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
body.sheet-darkmode div.sheet-overlay {
background: rgba(128, 128, 128, 0.7);
}
div.sheet-overlay:target {
visibility: visible;
opacity: 1;
min-width: 470px;
max-width: 900px;
}
div.sheet-popup {
margin: 110px auto 5px;
padding: 5px;
border-radius: 5px;
width: 430px;
overflow: auto;
position: relative;
background: white;
transition: all 2s ease-in-out;
}
body.sheet-darkmode div.sheet-popup {
background: #1f1f1f;
}
.sheet-number-width {
width: 40px !important;
flex-shrink: 0;
}
.sheet-number-width-sm {
width: 25px !important;
flex-shrink: 0;
}
.sheet-number-width-xs {
width: 16px !important;
flex-shrink: 0;
}
.sheet-anchor-adjust-x2 {
scroll-margin-top: 41px;
}
/* Display */
.sheet-section {
border-width: 1px;
border-style: solid;
margin-bottom: 5px;
box-sizing: border-box;
padding: 5px; /* was 2px sides */
border-radius: 10px;
}
div.sheet-impval {
display: flex;
align-items: center;
border-width: 1px;
border-style: solid;
border-radius: 5px;
height: 18px;
box-sizing: border-box;
}
/*.sheet-hidden {
display: none;
}*/
.sheet-checkbox-width {
width: 16px !important;
flex-shrink: 0;
}
.sheet-button-width {
width: 27px !important;
flex-shrink: 0;
}
.sheet-full-width {
width: 100% !important;
}
.sheet-half-width {
width: 50% !important;
}
.sheet-third-width {
width: 33.33% !important;
}
.sheet-two-thirds-width {
width: 66.66% !important;
}
.sheet-auto-width {
width: auto; /* check important */
}
.sheet-full-height {
height: 100% !important;
}
/*.sheet-d6 {
font-family: "dicefontd6" !important;
font-size: 19px !important;
}*/
.sheet-d6 {
font-family: "dicefontd6" !important;
font-size: 19px !important;
}
.sheet-d8 {
font-family: "dicefontd8" !important;
font-size: 18px !important;
}
.sheet-d10 {
font-family: "dicefontd10" !important;
font-size: 22px !important;
}
.sheet-pictos {
font-family: "Pictos" !important;
}
.sheet-pictos-three {
font-family: "Pictos Three" !important;
}
.sheet-pictos-custom {
font-family: "Pictos Custom" !important;
}
.sheet-text-center {
text-align: center;
text-align-last:center;
}
.sheet-text-left {
text-align: left !important;
text-align-last: left !important;
}
.sheet-text-right {
text-align: right;
text-align-last: right;
}
.sheet-help {
cursor: help;
}
.sheet-bold {
font-weight: bold;
}
.sheet-nowrap {
white-space: nowrap;
}
/* Light and Dark Mode Toggles */
div.sheet-darkmode {
display: none;
}
body.sheet-darkmode div.sheet-lightmode {
display: none;
}
body.sheet-darkmode div.sheet-darkmode {
display: initial;
}
/* Generic Display Toggles */
input.sheet-toggle:not([value="1"]) + .sheet-toggle,
input[type="checkbox"].sheet-toggle:not(:checked) + .sheet-toggle,
input.sheet-toggle[value="1"] + .sheet-anti-toggle,
input[type="checkbox"].sheet-toggle:checked + .sheet-anti-toggle {
display: none !important;
}
input.sheet-wide-toggle:not([value="1"]) ~ .sheet-toggle,
input[type="checkbox"].sheet-wide-toggle:not(:checked) ~ .sheet-toggle,
input.sheet-wide-toggle[value="1"] ~ .sheet-anti-toggle,
input[type="checkbox"].sheet-wide-toggle:checked ~ .sheet-anti-toggle {
display: none !important;
}
input.sheet-deep-toggle:not([value="1"]) ~ div .sheet-toggle,
input[type="checkbox"].sheet-deep-toggle:not(:checked) ~ div .sheet-toggle,
input.sheet-deep-toggle[value="1"] ~ div .sheet-anti-toggle,
input[type="checkbox"].sheet-deep-toggle:checked ~ div .sheet-anti-toggle {
display: none !important;
}
input.sheet-details-toggle:not([value="1"]) ~ div .sheet-details-toggle,
input.sheet-details-toggle:not([value="1"]) ~ .sheet-details-toggle {
display: none;
}
/* Labels */
.ui-dialog .charsheet label {
margin: 0 ;
padding: 0;
color: inherit;
background: inherit;
text-align: center;
vertical-align: middle;
}
.ui-dialog .charsheet label.sheet-left {
display: inline;
text-align: left;
}
.ui-dialog .charsheet label.sheet-left::after {
content: ':';
font-family: 'Merriweather', serif;
}
.ui-dialog .charsheet label.sheet-checkbox {
display: inline;
text-align: left;
cursor: pointer;
font-weight: normal;
}
/* Add some space between the stylized span and the label span*/
.ui-dialog .charsheet label.sheet-checkbox span:nth-of-type(2) {
margin-left: 5px;
}
.ui-dialog .charsheet label.sheet-skill {
text-align: left;
width: 100%;
border-bottom-style: solid;
border-bottom-width: 1px;
font-weight: normal;
}
/* Generic Data Entry */
.sheet-readonly {
pointer-events: none;
cursor: not-allowed;
}
/* As */
a.sheet-label-left {
font-weight: bold;
text-decoration: underline;
}
a.sheet-label-left:after {
content: ':'
}
a.repcontrol_move {
height: 18px;
padding: 0 5px 0;
border-color: gray;
background: linear-gradient(to bottom, whitesmoke 16%, gainsboro 79%);
color: black;
}
body.sheet-darkmode a.repcontrol_move {
border-color: black;
background: linear-gradient(to bottom, gray 16%, dimgray 79%);
color: whitesmoke;
}
/* Inputs */
.ui-dialog .charsheet input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0;
height: 18px;
background: none;
border: none;
text-align: center;
color: inherit;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: inherit;
border-radius: 0;
}
.ui-dialog .charsheet input.sheet-text-right {
text-align: right;
text-align-last: right;
}
.ui-dialog .charsheet input[type="number"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-align: center;
align-items: center;
}
.ui-dialog .charsheet input.sheet-impval {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
font-weight: bold;
}
.ui-dialog .charsheet input.sheet-lval {
border: none;
flex-grow: 1;
width: 14px;
}
.ui-dialog .charsheet input.sheet-rval {
border: none;
font-weight: bold;
flex-grow: 1;
width: 14px;
}
.ui-dialog .charsheet input[type="number"]:disabled::-webkit-inner-spin-button,
.ui-dialog .charsheet input[type="number"]:disabled::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.ui-dialog .charsheet input[type='number']:disabled {
-moz-appearance: textfield;
}
.ui-dialog .charsheet input[type="number"]::-webkit-inner-spin-button,
.ui-dialog .charsheet input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.ui-dialog .charsheet input[type='number'] {
-moz-appearance: textfield;
text-align: center;
}
span.sheet-input-unit{
margin-left: -25px;
}
span.sheet-multi-line {
white-space: pre-wrap;
}
input.sheet-dullval {
opacity: 60%;
}
/* Selects */
.ui-dialog .charsheet select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
color: inherit;
background-color: inherit;
margin: 0;
padding: 0;
height: 18px;
background: none;
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: inherit;
border-radius: 0;
}
.ui-dialog .charsheet select.sheet-no-border {
border: none;
}
.ui-dialog .charsheet select.sheet-readonly {
pointer-events: none;
cursor: not-allowed;
}
.ui-dialog .charsheet select.sheet-inverted > option {
color: black;
}
body.sheet-darkmode .ui-dialog .charsheet select.sheet-inverted > option {
color: whitesmoke;
}
.ui-dialog .charsheet select.sheet-impval {
border-width: 1px;
border-style: solid;
border-color: inherit;
border-radius: 5px;
font-weight: bold;
}
.ui-dialog .charsheet select.sheet-dullval {
opacity: 60%;
}
/* Checkboxes and Radios */
.ui-dialog .charsheet input[type="checkbox"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
margin: 1px 0 1px;
padding: 0;
cursor: pointer;
z-index: 1;
}
/* Stylized span to look like checkbox */
.ui-dialog .charsheet input[type="checkbox"] + span {
border-width: 1px;
border-style: solid;
border-color: black;
text-align: center;
display: inline-block;
vertical-align: middle;
color: transparent;
font-family: "Pictos";
justify-content: center;
align-items: center;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
width: 16px;
height: 16px;
box-sizing: border-box;
margin: 1px 0 1px -16px;
padding: 0;
position: absolute;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
body.sheet-darkmode .ui-dialog .charsheet input[type="checkbox"] + span {
border-color: whitesmoke;
}
.ui-dialog .charsheet input[type="checkbox"]:checked + span {
border-color: inherit;
color: inherit;
}
/* Override stylized span to be a checkico or radioico */
.ui-dialog .charsheet input[type="checkbox"] + span.sheet-checkico {
border: none;
opacity: 40% !important;
color: inherit;
}
.ui-dialog .charsheet input[type="checkbox"]:checked + span.sheet-checkico {
opacity: 100% !important;
background-image: none;
color: inherit;
}
.ui-dialog .charsheet input[type="checkbox"] + span.sheet-checkico-reverse {
border: none;
opacity: 40% !important;
color: inherit;
}
.ui-dialog .charsheet input[type="checkbox"]:not(:checked) + span.sheet-checkico-reverse {
opacity: 100% !important;
background-image: none;
color: inherit;
}
/* Buttons */
.ui-dialog .charsheet button {
border-radius: 5px;
overflow: hidden;
line-height: 0;
height: 18px;
vertical-align: middle;
font-family: 'Merriweather', serif;
font-size: 12px;
box-sizing: border-box;
border: solid 1px gray;
background: linear-gradient(to bottom, whitesmoke 16%, gainsboro 79%);
color: black;
margin: 0;
padding: 0 2px 0;
text-shadow: none;
}
.ui-dialog .charsheet button[type=roll] {
font-size: 12px;
margin: 0;
padding: 0 2px 0;
}
.ui-dialog .charsheet button:hover {
border: solid 1px black;
background: linear-gradient(to bottom, gray 16%, dimgray 79%);
color: whitesmoke;
text-shadow: none;
}
.ui-dialog .charsheet button:active {
color: royalblue;
}
body.sheet-darkmode .ui-dialog .charsheet button {
border-color: black;
background: linear-gradient(to bottom, gray 16%, dimgray 79%);
color: whitesmoke;
}
body.sheet-darkmode .ui-dialog .charsheet button:hover {
background: linear-gradient(to bottom, whitesmoke 16%, gainsboro 79%);
color: black;
}
.ui-dialog .charsheet button.repcontrol_del,
body.sheet-darkmode .ui-dialog .charsheet button.repcontrol_del {
font-family: "Pictos";
background: linear-gradient(rgb(238, 95, 91), rgb(189, 54, 47));
color: whitesmoke;
border-color: rgb(172, 41, 37);
padding: 0 5px 0;
}
.ui-dialog .charsheet button[type=roll]:before {
content: '';
}
.ui-dialog .charsheet button.sheet-label-left,
.ui-dialog .charsheet button.sheet-link {
font-size: 12px;
background: transparent !important;
box-shadow: none !important;
border: none !important;
text-align: left;
text-decoration: underline;
padding: 0;
margin: 0;
color: inherit;
}
.ui-dialog .charsheet button.sheet-link.sheet-link-ico {
font-family: 'Pictos';
text-decoration: none;
}
.ui-dialog .charsheet button.sheet-no-underline {
text-decoration: none !important;
}
.ui-dialog .charsheet button.sheet-label-left {
font-weight: bold;
}
.ui-dialog .charsheet button.sheet-link:hover,
.ui-dialog .charsheet button.sheet-label-left:hover {
color: royalblue;
}
.ui-dialog .charsheet button.sheet-label-left:after {
content: ':'
}
.ui-dialog .charsheet button.sheet-compact-btn {
margin: 0 3px 3px 0;
}
.ui-dialog .charsheet button.sheet-die {
margin: 0;
width: 27px;
padding: 1px 2px;
line-height: 0;
}
.ui-dialog .charsheet button.sheet-die:hover {
text-decoration: underline;
}
div.sheet-hover-btn {
position: relative;
}
div.sheet-hover-btn:hover button {
display: inline;
}
button[type=roll].sheet-hover,
button[type=action].sheet-hover {
font-size: 12px !important;
background: transparent !important;
border: none !important;
text-align: left;
padding: 0 !important;
margin: 0 !important;
cursor: pointer;
color: inherit;
line-height: inherit;
display: none;
position: absolute;
height: 18px;
}
.ui-dialog .charsheet button.sheet-hover:hover {
color: #069;
text-decoration: underline;
}
button[type=roll].sheet-id {
font-family: "Pictos";
right: 3px;
top: 0;
}
button[type=action].sheet-augment {
font-family: "Pictos";
right: 31px;
top: 1px;
}
button[type=action].sheet-penalty {
font-family: "Pictos";
right: 18px;
top: 1px;
}
/*.ui-dialog .charsheet button[type=roll].sheet-d6::before {
font-family: 'dicefontd6';
content: 'f';
font-size: 1.25em;
}
.ui-dialog .charsheet button[type="roll"].sheet-d6:hover {
border: solid 1px black;
background: linear-gradient(to bottom, gray 16%, dimgray 79%);
color: whitesmoke;
text-shadow: none;
}*/
/* Sheet Type Display Toggles */
.sheet-typetoggle:not([value="battle_unit"]) ~ div.sheet-wrapper div.sheet-battle-unit,
.sheet-typetoggle:not([value="pc"], [value="creature"], [value="spirit"]) ~ div.sheet-wrapper div.sheet-character,
.sheet-typetoggle:not([value="pc"]) ~ div.sheet-wrapper .sheet-major,
.sheet-typetoggle:not([value="creature"], [value="spirit"]) ~ div.sheet-wrapper .sheet-minor,
.sheet-typetoggle:not([value="spirit"]) ~ div.sheet-wrapper .sheet-spirit,
.sheet-typetoggle:not([value="pc"], [value="creature"]) ~ div.sheet-wrapper .sheet-creature,
.sheet-typetoggle:not([value="ship"]) ~ div.sheet-wrapper div.sheet-ship,
.sheet-typetoggle:not([value="star_system"]) ~ div.sheet-wrapper div.sheet-star-system,
.sheet-typetoggle:not([value="vehicle"]) ~ div.sheet-wrapper div.sheet-vehicle {
display: none;
}
/* Setting Display Toggles */
.sheet-setting-option {
display: none !important;
}
.sheet-setting-control[value="default"] ~ div.sheet-wrapper .sheet-default,
.sheet-setting-control[value="after_the_vampire_wars"] ~ div.sheet-wrapper .sheet-atvw,
.sheet-setting-control[value="classic_fantasy"] ~ div.sheet-wrapper .sheet-cf,
.sheet-setting-control[value="agony_and_ecstasy"] ~ div.sheet-wrapper .sheet-destined, /* keep for compatibility */
.sheet-setting-control[value="destined"] ~ div.sheet-wrapper .sheet-destined,
.sheet-setting-control[value="fioracitta"] ~ div.sheet-wrapper .sheet-fioracitta,
.sheet-setting-control[value="luther_arkwright"] ~ div.sheet-wrapper .sheet-la,
.sheet-setting-control[value="lyonesse"] ~ div.sheet-wrapper .sheet-lyonesse,
.sheet-setting-control[value="m-space"] ~ div.sheet-wrapper .sheet-ms,
.sheet-setting-control[value="monster_island"] ~ div.sheet-wrapper .sheet-mi,
.sheet-setting-control[value="mythic_babylon"] ~ div.sheet-wrapper .sheet-mba,
.sheet-setting-control[value="mythic_britain"] ~ div.sheet-wrapper .sheet-mb,
.sheet-setting-control[value="mythic_constantinople"] ~ div.sheet-wrapper .sheet-mc,
.sheet-setting-control[value="mythic_rome"] ~ div.sheet-wrapper .sheet-mr,
.sheet-setting-control[value="mythras_imperative"] ~ div.sheet-wrapper .sheet-imperative,
.sheet-setting-control[value="odd_soot"] ~ div.sheet-wrapper .sheet-os,
.sheet-setting-control[value="perceforest"] ~ div.sheet-wrapper .sheet-perceforest,
.sheet-setting-control[value="thennla"] ~ div.sheet-wrapper .sheet-thennla,
.sheet-setting-control[value="worlds_united"] ~ div.sheet-wrapper .sheet-wu,
.sheet-setting-control:not([value="classic_fantasy"]) ~ div.sheet-wrapper .sheet-not-cf {
display: initial !important;
}
/* Compact Toggle */
.sheet-compact-control[value="1"] + div.sheet-wrapper .sheet-detailed,
.sheet-compact-control[value="0"] + div.sheet-wrapper .sheet-compact {
display: none;
}
/* Disabled fieldset controls in compact mode */
.sheet-compact-control[value="1"] + div.sheet-wrapper fieldset ~ .repcontrol {
display: none;
}
/* Styling to collapse repeating items and compactable divs in compact mode */
.sheet-compact-control[value="1"] + div.sheet-wrapper div.sheet-compactable {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
div.sheet-compactable-fieldset-control {
display: none;
}
@media screen and (max-width: 700px) {
.ui-dialog .charsheet .sheet-large-screen {
display: none !important;
}
}
@media screen and (min-width: 701px) {
.ui-dialog .charsheet .sheet-small-screen {
display: none !important;
}
}
/* Common Segments CSS */
{% include 'common/options_bar.css' %}
/* Sheet Type Specific CSS */
{% include 'sheet_types/battle_unit/battle_unit.css' %}
{% include 'sheet_types/character/character.css' %}
{% include 'sheet_types/ship/ship.css' %}
{% include 'sheet_types/vehicle/vehicle.css' %}
{% include 'sheet_types/star_system/star_system.css' %}
/* Roll Templates */
{% include 'roll_templates/default.css' %}
{% include 'roll_templates/effect.css' %}
{% include 'roll_templates/hit-location.css' %}
{% include 'roll_templates/improvement.css' %}
{% include 'roll_templates/resolution_pool.css' %}
{% include 'roll_templates/skill.css' %}
{% include 'roll_templates/system.css' %}
{% include 'roll_templates/weapon.css' %}