mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
718 lines
11 KiB
SCSS
718 lines
11 KiB
SCSS
/*
|
|
Renderer
|
|
*/
|
|
|
|
@use "vars";
|
|
|
|
$rgb-inset-border: #656565;
|
|
|
|
:root {
|
|
--sz-font-h0: 1.8em;
|
|
--sz-font-h1: 1.5em;
|
|
--sz-font-h2: 1.35em;
|
|
|
|
--h-mb-p: 5px;
|
|
--h-mb-p-inline: 0;
|
|
--h-mb-quote-line: 5px;
|
|
--h-mb-quote-line-last: 5px;
|
|
--h-mb-li: 3px;
|
|
--w-text-indent-inline-p: 0.7em;
|
|
--w-pl-list: 24px;
|
|
--w-pl-list-no-bullets: 10px;
|
|
}
|
|
|
|
@mixin rd__h--large () {
|
|
color: vars.$rgb-name-red;
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
font-weight: 500;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes rd__spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.rd {
|
|
&__ {
|
|
&b {
|
|
p {
|
|
margin-bottom: var(--h-mb-p);
|
|
}
|
|
}
|
|
|
|
&b--0,
|
|
&b--1,
|
|
&b--2,
|
|
&b--3,
|
|
&b--4 {
|
|
margin-bottom: var(--h-mb-p);
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&hr {
|
|
border-color: #aaa6;
|
|
margin: 17px 0 5px;
|
|
|
|
&--section {
|
|
margin: 30px 0 5px;
|
|
}
|
|
}
|
|
|
|
&list {
|
|
margin-top: 0;
|
|
margin-bottom: var(--h-mb-p);
|
|
padding-left: var(--w-pl-list);
|
|
|
|
> .rd__list:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
> .rd__list-name {
|
|
margin-left: calc(-1 * var(--w-pl-list));
|
|
}
|
|
}
|
|
|
|
&list-name {
|
|
margin: 0 0 var(--h-mb-li);
|
|
font-weight: bold;
|
|
list-style-type: none;
|
|
}
|
|
|
|
&li {
|
|
margin-bottom: var(--h-mb-p);
|
|
}
|
|
|
|
&compact-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
place-content: flex-start space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&title-link {
|
|
opacity: 0.3;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
|
|
&--inset {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
&wrp-image {
|
|
margin: 5px auto 0;
|
|
text-align: center;
|
|
}
|
|
|
|
&image {
|
|
// N.b. this width/height should be reflected in the renderer image styling
|
|
max-width: 100%;
|
|
max-height: 60vh;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
&wrp-map {
|
|
max-width: 33%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&wrp-gallery {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
&wrp-gallery-image {
|
|
padding: 0 10px 10px;
|
|
max-width: 33%;
|
|
}
|
|
|
|
&gallery-name {
|
|
font-style: italic;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
"e {
|
|
&-line {
|
|
margin-bottom: var(--h-mb-quote-line);
|
|
|
|
&--last {
|
|
margin-bottom: var(--h-mb-quote-line-last);
|
|
}
|
|
}
|
|
|
|
&-by {
|
|
width: 100%;
|
|
text-align: right;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&p-list-item {
|
|
// This prevents e.g. "italic" on the list item name from affecting the list item"s text.
|
|
font-style: initial;
|
|
}
|
|
|
|
&p-cont-indent {
|
|
display: block;
|
|
text-indent: 1em;
|
|
}
|
|
|
|
&tab-indent {
|
|
width: 1em;
|
|
display: inline-block;
|
|
}
|
|
|
|
&image-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
&image-title-inner {
|
|
display: inline-block;
|
|
text-decoration: underline;
|
|
margin: 2px 0; // Align with map viewer buttons, which are padded + bordered on all sides
|
|
}
|
|
|
|
&image-btn-viewer {
|
|
// Style the button text to match normal image title labels
|
|
font-style: initial;
|
|
white-space: normal;
|
|
font-size: inherit;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
&image-credit {
|
|
font-size: 80%;
|
|
}
|
|
|
|
// Thicker scrollbars for viewer
|
|
&scroller-viewer {
|
|
scrollbar-width: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
}
|
|
|
|
&prerequisite {
|
|
font-style: italic;
|
|
display: block;
|
|
}
|
|
|
|
&li-spell {
|
|
margin: 0;
|
|
}
|
|
|
|
&list-hang-notitle {
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
> .rd__li {
|
|
margin-bottom: var(--h-mb-li);
|
|
text-indent: -1.1em;
|
|
margin-left: 1.1em;
|
|
|
|
a,
|
|
span {
|
|
text-indent: initial;
|
|
}
|
|
|
|
> * {
|
|
margin: 0 0 var(--h-mb-li);
|
|
}
|
|
|
|
// fixme?
|
|
> ul {
|
|
text-indent: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&list-hang {
|
|
list-style: none;
|
|
|
|
> .rd__list-name {
|
|
margin-left: calc(-1 * var(--w-pl-list));
|
|
}
|
|
|
|
// Firefox workaround; list bullets are pseudo-elements "::marker"
|
|
> li > *:not(::marker) {
|
|
text-indent: -1.1em;
|
|
margin-left: 1.1em;
|
|
}
|
|
}
|
|
|
|
&list-decimal {
|
|
list-style: decimal;
|
|
}
|
|
|
|
&list-lower-roman {
|
|
list-style: lower-roman;
|
|
}
|
|
|
|
&list-upper-roman {
|
|
list-style: upper-roman;
|
|
}
|
|
|
|
&list-no-bullets {
|
|
list-style: none;
|
|
padding: 0 0 0 var(--w-pl-list-no-bullets);
|
|
|
|
> .rd__list-name {
|
|
margin-left: calc(-1 * var(--w-pl-list-no-bullets));
|
|
}
|
|
}
|
|
|
|
&list-italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
"e {
|
|
&-pull {
|
|
padding: 10px 15px;
|
|
text-align: center;
|
|
font-size: 125%;
|
|
}
|
|
}
|
|
|
|
// section headers
|
|
&h {
|
|
margin: 0;
|
|
line-height: inherit;
|
|
}
|
|
|
|
// statsBlockSectionHead
|
|
&h--0 {
|
|
@include rd__h--large;
|
|
|
|
font-size: var(--sz-font-h0);
|
|
}
|
|
|
|
// underline headers
|
|
// statsBlockHead
|
|
&h--1 {
|
|
@include rd__h--large;
|
|
|
|
font-size: var(--sz-font-h1);
|
|
border-bottom: 1px solid vars.$rgb-name-red;
|
|
margin: 0 0 0.2em;
|
|
}
|
|
|
|
// basic headers
|
|
// statsBlockSubHead
|
|
&h--2 {
|
|
@include rd__h--large;
|
|
|
|
font-size: var(--sz-font-h2);
|
|
}
|
|
|
|
// inset headers
|
|
// statsBlockInset and statsBlockInsetReadaloud
|
|
&h--2-inset {
|
|
font-variant: small-caps;
|
|
font-weight: bolder;
|
|
font-size: 1.1em;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
&-no-name {
|
|
justify-content: flex-end;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
&h--2-flow-block {
|
|
display: block;
|
|
font-variant: small-caps;
|
|
font-weight: bolder;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
|
|
&h--2-inset > h4,
|
|
&h--2-flow-block > h4 {
|
|
font-size: inherit;
|
|
font-weight: inherit;
|
|
line-height: vars.$font-line-height;
|
|
margin: 0;
|
|
}
|
|
|
|
// inline headers
|
|
// statsInlineHead
|
|
&h--3 {
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
// sub-inline headers (only seen in monster variant)
|
|
// statsInlineHeadSubVariant
|
|
&h--4 {
|
|
font-style: italic;
|
|
}
|
|
|
|
&h-toggle {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 12px;
|
|
opacity: 0.3;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&ele-toggled-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
&b--3 > p,
|
|
&b--4 > p {
|
|
text-indent: var(--w-text-indent-inline-p);
|
|
margin-bottom: var(--h-mb-p-inline);
|
|
|
|
&:first-of-type {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
&b-inset > p {
|
|
text-indent: var(--w-text-indent-inline-p);
|
|
margin-bottom: 0;
|
|
|
|
&:first-of-type {
|
|
text-indent: 0;
|
|
}
|
|
}
|
|
|
|
&b-inset {
|
|
margin: 7px 15px;
|
|
padding: 5px 10px;
|
|
box-shadow: 0 0 4px 0 rgb(152 142 124);
|
|
border: 1px solid $rgb-inset-border;
|
|
border-top: 2px solid $rgb-inset-border;
|
|
border-bottom: 2px solid $rgb-inset-border;
|
|
background-color: #e9ecda;
|
|
|
|
> *:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&--readaloud {
|
|
box-shadow: 0 0 4px 0 rgb(152 142 124);
|
|
border: 1px solid $rgb-inset-border;
|
|
border-left: 2px solid $rgb-inset-border;
|
|
border-right: 2px solid $rgb-inset-border;
|
|
background-color: #eef0f3;
|
|
}
|
|
|
|
&-inner {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&b-data {
|
|
border: 3px solid vars.$rgb-border-yellow--statblock;
|
|
border-left-width: 1px;
|
|
border-right-width: 1px;
|
|
margin: 5px;
|
|
width: calc(100% - 12px);
|
|
table-layout: fixed;
|
|
|
|
&--inset {
|
|
box-shadow: 0 0 4px 0 rgb(152 142 124);
|
|
border: 1px solid $rgb-inset-border;
|
|
background-color: rgb(156 150 120 / 10%);
|
|
}
|
|
}
|
|
|
|
&li > .rd__b-data {
|
|
margin: 0;
|
|
}
|
|
|
|
&data-embed {
|
|
&-header {
|
|
cursor: pointer;
|
|
font-family: "Times New Roman", serif;
|
|
font-variant: small-caps;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
background: rgb(100 100 100 / 8%);
|
|
}
|
|
}
|
|
|
|
&-toggle {
|
|
font-family: Arial, sans-serif;
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
&wrp-loadbrew--ready {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&loadbrew-icon {
|
|
text-indent: 0;
|
|
margin-left: 2px;
|
|
transition-property: transform;
|
|
transition-duration: 1s;
|
|
|
|
&--active {
|
|
animation-name: rd__spin;
|
|
animation-duration: 1.2s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
}
|
|
|
|
&table {
|
|
width: 100%;
|
|
margin-bottom: var(--h-mb-p);
|
|
|
|
> caption {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&comic {
|
|
font-family: "Blambot Casual", sans-serif;
|
|
color: #1942be;
|
|
|
|
&--h1 {
|
|
font-size: 140%;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
&--h2 {
|
|
font-size: 130%;
|
|
}
|
|
|
|
&--h3 {
|
|
font-size: 120%;
|
|
}
|
|
|
|
&--h4 {
|
|
font-size: 110%;
|
|
}
|
|
|
|
&--note {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&-img-speaker {
|
|
margin-top: -5px;
|
|
margin-bottom: -5px;
|
|
|
|
&--left {
|
|
float: left;
|
|
margin-right: 0;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
&--right {
|
|
float: right;
|
|
margin-right: -20px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
clear: both;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&img {
|
|
&-small {
|
|
max-width: 25vw;
|
|
max-height: 25vh;
|
|
}
|
|
}
|
|
|
|
&s-v-flow {
|
|
height: 15px;
|
|
width: 0;
|
|
border-left: 1px solid $rgb-inset-border;
|
|
border-right: 1px solid $rgb-inset-border;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&b-flow {
|
|
margin: 0 15px;
|
|
padding: 5px 10px;
|
|
box-shadow: 0 0 4px 0 rgb(152 142 124);
|
|
border: 1px solid $rgb-inset-border;
|
|
border-top: 2px solid $rgb-inset-border;
|
|
border-bottom: 2px solid $rgb-inset-border;
|
|
background-color: #ece4da;
|
|
|
|
> *:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&stats-name-page {
|
|
font-family: Convergence, Arial, sans-serif;
|
|
font-size: 12px;
|
|
color: vars.$rgb-off-black;
|
|
font-weight: 100;
|
|
}
|
|
|
|
&stats-name-brew-link {
|
|
font-size: 13px;
|
|
font-weight: initial;
|
|
}
|
|
|
|
&pre-wrap {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
&highlight {
|
|
background-color: vars.$rgb-bg-highlight;
|
|
}
|
|
|
|
&color {
|
|
a {
|
|
color: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item__ {
|
|
&type-rarity-attunement {
|
|
color: vars.$rgb-off-black;
|
|
}
|
|
}
|
|
|
|
&-spell__ {
|
|
&level-school-ritual {
|
|
font-style: italic;
|
|
color: vars.$rgb-off-black;
|
|
}
|
|
}
|
|
|
|
&-ability-icon {
|
|
max-width: 100px;
|
|
|
|
&__ {
|
|
&fill-primary {
|
|
fill: vars.$rgb-off-black;
|
|
}
|
|
|
|
&fill-bg {
|
|
fill: vars.$rgb-bg;
|
|
}
|
|
|
|
&stroke-bg {
|
|
stroke: vars.$rgb-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-homebrew__ {
|
|
&b {
|
|
background-color: vars.$rgb-bg-homebrew;
|
|
clear: both;
|
|
}
|
|
|
|
&wrp-notice {
|
|
float: right;
|
|
border: 1px dotted;
|
|
margin-bottom: 5px;
|
|
margin-left: 5px;
|
|
padding-right: 2px;
|
|
padding-left: 2px;
|
|
text-indent: 0;
|
|
}
|
|
|
|
&disp-notice {
|
|
&::before {
|
|
content: "Homebrew";
|
|
}
|
|
}
|
|
|
|
&disp-old-content {
|
|
color: #a00;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
&disp-inline {
|
|
background-color: vars.$rgb-bg-homebrew;
|
|
text-decoration: underline dotted;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Entries embedded in tables
|
|
td > .rd__b:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ****************************************************************************************************************** */
|
|
/* Entity-specific styling */
|
|
/* ****************************************************************************************************************** */
|
|
|
|
// region Recipes
|
|
.rd-recipes {
|
|
&__ {
|
|
&wrp-recipe {
|
|
.rd__b--3 > p,
|
|
.rd__b--4 > p {
|
|
text-indent: 0;
|
|
}
|
|
}
|
|
|
|
&wrp-instructions {
|
|
.rd__h--3 {
|
|
font-style: initial;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
.rd__b--3 > p,
|
|
.rd__b--4 > p {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.rd__b--3 > p:nth-of-type(2),
|
|
.rd__b--4 > p:nth-of-type(2) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
&wrp-ingredients {
|
|
.rd__h--2 {
|
|
font-size: 1em;
|
|
font-family: Roboto, Helvetica, sans-serif;
|
|
color: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rd__b p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// endregion
|