397 lines
9.6 KiB
CSS
397 lines
9.6 KiB
CSS
|
/* ----------------------------------------- */
|
||
|
|
/* Root */
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
:root {
|
||
|
|
--color-text-light-highlight: #f0f0e0;
|
||
|
|
--color-text-light-heading: #c9c7b8;
|
||
|
|
--color-text-light-primary: #b5b3a4;
|
||
|
|
--color-text-dark-primary: #191813;
|
||
|
|
--color-text-dark-secondary: #4b4a44;
|
||
|
|
--color-text-dark-header: #23221d;
|
||
|
|
--color-text-dark-inactive: #7a7971;
|
||
|
|
--color-text-hyperlink: #ff6400;
|
||
|
|
--color-text-selection: #f7f3e8;
|
||
|
|
--color-text-selection-bg: #777;
|
||
|
|
--color-text-light-0: #fff;
|
||
|
|
--color-text-light-1: #eee;
|
||
|
|
--color-text-light-2: #ddd;
|
||
|
|
--color-text-light-3: #ccc;
|
||
|
|
--color-text-light-4: #bbb;
|
||
|
|
--color-text-light-5: #aaa;
|
||
|
|
--color-text-light-6: #999;
|
||
|
|
--color-text-light-7: #888;
|
||
|
|
--color-text-dark-1: #111;
|
||
|
|
--color-text-dark-2: #222;
|
||
|
|
--color-text-dark-3: #444;
|
||
|
|
--color-text-dark-4: #555;
|
||
|
|
--color-text-dark-5: #666;
|
||
|
|
--color-text-dark-6: #777;
|
||
|
|
--color-border-light-1: #ddd;
|
||
|
|
--color-border-light-2: #999;
|
||
|
|
--color-border-dark-1: #111;
|
||
|
|
--color-border-dark-2: #222;
|
||
|
|
--color-border-dark-3: #333;
|
||
|
|
--color-border-dark-4: #444;
|
||
|
|
--color-border-dark-5: #666;
|
||
|
|
--color-shadow-primary: #ff0000;
|
||
|
|
--color-shadow-highlight: #ff6400;
|
||
|
|
--color-shadow-dark: #000;
|
||
|
|
--color-underline-inactive: #7a7971;
|
||
|
|
--color-underline-active: #44191A;
|
||
|
|
--color-underline-header: #782e22;
|
||
|
|
--color-border-light-highlight: #f0f0e0;
|
||
|
|
--color-border-light-primary: #b5b3a4;
|
||
|
|
--color-border-light-secondary: #c9c7b8;
|
||
|
|
--color-border-light-tertiary: #7a7971;
|
||
|
|
--color-border-dark: #000;
|
||
|
|
--color-border-dark-primary: #191813;
|
||
|
|
--color-border-dark-secondary: #23221d;
|
||
|
|
--color-border-dark-tertiary: #4b4a44;
|
||
|
|
--color-border-highlight: #ff6400;
|
||
|
|
--color-border-highlight-alt: #ff0000;
|
||
|
|
--color-bg-btn-minor-inactive: #c9c7b8;
|
||
|
|
--color-bg-btn-minor-active: #b5b3a4;
|
||
|
|
--color-select-option-bg: #dad8cc;
|
||
|
|
--color-checkbox-checked: #666;
|
||
|
|
--color-ownership-none: #5500ff;
|
||
|
|
--color-ownership-observer: #7a7971;
|
||
|
|
--color-ownership-owner: #b5b3a4;
|
||
|
|
--sidebar-width: 300px;
|
||
|
|
--sidebar-header-height: 32px;
|
||
|
|
--sidebar-item-height: 48px;
|
||
|
|
--hotbar-height: 52px;
|
||
|
|
--hotbar-width: 578px;
|
||
|
|
--macro-size: 50px;
|
||
|
|
--color-scrollbar: #782e22;
|
||
|
|
--color-scrollbar-track: transparent;
|
||
|
|
--color-scrollbar-border: #ff6400;
|
||
|
|
--players-width: 200px;
|
||
|
|
--form-field-height: 26px;
|
||
|
|
--font-primary: "Signika", sans-serif;
|
||
|
|
--line-height-12: 0.75rem;
|
||
|
|
--line-height-16: 1rem;
|
||
|
|
--line-height-20: 1.25rem;
|
||
|
|
--line-height-30: 1.875rem;
|
||
|
|
}
|
||
|
|
body.game .window-app {
|
||
|
|
--color-fieldset-border: var(--color-light-2);
|
||
|
|
--color-form-label: var(--color-dark-2);
|
||
|
|
--color-form-label-hover: var(--color-dark-1);
|
||
|
|
--color-form-hint: var(--color-dark-4);
|
||
|
|
--color-form-hint-hover: var(--color-dark-2);
|
||
|
|
--color-select-option-bg: var(--color-light-1);
|
||
|
|
}
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
/* Font Awesome Free Compatibility
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
@font-face {
|
||
|
|
font-family: "Font Awesome 5 Free";
|
||
|
|
font-display: block;
|
||
|
|
font-weight: 900;
|
||
|
|
src: url("../fonts/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: "Font Awesome 5 Free";
|
||
|
|
font-display: block;
|
||
|
|
font-weight: 400;
|
||
|
|
src: url("../fonts/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: "Font Awesome 5 Free";
|
||
|
|
font-display: block;
|
||
|
|
font-weight: 300;
|
||
|
|
src: url("../fonts/fontawesome/webfonts/fa-light-300.woff2") format("woff2"), url("../fonts/fontawesome/webfonts/fa-light-300.ttf") format("truetype");
|
||
|
|
}
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Text */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Headers */
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
h4 {
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
padding: 0;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 2em;
|
||
|
|
border-bottom: 2px solid var(--color-underline-header);
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
font-size: 1.5em;
|
||
|
|
border-bottom: 1px solid var(--color-underline-header);
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font-size: 1.25em;
|
||
|
|
border-bottom: 1px solid var(--color-underline-header);
|
||
|
|
}
|
||
|
|
:is(h1, h2, h3, h4, h5, h6).noborder {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
/* Links */
|
||
|
|
a {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
a[href] {
|
||
|
|
color: var(--color-text-hyperlink);
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
text-shadow: 0 0 8px var(--color-shadow-primary);
|
||
|
|
}
|
||
|
|
a[disabled] {
|
||
|
|
pointer-events: none;
|
||
|
|
cursor: inherit;
|
||
|
|
}
|
||
|
|
a.content-link,
|
||
|
|
a.inline-roll {
|
||
|
|
background: #DDD;
|
||
|
|
padding: 1px 4px;
|
||
|
|
border: 1px solid var(--color-border-dark-tertiary);
|
||
|
|
border-radius: 2px;
|
||
|
|
white-space: nowrap;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
a.content-link i,
|
||
|
|
a.inline-roll i {
|
||
|
|
color: var(--color-text-dark-inactive);
|
||
|
|
margin-right: 0.25em;
|
||
|
|
}
|
||
|
|
a.content-link.playing i:before,
|
||
|
|
a.inline-roll.playing i:before {
|
||
|
|
content: "\f0c8";
|
||
|
|
}
|
||
|
|
a.content-link.disabled,
|
||
|
|
a.inline-roll.disabled {
|
||
|
|
cursor: default;
|
||
|
|
color: var(--color-text-dark-inactive);
|
||
|
|
border-color: var(--color-border-light-primary);
|
||
|
|
}
|
||
|
|
a.content-link.disabled:hover,
|
||
|
|
a.inline-roll.disabled:hover {
|
||
|
|
text-shadow: unset;
|
||
|
|
}
|
||
|
|
a.content-link.broken {
|
||
|
|
cursor: default;
|
||
|
|
background: rgba(255, 0, 0, 0.05);
|
||
|
|
border: 1px dashed red;
|
||
|
|
}
|
||
|
|
a.inline-roll.gmroll {
|
||
|
|
background: #e8e8ef;
|
||
|
|
border-color: #545469;
|
||
|
|
}
|
||
|
|
a.inline-roll.blindroll {
|
||
|
|
background: #f5eaf5;
|
||
|
|
border-color: #6b476b;
|
||
|
|
}
|
||
|
|
/* Paragraph */
|
||
|
|
p {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
p:empty {
|
||
|
|
min-height: 1rem;
|
||
|
|
}
|
||
|
|
/* Images */
|
||
|
|
img.centered {
|
||
|
|
display: block;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
::selection {
|
||
|
|
background: var(--color-text-selection-bg);
|
||
|
|
color: var(--color-text-selection);
|
||
|
|
}
|
||
|
|
/* Standard Lists */
|
||
|
|
ul,
|
||
|
|
ol {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
padding: 0 0 0 1.5em;
|
||
|
|
}
|
||
|
|
/* Definition Lists */
|
||
|
|
dl {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
dt {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
dd {
|
||
|
|
padding-left: 5px;
|
||
|
|
margin: 3px 0;
|
||
|
|
}
|
||
|
|
/* HR separators */
|
||
|
|
hr {
|
||
|
|
border: none;
|
||
|
|
border-top: 1px solid var(--color-border-light-primary);
|
||
|
|
border-bottom: 1px solid var(--color-border-light-highlight);
|
||
|
|
}
|
||
|
|
/* Buttons */
|
||
|
|
button[hidden] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
/* Blockquote */
|
||
|
|
blockquote {
|
||
|
|
margin: 0.5em 0 0.5em 10px;
|
||
|
|
padding: 0 0 0 20px;
|
||
|
|
border-left: 3px solid var(--color-border-light-tertiary);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
blockquote em {
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
/* Secret Sections */
|
||
|
|
section.secret {
|
||
|
|
padding: 0 5px;
|
||
|
|
background: rgba(53, 0, 121, 0.05);
|
||
|
|
border-top: 1px solid var(--color-border-dark-5);
|
||
|
|
border-bottom: 1px solid var(--color-border-dark-5);
|
||
|
|
}
|
||
|
|
section.secret.revealed {
|
||
|
|
background: rgba(0, 53, 0, 0.05);
|
||
|
|
}
|
||
|
|
section.secret button.reveal {
|
||
|
|
width: unset;
|
||
|
|
line-height: unset;
|
||
|
|
padding: 0 16px;
|
||
|
|
margin-top: 8px;
|
||
|
|
font-size: var(--font-size-13);
|
||
|
|
border-style: dashed;
|
||
|
|
}
|
||
|
|
/* Info Tooltip Icons */
|
||
|
|
i.tip {
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
color: var(--color-text-dark-5);
|
||
|
|
}
|
||
|
|
/* Reference */
|
||
|
|
span.reference {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0.25rem;
|
||
|
|
color: #c5dbe3;
|
||
|
|
border: 1px solid #def7ff;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
#tooltip .toolclip p,
|
||
|
|
.locked-tooltip .toolclip p {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
#tooltip .toolclip h4,
|
||
|
|
.locked-tooltip .toolclip h4 {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#tooltip .toolclip p.faint,
|
||
|
|
.locked-tooltip .toolclip p.faint {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--color-text-light-heading);
|
||
|
|
}
|
||
|
|
#tooltip .toolclip video,
|
||
|
|
.locked-tooltip .toolclip video {
|
||
|
|
max-width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
/* Tables */
|
||
|
|
/* ---------------------------------------- */
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
background: rgba(0, 0, 0, 0.05);
|
||
|
|
border-top: 1px solid var(--color-border-light-tertiary);
|
||
|
|
border-bottom: 1px solid var(--color-border-light-tertiary);
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
table thead {
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
color: var(--color-text-light-highlight);
|
||
|
|
text-shadow: 1px 1px var(--color-shadow-dark);
|
||
|
|
border-bottom: 1px solid var(--color-border-dark);
|
||
|
|
}
|
||
|
|
table tr:nth-child(even) {
|
||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
table td:first-child {
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
table td,
|
||
|
|
table th {
|
||
|
|
padding: 0.25em 0;
|
||
|
|
}
|
||
|
|
table.roll-table-rollable th button[data-action] {
|
||
|
|
display: inline-block;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
width: unset;
|
||
|
|
padding: 0;
|
||
|
|
color: var(--color-text-light-highlight);
|
||
|
|
}
|
||
|
|
table.roll-table-rollable tr:not(.drawn) > td:first-child {
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
table.roll-table-rollable tr.drawn {
|
||
|
|
background: rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
table.roll-table-rollable tr.drawn > td:first-child::before {
|
||
|
|
content: "\f023";
|
||
|
|
font-family: var(--font-awesome);
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
padding-inline: 4px;
|
||
|
|
}
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
/* Scrollbar
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
box-shadow: 0 0 1px #999 inset;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
outline: none;
|
||
|
|
border-radius: 3px;
|
||
|
|
background: var(--color-scrollbar);
|
||
|
|
border: 1px solid var(--color-scrollbar-border);
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
|
||
|
|
}
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
/* Images
|
||
|
|
/* ----------------------------------------- */
|
||
|
|
img {
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid var(--color-border-dark);
|
||
|
|
border-radius: 2px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
img.noborder {
|
||
|
|
border: none;
|
||
|
|
box-shadow: none;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
figure {
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
figure img {
|
||
|
|
display: block;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
figure figcaption {
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
padding: 0 1rem;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
height: calc(100vh - 16px);
|
||
|
|
margin: 0;
|
||
|
|
padding: 2px 4px 2px 2px;
|
||
|
|
overflow-y: auto;
|
||
|
|
font-family: var(--font-primary);
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|