mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
v1.206.1
This commit is contained in:
TheGiddyLimit
7
scss/includes/bootstrap-custom.scss
vendored
7
scss/includes/bootstrap-custom.scss
vendored
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
:root {
|
||||
--safe-area-inset-top: 0;
|
||||
@@ -353,13 +354,13 @@ body::-webkit-scrollbar {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .input-group {
|
||||
.ve-night-mode .input-group {
|
||||
> input.form-control,
|
||||
> label,
|
||||
> button,
|
||||
> a.btn {
|
||||
&:last-child {
|
||||
border-right-color: vars.$rgb-border-grey--night;
|
||||
border-right-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
26
scss/includes/classes-table-night.scss
Normal file
26
scss/includes/classes-table-night.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.ve-night-mode {
|
||||
.cls-tbl {
|
||||
background: vars-night.$rgb-bg--night;
|
||||
|
||||
> tbody > tr > th {
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
&__ {
|
||||
&disp-name {
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
&col-group::after {
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&stripe-odd:nth-child(odd) {
|
||||
background: vars.$rgb-stripe-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.cls-tbl {
|
||||
font-size: 0.8em;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-book__ {
|
||||
&wrp-content {
|
||||
@@ -20,8 +21,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-book__ {
|
||||
.ve-night-mode .dm-book__ {
|
||||
&wrp-controls {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-time__ {
|
||||
&btn-time {
|
||||
@@ -82,7 +83,7 @@
|
||||
}
|
||||
|
||||
&disp-calendar-day--active {
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
background: vars-night.$rgb-stripe-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry {
|
||||
@@ -242,13 +243,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-time__ {
|
||||
.ve-night-mode .dm-time__ {
|
||||
&bar-clock {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-calendar-day {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-day-entry--event,
|
||||
@@ -266,15 +267,15 @@
|
||||
}
|
||||
|
||||
&wrp-event-entries {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&bar-entry {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&cvs-moon {
|
||||
border: 1px solid vars.$rgb-border-grey--night;
|
||||
border: 1px solid vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&calendar-ipt-date {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-money {
|
||||
width: 100%;
|
||||
@@ -71,10 +72,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-money {
|
||||
.ve-night-mode .dm-money {
|
||||
&__ {
|
||||
&ctrl {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.dm-cnt__ {
|
||||
&ipt {
|
||||
@@ -25,7 +25,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-cnt__ {
|
||||
.ve-night-mode .dm-cnt__ {
|
||||
&ipt {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-init {
|
||||
display: flex;
|
||||
@@ -206,17 +207,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
.dm-init__wrp-header {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-controls {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__wrp-creature {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active input,
|
||||
@@ -226,6 +227,6 @@
|
||||
}
|
||||
|
||||
.dm-init__row.dm-init__row-active .dm-init__wrp-stat-cb {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-map__ {
|
||||
&picker-wrp-img {
|
||||
@@ -33,13 +34,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-map__ {
|
||||
.ve-night-mode .dm-map__ {
|
||||
&picker-wrp-img {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&picker-disp-name {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.dm-blank__ {
|
||||
&panel {
|
||||
@@ -6,8 +7,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .dm-blank__ {
|
||||
.ve-night-mode .dm-blank__ {
|
||||
&panel {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.dm-unitconv {
|
||||
width: 100%;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .best-ecgen__ {
|
||||
.ve-night-mode .best-ecgen__ {
|
||||
&wrp {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.ecgen {
|
||||
&__ {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
// region Expose variables for homebrew
|
||||
:root {
|
||||
@@ -10,11 +11,11 @@
|
||||
--rgb-border--statblock: #{vars.$rgb-border-yellow--statblock};
|
||||
}
|
||||
|
||||
:root.night-mode {
|
||||
--rgb-font: #{vars.$rgb-font--night};
|
||||
--rgb-name: #{vars.$rgb-name-red--night};
|
||||
--rgb-bg: #{vars.$rgb-bg--night};
|
||||
--rgb-bg--alt: #{vars.$rgb-bg--alt-night};
|
||||
--rgb-border--statblock: #{vars.$rgb-border-grey--statblock-night};
|
||||
:root.ve-night-mode {
|
||||
--rgb-font: #{vars-night.$rgb-font--night};
|
||||
--rgb-name: #{vars-night.$rgb-name-red--night};
|
||||
--rgb-bg: #{vars-night.$rgb-bg--night};
|
||||
--rgb-bg--alt: #{vars-night.$rgb-bg--alt-night};
|
||||
--rgb-border--statblock: #{vars-night.$rgb-border-grey--statblock-night};
|
||||
}
|
||||
// endregion
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .fltr {
|
||||
$flt-ignore: vars.$rgb-bg--night;
|
||||
.ve-night-mode .fltr {
|
||||
$flt-ignore: vars-night.$rgb-bg--night;
|
||||
$flt-ignore--hover: #323232;
|
||||
|
||||
&__ {
|
||||
&btn_nest {
|
||||
background: $flt-ignore;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: $flt-ignore--hover;
|
||||
@@ -23,7 +24,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +44,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,20 +66,20 @@
|
||||
}
|
||||
|
||||
&dropdown-divider {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
@media screen and (width <= #{vars.$width-screen-sm}) {
|
||||
box-shadow: inset 0 0 2px 2px vars.$rgb-off-black;
|
||||
background: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&dropdown-divider--sub {
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&pill {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
&[state="ignore"] {
|
||||
background: $flt-ignore;
|
||||
@@ -107,8 +108,8 @@
|
||||
}
|
||||
|
||||
&mini-view {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: linear-gradient(to top, vars.$rgb-border-grey--night, #343434 1px);
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
background: linear-gradient(to top, vars-night.$rgb-border-grey--night, #343434 1px);
|
||||
}
|
||||
|
||||
&h-btn-logic--blue {
|
||||
@@ -132,13 +133,13 @@
|
||||
&wrp-row {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
|
||||
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-values {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -150,7 +151,7 @@
|
||||
|
||||
&-cls__ {
|
||||
&tgl {
|
||||
@include vars.mix-cb-custom--night;
|
||||
@include vars-night.mix-cb-custom--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
@media screen and (width <= #{vars.$width-screen-md}) {
|
||||
.ve-dropdown-menu-filter {
|
||||
|
||||
@@ -1,5 +1,20 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .hwin {
|
||||
background: vars.$rgb-bg--night;
|
||||
.ve-night-mode {
|
||||
.hwin {
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.hwin table.summary-noback th,
|
||||
.hwin table.summary th {
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.hwin .hoverborder .window-title {
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.hwin td div.border {
|
||||
background-color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
@keyframes kf-fade-in {
|
||||
from {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.lst__ {
|
||||
&wrp-search-glass {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .lootg__ {
|
||||
.ve-night-mode .lootg__ {
|
||||
&wrp-output {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.lootg__ {
|
||||
&wrp-output {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
// region Old
|
||||
.nav {
|
||||
@@ -16,21 +17,21 @@
|
||||
border: 1px solid vars.$rgb-border-grey;
|
||||
}
|
||||
|
||||
.night-mode .nav > li > a {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
.ve-night-mode .nav > li > a {
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
.nav > li:not(.active) > a {
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
border: 1px solid vars-night.$rgb-border-grey--trans-night;
|
||||
border-top: 0;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
|
||||
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -45,7 +46,7 @@
|
||||
.nav li.open > a,
|
||||
.nav li.open > a:focus,
|
||||
.nav li.open > a:hover {
|
||||
background-color: color.adjust(vars.$rgb-bg--night, $lightness: 2%);
|
||||
background-color: color.adjust(vars-night.$rgb-bg--night, $lightness: 2%);
|
||||
border-left: 1px solid vars.$rgb-link-blue;
|
||||
border-right: 1px solid vars.$rgb-link-blue;
|
||||
border-color: vars.$rgb-link-blue;
|
||||
@@ -139,12 +140,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .nav2 {
|
||||
.ve-night-mode .nav2 {
|
||||
&-accord__ {
|
||||
&head {
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
background-color: vars-night.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -159,11 +160,11 @@
|
||||
}
|
||||
|
||||
&lnk-item {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
background-color: vars-night.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .rd {
|
||||
.ve-night-mode .rd {
|
||||
&__ {
|
||||
&h--0,
|
||||
&h--1,
|
||||
&h--2 {
|
||||
color: vars.$rgb-name-red--night;
|
||||
color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--1 {
|
||||
border-bottom-color: vars.$rgb-name-red--night;
|
||||
border-bottom-color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
&h--4 {
|
||||
color: vars.$rgb-name-alt--night;
|
||||
color: vars-night.$rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&h--3 {
|
||||
color: vars.$rgb-name-alt--night;
|
||||
color: vars-night.$rgb-name-alt--night;
|
||||
}
|
||||
|
||||
&-image-title-inner {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&b-inset {
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
&b-data {
|
||||
border-color: vars.$rgb-border-grey--statblock-night;
|
||||
border-color: vars-night.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
&b-flow {
|
||||
@@ -45,46 +45,46 @@
|
||||
}
|
||||
|
||||
&stats-name-page {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
&highlight {
|
||||
background-color: vars.$rgb-bg-highlight--night;
|
||||
color: vars.$rgb-bg--night;
|
||||
background-color: vars-night.$rgb-bg-highlight--night;
|
||||
color: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-item__ {
|
||||
&type-rarity-attunement {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-spell__ {
|
||||
&level-school-ritual {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&-ability-icon {
|
||||
&__ {
|
||||
&fill-primary {
|
||||
fill: vars.$rgb-font--night;
|
||||
fill: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
&fill-bg {
|
||||
fill: vars.$rgb-bg--night;
|
||||
fill: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&stroke-bg {
|
||||
stroke: vars.$rgb-bg--night;
|
||||
stroke: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-homebrew__ {
|
||||
&b {
|
||||
background-color: vars.$rgb-bg-homebrew--night;
|
||||
background-color: vars-night.$rgb-bg-homebrew--night;
|
||||
}
|
||||
|
||||
&disp-old-content {
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
&disp-inline {
|
||||
background-color: vars.$rgb-bg-homebrew--night;
|
||||
background-color: vars-night.$rgb-bg-homebrew--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
Renderer
|
||||
*/
|
||||
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
$rgb-inset-border: #656565;
|
||||
|
||||
@@ -228,6 +228,10 @@ $rgb-inset-border: #656565;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> .rd__list-name {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .rd__li {
|
||||
margin-bottom: var(--h-mb-li);
|
||||
text-indent: -1.1em;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
@mixin mix-source-color ($rgb) {
|
||||
color: $rgb !important;
|
||||
@@ -6,16 +7,58 @@
|
||||
text-decoration-color: $rgb !important;
|
||||
}
|
||||
|
||||
.night-mode .source {
|
||||
$rgb-source-PHB: vars.$rgb-subclass--night;
|
||||
.ve-night-mode .source {
|
||||
$rgb-source-category-site: #de000a;
|
||||
$rgb-source-category-extras: #bb6468;
|
||||
$rgb-source-category-prerelease: vars-night.$rgb-subclass-ua--night;
|
||||
$rgb-source-category-prerelease--local: #60c52f;
|
||||
$rgb-source-category-homebrew: vars-night.$rgb-class-brew--night;
|
||||
$rgb-source-category-homebrew--local: #514bff;
|
||||
|
||||
$rgb-source-PHB: vars-night.$rgb-subclass--night;
|
||||
$rgb-source-DMG: #ba1eba;
|
||||
$rgb-source-SADS: #4f63f5;
|
||||
$rgb-source-PSA: #eec276;
|
||||
|
||||
// region Categories
|
||||
|
||||
&-category- {
|
||||
&site {
|
||||
@include mix-source-color($rgb-source-category-site);
|
||||
}
|
||||
|
||||
&extras {
|
||||
@include mix-source-color($rgb-source-category-extras);
|
||||
}
|
||||
|
||||
&homebrew {
|
||||
@include mix-source-color($rgb-source-category-homebrew);
|
||||
|
||||
&--local {
|
||||
@include mix-source-color($rgb-source-category-homebrew--local);
|
||||
}
|
||||
}
|
||||
|
||||
&spicy {
|
||||
@include mix-source-color($rgb-source-category-prerelease);
|
||||
|
||||
&--local {
|
||||
@include mix-source-color($rgb-source-category-prerelease--local);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// endregion
|
||||
|
||||
&__ {
|
||||
&PHB {
|
||||
@include mix-source-color($rgb-source-PHB);
|
||||
}
|
||||
|
||||
&DMG {
|
||||
@include mix-source-color($rgb-source-DMG);
|
||||
}
|
||||
|
||||
&SADS {
|
||||
@include mix-source-color($rgb-source-SADS);
|
||||
}
|
||||
@@ -26,7 +69,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .ve-source-marker {
|
||||
.ve-night-mode .ve-source-marker {
|
||||
&--partnered {
|
||||
color: #27ac8c;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
@mixin mix-source-color ($rgb) {
|
||||
color: $rgb !important;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode .statgen .statgen {
|
||||
.ve-night-mode .statgen .statgen {
|
||||
&-shared__ {
|
||||
&ipt {
|
||||
&[readonly] {
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
&-rolled__ {
|
||||
&wrp-results {
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
|
||||
&-asi__ {
|
||||
&row {
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
border-bottom: 1px solid vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&cell {
|
||||
&--top {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
// (Class namespace to enable selectors in FVTT)
|
||||
.statgen .statgen {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "vars";
|
||||
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.page__ {
|
||||
&header {
|
||||
@@ -137,9 +139,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .page__ {
|
||||
.ve-night-mode .page__ {
|
||||
&wrp-download {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&disp-download-progress-text {
|
||||
@@ -311,8 +313,8 @@ input[type="checkbox"].sidemenu__row__label__cb {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.night-mode .sidemenu {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
.ve-night-mode .sidemenu {
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
/* *** */
|
||||
@@ -930,10 +932,10 @@ input[type="checkbox"].sidemenu__row__label__cb {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .manbrew {
|
||||
.ve-night-mode .manbrew {
|
||||
&__filtertools {
|
||||
.wrp-cb-all {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1087,9 +1089,9 @@ tr.text.compact > td p:last-child {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .mon__ {
|
||||
.ve-night-mode .mon__ {
|
||||
&cr_slider_wrp {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1316,13 +1318,13 @@ img.token:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .initp__ {
|
||||
.ve-night-mode .initp__ {
|
||||
&header {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&r {
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
|
||||
&:hover {
|
||||
background: #ffffff18;
|
||||
@@ -1753,7 +1755,7 @@ header p.lead {
|
||||
@include vars.mix-shadow-1;
|
||||
}
|
||||
|
||||
.night-mode .night__ {
|
||||
.ve-night-mode .night__ {
|
||||
&shadow-big {
|
||||
@include vars.mix-shadow-1;
|
||||
}
|
||||
@@ -1836,10 +1838,10 @@ header p.lead {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .bkmv {
|
||||
.ve-night-mode .bkmv {
|
||||
&__ {
|
||||
&wrp-item {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1947,14 +1949,14 @@ th.border {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .bk__ {
|
||||
.ve-night-mode .bk__ {
|
||||
&contents-header {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&overlay-loading {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-bottom-color: vars.$rgb-border-grey--statblock-night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-bottom-color: vars-night.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1990,13 +1992,13 @@ th.border {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .bks__ {
|
||||
.ve-night-mode .bks__ {
|
||||
&wrp-bookshelf-item,
|
||||
&wrp-bookshelf-item:hover {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
color: vars.$rgb-font--night;
|
||||
text-decoration-color: vars.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
text-decoration-color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2148,29 +2150,29 @@ th.border {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .toast {
|
||||
.ve-night-mode .toast {
|
||||
&--type-info {
|
||||
color: #fff;
|
||||
background-color: color.adjust(color.adjust(vars.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars.$rgb-alert-info-border-blue--night;
|
||||
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-info-blue--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars-night.$rgb-alert-info-border-blue--night;
|
||||
}
|
||||
|
||||
&--type-danger {
|
||||
color: #fff;
|
||||
background-color: color.adjust(color.adjust(vars.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars.$rgb-alert-danger-border-red--night;
|
||||
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-danger-red--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars-night.$rgb-alert-danger-border-red--night;
|
||||
}
|
||||
|
||||
&--type-warning {
|
||||
color: #fff;
|
||||
background-color: color.adjust(color.adjust(vars.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars.$rgb-alert-warning-border-orange--night;
|
||||
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-warning-orange--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars-night.$rgb-alert-warning-border-orange--night;
|
||||
}
|
||||
|
||||
&--type-success {
|
||||
color: #fff;
|
||||
background-color: color.adjust(color.adjust(vars.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars.$rgb-alert-success-border-green--night;
|
||||
background-color: color.adjust(color.adjust(vars-night.$rgb-alert-success-green--night, $lightness: - 15%), $alpha: - 0.05);
|
||||
border-color: vars-night.$rgb-alert-success-border-green--night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2207,7 +2209,7 @@ th.border {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
.cards__ {
|
||||
&disp-btn-icon {
|
||||
filter: initial;
|
||||
@@ -2271,36 +2273,21 @@ th.border {
|
||||
/* Day Mode End */
|
||||
|
||||
/* Night Mode */
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
body {
|
||||
color: vars.$rgb-font--night;
|
||||
background: vars.$rgb-bg--night
|
||||
color: vars-night.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night
|
||||
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGBAMAAACDAP+3AAAAGFBMVEUfHx8eHh4dHR0bGxshISEiIiIlJSUjIyM9IpsJAAAFjUlEQVR4AT3UuZLcOBaF4QuI2XJxboIhF/eQFe1WovoBAAqccpkaZpc5+4yrXa8/RGpx/lrIXPjFCYjTp9z8REqF4VYNWB3Av3zQJ6b6xBwlKB/9kRkCjXVwGH3ziK5UcjFHVkmgY6osiBsGDFfseqq2ZbTz7E00qBDpzOxnD7ToABeros1vM6MX0rBQaG1ith1A/HJkvkHxsPGJ82dP8vVCyWmbyPTaAfGzg40bgIdrv2f3pBVPycUcufx+BSUUWDuCZi6zBqdM50ElKYPODqtLDjc31rBb9CZ59lbN/JScuMxHLUBcGiy6QRH9zpwgZGhRj8qSydPVgNNVgbWqYX3HbM9K2rqTnKVmsmwKWzc1ffEd20+Zq3Ji65kl6TSjALNvzmJt4Pi2f1etytGJmy5erLAgbNY4bjykC3YCLIS3nSZMKgwRsBarWgjdeVzIEDzpTkoOUArTF4WFXYHwxY585sT0nmTYMxmXfs8fzwswfnam8TMU49bvqSRnyRPnqlno4tVQQiH2A9Za8tNTfXQ0lxbSxUaZna0uLlj9Q0XzD96CpsOZUftolINKBWJpAOoAJC0T6QqZnOtfvcfJFcDrD4Cuy5Hng316XrqzJ204HynyHwWed6i+XGF40Uw2T7Lc71HyssngEOrgONfBY7wvW0UZdVAma5xmSNjRp3xkvKJkW6aSg7PK4K0+mbKqYB0WYBgWwxCXiS74zBCVlEFpYQDEwjcA1qccb5yO6ZL8ozt/h3wHSCdWzLuqxU2ZZ9ev9MvRMbMvV9BQgN0qrFjlkzPQanI9nuaGCokVK2LV1Y2egyY1aFQGxjM9I7RBBAgyGEJtpKHP0lUySSeWCpyKHMT2pmM/vyP55u2Rw5lcSeabAfgiG5TPDX3uP3QvcoSipJXQByUCjS4C8VXqxEEZOJxzmJoyogFNJBRsCJs2XmoWWrWFqTsnbwtSn43gNFTTob9/SEpaPJNhUBKDGoZGCMINxvBv8vuKbb//lg/sK0wfPgBica/QsSk5F3KK4Ui6Yw+uv4+DWEOFbhdPOnbY5PLFpzrZMhakeqomY0Vz0TO+elQGTWdCk1IYFAOaoZg0IJQhT+YreXF+yia+O1cgtGufjXxQw28f85RPXfd15zv13ABoD15kB7FKJ/7pbHKP6+9TgNgkVj68NeV8Tp24f7OOndCgJzR3RNJBPNFReCmstMVqvjjzBoeK4GOFoBN32CPxu+4TwwBDa4DJTe/OU9c9ku7EGyfOVxh+fw9g/AATxPqKTEXJKEdCIBkB4iBUlO6MjUrWi6M5Kz31YAqFsYaCeB0KJC5d1+foo3LQWSfRaDrwdAQrMEC27yDZXJf7TlOJ2Bczr1di3OWvZB6XrvvqPuWJPDk9dAHgm7LvuZJTEdKqO3J3XgostArEnvkqgUznx3PX7cSzz1FXZyvakTA4XVVMbCPFPK1cFj66S0WoqQI1XG2uoU7CMPquO2VaUDJFQMdVgXKD2bpz6ufzzxXbxszHQ9fGO/F7A998yBQG6cShE+P+Pk7t1FwfF1QHN1Eui1VapRxCdj8tCtI1bog1Fo011Sx9u3o6c9bufI6wAT26Av9xJ+WWpTKbbBPp3K/1LbC4Vuhv396RCbJw4untjxVPndj+dIB9dVD8z2dylZ+6vMeJwbYChHJkvHV2J3fdHsJPASeHhrXq6QheXu1nBhUr5u6ryT0I13BFKD01ViZ/n3oaziRG7c6Ayg7g1LPeztNdT36ueMqcN4XGv3finjfv+7I/kMJ4d046MUanOA1QtMH1kLlfFasm99NiutSw63yNDeH4zeL1Uu8XKHNfcThPSSNwchGMbgUETScwkCcK77pH2jsgrAssvVyB8FLJ7GrmwyD8eVqsHoY/FwIv9T7lPu9+Yf8/9+w4nS1ma78AAAAASUVORK5CYII=")
|
||||
repeat scroll left top;
|
||||
}
|
||||
|
||||
.bg-solid {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
/* generic UI */
|
||||
.vr-0,
|
||||
.vr-1,
|
||||
.vr-2,
|
||||
.vr-3,
|
||||
.vr-4,
|
||||
.vr-5 {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.vr-r {
|
||||
border-right-color: vars.$rgb-border-grey--night !important;
|
||||
}
|
||||
/* *** */
|
||||
|
||||
.page__ {
|
||||
&header {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
background: vars.$rgb-off-black;
|
||||
}
|
||||
|
||||
@@ -2324,14 +2311,14 @@ th.border {
|
||||
.page__nav-inner > li.active > a:hover {
|
||||
background-color: vars.$rgb-off-black;
|
||||
border-top: 0;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: color.adjust(vars.$rgb-font--night, $lightness: - 15%) !important;
|
||||
color: color.adjust(vars-night.$rgb-font--night, $lightness: - 15%) !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -2340,65 +2327,41 @@ th.border {
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
.b-1p {
|
||||
border-color: vars.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.bt-1p {
|
||||
border-top-color: vars.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.br-1p {
|
||||
border-right-color: vars.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.bb-1p {
|
||||
border-bottom-color: vars.$rgb-border-grey--night !important;
|
||||
|
||||
&-trans {
|
||||
border-bottom-color: vars.$rgb-border-grey--trans-night !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bl-1p {
|
||||
border-left-color: vars.$rgb-border-grey--night !important;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: vars.$rgb-font--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
#legal-notice {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
a,
|
||||
.roller {
|
||||
color: vars.$rgb-link-blue--night;
|
||||
color: vars-night.$rgb-link-blue--night;
|
||||
}
|
||||
|
||||
.hwin__top-border-icon {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
|
||||
&:hover {
|
||||
color: color.adjust(vars.$rgb-font--night, $lightness: vars.$pct-darken-hover);
|
||||
color: color.adjust(vars-night.$rgb-font--night, $lightness: vars.$pct-darken-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
a,
|
||||
.roller {
|
||||
color: vars.$rgb-link-blue--muted-night;
|
||||
color: vars-night.$rgb-link-blue--muted-night;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2414,25 +2377,25 @@ th.border {
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default:active {
|
||||
background-color: vars.$rgb-form-control-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-form-control-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus,
|
||||
.btn-primary:active {
|
||||
background-color: vars.$rgb-btn-primary-blue--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-btn-primary-blue--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.btn-danger,
|
||||
.btn-danger:hover,
|
||||
.btn-danger:focus,
|
||||
.btn-danger:active {
|
||||
background-color: vars.$rgb-btn-danger-red--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-btn-danger-red--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
@@ -2443,24 +2406,24 @@ th.border {
|
||||
.btn-warning:hover,
|
||||
.btn-warning:focus,
|
||||
.btn-warning:active {
|
||||
background-color: vars.$rgb-btn-warning-orange--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-btn-warning-orange--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.btn-info,
|
||||
.btn-info:hover,
|
||||
.btn-info:focus,
|
||||
.btn-info:active {
|
||||
background-color: vars.$rgb-btn-info-blue--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-btn-info-blue--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.btn-success,
|
||||
.btn-success:hover,
|
||||
.btn-success:focus,
|
||||
.btn-success:active {
|
||||
background-color: vars.$rgb-btn-success-green--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-btn-success-green--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
.btn-default.active {
|
||||
@@ -2484,19 +2447,19 @@ th.border {
|
||||
|
||||
dialog.dialog-modal,
|
||||
.ve-dropdown-menu {
|
||||
background: vars.$rgb-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
|
||||
}
|
||||
|
||||
.ve-dropdown-menu > li {
|
||||
> a,
|
||||
> span {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: vars.$rgb-bg--alt-night;
|
||||
background-color: vars-night.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -2505,7 +2468,7 @@ th.border {
|
||||
> a,
|
||||
> span {
|
||||
color: #fff;
|
||||
background-color: vars.$rgb-btn-danger-bg-red--night;
|
||||
background-color: vars-night.$rgb-btn-danger-bg-red--night;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
@@ -2537,22 +2500,22 @@ th.border {
|
||||
}
|
||||
|
||||
.ve-dropdown-menu .divider {
|
||||
background-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
|
||||
select option {
|
||||
color: vars.$rgb-font--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.list .row {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
/* Bootstrap overrides */
|
||||
@@ -2562,49 +2525,49 @@ th.border {
|
||||
|
||||
.alert-info {
|
||||
color: #fff;
|
||||
background-color: color.adjust(vars.$rgb-alert-info-blue--night, $alpha: - 0.5);
|
||||
border-color: vars.$rgb-alert-info-border-blue--night;
|
||||
background-color: color.adjust(vars-night.$rgb-alert-info-blue--night, $alpha: - 0.5);
|
||||
border-color: vars-night.$rgb-alert-info-border-blue--night;
|
||||
|
||||
.alert-link {
|
||||
color: vars.$rgb-alert-info-border-blue--night;
|
||||
color: vars-night.$rgb-alert-info-border-blue--night;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: #fff;
|
||||
background-color: color.adjust(vars.$rgb-alert-danger-red--night, $alpha: - 0.5);
|
||||
border-color: vars.$rgb-alert-danger-border-red--night;
|
||||
background-color: color.adjust(vars-night.$rgb-alert-danger-red--night, $alpha: - 0.5);
|
||||
border-color: vars-night.$rgb-alert-danger-border-red--night;
|
||||
|
||||
.alert-link {
|
||||
color: vars.$rgb-alert-danger-border-red--night;
|
||||
color: vars-night.$rgb-alert-danger-border-red--night;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
color: #fff;
|
||||
background-color: color.adjust(vars.$rgb-alert-warning-orange--night, $alpha: - 0.5);
|
||||
border-color: vars.$rgb-alert-warning-border-orange--night;
|
||||
background-color: color.adjust(vars-night.$rgb-alert-warning-orange--night, $alpha: - 0.5);
|
||||
border-color: vars-night.$rgb-alert-warning-border-orange--night;
|
||||
|
||||
.alert-link {
|
||||
color: vars.$rgb-alert-warning-border-orange--night;
|
||||
color: vars-night.$rgb-alert-warning-border-orange--night;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: #fff;
|
||||
background-color: color.adjust(vars.$rgb-alert-success-green--night, $alpha: - 0.5);
|
||||
border-color: vars.$rgb-alert-success-border-green--night;
|
||||
background-color: color.adjust(vars-night.$rgb-alert-success-green--night, $alpha: - 0.5);
|
||||
border-color: vars-night.$rgb-alert-success-border-green--night;
|
||||
|
||||
.alert-link {
|
||||
color: vars.$rgb-alert-success-border-green--night;
|
||||
color: vars-night.$rgb-alert-success-border-green--night;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.form-control {
|
||||
background: vars.$rgb-form-control-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-form-control-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.form-control[disabled] {
|
||||
@@ -2648,20 +2611,20 @@ th.border {
|
||||
&wrp-input {
|
||||
&--scrolled {
|
||||
.omni__input {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
color: transparent;
|
||||
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
.omni__submit {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2677,7 +2640,7 @@ th.border {
|
||||
}
|
||||
|
||||
&submit {
|
||||
border-top-color: vars.$rgb-border-grey--night;
|
||||
border-top-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
@media screen and (width > #{vars.$width-screen-md}) {
|
||||
border-top-color: transparent;
|
||||
@@ -2686,8 +2649,8 @@ th.border {
|
||||
&.btn-default:active:focus,
|
||||
&.btn-default:active:hover,
|
||||
&.btn-default {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2695,7 +2658,7 @@ th.border {
|
||||
#pointbuy {
|
||||
input {
|
||||
&[type="number"] {
|
||||
border: 1px solid vars.$rgb-border-grey--night;
|
||||
border: 1px solid vars-night.$rgb-border-grey--night;
|
||||
outline-offset: 0;
|
||||
outline: none;
|
||||
}
|
||||
@@ -2707,12 +2670,12 @@ th.border {
|
||||
}
|
||||
|
||||
.stats {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.lst__ {
|
||||
&row {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
|
||||
&:hover {
|
||||
background: vars.$rgb-off-black;
|
||||
@@ -2724,11 +2687,11 @@ th.border {
|
||||
}
|
||||
|
||||
&wrp-preview {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&wrp-preview-inner {
|
||||
border-color: vars.$rgb-border-grey--list-row-night;
|
||||
border-color: vars-night.$rgb-border-grey--list-row-night;
|
||||
}
|
||||
|
||||
&btn-toggle-expand {
|
||||
@@ -2740,7 +2703,7 @@ th.border {
|
||||
|
||||
@media screen and (width > #{vars.$width-screen-hg}) {
|
||||
#listcontainer.book-contents {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-right: 1px solid #404040;
|
||||
}
|
||||
}
|
||||
@@ -2748,33 +2711,33 @@ th.border {
|
||||
.bk__ {
|
||||
&head-chapter--active,
|
||||
&head-section--active {
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
background: vars-night.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
|
||||
.bklist__ {
|
||||
&wrp-rows-inner {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&vr-contents {
|
||||
border-color: vars.$rgb-border-grey--list-row-night;
|
||||
border-color: vars-night.$rgb-border-grey--list-row-night;
|
||||
}
|
||||
}
|
||||
|
||||
.hwin .hoverborder,
|
||||
th.border,
|
||||
.stats--book th.border {
|
||||
background: vars.$rgb-border-grey--statblock-night;
|
||||
background: vars-night.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
.hwin__wrp-table {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.wrp-stats-table {
|
||||
border-top: 1px solid vars.$rgb-border-grey--statblock-night;
|
||||
border-bottom: 1px solid vars.$rgb-border-grey--statblock-night;
|
||||
border-top: 1px solid vars-night.$rgb-border-grey--statblock-night;
|
||||
border-bottom: 1px solid vars-night.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
.stats--book ::selection {
|
||||
@@ -2783,11 +2746,11 @@ th.border {
|
||||
}
|
||||
|
||||
tr.text td {
|
||||
color: vars.$rgb-font--night !important;
|
||||
color: vars-night.$rgb-font--night !important;
|
||||
}
|
||||
|
||||
tr.text td {
|
||||
color: vars.$rgb-font--night !important;
|
||||
color: vars-night.$rgb-font--night !important;
|
||||
}
|
||||
|
||||
.mon__ {
|
||||
@@ -2796,25 +2759,18 @@ th.border {
|
||||
background: rgb(255 255 255 / 15%);
|
||||
|
||||
&:hover {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&token-footer {
|
||||
color: #ddd;
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
tr.trait td,
|
||||
tr.action td,
|
||||
tr.reaction td,
|
||||
tr.legendary td {
|
||||
color: vars.$rgb-font--night !important;
|
||||
}
|
||||
|
||||
.life__output {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.f-all-wrapper > input,
|
||||
@@ -2840,39 +2796,24 @@ th.border {
|
||||
}
|
||||
|
||||
.stats-name {
|
||||
color: vars.$rgb-name-red--night;
|
||||
color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.stats .divider div {
|
||||
background-color: vars.$rgb-name-red--night;
|
||||
background-color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.stripe-odd-table > tbody > tr:nth-child(odd),
|
||||
.stripe-even-table > tbody > tr:nth-child(even) {
|
||||
background-color: vars.$rgb-stripe-grey--night;
|
||||
}
|
||||
|
||||
#please-select-message.showing > td {
|
||||
color: vars.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
#actions,
|
||||
#reactions,
|
||||
#legendaries,
|
||||
#lairactions,
|
||||
#regionaleffects {
|
||||
td {
|
||||
border-bottom-color: vars.$rgb-name-red--night;
|
||||
color: vars.$rgb-name-red--night;
|
||||
}
|
||||
background-color: vars-night.$rgb-stripe-grey--night;
|
||||
}
|
||||
|
||||
.mon__stat-header-underline {
|
||||
border-bottom-color: vars.$rgb-name-red--night;
|
||||
border-bottom-color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.mon__sect-header-inner {
|
||||
color: vars.$rgb-name-red--night;
|
||||
color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.bkmv {
|
||||
@@ -2880,11 +2821,11 @@ th.border {
|
||||
}
|
||||
|
||||
.bkmv__spacer-name {
|
||||
background-color: vars.$rgb-border-grey--statblock-night;
|
||||
background-color: vars-night.$rgb-border-grey--statblock-night;
|
||||
}
|
||||
|
||||
.lst--border {
|
||||
border-color: vars.$rgb-border-grey--list-row-night;
|
||||
border-color: vars-night.$rgb-border-grey--list-row-night;
|
||||
}
|
||||
|
||||
.list-multi-selected .lst--border {
|
||||
@@ -2893,16 +2834,12 @@ th.border {
|
||||
|
||||
.list-multi-selected.lst__row--sublist {
|
||||
.lst--border {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
#rulescontent caption {
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
tr.trait td {
|
||||
color: vars.$rgb-font--night !important;
|
||||
color: vars-night.$rgb-font--night !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -2911,19 +2848,10 @@ th.border {
|
||||
|
||||
/**** Search and filter bar ****/
|
||||
.mon__cr_slider_wrp {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.hwin table.summary-noback th,
|
||||
.hwin table.summary th {
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
.hwin .hoverborder .window-title {
|
||||
color: vars.$rgb-font--night;
|
||||
}
|
||||
|
||||
.rollbox {
|
||||
background: #272727;
|
||||
}
|
||||
@@ -2954,25 +2882,21 @@ th.border {
|
||||
border: 1px solid rgb(255 255 255 / 15%);
|
||||
}
|
||||
|
||||
.hwin td div.border {
|
||||
background-color: vars.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.initial-message {
|
||||
color: vars.$rgb-name-red--night;
|
||||
color: vars-night.$rgb-name-red--night;
|
||||
}
|
||||
|
||||
.panel-content-textarea {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.content-tab-bar {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: vars.$rgb-bg--night;
|
||||
background-color: vars.$rgb-bg-highlight--night;
|
||||
color: vars-night.$rgb-bg--night;
|
||||
background-color: vars-night.$rgb-bg-highlight--night;
|
||||
}
|
||||
|
||||
/* *** */
|
||||
@@ -2983,7 +2907,7 @@ th.border {
|
||||
}
|
||||
|
||||
.sidemenu {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
.sidemenu__toggle {
|
||||
@@ -2991,7 +2915,7 @@ th.border {
|
||||
}
|
||||
|
||||
.sidemenu__burger {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
/* *** */
|
||||
|
||||
@@ -3002,7 +2926,7 @@ th.border {
|
||||
/* *** */
|
||||
}
|
||||
|
||||
.night-mode--alt {
|
||||
.ve-night-mode--alt {
|
||||
body {
|
||||
background: #1c1c1c;
|
||||
}
|
||||
@@ -3096,7 +3020,7 @@ th.border {
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
.cancer__ {
|
||||
&wrp-leaderboard {
|
||||
background: vars.$rgb-off-black;
|
||||
|
||||
@@ -3,10 +3,11 @@ Shared UI components
|
||||
*/
|
||||
@use "sass:color";
|
||||
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.night-mode .ui__ {
|
||||
.ve-night-mode .ui__ {
|
||||
&ipt-color {
|
||||
&::-webkit-color-swatch {
|
||||
border: 0;
|
||||
@@ -16,16 +17,16 @@ Shared UI components
|
||||
/* endregion */
|
||||
|
||||
/* region List */
|
||||
.night-mode .ui-list__ {
|
||||
.ve-night-mode .ui-list__ {
|
||||
&wrp-preview {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&btn-inline {
|
||||
color: vars.$rgb-font--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
|
||||
&:hover {
|
||||
color: color.adjust(vars.$rgb-font--night, $lightness: 10%);
|
||||
color: color.adjust(vars-night.$rgb-font--night, $lightness: 10%);
|
||||
background: #ffffff30;
|
||||
}
|
||||
}
|
||||
@@ -33,33 +34,33 @@ Shared UI components
|
||||
/* endregion */
|
||||
|
||||
/* region Source overlay */
|
||||
.night-mode .ui-source__ {
|
||||
.ve-night-mode .ui-source__ {
|
||||
÷r {
|
||||
background: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Modals */
|
||||
.night-mode .ui-modal__ {
|
||||
.ve-night-mode .ui-modal__ {
|
||||
&header {
|
||||
&--border {
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
|
||||
&footer {
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&overlay-blind {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&inner {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
|
||||
&--mode-fullscreen {
|
||||
box-shadow: none;
|
||||
@@ -67,15 +68,15 @@ Shared UI components
|
||||
}
|
||||
|
||||
&row--cb:hover {
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
background: vars-night.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Search */
|
||||
.night-mode .ui-search__ {
|
||||
.ve-night-mode .ui-search__ {
|
||||
&row {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
&:hover {
|
||||
background: vars.$rgb-off-black;
|
||||
@@ -83,151 +84,153 @@ Shared UI components
|
||||
}
|
||||
|
||||
&ipt-search-sub-wrp {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Tabs */
|
||||
.night-mode .ui-tab__ {
|
||||
.ve-night-mode .ui-tab__ {
|
||||
&btn-tab-head {
|
||||
&--active,
|
||||
&--active:focus,
|
||||
&--active:hover,
|
||||
&--active:active {
|
||||
background-color: vars.$rgb-btn-default-active--night;
|
||||
background-color: vars-night.$rgb-btn-default-active--night;
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-body {
|
||||
&--background {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
border-bottom-color: color.adjust(vars.$rgb-border-grey--trans-night, $lightness: - 15%);
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
border-bottom-color: color.adjust(vars-night.$rgb-border-grey--trans-night, $lightness: - 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&wrp-tab-heads--border {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.night-mode .ui-tab-side__ {
|
||||
.ve-night-mode .ui-tab-side__ {
|
||||
&wrp-tab {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--trans-night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Proficiency */
|
||||
.night-mode .ui-prof__ {
|
||||
.ve-night-mode .ui-prof__ {
|
||||
&btn-cycle {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include vars.mix-shadow-active--night;
|
||||
@include vars-night.mix-shadow-active--night;
|
||||
}
|
||||
|
||||
&[data-state="0"] {
|
||||
background: vars.$rgb-bg--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&[data-state="1"] {
|
||||
background: vars.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
|
||||
}
|
||||
|
||||
&[data-state="2"] {
|
||||
background: vars.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
|
||||
|
||||
&::before {
|
||||
color: vars.$rgb-bg--night;
|
||||
color: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-state="3"] {
|
||||
background: repeating-linear-gradient(135deg, vars.$rgb-bg--night, vars.$rgb-bg--night 10px, vars.$rgb-border-grey--night 10px, vars.$rgb-border-grey--night 20px);
|
||||
border-color: color.adjust(vars.$rgb-border-grey--night, $lightness: 10%);
|
||||
background: repeating-linear-gradient(135deg, vars-night.$rgb-bg--night, vars-night.$rgb-bg--night 10px, vars-night.$rgb-border-grey--night 10px, vars-night.$rgb-border-grey--night 20px);
|
||||
border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Direction picker */
|
||||
.night-mode .ui-dir__ {
|
||||
.ve-night-mode .ui-dir__ {
|
||||
&face {
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&arm {
|
||||
background: vars.$rgb-font--night;
|
||||
background: vars-night.$rgb-font--night;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Hover tips */
|
||||
.night-mode .ui-tip__ {
|
||||
.ve-night-mode .ui-tip__ {
|
||||
&child {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Context menu */
|
||||
.night-mode .ui-ctx {
|
||||
.ve-night-mode .ui-ctx {
|
||||
&__wrp {
|
||||
background: vars.$rgb-bg--night;
|
||||
border: 1px solid vars.$rgb-border-grey--trans-night;
|
||||
border-top-color: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
border: 1px solid vars-night.$rgb-border-grey--trans-night;
|
||||
border-top-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
color: vars-night.$rgb-font--night;
|
||||
|
||||
&:hover {
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
background: vars-night.$rgb-bg--alt-night;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&.disabled:hover {
|
||||
background: vars.$rgb-bg--night;
|
||||
color: vars.$rgb-font--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Picker */
|
||||
.night-mode .ui-pick {
|
||||
.ve-night-mode .ui-pick {
|
||||
&__ {
|
||||
&disp-text {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region "Copied" tooltip */
|
||||
.night-mode .clp__ {
|
||||
.ve-night-mode .clp__ {
|
||||
&disp-copied {
|
||||
background: radial-gradient(ellipse at center, vars.$rgb-bg--night 0%, vars.$rgb-bg--night 35%, transparent 75%, transparent 100%);
|
||||
background: radial-gradient(ellipse at center, vars-night.$rgb-bg--night 0%, vars-night.$rgb-bg--night 35%, transparent 75%, transparent 100%);
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Decorated inputs */
|
||||
.night-mode .ui-ideco__ {
|
||||
.ve-night-mode .ui-ideco__ {
|
||||
&btn-ticker {
|
||||
background: vars.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-border-grey--night;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
@@ -239,14 +242,14 @@ Shared UI components
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
|
||||
background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:active:focus {
|
||||
background: color.adjust(vars.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
|
||||
background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -254,62 +257,62 @@ Shared UI components
|
||||
/* endregion */
|
||||
|
||||
/* region Select2 */
|
||||
.night-mode .ui-sel2__ {
|
||||
.ve-night-mode .ui-sel2__ {
|
||||
&ipt-search {
|
||||
background: transparent;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
|
||||
&wrp-options {
|
||||
background-color: vars.$rgb-bg--night;
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background-color: vars-night.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&disp-option {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
background: vars-night.$rgb-bg--alt-night;
|
||||
}
|
||||
|
||||
&:focus.active,
|
||||
&:hover.active {
|
||||
background: color.adjust(vars.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
|
||||
background: color.adjust(vars-night.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* endregion */
|
||||
|
||||
/* region Range Slider */
|
||||
.night-mode .ui-slidr {
|
||||
.ve-night-mode .ui-slidr {
|
||||
&__ {
|
||||
&thumb {
|
||||
background: vars.$rgb-border-grey--trans;
|
||||
border-color: vars.$rgb-font--night;
|
||||
border-color: vars-night.$rgb-font--night;
|
||||
|
||||
&--hover,
|
||||
&:hover {
|
||||
background: color.adjust(vars.$rgb-border-grey--trans, $lightness: 10%);
|
||||
border-color: vars.$rgb-font--night;
|
||||
border-color: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
|
||||
&track-outer {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
&track-inner {
|
||||
background: vars.$rgb-border-grey--trans-night;
|
||||
background: vars-night.$rgb-border-grey--trans-night;
|
||||
}
|
||||
|
||||
&disp-value {
|
||||
&--visible {
|
||||
border-color: vars.$rgb-border-grey--night;
|
||||
background: vars.$rgb-bg--night;
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
background: vars-night.$rgb-bg--night;
|
||||
}
|
||||
}
|
||||
|
||||
&pip {
|
||||
background: vars.$rgb-font--night;
|
||||
background: vars-night.$rgb-font--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
Shared UI components
|
||||
*/
|
||||
@use "sass:color";
|
||||
@use "vars";
|
||||
|
||||
@use "../vars/vars";
|
||||
|
||||
/* region Misc/Shared */
|
||||
.ui__ {
|
||||
@@ -350,7 +351,6 @@ Shared UI components
|
||||
.ui-tab__ {
|
||||
&btn-tab-head {
|
||||
display: inline-block;
|
||||
padding: 2px 4px 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
cursor: pointer;
|
||||
@@ -752,7 +752,6 @@ Shared UI components
|
||||
transition: opacity vars.$time-2-frames;
|
||||
opacity: 0;
|
||||
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
border: 0;
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.night-mode {
|
||||
.ve-night-mode {
|
||||
.stripe- {
|
||||
&even {
|
||||
&:nth-child(even) {
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
background: vars-night.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&odd {
|
||||
&:nth-child(odd) {
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
background: vars-night.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
|
||||
&child- {
|
||||
&even-first {
|
||||
&:nth-child(even) > :first-child {
|
||||
background: vars.$rgb-stripe-grey--night;
|
||||
background: vars-night.$rgb-stripe-grey--night;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@
|
||||
&__ {
|
||||
&ele-hoverable {
|
||||
&:hover {
|
||||
background: vars.$rgb-bg--alt-night;
|
||||
background: vars-night.$rgb-bg--alt-night;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.clickable {
|
||||
&--link {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
@mixin mix-mobile-styles ($width-screen) {
|
||||
@media screen and (width > #{$width-screen}) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
@include vars.mix-is-print {
|
||||
.no-print {
|
||||
|
||||
42
scss/includes/util-spacing-night.scss
Normal file
42
scss/includes/util-spacing-night.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
@use "../vars/vars-night";
|
||||
|
||||
.ve-night-mode {
|
||||
.hr-0,
|
||||
.hr-1,
|
||||
.hr-2,
|
||||
.hr-3,
|
||||
.hr-4,
|
||||
.hr-5,
|
||||
.vr-0,
|
||||
.vr-1,
|
||||
.vr-2,
|
||||
.vr-3,
|
||||
.vr-4,
|
||||
.vr-5 {
|
||||
border-color: vars-night.$rgb-border-grey--night;
|
||||
}
|
||||
|
||||
.b-1p {
|
||||
border-color: vars-night.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.bt-1p {
|
||||
border-top-color: vars-night.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.br-1p {
|
||||
border-right-color: vars-night.$rgb-border-grey--night !important;
|
||||
}
|
||||
|
||||
.bb-1p {
|
||||
border-bottom-color: vars-night.$rgb-border-grey--night !important;
|
||||
|
||||
&-trans {
|
||||
border-bottom-color: vars-night.$rgb-border-grey--trans-night !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bl-1p {
|
||||
border-left-color: vars-night.$rgb-border-grey--night !important;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
.b-0 {
|
||||
border: 0 !important;
|
||||
@@ -682,6 +682,11 @@
|
||||
padding-left: 2px !important;
|
||||
}
|
||||
|
||||
.px-4p {
|
||||
padding-right: 4px !important;
|
||||
padding-left: 4px !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
@@ -710,6 +715,10 @@
|
||||
padding-top: 1px !important;
|
||||
}
|
||||
|
||||
.pt-2p {
|
||||
padding-top: 2px !important;
|
||||
}
|
||||
|
||||
.pr-0 {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "vars";
|
||||
@use "../vars/vars";
|
||||
|
||||
// region Fix Chrome
|
||||
input[type="checkbox"]:checked {
|
||||
|
||||
@@ -1,388 +0,0 @@
|
||||
@use "sass:color";
|
||||
|
||||
@font-face {
|
||||
font-family: Convergence;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local("Convergence-Regular"),
|
||||
url("../fonts/Convergence-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Roboto;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local("Roboto"),
|
||||
url("../fonts/Roboto-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Glyphicons Halflings";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src:
|
||||
local("glyphicons-halflings-regular"),
|
||||
url("../fonts/glyphicons-halflings-regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
// RMR/RMBRE
|
||||
@font-face {
|
||||
font-family: "Blambot Casual";
|
||||
src:
|
||||
local("Blambot-Casual"),
|
||||
url("../fonts/Blambot-Casual-Regular.woff2") format("woff2");
|
||||
}
|
||||
|
||||
// HWCS/HWAitW
|
||||
@font-face {
|
||||
font-family: HPPHumblescratch;
|
||||
src:
|
||||
local("HPPHumblescratch"),
|
||||
url("../fonts/hpphumblescratch-webfont.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@keyframes kf-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
$pct-darken-active: 10%;
|
||||
$pct-darken-border: 15%;
|
||||
$pct-darken-border--active: 20%;
|
||||
$pct-darken-hover: 5%;
|
||||
|
||||
$sz-y-header: 73px;
|
||||
|
||||
$spacer: 1rem;
|
||||
|
||||
$rgb-off-black: #333;
|
||||
|
||||
$rgb-active-blue--light: #7398b7;
|
||||
$rgb-active-blue: #337ab7;
|
||||
$rgb-active-blue--dark: #2a6496;
|
||||
$rgb-active-red--light: #8a4b4b;
|
||||
$rgb-active-red: #8a1a1b;
|
||||
$rgb-active-red--dark: #711617;
|
||||
$rgb-inactive-grey: #c3c3c3;
|
||||
|
||||
$rgb-name-red: #822000;
|
||||
$rgb-name-red--night: #d29a38;
|
||||
$rgb-name-alt--night: #c2c2c2;
|
||||
$rgb-bg-orange: #fdf1dc;
|
||||
$rgb-bg-highlight: #ff0;
|
||||
$rgb-border-yellow--statblock: #e69a28;
|
||||
|
||||
$rgb-link-blue: $rgb-active-blue;
|
||||
$rgb-link-blue--muted: #7096b7;
|
||||
$rgb-link-blue--night: #7db6e8;
|
||||
$rgb-link-blue--muted-night: #6e8eab;
|
||||
|
||||
$rgb-border-grey: #ccc;
|
||||
$rgb-border-grey--trans: #cccccca0;
|
||||
$rgb-border-grey--trans-muted: #ccc6;
|
||||
$rgb-border-grey--muted: #eee;
|
||||
$rgb-border-grey--list-row: #ddd;
|
||||
$rgb-border-grey--night: #555;
|
||||
$rgb-border-grey--trans-night: #555555a0;
|
||||
$rgb-border-grey--list-row-night: #444;
|
||||
$rgb-border-grey--statblock-night: #565656;
|
||||
|
||||
$rgb-modal-overlay-grey: #45454588;
|
||||
$rgb-shadow-grey: rgb(0 0 0 / 17.5%);
|
||||
$rgb-shadow-grey--dark: rgb(0 0 0 / 47.5%);
|
||||
|
||||
$rgb-stripe-grey: #88888818;
|
||||
$rgb-stripe-grey--faint: #bbbbbb18;
|
||||
$rgb-stripe-grey--night: #aaa2;
|
||||
|
||||
$rgb-cb-grey: #666;
|
||||
|
||||
$rgb-bg: #fff;
|
||||
$rgb-bg--alt: #f5f5f5;
|
||||
$rgb-bg-homebrew: #ff00001a;
|
||||
|
||||
$rgb-bg--night: #222;
|
||||
$rgb-bg--alt-night: #383838;
|
||||
$rgb-bg-homebrew--night: rgb(255 0 0 / 15%);
|
||||
|
||||
$rgb-bg-highlight--night: #cc0;
|
||||
$rgb-font: #333;
|
||||
$rgb-font--muted: #777;
|
||||
$rgb-font--night: #bbb;
|
||||
|
||||
$rgb-form-control-bg--night: #222;
|
||||
|
||||
$rgb-ctx-item-text-disabled: #777;
|
||||
|
||||
$rgb-alert-text-success: #3c763d;
|
||||
$rgb-alert-text-info: #31708f;
|
||||
$rgb-alert-text-warning: #8a6d3b;
|
||||
$rgb-alert-text-danger: #a94442;
|
||||
|
||||
$rgb-btn-default-active--night: #ffffff40;
|
||||
|
||||
$rgb-btn-danger-bg-red: #d9534f;
|
||||
$rgb-btn-danger-bg-red--night: #7e3a38;
|
||||
|
||||
$rgb-btn-danger-border-red: #ac2925;
|
||||
|
||||
$rgb-btn-primary-blue: $rgb-active-blue;
|
||||
$rgb-btn-primary-blue--desaturated: #b8b8b8;
|
||||
|
||||
$rgb-class-variant: #8f903c;
|
||||
$rgb-class-ua: #827e00;
|
||||
$rgb-subclass: #337ab7;
|
||||
$rgb-subclass--stale: #7699b7;
|
||||
$rgb-subclass-ua: #1d965d;
|
||||
$rgb-subclass-ua--stale: #5f967c;
|
||||
$rgb-class-brew: #8c3b96;
|
||||
$rgb-class-variant-brew: #ba75a1;
|
||||
|
||||
$rgb-class-variant--night: #e6ab94;
|
||||
$rgb-class-ua--night: #a2ce42;
|
||||
$rgb-subclass--night: $rgb-subclass;
|
||||
$rgb-subclass--night-stale: $rgb-subclass--stale;
|
||||
$rgb-subclass-ua--night: #179e50;
|
||||
$rgb-subclass-ua--night-stale: #509e8a;
|
||||
$rgb-class-brew--night: #aa40b4;
|
||||
$rgb-class-variant-brew--night: #da9db5;
|
||||
|
||||
$rgb-roll-min: #ff3100;
|
||||
$rgb-roll-max: #00b400;
|
||||
$rgb-roll-min--muted: color.adjust($rgb-roll-min, $saturation: - 35%);
|
||||
$rgb-roll-max--muted: color.adjust($rgb-roll-max, $saturation: - 35%);
|
||||
|
||||
// Colors blended using https://www.w3schools.com/colors/colors_mixer.asp
|
||||
$rgb-btn-primary-blue--night: #2a4e6c; // #337ab7 blended with #222
|
||||
$rgb-btn-danger-red--night: #7e3a38; // #d9534f blended with #222
|
||||
$rgb-btn-warning-orange--night: #896838; // #f0ad4e blended with #222
|
||||
$rgb-btn-info-blue--night: #2a697c; // #31b0d5 blended with #222
|
||||
$rgb-btn-success-green--night: #427442; // #5cb85c blended with #222
|
||||
|
||||
$rgb-alert-info-blue--night: #375a7f;
|
||||
$rgb-alert-danger-red--night: #8d1d1a;
|
||||
$rgb-alert-warning-orange--night: #cd8514;
|
||||
$rgb-alert-success-green--night: #009e56;
|
||||
|
||||
$rgb-alert-info-border-blue--night: color.adjust($rgb-alert-info-blue--night, $lightness: $pct-darken-border);
|
||||
$rgb-alert-danger-border-red--night: color.adjust($rgb-alert-danger-red--night, $lightness: $pct-darken-border);
|
||||
$rgb-alert-warning-border-orange--night: color.adjust($rgb-alert-warning-orange--night, $lightness: $pct-darken-border);
|
||||
$rgb-alert-success-border-green--night: color.adjust($rgb-alert-success-green--night, $lightness: $pct-darken-border);
|
||||
|
||||
/* Z-Indices */
|
||||
$z-token-image: 10;
|
||||
|
||||
$z-side-menu: 60;
|
||||
|
||||
$z-omnisearch: 100;
|
||||
$z-book-find: 100;
|
||||
$z-bookmode: 100;
|
||||
$z-rollerbox-hidden: 100;
|
||||
$z-card-viewer: 105; // Minimized rollbox should be underneath; active rollbox should be on top, so we can roll dice in cards
|
||||
$z-rollerbox-active: 110;
|
||||
|
||||
// Z-indices 200-300 reserved for hover windows
|
||||
$z-hwin: 200;
|
||||
|
||||
$z-search: 900;
|
||||
|
||||
$z-modal-wrapper: 1000;
|
||||
$z-modal-inner: 1001;
|
||||
$z-modal-legal: 1000;
|
||||
|
||||
$z-context-menu: 1100;
|
||||
|
||||
$z-temp-effect: 2000;
|
||||
|
||||
/* *** */
|
||||
|
||||
/* region Timing */
|
||||
$time-1-frame: 17ms;
|
||||
$time-2-frames: 34ms;
|
||||
$time-3-frames: 51ms;
|
||||
$time-4-frames: 67ms;
|
||||
$time-5-frames: 84ms;
|
||||
/* endregion */
|
||||
|
||||
// region Widths
|
||||
$w-ipt-number-1-digit: 24px;
|
||||
$w-ipt-number-1-5-digit: 30px;
|
||||
$w-ipt-number-2-digit: 40px;
|
||||
$w-ipt-number-3-digit: 60px;
|
||||
$w-ipt-number-4-digit: 80px;
|
||||
|
||||
$w-scroll-body: 15px;
|
||||
// endregion
|
||||
|
||||
// region Heights
|
||||
$h-ipt-xs: 22px;
|
||||
// endregion
|
||||
|
||||
// region Fonts
|
||||
$font-line-height: 1.4286;
|
||||
// endregion
|
||||
|
||||
@mixin mix-shadow-1 () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin mix-shadow-1--dark () {
|
||||
box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
|
||||
}
|
||||
|
||||
@mixin mix-shadow-2 () {
|
||||
box-shadow: 0 3px 6px $rgb-shadow-grey;
|
||||
}
|
||||
|
||||
@mixin mix-shadow-active {
|
||||
box-shadow: 0 0 2px 0 #000b;
|
||||
}
|
||||
|
||||
@mixin mix-shadow-active--night {
|
||||
box-shadow: 0 0 3px 0 #fffb;
|
||||
}
|
||||
|
||||
@mixin mix-row-glow-active {
|
||||
box-shadow: inset 0 0 0 5000px rgb(0 107 196 / 30%);
|
||||
}
|
||||
|
||||
@mixin mix-row-glow-active--alt {
|
||||
box-shadow: inset 0 0 0 5000px rgb(148 148 148 / 20%);
|
||||
}
|
||||
|
||||
@mixin mix-overflow-dots {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin mix-vr {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
border-left: 1px solid $rgb-border-grey;
|
||||
}
|
||||
|
||||
@mixin mix-is-print {
|
||||
@media print {
|
||||
@content;
|
||||
}
|
||||
|
||||
@at-root html.is-faux-print #{&} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/* *** */
|
||||
|
||||
@mixin mix-font-regular {
|
||||
font-family: Arial, sans-serif;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
$width-screen-xxs: 320px;
|
||||
$width-screen-xs: 480px;
|
||||
$width-screen-sm: 768px;
|
||||
$width-screen-md: 991px;
|
||||
$width-screen-lg: 1200px;
|
||||
$width-screen-hg: 1600px;
|
||||
|
||||
// region linked titles
|
||||
%linked-titles-base {
|
||||
.rd__h--0 .entry-title-inner:hover::before {
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
.rd__h--1 .entry-title-inner:hover::before {
|
||||
font-size: 55%;
|
||||
}
|
||||
|
||||
.rd__h--2 .entry-title-inner:hover::before {
|
||||
font-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
%linked-titles-base-inner {
|
||||
cursor: copy;
|
||||
|
||||
&:hover::before {
|
||||
content: " 🔗";
|
||||
color: rgb(0 0 0 / 20%);
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
right: 20px;
|
||||
margin-right: -30px;
|
||||
font-size: 85%;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
|
||||
// region filters
|
||||
$fltr-stripe: 11px;
|
||||
$fltr-2stripe: 22px;
|
||||
// endregion
|
||||
|
||||
// region Shared UI
|
||||
@mixin mix-cb-custom {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1px solid $rgb-border-grey;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
|
||||
&:active {
|
||||
@include mix-shadow-active;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-cb-grey;
|
||||
border-color: color.adjust($rgb-cb-grey, $lightness: 15%);
|
||||
|
||||
&.disabled {
|
||||
background-color: color.adjust($rgb-cb-grey, $lightness: 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mix-cb-custom--night {
|
||||
background: $rgb-bg--night;
|
||||
border-color: $rgb-border-grey--night;
|
||||
|
||||
&:active {
|
||||
@include mix-shadow-active--night;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $rgb-border-grey--night;
|
||||
border-color: color.adjust($rgb-border-grey--night, $lightness: 10%);
|
||||
|
||||
&.disabled {
|
||||
background-color: color.adjust($rgb-border-grey--night, $lightness: 20%);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
// endregion
|
||||
Reference in New Issue
Block a user