mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
v1.201.0
This commit is contained in:
TheGiddyLimit
@@ -1,4 +1,4 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
// region Token
|
||||
img.token {
|
||||
@@ -14,13 +14,15 @@ img.token {
|
||||
}
|
||||
|
||||
#pagecontent {
|
||||
background-size: 100% auto;
|
||||
background: url("../img/bestiary/stat-block-top-texture.webp") no-repeat, repeat top center, $rgb-bg-orange;
|
||||
background:
|
||||
url("../img/bestiary/stat-block-top-texture.webp") no-repeat,
|
||||
repeat top center,
|
||||
vars.$rgb-bg-orange;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
#pagecontent {
|
||||
background: $rgb-bg--night !important;
|
||||
background: vars.$rgb-bg--night !important;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
@@ -28,7 +30,7 @@ img.token {
|
||||
// region Proficiency dice rollers
|
||||
[data-proficiency-dice-mode="dice"] {
|
||||
.rd__dc--rollable {
|
||||
color: $rgb-link-blue;
|
||||
color: vars.$rgb-link-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -56,7 +58,7 @@ img.token {
|
||||
}
|
||||
|
||||
.night-mode [data-proficiency-dice-mode="dice"] .rd__dc--rollable {
|
||||
color: $rgb-link-blue--night;
|
||||
color: vars.$rgb-link-blue--night;
|
||||
}
|
||||
// endregion
|
||||
|
||||
@@ -110,11 +112,11 @@ img.token {
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 26.66666666%;
|
||||
width: 26.6667%;
|
||||
}
|
||||
|
||||
&__name--sub {
|
||||
width: 29.16666667%;
|
||||
width: 29.1667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
@import "includes/vars";
|
||||
@use "sass:color";
|
||||
|
||||
@use "includes/vars";
|
||||
@use "includes/classes-table";
|
||||
|
||||
// region class
|
||||
.cls__ {
|
||||
@@ -17,22 +20,22 @@
|
||||
&btn-toggle-sidebar {
|
||||
cursor: pointer;
|
||||
font-size: initial;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
// region buttons
|
||||
&btn-cf {
|
||||
&--active {
|
||||
color: white;
|
||||
background: $rgb-name-red;
|
||||
color: #fff;
|
||||
background: vars.$rgb-name-red;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-name-red, $pct-darken-active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-name-red, $lightness: - vars.$pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,98 +46,98 @@
|
||||
}
|
||||
|
||||
&--active-fresh {
|
||||
color: white;
|
||||
background: $rgb-subclass;
|
||||
border-color: darken($rgb-subclass, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass;
|
||||
border-color: color.adjust(vars.$rgb-subclass, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-subclass, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-subclass, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-reprinted {
|
||||
color: white;
|
||||
background: $rgb-subclass--stale;
|
||||
border-color: darken($rgb-subclass--stale, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass--stale;
|
||||
border-color: color.adjust(vars.$rgb-subclass--stale, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--stale, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-subclass--stale, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-subclass--stale, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-spicy {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua;
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass-ua;
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-subclass-ua, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-stale {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--stale;
|
||||
border-color: darken($rgb-subclass-ua--stale, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass-ua--stale;
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua--stale, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--stale, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-subclass-ua--stale, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua--stale, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-brew {
|
||||
color: white;
|
||||
background: $rgb-class-brew;
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-class-brew;
|
||||
border-color: color.adjust(vars.$rgb-class-brew, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-brew, $pct-darken-active);
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-class-brew, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-class-brew, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-rebrewed {
|
||||
color: white;
|
||||
background: $rgb-class-variant-brew;
|
||||
border-color: darken($rgb-class-variant-brew, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-class-variant-brew;
|
||||
border-color: color.adjust(vars.$rgb-class-variant-brew, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-variant-brew, $pct-darken-active);
|
||||
border-color: darken($rgb-class-variant-brew, $pct-darken-border--active);
|
||||
color: #fff;
|
||||
background: color.adjust(vars.$rgb-class-variant-brew, $lightness: - vars.$pct-darken-active);
|
||||
border-color: color.adjust(vars.$rgb-class-variant-brew, $lightness: - vars.$pct-darken-border--active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -147,8 +150,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant;
|
||||
border-bottom-color: $rgb-class-variant;
|
||||
color: vars.$rgb-class-variant;
|
||||
border-bottom-color: vars.$rgb-class-variant;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,8 +159,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
border-bottom-color: vars.$rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,8 +168,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,8 +177,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--stale;
|
||||
border-bottom-color: $rgb-subclass--stale;
|
||||
color: vars.$rgb-subclass--stale;
|
||||
border-bottom-color: vars.$rgb-subclass--stale;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,8 +186,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
border-bottom-color: $rgb-subclass-ua--stale;
|
||||
color: vars.$rgb-subclass-ua--stale;
|
||||
border-bottom-color: vars.$rgb-subclass-ua--stale;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,8 +195,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -201,8 +204,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass;
|
||||
border-bottom-color: $rgb-subclass;
|
||||
color: vars.$rgb-subclass;
|
||||
border-bottom-color: vars.$rgb-subclass;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -210,8 +213,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua;
|
||||
border-bottom-color: $rgb-subclass-ua;
|
||||
color: vars.$rgb-subclass-ua;
|
||||
border-bottom-color: vars.$rgb-subclass-ua;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,8 +222,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew;
|
||||
border-bottom-color: $rgb-class-brew;
|
||||
color: vars.$rgb-class-brew;
|
||||
border-bottom-color: vars.$rgb-class-brew;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -228,8 +231,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant;
|
||||
border-bottom-color: $rgb-class-variant;
|
||||
color: vars.$rgb-class-variant;
|
||||
border-bottom-color: vars.$rgb-class-variant;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,8 +240,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
border-bottom-color: vars.$rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -246,8 +249,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew;
|
||||
border-bottom-color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,8 +258,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua;
|
||||
border-bottom-color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
border-bottom-color: vars.$rgb-class-ua;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -264,8 +267,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew;
|
||||
border-bottom-color: $rgb-class-brew;
|
||||
color: vars.$rgb-class-brew;
|
||||
border-bottom-color: vars.$rgb-class-brew;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
@@ -279,16 +282,16 @@
|
||||
// region buttons
|
||||
&btn-cf {
|
||||
&--active {
|
||||
color: $rgb-off-black;
|
||||
background: $rgb-name-red--night;
|
||||
color: vars.$rgb-off-black;
|
||||
background: vars.$rgb-name-red--night;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: $rgb-off-black;
|
||||
background: darken($rgb-name-red--night, $pct-darken-active);
|
||||
color: vars.$rgb-off-black;
|
||||
background: color.adjust(vars.$rgb-name-red--night, $lightness: - vars.$pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -299,98 +302,98 @@
|
||||
}
|
||||
|
||||
&--active-fresh {
|
||||
color: white;
|
||||
background: $rgb-subclass--night;
|
||||
border-color: darken($rgb-subclass--night, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass--night;
|
||||
border-color: color.adjust(vars.$rgb-subclass--night, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--night, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--night, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-reprinted {
|
||||
color: white;
|
||||
background: $rgb-subclass--night-stale;
|
||||
border-color: darken($rgb-subclass--night-stale, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass--night-stale;
|
||||
border-color: color.adjust(vars.$rgb-subclass--night-stale, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass--night-stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass--night-stale, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-spicy {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--night;
|
||||
border-color: darken($rgb-subclass-ua--night, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass-ua--night;
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua--night, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--night, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--night, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-stale {
|
||||
color: white;
|
||||
background: $rgb-subclass-ua--night-stale;
|
||||
border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-subclass-ua--night-stale;
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua--night-stale, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-subclass-ua--night-stale, $pct-darken-active);
|
||||
border-color: darken($rgb-subclass-ua--night-stale, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-brew {
|
||||
color: white;
|
||||
background: $rgb-class-brew--night;
|
||||
border-color: darken($rgb-class-brew--night, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-class-brew--night;
|
||||
border-color: color.adjust(vars.$rgb-class-brew--night, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-brew--night, $pct-darken-active);
|
||||
border-color: darken($rgb-class-brew--night, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
&--active-rebrewed {
|
||||
color: white;
|
||||
background: $rgb-class-variant-brew--night;
|
||||
border-color: darken($rgb-class-variant-brew--night, $pct-darken-border);
|
||||
color: #fff;
|
||||
background: vars.$rgb-class-variant-brew--night;
|
||||
border-color: color.adjust(vars.$rgb-class-variant-brew--night, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active:focus,
|
||||
&:active:hover {
|
||||
color: white;
|
||||
background: darken($rgb-class-variant-brew--night, $pct-darken-active);
|
||||
border-color: darken($rgb-class-variant-brew--night, $pct-darken-border--active);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -402,8 +405,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant--night;
|
||||
border-bottom-color: $rgb-class-variant--night;
|
||||
color: vars.$rgb-class-variant--night;
|
||||
border-bottom-color: vars.$rgb-class-variant--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -411,8 +414,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
border-bottom-color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -420,8 +423,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--night-stale;
|
||||
border-bottom-color: $rgb-subclass--night-stale;
|
||||
color: vars.$rgb-subclass--night-stale;
|
||||
border-bottom-color: vars.$rgb-subclass--night-stale;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -429,8 +432,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--night-stale;
|
||||
border-bottom-color: $rgb-subclass-ua--night-stale;
|
||||
color: vars.$rgb-subclass-ua--night-stale;
|
||||
border-bottom-color: vars.$rgb-subclass-ua--night-stale;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -438,8 +441,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass--night;
|
||||
border-bottom-color: $rgb-subclass--night;
|
||||
color: vars.$rgb-subclass--night;
|
||||
border-bottom-color: vars.$rgb-subclass--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -447,8 +450,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-subclass-ua--night;
|
||||
border-bottom-color: $rgb-subclass-ua--night;
|
||||
color: vars.$rgb-subclass-ua--night;
|
||||
border-bottom-color: vars.$rgb-subclass-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -456,8 +459,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew--night;
|
||||
border-bottom-color: $rgb-class-brew--night;
|
||||
color: vars.$rgb-class-brew--night;
|
||||
border-bottom-color: vars.$rgb-class-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -465,8 +468,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -474,8 +477,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -483,8 +486,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant--night;
|
||||
border-bottom-color: $rgb-class-variant--night;
|
||||
color: vars.$rgb-class-variant--night;
|
||||
border-bottom-color: vars.$rgb-class-variant--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -492,8 +495,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
border-bottom-color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -501,8 +504,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
border-bottom-color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
border-bottom-color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -510,8 +513,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-ua--night;
|
||||
border-bottom-color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
border-bottom-color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -519,8 +522,8 @@
|
||||
.rd__h--0,
|
||||
.rd__h--1,
|
||||
.rd__h--2 {
|
||||
color: $rgb-class-brew--night;
|
||||
border-bottom-color: $rgb-class-brew--night;
|
||||
color: vars.$rgb-class-brew--night;
|
||||
border-bottom-color: vars.$rgb-class-brew--night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
@@ -528,27 +531,25 @@
|
||||
// endregion
|
||||
|
||||
// region class table
|
||||
@import "includes/classes-table";
|
||||
|
||||
.night-mode {
|
||||
.cls-tbl {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
|
||||
> tbody > tr > th {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&disp-name {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
&col-group::after {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&stripe-odd:nth-child(odd) {
|
||||
background: $rgb-stripe-grey;
|
||||
background: vars.$rgb-stripe-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -568,7 +569,7 @@
|
||||
cursor: pointer;
|
||||
font-size: initial;
|
||||
font-weight: initial;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
§ion {
|
||||
@@ -588,7 +589,7 @@
|
||||
.night-mode {
|
||||
.cls-side__ {
|
||||
&btn-toggle {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -599,7 +600,7 @@
|
||||
&wrp {
|
||||
align-items: baseline;
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
@media (max-width: vars.$width-screen-md) {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
}
|
||||
@@ -618,7 +619,7 @@
|
||||
.cls-main__ {
|
||||
&msg-no-content {
|
||||
height: 40px;
|
||||
color: $rgb-name-red;
|
||||
color: vars.$rgb-name-red;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
@@ -638,7 +639,7 @@
|
||||
|
||||
.night-mode .cls-main__ {
|
||||
&msg-no-content {
|
||||
color: $rgb-name-red--night;
|
||||
color: vars.$rgb-name-red--night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
@@ -646,7 +647,7 @@
|
||||
// region comparison view
|
||||
.cls-comp__wrp-features {
|
||||
width: 400px;
|
||||
max-width: calc(100vw - #{2 * $spacer});
|
||||
max-width: calc(100vw - #{2 * vars.$spacer});
|
||||
}
|
||||
// endregion
|
||||
|
||||
@@ -654,7 +655,7 @@
|
||||
.cls-bkmv__ {
|
||||
&wrp-tabs {
|
||||
background-color: #eee;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-tab {
|
||||
@@ -663,9 +664,9 @@
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-right: 1px solid vars.$rgb-border-grey;
|
||||
border-left: 1px solid vars.$rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
border-top-right-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
@@ -673,7 +674,7 @@
|
||||
&wrp-level {
|
||||
z-index: 1;
|
||||
left: -1px;
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
|
||||
&disp-level {
|
||||
@@ -683,30 +684,30 @@
|
||||
|
||||
// region TODO are these used?
|
||||
&btn-tab.active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&btn-tab.active {
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
border-color: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-border);
|
||||
}
|
||||
|
||||
&btn-tab.active.spicy-sauce {
|
||||
background: $rgb-subclass-ua;
|
||||
color: white;
|
||||
background: vars.$rgb-subclass-ua;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&btn-tab.active.spicy-sauce {
|
||||
border-color: darken($rgb-subclass-ua, $pct-darken-border);
|
||||
border-color: color.adjust(vars.$rgb-subclass-ua, $lightness: - vars.$pct-darken-border);
|
||||
}
|
||||
|
||||
&btn-tab.active.refreshing-brew {
|
||||
background: $rgb-class-brew;
|
||||
color: white;
|
||||
background: vars.$rgb-class-brew;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&btn-tab.active.refreshing-brew {
|
||||
border-color: darken($rgb-class-brew, $pct-darken-border);
|
||||
border-color: color.adjust(vars.$rgb-class-brew, $lightness: - vars.$pct-darken-border);
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
@@ -714,15 +715,15 @@
|
||||
.night-mode .cls-bkmv__ {
|
||||
&wrp-tabs {
|
||||
background-color: #222;
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&btn-tab {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&wrp-level {
|
||||
background: $rgb-bg--alt-night;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
@@ -778,15 +779,15 @@
|
||||
}
|
||||
|
||||
&item {
|
||||
@include overflow-dots();
|
||||
@include vars.mix-overflow-dots;
|
||||
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
max-height: 20px;
|
||||
color: $rgb-name-red;
|
||||
color: vars.$rgb-name-red;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -796,59 +797,59 @@
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
&--feature-variant-subclass {
|
||||
color: $rgb-class-variant;
|
||||
color: vars.$rgb-class-variant;
|
||||
}
|
||||
|
||||
&--feature-variant-ua-subclass {
|
||||
color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-subclass-reprint {
|
||||
color: $rgb-subclass--stale;
|
||||
color: vars.$rgb-subclass--stale;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
color: vars.$rgb-subclass-ua--stale;
|
||||
}
|
||||
|
||||
&--feature-subclass {
|
||||
color: $rgb-subclass;
|
||||
color: vars.$rgb-subclass;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass {
|
||||
color: $rgb-subclass-ua;
|
||||
color: vars.$rgb-subclass-ua;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass {
|
||||
color: $rgb-class-brew;
|
||||
color: vars.$rgb-class-brew;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-variant-brew-subclass {
|
||||
color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-variant {
|
||||
color: $rgb-class-variant;
|
||||
color: vars.$rgb-class-variant;
|
||||
}
|
||||
|
||||
&--feature-variant-ua {
|
||||
color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-variant-brew {
|
||||
color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-ua {
|
||||
color: $rgb-class-ua;
|
||||
color: vars.$rgb-class-ua;
|
||||
}
|
||||
|
||||
&--feature-brew {
|
||||
color: $rgb-class-brew;
|
||||
color: vars.$rgb-class-brew;
|
||||
}
|
||||
// endregion
|
||||
|
||||
@@ -875,85 +876,85 @@
|
||||
|
||||
&--active,
|
||||
&:hover {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&item {
|
||||
color: $rgb-name-red--night;
|
||||
color: vars.$rgb-name-red--night;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-off-black;
|
||||
background: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// region Header coloring
|
||||
// `feature-<variant>-<ua|brew>-<subclass>-<reprint>`
|
||||
&--feature-variant-subclass {
|
||||
color: $rgb-class-variant--night;
|
||||
color: vars.$rgb-class-variant--night;
|
||||
}
|
||||
|
||||
&--feature-variant-ua-subclass {
|
||||
color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-subclass-reprint {
|
||||
color: $rgb-subclass--night-stale;
|
||||
color: vars.$rgb-subclass--night-stale;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--night-stale;
|
||||
color: vars.$rgb-subclass-ua--night-stale;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-subclass {
|
||||
color: $rgb-subclass--night;
|
||||
color: vars.$rgb-subclass--night;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass {
|
||||
color: $rgb-subclass-ua--night;
|
||||
color: vars.$rgb-subclass-ua--night;
|
||||
}
|
||||
|
||||
&--feature-ua-subclass-reprint {
|
||||
color: $rgb-subclass-ua--stale;
|
||||
color: vars.$rgb-subclass-ua--stale;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass {
|
||||
color: $rgb-class-brew--night;
|
||||
color: vars.$rgb-class-brew--night;
|
||||
}
|
||||
|
||||
&--feature-brew-subclass-reprint {
|
||||
color: $rgb-class-variant-brew;
|
||||
color: vars.$rgb-class-variant-brew;
|
||||
}
|
||||
|
||||
&--feature-variant-brew-subclass {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-variant {
|
||||
color: $rgb-class-variant--night;
|
||||
color: vars.$rgb-class-variant--night;
|
||||
}
|
||||
|
||||
&--feature-variant-ua {
|
||||
color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-variant-brew {
|
||||
color: $rgb-class-variant-brew--night;
|
||||
color: vars.$rgb-class-variant-brew--night;
|
||||
}
|
||||
|
||||
&--feature-ua {
|
||||
color: $rgb-class-ua--night;
|
||||
color: vars.$rgb-class-ua--night;
|
||||
}
|
||||
|
||||
&--feature-brew {
|
||||
color: $rgb-class-brew--night;
|
||||
color: vars.$rgb-class-brew--night;
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
.inputArea,
|
||||
.outputArea {
|
||||
@@ -25,8 +25,8 @@
|
||||
&disp-message {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
background-color: $rgb-bg--alt;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 4px;
|
||||
margin-right: 3rem;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
&--error {
|
||||
color: red;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,13 +43,13 @@
|
||||
.night-mode {
|
||||
.conv__ {
|
||||
&disp-message {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.view-col-wrapper {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.crc__reset {
|
||||
min-width: 10rem;
|
||||
display: block;
|
||||
@@ -15,7 +14,7 @@
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.crc__row input[type=checkbox] {
|
||||
.crc__row input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -41,20 +40,20 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.crc__mon_feature input[type=number] {
|
||||
.crc__mon_feature input[type="number"] {
|
||||
width: 3em;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.crc__mon_feature input[type=checkbox] {
|
||||
.crc__mon_feature input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.crc__mon_feature:nth-child(even) {
|
||||
background: lightgrey;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
|
||||
.night-mode .crc__mon_feature:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.31);
|
||||
background: rgb(0 0 0 / 31%);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@import "includes/vars";
|
||||
@use "sass:color";
|
||||
|
||||
@use "includes/vars";
|
||||
|
||||
:root {
|
||||
--rgb-card-glint--edge: #d5592e;
|
||||
@@ -36,7 +38,7 @@
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity $time-3-frames;
|
||||
transition: opacity vars.$time-3-frames;
|
||||
}
|
||||
|
||||
&wrp-card-face {
|
||||
@@ -44,7 +46,7 @@
|
||||
.decks__wrp-btn-show-card {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
transition: opacity $time-3-frames;
|
||||
transition: opacity vars.$time-3-frames;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,9 +77,9 @@
|
||||
flex-direction: column;
|
||||
|
||||
.decks__wrp-row {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
padding-top: vars.$spacer;
|
||||
padding-bottom: vars.$spacer;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
@@ -91,11 +93,11 @@
|
||||
|
||||
&--grid {
|
||||
flex-wrap: wrap;
|
||||
padding-top: $spacer;
|
||||
padding-top: vars.$spacer;
|
||||
|
||||
.decks__wrp-row {
|
||||
width: 33%;
|
||||
padding-bottom: $spacer;
|
||||
padding-bottom: vars.$spacer;
|
||||
}
|
||||
|
||||
.decks__wrp-card-face {
|
||||
@@ -146,11 +148,8 @@
|
||||
|
||||
&stg {
|
||||
position: fixed;
|
||||
z-index: $z-hwin;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: vars.$z-hwin;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
@@ -177,7 +176,7 @@
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px white) hue-rotate(-5deg) opacity(75%) saturate(110%);
|
||||
filter: blur(1px) brightness(110%) contrast(75%) drop-shadow(0 0 5px #fff) hue-rotate(-5deg) opacity(75%) saturate(110%);
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -239,10 +238,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
padding: $spacer;
|
||||
background: $rgb-name-red;
|
||||
border-radius: $spacer;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red, 0.7);
|
||||
padding: vars.$spacer;
|
||||
background: vars.$rgb-name-red;
|
||||
border-radius: vars.$spacer;
|
||||
box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red, $alpha: - 0.7);
|
||||
|
||||
scale: 0;
|
||||
|
||||
@@ -268,8 +267,8 @@
|
||||
&img-card-back {
|
||||
z-index: -1;
|
||||
|
||||
width: calc(100% - #{2 * $spacer});
|
||||
height: calc(100% - #{2 * $spacer});
|
||||
width: calc(100% - #{2 * vars.$spacer});
|
||||
height: calc(100% - #{2 * vars.$spacer});
|
||||
|
||||
transform: rotateY(180deg);
|
||||
|
||||
@@ -300,12 +299,9 @@
|
||||
&disp-glint {
|
||||
z-index: 2;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
|
||||
border-radius: $spacer;
|
||||
border-radius: vars.$spacer;
|
||||
}
|
||||
|
||||
&wrp-rhs {
|
||||
@@ -336,8 +332,8 @@
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-top: 3px solid $rgb-name-red;
|
||||
border-bottom: 3px solid $rgb-name-red;
|
||||
border-top: 3px solid vars.$rgb-name-red;
|
||||
border-bottom: 3px solid vars.$rgb-name-red;
|
||||
background-color: #e5c4ba;
|
||||
font-size: 1em;
|
||||
padding-top: 35px;
|
||||
@@ -356,7 +352,7 @@
|
||||
&wrp-card-rows {
|
||||
&--list {
|
||||
.decks__wrp-row {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -364,15 +360,15 @@
|
||||
|
||||
&-draw__ {
|
||||
&wrp-card {
|
||||
background-color: $rgb-name-red--night;
|
||||
box-shadow: 0 0 30px 10px transparentize($rgb-name-red--night, 0.7);
|
||||
color: rgba(255, 255, 255, 0.53);
|
||||
background-color: vars.$rgb-name-red--night;
|
||||
box-shadow: 0 0 30px 10px color.adjust(vars.$rgb-name-red--night, $alpha: - 0.7);
|
||||
color: rgb(255 255 255 / 53%);
|
||||
}
|
||||
|
||||
&wrp-desc {
|
||||
border-color: $rgb-name-red--night;
|
||||
border-color: vars.$rgb-name-red--night;
|
||||
background-color: #574930;
|
||||
box-shadow: 0 0 10px 0 black;
|
||||
box-shadow: 0 0 10px 0 #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,14 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
@use "includes/dmscreen-book-viewer";
|
||||
@use "includes/dmscreen-calender";
|
||||
@use "includes/dmscreen-coin-converter";
|
||||
@use "includes/dmscreen-counter";
|
||||
@use "includes/dmscreen-initiative-tracker";
|
||||
@use "includes/dmscreen-initiative-tracker-player";
|
||||
@use "includes/dmscreen-map-viewer";
|
||||
@use "includes/dmscreen-panels-empty";
|
||||
@use "includes/dmscreen-unit-converter";
|
||||
|
||||
$rgb-bg-panel-control: #80808080;
|
||||
|
||||
@@ -14,7 +24,7 @@ label {
|
||||
}
|
||||
|
||||
.dm__panel-bg {
|
||||
background: white;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.dm-screen {
|
||||
@@ -51,10 +61,7 @@ label {
|
||||
.dm-screen-panel.faux-hover .panel-content-wrapper-inner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.panel-control-bar {
|
||||
@@ -91,7 +98,7 @@ label {
|
||||
padding: 0 4px;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
color: white;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
background: #808080a0;
|
||||
cursor: pointer;
|
||||
@@ -122,7 +129,7 @@ label {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgb(255 255 255 / 70%);
|
||||
}
|
||||
|
||||
.panel-add {
|
||||
@@ -130,7 +137,7 @@ label {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 5rem;
|
||||
color: $rgb-border-grey;
|
||||
color: vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.btn-panel-add {
|
||||
@@ -139,7 +146,7 @@ label {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
|
||||
&:hover,
|
||||
&.faux-hover {
|
||||
@@ -188,13 +195,13 @@ label {
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
background: white;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.content-tab-bar {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -238,14 +245,13 @@ label {
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner {
|
||||
background: white;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
|
||||
td div.border {
|
||||
background-color: $rgb-name-red;
|
||||
background-color: vars.$rgb-name-red;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -255,7 +261,7 @@ label {
|
||||
|
||||
.night-mode {
|
||||
.panel-content-wrapper-inner::-webkit-scrollbar-track {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -268,10 +274,7 @@ label {
|
||||
|
||||
.panel-control-bg {
|
||||
z-index: 54;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.panel-control-move-top {
|
||||
@@ -347,8 +350,8 @@ label {
|
||||
}
|
||||
|
||||
.panel-control-move--bg {
|
||||
background: $rgb-border-grey--trans;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey--trans;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
@@ -384,7 +387,7 @@ label {
|
||||
|
||||
.underline-tabs {
|
||||
margin-top: -1px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.list {
|
||||
@@ -436,20 +439,20 @@ label {
|
||||
|
||||
.panel-zoom-reset .glyphicon {
|
||||
top: 2px;
|
||||
color: $rgb-border-grey;
|
||||
color: vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
/* cleaner, but Webkit-only */
|
||||
/*input[type=range].panel-zoom-slider {
|
||||
/* input[type=range].panel-zoom-slider {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
-webkit-appearance: slider-vertical;
|
||||
height: 80px;
|
||||
}*/
|
||||
} */
|
||||
|
||||
input[type=range].panel-zoom-slider {
|
||||
input[type="range"].panel-zoom-slider {
|
||||
position: absolute;
|
||||
top: 59px;
|
||||
left: -25px;
|
||||
@@ -461,7 +464,7 @@ input[type=range].panel-zoom-slider {
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $rgb-bg;
|
||||
background: vars.$rgb-bg;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -494,7 +497,7 @@ iframe {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
@@ -523,7 +526,7 @@ iframe {
|
||||
|
||||
body.is-fullscreen .sidemenu__toggle {
|
||||
top: 12px;
|
||||
left: -31px;
|
||||
left: -29px;
|
||||
}
|
||||
|
||||
body.is-fullscreen .sidemenu__hotzone {
|
||||
@@ -554,10 +557,7 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
.sidemenu__history-item-cover {
|
||||
position: absolute;
|
||||
z-index: 57;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -585,7 +585,7 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgb(255 255 255 / 70%);
|
||||
}
|
||||
|
||||
.panel-history-control-middle {
|
||||
@@ -600,8 +600,8 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
cursor: move;
|
||||
border-radius: 50%;
|
||||
transition: opacity 0.1s;
|
||||
background: $rgb-border-grey--trans;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey--trans;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.sidemenu__history-item-cover:hover .panel-history-control-middle {
|
||||
@@ -618,11 +618,11 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
|
||||
.night-mode {
|
||||
.btn-panel-add {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.underline-tabs {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.panel-history-control-middle {
|
||||
@@ -643,11 +643,11 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
}
|
||||
|
||||
.panel-control-icon {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgb(255 255 255 / 70%);
|
||||
}
|
||||
|
||||
.panel-add {
|
||||
color: $rgb-border-grey;
|
||||
color: vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.btn-panel-add {
|
||||
@@ -658,28 +658,18 @@ body.is-fullscreen .sidemenu__hotzone {
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.panel-addmenu-tab-head[active="true"] {
|
||||
background-color: $rgb-btn-default-active--night !important;
|
||||
background-color: vars.$rgb-btn-default-active--night !important;
|
||||
}
|
||||
|
||||
.panel-content-wrapper-inner td div.border {
|
||||
background-color: $rgb-name-red--night;
|
||||
background-color: vars.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.dm__panel-bg {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@import "includes/dmscreen-book-viewer";
|
||||
@import "includes/dmscreen-calender";
|
||||
@import "includes/dmscreen-coin-converter";
|
||||
@import "includes/dmscreen-counter";
|
||||
@import "includes/dmscreen-initiative-tracker";
|
||||
@import "includes/dmscreen-initiative-tracker-player";
|
||||
@import "includes/dmscreen-map-viewer";
|
||||
@import "includes/dmscreen-panels-empty";
|
||||
@import "includes/dmscreen-unit-converter";
|
||||
|
||||
68
scss/includes/bootstrap-custom.scss
vendored
68
scss/includes/bootstrap-custom.scss
vendored
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
:root {
|
||||
--safe-area-inset-top: 0;
|
||||
@@ -19,12 +19,12 @@
|
||||
// endregion
|
||||
|
||||
.roller {
|
||||
color: $rgb-link-blue;
|
||||
color: vars.$rgb-link-blue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-muted a {
|
||||
color: $rgb-link-blue--muted;
|
||||
color: vars.$rgb-link-blue--muted;
|
||||
}
|
||||
|
||||
.font-ui {
|
||||
@@ -35,7 +35,7 @@
|
||||
.help--hover {
|
||||
// This should approx. match the hover cutoff defined in renderer (768px).
|
||||
// Approximate, since jQuery calculates window width differently, offset likely varies with e.g. scrollbar width.
|
||||
@media (max-width: 780px) {
|
||||
@media (width <= 780px) {
|
||||
cursor: default !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
@@ -65,8 +65,8 @@ input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@ body {
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: $w-scroll-body;
|
||||
width: vars.$w-scroll-body;
|
||||
}
|
||||
|
||||
/* *** */
|
||||
@@ -128,7 +128,7 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.input-xs {
|
||||
height: $h-ipt-xs;
|
||||
height: vars.$h-ipt-xs;
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
@@ -144,8 +144,8 @@ body::-webkit-scrollbar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
> input[type=checkbox],
|
||||
> input[type=radio] {
|
||||
> input[type="checkbox"],
|
||||
> input[type="radio"] {
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
@@ -158,10 +158,10 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
|
||||
.btn-primary--half {
|
||||
background: repeating-linear-gradient(135deg, $rgb-btn-primary-blue, $rgb-btn-primary-blue 16px, $rgb-btn-primary-blue--desaturated 16px, $rgb-btn-primary-blue--desaturated 32px);
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-btn-primary-blue, vars.$rgb-btn-primary-blue 16px, vars.$rgb-btn-primary-blue--desaturated 16px, vars.$rgb-btn-primary-blue--desaturated 32px);
|
||||
}
|
||||
|
||||
.dropdown-menu--side {
|
||||
.ve-dropdown-menu--side {
|
||||
top: -10px;
|
||||
left: 100%;
|
||||
max-height: calc(100vh - 130px);
|
||||
@@ -172,13 +172,13 @@ body::-webkit-scrollbar {
|
||||
> a {
|
||||
padding: 5px 14px 6px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (width >= 992px) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@@ -190,7 +190,7 @@ body::-webkit-scrollbar {
|
||||
background-color: #006bc4;
|
||||
border-top: 0;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (width >= 992px) {
|
||||
border-left: 1px solid transparent;
|
||||
border-right: 1px solid transparent;
|
||||
border-bottom: 1px solid #999;
|
||||
@@ -199,13 +199,13 @@ body::-webkit-scrollbar {
|
||||
|
||||
.nav > li > a:focus,
|
||||
.nav > li > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.nav .open > a,
|
||||
.nav .open > a:focus,
|
||||
.nav .open > a:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.row {
|
||||
@@ -213,23 +213,23 @@ body::-webkit-scrollbar {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a.dropdown-ext-link {
|
||||
.ve-dropdown-menu > li > a.ve-dropdown-ext-link {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a.dropdown-ext-link:hover {
|
||||
.ve-dropdown-menu > li > a.ve-dropdown-ext-link:hover {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Allow spans instead of links in dropdown menus. Styling borrowed from original */
|
||||
.dropdown-menu > li > span {
|
||||
.ve-dropdown-menu > li > span {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: $font-line-height;
|
||||
line-height: vars.$font-line-height;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -237,17 +237,17 @@ body::-webkit-scrollbar {
|
||||
&:hover {
|
||||
color: #262626;
|
||||
text-decoration: none;
|
||||
background-color: $rgb-bg--alt;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu > .disabled > span {
|
||||
.ve-dropdown-menu > .disabled > span {
|
||||
pointer-events: none;
|
||||
color: $rgb-ctx-item-text-disabled;
|
||||
color: vars.$rgb-ctx-item-text-disabled;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $rgb-ctx-item-text-disabled;
|
||||
color: vars.$rgb-ctx-item-text-disabled;
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
@@ -255,25 +255,25 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu > .ctx-danger > span {
|
||||
background: $rgb-btn-danger-bg-red;
|
||||
color: white;
|
||||
.ve-dropdown-menu > .ctx-danger > span {
|
||||
background: vars.$rgb-btn-danger-bg-red;
|
||||
color: #fff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: white;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: $rgb-btn-danger-border-red;
|
||||
background-color: vars.$rgb-btn-danger-border-red;
|
||||
}
|
||||
}
|
||||
/* *** */
|
||||
|
||||
.dropdown-ext-link > .glyphicon {
|
||||
.ve-dropdown-ext-link > .glyphicon {
|
||||
top: 3px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-ext-link:hover > .glyphicon {
|
||||
.ve-dropdown-ext-link:hover > .glyphicon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -298,7 +298,7 @@ body::-webkit-scrollbar {
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
border-right: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -359,7 +359,7 @@ body::-webkit-scrollbar {
|
||||
> button,
|
||||
> a.btn {
|
||||
&:last-child {
|
||||
border-right-color: $rgb-border-grey--night;
|
||||
border-right-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.cls-tbl {
|
||||
font-size: 0.8em;
|
||||
background: $rgb-bg-orange;
|
||||
background: vars.$rgb-bg-orange;
|
||||
|
||||
> tbody > tr > th {
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
padding: 1px 0.3em;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
padding-left: 0.2em;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
&col-group {
|
||||
@@ -32,7 +32,7 @@
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 96%;
|
||||
border-bottom: 1px solid $rgb-off-black;
|
||||
border-bottom: 1px solid vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
}
|
||||
|
||||
&stripe-odd:nth-child(odd) {
|
||||
background: lightgrey;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
|
||||
&cell-spell-progression--spell-points-enabled {
|
||||
@@ -70,4 +70,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-book__ {
|
||||
&wrp-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&wrp-controls {
|
||||
padding: 2px 2px 1px 21px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@@ -23,7 +22,6 @@
|
||||
|
||||
.night-mode .dm-book__ {
|
||||
&wrp-controls {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-time__ {
|
||||
&btn-time {
|
||||
@@ -33,7 +33,7 @@
|
||||
height: calc(100% - 8px);
|
||||
margin: 4px 8px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-day {
|
||||
@@ -72,7 +72,7 @@
|
||||
&disp-calendar-day {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 3px;
|
||||
padding: 0 2px;
|
||||
font-size: 12px;
|
||||
@@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
&disp-calendar-day--active {
|
||||
background: $rgb-stripe-grey--night;
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry {
|
||||
@@ -163,7 +163,7 @@
|
||||
|
||||
&wrp-event-entries {
|
||||
box-shadow: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 3px;
|
||||
margin-top: 3px;
|
||||
margin-left: 6px;
|
||||
@@ -172,7 +172,7 @@
|
||||
|
||||
&bar-entry {
|
||||
margin: 0 4px;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&wind-speed {
|
||||
@@ -244,11 +244,11 @@
|
||||
|
||||
.night-mode .dm-time__ {
|
||||
&bar-clock {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-calendar-day {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry--event,
|
||||
@@ -266,15 +266,15 @@
|
||||
}
|
||||
|
||||
&wrp-event-entries {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&bar-entry {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&cvs-moon {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
border: 1px solid vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&calendar-ipt-date {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-money {
|
||||
width: 100%;
|
||||
@@ -13,7 +13,7 @@
|
||||
&ctrl {
|
||||
margin-top: 6px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
.night-mode .dm-money {
|
||||
&__ {
|
||||
&ctrl {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-cnt__ {
|
||||
&ipt {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-init {
|
||||
display: flex;
|
||||
@@ -20,7 +20,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-variant: small-caps;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
align-items: center;
|
||||
margin: 0 3px 0 0;
|
||||
padding-left: 5px;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.dm-init__btn-creature {
|
||||
@@ -129,8 +129,8 @@
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.dm-init__row-rhs input[type=number]::-webkit-inner-spin-button,
|
||||
.dm-init__row-rhs input[type=number]::-webkit-outer-spin-button {
|
||||
.dm-init__row-rhs input[type="number"]::-webkit-inner-spin-button,
|
||||
.dm-init__row-rhs input[type="number"]::-webkit-outer-spin-button {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
@@ -143,22 +143,22 @@
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.dm-init__wrp-controls {
|
||||
flex: none;
|
||||
height: 29px;
|
||||
padding: 3px;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
justify-content: space-evenly;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dm-init__rounds {
|
||||
width: 35px;
|
||||
height: $h-ipt-xs;
|
||||
height: vars.$h-ipt-xs;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
@@ -201,22 +201,22 @@
|
||||
|
||||
&btn-cond {
|
||||
min-width: 85px;
|
||||
color: white !important;
|
||||
color: #fff !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.dm-init__wrp-header {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-controls {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-creature {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active input,
|
||||
@@ -226,7 +226,6 @@
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-map__ {
|
||||
&picker-wrp-img {
|
||||
@@ -8,7 +8,7 @@
|
||||
line-height: 320px;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
border: 2px solid $rgb-border-grey;
|
||||
border: 2px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&picker-img {
|
||||
@@ -21,16 +21,13 @@
|
||||
}
|
||||
|
||||
&picker-disp-name {
|
||||
top: calc(100% - 20px);
|
||||
right: 14px;
|
||||
bottom: 0;
|
||||
left: 14px;
|
||||
inset: calc(100% - 20px) 14px 0 14px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-right: 1px solid $rgb-border-grey;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
background: #fff;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
border-right: 1px solid vars.$rgb-border-grey;
|
||||
border-left: 1px solid vars.$rgb-border-grey;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
@@ -38,11 +35,11 @@
|
||||
|
||||
.night-mode .dm-map__ {
|
||||
&picker-wrp-img {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&picker-disp-name {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-blank__ {
|
||||
&panel {
|
||||
background: $rgb-bg;
|
||||
background: vars.$rgb-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-blank__ {
|
||||
&panel {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.dm-unitconv {
|
||||
width: 100%;
|
||||
@@ -26,7 +26,9 @@
|
||||
}
|
||||
|
||||
&ipt.ipt-invalid:focus {
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(231, 99, 99, 0.6);
|
||||
box-shadow:
|
||||
inset 0 1px 1px rgb(0 0 0 / 7.5%),
|
||||
0 0 8px rgb(231 99 99 / 60%);
|
||||
border-color: #e92b31;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .best-ecgen__ {
|
||||
&wrp {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.ecgen {
|
||||
&__ {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
// region Expose variables for homebrew
|
||||
:root {
|
||||
--rgb-font: #{$rgb-font};
|
||||
--rgb-font--muted: #{$rgb-font--muted};
|
||||
--rgb-name: #{$rgb-name-red};
|
||||
--rgb-bg: #{$rgb-bg};
|
||||
--rgb-bg--alt: #{$rgb-bg--alt};
|
||||
--rgb-border--statblock: #{$rgb-border-yellow--statblock};
|
||||
--rgb-font: #{vars.$rgb-font};
|
||||
--rgb-font--muted: #{vars.$rgb-font--muted};
|
||||
--rgb-name: #{vars.$rgb-name-red};
|
||||
--rgb-bg: #{vars.$rgb-bg};
|
||||
--rgb-bg--alt: #{vars.$rgb-bg--alt};
|
||||
--rgb-border--statblock: #{vars.$rgb-border-yellow--statblock};
|
||||
}
|
||||
|
||||
:root.night-mode {
|
||||
--rgb-font: #{$rgb-font--night};
|
||||
--rgb-name: #{$rgb-name-red--night};
|
||||
--rgb-bg: #{$rgb-bg--night};
|
||||
--rgb-bg--alt: #{$rgb-bg--alt-night};
|
||||
--rgb-border--statblock: #{$rgb-border-grey--statblock-night};
|
||||
--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};
|
||||
}
|
||||
// endregion
|
||||
|
||||
@@ -1,84 +1,86 @@
|
||||
@import "vars";
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
|
||||
.night-mode .fltr {
|
||||
$flt-ignore: $rgb-bg--night;
|
||||
$flt-ignore: vars.$rgb-bg--night;
|
||||
$flt-ignore--hover: #323232;
|
||||
|
||||
&__ {
|
||||
&btn_nest {
|
||||
background: $flt-ignore;
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&--include {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&--include-all {
|
||||
background: $rgb-active-blue;
|
||||
background: vars.$rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude-all {
|
||||
background: $rgb-active-red;
|
||||
background: vars.$rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--both {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px $rgb-off-black;
|
||||
background: $rgb-border-grey--night;
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px vars.$rgb-off-black;
|
||||
background: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider--sub {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&pill {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
|
||||
&[state=ignore] {
|
||||
&[state="ignore"] {
|
||||
background: $flt-ignore;
|
||||
|
||||
&:hover {
|
||||
@@ -86,43 +88,42 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
&[state="yes"] {
|
||||
border-color: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-border);
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
border-color: darken($rgb-active-red, $pct-darken-border);
|
||||
&[state="no"] {
|
||||
border-color: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-border);
|
||||
}
|
||||
|
||||
&--muted {
|
||||
color: darken($rgb-font--muted, 7%);
|
||||
color: color.adjust(vars.$rgb-font--muted, $lightness: - 7%);
|
||||
|
||||
&[state=yes],
|
||||
&[state=no] {
|
||||
color: white;
|
||||
&[state="yes"],
|
||||
&[state="no"] {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&mini-view {
|
||||
background: #343434;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: linear-gradient(to top, $rgb-border-grey--night, #343434 1px);
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: linear-gradient(to top, vars.$rgb-border-grey--night, #343434 1px);
|
||||
}
|
||||
|
||||
&h-btn-logic--blue {
|
||||
color: $rgb-active-blue;
|
||||
color: vars.$rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-blue--light;
|
||||
color: vars.$rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-logic--red {
|
||||
color: $rgb-active-red;
|
||||
color: vars.$rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-red--light;
|
||||
color: vars.$rgb-active-red--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,13 +132,13 @@
|
||||
&wrp-row {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-values {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,7 +150,7 @@
|
||||
|
||||
&-cls__ {
|
||||
&tgl {
|
||||
@include cb-custom--night();
|
||||
@include vars.mix-cb-custom--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
@import "vars";
|
||||
@use "sass:color";
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
.dropdown-menu-filter {
|
||||
@use "vars";
|
||||
|
||||
@media (max-width: vars.$width-screen-md) {
|
||||
.ve-dropdown-menu-filter {
|
||||
max-height: 525px;
|
||||
}
|
||||
}
|
||||
@@ -33,7 +35,7 @@ $flt-ignore--hover: #e6e6e6;
|
||||
font-size: 15px;
|
||||
align-items: center;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
flex-direction: column;
|
||||
|
||||
&--multi {
|
||||
@@ -43,26 +45,26 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&h-text {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&h-wrp-btns-outer {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: initial !important;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
margin: ($spacer * 0.25) !important;
|
||||
margin: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&h-wrp-state-btns-outer {
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
flex-direction: column;
|
||||
|
||||
> * {
|
||||
@@ -85,18 +87,18 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&h-btn-logic--blue {
|
||||
color: $rgb-active-blue;
|
||||
color: vars.$rgb-active-blue;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-blue--dark;
|
||||
color: vars.$rgb-active-blue--dark;
|
||||
}
|
||||
}
|
||||
|
||||
&h-btn-logic--red {
|
||||
color: $rgb-active-red;
|
||||
color: vars.$rgb-active-red;
|
||||
|
||||
&:hover {
|
||||
color: $rgb-active-red--dark;
|
||||
color: vars.$rgb-active-red--dark;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,21 +106,21 @@ $flt-ignore--hover: #e6e6e6;
|
||||
&h-btn--all:focus,
|
||||
&h-btn--all:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-active-blue;
|
||||
text-decoration-color: vars.$rgb-active-blue;
|
||||
}
|
||||
|
||||
&h-btn--clear,
|
||||
&h-btn--clear:focus,
|
||||
&h-btn--clear:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-inactive-grey;
|
||||
text-decoration-color: vars.$rgb-inactive-grey;
|
||||
}
|
||||
|
||||
&h-btn--none,
|
||||
&h-btn--none:focus,
|
||||
&h-btn--none:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $rgb-active-red;
|
||||
text-decoration-color: vars.$rgb-active-red;
|
||||
}
|
||||
|
||||
&summary_item {
|
||||
@@ -138,13 +140,13 @@ $flt-ignore--hover: #e6e6e6;
|
||||
|
||||
&summary_item {
|
||||
&--include {
|
||||
color: $rgb-active-blue;
|
||||
text-shadow: 0 0 1px $rgb-active-blue;
|
||||
color: vars.$rgb-active-blue;
|
||||
text-shadow: 0 0 1px vars.$rgb-active-blue;
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
color: $rgb-active-red;
|
||||
text-shadow: 0 0 1px $rgb-active-red;
|
||||
color: vars.$rgb-active-red;
|
||||
text-shadow: 0 0 1px vars.$rgb-active-red;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,7 +154,7 @@ $flt-ignore--hover: #e6e6e6;
|
||||
margin: 0 3px;
|
||||
padding-left: 1px;
|
||||
cursor: default;
|
||||
background: $rgb-border-grey--trans;
|
||||
background: vars.$rgb-border-grey--trans;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
@@ -165,62 +167,62 @@ $flt-ignore--hover: #e6e6e6;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: $flt-ignore;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background-color: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&--include {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, transparent $fltr-stripe, transparent $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, transparent vars.$fltr-stripe, transparent vars.$fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: white;
|
||||
background: #fff;
|
||||
padding: 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--include-all {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, transparent, transparent vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
||||
}
|
||||
|
||||
span {
|
||||
background: white;
|
||||
background: #fff;
|
||||
padding: 1px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--exclude-all {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
background: vars.$rgb-active-red;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--both {
|
||||
background: repeating-linear-gradient(135deg, $rgb-active-blue, $rgb-active-blue $fltr-stripe, $rgb-active-red $fltr-stripe, $rgb-active-red $fltr-2stripe);
|
||||
color: white;
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-active-blue, vars.$rgb-active-blue vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-stripe, vars.$rgb-active-red vars.$fltr-2stripe);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: repeating-linear-gradient(135deg, darken($rgb-active-blue, $pct-darken-hover), darken($rgb-active-blue, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-stripe, darken($rgb-active-red, $pct-darken-hover) $fltr-2stripe);
|
||||
background: repeating-linear-gradient(135deg, color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover), color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-stripe, color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover) vars.$fltr-2stripe);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -231,15 +233,15 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&dropdown-divider {
|
||||
border-bottom: $rgb-border-grey 1px dotted;
|
||||
border-bottom: vars.$rgb-border-grey 1px dotted;
|
||||
width: 100%;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px $rgb-border-grey--muted;
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
box-shadow: inset 0 0 2px 2px vars.$rgb-border-grey--muted;
|
||||
height: 7px;
|
||||
flex-shrink: 0;
|
||||
border: 0;
|
||||
background: $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
@@ -253,8 +255,8 @@ $flt-ignore--hover: #e6e6e6;
|
||||
|
||||
&dropdown-divider--sub {
|
||||
border-style: dashed;
|
||||
width: calc(100% - #{$spacer * 2});
|
||||
border-color: $rgb-border-grey--trans;
|
||||
width: calc(100% - #{vars.$spacer * 2});
|
||||
border-color: vars.$rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&pill {
|
||||
@@ -266,30 +268,30 @@ $flt-ignore--hover: #e6e6e6;
|
||||
font-size: $sz-font-pill;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
float: left;
|
||||
|
||||
&:hover {
|
||||
background-color: $flt-ignore--hover;
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
border-color: darken($rgb-active-blue, $pct-darken-border);
|
||||
&[state="yes"] {
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
border-color: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
border-color: darken($rgb-active-red, $pct-darken-border);
|
||||
&[state="no"] {
|
||||
background: vars.$rgb-active-red;
|
||||
color: #fff;
|
||||
border-color: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -305,12 +307,12 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&--muted {
|
||||
background-color: darken($flt-ignore, 7%);
|
||||
color: lighten($rgb-font--muted, 7%);
|
||||
background-color: color.adjust($flt-ignore, $lightness: - 7%);
|
||||
color: color.adjust(vars.$rgb-font--muted, $lightness: 7%);
|
||||
|
||||
&[state=yes],
|
||||
&[state=no] {
|
||||
color: white;
|
||||
&[state="yes"],
|
||||
&[state="no"] {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -341,16 +343,16 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&mini-view {
|
||||
border-left: $rgb-border-grey 1px solid;
|
||||
border-right: $rgb-border-grey 1px solid;
|
||||
background: linear-gradient(to top, $rgb-border-grey, $rgb-bg--alt 1px);
|
||||
border-left: vars.$rgb-border-grey 1px solid;
|
||||
border-right: vars.$rgb-border-grey 1px solid;
|
||||
background: linear-gradient(to top, vars.$rgb-border-grey, vars.$rgb-bg--alt 1px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--no-sort-buttons {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
background: $rgb-bg--alt;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
background: vars.$rgb-bg--alt;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
min-height: 3px;
|
||||
@@ -369,26 +371,26 @@ $flt-ignore--hover: #e6e6e6;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: red line-through;
|
||||
text-decoration: #f00 line-through;
|
||||
}
|
||||
|
||||
&[state=yes] {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
&[state="yes"] {
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--default-sel[state=yes] {
|
||||
&--default-sel[state="yes"] {
|
||||
background: #48637a;
|
||||
}
|
||||
|
||||
&[state=no] {
|
||||
background: $rgb-name-red;
|
||||
color: white;
|
||||
&[state="no"] {
|
||||
background: vars.$rgb-name-red;
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--default-desel[state=no] {
|
||||
&--default-desel[state="no"] {
|
||||
background: #7a564f;
|
||||
}
|
||||
}
|
||||
@@ -404,8 +406,8 @@ $flt-ignore--hover: #e6e6e6;
|
||||
}
|
||||
|
||||
&h-summary-filtering {
|
||||
color: $rgb-off-black;
|
||||
text-shadow: 0 0 1px $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
text-shadow: 0 0 1px vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
&h-btn-toggle-display {
|
||||
@@ -459,14 +461,14 @@ $flt-ignore--hover: #e6e6e6;
|
||||
&wrp-row {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-values {
|
||||
max-height: 200px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
z-index: 1;
|
||||
top: 22px;
|
||||
right: 0;
|
||||
@@ -485,22 +487,22 @@ $flt-ignore--hover: #e6e6e6;
|
||||
border-radius: 3px;
|
||||
|
||||
&--yes {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
border: 1px solid lighten($rgb-active-blue, $pct-darken-border);
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
border: 1px solid color.adjust(vars.$rgb-active-blue, $lightness: vars.$pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-blue, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-blue, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--no {
|
||||
background: $rgb-active-red;
|
||||
color: white;
|
||||
border: 1px solid lighten($rgb-active-red, $pct-darken-border);
|
||||
background: vars.$rgb-active-red;
|
||||
color: #fff;
|
||||
border: 1px solid color.adjust(vars.$rgb-active-red, $lightness: vars.$pct-darken-border);
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-active-red, $pct-darken-hover);
|
||||
background: color.adjust(vars.$rgb-active-red, $lightness: - vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -508,7 +510,7 @@ $flt-ignore--hover: #e6e6e6;
|
||||
|
||||
&-src__ {
|
||||
&spc-pill {
|
||||
color: $rgb-font--muted;
|
||||
color: vars.$rgb-font--muted;
|
||||
}
|
||||
|
||||
&wrp-slider {
|
||||
@@ -519,18 +521,18 @@ $flt-ignore--hover: #e6e6e6;
|
||||
|
||||
&-cls__ {
|
||||
&tgl {
|
||||
@include cb-custom();
|
||||
@include vars.mix-cb-custom;
|
||||
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
&__pill {
|
||||
&[state=yes] > .fltr-src__spc-pill {
|
||||
&[state="yes"] > .fltr-src__spc-pill {
|
||||
color: #fff9;
|
||||
}
|
||||
|
||||
&[state=no] > .fltr-src__spc-pill {
|
||||
&[state="no"] > .fltr-src__spc-pill {
|
||||
color: #fffa;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .hwin {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
@keyframes kf-fade-in {
|
||||
from {
|
||||
@@ -15,13 +15,13 @@
|
||||
width: 600px;
|
||||
max-width: 92vw;
|
||||
min-width: 150px;
|
||||
z-index: $z-hwin;
|
||||
box-shadow: 0 0 12px 0 black;
|
||||
z-index: vars.$z-hwin;
|
||||
box-shadow: 0 0 12px 0 #000;
|
||||
animation-name: kf-fade-in;
|
||||
animation-duration: 150ms;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
|
||||
&--minified {
|
||||
.hoverborder {
|
||||
@@ -48,7 +48,7 @@
|
||||
max-height: initial;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
@media (width <= 1023px) {
|
||||
max-width: 95vw;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
max-height: 92vh;
|
||||
min-height: 20px;
|
||||
overflow-y: auto;
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
td div.border {
|
||||
height: 2px;
|
||||
background-color: $rgb-name-red;
|
||||
background-color: vars.$rgb-name-red;
|
||||
margin: 0 3px;
|
||||
padding: 0;
|
||||
border-right: 5px transparent;
|
||||
@@ -106,7 +106,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[data-perm=true] .hwin__top-border-icon {
|
||||
&[data-perm="true"] .hwin__top-border-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&[data-perm=true] .window-title {
|
||||
&[data-perm="true"] .window-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.hoverborder[data-display-title=true] ~ .hwin__wrp-table,
|
||||
.hoverborder[data-display-title=true] ~ .hoverborder {
|
||||
.hoverborder[data-display-title="true"] ~ .hwin__wrp-table,
|
||||
.hoverborder[data-display-title="true"] ~ .hoverborder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.lst__ {
|
||||
&wrp-search-glass {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .lootg__ {
|
||||
&wrp-output {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.lootg__ {
|
||||
&wrp-output {
|
||||
border-radius: 5px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,67 +1,69 @@
|
||||
@import "vars";
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
|
||||
// region Old
|
||||
.nav {
|
||||
.dropdown-menu--top {
|
||||
.ve-dropdown-menu--top {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-sm) {
|
||||
@media (max-width: vars.$width-screen-sm) {
|
||||
.nav > li > a {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.night-mode .nav > li > a {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.nav > li:not(.active) > a {
|
||||
color: $rgb-font--night;
|
||||
background-color: $rgb-bg--night;
|
||||
border: 1px solid $rgb-border-grey--trans-night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
border-top: 0;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
color: white;
|
||||
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav > li.active > a {
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: white;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.nav li.open > a,
|
||||
.nav li.open > a:focus,
|
||||
.nav li.open > a:hover {
|
||||
background-color: lighten($rgb-bg--night, 2%);
|
||||
border-left: 1px solid $rgb-link-blue;
|
||||
border-right: 1px solid $rgb-link-blue;
|
||||
border-color: $rgb-link-blue;
|
||||
background-color: color.adjust(vars.$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;
|
||||
}
|
||||
|
||||
.nav li.active.open > a,
|
||||
.nav li.active.open > a:focus,
|
||||
.nav li.active.open > a:hover {
|
||||
background-color: $rgb-off-black;
|
||||
background-color: vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-lg) {
|
||||
@media (max-width: vars.$width-screen-lg) {
|
||||
.nav .caret--right {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu--side {
|
||||
.nav .ve-dropdown-menu--side {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
@@ -93,16 +95,16 @@
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
background: vars.$rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -115,22 +117,22 @@
|
||||
|
||||
&lnk-item {
|
||||
padding: 3px 20px;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: $rgb-active-blue;
|
||||
color: white;
|
||||
background: vars.$rgb-active-blue;
|
||||
color: #fff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
color: white;
|
||||
background: vars.$rgb-active-blue--light;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -142,35 +144,35 @@
|
||||
&head {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
color: #fff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
background: vars.$rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&lnk-item {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: white;
|
||||
color: #fff;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-active-blue--light;
|
||||
background: vars.$rgb-active-blue--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .rd {
|
||||
&__ {
|
||||
&h--0,
|
||||
&h--1,
|
||||
&h--2 {
|
||||
color: $rgb-name-red--night;
|
||||
color: vars.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--1 {
|
||||
border-bottom-color: $rgb-name-red--night;
|
||||
border-bottom-color: vars.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--4 {
|
||||
color: $rgb-name-alt--night;
|
||||
color: vars.$rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&h--3 {
|
||||
color: $rgb-name-alt--night;
|
||||
color: vars.$rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&-image-title-inner {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&b-inset {
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
&b-data {
|
||||
border-color: $rgb-border-grey--statblock-night;
|
||||
border-color: vars.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
&b-flow {
|
||||
@@ -45,46 +45,46 @@
|
||||
}
|
||||
|
||||
&stats-name-page {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
&highlight {
|
||||
background-color: $rgb-bg-highlight--night;
|
||||
color: $rgb-bg--night;
|
||||
background-color: vars.$rgb-bg-highlight--night;
|
||||
color: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-item__ {
|
||||
&type-rarity-attunement {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-spell__ {
|
||||
&level-school-ritual {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-ability-icon {
|
||||
&__ {
|
||||
&fill-primary {
|
||||
fill: $rgb-font--night;
|
||||
fill: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
&fill-bg {
|
||||
fill: $rgb-bg--night;
|
||||
fill: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&stroke-bg {
|
||||
stroke: $rgb-bg--night;
|
||||
stroke: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-homebrew__ {
|
||||
&b {
|
||||
background-color: $rgb-bg-homebrew--night;
|
||||
background-color: vars.$rgb-bg-homebrew--night;
|
||||
}
|
||||
|
||||
&disp-old-content {
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
&disp-inline {
|
||||
background-color: $rgb-bg-homebrew--night;
|
||||
background-color: vars.$rgb-bg-homebrew--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
Renderer
|
||||
*/
|
||||
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
$rgb-inset-border: #656565;
|
||||
|
||||
@@ -21,8 +21,8 @@ $rgb-inset-border: #656565;
|
||||
--w-pl-list-no-bullets: 10px;
|
||||
}
|
||||
|
||||
@mixin rd__h--large() {
|
||||
color: $rgb-name-red;
|
||||
@mixin rd__h--large () {
|
||||
color: vars.$rgb-name-red;
|
||||
font-family: "Times New Roman", serif;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
@@ -101,9 +101,8 @@ $rgb-inset-border: #656565;
|
||||
&compact-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
place-content: flex-start space-between;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
&title-link {
|
||||
@@ -305,7 +304,7 @@ $rgb-inset-border: #656565;
|
||||
|
||||
// statsBlockSectionHead
|
||||
&h--0 {
|
||||
@include rd__h--large();
|
||||
@include rd__h--large;
|
||||
|
||||
font-size: var(--sz-font-h0);
|
||||
}
|
||||
@@ -313,17 +312,17 @@ $rgb-inset-border: #656565;
|
||||
// underline headers
|
||||
// statsBlockHead
|
||||
&h--1 {
|
||||
@include rd__h--large();
|
||||
@include rd__h--large;
|
||||
|
||||
font-size: var(--sz-font-h1);
|
||||
border-bottom: 1px solid $rgb-name-red;
|
||||
border-bottom: 1px solid vars.$rgb-name-red;
|
||||
margin: 0 0 0.2em;
|
||||
}
|
||||
|
||||
// basic headers
|
||||
// statsBlockSubHead
|
||||
&h--2 {
|
||||
@include rd__h--large();
|
||||
@include rd__h--large;
|
||||
|
||||
font-size: var(--sz-font-h2);
|
||||
}
|
||||
@@ -356,7 +355,7 @@ $rgb-inset-border: #656565;
|
||||
&h--2-flow-block > h4 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: $font-line-height;
|
||||
line-height: vars.$font-line-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -406,7 +405,7 @@ $rgb-inset-border: #656565;
|
||||
&b-inset {
|
||||
margin: 7px 15px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
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;
|
||||
@@ -417,7 +416,7 @@ $rgb-inset-border: #656565;
|
||||
}
|
||||
|
||||
&--readaloud {
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
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;
|
||||
@@ -430,7 +429,7 @@ $rgb-inset-border: #656565;
|
||||
}
|
||||
|
||||
&b-data {
|
||||
border: 3px solid $rgb-border-yellow--statblock;
|
||||
border: 3px solid vars.$rgb-border-yellow--statblock;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
margin: 5px;
|
||||
@@ -438,9 +437,9 @@ $rgb-inset-border: #656565;
|
||||
table-layout: fixed;
|
||||
|
||||
&--inset {
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
box-shadow: 0 0 4px 0 rgb(152 142 124);
|
||||
border: 1px solid $rgb-inset-border;
|
||||
background-color: rgba(156, 150, 120, 0.1);
|
||||
background-color: rgb(156 150 120 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -457,7 +456,7 @@ $rgb-inset-border: #656565;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 100, 100, 0.08);
|
||||
background: rgb(100 100 100 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -562,7 +561,7 @@ $rgb-inset-border: #656565;
|
||||
&b-flow {
|
||||
margin: 0 15px;
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 0 4px 0 rgb(152, 142, 124);
|
||||
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;
|
||||
@@ -574,9 +573,9 @@ $rgb-inset-border: #656565;
|
||||
}
|
||||
|
||||
&stats-name-page {
|
||||
font-family: "Convergence", Arial, sans-serif;
|
||||
font-family: Convergence, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@@ -590,7 +589,7 @@ $rgb-inset-border: #656565;
|
||||
}
|
||||
|
||||
&highlight {
|
||||
background-color: $rgb-bg-highlight;
|
||||
background-color: vars.$rgb-bg-highlight;
|
||||
}
|
||||
|
||||
&color {
|
||||
@@ -602,14 +601,14 @@ $rgb-inset-border: #656565;
|
||||
|
||||
&-item__ {
|
||||
&type-rarity-attunement {
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&-spell__ {
|
||||
&level-school-ritual {
|
||||
font-style: italic;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -618,22 +617,22 @@ $rgb-inset-border: #656565;
|
||||
|
||||
&__ {
|
||||
&fill-primary {
|
||||
fill: $rgb-off-black;
|
||||
fill: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
&fill-bg {
|
||||
fill: $rgb-bg;
|
||||
fill: vars.$rgb-bg;
|
||||
}
|
||||
|
||||
&stroke-bg {
|
||||
stroke: $rgb-bg;
|
||||
stroke: vars.$rgb-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-homebrew__ {
|
||||
&b {
|
||||
background-color: $rgb-bg-homebrew;
|
||||
background-color: vars.$rgb-bg-homebrew;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@@ -659,7 +658,7 @@ $rgb-inset-border: #656565;
|
||||
}
|
||||
|
||||
&disp-inline {
|
||||
background-color: $rgb-bg-homebrew;
|
||||
background-color: vars.$rgb-bg-homebrew;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .source {
|
||||
$rgb-source-PHB: $rgb-subclass--night;
|
||||
$rgb-source-PHB: vars.$rgb-subclass--night;
|
||||
$rgb-source-SADS: #4f63f5;
|
||||
$rgb-source-PSA: #eec276;
|
||||
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
@mixin mix-source-color ($rgb) {
|
||||
color: $rgb !important;
|
||||
border-color: $rgb !important;
|
||||
text-decoration-color: $rgb !important;
|
||||
}
|
||||
|
||||
.source {
|
||||
$rgb-source-category-site: #e50711;
|
||||
$rgb-source-category-extras: #9d4c4f;
|
||||
$rgb-source-category-prerelease: $rgb-subclass-ua;
|
||||
$rgb-source-category-prerelease: vars.$rgb-subclass-ua;
|
||||
$rgb-source-category-prerelease--local: #54ce19;
|
||||
$rgb-source-category-homebrew: $rgb-class-brew;
|
||||
$rgb-source-category-homebrew: vars.$rgb-class-brew;
|
||||
$rgb-source-category-homebrew--local: #4b40ed;
|
||||
|
||||
$rgb-source-PHB: #4a6898;
|
||||
$rgb-source-DMG: purple;
|
||||
$rgb-source-MM: green;
|
||||
$rgb-source-DMG: #800080;
|
||||
$rgb-source-MM: #008000;
|
||||
$rgb-source-SCAG: #76af76;
|
||||
$rgb-source-VGM: grey;
|
||||
$rgb-source-VGM: #808080;
|
||||
$rgb-source-OGA: #933d0f;
|
||||
$rgb-source-XGE: #ba7c00;
|
||||
$rgb-source-XMtS: #830051;
|
||||
$rgb-source-HotDQ: #ad8eba;
|
||||
$rgb-source-RoT: #ff2900;
|
||||
$rgb-source-CoS: purple;
|
||||
$rgb-source-OotA: grey;
|
||||
$rgb-source-SKT: darkcyan;
|
||||
$rgb-source-CoS: #800080;
|
||||
$rgb-source-OotA: #808080;
|
||||
$rgb-source-SKT: #008b8b;
|
||||
$rgb-source-PotA: #57b6c6;
|
||||
$rgb-source-LMoP: #8da851;
|
||||
$rgb-source-TftYP: #c94029;
|
||||
@@ -81,43 +87,32 @@
|
||||
$rgb-source-GHLoE: #c07e4e;
|
||||
$rgb-source-DoDk: #825494;
|
||||
$rgb-source-HWCS: #d0914b;
|
||||
$rgb-source-TD: #bb9528;
|
||||
|
||||
// region Categories
|
||||
|
||||
&-category- {
|
||||
&site {
|
||||
color: $rgb-source-category-site !important;
|
||||
border-color: $rgb-source-category-site !important;
|
||||
text-decoration-color: $rgb-source-category-site !important;
|
||||
@include mix-source-color($rgb-source-category-site);
|
||||
}
|
||||
|
||||
&extras {
|
||||
color: $rgb-source-category-extras !important;
|
||||
border-color: $rgb-source-category-extras !important;
|
||||
text-decoration-color: $rgb-source-category-extras !important;
|
||||
@include mix-source-color($rgb-source-category-extras);
|
||||
}
|
||||
|
||||
&homebrew {
|
||||
color: $rgb-source-category-homebrew !important;
|
||||
border-color: $rgb-source-category-homebrew !important;
|
||||
text-decoration-color: $rgb-source-category-homebrew !important;
|
||||
@include mix-source-color($rgb-source-category-homebrew);
|
||||
|
||||
&--local {
|
||||
color: $rgb-source-category-homebrew--local !important;
|
||||
border-color: $rgb-source-category-homebrew--local !important;
|
||||
text-decoration-color: $rgb-source-category-homebrew--local !important;
|
||||
@include mix-source-color($rgb-source-category-homebrew--local);
|
||||
}
|
||||
}
|
||||
|
||||
&spicy {
|
||||
color: $rgb-source-category-prerelease !important;
|
||||
border-color: $rgb-source-category-prerelease !important;
|
||||
text-decoration-color: $rgb-source-category-prerelease !important;
|
||||
@include mix-source-color($rgb-source-category-prerelease);
|
||||
|
||||
&--local {
|
||||
color: $rgb-source-category-prerelease--local !important;
|
||||
border-color: $rgb-source-category-prerelease--local !important;
|
||||
text-decoration-color: $rgb-source-category-prerelease--local !important;
|
||||
@include mix-source-color($rgb-source-category-prerelease--local);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -127,157 +122,108 @@
|
||||
// region Specific sources
|
||||
|
||||
&PHB {
|
||||
color: $rgb-source-PHB !important;
|
||||
border-color: $rgb-source-PHB !important;
|
||||
text-decoration-color: $rgb-source-PHB !important;
|
||||
@include mix-source-color($rgb-source-PHB);
|
||||
}
|
||||
|
||||
&DMG {
|
||||
color: $rgb-source-DMG !important;
|
||||
border-color: $rgb-source-DMG !important;
|
||||
text-decoration-color: $rgb-source-DMG !important;
|
||||
@include mix-source-color($rgb-source-DMG);
|
||||
}
|
||||
|
||||
&MM {
|
||||
color: $rgb-source-MM !important;
|
||||
border-color: $rgb-source-MM !important;
|
||||
text-decoration-color: $rgb-source-MM !important;
|
||||
@include mix-source-color($rgb-source-MM);
|
||||
}
|
||||
|
||||
&SCAG {
|
||||
color: $rgb-source-SCAG !important;
|
||||
border-color: $rgb-source-SCAG !important;
|
||||
text-decoration-color: $rgb-source-SCAG !important;
|
||||
@include mix-source-color($rgb-source-SCAG);
|
||||
}
|
||||
|
||||
&VGM {
|
||||
color: $rgb-source-VGM !important;
|
||||
border-color: $rgb-source-VGM !important;
|
||||
text-decoration-color: $rgb-source-VGM !important;
|
||||
@include mix-source-color($rgb-source-VGM);
|
||||
}
|
||||
|
||||
&OGA {
|
||||
color: $rgb-source-OGA !important;
|
||||
border-color: $rgb-source-OGA !important;
|
||||
text-decoration-color: $rgb-source-OGA !important;
|
||||
@include mix-source-color($rgb-source-OGA);
|
||||
}
|
||||
|
||||
&XGE,
|
||||
&TTP { // Tortles are counted as an XGE race for AL
|
||||
color: $rgb-source-XGE !important;
|
||||
border-color: $rgb-source-XGE !important;
|
||||
text-decoration-color: $rgb-source-XGE !important;
|
||||
// Tortles are counted as an XGE race for AL
|
||||
&TTP {
|
||||
@include mix-source-color($rgb-source-XGE);
|
||||
}
|
||||
|
||||
&XMtS {
|
||||
color: $rgb-source-XMtS !important;
|
||||
border-color: $rgb-source-XMtS !important;
|
||||
text-decoration-color: $rgb-source-XMtS !important;
|
||||
@include mix-source-color($rgb-source-XMtS);
|
||||
}
|
||||
|
||||
&HotDQ {
|
||||
color: $rgb-source-HotDQ !important;
|
||||
border-color: $rgb-source-HotDQ !important;
|
||||
text-decoration-color: $rgb-source-HotDQ !important;
|
||||
@include mix-source-color($rgb-source-HotDQ);
|
||||
}
|
||||
|
||||
&RoT {
|
||||
color: $rgb-source-RoT !important;
|
||||
border-color: $rgb-source-RoT !important;
|
||||
text-decoration-color: $rgb-source-RoT !important;
|
||||
@include mix-source-color($rgb-source-RoT);
|
||||
}
|
||||
|
||||
&CoS {
|
||||
color: $rgb-source-CoS !important;
|
||||
border-color: $rgb-source-CoS !important;
|
||||
text-decoration-color: $rgb-source-CoS !important;
|
||||
@include mix-source-color($rgb-source-CoS);
|
||||
}
|
||||
|
||||
&OotA {
|
||||
color: $rgb-source-OotA !important;
|
||||
border-color: $rgb-source-OotA !important;
|
||||
text-decoration-color: $rgb-source-OotA !important;
|
||||
@include mix-source-color($rgb-source-OotA);
|
||||
}
|
||||
|
||||
&SKT {
|
||||
color: $rgb-source-SKT !important;
|
||||
border-color: $rgb-source-SKT !important;
|
||||
text-decoration-color: $rgb-source-SKT !important;
|
||||
@include mix-source-color($rgb-source-SKT);
|
||||
}
|
||||
|
||||
&PotA,
|
||||
&EEPC {
|
||||
color: $rgb-source-PotA !important;
|
||||
border-color: $rgb-source-PotA !important;
|
||||
text-decoration-color: $rgb-source-PotA !important;
|
||||
@include mix-source-color($rgb-source-PotA);
|
||||
}
|
||||
|
||||
&LMoP {
|
||||
color: $rgb-source-LMoP !important;
|
||||
border-color: $rgb-source-LMoP !important;
|
||||
text-decoration-color: $rgb-source-LMoP !important;
|
||||
@include mix-source-color($rgb-source-LMoP);
|
||||
}
|
||||
|
||||
&TftYP {
|
||||
color: $rgb-source-TftYP !important;
|
||||
border-color: $rgb-source-TftYP !important;
|
||||
text-decoration-color: $rgb-source-TftYP !important;
|
||||
@include mix-source-color($rgb-source-TftYP);
|
||||
}
|
||||
|
||||
&ToA {
|
||||
color: $rgb-source-ToA !important;
|
||||
border-color: $rgb-source-ToA !important;
|
||||
text-decoration-color: $rgb-source-ToA !important;
|
||||
@include mix-source-color($rgb-source-ToA);
|
||||
}
|
||||
|
||||
&MTF {
|
||||
color: $rgb-source-MTF !important;
|
||||
border-color: $rgb-source-MTF !important;
|
||||
text-decoration-color: $rgb-source-MTF !important;
|
||||
@include mix-source-color($rgb-source-MTF);
|
||||
}
|
||||
|
||||
&WDH {
|
||||
color: $rgb-source-WDH !important;
|
||||
border-color: $rgb-source-WDH !important;
|
||||
text-decoration-color: $rgb-source-WDH !important;
|
||||
@include mix-source-color($rgb-source-WDH);
|
||||
}
|
||||
|
||||
&GGR,
|
||||
&KKW {
|
||||
color: $rgb-source-GGR !important;
|
||||
border-color: $rgb-source-GGR !important;
|
||||
text-decoration-color: $rgb-source-GGR !important;
|
||||
@include mix-source-color($rgb-source-GGR);
|
||||
}
|
||||
|
||||
&WDMM {
|
||||
color: $rgb-source-WDMM !important;
|
||||
border-color: $rgb-source-WDMM !important;
|
||||
text-decoration-color: $rgb-source-WDMM !important;
|
||||
@include mix-source-color($rgb-source-WDMM);
|
||||
}
|
||||
|
||||
&LLK {
|
||||
color: $rgb-source-LLK !important;
|
||||
border-color: $rgb-source-LLK !important;
|
||||
text-decoration-color: $rgb-source-LLK !important;
|
||||
@include mix-source-color($rgb-source-LLK);
|
||||
}
|
||||
|
||||
&AZfyT {
|
||||
color: $rgb-source-AZfyT !important;
|
||||
border-color: $rgb-source-AZfyT !important;
|
||||
text-decoration-color: $rgb-source-AZfyT !important;
|
||||
@include mix-source-color($rgb-source-AZfyT);
|
||||
}
|
||||
|
||||
&GoS {
|
||||
color: $rgb-source-GoS !important;
|
||||
border-color: $rgb-source-GoS !important;
|
||||
text-decoration-color: $rgb-source-GoS !important;
|
||||
@include mix-source-color($rgb-source-GoS);
|
||||
}
|
||||
|
||||
&AI,
|
||||
&OoW {
|
||||
color: $rgb-source-AI !important;
|
||||
border-color: $rgb-source-AI !important;
|
||||
text-decoration-color: $rgb-source-AI !important;
|
||||
@include mix-source-color($rgb-source-AI);
|
||||
}
|
||||
|
||||
// These are all from the same family
|
||||
@@ -286,53 +232,37 @@
|
||||
&DC,
|
||||
&SDW,
|
||||
&SLW {
|
||||
color: $rgb-source-ESK !important;
|
||||
border-color: $rgb-source-ESK !important;
|
||||
text-decoration-color: $rgb-source-ESK !important;
|
||||
@include mix-source-color($rgb-source-ESK);
|
||||
}
|
||||
|
||||
&BGDIA {
|
||||
color: $rgb-source-BGDIA !important;
|
||||
border-color: $rgb-source-BGDIA !important;
|
||||
text-decoration-color: $rgb-source-BGDIA !important;
|
||||
@include mix-source-color($rgb-source-BGDIA);
|
||||
}
|
||||
|
||||
&ERLW,
|
||||
&EFR {
|
||||
color: $rgb-source-ERLW !important;
|
||||
border-color: $rgb-source-ERLW !important;
|
||||
text-decoration-color: $rgb-source-ERLW !important;
|
||||
@include mix-source-color($rgb-source-ERLW);
|
||||
}
|
||||
|
||||
&RMR,
|
||||
&RMBRE {
|
||||
color: $rgb-source-RMR !important;
|
||||
border-color: $rgb-source-RMR !important;
|
||||
text-decoration-color: $rgb-source-RMR !important;
|
||||
@include mix-source-color($rgb-source-RMR);
|
||||
}
|
||||
|
||||
&MFF {
|
||||
color: $rgb-source-MFF !important;
|
||||
border-color: $rgb-source-MFF !important;
|
||||
text-decoration-color: $rgb-source-MFF !important;
|
||||
@include mix-source-color($rgb-source-MFF);
|
||||
}
|
||||
|
||||
&LR {
|
||||
color: $rgb-source-LR !important;
|
||||
border-color: $rgb-source-LR !important;
|
||||
text-decoration-color: $rgb-source-LR !important;
|
||||
@include mix-source-color($rgb-source-LR);
|
||||
}
|
||||
|
||||
&IMR {
|
||||
color: $rgb-source-IMR !important;
|
||||
border-color: $rgb-source-IMR !important;
|
||||
text-decoration-color: $rgb-source-IMR !important;
|
||||
@include mix-source-color($rgb-source-IMR);
|
||||
}
|
||||
|
||||
&SADS {
|
||||
color: $rgb-source-SADS !important;
|
||||
border-color: $rgb-source-SADS !important;
|
||||
text-decoration-color: $rgb-source-SADS !important;
|
||||
@include mix-source-color($rgb-source-SADS);
|
||||
}
|
||||
|
||||
&EGW,
|
||||
@@ -340,104 +270,72 @@
|
||||
&DD,
|
||||
&US,
|
||||
&ToR {
|
||||
color: $rgb-source-EGW !important;
|
||||
border-color: $rgb-source-EGW !important;
|
||||
text-decoration-color: $rgb-source-EGW !important;
|
||||
@include mix-source-color($rgb-source-EGW);
|
||||
}
|
||||
|
||||
&MOT {
|
||||
color: $rgb-source-MOT !important;
|
||||
border-color: $rgb-source-MOT !important;
|
||||
text-decoration-color: $rgb-source-MOT !important;
|
||||
@include mix-source-color($rgb-source-MOT);
|
||||
}
|
||||
|
||||
&IDRotF {
|
||||
color: $rgb-source-IDRotF !important;
|
||||
border-color: $rgb-source-IDRotF !important;
|
||||
text-decoration-color: $rgb-source-IDRotF !important;
|
||||
@include mix-source-color($rgb-source-IDRotF);
|
||||
}
|
||||
|
||||
&TCE {
|
||||
color: $rgb-source-TCE !important;
|
||||
border-color: $rgb-source-TCE !important;
|
||||
text-decoration-color: $rgb-source-TCE !important;
|
||||
@include mix-source-color($rgb-source-TCE);
|
||||
}
|
||||
|
||||
&AL {
|
||||
color: $rgb-source-AL !important;
|
||||
border-color: $rgb-source-AL !important;
|
||||
text-decoration-color: $rgb-source-AL !important;
|
||||
@include mix-source-color($rgb-source-AL);
|
||||
}
|
||||
|
||||
&HF {
|
||||
color: $rgb-source-HF !important;
|
||||
border-color: $rgb-source-HF !important;
|
||||
text-decoration-color: $rgb-source-HF !important;
|
||||
@include mix-source-color($rgb-source-HF);
|
||||
}
|
||||
|
||||
&CM {
|
||||
color: $rgb-source-CM !important;
|
||||
border-color: $rgb-source-CM !important;
|
||||
text-decoration-color: $rgb-source-CM !important;
|
||||
@include mix-source-color($rgb-source-CM);
|
||||
}
|
||||
|
||||
&VRGR,
|
||||
&HoL {
|
||||
color: $rgb-source-VRGR !important;
|
||||
border-color: $rgb-source-VRGR !important;
|
||||
text-decoration-color: $rgb-source-VRGR !important;
|
||||
@include mix-source-color($rgb-source-VRGR);
|
||||
}
|
||||
|
||||
&RtG {
|
||||
color: $rgb-source-RtG !important;
|
||||
border-color: $rgb-source-RtG !important;
|
||||
text-decoration-color: $rgb-source-RtG !important;
|
||||
@include mix-source-color($rgb-source-RtG);
|
||||
}
|
||||
|
||||
&AitFR {
|
||||
color: $rgb-source-AitFR !important;
|
||||
border-color: $rgb-source-AitFR !important;
|
||||
text-decoration-color: $rgb-source-AitFR !important;
|
||||
@include mix-source-color($rgb-source-AitFR);
|
||||
|
||||
&-ISF,
|
||||
&-THP,
|
||||
&-AVT,
|
||||
&-DN,
|
||||
&-FCD {
|
||||
color: $rgb-source-AitFR !important;
|
||||
border-color: $rgb-source-AitFR !important;
|
||||
text-decoration-color: $rgb-source-AitFR !important;
|
||||
@include mix-source-color($rgb-source-AitFR);
|
||||
}
|
||||
}
|
||||
|
||||
&WBtW {
|
||||
color: $rgb-source-WBtW !important;
|
||||
border-color: $rgb-source-WBtW !important;
|
||||
text-decoration-color: $rgb-source-WBtW !important;
|
||||
@include mix-source-color($rgb-source-WBtW);
|
||||
}
|
||||
|
||||
&DoD {
|
||||
color: $rgb-source-DoD !important;
|
||||
border-color: $rgb-source-DoD !important;
|
||||
text-decoration-color: $rgb-source-DoD !important;
|
||||
@include mix-source-color($rgb-source-DoD);
|
||||
}
|
||||
|
||||
&MaBJoV {
|
||||
color: $rgb-source-MaBJoV !important;
|
||||
border-color: $rgb-source-MaBJoV !important;
|
||||
text-decoration-color: $rgb-source-MaBJoV !important;
|
||||
@include mix-source-color($rgb-source-MaBJoV);
|
||||
}
|
||||
|
||||
&FTD {
|
||||
color: $rgb-source-FTD !important;
|
||||
border-color: $rgb-source-FTD !important;
|
||||
text-decoration-color: $rgb-source-FTD !important;
|
||||
@include mix-source-color($rgb-source-FTD);
|
||||
}
|
||||
|
||||
&NRH {
|
||||
color: $rgb-source-NRH !important;
|
||||
border-color: $rgb-source-NRH !important;
|
||||
text-decoration-color: $rgb-source-NRH !important;
|
||||
@include mix-source-color($rgb-source-NRH);
|
||||
|
||||
&-TCMC,
|
||||
&-AVitW,
|
||||
@@ -446,43 +344,31 @@
|
||||
&-TLT,
|
||||
&-AWoL,
|
||||
&-AT {
|
||||
color: $rgb-source-NRH !important;
|
||||
border-color: $rgb-source-NRH !important;
|
||||
text-decoration-color: $rgb-source-NRH !important;
|
||||
@include mix-source-color($rgb-source-NRH);
|
||||
}
|
||||
}
|
||||
|
||||
&SCC {
|
||||
color: $rgb-source-SCC !important;
|
||||
border-color: $rgb-source-SCC !important;
|
||||
text-decoration-color: $rgb-source-SCC !important;
|
||||
@include mix-source-color($rgb-source-SCC);
|
||||
|
||||
&-CK,
|
||||
&-HfMT,
|
||||
&-TMM,
|
||||
&-ARiR {
|
||||
color: $rgb-source-SCC !important;
|
||||
border-color: $rgb-source-SCC !important;
|
||||
text-decoration-color: $rgb-source-SCC !important;
|
||||
@include mix-source-color($rgb-source-SCC);
|
||||
}
|
||||
}
|
||||
|
||||
&MPMM {
|
||||
color: $rgb-source-MPMM !important;
|
||||
border-color: $rgb-source-MPMM !important;
|
||||
text-decoration-color: $rgb-source-MPMM !important;
|
||||
@include mix-source-color($rgb-source-MPMM);
|
||||
}
|
||||
|
||||
&CRCotN {
|
||||
color: $rgb-source-CRCotN !important;
|
||||
border-color: $rgb-source-CRCotN !important;
|
||||
text-decoration-color: $rgb-source-CRCotN !important;
|
||||
@include mix-source-color($rgb-source-CRCotN);
|
||||
}
|
||||
|
||||
&JttRC {
|
||||
color: $rgb-source-JttRC !important;
|
||||
border-color: $rgb-source-JttRC !important;
|
||||
text-decoration-color: $rgb-source-JttRC !important;
|
||||
@include mix-source-color($rgb-source-JttRC);
|
||||
}
|
||||
|
||||
&SjA,
|
||||
@@ -490,135 +376,97 @@
|
||||
&AAG,
|
||||
&BAM,
|
||||
&LoX {
|
||||
color: $rgb-source-SAiS !important;
|
||||
border-color: $rgb-source-SAiS !important;
|
||||
text-decoration-color: $rgb-source-SAiS !important;
|
||||
@include mix-source-color($rgb-source-SAiS);
|
||||
}
|
||||
|
||||
&DoSI {
|
||||
color: $rgb-source-DoSI !important;
|
||||
border-color: $rgb-source-DoSI !important;
|
||||
text-decoration-color: $rgb-source-DoSI !important;
|
||||
@include mix-source-color($rgb-source-DoSI);
|
||||
}
|
||||
|
||||
&DSotDQ {
|
||||
color: $rgb-source-DSotDQ !important;
|
||||
border-color: $rgb-source-DSotDQ !important;
|
||||
text-decoration-color: $rgb-source-DSotDQ !important;
|
||||
@include mix-source-color($rgb-source-DSotDQ);
|
||||
}
|
||||
|
||||
&PSA {
|
||||
color: $rgb-source-PSA !important;
|
||||
border-color: $rgb-source-PSA !important;
|
||||
text-decoration-color: $rgb-source-PSA !important;
|
||||
@include mix-source-color($rgb-source-PSA);
|
||||
}
|
||||
|
||||
&PSD {
|
||||
color: $rgb-source-PSD !important;
|
||||
border-color: $rgb-source-PSD !important;
|
||||
text-decoration-color: $rgb-source-PSD !important;
|
||||
@include mix-source-color($rgb-source-PSD);
|
||||
}
|
||||
|
||||
&PSI {
|
||||
color: $rgb-source-PSI !important;
|
||||
border-color: $rgb-source-PSI !important;
|
||||
text-decoration-color: $rgb-source-PSI !important;
|
||||
@include mix-source-color($rgb-source-PSI);
|
||||
}
|
||||
|
||||
&PSK {
|
||||
color: $rgb-source-PSK !important;
|
||||
border-color: $rgb-source-PSK !important;
|
||||
text-decoration-color: $rgb-source-PSK !important;
|
||||
@include mix-source-color($rgb-source-PSK);
|
||||
}
|
||||
|
||||
&PSX {
|
||||
color: $rgb-source-PSX !important;
|
||||
border-color: $rgb-source-PSX !important;
|
||||
text-decoration-color: $rgb-source-PSX !important;
|
||||
@include mix-source-color($rgb-source-PSX);
|
||||
}
|
||||
|
||||
&PSZ {
|
||||
color: $rgb-source-PSZ !important;
|
||||
border-color: $rgb-source-PSZ !important;
|
||||
text-decoration-color: $rgb-source-PSZ !important;
|
||||
@include mix-source-color($rgb-source-PSZ);
|
||||
}
|
||||
|
||||
&KftGV {
|
||||
color: $rgb-source-KftGV !important;
|
||||
border-color: $rgb-source-KftGV !important;
|
||||
text-decoration-color: $rgb-source-KftGV !important;
|
||||
@include mix-source-color($rgb-source-KftGV);
|
||||
}
|
||||
|
||||
&HAT-TG,
|
||||
&HAT-LMI {
|
||||
color: $rgb-source-HAT !important;
|
||||
border-color: $rgb-source-HAT !important;
|
||||
text-decoration-color: $rgb-source-HAT !important;
|
||||
@include mix-source-color($rgb-source-HAT);
|
||||
}
|
||||
|
||||
&BGG {
|
||||
color: $rgb-source-BGG !important;
|
||||
border-color: $rgb-source-BGG !important;
|
||||
text-decoration-color: $rgb-source-BGG !important;
|
||||
@include mix-source-color($rgb-source-BGG);
|
||||
}
|
||||
|
||||
&TDCSR {
|
||||
color: $rgb-source-TDCSR !important;
|
||||
border-color: $rgb-source-TDCSR !important;
|
||||
text-decoration-color: $rgb-source-TDCSR !important;
|
||||
@include mix-source-color($rgb-source-TDCSR);
|
||||
}
|
||||
|
||||
&PaBTSO {
|
||||
color: $rgb-source-PaBTSO !important;
|
||||
border-color: $rgb-source-PaBTSO !important;
|
||||
text-decoration-color: $rgb-source-PaBTSO !important;
|
||||
@include mix-source-color($rgb-source-PaBTSO);
|
||||
}
|
||||
|
||||
&PAitM,
|
||||
&SatO,
|
||||
&ToFW,
|
||||
&MPP {
|
||||
color: $rgb-source-PAitM !important;
|
||||
border-color: $rgb-source-PAitM !important;
|
||||
text-decoration-color: $rgb-source-PAitM !important;
|
||||
@include mix-source-color($rgb-source-PAitM);
|
||||
}
|
||||
|
||||
&CoA {
|
||||
color: $rgb-source-CoA !important;
|
||||
border-color: $rgb-source-CoA !important;
|
||||
text-decoration-color: $rgb-source-CoA !important;
|
||||
@include mix-source-color($rgb-source-CoA);
|
||||
}
|
||||
|
||||
&HFFotM {
|
||||
color: $rgb-source-HFFotM !important;
|
||||
border-color: $rgb-source-HFFotM !important;
|
||||
text-decoration-color: $rgb-source-HFFotM !important;
|
||||
@include mix-source-color($rgb-source-HFFotM);
|
||||
}
|
||||
|
||||
&BMT,
|
||||
&DMTCRG {
|
||||
color: $rgb-source-BMT !important;
|
||||
border-color: $rgb-source-BMT !important;
|
||||
text-decoration-color: $rgb-source-BMT !important;
|
||||
@include mix-source-color($rgb-source-BMT);
|
||||
}
|
||||
|
||||
&GHLoE {
|
||||
color: $rgb-source-GHLoE !important;
|
||||
border-color: $rgb-source-GHLoE !important;
|
||||
text-decoration-color: $rgb-source-GHLoE !important;
|
||||
@include mix-source-color($rgb-source-GHLoE);
|
||||
}
|
||||
|
||||
&DoDk {
|
||||
color: $rgb-source-DoDk !important;
|
||||
border-color: $rgb-source-DoDk !important;
|
||||
text-decoration-color: $rgb-source-DoDk !important;
|
||||
@include mix-source-color($rgb-source-DoDk);
|
||||
}
|
||||
|
||||
&HWCS,
|
||||
&HWAitW {
|
||||
color: $rgb-source-HWCS !important;
|
||||
border-color: $rgb-source-HWCS !important;
|
||||
text-decoration-color: $rgb-source-HWCS !important;
|
||||
@include mix-source-color($rgb-source-HWCS);
|
||||
}
|
||||
|
||||
&TD {
|
||||
@include mix-source-color($rgb-source-TD);
|
||||
}
|
||||
// endregion
|
||||
}
|
||||
@@ -681,6 +529,6 @@
|
||||
}
|
||||
|
||||
&--legacy {
|
||||
color: $rgb-font--muted;
|
||||
color: vars.$rgb-font--muted;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode .statgen .statgen {
|
||||
&-shared__ {
|
||||
@@ -11,26 +11,26 @@
|
||||
|
||||
&-rolled__ {
|
||||
&wrp-results {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&-pb__ {
|
||||
&ipt-budget {
|
||||
&--error {
|
||||
border-color: red;
|
||||
border-color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-asi__ {
|
||||
&row {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans-night;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&cell {
|
||||
&--top {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.statgen .statgen { // (Class namespace to enable selectors in FVTT)
|
||||
// (Class namespace to enable selectors in FVTT)
|
||||
.statgen .statgen {
|
||||
&-shared__ {
|
||||
&btn-reset {
|
||||
right: -3px;
|
||||
width: $h-ipt-xs;
|
||||
height: $h-ipt-xs;
|
||||
width: vars.$h-ipt-xs;
|
||||
height: vars.$h-ipt-xs;
|
||||
}
|
||||
|
||||
&ipt {
|
||||
@@ -13,7 +14,7 @@
|
||||
height: 24px;
|
||||
|
||||
&[readonly] {
|
||||
background-color: $rgb-border-grey--muted;
|
||||
background-color: vars.$rgb-border-grey--muted;
|
||||
}
|
||||
|
||||
&--sel {
|
||||
@@ -35,7 +36,7 @@
|
||||
|
||||
&-rolled__ {
|
||||
&wrp-results {
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -49,15 +50,15 @@
|
||||
width: 70px;
|
||||
|
||||
&--error {
|
||||
border-color: red;
|
||||
border-color: #f00;
|
||||
}
|
||||
}
|
||||
|
||||
&header {
|
||||
height: $h-ipt-xs;
|
||||
height: vars.$h-ipt-xs;
|
||||
|
||||
&--group {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&--choose-from {
|
||||
@@ -85,7 +86,7 @@
|
||||
|
||||
&-asi__ {
|
||||
&row {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&cell {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,9 @@
|
||||
/*
|
||||
Shared UI components
|
||||
*/
|
||||
@use "sass:color";
|
||||
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.night-mode .ui__ {
|
||||
@@ -17,14 +18,14 @@ Shared UI components
|
||||
/* region List */
|
||||
.night-mode .ui-list__ {
|
||||
&wrp-preview {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&btn-inline {
|
||||
color: $rgb-font--night;
|
||||
color: vars.$rgb-font--night;
|
||||
|
||||
&:hover {
|
||||
color: lighten($rgb-font--night, 10%);
|
||||
color: color.adjust(vars.$rgb-font--night, $lightness: 10%);
|
||||
background: #ffffff30;
|
||||
}
|
||||
}
|
||||
@@ -34,7 +35,7 @@ Shared UI components
|
||||
/* region Source overlay */
|
||||
.night-mode .ui-source__ {
|
||||
÷r {
|
||||
background: $rgb-border-grey--night;
|
||||
background: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -43,22 +44,22 @@ Shared UI components
|
||||
.night-mode .ui-modal__ {
|
||||
&header {
|
||||
&--border {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&footer {
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&overlay-blind {
|
||||
background-color: $rgb-bg--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&inner {
|
||||
background: $rgb-bg--night;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.56);
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-bg--night;
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
|
||||
&--mode-fullscreen {
|
||||
box-shadow: none;
|
||||
@@ -66,7 +67,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&row--cb:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -74,15 +75,15 @@ Shared UI components
|
||||
/* region Search */
|
||||
.night-mode .ui-search__ {
|
||||
&row {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-off-black;
|
||||
background: vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&ipt-search-sub-wrp {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -93,29 +94,29 @@ Shared UI components
|
||||
&--active,
|
||||
&--active:focus,
|
||||
&--active:hover,
|
||||
&--active:active, {
|
||||
background-color: $rgb-btn-default-active--night;
|
||||
&--active:active {
|
||||
background-color: vars.$rgb-btn-default-active--night;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-body {
|
||||
&--background {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
border-bottom-color: darken($rgb-border-grey--trans-night, 15%);
|
||||
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%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-heads--border {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .ui-tab-side__ {
|
||||
&wrp-tab {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -123,33 +124,33 @@ Shared UI components
|
||||
/* region Proficiency */
|
||||
.night-mode .ui-prof__ {
|
||||
&btn-cycle {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include shadow-active--night();
|
||||
@include vars.mix-shadow-active--night;
|
||||
}
|
||||
|
||||
&[data-state="0"] {
|
||||
background: $rgb-bg--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&[data-state="1"] {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
background: vars.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
|
||||
}
|
||||
|
||||
&[data-state="2"] {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
background: vars.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
|
||||
|
||||
&::before {
|
||||
color: $rgb-bg--night;
|
||||
color: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-state="3"] {
|
||||
background: repeating-linear-gradient(135deg, $rgb-bg--night, $rgb-bg--night 10px, $rgb-border-grey--night 10px, $rgb-border-grey--night 20px);
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -158,12 +159,12 @@ Shared UI components
|
||||
/* region Direction picker */
|
||||
.night-mode .ui-dir__ {
|
||||
&face {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&arm {
|
||||
background: $rgb-font--night;
|
||||
background: vars.$rgb-font--night;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -172,8 +173,8 @@ Shared UI components
|
||||
/* region Hover tips */
|
||||
.night-mode .ui-tip__ {
|
||||
&child {
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -181,25 +182,25 @@ Shared UI components
|
||||
/* region Context menu */
|
||||
.night-mode .ui-ctx {
|
||||
&__wrp {
|
||||
background: $rgb-bg--night;
|
||||
border: 1px solid $rgb-border-grey--trans-night;
|
||||
border-top-color: $rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
border-top-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background: $rgb-border-grey--night;
|
||||
background: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
color: white;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
background: $rgb-bg--night;
|
||||
color: $rgb-font--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -209,7 +210,7 @@ Shared UI components
|
||||
.night-mode .ui-pick {
|
||||
&__ {
|
||||
&disp-text {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -218,7 +219,7 @@ Shared UI components
|
||||
/* region "Copied" tooltip */
|
||||
.night-mode .clp__ {
|
||||
&disp-copied {
|
||||
background: radial-gradient(ellipse at center, $rgb-bg--night 0%, $rgb-bg--night 35%, transparent 75%, transparent 100%);
|
||||
background: radial-gradient(ellipse at center, vars.$rgb-bg--night 0%, vars.$rgb-bg--night 35%, transparent 75%, transparent 100%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -226,8 +227,8 @@ Shared UI components
|
||||
/* region Decorated inputs */
|
||||
.night-mode .ui-ideco__ {
|
||||
&btn-ticker {
|
||||
background: $rgb-border-grey--night;
|
||||
color: white;
|
||||
background: vars.$rgb-border-grey--night;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
@@ -238,15 +239,15 @@ Shared UI components
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-border-grey--night, $pct-darken-hover);
|
||||
color: white;
|
||||
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
background: darken($rgb-border-grey--night, $pct-darken-active);
|
||||
color: white;
|
||||
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -259,20 +260,20 @@ Shared UI components
|
||||
}
|
||||
|
||||
&wrp-options {
|
||||
background-color: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-option {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
|
||||
&:focus.active,
|
||||
&:hover.active {
|
||||
background: lighten($rgb-bg--alt-night, $pct-darken-active);
|
||||
background: color.adjust(vars.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -282,35 +283,34 @@ Shared UI components
|
||||
.night-mode .ui-slidr {
|
||||
&__ {
|
||||
&thumb {
|
||||
background: $rgb-border-grey--trans;
|
||||
border-color: $rgb-font--night;
|
||||
background: vars.$rgb-border-grey--trans;
|
||||
border-color: vars.$rgb-font--night;
|
||||
|
||||
&--hover,
|
||||
&:hover {
|
||||
background: lighten($rgb-border-grey--trans, 10%);
|
||||
border-color: $rgb-font--night;
|
||||
background: color.adjust(vars.$rgb-border-grey--trans, $lightness: 10%);
|
||||
border-color: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&track-outer {
|
||||
border-color: $rgb-border-grey--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&track-inner {
|
||||
background: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&disp-value {
|
||||
&--visible {
|
||||
border-color: $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&pip {
|
||||
background: $rgb-font--night;
|
||||
background: vars.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/*
|
||||
Shared UI components
|
||||
*/
|
||||
|
||||
@import "vars";
|
||||
@use "sass:color";
|
||||
@use "vars";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.ui__ {
|
||||
@@ -12,7 +12,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&ipt-color {
|
||||
width: $w-ipt-number-2-digit;
|
||||
width: vars.$w-ipt-number-2-digit;
|
||||
padding: 0;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
@@ -20,7 +20,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
background: $rgb-bg-orange;
|
||||
background: vars.$rgb-bg-orange;
|
||||
font-size: 90%;
|
||||
border-top-left-radius: 5px;
|
||||
margin-top: 1px;
|
||||
@@ -47,11 +47,11 @@ Shared UI components
|
||||
|
||||
&btn-inline {
|
||||
cursor: pointer;
|
||||
color: $rgb-font--muted;
|
||||
color: vars.$rgb-font--muted;
|
||||
|
||||
&:hover {
|
||||
background: darken($rgb-shadow-grey, 20%);
|
||||
color: darken($rgb-font--muted, 25%);
|
||||
background: color.adjust(vars.$rgb-shadow-grey, $lightness: - 20%);
|
||||
color: color.adjust(vars.$rgb-font--muted, $lightness: - 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -72,7 +72,7 @@ Shared UI components
|
||||
÷r {
|
||||
height: 1px;
|
||||
width: 30px;
|
||||
background: $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey;
|
||||
display: inline-block;
|
||||
margin: 0 3px;
|
||||
}
|
||||
@@ -102,7 +102,7 @@ Shared UI components
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,25 +121,25 @@ Shared UI components
|
||||
|
||||
&header {
|
||||
&--border {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans;
|
||||
}
|
||||
|
||||
&--fullscreen {
|
||||
@include shadow-2();
|
||||
@include vars.mix-shadow-2;
|
||||
}
|
||||
}
|
||||
|
||||
&footer {
|
||||
border-top: 1px solid $rgb-border-grey--trans;
|
||||
border-top: 1px solid vars.$rgb-border-grey--trans;
|
||||
|
||||
&--fullscreen {
|
||||
@include shadow-2();
|
||||
@include vars.mix-shadow-2;
|
||||
}
|
||||
}
|
||||
|
||||
&overlay {
|
||||
position: fixed;
|
||||
z-index: $z-modal-wrapper;
|
||||
z-index: vars.$z-modal-wrapper;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
@@ -147,16 +147,16 @@ Shared UI components
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $rgb-modal-overlay-grey;
|
||||
background-color: vars.$rgb-modal-overlay-grey;
|
||||
}
|
||||
|
||||
&overlay-blind {
|
||||
background-color: white;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&inner {
|
||||
position: relative;
|
||||
z-index: $z-modal-inner;
|
||||
z-index: vars.$z-modal-inner;
|
||||
top: initial;
|
||||
left: initial;
|
||||
margin: 60px auto;
|
||||
@@ -167,24 +167,24 @@ Shared UI components
|
||||
max-height: 400px;
|
||||
min-height: 400px;
|
||||
font-size: 14px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 17.5%);
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@media (width <= 767px) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (width >= 768px) {
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (width >= 992px) {
|
||||
max-width: 970px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
@media (width >= 1200px) {
|
||||
max-width: 1170px;
|
||||
}
|
||||
|
||||
@@ -245,7 +245,7 @@ Shared UI components
|
||||
&wrp-controls {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
z-index: $z-search;
|
||||
z-index: vars.$z-search;
|
||||
|
||||
&--in-tabs {
|
||||
margin-top: -1px;
|
||||
@@ -257,8 +257,7 @@ Shared UI components
|
||||
padding: 3px;
|
||||
transform: translateZ(0);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
font-size: 11.2px;
|
||||
}
|
||||
|
||||
@@ -268,14 +267,14 @@ Shared UI components
|
||||
padding: 1px 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background: lightgrey;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include row-glow-active();
|
||||
@include vars.mix-row-glow-active;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -291,7 +290,7 @@ Shared UI components
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&ipt-search-sub-ipt[type=radio] {
|
||||
&ipt-search-sub-ipt[type="radio"] {
|
||||
display: inline-block;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
@@ -306,7 +305,7 @@ Shared UI components
|
||||
padding-left: 0;
|
||||
|
||||
/* TODO switch this field to a validated text-type input, instead of a number */
|
||||
&[type=number]::-webkit-inner-spin-button {
|
||||
&[type="number"]::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-appearance: none;
|
||||
@@ -318,7 +317,7 @@ Shared UI components
|
||||
margin-bottom: 0;
|
||||
padding: 5px;
|
||||
font-weight: normal;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
height: 34px;
|
||||
border-left: 0;
|
||||
}
|
||||
@@ -367,23 +366,22 @@ Shared UI components
|
||||
&wrp-tab-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
|
||||
&--border {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&--background {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-top: 0;
|
||||
border-bottom-color: $rgb-border-grey--trans-muted;
|
||||
border-bottom-color: vars.$rgb-border-grey--trans-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-heads--border {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -395,7 +393,7 @@ Shared UI components
|
||||
margin-left: $w-tab + 6px;
|
||||
font-size: 28px;
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
@media only screen and (max-width: vars.$width-screen-lg) {
|
||||
margin-left: $w-tab-mobile-ish + 6px;
|
||||
}
|
||||
}
|
||||
@@ -403,7 +401,7 @@ Shared UI components
|
||||
&btn-tab {
|
||||
width: $w-tab;
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
@media only screen and (max-width: vars.$width-screen-lg) {
|
||||
width: 33px;
|
||||
height: 30px;
|
||||
}
|
||||
@@ -415,8 +413,8 @@ Shared UI components
|
||||
}
|
||||
|
||||
&wrp-tab {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-bottom: 0;
|
||||
|
||||
&--single {
|
||||
@@ -429,20 +427,20 @@ Shared UI components
|
||||
/* region Proficiency */
|
||||
.ui-prof__ {
|
||||
&btn-cycle {
|
||||
@include cb-custom();
|
||||
@include vars.mix-cb-custom;
|
||||
|
||||
&[data-state="0"] {
|
||||
background: white;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&[data-state="1"] {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
background: vars.$rgb-cb-grey;
|
||||
border-color: color.adjust(vars.$rgb-cb-grey, $lightness: 15%);
|
||||
}
|
||||
|
||||
&[data-state="2"] {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
background: vars.$rgb-cb-grey;
|
||||
border-color: color.adjust(vars.$rgb-cb-grey, $lightness: 15%);
|
||||
display: flex;
|
||||
line-height: 14px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -450,9 +448,9 @@ Shared UI components
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
font-family: "Font Awesome 5 Pro", monospace;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
|
||||
&::before {
|
||||
@@ -461,8 +459,8 @@ Shared UI components
|
||||
}
|
||||
|
||||
&[data-state="3"] {
|
||||
background: repeating-linear-gradient(135deg, white, white 10px, $rgb-cb-grey 10px, $rgb-cb-grey 20px);
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
background: repeating-linear-gradient(135deg, #fff, #fff 10px, vars.$rgb-cb-grey 10px, vars.$rgb-cb-grey 20px);
|
||||
border-color: color.adjust(vars.$rgb-cb-grey, $lightness: 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -476,7 +474,7 @@ Shared UI components
|
||||
height: 92px;
|
||||
border-radius: 46px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
user-select: none;
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -492,7 +490,7 @@ Shared UI components
|
||||
transform-origin: top;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0 0 2px 0 rgb(0 0 0 / 75%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -509,10 +507,7 @@ Shared UI components
|
||||
.ui-drag__ {
|
||||
&wrp-drag-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&wrp-drag-dummy--highlight {
|
||||
@@ -558,18 +553,18 @@ Shared UI components
|
||||
}
|
||||
|
||||
&child {
|
||||
@include shadow-1();
|
||||
@include vars.mix-shadow-1;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: white;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
top: calc(100% + 5px);
|
||||
padding: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity $time-5-frames ease-in-out;
|
||||
transition: opacity vars.$time-5-frames ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -583,19 +578,19 @@ Shared UI components
|
||||
/* region Context menu */
|
||||
.ui-ctx {
|
||||
&__wrp {
|
||||
@include shadow-1--dark();
|
||||
@include vars.mix-shadow-1--dark;
|
||||
|
||||
z-index: $z-context-menu;
|
||||
z-index: vars.$z-context-menu;
|
||||
font-size: 14px;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border-top-color: $rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-top-color: vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&__row {
|
||||
@@ -606,13 +601,13 @@ Shared UI components
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
cursor: default;
|
||||
background: $rgb-bg;
|
||||
background: vars.$rgb-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -662,7 +657,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&disp-text {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -715,8 +710,8 @@ Shared UI components
|
||||
user-select: none;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
z-index: $z-temp-effect;
|
||||
background: radial-gradient(ellipse at center, $rgb-bg 0%, $rgb-bg 35%, transparent 75%, transparent 100%);
|
||||
z-index: vars.$z-temp-effect;
|
||||
background: radial-gradient(ellipse at center, vars.$rgb-bg 0%, vars.$rgb-bg 35%, transparent 75%, transparent 100%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
@@ -754,7 +749,7 @@ Shared UI components
|
||||
}
|
||||
|
||||
&btn-ticker {
|
||||
transition: opacity $time-2-frames;
|
||||
transition: opacity vars.$time-2-frames;
|
||||
opacity: 0;
|
||||
|
||||
padding: 0;
|
||||
@@ -766,7 +761,7 @@ Shared UI components
|
||||
border-radius: 0;
|
||||
|
||||
background: #0003;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
@@ -778,20 +773,20 @@ Shared UI components
|
||||
|
||||
&:hover {
|
||||
background: #0005;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
background: #0007;
|
||||
color: $rgb-off-black;
|
||||
color: vars.$rgb-off-black;
|
||||
}
|
||||
}
|
||||
|
||||
&ipt:hover + .ui-ideco__wrp .ui-ideco__btn-ticker,
|
||||
&wrp:hover .ui-ideco__btn-ticker {
|
||||
transition: opacity $time-2-frames;
|
||||
transition: opacity vars.$time-2-frames;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -820,7 +815,7 @@ Shared UI components
|
||||
|
||||
> .ui-sel2__ipt-display {
|
||||
text-align: right;
|
||||
color: $rgb-font--muted;
|
||||
color: vars.$rgb-font--muted;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -837,8 +832,8 @@ Shared UI components
|
||||
left: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-top: 0;
|
||||
max-height: 200px;
|
||||
|
||||
@@ -854,12 +849,12 @@ Shared UI components
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
|
||||
&:focus.active,
|
||||
&:hover.active {
|
||||
background: darken($rgb-bg--alt, $pct-darken-active);
|
||||
background: color.adjust(vars.$rgb-bg--alt, $lightness: - vars.$pct-darken-active);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -889,14 +884,14 @@ Shared UI components
|
||||
width: 14px;
|
||||
height: 18px;
|
||||
top: -5px;
|
||||
background: $rgb-bg--alt;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: vars.$rgb-bg--alt;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 2px;
|
||||
|
||||
&--hover,
|
||||
&:hover {
|
||||
background: darken($rgb-bg--alt, 10%);
|
||||
border-color: darken($rgb-border-grey, 10%);
|
||||
background: color.adjust(vars.$rgb-bg--alt, $lightness: - 10%);
|
||||
border-color: color.adjust(vars.$rgb-border-grey, $lightness: - 10%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -906,13 +901,13 @@ Shared UI components
|
||||
}
|
||||
|
||||
&track-outer {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&track-inner {
|
||||
background: $rgb-border-grey--muted;
|
||||
background: vars.$rgb-border-grey--muted;
|
||||
}
|
||||
|
||||
&disp-value {
|
||||
@@ -921,8 +916,8 @@ Shared UI components
|
||||
border-radius: 4px;
|
||||
|
||||
&--visible {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
background: $rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
background: vars.$rgb-bg;
|
||||
}
|
||||
|
||||
&--left {
|
||||
@@ -945,11 +940,11 @@ Shared UI components
|
||||
&pip {
|
||||
width: 1px;
|
||||
height: 4px;
|
||||
background: $rgb-border-grey;
|
||||
background: vars.$rgb-border-grey;
|
||||
|
||||
&--major {
|
||||
height: 6px;
|
||||
background: darken($rgb-border-grey, 15%);
|
||||
background: color.adjust(vars.$rgb-border-grey, $lightness: - 15%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.night-mode {
|
||||
.stripe- {
|
||||
&even {
|
||||
&:nth-child(even) {
|
||||
background: $rgb-stripe-grey--night;
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&odd {
|
||||
&:nth-child(odd) {
|
||||
background: $rgb-stripe-grey--night;
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&child- {
|
||||
&even-first {
|
||||
&:nth-child(even) > :first-child {
|
||||
background: $rgb-stripe-grey--night;
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
&__ {
|
||||
&ele-hoverable {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt-night;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.clickable {
|
||||
&--link {
|
||||
color: $rgb-link-blue !important;
|
||||
color: vars.$rgb-link-blue !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity $time-3-frames linear;
|
||||
transition: opacity vars.$time-3-frames linear;
|
||||
}
|
||||
|
||||
.float-clear {
|
||||
@@ -23,28 +23,28 @@
|
||||
.stripe- {
|
||||
&even {
|
||||
&:nth-child(even) {
|
||||
background: $rgb-stripe-grey;
|
||||
background: vars.$rgb-stripe-grey;
|
||||
}
|
||||
|
||||
&--faint:nth-child(even) {
|
||||
background: $rgb-stripe-grey--faint;
|
||||
background: vars.$rgb-stripe-grey--faint;
|
||||
}
|
||||
}
|
||||
|
||||
&odd {
|
||||
&:nth-child(odd) {
|
||||
background: $rgb-stripe-grey;
|
||||
background: vars.$rgb-stripe-grey;
|
||||
}
|
||||
|
||||
&--faint:nth-child(odd) {
|
||||
background: $rgb-stripe-grey--faint;
|
||||
background: vars.$rgb-stripe-grey--faint;
|
||||
}
|
||||
}
|
||||
|
||||
&child- {
|
||||
&even-first {
|
||||
&:nth-child(even) > :first-child {
|
||||
background: $rgb-stripe-grey;
|
||||
background: vars.$rgb-stripe-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -54,7 +54,7 @@
|
||||
&__ {
|
||||
&ele-hoverable {
|
||||
&:hover {
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,602 +3,602 @@
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
.ve-col-12 {
|
||||
@extend %col-base;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.col-11 {
|
||||
.ve-col-11 {
|
||||
@extend %col-base;
|
||||
width: 91.66666666666667% !important;
|
||||
width: 91.6667% !important;
|
||||
}
|
||||
|
||||
.col-11-9 {
|
||||
.ve-col-11-9 {
|
||||
@extend %col-base;
|
||||
width: 99.16666666666667% !important;
|
||||
width: 99.1667% !important;
|
||||
}
|
||||
|
||||
.col-11-8 {
|
||||
.ve-col-11-8 {
|
||||
@extend %col-base;
|
||||
width: 98.33333333333333% !important;
|
||||
width: 98.3333% !important;
|
||||
}
|
||||
|
||||
.col-11-7 {
|
||||
.ve-col-11-7 {
|
||||
@extend %col-base;
|
||||
width: 97.5% !important;
|
||||
}
|
||||
|
||||
.col-11-6 {
|
||||
.ve-col-11-6 {
|
||||
@extend %col-base;
|
||||
width: 96.66666666666667% !important;
|
||||
width: 96.6667% !important;
|
||||
}
|
||||
|
||||
.col-11-5 {
|
||||
.ve-col-11-5 {
|
||||
@extend %col-base;
|
||||
width: 95.83333333333333% !important;
|
||||
width: 95.8333% !important;
|
||||
}
|
||||
|
||||
.col-11-4 {
|
||||
.ve-col-11-4 {
|
||||
@extend %col-base;
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.col-11-3 {
|
||||
.ve-col-11-3 {
|
||||
@extend %col-base;
|
||||
width: 94.16666666666667% !important;
|
||||
width: 94.1667% !important;
|
||||
}
|
||||
|
||||
.col-11-2 {
|
||||
.ve-col-11-2 {
|
||||
@extend %col-base;
|
||||
width: 93.33333333333333% !important;
|
||||
width: 93.3333% !important;
|
||||
}
|
||||
|
||||
.col-11-1 {
|
||||
.ve-col-11-1 {
|
||||
@extend %col-base;
|
||||
width: 92.5% !important;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
.ve-col-10 {
|
||||
@extend %col-base;
|
||||
width: 83.33333333333333% !important;
|
||||
width: 83.3333% !important;
|
||||
}
|
||||
|
||||
.col-10-9 {
|
||||
.ve-col-10-9 {
|
||||
@extend %col-base;
|
||||
width: 90.83333333333333% !important;
|
||||
width: 90.8333% !important;
|
||||
}
|
||||
|
||||
.col-10-8 {
|
||||
.ve-col-10-8 {
|
||||
@extend %col-base;
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
.col-10-7 {
|
||||
.ve-col-10-7 {
|
||||
@extend %col-base;
|
||||
width: 89.16666666666667% !important;
|
||||
width: 89.1667% !important;
|
||||
}
|
||||
|
||||
.col-10-6 {
|
||||
.ve-col-10-6 {
|
||||
@extend %col-base;
|
||||
width: 88.33333333333333% !important;
|
||||
width: 88.3333% !important;
|
||||
}
|
||||
|
||||
.col-10-5 {
|
||||
.ve-col-10-5 {
|
||||
@extend %col-base;
|
||||
width: 87.5% !important;
|
||||
}
|
||||
|
||||
.col-10-4 {
|
||||
.ve-col-10-4 {
|
||||
@extend %col-base;
|
||||
width: 86.66666666666667% !important;
|
||||
width: 86.6667% !important;
|
||||
}
|
||||
|
||||
.col-10-3 {
|
||||
.ve-col-10-3 {
|
||||
@extend %col-base;
|
||||
width: 85.83333333333333% !important;
|
||||
width: 85.8333% !important;
|
||||
}
|
||||
|
||||
.col-10-2 {
|
||||
.ve-col-10-2 {
|
||||
@extend %col-base;
|
||||
width: 85% !important;
|
||||
}
|
||||
|
||||
.col-10-1 {
|
||||
.ve-col-10-1 {
|
||||
@extend %col-base;
|
||||
width: 84.16666666666667% !important;
|
||||
width: 84.1667% !important;
|
||||
}
|
||||
|
||||
.col-9 {
|
||||
.ve-col-9 {
|
||||
@extend %col-base;
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.col-9-9 {
|
||||
.ve-col-9-9 {
|
||||
@extend %col-base;
|
||||
width: 82.5% !important;
|
||||
}
|
||||
|
||||
.col-9-8 {
|
||||
.ve-col-9-8 {
|
||||
@extend %col-base;
|
||||
width: 81.66666666666667% !important;
|
||||
width: 81.6667% !important;
|
||||
}
|
||||
|
||||
.col-9-7 {
|
||||
.ve-col-9-7 {
|
||||
@extend %col-base;
|
||||
width: 80.83333333333333% !important;
|
||||
width: 80.8333% !important;
|
||||
}
|
||||
|
||||
.col-9-6 {
|
||||
.ve-col-9-6 {
|
||||
@extend %col-base;
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.col-9-5 {
|
||||
.ve-col-9-5 {
|
||||
@extend %col-base;
|
||||
width: 79.16666666666667% !important;
|
||||
width: 79.1667% !important;
|
||||
}
|
||||
|
||||
.col-9-4 {
|
||||
.ve-col-9-4 {
|
||||
@extend %col-base;
|
||||
width: 78.33333333333333% !important;
|
||||
width: 78.3333% !important;
|
||||
}
|
||||
|
||||
.col-9-3 {
|
||||
.ve-col-9-3 {
|
||||
@extend %col-base;
|
||||
width: 77.5% !important;
|
||||
}
|
||||
|
||||
.col-9-2 {
|
||||
.ve-col-9-2 {
|
||||
@extend %col-base;
|
||||
width: 76.66666666666667% !important;
|
||||
width: 76.6667% !important;
|
||||
}
|
||||
|
||||
.col-9-1 {
|
||||
.ve-col-9-1 {
|
||||
@extend %col-base;
|
||||
width: 75.83333333333333% !important;
|
||||
width: 75.8333% !important;
|
||||
}
|
||||
|
||||
.col-8 {
|
||||
.ve-col-8 {
|
||||
@extend %col-base;
|
||||
width: 66.666666666666667% !important;
|
||||
width: 66.6667% !important;
|
||||
}
|
||||
|
||||
.col-8-9 {
|
||||
.ve-col-8-9 {
|
||||
@extend %col-base;
|
||||
width: 74.16666666666667% !important;
|
||||
width: 74.1667% !important;
|
||||
}
|
||||
|
||||
.col-8-8 {
|
||||
.ve-col-8-8 {
|
||||
@extend %col-base;
|
||||
width: 73.33333333333333% !important;
|
||||
width: 73.3333% !important;
|
||||
}
|
||||
|
||||
.col-8-7 {
|
||||
.ve-col-8-7 {
|
||||
@extend %col-base;
|
||||
width: 72.5% !important;
|
||||
}
|
||||
|
||||
.col-8-6 {
|
||||
.ve-col-8-6 {
|
||||
@extend %col-base;
|
||||
width: 71.66666666666667% !important;
|
||||
width: 71.6667% !important;
|
||||
}
|
||||
|
||||
.col-8-5 {
|
||||
.ve-col-8-5 {
|
||||
@extend %col-base;
|
||||
width: 70.83333333333333% !important;
|
||||
width: 70.8333% !important;
|
||||
}
|
||||
|
||||
.col-8-4 {
|
||||
.ve-col-8-4 {
|
||||
@extend %col-base;
|
||||
width: 70% !important;
|
||||
}
|
||||
|
||||
.col-8-3 {
|
||||
.ve-col-8-3 {
|
||||
@extend %col-base;
|
||||
width: 69.16666666666667% !important;
|
||||
width: 69.1667% !important;
|
||||
}
|
||||
|
||||
.col-8-2 {
|
||||
.ve-col-8-2 {
|
||||
@extend %col-base;
|
||||
width: 68.33333333333333% !important;
|
||||
width: 68.3333% !important;
|
||||
}
|
||||
|
||||
.col-8-1 {
|
||||
.ve-col-8-1 {
|
||||
@extend %col-base;
|
||||
width: 67.5% !important;
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
.ve-col-7 {
|
||||
@extend %col-base;
|
||||
width: 58.33333333333333% !important;
|
||||
width: 58.3333% !important;
|
||||
}
|
||||
|
||||
.col-7-9 {
|
||||
.ve-col-7-9 {
|
||||
@extend %col-base;
|
||||
width: 65.83333333333333% !important;
|
||||
width: 65.8333% !important;
|
||||
}
|
||||
|
||||
.col-7-8 {
|
||||
.ve-col-7-8 {
|
||||
@extend %col-base;
|
||||
width: 65% !important;
|
||||
}
|
||||
|
||||
.col-7-7 {
|
||||
.ve-col-7-7 {
|
||||
@extend %col-base;
|
||||
width: 64.16666666666667% !important;
|
||||
width: 64.1667% !important;
|
||||
}
|
||||
|
||||
.col-7-6 {
|
||||
.ve-col-7-6 {
|
||||
@extend %col-base;
|
||||
width: 63.33333333333333% !important;
|
||||
width: 63.3333% !important;
|
||||
}
|
||||
|
||||
.col-7-5 {
|
||||
.ve-col-7-5 {
|
||||
@extend %col-base;
|
||||
width: 62.5% !important;
|
||||
}
|
||||
|
||||
.col-7-4 {
|
||||
.ve-col-7-4 {
|
||||
@extend %col-base;
|
||||
width: 61.66666666666667% !important;
|
||||
width: 61.6667% !important;
|
||||
}
|
||||
|
||||
.col-7-3 {
|
||||
.ve-col-7-3 {
|
||||
@extend %col-base;
|
||||
width: 60.83333333333333% !important;
|
||||
width: 60.8333% !important;
|
||||
}
|
||||
|
||||
.col-7-2 {
|
||||
.ve-col-7-2 {
|
||||
@extend %col-base;
|
||||
width: 60% !important;
|
||||
}
|
||||
|
||||
.col-7-1 {
|
||||
.ve-col-7-1 {
|
||||
@extend %col-base;
|
||||
width: 59.16666666666667% !important;
|
||||
width: 59.1667% !important;
|
||||
}
|
||||
|
||||
.col-6 {
|
||||
.ve-col-6 {
|
||||
@extend %col-base;
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.col-6-9 {
|
||||
.ve-col-6-9 {
|
||||
@extend %col-base;
|
||||
width: 57.5% !important;
|
||||
}
|
||||
|
||||
.col-6-8 {
|
||||
.ve-col-6-8 {
|
||||
@extend %col-base;
|
||||
width: 56.66666666666667% !important;
|
||||
width: 56.6667% !important;
|
||||
}
|
||||
|
||||
.col-6-7 {
|
||||
.ve-col-6-7 {
|
||||
@extend %col-base;
|
||||
width: 55.83333333333333% !important;
|
||||
width: 55.8333% !important;
|
||||
}
|
||||
|
||||
.col-6-6 {
|
||||
.ve-col-6-6 {
|
||||
@extend %col-base;
|
||||
width: 55% !important;
|
||||
}
|
||||
|
||||
.col-6-5 {
|
||||
.ve-col-6-5 {
|
||||
@extend %col-base;
|
||||
width: 54.16666666666667% !important;
|
||||
width: 54.1667% !important;
|
||||
}
|
||||
|
||||
.col-6-4 {
|
||||
.ve-col-6-4 {
|
||||
@extend %col-base;
|
||||
width: 53.33333333333333% !important;
|
||||
width: 53.3333% !important;
|
||||
}
|
||||
|
||||
.col-6-3 {
|
||||
.ve-col-6-3 {
|
||||
@extend %col-base;
|
||||
width: 52.5% !important;
|
||||
}
|
||||
|
||||
.col-6-2 {
|
||||
.ve-col-6-2 {
|
||||
@extend %col-base;
|
||||
width: 51.66666666666667% !important;
|
||||
width: 51.6667% !important;
|
||||
}
|
||||
|
||||
.col-6-1 {
|
||||
.ve-col-6-1 {
|
||||
@extend %col-base;
|
||||
width: 50.83333333333333% !important;
|
||||
width: 50.8333% !important;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
.ve-col-5 {
|
||||
@extend %col-base;
|
||||
width: 41.66666666666667% !important;
|
||||
width: 41.6667% !important;
|
||||
}
|
||||
|
||||
.col-5-9 {
|
||||
.ve-col-5-9 {
|
||||
@extend %col-base;
|
||||
width: 49.16666666666667% !important;
|
||||
width: 49.1667% !important;
|
||||
}
|
||||
|
||||
.col-5-8 {
|
||||
.ve-col-5-8 {
|
||||
@extend %col-base;
|
||||
width: 48.33333333333333% !important;
|
||||
width: 48.3333% !important;
|
||||
}
|
||||
|
||||
.col-5-7 {
|
||||
.ve-col-5-7 {
|
||||
@extend %col-base;
|
||||
width: 47.5% !important;
|
||||
}
|
||||
|
||||
.col-5-6 {
|
||||
.ve-col-5-6 {
|
||||
@extend %col-base;
|
||||
width: 46.66666666666667% !important;
|
||||
width: 46.6667% !important;
|
||||
}
|
||||
|
||||
.col-5-5 {
|
||||
.ve-col-5-5 {
|
||||
@extend %col-base;
|
||||
width: 45.83333333333333% !important;
|
||||
width: 45.8333% !important;
|
||||
}
|
||||
|
||||
.col-5-4 {
|
||||
.ve-col-5-4 {
|
||||
@extend %col-base;
|
||||
width: 45% !important;
|
||||
}
|
||||
|
||||
.col-5-3 {
|
||||
.ve-col-5-3 {
|
||||
@extend %col-base;
|
||||
width: 44.16666666666667% !important;
|
||||
width: 44.1667% !important;
|
||||
}
|
||||
|
||||
.col-5-2 {
|
||||
.ve-col-5-2 {
|
||||
@extend %col-base;
|
||||
width: 43.33333333333333% !important;
|
||||
width: 43.3333% !important;
|
||||
}
|
||||
|
||||
.col-5-1 {
|
||||
.ve-col-5-1 {
|
||||
@extend %col-base;
|
||||
width: 42.5% !important;
|
||||
}
|
||||
|
||||
.col-4 {
|
||||
.ve-col-4 {
|
||||
@extend %col-base;
|
||||
width: 33.33333333333333% !important;
|
||||
width: 33.3333% !important;
|
||||
}
|
||||
|
||||
.col-4-9 {
|
||||
.ve-col-4-9 {
|
||||
@extend %col-base;
|
||||
width: 40.83333333333333% !important;
|
||||
width: 40.8333% !important;
|
||||
}
|
||||
|
||||
.col-4-8 {
|
||||
.ve-col-4-8 {
|
||||
@extend %col-base;
|
||||
width: 40% !important;
|
||||
}
|
||||
|
||||
.col-4-7 {
|
||||
.ve-col-4-7 {
|
||||
@extend %col-base;
|
||||
width: 39.16666666666667% !important;
|
||||
width: 39.1667% !important;
|
||||
}
|
||||
|
||||
.col-4-6 {
|
||||
.ve-col-4-6 {
|
||||
@extend %col-base;
|
||||
width: 38.33333333333333% !important;
|
||||
width: 38.3333% !important;
|
||||
}
|
||||
|
||||
.col-4-5 {
|
||||
.ve-col-4-5 {
|
||||
@extend %col-base;
|
||||
width: 37.5% !important;
|
||||
}
|
||||
|
||||
.col-4-4 {
|
||||
.ve-col-4-4 {
|
||||
@extend %col-base;
|
||||
width: 36.66666666666667% !important;
|
||||
width: 36.6667% !important;
|
||||
}
|
||||
|
||||
.col-4-3 {
|
||||
.ve-col-4-3 {
|
||||
@extend %col-base;
|
||||
width: 35.83333333333333% !important;
|
||||
width: 35.8333% !important;
|
||||
}
|
||||
|
||||
.col-4-2 {
|
||||
.ve-col-4-2 {
|
||||
@extend %col-base;
|
||||
width: 35% !important;
|
||||
}
|
||||
|
||||
.col-4-1 {
|
||||
.ve-col-4-1 {
|
||||
@extend %col-base;
|
||||
width: 34.16666666666667% !important;
|
||||
width: 34.1667% !important;
|
||||
}
|
||||
|
||||
.col-3 {
|
||||
.ve-col-3 {
|
||||
@extend %col-base;
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.col-3-9 {
|
||||
.ve-col-3-9 {
|
||||
@extend %col-base;
|
||||
width: 32.5% !important;
|
||||
}
|
||||
|
||||
.col-3-8 {
|
||||
.ve-col-3-8 {
|
||||
@extend %col-base;
|
||||
width: 31.66666666666667% !important;
|
||||
width: 31.6667% !important;
|
||||
}
|
||||
|
||||
.col-3-7 {
|
||||
.ve-col-3-7 {
|
||||
@extend %col-base;
|
||||
width: 30.83333333333333% !important;
|
||||
width: 30.8333% !important;
|
||||
}
|
||||
|
||||
.col-3-6 {
|
||||
.ve-col-3-6 {
|
||||
@extend %col-base;
|
||||
width: 30% !important;
|
||||
}
|
||||
|
||||
.col-3-5 {
|
||||
.ve-col-3-5 {
|
||||
@extend %col-base;
|
||||
width: 29.16666666666667% !important;
|
||||
width: 29.1667% !important;
|
||||
}
|
||||
|
||||
.col-3-4 {
|
||||
.ve-col-3-4 {
|
||||
@extend %col-base;
|
||||
width: 28.33333333333333% !important;
|
||||
width: 28.3333% !important;
|
||||
}
|
||||
|
||||
.col-3-3 {
|
||||
.ve-col-3-3 {
|
||||
@extend %col-base;
|
||||
width: 27.5% !important;
|
||||
}
|
||||
|
||||
.col-3-2 {
|
||||
.ve-col-3-2 {
|
||||
@extend %col-base;
|
||||
width: 26.66666666666667% !important;
|
||||
width: 26.6667% !important;
|
||||
}
|
||||
|
||||
.col-3-1 {
|
||||
.ve-col-3-1 {
|
||||
@extend %col-base;
|
||||
width: 25.83333333333333% !important;
|
||||
width: 25.8333% !important;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
.ve-col-2 {
|
||||
@extend %col-base;
|
||||
width: 16.66666666666667% !important;
|
||||
width: 16.6667% !important;
|
||||
}
|
||||
|
||||
.col-2-9 {
|
||||
.ve-col-2-9 {
|
||||
@extend %col-base;
|
||||
width: 24.16666666666667% !important;
|
||||
width: 24.1667% !important;
|
||||
}
|
||||
|
||||
.col-2-8 {
|
||||
.ve-col-2-8 {
|
||||
@extend %col-base;
|
||||
width: 23.33333333333333% !important;
|
||||
width: 23.3333% !important;
|
||||
}
|
||||
|
||||
.col-2-7 {
|
||||
.ve-col-2-7 {
|
||||
@extend %col-base;
|
||||
width: 22.5% !important;
|
||||
}
|
||||
|
||||
.col-2-6 {
|
||||
.ve-col-2-6 {
|
||||
@extend %col-base;
|
||||
width: 21.66666666666667% !important;
|
||||
width: 21.6667% !important;
|
||||
}
|
||||
|
||||
.col-2-5 {
|
||||
.ve-col-2-5 {
|
||||
@extend %col-base;
|
||||
width: 20.83333333333333% !important;
|
||||
width: 20.8333% !important;
|
||||
}
|
||||
|
||||
.col-2-4 {
|
||||
.ve-col-2-4 {
|
||||
@extend %col-base;
|
||||
width: 20% !important;
|
||||
}
|
||||
|
||||
.col-2-3 {
|
||||
.ve-col-2-3 {
|
||||
@extend %col-base;
|
||||
width: 19.16666666666667% !important;
|
||||
width: 19.1667% !important;
|
||||
}
|
||||
|
||||
.col-2-2 {
|
||||
.ve-col-2-2 {
|
||||
@extend %col-base;
|
||||
width: 18.33333333333333% !important;
|
||||
width: 18.3333% !important;
|
||||
}
|
||||
|
||||
.col-2-1 {
|
||||
.ve-col-2-1 {
|
||||
@extend %col-base;
|
||||
width: 17.5% !important;
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
.ve-col-1 {
|
||||
@extend %col-base;
|
||||
width: 8.33333333333333% !important;
|
||||
width: 8.3333% !important;
|
||||
}
|
||||
|
||||
.col-1-9 {
|
||||
.ve-col-1-9 {
|
||||
@extend %col-base;
|
||||
width: 15.83333333333333% !important;
|
||||
width: 15.8333% !important;
|
||||
}
|
||||
|
||||
.col-1-8 {
|
||||
.ve-col-1-8 {
|
||||
@extend %col-base;
|
||||
width: 15% !important;
|
||||
}
|
||||
|
||||
.col-1-7 {
|
||||
.ve-col-1-7 {
|
||||
@extend %col-base;
|
||||
width: 14.16666666666667% !important;
|
||||
width: 14.1667% !important;
|
||||
}
|
||||
|
||||
.col-1-6 {
|
||||
.ve-col-1-6 {
|
||||
@extend %col-base;
|
||||
width: 13.33333333333333% !important;
|
||||
width: 13.3333% !important;
|
||||
}
|
||||
|
||||
.col-1-5 {
|
||||
.ve-col-1-5 {
|
||||
@extend %col-base;
|
||||
width: 12.5% !important;
|
||||
}
|
||||
|
||||
.col-1-4 {
|
||||
.ve-col-1-4 {
|
||||
@extend %col-base;
|
||||
width: 11.66666666666667% !important;
|
||||
width: 11.6667% !important;
|
||||
}
|
||||
|
||||
.col-1-3 {
|
||||
.ve-col-1-3 {
|
||||
@extend %col-base;
|
||||
width: 10.83333333333333% !important;
|
||||
width: 10.8333% !important;
|
||||
}
|
||||
|
||||
.col-1-2 {
|
||||
.ve-col-1-2 {
|
||||
@extend %col-base;
|
||||
width: 10% !important;
|
||||
}
|
||||
|
||||
.col-1-1 {
|
||||
.ve-col-1-1 {
|
||||
@extend %col-base;
|
||||
width: 9.16666666666667% !important;
|
||||
width: 9.1667% !important;
|
||||
}
|
||||
|
||||
.col-0-9 {
|
||||
.ve-col-0-9 {
|
||||
@extend %col-base;
|
||||
width: 7.5% !important;
|
||||
}
|
||||
|
||||
.col-0-8 {
|
||||
.ve-col-0-8 {
|
||||
@extend %col-base;
|
||||
width: 6.66666666666667% !important;
|
||||
width: 6.6667% !important;
|
||||
}
|
||||
|
||||
.col-0-7 {
|
||||
.ve-col-0-7 {
|
||||
@extend %col-base;
|
||||
width: 5.83333333333333% !important;
|
||||
width: 5.8333% !important;
|
||||
}
|
||||
|
||||
.col-0-6 {
|
||||
.ve-col-0-6 {
|
||||
@extend %col-base;
|
||||
width: 5% !important;
|
||||
}
|
||||
|
||||
.col-0-5 {
|
||||
.ve-col-0-5 {
|
||||
@extend %col-base;
|
||||
width: 4.16666666666667% !important;
|
||||
width: 4.1667% !important;
|
||||
}
|
||||
|
||||
.col-0-4 {
|
||||
.ve-col-0-4 {
|
||||
@extend %col-base;
|
||||
width: 3.33333333333333% !important;
|
||||
width: 3.3333% !important;
|
||||
}
|
||||
|
||||
.col-0-3 {
|
||||
.ve-col-0-3 {
|
||||
@extend %col-base;
|
||||
width: 2.5% !important;
|
||||
}
|
||||
|
||||
.col-0-2 {
|
||||
.ve-col-0-2 {
|
||||
@extend %col-base;
|
||||
width: 1.66666666666667% !important;
|
||||
width: 1.6667% !important;
|
||||
}
|
||||
|
||||
.col-0-1 {
|
||||
.ve-col-0-1 {
|
||||
@extend %col-base;
|
||||
width: 0.83333333333333% !important;
|
||||
width: 0.8333% !important;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
// If it's anything less than full desktop size, enable these styles
|
||||
.mobile-ish__ {
|
||||
@media only screen and (min-width: $width-screen-lg--min) {
|
||||
@media only screen and (min-width: vars.$width-screen-lg--min) {
|
||||
&visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $width-screen-lg) {
|
||||
@media only screen and (max-width: vars.$width-screen-lg) {
|
||||
&hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -31,19 +31,19 @@
|
||||
}
|
||||
|
||||
&mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile__ {
|
||||
@media only screen and (min-width: $width-screen-sm--min) {
|
||||
@media only screen and (min-width: vars.$width-screen-sm--min) {
|
||||
&visible {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
&hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -99,23 +99,23 @@
|
||||
}
|
||||
|
||||
&m-1 {
|
||||
margin: ($spacer * 0.25) !important;
|
||||
margin: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&m-2 {
|
||||
margin: ($spacer * 0.5) !important;
|
||||
margin: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&m-3 {
|
||||
margin: $spacer !important;
|
||||
margin: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&m-4 {
|
||||
margin: ($spacer * 1.5) !important;
|
||||
margin: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&m-5 {
|
||||
margin: ($spacer * 3) !important;
|
||||
margin: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mt-auto {
|
||||
@@ -127,23 +127,23 @@
|
||||
}
|
||||
|
||||
&mt-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-top: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mt-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mt-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-top: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&mt-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-top: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mt-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-top: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mr-auto {
|
||||
@@ -155,23 +155,23 @@
|
||||
}
|
||||
|
||||
&mr-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-right: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mr-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-right: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mr-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-right: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&mr-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-right: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mr-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-right: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mb-auto {
|
||||
@@ -183,23 +183,23 @@
|
||||
}
|
||||
|
||||
&mb-1 {
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
margin-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mb-3 {
|
||||
margin-bottom: $spacer !important;
|
||||
margin-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&mb-4 {
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
margin-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mb-5 {
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
margin-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&ml-auto {
|
||||
@@ -211,23 +211,23 @@
|
||||
}
|
||||
|
||||
&ml-1 {
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
margin-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&ml-2 {
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
margin-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&ml-3 {
|
||||
margin-left: $spacer !important;
|
||||
margin-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&ml-4 {
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
margin-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&ml-5 {
|
||||
margin-left: ($spacer * 3) !important;
|
||||
margin-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&my-auto {
|
||||
@@ -241,28 +241,28 @@
|
||||
}
|
||||
|
||||
&my-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
margin-top: (vars.$spacer * 0.25) !important;
|
||||
margin-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&my-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-bottom: $spacer !important;
|
||||
margin-top: vars.$spacer !important;
|
||||
margin-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&my-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
margin-top: (vars.$spacer * 1.5) !important;
|
||||
margin-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&my-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
margin-top: (vars.$spacer * 3) !important;
|
||||
margin-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&mx-auto {
|
||||
@@ -276,28 +276,28 @@
|
||||
}
|
||||
|
||||
&mx-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
margin-right: (vars.$spacer * 0.25) !important;
|
||||
margin-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&mx-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
margin-right: (vars.$spacer * 0.5) !important;
|
||||
margin-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&mx-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
margin-right: vars.$spacer !important;
|
||||
margin-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&mx-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
margin-right: (vars.$spacer * 1.5) !important;
|
||||
margin-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&mx-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
margin-right: (vars.$spacer * 3) !important;
|
||||
margin-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&p-0 {
|
||||
@@ -305,23 +305,23 @@
|
||||
}
|
||||
|
||||
&p-1 {
|
||||
padding: ($spacer * 0.25) !important;
|
||||
padding: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&p-2 {
|
||||
padding: ($spacer * 0.5) !important;
|
||||
padding: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&p-3 {
|
||||
padding: $spacer !important;
|
||||
padding: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&p-4 {
|
||||
padding: ($spacer * 1.5) !important;
|
||||
padding: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&p-5 {
|
||||
padding: ($spacer * 3) !important;
|
||||
padding: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&p-1p {
|
||||
@@ -333,23 +333,23 @@
|
||||
}
|
||||
|
||||
&pt-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-top: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pt-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-top: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pt-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-top: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&pt-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-top: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pt-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-top: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pt-1p {
|
||||
@@ -361,23 +361,23 @@
|
||||
}
|
||||
|
||||
&pr-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-right: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pr-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-right: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pr-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-right: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&pr-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-right: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pr-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-right: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pr-1p {
|
||||
@@ -389,23 +389,23 @@
|
||||
}
|
||||
|
||||
&pb-1 {
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
padding-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pb-2 {
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
padding-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pb-3 {
|
||||
padding-bottom: $spacer !important;
|
||||
padding-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&pb-4 {
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
padding-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pb-5 {
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
padding-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pb-1p {
|
||||
@@ -417,23 +417,23 @@
|
||||
}
|
||||
|
||||
&pl-1 {
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
padding-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&pl-2 {
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
padding-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&pl-3 {
|
||||
padding-left: $spacer !important;
|
||||
padding-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&pl-4 {
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
padding-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&pl-5 {
|
||||
padding-left: ($spacer * 3) !important;
|
||||
padding-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&pl-1p {
|
||||
@@ -446,28 +446,28 @@
|
||||
}
|
||||
|
||||
&py-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
padding-top: (vars.$spacer * 0.25) !important;
|
||||
padding-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&py-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
padding-top: (vars.$spacer * 0.5) !important;
|
||||
padding-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&py-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-bottom: $spacer !important;
|
||||
padding-top: vars.$spacer !important;
|
||||
padding-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&py-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
padding-top: (vars.$spacer * 1.5) !important;
|
||||
padding-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&py-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
padding-top: (vars.$spacer * 3) !important;
|
||||
padding-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&px-0 {
|
||||
@@ -476,28 +476,28 @@
|
||||
}
|
||||
|
||||
&px-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
padding-right: (vars.$spacer * 0.25) !important;
|
||||
padding-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
&px-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
padding-right: (vars.$spacer * 0.5) !important;
|
||||
padding-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
&px-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-left: $spacer !important;
|
||||
padding-right: vars.$spacer !important;
|
||||
padding-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
&px-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
padding-right: (vars.$spacer * 1.5) !important;
|
||||
padding-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
&px-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-left: ($spacer * 3) !important;
|
||||
padding-right: (vars.$spacer * 3) !important;
|
||||
padding-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
&py-1p {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
@include is-print {
|
||||
@include vars.mix-is-print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -19,8 +19,8 @@
|
||||
}
|
||||
|
||||
&my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
.b-0 {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.b-1 {
|
||||
border-width: ($spacer * 0.25) !important;
|
||||
border-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.b-2 {
|
||||
border-width: ($spacer * 0.5) !important;
|
||||
border-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.b-3 {
|
||||
border-width: $spacer !important;
|
||||
border-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.b-4 {
|
||||
border-width: ($spacer * 1.5) !important;
|
||||
border-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.b-5 {
|
||||
border-width: ($spacer * 3) !important;
|
||||
border-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.b-1p {
|
||||
border: 1px solid $rgb-border-grey !important;
|
||||
border: 1px solid vars.$rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.bt-0 {
|
||||
@@ -33,27 +33,27 @@
|
||||
}
|
||||
|
||||
.bt-1 {
|
||||
border-top-width: ($spacer * 0.25) !important;
|
||||
border-top-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bt-2 {
|
||||
border-top-width: ($spacer * 0.5) !important;
|
||||
border-top-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bt-3 {
|
||||
border-top-width: $spacer !important;
|
||||
border-top-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.bt-4 {
|
||||
border-top-width: ($spacer * 1.5) !important;
|
||||
border-top-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bt-5 {
|
||||
border-top-width: ($spacer * 3) !important;
|
||||
border-top-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bt-1p {
|
||||
border-top: 1px solid $rgb-border-grey !important;
|
||||
border-top: 1px solid vars.$rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.br-0 {
|
||||
@@ -61,27 +61,27 @@
|
||||
}
|
||||
|
||||
.br-1 {
|
||||
border-right-width: ($spacer * 0.25) !important;
|
||||
border-right-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.br-2 {
|
||||
border-right-width: ($spacer * 0.5) !important;
|
||||
border-right-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.br-3 {
|
||||
border-right-width: $spacer !important;
|
||||
border-right-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.br-4 {
|
||||
border-right-width: ($spacer * 1.5) !important;
|
||||
border-right-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.br-5 {
|
||||
border-right-width: ($spacer * 3) !important;
|
||||
border-right-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.br-1p {
|
||||
border-right: 1px solid $rgb-border-grey !important;
|
||||
border-right: 1px solid vars.$rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.bb-0 {
|
||||
@@ -89,30 +89,30 @@
|
||||
}
|
||||
|
||||
.bb-1 {
|
||||
border-bottom-width: ($spacer * 0.25) !important;
|
||||
border-bottom-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bb-2 {
|
||||
border-bottom-width: ($spacer * 0.5) !important;
|
||||
border-bottom-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bb-3 {
|
||||
border-bottom-width: $spacer !important;
|
||||
border-bottom-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.bb-4 {
|
||||
border-bottom-width: ($spacer * 1.5) !important;
|
||||
border-bottom-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bb-5 {
|
||||
border-bottom-width: ($spacer * 3) !important;
|
||||
border-bottom-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bb-1p {
|
||||
border-bottom: 1px solid $rgb-border-grey !important;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey !important;
|
||||
|
||||
&-trans {
|
||||
border-bottom: 1px solid $rgb-border-grey--trans !important;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,27 +121,27 @@
|
||||
}
|
||||
|
||||
.bl-1 {
|
||||
border-left-width: ($spacer * 0.25) !important;
|
||||
border-left-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bl-2 {
|
||||
border-left-width: ($spacer * 0.5) !important;
|
||||
border-left-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bl-3 {
|
||||
border-left-width: $spacer !important;
|
||||
border-left-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.bl-4 {
|
||||
border-left-width: ($spacer * 1.5) !important;
|
||||
border-left-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bl-5 {
|
||||
border-left-width: ($spacer * 3) !important;
|
||||
border-left-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bl-1p {
|
||||
border-left: 1px solid $rgb-border-grey !important;
|
||||
border-left: 1px solid vars.$rgb-border-grey !important;
|
||||
}
|
||||
|
||||
.by-0 {
|
||||
@@ -150,28 +150,28 @@
|
||||
}
|
||||
|
||||
.by-1 {
|
||||
border-top-width: ($spacer * 0.25) !important;
|
||||
border-bottom-width: ($spacer * 0.25) !important;
|
||||
border-top-width: (vars.$spacer * 0.25) !important;
|
||||
border-bottom-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.by-2 {
|
||||
border-top-width: ($spacer * 0.5) !important;
|
||||
border-bottom-width: ($spacer * 0.5) !important;
|
||||
border-top-width: (vars.$spacer * 0.5) !important;
|
||||
border-bottom-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.by-3 {
|
||||
border-top-width: $spacer !important;
|
||||
border-bottom-width: $spacer !important;
|
||||
border-top-width: vars.$spacer !important;
|
||||
border-bottom-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.by-4 {
|
||||
border-top-width: ($spacer * 1.5) !important;
|
||||
border-bottom-width: ($spacer * 1.5) !important;
|
||||
border-top-width: (vars.$spacer * 1.5) !important;
|
||||
border-bottom-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.by-5 {
|
||||
border-top-width: ($spacer * 3) !important;
|
||||
border-bottom-width: ($spacer * 3) !important;
|
||||
border-top-width: (vars.$spacer * 3) !important;
|
||||
border-bottom-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.bx-0 {
|
||||
@@ -180,28 +180,28 @@
|
||||
}
|
||||
|
||||
.bx-1 {
|
||||
border-right-width: ($spacer * 0.25) !important;
|
||||
border-left-width: ($spacer * 0.25) !important;
|
||||
border-right-width: (vars.$spacer * 0.25) !important;
|
||||
border-left-width: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.bx-2 {
|
||||
border-right-width: ($spacer * 0.5) !important;
|
||||
border-left-width: ($spacer * 0.5) !important;
|
||||
border-right-width: (vars.$spacer * 0.5) !important;
|
||||
border-left-width: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.bx-3 {
|
||||
border-right-width: $spacer !important;
|
||||
border-left-width: $spacer !important;
|
||||
border-right-width: vars.$spacer !important;
|
||||
border-left-width: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.bx-4 {
|
||||
border-right-width: ($spacer * 1.5) !important;
|
||||
border-left-width: ($spacer * 1.5) !important;
|
||||
border-right-width: (vars.$spacer * 1.5) !important;
|
||||
border-left-width: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.bx-5 {
|
||||
border-right-width: ($spacer * 3) !important;
|
||||
border-left-width: ($spacer * 3) !important;
|
||||
border-right-width: (vars.$spacer * 3) !important;
|
||||
border-left-width: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.btl-0 {
|
||||
@@ -243,75 +243,75 @@
|
||||
}
|
||||
|
||||
.hr-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
margin-top: (vars.$spacer * 0.25) !important;
|
||||
margin-bottom: (vars.$spacer * 0.25) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-3 {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
margin-top: vars.$spacer;
|
||||
margin-bottom: vars.$spacer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
margin-top: (vars.$spacer * 1.5) !important;
|
||||
margin-bottom: (vars.$spacer * 1.5) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hr-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
margin-top: (vars.$spacer * 3) !important;
|
||||
margin-bottom: (vars.$spacer * 3) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vr-0 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.vr-1 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
margin-right: (vars.$spacer * 0.25) !important;
|
||||
margin-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.vr-2 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
margin-right: (vars.$spacer * 0.5) !important;
|
||||
margin-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.vr-3 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
margin-right: vars.$spacer !important;
|
||||
margin-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.vr-4 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
margin-right: (vars.$spacer * 1.5) !important;
|
||||
margin-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.vr-5 {
|
||||
@include vr();
|
||||
@include vars.mix-vr;
|
||||
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
margin-right: (vars.$spacer * 3) !important;
|
||||
margin-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
@@ -323,23 +323,23 @@
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: ($spacer * 0.25) !important;
|
||||
margin: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: ($spacer * 0.5) !important;
|
||||
margin: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.m-3 {
|
||||
margin: $spacer !important;
|
||||
margin: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: ($spacer * 1.5) !important;
|
||||
margin: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: ($spacer * 3) !important;
|
||||
margin: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
@@ -353,28 +353,28 @@
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
margin-top: (vars.$spacer * 0.25) !important;
|
||||
margin-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.my-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-bottom: $spacer !important;
|
||||
margin-top: vars.$spacer !important;
|
||||
margin-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.my-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
margin-top: (vars.$spacer * 1.5) !important;
|
||||
margin-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
margin-top: (vars.$spacer * 3) !important;
|
||||
margin-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
@@ -388,28 +388,28 @@
|
||||
}
|
||||
|
||||
.mx-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
margin-right: (vars.$spacer * 0.25) !important;
|
||||
margin-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mx-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
margin-right: (vars.$spacer * 0.5) !important;
|
||||
margin-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-left: $spacer !important;
|
||||
margin-right: vars.$spacer !important;
|
||||
margin-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.mx-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
margin-right: (vars.$spacer * 1.5) !important;
|
||||
margin-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mx-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-left: ($spacer * 3) !important;
|
||||
margin-right: (vars.$spacer * 3) !important;
|
||||
margin-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.my-1p {
|
||||
@@ -431,31 +431,31 @@
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: ($spacer * 0.25) !important;
|
||||
margin-top: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mt-n1 {
|
||||
margin-top: (-$spacer * 0.25) !important;
|
||||
margin-top: (-(vars.$spacer) * 0.25) !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: ($spacer * 0.5) !important;
|
||||
margin-top: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mt-n2 {
|
||||
margin-top: (-$spacer * 0.5) !important;
|
||||
margin-top: (-(vars.$spacer) * 0.5) !important;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: $spacer !important;
|
||||
margin-top: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: ($spacer * 1.5) !important;
|
||||
margin-top: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: ($spacer * 3) !important;
|
||||
margin-top: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mt-1p {
|
||||
@@ -471,31 +471,31 @@
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: ($spacer * 0.25) !important;
|
||||
margin-right: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mr-n1 {
|
||||
margin-right: (-$spacer * 0.25) !important;
|
||||
margin-right: (-(vars.$spacer) * 0.25) !important;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: ($spacer * 0.5) !important;
|
||||
margin-right: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mr-n2 {
|
||||
margin-right: (-$spacer * 0.5) !important;
|
||||
margin-right: (-(vars.$spacer) * 0.5) !important;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
margin-right: $spacer !important;
|
||||
margin-right: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: ($spacer * 1.5) !important;
|
||||
margin-right: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: ($spacer * 3) !important;
|
||||
margin-right: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.mr-3p {
|
||||
@@ -511,31 +511,31 @@
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: ($spacer * 0.25) !important;
|
||||
margin-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.mb-n1 {
|
||||
margin-bottom: (-$spacer * 0.25) !important;
|
||||
margin-bottom: (-(vars.$spacer) * 0.25) !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: ($spacer * 0.5) !important;
|
||||
margin-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.mb-n2 {
|
||||
margin-bottom: (-$spacer * 0.5) !important;
|
||||
margin-bottom: (-(vars.$spacer) * 0.5) !important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: $spacer !important;
|
||||
margin-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: ($spacer * 1.5) !important;
|
||||
margin-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: ($spacer * 3) !important;
|
||||
margin-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
@@ -547,31 +547,31 @@
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: ($spacer * 0.25) !important;
|
||||
margin-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.ml-n1 {
|
||||
margin-left: (-$spacer * 0.25) !important;
|
||||
margin-left: (-(vars.$spacer) * 0.25) !important;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: ($spacer * 0.5) !important;
|
||||
margin-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.ml-n2 {
|
||||
margin-left: (-$spacer * 0.5) !important;
|
||||
margin-left: (-(vars.$spacer) * 0.5) !important;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: $spacer !important;
|
||||
margin-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: ($spacer * 1.5) !important;
|
||||
margin-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.ml-5 {
|
||||
margin-left: ($spacer * 3) !important;
|
||||
margin-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
@@ -579,23 +579,23 @@
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: ($spacer * 0.25) !important;
|
||||
padding: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: ($spacer * 0.5) !important;
|
||||
padding: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: $spacer !important;
|
||||
padding: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: ($spacer * 1.5) !important;
|
||||
padding: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: ($spacer * 3) !important;
|
||||
padding: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.p-1p {
|
||||
@@ -608,28 +608,28 @@
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
padding-top: (vars.$spacer * 0.25) !important;
|
||||
padding-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
padding-top: (vars.$spacer * 0.5) !important;
|
||||
padding-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-bottom: $spacer !important;
|
||||
padding-top: vars.$spacer !important;
|
||||
padding-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
padding-top: (vars.$spacer * 1.5) !important;
|
||||
padding-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
padding-top: (vars.$spacer * 3) !important;
|
||||
padding-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
@@ -638,28 +638,28 @@
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
padding-right: (vars.$spacer * 0.25) !important;
|
||||
padding-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
padding-right: (vars.$spacer * 0.5) !important;
|
||||
padding-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-left: $spacer !important;
|
||||
padding-right: vars.$spacer !important;
|
||||
padding-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
padding-right: (vars.$spacer * 1.5) !important;
|
||||
padding-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.px-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-left: ($spacer * 3) !important;
|
||||
padding-right: (vars.$spacer * 3) !important;
|
||||
padding-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.py-1p {
|
||||
@@ -687,23 +687,23 @@
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: ($spacer * 0.25) !important;
|
||||
padding-top: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: ($spacer * 0.5) !important;
|
||||
padding-top: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: $spacer !important;
|
||||
padding-top: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: ($spacer * 1.5) !important;
|
||||
padding-top: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: ($spacer * 3) !important;
|
||||
padding-top: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pt-1p {
|
||||
@@ -715,23 +715,23 @@
|
||||
}
|
||||
|
||||
.pr-1 {
|
||||
padding-right: ($spacer * 0.25) !important;
|
||||
padding-right: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: ($spacer * 0.5) !important;
|
||||
padding-right: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pr-3 {
|
||||
padding-right: $spacer !important;
|
||||
padding-right: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: ($spacer * 1.5) !important;
|
||||
padding-right: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: ($spacer * 3) !important;
|
||||
padding-right: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pr-1p {
|
||||
@@ -743,23 +743,23 @@
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: ($spacer * 0.25) !important;
|
||||
padding-bottom: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: ($spacer * 0.5) !important;
|
||||
padding-bottom: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: $spacer !important;
|
||||
padding-bottom: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: ($spacer * 1.5) !important;
|
||||
padding-bottom: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: ($spacer * 3) !important;
|
||||
padding-bottom: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pb-1p {
|
||||
@@ -771,23 +771,23 @@
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: ($spacer * 0.25) !important;
|
||||
padding-left: (vars.$spacer * 0.25) !important;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: ($spacer * 0.5) !important;
|
||||
padding-left: (vars.$spacer * 0.5) !important;
|
||||
}
|
||||
|
||||
.pl-3 {
|
||||
padding-left: $spacer !important;
|
||||
padding-left: vars.$spacer !important;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: ($spacer * 1.5) !important;
|
||||
padding-left: (vars.$spacer * 1.5) !important;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: ($spacer * 3) !important;
|
||||
padding-left: (vars.$spacer * 3) !important;
|
||||
}
|
||||
|
||||
.pl-1p {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "vars";
|
||||
@use "vars";
|
||||
|
||||
// region Fix Chrome
|
||||
input[type="checkbox"]:checked {
|
||||
@@ -34,7 +34,7 @@ input[type="radio"]:checked {
|
||||
|
||||
// region Font style
|
||||
.ve-muted {
|
||||
color: $rgb-font--muted !important;
|
||||
color: vars.$rgb-font--muted !important;
|
||||
}
|
||||
|
||||
.bold {
|
||||
@@ -189,8 +189,7 @@ i > i {
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
overflow: auto auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
@@ -222,7 +221,7 @@ i > i {
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
@include overflow-dots();
|
||||
@include vars.mix-overflow-dots;
|
||||
}
|
||||
|
||||
.overflow-overlay {
|
||||
@@ -264,7 +263,7 @@ i > i {
|
||||
}
|
||||
|
||||
.w-33 {
|
||||
width: 33.3333333% !important;
|
||||
width: 33.3333% !important;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
@@ -275,7 +274,7 @@ i > i {
|
||||
width: 50% !important;
|
||||
|
||||
&--mr-2 {
|
||||
width: calc(50% - #{$spacer * 0.5}) !important;
|
||||
width: calc(50% - #{vars.$spacer * 0.5}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -284,7 +283,7 @@ i > i {
|
||||
}
|
||||
|
||||
.w-66 {
|
||||
width: 66.6666666% !important;
|
||||
width: 66.6666% !important;
|
||||
}
|
||||
|
||||
.w-70 {
|
||||
@@ -396,7 +395,7 @@ i > i {
|
||||
}
|
||||
|
||||
.max-w-33 {
|
||||
max-width: 33.3333333% !important;
|
||||
max-width: 33.3333% !important;
|
||||
}
|
||||
|
||||
.max-w-80 {
|
||||
@@ -474,7 +473,7 @@ i > i {
|
||||
}
|
||||
|
||||
.h-ipt-xs {
|
||||
height: $h-ipt-xs;
|
||||
height: vars.$h-ipt-xs;
|
||||
}
|
||||
|
||||
// Often useful as a hack to force flexbox to behave
|
||||
@@ -737,7 +736,7 @@ i > i {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
@@ -751,11 +750,11 @@ i > i {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (width <= 480px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
@@ -769,11 +768,11 @@ i > i {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (width <= 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
@@ -787,11 +786,11 @@ i > i {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (width <= 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
@@ -805,11 +804,11 @@ i > i {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (width <= 768px) {
|
||||
column-count: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (width <= 480px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,46 @@
|
||||
@use "sass:color";
|
||||
|
||||
@font-face {
|
||||
font-family: "Convergence";
|
||||
font-family: Convergence;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Convergence-Regular"), url("../fonts/Convergence-Regular.woff2") format("woff2");
|
||||
src:
|
||||
local("Convergence-Regular"),
|
||||
url("../fonts/Convergence-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Roboto"), url("../fonts/Roboto-Regular.woff2") format("woff2");
|
||||
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");
|
||||
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");
|
||||
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");
|
||||
font-family: HPPHumblescratch;
|
||||
src:
|
||||
local("HPPHumblescratch"),
|
||||
url("../fonts/hpphumblescratch-webfont.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@keyframes kf-fade-out {
|
||||
@@ -64,7 +76,7 @@ $rgb-name-red: #822000;
|
||||
$rgb-name-red--night: #d29a38;
|
||||
$rgb-name-alt--night: #c2c2c2;
|
||||
$rgb-bg-orange: #fdf1dc;
|
||||
$rgb-bg-highlight: yellow;
|
||||
$rgb-bg-highlight: #ff0;
|
||||
$rgb-border-yellow--statblock: #e69a28;
|
||||
|
||||
$rgb-link-blue: $rgb-active-blue;
|
||||
@@ -83,8 +95,8 @@ $rgb-border-grey--list-row-night: #444;
|
||||
$rgb-border-grey--statblock-night: #565656;
|
||||
|
||||
$rgb-modal-overlay-grey: #45454588;
|
||||
$rgb-shadow-grey: rgba(0, 0, 0, 0.175);
|
||||
$rgb-shadow-grey--dark: rgba(0, 0, 0, 0.475);
|
||||
$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;
|
||||
@@ -92,13 +104,13 @@ $rgb-stripe-grey--night: #aaa2;
|
||||
|
||||
$rgb-cb-grey: #666;
|
||||
|
||||
$rgb-bg: white;
|
||||
$rgb-bg--alt: whitesmoke;
|
||||
$rgb-bg: #fff;
|
||||
$rgb-bg--alt: #f5f5f5;
|
||||
$rgb-bg-homebrew: #ff00001a;
|
||||
|
||||
$rgb-bg--night: #222;
|
||||
$rgb-bg--alt-night: #383838;
|
||||
$rgb-bg-homebrew--night: rgba(255, 0, 0, 0.15);
|
||||
$rgb-bg-homebrew--night: rgb(255 0 0 / 15%);
|
||||
|
||||
$rgb-bg-highlight--night: #cc0;
|
||||
$rgb-font: #333;
|
||||
@@ -144,8 +156,8 @@ $rgb-class-variant-brew--night: #da9db5;
|
||||
|
||||
$rgb-roll-min: #ff3100;
|
||||
$rgb-roll-max: #00b400;
|
||||
$rgb-roll-min--muted: desaturate($rgb-roll-min, 35%);
|
||||
$rgb-roll-max--muted: desaturate($rgb-roll-max, 35%);
|
||||
$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
|
||||
@@ -159,10 +171,10 @@ $rgb-alert-danger-red--night: #8d1d1a;
|
||||
$rgb-alert-warning-orange--night: #cd8514;
|
||||
$rgb-alert-success-green--night: #009e56;
|
||||
|
||||
$rgb-alert-info-border-blue--night: lighten($rgb-alert-info-blue--night, $pct-darken-border);
|
||||
$rgb-alert-danger-border-red--night: lighten($rgb-alert-danger-red--night, $pct-darken-border);
|
||||
$rgb-alert-warning-border-orange--night: lighten($rgb-alert-warning-orange--night, $pct-darken-border);
|
||||
$rgb-alert-success-border-green--night: lighten($rgb-alert-success-green--night, $pct-darken-border);
|
||||
$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;
|
||||
@@ -213,50 +225,50 @@ $h-ipt-xs: 22px;
|
||||
// endregion
|
||||
|
||||
// region Fonts
|
||||
$font-line-height: 1.42857143;
|
||||
$font-line-height: 1.4286;
|
||||
// endregion
|
||||
|
||||
@mixin shadow-1 () {
|
||||
@mixin mix-shadow-1 () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin shadow-1--dark () {
|
||||
@mixin mix-shadow-1--dark () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
|
||||
}
|
||||
|
||||
@mixin shadow-2 () {
|
||||
@mixin mix-shadow-2 () {
|
||||
box-shadow: 0 3px 6px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin shadow-active {
|
||||
@mixin mix-shadow-active {
|
||||
box-shadow: 0 0 2px 0 #000b;
|
||||
}
|
||||
|
||||
@mixin shadow-active--night {
|
||||
@mixin mix-shadow-active--night {
|
||||
box-shadow: 0 0 3px 0 #fffb;
|
||||
}
|
||||
|
||||
@mixin row-glow-active {
|
||||
box-shadow: inset 0 0 0 5000px rgba(0, 107, 196, 0.3);
|
||||
@mixin mix-row-glow-active {
|
||||
box-shadow: inset 0 0 0 5000px rgb(0 107 196 / 30%);
|
||||
}
|
||||
|
||||
@mixin row-glow-active--alt {
|
||||
box-shadow: inset 0 0 0 5000px rgba(148, 148, 148, 0.2);
|
||||
@mixin mix-row-glow-active--alt {
|
||||
box-shadow: inset 0 0 0 5000px rgb(148 148 148 / 20%);
|
||||
}
|
||||
|
||||
@mixin overflow-dots {
|
||||
@mixin mix-overflow-dots {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin vr {
|
||||
@mixin mix-vr {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
@mixin is-print {
|
||||
@mixin mix-is-print {
|
||||
@media print {
|
||||
@content;
|
||||
}
|
||||
@@ -268,7 +280,7 @@ $font-line-height: 1.42857143;
|
||||
|
||||
/* *** */
|
||||
|
||||
@mixin font-regular {
|
||||
@mixin mix-font-regular {
|
||||
font-family: Arial, sans-serif;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
@@ -304,7 +316,7 @@ $width-screen-lg--min: 1201px;
|
||||
|
||||
&:hover::before {
|
||||
content: " 🔗";
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
color: rgb(0 0 0 / 20%);
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 14px;
|
||||
@@ -322,7 +334,7 @@ $fltr-2stripe: 22px;
|
||||
// endregion
|
||||
|
||||
// region Shared UI
|
||||
@mixin cb-custom {
|
||||
@mixin mix-cb-custom {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
@@ -336,15 +348,15 @@ $fltr-2stripe: 22px;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
@include shadow-active();
|
||||
@include mix-shadow-active;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: lighten($rgb-cb-grey, 15%);
|
||||
border-color: color.adjust($rgb-cb-grey, $lightness: 15%);
|
||||
|
||||
&.disabled {
|
||||
background-color: lighten($rgb-cb-grey, 25%);
|
||||
background-color: color.adjust($rgb-cb-grey, $lightness: 25%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -354,20 +366,20 @@ $fltr-2stripe: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cb-custom--night {
|
||||
@mixin mix-cb-custom--night {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include shadow-active--night();
|
||||
@include mix-shadow-active--night;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: lighten($rgb-border-grey--night, 10%);
|
||||
border-color: color.adjust($rgb-border-grey--night, $lightness: 10%);
|
||||
|
||||
&.disabled {
|
||||
background-color: lighten($rgb-border-grey--night, 20%);
|
||||
background-color: color.adjust($rgb-border-grey--night, $lightness: 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -376,4 +388,3 @@ $fltr-2stripe: 22px;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ table.home-table td {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
@media only screen and (width <= 1200px) {
|
||||
.home__btn-page {
|
||||
width: 113px;
|
||||
}
|
||||
@@ -72,7 +72,7 @@ table.home-table td {
|
||||
|
||||
.home__h-player {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: dodgerblue;
|
||||
text-decoration-color: #1e90ff;
|
||||
}
|
||||
|
||||
.home__h-rule {
|
||||
@@ -82,7 +82,7 @@ table.home-table td {
|
||||
|
||||
.home__h-dm {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: darkviolet;
|
||||
text-decoration-color: #9400d3;
|
||||
}
|
||||
|
||||
.home__btn-player,
|
||||
@@ -93,8 +93,8 @@ table.home-table td {
|
||||
.night-mode .home__btn-player:hover,
|
||||
.night-mode .home__btn-player:active,
|
||||
.night-mode .home__btn-player:focus {
|
||||
border-color: dodgerblue;
|
||||
color: dodgerblue;
|
||||
border-color: #1e90ff;
|
||||
color: #1e90ff;
|
||||
}
|
||||
|
||||
.home__btn-rule,
|
||||
@@ -117,8 +117,8 @@ table.home-table td {
|
||||
.night-mode .home__btn-dm:hover,
|
||||
.night-mode .home__btn-dm:active,
|
||||
.night-mode .home__btn-dm:focus {
|
||||
border-color: darkviolet;
|
||||
color: darkviolet;
|
||||
border-color: #9400d3;
|
||||
color: #9400d3;
|
||||
}
|
||||
|
||||
.home__stripe {
|
||||
@@ -162,7 +162,7 @@ table.home-table td {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.home__split {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -205,7 +205,7 @@ table.home-table td {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 507px) {
|
||||
@media (width <= 507px) {
|
||||
.home__narrow-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.list--stats {
|
||||
height: initial;
|
||||
max-height: 100%;
|
||||
@@ -24,13 +23,13 @@ h3.ele-magic {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.list--stats {
|
||||
max-height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-device-height: 700px) {
|
||||
@media (device-height <= 700px) {
|
||||
.list {
|
||||
max-height: 20em;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid #333;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
.lst__ {
|
||||
&item-group-header {
|
||||
font-size: 14px;
|
||||
background: $rgb-bg--alt;
|
||||
background: vars.$rgb-bg--alt;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .lst__ {
|
||||
&item-group-header {
|
||||
background: $rgb-bg--alt-night;
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import "includes/vars";
|
||||
@import "includes/expose-vars";
|
||||
@import "includes/bootstrap-custom";
|
||||
@import "includes/util-column";
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
/* GENERAL/PAGE STYLES */
|
||||
#content_input {
|
||||
width: 100%;
|
||||
@@ -23,11 +22,10 @@
|
||||
}
|
||||
|
||||
#content_output {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
#content_input input[type=number] {
|
||||
#content_input input[type="number"] {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -119,7 +117,7 @@ textarea.form-control {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.mkbru__ipt-cb[type=checkbox] {
|
||||
.mkbru__ipt-cb[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@@ -129,7 +127,7 @@ textarea.form-control {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.mkbru__ipt-cb--plain[type=checkbox] {
|
||||
.mkbru__ipt-cb--plain[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -140,7 +138,7 @@ textarea.form-control {
|
||||
}
|
||||
|
||||
.mkbru__sub-name--33 {
|
||||
min-width: calc(33.33333% - 0.25rem);
|
||||
min-width: calc(33.3333% - 0.25rem);
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -219,7 +217,7 @@ tr th.mon__name--token {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.mkbru_mon__cb-environment[type=checkbox] {
|
||||
.mkbru_mon__cb-environment[type="checkbox"] {
|
||||
margin: 0 2px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
.maps {
|
||||
.rd__wrp-map {
|
||||
@@ -8,19 +8,19 @@
|
||||
|
||||
&__ {
|
||||
&disp-message-initial {
|
||||
background: $rgb-bg;
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
background: vars.$rgb-bg;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
background: $rgb-bg;
|
||||
background: vars.$rgb-bg;
|
||||
font-size: 1.12rem;
|
||||
border-top: 1px solid $rgb-border-grey;
|
||||
border-top: 1px solid vars.$rgb-border-grey;
|
||||
width: 235px;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
@@ -32,10 +32,10 @@
|
||||
}
|
||||
|
||||
&label-cb {
|
||||
border-bottom: 1px solid $rgb-border-grey;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey;
|
||||
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt;
|
||||
background-color: vars.$rgb-bg--alt;
|
||||
|
||||
.maps-menu__btn-chapter-scroll {
|
||||
opacity: 1;
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
&-gallery {
|
||||
&__wrp-chapter {
|
||||
border: 1px solid $rgb-border-grey--trans;
|
||||
border: 1px solid vars.$rgb-border-grey--trans;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@@ -56,28 +56,28 @@
|
||||
.night-mode .maps {
|
||||
&__ {
|
||||
&disp-message-initial {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
background: $rgb-bg--night;
|
||||
border-top-color: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-top-color: vars.$rgb-border-grey--trans-night;
|
||||
|
||||
&__label-cb {
|
||||
border-bottom-color: $rgb-border-grey--night;
|
||||
border-bottom-color: vars.$rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background-color: $rgb-bg--alt-night;
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gallery {
|
||||
&__wrp-chapter {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--trans-night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.opt-feature-type {
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
.big-help-gif {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
.recipes {
|
||||
&__ {
|
||||
&tbl-recipes {
|
||||
border-left: 1px solid $rgb-border-grey--trans;
|
||||
border-left: 1px solid vars.$rgb-border-grey--trans;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
.night-mode .recipes {
|
||||
&__ {
|
||||
&tbl-recipes {
|
||||
border-left: 1px solid $rgb-border-grey--trans-night;
|
||||
border-left: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
#jsoninput {
|
||||
width: 100%;
|
||||
@@ -15,7 +15,7 @@
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: $width-screen-md) {
|
||||
@media (max-width: vars.$width-screen-md) {
|
||||
#wrp-jsoninput {
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "includes/vars";
|
||||
@use "includes/vars";
|
||||
|
||||
.pg-search__ {
|
||||
$sz-image: 48px;
|
||||
@@ -8,9 +8,9 @@
|
||||
}
|
||||
|
||||
&wrp-result {
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
border-radius: 5px;
|
||||
min-height: calc(#{$spacer} + #{$sz-image} + 2px);
|
||||
min-height: calc(#{vars.$spacer} + #{$sz-image} + 2px);
|
||||
}
|
||||
|
||||
&disp-token {
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
&wrp-preview {
|
||||
width: 500px;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
&btn-toggle-preview {
|
||||
@@ -37,7 +37,7 @@
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
@media only screen and (max-width: $width-screen-sm) {
|
||||
@media only screen and (max-width: vars.$width-screen-sm) {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
@@ -48,12 +48,12 @@
|
||||
.night-mode {
|
||||
.pg-search__ {
|
||||
&wrp-result {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
background: $rgb-bg--night;
|
||||
border: 1px solid vars.$rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
border: 1px solid $rgb-border-grey--night;
|
||||
border: 1px solid vars.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@import "includes/statgen";
|
||||
@import "includes/statgen-night";
|
||||
|
||||
@media (max-width: 991px) {
|
||||
@media (width <= 991px) {
|
||||
.viewport-wrapper {
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
|
||||
Reference in New Issue
Block a user