Cameron/5etools-mirror-2.github.io
1
0
Fork 0
mirror of https://github.com/Kornstalx/5etools-mirror-2.github.io.git synced 2026-01-14 05:47:50 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

v1.206.1

Browse Source
This commit is contained in:
TheGiddyLimit
2024-05-06 22:24:37 +01:00
parent 99cb60d804
commit 9c8ae15ff7
113 changed files with 1022 additions and 852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
scss/bestiary.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.mon__ {
&name--token .stats-source {
@@ -134,9 +135,9 @@ img.token {
vars.$rgb-bg-orange;
}
.night-mode {
.ve-night-mode {
#pagecontent {
background: vars.$rgb-bg--night !important;
background: vars-night.$rgb-bg--night !important;
}
}
// endregion
@@ -171,8 +172,8 @@ img.token {
}
}
.night-mode [data-proficiency-dice-mode="dice"] .rd__dc--rollable {
color: vars.$rgb-link-blue--night;
.ve-night-mode [data-proficiency-dice-mode="dice"] .rd__dc--rollable {
color: vars-night.$rgb-link-blue--night;
}
// endregion

2
scss/bootstrap.scss vendored
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
html {
font-family: sans-serif;

2
scss/changelog.scss
View File

@@ -1,4 +1,4 @@
.night-mode #pagecontent {
.ve-night-mode #pagecontent {
background: #222;
border-top: 1px solid #555555a0;
}

190
scss/classes.scss
View File

@@ -1,7 +1,9 @@
@use "sass:color";
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
@use "includes/classes-table";
@use "includes/classes-table-night";
// region class
.cls__ {
@@ -274,7 +276,7 @@
// endregion
}
.night-mode .cls__ {
.ve-night-mode .cls__ {
&btn-toggle-sidebar {
color: #bbb;
}
@@ -283,7 +285,7 @@
&btn-cf {
&--active {
color: vars.$rgb-off-black;
background: vars.$rgb-name-red--night;
background: vars-night.$rgb-name-red--night;
&:active,
&:focus,
@@ -291,7 +293,7 @@
&:active:focus,
&:active:hover {
color: vars.$rgb-off-black;
background: color.adjust(vars.$rgb-name-red--night, $lightness: - vars.$pct-darken-active);
background: color.adjust(vars-night.$rgb-name-red--night, $lightness: - vars.$pct-darken-active);
}
}
}
@@ -303,8 +305,8 @@
&--active-fresh {
color: #fff;
background: vars.$rgb-subclass--night;
border-color: color.adjust(vars.$rgb-subclass--night, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-subclass--night;
border-color: color.adjust(vars-night.$rgb-subclass--night, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -312,15 +314,15 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-subclass--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-subclass--night, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-subclass--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-subclass--night, $lightness: - vars.$pct-darken-border--active);
}
}
&--active-reprinted {
color: #fff;
background: vars.$rgb-subclass--night-stale;
border-color: color.adjust(vars.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-subclass--night-stale;
border-color: color.adjust(vars-night.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -328,15 +330,15 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-border--active);
}
}
&--active-spicy {
color: #fff;
background: vars.$rgb-subclass-ua--night;
border-color: color.adjust(vars.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-subclass-ua--night;
border-color: color.adjust(vars-night.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -344,15 +346,15 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-border--active);
}
}
&--active-stale {
color: #fff;
background: vars.$rgb-subclass-ua--night-stale;
border-color: color.adjust(vars.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-subclass-ua--night-stale;
border-color: color.adjust(vars-night.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -360,15 +362,15 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-border--active);
}
}
&--active-brew {
color: #fff;
background: vars.$rgb-class-brew--night;
border-color: color.adjust(vars.$rgb-class-brew--night, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-class-brew--night;
border-color: color.adjust(vars-night.$rgb-class-brew--night, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -376,15 +378,15 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-class-brew--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-class-brew--night, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-class-brew--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-class-brew--night, $lightness: - vars.$pct-darken-border--active);
}
}
&--active-rebrewed {
color: #fff;
background: vars.$rgb-class-variant-brew--night;
border-color: color.adjust(vars.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-border);
background: vars-night.$rgb-class-variant-brew--night;
border-color: color.adjust(vars-night.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-border);
&:active,
&:focus,
@@ -392,8 +394,8 @@
&:active:focus,
&:active:hover {
color: #fff;
background: color.adjust(vars.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-border--active);
background: color.adjust(vars-night.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-active);
border-color: color.adjust(vars-night.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-border--active);
}
}
}
@@ -405,8 +407,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-variant--night;
border-bottom-color: vars.$rgb-class-variant--night;
color: vars-night.$rgb-class-variant--night;
border-bottom-color: vars-night.$rgb-class-variant--night;
}
}
@@ -414,8 +416,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-ua--night;
border-bottom-color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
border-bottom-color: vars-night.$rgb-class-ua--night;
}
}
@@ -423,8 +425,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-subclass--night-stale;
border-bottom-color: vars.$rgb-subclass--night-stale;
color: vars-night.$rgb-subclass--night-stale;
border-bottom-color: vars-night.$rgb-subclass--night-stale;
}
}
@@ -432,8 +434,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-subclass-ua--night-stale;
border-bottom-color: vars.$rgb-subclass-ua--night-stale;
color: vars-night.$rgb-subclass-ua--night-stale;
border-bottom-color: vars-night.$rgb-subclass-ua--night-stale;
}
}
@@ -441,8 +443,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-subclass--night;
border-bottom-color: vars.$rgb-subclass--night;
color: vars-night.$rgb-subclass--night;
border-bottom-color: vars-night.$rgb-subclass--night;
}
}
@@ -450,8 +452,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-subclass-ua--night;
border-bottom-color: vars.$rgb-subclass-ua--night;
color: vars-night.$rgb-subclass-ua--night;
border-bottom-color: vars-night.$rgb-subclass-ua--night;
}
}
@@ -459,8 +461,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-brew--night;
border-bottom-color: vars.$rgb-class-brew--night;
color: vars-night.$rgb-class-brew--night;
border-bottom-color: vars-night.$rgb-class-brew--night;
}
}
@@ -468,8 +470,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-variant-brew--night;
border-bottom-color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
border-bottom-color: vars-night.$rgb-class-variant-brew--night;
}
}
@@ -477,8 +479,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-variant-brew--night;
border-bottom-color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
border-bottom-color: vars-night.$rgb-class-variant-brew--night;
}
}
@@ -486,8 +488,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-variant--night;
border-bottom-color: vars.$rgb-class-variant--night;
color: vars-night.$rgb-class-variant--night;
border-bottom-color: vars-night.$rgb-class-variant--night;
}
}
@@ -495,8 +497,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-ua--night;
border-bottom-color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
border-bottom-color: vars-night.$rgb-class-ua--night;
}
}
@@ -504,8 +506,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-variant-brew--night;
border-bottom-color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
border-bottom-color: vars-night.$rgb-class-variant-brew--night;
}
}
@@ -513,8 +515,8 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-ua--night;
border-bottom-color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
border-bottom-color: vars-night.$rgb-class-ua--night;
}
}
@@ -522,40 +524,14 @@
.rd__h--0,
.rd__h--1,
.rd__h--2 {
color: vars.$rgb-class-brew--night;
border-bottom-color: vars.$rgb-class-brew--night;
color: vars-night.$rgb-class-brew--night;
border-bottom-color: vars-night.$rgb-class-brew--night;
}
}
// endregion
}
// endregion
// region class table
.night-mode {
.cls-tbl {
background: vars.$rgb-bg--night;
> tbody > tr > th {
color: vars.$rgb-font--night;
}
&__ {
&disp-name {
color: vars.$rgb-font--night;
}
&col-group::after {
border-color: vars.$rgb-border-grey--night;
}
&stripe-odd:nth-child(odd) {
background: vars.$rgb-stripe-grey;
}
}
}
}
// endregion
// region sidebar
.cls-side__ {
&name {
@@ -586,10 +562,10 @@
}
}
.night-mode {
.ve-night-mode {
.cls-side__ {
&btn-toggle {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
}
@@ -637,9 +613,9 @@
}
}
.night-mode .cls-main__ {
.ve-night-mode .cls-main__ {
&msg-no-content {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
}
}
// endregion
@@ -712,18 +688,18 @@
// endregion
}
.night-mode .cls-bkmv__ {
.ve-night-mode .cls-bkmv__ {
&wrp-tabs {
background-color: #222;
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&btn-tab {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&wrp-level {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
}
// endregion
@@ -870,18 +846,18 @@
}
}
.night-mode .cls-nav__ {
.ve-night-mode .cls-nav__ {
&head {
color: #bbbbbb40;
&--active,
&:hover {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
&item {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
&:hover {
background: vars.$rgb-off-black;
@@ -894,31 +870,31 @@
// region Header coloring
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
&--feature-variant-subclass {
color: vars.$rgb-class-variant--night;
color: vars-night.$rgb-class-variant--night;
}
&--feature-variant-ua-subclass {
color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
}
&--feature-subclass-reprint {
color: vars.$rgb-subclass--night-stale;
color: vars-night.$rgb-subclass--night-stale;
}
&--feature-ua-subclass-reprint {
color: vars.$rgb-subclass-ua--night-stale;
color: vars-night.$rgb-subclass-ua--night-stale;
}
&--feature-brew-subclass-reprint {
color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
}
&--feature-subclass {
color: vars.$rgb-subclass--night;
color: vars-night.$rgb-subclass--night;
}
&--feature-ua-subclass {
color: vars.$rgb-subclass-ua--night;
color: vars-night.$rgb-subclass-ua--night;
}
&--feature-ua-subclass-reprint {
@@ -926,7 +902,7 @@
}
&--feature-brew-subclass {
color: vars.$rgb-class-brew--night;
color: vars-night.$rgb-class-brew--night;
}
&--feature-brew-subclass-reprint {
@@ -934,27 +910,27 @@
}
&--feature-variant-brew-subclass {
color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
}
&--feature-variant {
color: vars.$rgb-class-variant--night;
color: vars-night.$rgb-class-variant--night;
}
&--feature-variant-ua {
color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
}
&--feature-variant-brew {
color: vars.$rgb-class-variant-brew--night;
color: vars-night.$rgb-class-variant-brew--night;
}
&--feature-ua {
color: vars.$rgb-class-ua--night;
color: vars-night.$rgb-class-ua--night;
}
&--feature-brew {
color: vars.$rgb-class-brew--night;
color: vars-night.$rgb-class-brew--night;
}
// endregion
}

9
scss/converter.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.inputArea,
.outputArea {
@@ -40,11 +41,11 @@
}
}
.night-mode {
.ve-night-mode {
.conv__ {
&disp-message {
background-color: vars.$rgb-bg--alt-night;
border-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-bg--alt-night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}

2
scss/crcalculator.scss
View File

@@ -54,6 +54,6 @@
background: #d3d3d3;
}
.night-mode .crc__mon_feature:nth-child(even) {
.ve-night-mode .crc__mon_feature:nth-child(even) {
background: rgb(0 0 0 / 31%);
}

15
scss/decks.scss
View File

@@ -1,12 +1,13 @@
@use "sass:color";
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
:root {
--rgb-card-glint--edge: #d5592e;
}
:root.night-mode {
:root.ve-night-mode {
--rgb-card-glint--edge: #ffd21f;
}
@@ -347,12 +348,12 @@
}
}
.night-mode .decks {
.ve-night-mode .decks {
&__ {
&wrp-card-rows {
&--list {
.decks__wrp-row {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}
@@ -360,13 +361,13 @@
&-draw__ {
&wrp-card {
background-color: vars.$rgb-name-red--night;
box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red--night, $alpha: - 0.7);
background-color: vars-night.$rgb-name-red--night;
box-shadow: 0 0 30px 10px color.adjust(vars-night.$rgb-name-red--night, $alpha: - 0.7);
color: rgb(255 255 255 / 53%);
}
&wrp-desc {
border-color: vars.$rgb-name-red--night;
border-color: vars-night.$rgb-name-red--night;
background-color: #574930;
box-shadow: 0 0 10px 0 #000;
}

27
scss/dmscreen.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
@use "includes/dmscreen-book-viewer";
@use "includes/dmscreen-calender";
@@ -199,9 +200,9 @@ label {
background: #fff;
}
.night-mode {
.ve-night-mode {
.content-tab-bar {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
@@ -259,9 +260,9 @@ label {
background: #f0f0f0;
}
.night-mode {
.ve-night-mode {
.panel-content-wrapper-inner::-webkit-scrollbar-track {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}
@@ -354,7 +355,7 @@ label {
border: 1px solid vars.$rgb-border-grey;
}
.night-mode {
.ve-night-mode {
.panel-control-move--bg {
background: #777a;
border-color: #aaa;
@@ -616,13 +617,13 @@ body.is-fullscreen .sidemenu__hotzone {
display: none !important;
}
.night-mode {
.ve-night-mode {
.btn-panel-add {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
.underline-tabs {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
.panel-history-control-middle {
@@ -658,18 +659,18 @@ body.is-fullscreen .sidemenu__hotzone {
}
.panel-content-wrapper-inner {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.panel-addmenu-tab-head[active="true"] {
background-color: vars.$rgb-btn-default-active--night !important;
background-color: vars-night.$rgb-btn-default-active--night !important;
}
.panel-content-wrapper-inner td div.border {
background-color: vars.$rgb-name-red--night;
background-color: vars-night.$rgb-name-red--night;
}
.dm__panel-bg {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}

7
scss/includes/bootstrap-custom.scss vendored
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
:root {
--safe-area-inset-top: 0;
@@ -353,13 +354,13 @@ body::-webkit-scrollbar {
}
}
.night-mode .input-group {
.ve-night-mode .input-group {
> input.form-control,
> label,
> button,
> a.btn {
&:last-child {
border-right-color: vars.$rgb-border-grey--night;
border-right-color: vars-night.$rgb-border-grey--night;
}
}
}

26
scss/includes/classes-table-night.scss Normal file
View File

@@ -0,0 +1,26 @@
@use "../vars/vars";
@use "../vars/vars-night";
.ve-night-mode {
.cls-tbl {
background: vars-night.$rgb-bg--night;
> tbody > tr > th {
color: vars-night.$rgb-font--night;
}
&__ {
&disp-name {
color: vars-night.$rgb-font--night;
}
&col-group::after {
border-color: vars-night.$rgb-border-grey--night;
}
&stripe-odd:nth-child(odd) {
background: vars.$rgb-stripe-grey;
}
}
}
}

2
scss/includes/classes-table.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.cls-tbl {
font-size: 0.8em;

7
scss/includes/dmscreen-book-viewer.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-book__ {
&wrp-content {
@@ -20,8 +21,8 @@
}
}
.night-mode .dm-book__ {
.ve-night-mode .dm-book__ {
&wrp-controls {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}

17
scss/includes/dmscreen-calender.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-time__ {
&btn-time {
@@ -82,7 +83,7 @@
}
&disp-calendar-day--active {
background: vars.$rgb-stripe-grey--night;
background: vars-night.$rgb-stripe-grey--night;
}
&disp-day-entry {
@@ -242,13 +243,13 @@
}
}
.night-mode .dm-time__ {
.ve-night-mode .dm-time__ {
&bar-clock {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&disp-calendar-day {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&disp-day-entry--event,
@@ -266,15 +267,15 @@
}
&wrp-event-entries {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&bar-entry {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&cvs-moon {
border: 1px solid vars.$rgb-border-grey--night;
border: 1px solid vars-night.$rgb-border-grey--night;
}
&calendar-ipt-date {

7
scss/includes/dmscreen-coin-converter.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-money {
width: 100%;
@@ -71,10 +72,10 @@
}
}
.night-mode .dm-money {
.ve-night-mode .dm-money {
&__ {
&ctrl {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}

4
scss/includes/dmscreen-counter.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.dm-cnt__ {
&ipt {
@@ -25,7 +25,7 @@
}
}
.night-mode .dm-cnt__ {
.ve-night-mode .dm-cnt__ {
&ipt {
background: transparent;
}

13
scss/includes/dmscreen-initiative-tracker.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-init {
display: flex;
@@ -206,17 +207,17 @@
}
}
.night-mode {
.ve-night-mode {
.dm-init__wrp-header {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
.dm-init__wrp-controls {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
.dm-init__wrp-creature {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
.dm-init__row.dm-init__row-active input,
@@ -226,6 +227,6 @@
}
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}

11
scss/includes/dmscreen-map-viewer.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-map__ {
&picker-wrp-img {
@@ -33,13 +34,13 @@
}
}
.night-mode .dm-map__ {
.ve-night-mode .dm-map__ {
&picker-wrp-img {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&picker-disp-name {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
}

7
scss/includes/dmscreen-panels-empty.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.dm-blank__ {
&panel {
@@ -6,8 +7,8 @@
}
}
.night-mode .dm-blank__ {
.ve-night-mode .dm-blank__ {
&panel {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}

2
scss/includes/dmscreen-unit-converter.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.dm-unitconv {
width: 100%;

6
scss/includes/encounterbuilder-night.scss
View File

@@ -1,7 +1,7 @@
@use "vars";
@use "../vars/vars-night";
.night-mode .best-ecgen__ {
.ve-night-mode .best-ecgen__ {
&wrp {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}

2
scss/includes/encounterbuilder.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.ecgen {
&__ {

15
scss/includes/expose-vars.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
// region Expose variables for homebrew
:root {
@@ -10,11 +11,11 @@
--rgb-border--statblock: #{vars.$rgb-border-yellow--statblock};
}
:root.night-mode {
--rgb-font: #{vars.$rgb-font--night};
--rgb-name: #{vars.$rgb-name-red--night};
--rgb-bg: #{vars.$rgb-bg--night};
--rgb-bg--alt: #{vars.$rgb-bg--alt-night};
--rgb-border--statblock: #{vars.$rgb-border-grey--statblock-night};
:root.ve-night-mode {
--rgb-font: #{vars-night.$rgb-font--night};
--rgb-name: #{vars-night.$rgb-name-red--night};
--rgb-bg: #{vars-night.$rgb-bg--night};
--rgb-bg--alt: #{vars-night.$rgb-bg--alt-night};
--rgb-border--statblock: #{vars-night.$rgb-border-grey--statblock-night};
}
// endregion

33
scss/includes/filter-night.scss
View File

@@ -1,15 +1,16 @@
@use "sass:color";
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.night-mode .fltr {
$flt-ignore: vars.$rgb-bg--night;
.ve-night-mode .fltr {
$flt-ignore: vars-night.$rgb-bg--night;
$flt-ignore--hover: #323232;
&__ {
&btn_nest {
background: $flt-ignore;
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
&:hover {
background: $flt-ignore--hover;
@@ -23,7 +24,7 @@
}
span {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}
@@ -43,7 +44,7 @@
}
span {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}
@@ -65,20 +66,20 @@
}
&dropdown-divider {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
@media screen and (width <= #{vars.$width-screen-sm}) {
box-shadow: inset 0 0 2px 2px vars.$rgb-off-black;
background: vars.$rgb-border-grey--night;
background: vars-night.$rgb-border-grey--night;
}
}
&dropdown-divider--sub {
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
&pill {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
&[state="ignore"] {
background: $flt-ignore;
@@ -107,8 +108,8 @@
}
&mini-view {
border-color: vars.$rgb-border-grey--night;
background: linear-gradient(to top, vars.$rgb-border-grey--night, #343434 1px);
border-color: vars-night.$rgb-border-grey--night;
background: linear-gradient(to top, vars-night.$rgb-border-grey--night, #343434 1px);
}
&h-btn-logic--blue {
@@ -132,13 +133,13 @@
&wrp-row {
&:focus,
&:hover {
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
}
}
&wrp-values {
background-color: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
@@ -150,7 +151,7 @@
&-cls__ {
&tgl {
@include vars.mix-cb-custom--night;
@include vars-night.mix-cb-custom--night;
}
}
}

2
scss/includes/filter.scss
View File

@@ -1,6 +1,6 @@
@use "sass:color";
@use "vars";
@use "../vars/vars";
@media screen and (width <= #{vars.$width-screen-md}) {
.ve-dropdown-menu-filter {

21
scss/includes/hover-night.scss
View File

@@ -1,5 +1,20 @@
@use "vars";
@use "../vars/vars-night";
.night-mode .hwin {
background: vars.$rgb-bg--night;
.ve-night-mode {
.hwin {
background: vars-night.$rgb-bg--night;
}
.hwin table.summary-noback th,
.hwin table.summary th {
color: vars-night.$rgb-font--night;
}
.hwin .hoverborder .window-title {
color: vars-night.$rgb-font--night;
}
.hwin td div.border {
background-color: vars-night.$rgb-name-red--night;
}
}

2
scss/includes/hover.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
@keyframes kf-fade-in {
from {

2
scss/includes/list.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.lst__ {
&wrp-search-glass {

8
scss/includes/lootgen-night.scss
View File

@@ -1,8 +1,8 @@
@use "vars";
@use "../vars/vars-night";
.night-mode .lootg__ {
.ve-night-mode .lootg__ {
&wrp-output {
background-color: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
}

2
scss/includes/lootgen.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.lootg__ {
&wrp-output {

27
scss/includes/nav.scss
View File

@@ -1,6 +1,7 @@
@use "sass:color";
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
// region Old
.nav {
@@ -16,21 +17,21 @@
border: 1px solid vars.$rgb-border-grey;
}
.night-mode .nav > li > a {
border-color: vars.$rgb-border-grey--night;
.ve-night-mode .nav > li > a {
border-color: vars-night.$rgb-border-grey--night;
}
}
.night-mode {
.ve-night-mode {
.nav > li:not(.active) > a {
color: vars.$rgb-font--night;
background-color: vars.$rgb-bg--night;
border: 1px solid vars.$rgb-border-grey--trans-night;
color: vars-night.$rgb-font--night;
background-color: vars-night.$rgb-bg--night;
border: 1px solid vars-night.$rgb-border-grey--trans-night;
border-top: 0;
&:focus,
&:hover {
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
color: #fff;
}
}
@@ -45,7 +46,7 @@
.nav li.open > a,
.nav li.open > a:focus,
.nav li.open > a:hover {
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
border-left: 1px solid vars.$rgb-link-blue;
border-right: 1px solid vars.$rgb-link-blue;
border-color: vars.$rgb-link-blue;
@@ -139,12 +140,12 @@
}
}
.night-mode .nav2 {
.ve-night-mode .nav2 {
&-accord__ {
&head {
&:focus,
&:hover {
background-color: vars.$rgb-bg--alt-night;
background-color: vars-night.$rgb-bg--alt-night;
color: #fff;
}
@@ -159,11 +160,11 @@
}
&lnk-item {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
&:focus,
&:hover {
background-color: vars.$rgb-bg--alt-night;
background-color: vars-night.$rgb-bg--alt-night;
color: #fff;
}

36
scss/includes/render-night.scss
View File

@@ -1,27 +1,27 @@
@use "vars";
@use "../vars/vars-night";
.night-mode .rd {
.ve-night-mode .rd {
&__ {
&h--0,
&h--1,
&h--2 {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
}
&h--1 {
border-bottom-color: vars.$rgb-name-red--night;
border-bottom-color: vars-night.$rgb-name-red--night;
}
&h--4 {
color: vars.$rgb-name-alt--night;
color: vars-night.$rgb-name-alt--night;
}
&h--3 {
color: vars.$rgb-name-alt--night;
color: vars-night.$rgb-name-alt--night;
}
&-image-title-inner {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&b-inset {
@@ -33,7 +33,7 @@
}
&b-data {
border-color: vars.$rgb-border-grey--statblock-night;
border-color: vars-night.$rgb-border-grey--statblock-night;
}
&b-flow {
@@ -45,46 +45,46 @@
}
&stats-name-page {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
&highlight {
background-color: vars.$rgb-bg-highlight--night;
color: vars.$rgb-bg--night;
background-color: vars-night.$rgb-bg-highlight--night;
color: vars-night.$rgb-bg--night;
}
}
&-item__ {
&type-rarity-attunement {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
&-spell__ {
&level-school-ritual {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
&-ability-icon {
&__ {
&fill-primary {
fill: vars.$rgb-font--night;
fill: vars-night.$rgb-font--night;
}
&fill-bg {
fill: vars.$rgb-bg--night;
fill: vars-night.$rgb-bg--night;
}
&stroke-bg {
stroke: vars.$rgb-bg--night;
stroke: vars-night.$rgb-bg--night;
}
}
}
&-homebrew__ {
&b {
background-color: vars.$rgb-bg-homebrew--night;
background-color: vars-night.$rgb-bg-homebrew--night;
}
&disp-old-content {
@@ -92,7 +92,7 @@
}
&disp-inline {
background-color: vars.$rgb-bg-homebrew--night;
background-color: vars-night.$rgb-bg-homebrew--night;
}
}
}

6
scss/includes/render.scss
View File

@@ -2,7 +2,7 @@
Renderer
*/
@use "vars";
@use "../vars/vars";
$rgb-inset-border: #656565;
@@ -228,6 +228,10 @@ $rgb-inset-border: #656565;
padding: 0;
list-style: none;
> .rd__list-name {
margin-left: 0;
}
> .rd__li {
margin-bottom: var(--h-mb-li);
text-indent: -1.1em;

51
scss/includes/source-night.scss
View File

@@ -1,4 +1,5 @@
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
@mixin mix-source-color ($rgb) {
color: $rgb !important;
@@ -6,16 +7,58 @@
text-decoration-color: $rgb !important;
}
.night-mode .source {
$rgb-source-PHB: vars.$rgb-subclass--night;
.ve-night-mode .source {
$rgb-source-category-site: #de000a;
$rgb-source-category-extras: #bb6468;
$rgb-source-category-prerelease: vars-night.$rgb-subclass-ua--night;
$rgb-source-category-prerelease--local: #60c52f;
$rgb-source-category-homebrew: vars-night.$rgb-class-brew--night;
$rgb-source-category-homebrew--local: #514bff;
$rgb-source-PHB: vars-night.$rgb-subclass--night;
$rgb-source-DMG: #ba1eba;
$rgb-source-SADS: #4f63f5;
$rgb-source-PSA: #eec276;
// region Categories
&-category- {
&site {
@include mix-source-color($rgb-source-category-site);
}
&extras {
@include mix-source-color($rgb-source-category-extras);
}
&homebrew {
@include mix-source-color($rgb-source-category-homebrew);
&--local {
@include mix-source-color($rgb-source-category-homebrew--local);
}
}
&spicy {
@include mix-source-color($rgb-source-category-prerelease);
&--local {
@include mix-source-color($rgb-source-category-prerelease--local);
}
}
}
// endregion
&__ {
&PHB {
@include mix-source-color($rgb-source-PHB);
}
&DMG {
@include mix-source-color($rgb-source-DMG);
}
&SADS {
@include mix-source-color($rgb-source-SADS);
}
@@ -26,7 +69,7 @@
}
}
.night-mode .ve-source-marker {
.ve-night-mode .ve-source-marker {
&--partnered {
color: #27ac8c;
}

2
scss/includes/source.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
@mixin mix-source-color ($rgb) {
color: $rgb !important;

10
scss/includes/statgen-night.scss
View File

@@ -1,6 +1,6 @@
@use "vars";
@use "../vars/vars-night";
.night-mode .statgen .statgen {
.ve-night-mode .statgen .statgen {
&-shared__ {
&ipt {
&[readonly] {
@@ -11,7 +11,7 @@
&-rolled__ {
&wrp-results {
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
}
@@ -25,12 +25,12 @@
&-asi__ {
&row {
border-bottom: 1px solid vars.$rgb-border-grey--trans-night;
border-bottom: 1px solid vars-night.$rgb-border-grey--trans-night;
}
&cell {
&--top {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}

2
scss/includes/statgen.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
// (Class namespace to enable selectors in FVTT)
.statgen .statgen {

348
scss/includes/style.scss
View File

@@ -1,5 +1,7 @@
@use "sass:color";
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
.page__ {
&header {
@@ -137,9 +139,9 @@
}
}
.night-mode .page__ {
.ve-night-mode .page__ {
&wrp-download {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
&disp-download-progress-text {
@@ -311,8 +313,8 @@ input[type="checkbox"].sidemenu__row__label__cb {
margin-left: 7px;
}
.night-mode .sidemenu {
border-color: vars.$rgb-border-grey--night;
.ve-night-mode .sidemenu {
border-color: vars-night.$rgb-border-grey--night;
}
/* *** */
@@ -930,10 +932,10 @@ input[type="checkbox"].sidemenu__row__label__cb {
}
}
.night-mode .manbrew {
.ve-night-mode .manbrew {
&__filtertools {
.wrp-cb-all {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}
@@ -1087,9 +1089,9 @@ tr.text.compact > td p:last-child {
}
}
.night-mode .mon__ {
.ve-night-mode .mon__ {
&cr_slider_wrp {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
@@ -1316,13 +1318,13 @@ img.token:hover {
}
}
.night-mode .initp__ {
.ve-night-mode .initp__ {
&header {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&r {
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
&:hover {
background: #ffffff18;
@@ -1753,7 +1755,7 @@ header p.lead {
@include vars.mix-shadow-1;
}
.night-mode .night__ {
.ve-night-mode .night__ {
&shadow-big {
@include vars.mix-shadow-1;
}
@@ -1836,10 +1838,10 @@ header p.lead {
}
}
.night-mode .bkmv {
.ve-night-mode .bkmv {
&__ {
&wrp-item {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}
@@ -1947,14 +1949,14 @@ th.border {
}
}
.night-mode .bk__ {
.ve-night-mode .bk__ {
&contents-header {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&overlay-loading {
background: vars.$rgb-bg--night;
border-bottom-color: vars.$rgb-border-grey--statblock-night;
background: vars-night.$rgb-bg--night;
border-bottom-color: vars-night.$rgb-border-grey--statblock-night;
}
}
@@ -1990,13 +1992,13 @@ th.border {
}
}
.night-mode .bks__ {
.ve-night-mode .bks__ {
&wrp-bookshelf-item,
&wrp-bookshelf-item:hover {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
color: vars.$rgb-font--night;
text-decoration-color: vars.$rgb-font--night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
color: vars-night.$rgb-font--night;
text-decoration-color: vars-night.$rgb-font--night;
}
}
@@ -2148,29 +2150,29 @@ th.border {
}
}
.night-mode .toast {
.ve-night-mode .toast {
&--type-info {
color: #fff;
background-color: color.adjust(color.adjust(vars.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars.$rgb-alert-info-border-blue--night;
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars-night.$rgb-alert-info-border-blue--night;
}
&--type-danger {
color: #fff;
background-color: color.adjust(color.adjust(vars.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars.$rgb-alert-danger-border-red--night;
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars-night.$rgb-alert-danger-border-red--night;
}
&--type-warning {
color: #fff;
background-color: color.adjust(color.adjust(vars.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars.$rgb-alert-warning-border-orange--night;
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars-night.$rgb-alert-warning-border-orange--night;
}
&--type-success {
color: #fff;
background-color: color.adjust(color.adjust(vars.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars.$rgb-alert-success-border-green--night;
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
border-color: vars-night.$rgb-alert-success-border-green--night;
}
}
@@ -2207,7 +2209,7 @@ th.border {
}
}
.night-mode {
.ve-night-mode {
.cards__ {
&disp-btn-icon {
filter: initial;
@@ -2271,36 +2273,21 @@ th.border {
/* Day Mode End */
/* Night Mode */
.night-mode {
.ve-night-mode {
body {
color: vars.$rgb-font--night;
background: vars.$rgb-bg--night
color: vars-night.$rgb-font--night;
background: vars-night.$rgb-bg--night
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGBAMAAACDAP+3AAAAGFBMVEUfHx8eHh4dHR0bGxshISEiIiIlJSUjIyM9IpsJAAAFjUlEQVR4AT3UuZLcOBaF4QuI2XJxboIhF/eQFe1WovoBAAqccpkaZpc5+4yrXa8/RGpx/lrIXPjFCYjTp9z8REqF4VYNWB3Av3zQJ6b6xBwlKB/9kRkCjXVwGH3ziK5UcjFHVkmgY6osiBsGDFfseqq2ZbTz7E00qBDpzOxnD7ToABeros1vM6MX0rBQaG1ith1A/HJkvkHxsPGJ82dP8vVCyWmbyPTaAfGzg40bgIdrv2f3pBVPycUcufx+BSUUWDuCZi6zBqdM50ElKYPODqtLDjc31rBb9CZ59lbN/JScuMxHLUBcGiy6QRH9zpwgZGhRj8qSydPVgNNVgbWqYX3HbM9K2rqTnKVmsmwKWzc1ffEd20+Zq3Ji65kl6TSjALNvzmJt4Pi2f1etytGJmy5erLAgbNY4bjykC3YCLIS3nSZMKgwRsBarWgjdeVzIEDzpTkoOUArTF4WFXYHwxY585sT0nmTYMxmXfs8fzwswfnam8TMU49bvqSRnyRPnqlno4tVQQiH2A9Za8tNTfXQ0lxbSxUaZna0uLlj9Q0XzD96CpsOZUftolINKBWJpAOoAJC0T6QqZnOtfvcfJFcDrD4Cuy5Hng316XrqzJ204HynyHwWed6i+XGF40Uw2T7Lc71HyssngEOrgONfBY7wvW0UZdVAma5xmSNjRp3xkvKJkW6aSg7PK4K0+mbKqYB0WYBgWwxCXiS74zBCVlEFpYQDEwjcA1qccb5yO6ZL8ozt/h3wHSCdWzLuqxU2ZZ9ev9MvRMbMvV9BQgN0qrFjlkzPQanI9nuaGCokVK2LV1Y2egyY1aFQGxjM9I7RBBAgyGEJtpKHP0lUySSeWCpyKHMT2pmM/vyP55u2Rw5lcSeabAfgiG5TPDX3uP3QvcoSipJXQByUCjS4C8VXqxEEZOJxzmJoyogFNJBRsCJs2XmoWWrWFqTsnbwtSn43gNFTTob9/SEpaPJNhUBKDGoZGCMINxvBv8vuKbb//lg/sK0wfPgBica/QsSk5F3KK4Ui6Yw+uv4+DWEOFbhdPOnbY5PLFpzrZMhakeqomY0Vz0TO+elQGTWdCk1IYFAOaoZg0IJQhT+YreXF+yia+O1cgtGufjXxQw28f85RPXfd15zv13ABoD15kB7FKJ/7pbHKP6+9TgNgkVj68NeV8Tp24f7OOndCgJzR3RNJBPNFReCmstMVqvjjzBoeK4GOFoBN32CPxu+4TwwBDa4DJTe/OU9c9ku7EGyfOVxh+fw9g/AATxPqKTEXJKEdCIBkB4iBUlO6MjUrWi6M5Kz31YAqFsYaCeB0KJC5d1+foo3LQWSfRaDrwdAQrMEC27yDZXJf7TlOJ2Bczr1di3OWvZB6XrvvqPuWJPDk9dAHgm7LvuZJTEdKqO3J3XgostArEnvkqgUznx3PX7cSzz1FXZyvakTA4XVVMbCPFPK1cFj66S0WoqQI1XG2uoU7CMPquO2VaUDJFQMdVgXKD2bpz6ufzzxXbxszHQ9fGO/F7A998yBQG6cShE+P+Pk7t1FwfF1QHN1Eui1VapRxCdj8tCtI1bog1Fo011Sx9u3o6c9bufI6wAT26Av9xJ+WWpTKbbBPp3K/1LbC4Vuhv396RCbJw4untjxVPndj+dIB9dVD8z2dylZ+6vMeJwbYChHJkvHV2J3fdHsJPASeHhrXq6QheXu1nBhUr5u6ryT0I13BFKD01ViZ/n3oaziRG7c6Ayg7g1LPeztNdT36ueMqcN4XGv3finjfv+7I/kMJ4d046MUanOA1QtMH1kLlfFasm99NiutSw63yNDeH4zeL1Uu8XKHNfcThPSSNwchGMbgUETScwkCcK77pH2jsgrAssvVyB8FLJ7GrmwyD8eVqsHoY/FwIv9T7lPu9+Yf8/9+w4nS1ma78AAAAASUVORK5CYII=")
repeat scroll left top;
}
.bg-solid {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
/* generic UI */
.vr-0,
.vr-1,
.vr-2,
.vr-3,
.vr-4,
.vr-5 {
border-color: vars.$rgb-border-grey--night;
}
.vr-r {
border-right-color: vars.$rgb-border-grey--night !important;
}
/* *** */
.page__ {
&header {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
background: vars.$rgb-off-black;
}
@@ -2324,14 +2311,14 @@ th.border {
.page__nav-inner > li.active > a:hover {
background-color: vars.$rgb-off-black;
border-top: 0;
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
border-left-color: transparent;
border-right-color: transparent;
color: #d0d0d0;
}
.text-muted {
color: color.adjust(vars.$rgb-font--night, $lightness: - 15%) !important;
color: color.adjust(vars-night.$rgb-font--night, $lightness: - 15%) !important;
}
h1,
@@ -2340,65 +2327,41 @@ th.border {
h4,
h5,
h6 {
color: vars.$rgb-font--night;
}
.b-1p {
border-color: vars.$rgb-border-grey--night !important;
}
.bt-1p {
border-top-color: vars.$rgb-border-grey--night !important;
}
.br-1p {
border-right-color: vars.$rgb-border-grey--night !important;
}
.bb-1p {
border-bottom-color: vars.$rgb-border-grey--night !important;
&-trans {
border-bottom-color: vars.$rgb-border-grey--trans-night !important;
}
}
.bl-1p {
border-left-color: vars.$rgb-border-grey--night !important;
color: vars-night.$rgb-font--night;
}
pre {
color: vars.$rgb-font--night;
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
color: vars-night.$rgb-font--night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
hr {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
#legal-notice {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
color: #999;
}
a,
.roller {
color: vars.$rgb-link-blue--night;
color: vars-night.$rgb-link-blue--night;
}
.hwin__top-border-icon {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
&:hover {
color: color.adjust(vars.$rgb-font--night, $lightness: vars.$pct-darken-hover);
color: color.adjust(vars-night.$rgb-font--night, $lightness: vars.$pct-darken-hover);
}
}
.text-muted {
a,
.roller {
color: vars.$rgb-link-blue--muted-night;
color: vars-night.$rgb-link-blue--muted-night;
}
}
@@ -2414,25 +2377,25 @@ th.border {
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
background-color: vars.$rgb-form-control-bg--night;
color: vars.$rgb-font--night;
border-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-form-control-bg--night;
color: vars-night.$rgb-font--night;
border-color: vars-night.$rgb-border-grey--night;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: vars.$rgb-btn-primary-blue--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-btn-primary-blue--night;
color: vars-night.$rgb-font--night;
}
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
background-color: vars.$rgb-btn-danger-red--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-btn-danger-red--night;
color: vars-night.$rgb-font--night;
}
.btn-danger:hover {
@@ -2443,24 +2406,24 @@ th.border {
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
background-color: vars.$rgb-btn-warning-orange--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-btn-warning-orange--night;
color: vars-night.$rgb-font--night;
}
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
background-color: vars.$rgb-btn-info-blue--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-btn-info-blue--night;
color: vars-night.$rgb-font--night;
}
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
background-color: vars.$rgb-btn-success-green--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-btn-success-green--night;
color: vars-night.$rgb-font--night;
}
.btn-default.active {
@@ -2484,19 +2447,19 @@ th.border {
dialog.dialog-modal,
.ve-dropdown-menu {
background: vars.$rgb-bg--night;
color: vars.$rgb-font--night;
background: vars-night.$rgb-bg--night;
color: vars-night.$rgb-font--night;
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
}
.ve-dropdown-menu > li {
> a,
> span {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
&:focus,
&:hover {
background-color: vars.$rgb-bg--alt-night;
background-color: vars-night.$rgb-bg--alt-night;
color: #fff;
}
}
@@ -2505,7 +2468,7 @@ th.border {
> a,
> span {
color: #fff;
background-color: vars.$rgb-btn-danger-bg-red--night;
background-color: vars-night.$rgb-btn-danger-bg-red--night;
&:focus,
&:hover {
@@ -2537,22 +2500,22 @@ th.border {
}
.ve-dropdown-menu .divider {
background-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-border-grey--night;
}
select,
input {
background-color: vars.$rgb-bg--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-bg--night;
color: vars-night.$rgb-font--night;
}
select option {
color: vars.$rgb-font--night;
background: vars.$rgb-bg--night;
color: vars-night.$rgb-font--night;
background: vars-night.$rgb-bg--night;
}
.list .row {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
/* Bootstrap overrides */
@@ -2562,49 +2525,49 @@ th.border {
.alert-info {
color: #fff;
background-color: color.adjust(vars.$rgb-alert-info-blue--night, $alpha: - 0.5);
border-color: vars.$rgb-alert-info-border-blue--night;
background-color: color.adjust(vars-night.$rgb-alert-info-blue--night, $alpha: - 0.5);
border-color: vars-night.$rgb-alert-info-border-blue--night;
.alert-link {
color: vars.$rgb-alert-info-border-blue--night;
color: vars-night.$rgb-alert-info-border-blue--night;
}
}
.alert-danger {
color: #fff;
background-color: color.adjust(vars.$rgb-alert-danger-red--night, $alpha: - 0.5);
border-color: vars.$rgb-alert-danger-border-red--night;
background-color: color.adjust(vars-night.$rgb-alert-danger-red--night, $alpha: - 0.5);
border-color: vars-night.$rgb-alert-danger-border-red--night;
.alert-link {
color: vars.$rgb-alert-danger-border-red--night;
color: vars-night.$rgb-alert-danger-border-red--night;
}
}
.alert-warning {
color: #fff;
background-color: color.adjust(vars.$rgb-alert-warning-orange--night, $alpha: - 0.5);
border-color: vars.$rgb-alert-warning-border-orange--night;
background-color: color.adjust(vars-night.$rgb-alert-warning-orange--night, $alpha: - 0.5);
border-color: vars-night.$rgb-alert-warning-border-orange--night;
.alert-link {
color: vars.$rgb-alert-warning-border-orange--night;
color: vars-night.$rgb-alert-warning-border-orange--night;
}
}
.alert-success {
color: #fff;
background-color: color.adjust(vars.$rgb-alert-success-green--night, $alpha: - 0.5);
border-color: vars.$rgb-alert-success-border-green--night;
background-color: color.adjust(vars-night.$rgb-alert-success-green--night, $alpha: - 0.5);
border-color: vars-night.$rgb-alert-success-border-green--night;
.alert-link {
color: vars.$rgb-alert-success-border-green--night;
color: vars-night.$rgb-alert-success-border-green--night;
}
}
.input-group-addon,
.form-control {
background: vars.$rgb-form-control-bg--night;
color: vars.$rgb-font--night;
border-color: vars.$rgb-border-grey--night;
background: vars-night.$rgb-form-control-bg--night;
color: vars-night.$rgb-font--night;
border-color: vars-night.$rgb-border-grey--night;
}
.form-control[disabled] {
@@ -2648,20 +2611,20 @@ th.border {
&wrp-input {
&--scrolled {
.omni__input {
border-color: vars.$rgb-border-grey--night;
background-color: vars.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
background-color: vars-night.$rgb-bg--night;
color: transparent;
&:focus,
&:focus-within,
&:active,
&:hover {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
.omni__submit {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}
@@ -2677,7 +2640,7 @@ th.border {
}
&submit {
border-top-color: vars.$rgb-border-grey--night;
border-top-color: vars-night.$rgb-border-grey--night;
@media screen and (width > #{vars.$width-screen-md}) {
border-top-color: transparent;
@@ -2686,8 +2649,8 @@ th.border {
&.btn-default:active:focus,
&.btn-default:active:hover,
&.btn-default {
background-color: vars.$rgb-bg--night;
color: vars.$rgb-font--night;
background-color: vars-night.$rgb-bg--night;
color: vars-night.$rgb-font--night;
}
}
}
@@ -2695,7 +2658,7 @@ th.border {
#pointbuy {
input {
&[type="number"] {
border: 1px solid vars.$rgb-border-grey--night;
border: 1px solid vars-night.$rgb-border-grey--night;
outline-offset: 0;
outline: none;
}
@@ -2707,12 +2670,12 @@ th.border {
}
.stats {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.lst__ {
&row {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
&:hover {
background: vars.$rgb-off-black;
@@ -2724,11 +2687,11 @@ th.border {
}
&wrp-preview {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
&wrp-preview-inner {
border-color: vars.$rgb-border-grey--list-row-night;
border-color: vars-night.$rgb-border-grey--list-row-night;
}
&btn-toggle-expand {
@@ -2740,7 +2703,7 @@ th.border {
@media screen and (width > #{vars.$width-screen-hg}) {
#listcontainer.book-contents {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
border-right: 1px solid #404040;
}
}
@@ -2748,33 +2711,33 @@ th.border {
.bk__ {
&head-chapter--active,
&head-section--active {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
}
.bklist__ {
&wrp-rows-inner {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
&vr-contents {
border-color: vars.$rgb-border-grey--list-row-night;
border-color: vars-night.$rgb-border-grey--list-row-night;
}
}
.hwin .hoverborder,
th.border,
.stats--book th.border {
background: vars.$rgb-border-grey--statblock-night;
background: vars-night.$rgb-border-grey--statblock-night;
}
.hwin__wrp-table {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.wrp-stats-table {
border-top: 1px solid vars.$rgb-border-grey--statblock-night;
border-bottom: 1px solid vars.$rgb-border-grey--statblock-night;
border-top: 1px solid vars-night.$rgb-border-grey--statblock-night;
border-bottom: 1px solid vars-night.$rgb-border-grey--statblock-night;
}
.stats--book ::selection {
@@ -2783,11 +2746,11 @@ th.border {
}
tr.text td {
color: vars.$rgb-font--night !important;
color: vars-night.$rgb-font--night !important;
}
tr.text td {
color: vars.$rgb-font--night !important;
color: vars-night.$rgb-font--night !important;
}
.mon__ {
@@ -2796,25 +2759,18 @@ th.border {
background: rgb(255 255 255 / 15%);
&:hover {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
}
}
&token-footer {
color: #ddd;
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
}
tr.trait td,
tr.action td,
tr.reaction td,
tr.legendary td {
color: vars.$rgb-font--night !important;
}
.life__output {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.f-all-wrapper > input,
@@ -2840,39 +2796,24 @@ th.border {
}
.stats-name {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
}
.stats .divider div {
background-color: vars.$rgb-name-red--night;
background-color: vars-night.$rgb-name-red--night;
}
.stripe-odd-table > tbody > tr:nth-child(odd),
.stripe-even-table > tbody > tr:nth-child(even) {
background-color: vars.$rgb-stripe-grey--night;
}
#please-select-message.showing > td {
color: vars.$rgb-name-red--night;
}
#actions,
#reactions,
#legendaries,
#lairactions,
#regionaleffects {
td {
border-bottom-color: vars.$rgb-name-red--night;
color: vars.$rgb-name-red--night;
}
background-color: vars-night.$rgb-stripe-grey--night;
}
.mon__stat-header-underline {
border-bottom-color: vars.$rgb-name-red--night;
border-bottom-color: vars-night.$rgb-name-red--night;
}
.mon__sect-header-inner {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
}
.bkmv {
@@ -2880,11 +2821,11 @@ th.border {
}
.bkmv__spacer-name {
background-color: vars.$rgb-border-grey--statblock-night;
background-color: vars-night.$rgb-border-grey--statblock-night;
}
.lst--border {
border-color: vars.$rgb-border-grey--list-row-night;
border-color: vars-night.$rgb-border-grey--list-row-night;
}
.list-multi-selected .lst--border {
@@ -2893,16 +2834,12 @@ th.border {
.list-multi-selected.lst__row--sublist {
.lst--border {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
#rulescontent caption {
color: vars.$rgb-font--night;
}
tr.trait td {
color: vars.$rgb-font--night !important;
color: vars-night.$rgb-font--night !important;
}
::-webkit-scrollbar-thumb {
@@ -2911,19 +2848,10 @@ th.border {
/**** Search and filter bar ****/
.mon__cr_slider_wrp {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
color: #bbb;
}
.hwin table.summary-noback th,
.hwin table.summary th {
color: vars.$rgb-font--night;
}
.hwin .hoverborder .window-title {
color: vars.$rgb-font--night;
}
.rollbox {
background: #272727;
}
@@ -2954,25 +2882,21 @@ th.border {
border: 1px solid rgb(255 255 255 / 15%);
}
.hwin td div.border {
background-color: vars.$rgb-name-red--night;
}
.initial-message {
color: vars.$rgb-name-red--night;
color: vars-night.$rgb-name-red--night;
}
.panel-content-textarea {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.content-tab-bar {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.highlight {
color: vars.$rgb-bg--night;
background-color: vars.$rgb-bg-highlight--night;
color: vars-night.$rgb-bg--night;
background-color: vars-night.$rgb-bg-highlight--night;
}
/* *** */
@@ -2983,7 +2907,7 @@ th.border {
}
.sidemenu {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
.sidemenu__toggle {
@@ -2991,7 +2915,7 @@ th.border {
}
.sidemenu__burger {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
/* *** */
@@ -3002,7 +2926,7 @@ th.border {
/* *** */
}
.night-mode--alt {
.ve-night-mode--alt {
body {
background: #1c1c1c;
}
@@ -3096,7 +3020,7 @@ th.border {
}
}
.night-mode {
.ve-night-mode {
.cancer__ {
&wrp-leaderboard {
background: vars.$rgb-off-black;

153
scss/includes/ui-night.scss
View File

@@ -3,10 +3,11 @@ Shared UI components
*/
@use "sass:color";
@use "vars";
@use "../vars/vars";
@use "../vars/vars-night";
/* region Misc/Shared */
.night-mode .ui__ {
.ve-night-mode .ui__ {
&ipt-color {
&::-webkit-color-swatch {
border: 0;
@@ -16,16 +17,16 @@ Shared UI components
/* endregion */
/* region List */
.night-mode .ui-list__ {
.ve-night-mode .ui-list__ {
&wrp-preview {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
&btn-inline {
color: vars.$rgb-font--night;
color: vars-night.$rgb-font--night;
&:hover {
color: color.adjust(vars.$rgb-font--night, $lightness: 10%);
color: color.adjust(vars-night.$rgb-font--night, $lightness: 10%);
background: #ffffff30;
}
}
@@ -33,33 +34,33 @@ Shared UI components
/* endregion */
/* region Source overlay */
.night-mode .ui-source__ {
.ve-night-mode .ui-source__ {
&divider {
background: vars.$rgb-border-grey--night;
background: vars-night.$rgb-border-grey--night;
}
}
/* endregion */
/* region Modals */
.night-mode .ui-modal__ {
.ve-night-mode .ui-modal__ {
&header {
&--border {
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
}
&footer {
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
&overlay-blind {
background-color: vars.$rgb-bg--night;
background-color: vars-night.$rgb-bg--night;
}
&inner {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
border-color: vars.$rgb-border-grey--trans-night;
border-color: vars-night.$rgb-border-grey--trans-night;
&--mode-fullscreen {
box-shadow: none;
@@ -67,15 +68,15 @@ Shared UI components
}
&row--cb:hover {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
}
/* endregion */
/* region Search */
.night-mode .ui-search__ {
.ve-night-mode .ui-search__ {
&row {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
&:hover {
background: vars.$rgb-off-black;
@@ -83,151 +84,153 @@ Shared UI components
}
&ipt-search-sub-wrp {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
/* endregion */
/* region Tabs */
.night-mode .ui-tab__ {
.ve-night-mode .ui-tab__ {
&btn-tab-head {
&--active,
&--active:focus,
&--active:hover,
&--active:active {
background-color: vars.$rgb-btn-default-active--night;
background-color: vars-night.$rgb-btn-default-active--night;
}
}
&wrp-tab-body {
&--background {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--trans-night;
border-bottom-color: color.adjust(vars.$rgb-border-grey--trans-night, $lightness: - 15%);
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--trans-night;
border-bottom-color: color.adjust(vars-night.$rgb-border-grey--trans-night, $lightness: - 15%);
}
}
&wrp-tab-heads--border {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
border-width: 2px;
}
}
.night-mode .ui-tab-side__ {
.ve-night-mode .ui-tab-side__ {
&wrp-tab {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--trans-night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
}
/* endregion */
/* region Proficiency */
.night-mode .ui-prof__ {
.ve-night-mode .ui-prof__ {
&btn-cycle {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
&:active {
@include vars.mix-shadow-active--night;
@include vars-night.mix-shadow-active--night;
}
&[data-state="0"] {
background: vars.$rgb-bg--night;
background: vars-night.$rgb-bg--night;
}
&[data-state="1"] {
background: vars.$rgb-border-grey--night;
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
background: vars-night.$rgb-border-grey--night;
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
}
&[data-state="2"] {
background: vars.$rgb-border-grey--night;
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
background: vars-night.$rgb-border-grey--night;
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
&::before {
color: vars.$rgb-bg--night;
color: vars-night.$rgb-bg--night;
}
}
&[data-state="3"] {
background: repeating-linear-gradient(135deg, vars.$rgb-bg--night, vars.$rgb-bg--night 10px, vars.$rgb-border-grey--night 10px, vars.$rgb-border-grey--night 20px);
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
background: repeating-linear-gradient(135deg, vars-night.$rgb-bg--night, vars-night.$rgb-bg--night 10px, vars-night.$rgb-border-grey--night 10px, vars-night.$rgb-border-grey--night 20px);
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
}
}
}
/* endregion */
/* region Direction picker */
.night-mode .ui-dir__ {
.ve-night-mode .ui-dir__ {
&face {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
&arm {
background: vars.$rgb-font--night;
background: vars-night.$rgb-font--night;
box-shadow: none;
}
}
/* endregion */
/* region Hover tips */
.night-mode .ui-tip__ {
.ve-night-mode .ui-tip__ {
&child {
border-color: vars.$rgb-border-grey--night;
background: vars.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
}
}
/* endregion */
/* region Context menu */
.night-mode .ui-ctx {
.ve-night-mode .ui-ctx {
&__wrp {
background: vars.$rgb-bg--night;
border: 1px solid vars.$rgb-border-grey--trans-night;
border-top-color: vars.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
border: 1px solid vars-night.$rgb-border-grey--trans-night;
border-top-color: vars-night.$rgb-border-grey--night;
}
&__divider {
background: vars.$rgb-border-grey--night;
background: vars-night.$rgb-border-grey--night;
}
&__btn {
color: vars-night.$rgb-font--night;
&:hover {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
color: #fff;
}
&.disabled,
&.disabled:hover {
background: vars.$rgb-bg--night;
color: vars.$rgb-font--night;
background: vars-night.$rgb-bg--night;
color: vars-night.$rgb-font--night;
}
}
}
/* endregion */
/* region Picker */
.night-mode .ui-pick {
.ve-night-mode .ui-pick {
&__ {
&disp-text {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
}
}
/* endregion */
/* region "Copied" tooltip */
.night-mode .clp__ {
.ve-night-mode .clp__ {
&disp-copied {
background: radial-gradient(ellipse at center, vars.$rgb-bg--night 0%, vars.$rgb-bg--night 35%, transparent 75%, transparent 100%);
background: radial-gradient(ellipse at center, vars-night.$rgb-bg--night 0%, vars-night.$rgb-bg--night 35%, transparent 75%, transparent 100%);
}
}
/* endregion */
/* region Decorated inputs */
.night-mode .ui-ideco__ {
.ve-night-mode .ui-ideco__ {
&btn-ticker {
background: vars.$rgb-border-grey--night;
background: vars-night.$rgb-border-grey--night;
color: #fff;
&:hover,
@@ -239,14 +242,14 @@ Shared UI components
}
&:hover {
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
color: #fff;
}
&:active,
&:focus,
&:active:focus {
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
color: #fff;
}
}
@@ -254,62 +257,62 @@ Shared UI components
/* endregion */
/* region Select2 */
.night-mode .ui-sel2__ {
.ve-night-mode .ui-sel2__ {
&ipt-search {
background: transparent;
background: vars-night.$rgb-bg--night;
}
&wrp-options {
background-color: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--night;
background-color: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
}
&disp-option {
&.active,
&:focus,
&:hover {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
&:focus.active,
&:hover.active {
background: color.adjust(vars.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
background: color.adjust(vars-night.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
}
}
}
/* endregion */
/* region Range Slider */
.night-mode .ui-slidr {
.ve-night-mode .ui-slidr {
&__ {
&thumb {
background: vars.$rgb-border-grey--trans;
border-color: vars.$rgb-font--night;
border-color: vars-night.$rgb-font--night;
&--hover,
&:hover {
background: color.adjust(vars.$rgb-border-grey--trans, $lightness: 10%);
border-color: vars.$rgb-font--night;
border-color: vars-night.$rgb-font--night;
}
}
&track-outer {
border-color: vars.$rgb-border-grey--night;
border-color: vars-night.$rgb-border-grey--night;
}
&track-inner {
background: vars.$rgb-border-grey--trans-night;
background: vars-night.$rgb-border-grey--trans-night;
}
&disp-value {
&--visible {
border-color: vars.$rgb-border-grey--night;
background: vars.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
}
}
&pip {
background: vars.$rgb-font--night;
background: vars-night.$rgb-font--night;
}
}
}

5
scss/includes/ui.scss
View File

@@ -2,7 +2,8 @@
Shared UI components
*/
@use "sass:color";
@use "vars";
@use "../vars/vars";
/* region Misc/Shared */
.ui__ {
@@ -350,7 +351,6 @@ Shared UI components
.ui-tab__ {
&btn-tab-head {
display: inline-block;
padding: 2px 4px 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
@@ -752,7 +752,6 @@ Shared UI components
transition: opacity vars.$time-2-frames;
opacity: 0;
padding: 0;
width: 14px;
height: 10px;
border: 0;

12
scss/includes/util-5etools-night.scss
View File

@@ -1,23 +1,23 @@
@use "vars";
@use "../vars/vars-night";
.night-mode {
.ve-night-mode {
.stripe- {
&even {
&:nth-child(even) {
background: vars.$rgb-stripe-grey--night;
background: vars-night.$rgb-stripe-grey--night;
}
}
&odd {
&:nth-child(odd) {
background: vars.$rgb-stripe-grey--night;
background: vars-night.$rgb-stripe-grey--night;
}
}
&child- {
&even-first {
&:nth-child(even) > :first-child {
background: vars.$rgb-stripe-grey--night;
background: vars-night.$rgb-stripe-grey--night;
}
}
}
@@ -27,7 +27,7 @@
&__ {
&ele-hoverable {
&:hover {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
}
}

2
scss/includes/util-5etools.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.clickable {
&--link {

2
scss/includes/util-mobile.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
@mixin mix-mobile-styles ($width-screen) {
@media screen and (width > #{$width-screen}) {

2
scss/includes/util-print.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
@include vars.mix-is-print {
.no-print {

42
scss/includes/util-spacing-night.scss Normal file
View File

@@ -0,0 +1,42 @@
@use "../vars/vars-night";
.ve-night-mode {
.hr-0,
.hr-1,
.hr-2,
.hr-3,
.hr-4,
.hr-5,
.vr-0,
.vr-1,
.vr-2,
.vr-3,
.vr-4,
.vr-5 {
border-color: vars-night.$rgb-border-grey--night;
}
.b-1p {
border-color: vars-night.$rgb-border-grey--night !important;
}
.bt-1p {
border-top-color: vars-night.$rgb-border-grey--night !important;
}
.br-1p {
border-right-color: vars-night.$rgb-border-grey--night !important;
}
.bb-1p {
border-bottom-color: vars-night.$rgb-border-grey--night !important;
&-trans {
border-bottom-color: vars-night.$rgb-border-grey--trans-night !important;
}
}
.bl-1p {
border-left-color: vars-night.$rgb-border-grey--night !important;
}
}

11
scss/includes/util-spacing.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
.b-0 {
border: 0 !important;
@@ -682,6 +682,11 @@
padding-left: 2px !important;
}
.px-4p {
padding-right: 4px !important;
padding-left: 4px !important;
}
.pt-0 {
padding-top: 0 !important;
}
@@ -710,6 +715,10 @@
padding-top: 1px !important;
}
.pt-2p {
padding-top: 2px !important;
}
.pr-0 {
padding-right: 0 !important;
}

2
scss/includes/util.scss
View File

@@ -1,4 +1,4 @@
@use "vars";
@use "../vars/vars";
// region Fix Chrome
input[type="checkbox"]:checked {

34
scss/index.scss
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
table.home-table {
padding: 0 10px 10px;
@@ -46,10 +46,10 @@ table.home-table td {
color: #444;
}
.night-mode .home__btn-page,
.night-mode .home__btn-page:hover,
.night-mode .home__btn-page:active,
.night-mode .home__btn-page:focus {
.ve-night-mode .home__btn-page,
.ve-night-mode .home__btn-page:hover,
.ve-night-mode .home__btn-page:active,
.ve-night-mode .home__btn-page:focus {
color: inherit;
}
@@ -91,10 +91,10 @@ table.home-table td {
.home__btn-player:hover,
.home__btn-player:active,
.home__btn-player:focus,
.night-mode .home__btn-player,
.night-mode .home__btn-player:hover,
.night-mode .home__btn-player:active,
.night-mode .home__btn-player:focus {
.ve-night-mode .home__btn-player,
.ve-night-mode .home__btn-player:hover,
.ve-night-mode .home__btn-player:active,
.ve-night-mode .home__btn-player:focus {
border-color: #1e90ff;
color: #1e90ff;
}
@@ -103,10 +103,10 @@ table.home-table td {
.home__btn-rule:hover,
.home__btn-rule:active,
.home__btn-rule:focus,
.night-mode .home__btn-rule,
.night-mode .home__btn-rule:hover,
.night-mode .home__btn-rule:active,
.night-mode .home__btn-rule:focus {
.ve-night-mode .home__btn-rule,
.ve-night-mode .home__btn-rule:hover,
.ve-night-mode .home__btn-rule:active,
.ve-night-mode .home__btn-rule:focus {
border-color: #33a5a5;
color: #33a5a5;
}
@@ -115,10 +115,10 @@ table.home-table td {
.home__btn-dm:hover,
.home__btn-dm:active,
.home__btn-dm:focus,
.night-mode .home__btn-dm,
.night-mode .home__btn-dm:hover,
.night-mode .home__btn-dm:active,
.night-mode .home__btn-dm:focus {
.ve-night-mode .home__btn-dm,
.ve-night-mode .home__btn-dm:hover,
.ve-night-mode .home__btn-dm:active,
.ve-night-mode .home__btn-dm:focus {
border-color: #9400d3;
color: #9400d3;
}

2
scss/inittrackerplayerview.scss
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
#initp__wrp_active {
display: none;

4
scss/items.scss
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
.list--stats {
height: initial;
@@ -53,7 +53,7 @@ h3.ele-magic {
background: #ccc;
}
.night-mode .itm__list-divider {
.ve-night-mode .itm__list-divider {
background: #555;
}

2
scss/lifegen.scss
View File

@@ -3,7 +3,7 @@ h4 {
width: 100%;
}
.night-mode h4 {
.ve-night-mode h4 {
border-bottom: 1px solid #555;
}

7
scss/list-page--grouped.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.lst__ {
&item-group-header {
@@ -7,9 +8,9 @@
}
}
.night-mode .lst__ {
.ve-night-mode .lst__ {
&item-group-header {
background: vars.$rgb-bg--alt-night;
background: vars-night.$rgb-bg--alt-night;
}
}

1
scss/main.scss
View File

@@ -2,6 +2,7 @@
@import "includes/bootstrap-custom";
@import "includes/util-column";
@import "includes/util-spacing";
@import "includes/util-spacing-night";
@import "includes/util";
@import "includes/util-5etools";
@import "includes/util-5etools-night";

10
scss/makebrew.scss
View File

@@ -17,7 +17,7 @@
border-top: 1px solid #ccc;
}
.night-mode #content_input_controls {
.ve-night-mode #content_input_controls {
border-color: #555;
}
@@ -43,7 +43,7 @@ textarea.form-control {
border-bottom: 1px solid #ccc;
}
.night-mode .mkbru__wrp-tab-heads--border {
.ve-night-mode .mkbru__wrp-tab-heads--border {
border-color: #555;
}
@@ -70,7 +70,7 @@ textarea.form-control {
border-right: 1px solid #ccc;
}
.night-mode .mkbru__wrp-output-tab-data {
.ve-night-mode .mkbru__wrp-output-tab-data {
border-color: transparent;
}
@@ -113,7 +113,7 @@ textarea.form-control {
margin-bottom: 4px;
}
.night-mode .mkbru__row-mark {
.ve-night-mode .mkbru__row-mark {
background: #555;
}
@@ -213,7 +213,7 @@ textarea.form-control {
background: #ccc;
}
.night-mode .mkbru_mon__spell-header-divider {
.ve-night-mode .mkbru_mon__spell-header-divider {
background: #555;
}

21
scss/maps.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.maps {
.rd__wrp-map {
@@ -53,31 +54,31 @@
}
}
.night-mode .maps {
.ve-night-mode .maps {
&__ {
&disp-message-initial {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--trans-night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
}
&-menu {
background: vars.$rgb-bg--night;
border-top-color: vars.$rgb-border-grey--trans-night;
background: vars-night.$rgb-bg--night;
border-top-color: vars-night.$rgb-border-grey--trans-night;
&__label-cb {
border-bottom-color: vars.$rgb-border-grey--night;
border-bottom-color: vars-night.$rgb-border-grey--night;
&:hover {
background-color: vars.$rgb-bg--alt-night;
background-color: vars-night.$rgb-bg--alt-night;
}
}
}
&-gallery {
&__wrp-chapter {
background: vars.$rgb-bg--night;
border-color: vars.$rgb-border-grey--trans-night;
background: vars-night.$rgb-bg--night;
border-color: vars-night.$rgb-border-grey--trans-night;
}
}
}

7
scss/recipes.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.recipes {
&__ {
@@ -8,10 +9,10 @@
}
}
.night-mode .recipes {
.ve-night-mode .recipes {
&__ {
&tbl-recipes {
border-left: 1px solid vars.$rgb-border-grey--trans-night;
border-left: 1px solid vars-night.$rgb-border-grey--trans-night;
}
}
}

2
scss/renderdemo.scss
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
#jsoninput {
width: 100%;

11
scss/search.scss
View File

@@ -1,4 +1,5 @@
@use "includes/vars";
@use "vars/vars";
@use "vars/vars-night";
.pg-search__ {
$sz-image: 48px;
@@ -45,15 +46,15 @@
}
}
.night-mode {
.ve-night-mode {
.pg-search__ {
&wrp-result {
border: 1px solid vars.$rgb-border-grey--night;
background: vars.$rgb-bg--night;
border: 1px solid vars-night.$rgb-border-grey--night;
background: vars-night.$rgb-bg--night;
}
&wrp-preview {
border: 1px solid vars.$rgb-border-grey--night;
border: 1px solid vars-night.$rgb-border-grey--night;
}
}
}

2
scss/statgen-bundle.scss
View File

@@ -1,4 +1,4 @@
@use "includes/vars";
@use "vars/vars";
@import "includes/statgen";
@import "includes/statgen-night";

82
scss/vars/vars-night.scss Normal file
View File

@@ -0,0 +1,82 @@
@use "sass:color";
@use "../vars/vars";
$rgb-name-red--night: #d29a38;
$rgb-name-alt--night: #c2c2c2;
$rgb-link-blue--night: #7db6e8;
$rgb-link-blue--muted-night: #6e8eab;
$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-stripe-grey--night: #aaa2;
$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--night: #bbb;
$rgb-form-control-bg--night: #222;
$rgb-btn-default-active--night: #ffffff40;
$rgb-btn-danger-bg-red--night: #7e3a38;
$rgb-class-variant--night: #e6ab94;
$rgb-class-ua--night: #a2ce42;
$rgb-subclass--night: vars.$rgb-subclass;
$rgb-subclass--night-stale: vars.$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;
// 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: vars.$pct-darken-border);
$rgb-alert-danger-border-red--night: color.adjust($rgb-alert-danger-red--night, $lightness: vars.$pct-darken-border);
$rgb-alert-warning-border-orange--night: color.adjust($rgb-alert-warning-orange--night, $lightness: vars.$pct-darken-border);
$rgb-alert-success-border-green--night: color.adjust($rgb-alert-success-green--night, $lightness: vars.$pct-darken-border);
@mixin mix-shadow-active--night {
box-shadow: 0 0 3px 0 #fffb;
}
@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;
}
}

78
scss/includes/vars.scss → scss/vars/vars.scss
View File

@@ -73,26 +73,18 @@ $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%);
@@ -100,7 +92,6 @@ $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;
@@ -108,16 +99,8 @@ $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;
@@ -126,10 +109,7 @@ $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;
@@ -145,37 +125,11 @@ $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;
@@ -229,15 +183,15 @@ $h-ipt-xs: 22px;
$font-line-height: 1.4286;
// endregion
@mixin mix-shadow-1 () {
@mixin mix-shadow-1() {
box-shadow: 0 6px 12px $rgb-shadow-grey;
}
@mixin mix-shadow-1--dark () {
@mixin mix-shadow-1--dark() {
box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
}
@mixin mix-shadow-2 () {
@mixin mix-shadow-2() {
box-shadow: 0 3px 6px $rgb-shadow-grey;
}
@@ -245,10 +199,6 @@ $font-line-height: 1.4286;
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%);
}
@@ -363,26 +313,4 @@ $fltr-2stripe: 22px;
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