Cameron/5etools-mirror-2.github.io
1
0
Fork 0
mirror of https://github.com/Kornstalx/5etools-mirror-2.github.io.git synced 2025-10-28 20:45:35 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

v1.201.0

Browse Source
This commit is contained in:
TheGiddyLimit
2024-03-10 21:53:34 +00:00
parent b323d4123e
commit f00d1f3833
272 changed files with 24017 additions and 9350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
scss/includes/ui.scss
View File

@@ -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
&divider {
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%);
}
}