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,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 */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user