mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
389 lines
8.1 KiB
SCSS
389 lines
8.1 KiB
SCSS
@use "sass:color";
|
|
|
|
@font-face {
|
|
font-family: Convergence;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src:
|
|
local("Convergence-Regular"),
|
|
url("../fonts/Convergence-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Roboto;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src:
|
|
local("Roboto"),
|
|
url("../fonts/Roboto-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Glyphicons Halflings";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src:
|
|
local("glyphicons-halflings-regular"),
|
|
url("../fonts/glyphicons-halflings-regular.woff2") format("woff2");
|
|
}
|
|
|
|
// RMR/RMBRE
|
|
@font-face {
|
|
font-family: "Blambot Casual";
|
|
src:
|
|
local("Blambot-Casual"),
|
|
url("../fonts/Blambot-Casual-Regular.woff2") format("woff2");
|
|
}
|
|
|
|
// HWCS/HWAitW
|
|
@font-face {
|
|
font-family: HPPHumblescratch;
|
|
src:
|
|
local("HPPHumblescratch"),
|
|
url("../fonts/hpphumblescratch-webfont.woff2") format("woff2");
|
|
}
|
|
|
|
@keyframes kf-fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
$pct-darken-active: 10%;
|
|
$pct-darken-border: 15%;
|
|
$pct-darken-border--active: 20%;
|
|
$pct-darken-hover: 5%;
|
|
|
|
$sz-y-header: 73px;
|
|
|
|
$spacer: 1rem;
|
|
|
|
$rgb-off-black: #333;
|
|
|
|
$rgb-active-blue--light: #7398b7;
|
|
$rgb-active-blue: #337ab7;
|
|
$rgb-active-blue--dark: #2a6496;
|
|
$rgb-active-red--light: #8a4b4b;
|
|
$rgb-active-red: #8a1a1b;
|
|
$rgb-active-red--dark: #711617;
|
|
$rgb-inactive-grey: #c3c3c3;
|
|
|
|
$rgb-name-red: #822000;
|
|
$rgb-name-red--night: #d29a38;
|
|
$rgb-name-alt--night: #c2c2c2;
|
|
$rgb-bg-orange: #fdf1dc;
|
|
$rgb-bg-highlight: #ff0;
|
|
$rgb-border-yellow--statblock: #e69a28;
|
|
|
|
$rgb-link-blue: $rgb-active-blue;
|
|
$rgb-link-blue--muted: #7096b7;
|
|
$rgb-link-blue--night: #7db6e8;
|
|
$rgb-link-blue--muted-night: #6e8eab;
|
|
|
|
$rgb-border-grey: #ccc;
|
|
$rgb-border-grey--trans: #cccccca0;
|
|
$rgb-border-grey--trans-muted: #ccc6;
|
|
$rgb-border-grey--muted: #eee;
|
|
$rgb-border-grey--list-row: #ddd;
|
|
$rgb-border-grey--night: #555;
|
|
$rgb-border-grey--trans-night: #555555a0;
|
|
$rgb-border-grey--list-row-night: #444;
|
|
$rgb-border-grey--statblock-night: #565656;
|
|
|
|
$rgb-modal-overlay-grey: #45454588;
|
|
$rgb-shadow-grey: rgb(0 0 0 / 17.5%);
|
|
$rgb-shadow-grey--dark: rgb(0 0 0 / 47.5%);
|
|
|
|
$rgb-stripe-grey: #88888818;
|
|
$rgb-stripe-grey--faint: #bbbbbb18;
|
|
$rgb-stripe-grey--night: #aaa2;
|
|
|
|
$rgb-cb-grey: #666;
|
|
|
|
$rgb-bg: #fff;
|
|
$rgb-bg--alt: #f5f5f5;
|
|
$rgb-bg-homebrew: #ff00001a;
|
|
|
|
$rgb-bg--night: #222;
|
|
$rgb-bg--alt-night: #383838;
|
|
$rgb-bg-homebrew--night: rgb(255 0 0 / 15%);
|
|
|
|
$rgb-bg-highlight--night: #cc0;
|
|
$rgb-font: #333;
|
|
$rgb-font--muted: #777;
|
|
$rgb-font--night: #bbb;
|
|
|
|
$rgb-form-control-bg--night: #222;
|
|
|
|
$rgb-ctx-item-text-disabled: #777;
|
|
|
|
$rgb-alert-text-success: #3c763d;
|
|
$rgb-alert-text-info: #31708f;
|
|
$rgb-alert-text-warning: #8a6d3b;
|
|
$rgb-alert-text-danger: #a94442;
|
|
|
|
$rgb-btn-default-active--night: #ffffff40;
|
|
|
|
$rgb-btn-danger-bg-red: #d9534f;
|
|
$rgb-btn-danger-bg-red--night: #7e3a38;
|
|
|
|
$rgb-btn-danger-border-red: #ac2925;
|
|
|
|
$rgb-btn-primary-blue: $rgb-active-blue;
|
|
$rgb-btn-primary-blue--desaturated: #b8b8b8;
|
|
|
|
$rgb-class-variant: #8f903c;
|
|
$rgb-class-ua: #827e00;
|
|
$rgb-subclass: #337ab7;
|
|
$rgb-subclass--stale: #7699b7;
|
|
$rgb-subclass-ua: #1d965d;
|
|
$rgb-subclass-ua--stale: #5f967c;
|
|
$rgb-class-brew: #8c3b96;
|
|
$rgb-class-variant-brew: #ba75a1;
|
|
|
|
$rgb-class-variant--night: #e6ab94;
|
|
$rgb-class-ua--night: #a2ce42;
|
|
$rgb-subclass--night: $rgb-subclass;
|
|
$rgb-subclass--night-stale: $rgb-subclass--stale;
|
|
$rgb-subclass-ua--night: #179e50;
|
|
$rgb-subclass-ua--night-stale: #509e8a;
|
|
$rgb-class-brew--night: #aa40b4;
|
|
$rgb-class-variant-brew--night: #da9db5;
|
|
|
|
$rgb-roll-min: #ff3100;
|
|
$rgb-roll-max: #00b400;
|
|
$rgb-roll-min--muted: color.adjust($rgb-roll-min, $saturation: - 35%);
|
|
$rgb-roll-max--muted: color.adjust($rgb-roll-max, $saturation: - 35%);
|
|
|
|
// Colors blended using https://www.w3schools.com/colors/colors_mixer.asp
|
|
$rgb-btn-primary-blue--night: #2a4e6c; // #337ab7 blended with #222
|
|
$rgb-btn-danger-red--night: #7e3a38; // #d9534f blended with #222
|
|
$rgb-btn-warning-orange--night: #896838; // #f0ad4e blended with #222
|
|
$rgb-btn-info-blue--night: #2a697c; // #31b0d5 blended with #222
|
|
$rgb-btn-success-green--night: #427442; // #5cb85c blended with #222
|
|
|
|
$rgb-alert-info-blue--night: #375a7f;
|
|
$rgb-alert-danger-red--night: #8d1d1a;
|
|
$rgb-alert-warning-orange--night: #cd8514;
|
|
$rgb-alert-success-green--night: #009e56;
|
|
|
|
$rgb-alert-info-border-blue--night: color.adjust($rgb-alert-info-blue--night, $lightness: $pct-darken-border);
|
|
$rgb-alert-danger-border-red--night: color.adjust($rgb-alert-danger-red--night, $lightness: $pct-darken-border);
|
|
$rgb-alert-warning-border-orange--night: color.adjust($rgb-alert-warning-orange--night, $lightness: $pct-darken-border);
|
|
$rgb-alert-success-border-green--night: color.adjust($rgb-alert-success-green--night, $lightness: $pct-darken-border);
|
|
|
|
/* Z-Indices */
|
|
$z-token-image: 10;
|
|
|
|
$z-side-menu: 60;
|
|
|
|
$z-omnisearch: 100;
|
|
$z-book-find: 100;
|
|
$z-bookmode: 100;
|
|
$z-rollerbox-hidden: 100;
|
|
$z-card-viewer: 105; // Minimized rollbox should be underneath; active rollbox should be on top, so we can roll dice in cards
|
|
$z-rollerbox-active: 110;
|
|
|
|
// Z-indices 200-300 reserved for hover windows
|
|
$z-hwin: 200;
|
|
|
|
$z-search: 900;
|
|
|
|
$z-modal-wrapper: 1000;
|
|
$z-modal-inner: 1001;
|
|
$z-modal-legal: 1000;
|
|
|
|
$z-context-menu: 1100;
|
|
|
|
$z-temp-effect: 2000;
|
|
|
|
/* *** */
|
|
|
|
/* region Timing */
|
|
$time-1-frame: 17ms;
|
|
$time-2-frames: 34ms;
|
|
$time-3-frames: 51ms;
|
|
$time-4-frames: 67ms;
|
|
$time-5-frames: 84ms;
|
|
/* endregion */
|
|
|
|
// region Widths
|
|
$w-ipt-number-1-digit: 24px;
|
|
$w-ipt-number-1-5-digit: 30px;
|
|
$w-ipt-number-2-digit: 40px;
|
|
$w-ipt-number-3-digit: 60px;
|
|
$w-ipt-number-4-digit: 80px;
|
|
|
|
$w-scroll-body: 15px;
|
|
// endregion
|
|
|
|
// region Heights
|
|
$h-ipt-xs: 22px;
|
|
// endregion
|
|
|
|
// region Fonts
|
|
$font-line-height: 1.4286;
|
|
// endregion
|
|
|
|
@mixin mix-shadow-1 () {
|
|
box-shadow: 0 6px 12px $rgb-shadow-grey;
|
|
}
|
|
|
|
@mixin mix-shadow-1--dark () {
|
|
box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
|
|
}
|
|
|
|
@mixin mix-shadow-2 () {
|
|
box-shadow: 0 3px 6px $rgb-shadow-grey;
|
|
}
|
|
|
|
@mixin mix-shadow-active {
|
|
box-shadow: 0 0 2px 0 #000b;
|
|
}
|
|
|
|
@mixin mix-shadow-active--night {
|
|
box-shadow: 0 0 3px 0 #fffb;
|
|
}
|
|
|
|
@mixin mix-row-glow-active {
|
|
box-shadow: inset 0 0 0 5000px rgb(0 107 196 / 30%);
|
|
}
|
|
|
|
@mixin mix-row-glow-active--alt {
|
|
box-shadow: inset 0 0 0 5000px rgb(148 148 148 / 20%);
|
|
}
|
|
|
|
@mixin mix-overflow-dots {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin mix-vr {
|
|
width: 1px;
|
|
height: 100%;
|
|
border-left: 1px solid $rgb-border-grey;
|
|
}
|
|
|
|
@mixin mix-is-print {
|
|
@media print {
|
|
@content;
|
|
}
|
|
|
|
@at-root html.is-faux-print #{&} {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
/* *** */
|
|
|
|
@mixin mix-font-regular {
|
|
font-family: Arial, sans-serif;
|
|
font-variant: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
$width-screen-xxs: 320px;
|
|
$width-screen-xs: 480px;
|
|
$width-screen-sm: 768px;
|
|
$width-screen-md: 991px;
|
|
$width-screen-lg: 1200px;
|
|
$width-screen-hg: 1600px;
|
|
|
|
// region linked titles
|
|
%linked-titles-base {
|
|
.rd__h--0 .entry-title-inner:hover::before {
|
|
font-size: 50%;
|
|
}
|
|
|
|
.rd__h--1 .entry-title-inner:hover::before {
|
|
font-size: 55%;
|
|
}
|
|
|
|
.rd__h--2 .entry-title-inner:hover::before {
|
|
font-size: 60%;
|
|
}
|
|
}
|
|
|
|
%linked-titles-base-inner {
|
|
cursor: copy;
|
|
|
|
&:hover::before {
|
|
content: " 🔗";
|
|
color: rgb(0 0 0 / 20%);
|
|
position: relative;
|
|
float: left;
|
|
width: 14px;
|
|
height: 14px;
|
|
right: 20px;
|
|
margin-right: -30px;
|
|
font-size: 85%;
|
|
}
|
|
}
|
|
// endregion
|
|
|
|
// region filters
|
|
$fltr-stripe: 11px;
|
|
$fltr-2stripe: 22px;
|
|
// endregion
|
|
|
|
// region Shared UI
|
|
@mixin mix-cb-custom {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
border: 1px solid $rgb-border-grey;
|
|
border-radius: 4px;
|
|
outline: none;
|
|
user-select: none;
|
|
|
|
&:active {
|
|
@include mix-shadow-active;
|
|
}
|
|
|
|
&.active {
|
|
background: $rgb-cb-grey;
|
|
border-color: color.adjust($rgb-cb-grey, $lightness: 15%);
|
|
|
|
&.disabled {
|
|
background-color: color.adjust($rgb-cb-grey, $lightness: 25%);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: default;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@mixin mix-cb-custom--night {
|
|
background: $rgb-bg--night;
|
|
border-color: $rgb-border-grey--night;
|
|
|
|
&:active {
|
|
@include mix-shadow-active--night;
|
|
}
|
|
|
|
&.active {
|
|
background: $rgb-border-grey--night;
|
|
border-color: color.adjust($rgb-border-grey--night, $lightness: 10%);
|
|
|
|
&.disabled {
|
|
background-color: color.adjust($rgb-border-grey--night, $lightness: 20%);
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
// endregion
|