@loftyshaky/shared 2.6.0 → 2.7.0

package/scss/shared/selects.scss

@@ -1,26 +1,32 @@
-$arrow_offset: 11px;
-$separator_offset: 7px;
-
-.input_item {
-    select {
-        max-width: 100%;
-
-        &.input {
-            /* stylelint-disable-next-line property-no-vendor-prefix */
-            -webkit-appearance: none;
-            /* stylelint-disable-next-line property-no-vendor-prefix */
-            -moz-appearance: none;
-            background-position:
-                calc(100% - 16px) $arrow_offset,
-                calc(100% - 10px) $arrow_offset,
-                calc(100% - 33px) $separator_offset;
-            background-size:
-                6px 6px,
-                6px 6px,
-                1px 14px;
-            background-repeat: no-repeat;
-            padding-right: 44px;
-            line-height: $input_height; /* Fix text being cut from the bottom of selects. */
-        }
-    }
-}
+@use 'vars';
+
+$arrow_offset: 11px;
+$separator_offset: 7px;
+
+.input_item {
+    select {
+        max-width: 100%;
+
+        &.input {
+            appearance: none;
+            background-position: calc(100% - 34px) $separator_offset;
+            background-size: 1px 14px;
+            background-repeat: no-repeat;
+            padding-right: 43px;
+        }
+    }
+
+    &.select .input_w::after {
+        content: '';
+        position: absolute;
+        right: 11px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid;
+        pointer-events: none;
+    }
+}

package/scss/shared/side_btns.scss

@@ -0,0 +1,4 @@
+.side_btns {
+    position: relative;
+    display: flex;
+}

package/scss/shared/text.scss

@@ -1,20 +1,9 @@
-.main,
-.content,
-button,
-input {
-    font-family: 'u6Pgzb39sNF', sans-serif;
-    font-size: $font_main;
-}
-
-.input_item {
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -moz-appearance: textfield;
-
-    .input {
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            /* stylelint-disable-next-line property-no-vendor-prefix */
-            -webkit-appearance: none;
-        }
-    }
-}
+@use 'vars';
+
+.main,
+.content,
+button,
+input {
+    font-family: 'u6Pgzb39sNF', sans-serif;
+    font-size: vars.$font_main;
+}

package/scss/shared/themes/colors/aqua.scss

@@ -1,46 +1,55 @@
+@use '../../vars';
+
 $theme_color_ynq: white;
 $theme_color_jqv: rgb(255 255 255 / 0.1%);
 $theme_color_tdh: #67ff5f;
 $theme_color_udj: #ff7eee;
-$htc: $theme_color_ynq;
-$tbn: $glass_color;
-$gaq: #efefef;
-$gqb: linear-gradient(128deg, #1072d1 0%, #17909b 100%);
-$hfb: transparent;
-$gvb: rgb(255 255 255 / 36%);
-$npw: rgb(255 255 255 / 20%);
-$hcx: $theme_color_jqv;
-$hev: #bbb;
-$hyn: rgb(255 255 255 / 50%);
-$fxm: rgb(255 255 255 / 37.5%);
-$nur: rgb(255 255 255 / 20.8%);
-$yuv: rgb(255 255 255 / 60%);
-$vqo: $theme_color_jqv;
-$lpe: $theme_color_ynq;
-$rbp: $black;
-$tgp: $theme_color_ynq;
-$mdc: #d9d9d9; // Input placeholder
-$yos: #9e61ef; // Pagination button
-$nep: #90efff; // Button active (color picker)
-$htm: #ff974d; // Task (scheduler)
-$qgp: #49b344; // Button hover
-$hyv: #89ff84; // Button hover (color picker; scheduler; custom HTML/CSS/JS)
-$ycp: #fbff12; // Link normal
-$iub: #2e8cff; // Link normal (color picker) / Drop zone (scheduler)
-$cop: $theme_color_tdh; // Link hover
-$yun: #14bf0a; // Link hover (color picker) / text input data is valid (color picker)
-$ptn: #ff98f1; // Link visited
-$dwk: #d046e9; // Input focus (color picker)
-$uzf: #ffae9e; // Link click
-$hap: #f15f41; // Link click (color picker; scheduler; custom HTML/CSS/JS)
-$rqb: #ff5f66; // Text input data is in a warn state (outline)
-$thm: #ff9ea3; // Text input data is in warn state (error message)
-$suc: #d0111a; // [Clear New Tab] Text input data is in a warn state (outline; scheduler)
-$pxd: #fff900; // Section button selected indicator selected / [Clear New Tab] Background outline
-$ksu: $theme_color_tdh; // Section button selected indicator hover / Text input data is valid
-$upd: $theme_color_udj; // Tab key input outline
-$fpw: $theme_color_udj; // [Clear New Tab] Background focus outline
-$dfp: #0079ef; // Loading screen
-$nqp: rgb(255 84 169 / 99%); // Text selection
-$hgb: rgb(255 77 85 / 99%); // [Clear New Tab] Screen help text selection (custom HTML/CSS/JS)
-$beu: rgb(255 255 255 / 75%); // upload screen background
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --gaq: #efefef;
+    --tbn: #{vars.$glass_color};
+    --gqb: linear-gradient(128deg, #1072d1 0%, #17909b 100%);
+    --hfb: transparent;
+    --gvb: rgb(255 255 255 / 36%);
+    --npw: rgb(255 255 255 / 20%);
+    --hcx: #{$theme_color_jqv};
+    --hev: #bbb;
+    --hyn: rgb(255 255 255 / 50%);
+    --fxm: rgb(255 255 255 / 37.5%);
+    --nur: rgb(255 255 255 / 20.8%);
+    --yuv: rgb(255 255 255 / 60%);
+    --vqo: #{$theme_color_jqv};
+    --lpe: #{$theme_color_ynq};
+    --rbp: #{vars.$black};
+    --tgp: #{$theme_color_ynq};
+    --mdc: #b1b1b1;
+    --yos: #9e61ef;
+    --nep: #90efff;
+    --htm: #ff974d;
+    --qgp: #49b344;
+    --hyv: #89ff84;
+    --ycp: #fbff12;
+    --iub: #2e8cff;
+    --cop: #{$theme_color_tdh};
+    --yun: #14bf0a;
+    --ptn: #ff98f1;
+    --dwk: #d046e9;
+    --uzf: #ffae9e;
+    --hap: #f15f41;
+    --rqb: #ff5f66;
+    --thm: #ff9ea3;
+    --suc: #d0111a;
+    --pxd: #fff900;
+    --ksu: #{$theme_color_tdh};
+    --upd: #{$theme_color_udj};
+    --fpw: #{$theme_color_udj};
+    --dfp: #0079ef;
+    --pgs: #{$theme_color_ynq};
+    --tdu: rgb(219 0 11 / 50%);
+    --hyp: rgb(13 255 0 / 40%);
+    --dlf: rgb(0 43 255 / 38%);
+    --nqp: rgb(255 84 169 / 99%);
+    --hgb: rgb(255 77 85 / 99%);
+    --beu: rgb(255 255 255 / 75%);
+}

package/scss/shared/themes/colors/blaze.scss

@@ -0,0 +1,55 @@
+@use '../../vars';
+
+$theme_color_ynq: white;
+$theme_color_jqv: rgb(255 255 255 / 0.1%);
+$theme_color_tdh: #67ff5f;
+$theme_color_udj: #19f4ff;
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --gaq: #efefef;
+    --tbn: #{vars.$glass_color};
+    --gqb: linear-gradient(128deg, #b11d1d 0%, #974226 100%);
+    --hfb: transparent;
+    --gvb: rgb(255 255 255 / 36%);
+    --npw: rgb(255 255 255 / 20%);
+    --hcx: #{$theme_color_jqv};
+    --hev: #bbb;
+    --hyn: rgb(255 255 255 / 50%);
+    --fxm: rgb(255 255 255 / 37.5%);
+    --nur: rgb(255 255 255 / 20.8%);
+    --yuv: rgb(255 255 255 / 60%);
+    --vqo: #{$theme_color_jqv};
+    --lpe: #{$theme_color_ynq};
+    --rbp: #{vars.$black};
+    --tgp: #{$theme_color_ynq};
+    --mdc: #a9a9a9;
+    --yos: #42b326;
+    --nep: #90efff;
+    --htm: #ff974d;
+    --qgp: #1f90ff;
+    --hyv: #89ff84;
+    --ycp: #fbff12;
+    --iub: #2e8cff;
+    --cop: #{$theme_color_tdh};
+    --yun: #14bf0a;
+    --ptn: #1a44ff;
+    --dwk: #d046e9;
+    --uzf: #4bfcff;
+    --hap: #f15f41;
+    --rqb: #ff8513;
+    --thm: #ffa78f;
+    --suc: #d0111a;
+    --pxd: #fff900;
+    --ksu: #{$theme_color_tdh};
+    --upd: #{$theme_color_udj};
+    --fpw: #{$theme_color_udj};
+    --dfp: #c92a2a;
+    --pgs: #{$theme_color_ynq};
+    --tdu: rgb(255 141 34 / 50%);
+    --hyp: rgb(13 255 0 / 40%);
+    --dlf: rgb(0 191 255 / 50%);
+    --nqp: rgb(255 84 169 / 99%);
+    --hgb: rgb(255 77 85 / 99%);
+    --beu: rgb(255 255 255 / 75%);
+}

package/scss/shared/themes/colors/clover.scss

@@ -1,46 +1,55 @@
+@use '../../vars';
+
 $theme_color_ynq: white;
 $theme_color_jqv: rgb(255 255 255 / 0.1%);
 $theme_color_udl: #19f4ff;
 $theme_color_udj: #ff7eee;
-$htc: $theme_color_ynq;
-$tbn: $glass_color;
-$gaq: #efefef;
-$gqb: linear-gradient(128deg, #257d2c 0%, #457521 100%);
-$hfb: transparent;
-$gvb: rgb(255 255 255 / 36%);
-$npw: rgb(255 255 255 / 20%);
-$hcx: $theme_color_jqv;
-$hev: #bbb;
-$hyn: rgb(255 255 255 / 50%);
-$fxm: rgb(255 255 255 / 37.5%);
-$nur: rgb(255 255 255 / 20.8%);
-$yuv: rgb(255 255 255 / 60%);
-$vqo: $theme_color_jqv;
-$lpe: $theme_color_ynq;
-$rbp: $black;
-$tgp: $theme_color_ynq;
-$mdc: #d9d9d9;
-$yos: #9e61ef;
-$nep: #90efff;
-$htm: #ff974d;
-$qgp: #1f90ff;
-$hyv: #89ff84;
-$ycp: #fbff12;
-$iub: #2e8cff;
-$cop: #4bfcff;
-$yun: #14bf0a;
-$ptn: #ff98f1;
-$dwk: #d046e9;
-$uzf: #ffae9e;
-$hap: #f15f41;
-$rqb: #ff5f66;
-$thm: #ff9ea3;
-$suc: #d0111a;
-$pxd: #fff900;
-$ksu: #67ff5f;
-$upd: $theme_color_udl;
-$fpw: $theme_color_udl;
-$dfp: #29ab34;
-$nqp: rgb(244 96 62 / 99%);
-$hgb: rgb(255 77 85 / 99%);
-$beu: rgb(255 255 255 / 75%);
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --gaq: #efefef;
+    --tbn: #{vars.$glass_color};
+    --gqb: linear-gradient(128deg, #257d2c 0%, #457521 100%);
+    --hfb: transparent;
+    --gvb: rgb(255 255 255 / 36%);
+    --npw: rgb(255 255 255 / 20%);
+    --hcx: #{$theme_color_jqv};
+    --hev: #bbb;
+    --hyn: rgb(255 255 255 / 50%);
+    --fxm: rgb(255 255 255 / 37.5%);
+    --nur: rgb(255 255 255 / 20.8%);
+    --yuv: rgb(255 255 255 / 60%);
+    --vqo: #{$theme_color_jqv};
+    --lpe: #{$theme_color_ynq};
+    --rbp: #{vars.$black};
+    --tgp: #{$theme_color_ynq};
+    --mdc: #bdbdbd;
+    --yos: #9e61ef;
+    --nep: #90efff;
+    --htm: #ff974d;
+    --qgp: #1f90ff;
+    --hyv: #89ff84;
+    --ycp: #fbff12;
+    --iub: #2e8cff;
+    --cop: #4bfcff;
+    --yun: #14bf0a;
+    --ptn: #ff98f1;
+    --dwk: #d046e9;
+    --uzf: #ffae9e;
+    --hap: #f15f41;
+    --rqb: #ff5f66;
+    --thm: #ff9ea3;
+    --suc: #d0111a;
+    --pxd: #fff900;
+    --ksu: #67ff5f;
+    --upd: #{$theme_color_udl};
+    --fpw: #{$theme_color_udl};
+    --dfp: #29ab34;
+    --pgs: #{$theme_color_ynq};
+    --tdu: rgb(219 0 11 / 50%);
+    --hyp: rgb(13 255 0 / 40%);
+    --dlf: rgb(0 242 255 / 50%);
+    --nqp: rgb(244 96 62 / 99%);
+    --hgb: rgb(255 77 85 / 99%);
+    --beu: rgb(255 255 255 / 75%);
+}

package/scss/shared/themes/colors/dark.scss

@@ -1,54 +1,63 @@
-$theme_color_ynq: #2a3038;
-$theme_color_ytb: #1d2329;
-$theme_color_hbt: #42505e;
-$theme_color_kdc: white;
-$theme_color_ecm: #1b5a17;
-$theme_color_uvr: #144581;
-$theme_color_kxn: #308af9;
-$theme_color_tjn: #09a700;
-$theme_color_bvc: #b938c7;
-$theme_color_wnc: #ce7209;
-$theme_color_yhn: #bb141c;
-$theme_color_gsl: rgb(174 35 43 / 99%);
-$htc: $theme_color_ynq;
-$tbn: $theme_color_ynq;
-$gaq: $theme_color_ytb;
-$gqb: $theme_color_ytb;
-$hfb: $theme_color_ytb;
-$gvb: $theme_color_ytb;
-$npw: $theme_color_ytb;
-$hcx: $theme_color_ytb;
-$hev: $theme_color_hbt;
-$hyn: $theme_color_hbt;
-$fxm: $theme_color_hbt;
-$nur: $theme_color_hbt;
-$yuv: $theme_color_hbt;
-$vqo: $theme_color_hbt;
-$lpe: $theme_color_kdc;
-$rbp: $theme_color_kdc;
-$tgp: $theme_color_kdc;
-$mdc: #b1b1b1;
-$yos: $theme_color_uvr;
-$nep: $theme_color_uvr;
-$htm: #8d4816;
-$qgp: $theme_color_ecm;
-$hyv: $theme_color_ecm;
-$ycp: $theme_color_kxn;
-$iub: $theme_color_kxn;
-$cop: $theme_color_tjn;
-$yun: $theme_color_tjn;
-$ptn: $theme_color_bvc;
-$dwk: $theme_color_bvc;
-$uzf: $theme_color_wnc;
-$hap: $theme_color_wnc;
-$rqb: $theme_color_yhn;
-$thm: $theme_color_yhn;
-$suc: $theme_color_yhn;
-$pxd: $theme_color_kxn;
-$ksu: $theme_color_tjn;
-$upd: $theme_color_bvc;
-$fpw: $theme_color_bvc;
-$dfp: #29394d;
-$nqp: $theme_color_gsl;
-$hgb: $theme_color_gsl;
-$beu: rgb(0 0 0 / 90%);
+@use '../../vars';
+
+$theme_color_ynq: #2a3038;
+$theme_color_ytb: #1d2329;
+$theme_color_hbt: #42505e;
+$theme_color_kdc: white;
+$theme_color_ecm: #1b5a17;
+$theme_color_uvr: #144581;
+$theme_color_kxn: #308af9;
+$theme_color_tjn: #09a700;
+$theme_color_bvc: #b938c7;
+$theme_color_wnc: #ce7209;
+$theme_color_yhn: #bb141c;
+$theme_color_gsl: rgb(174 35 43 / 99%);
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --tbn: #{$theme_color_ynq};
+    --gqb: #{$theme_color_ytb};
+    --hfb: #{$theme_color_ytb};
+    --gvb: #{$theme_color_ytb};
+    --npw: #{$theme_color_ytb};
+    --hcx: #{$theme_color_ytb};
+    --gaq: #{$theme_color_ytb};
+    --hev: #{$theme_color_hbt};
+    --hyn: #{$theme_color_hbt};
+    --fxm: #{$theme_color_hbt};
+    --nur: #{$theme_color_hbt};
+    --yuv: #{$theme_color_hbt};
+    --vqo: #{$theme_color_hbt};
+    --lpe: #{$theme_color_kdc};
+    --rbp: #{$theme_color_kdc};
+    --tgp: #{$theme_color_kdc};
+    --mdc: #363636;
+    --yos: #{$theme_color_uvr};
+    --nep: #{$theme_color_uvr};
+    --htm: #8d4816;
+    --qgp: #{$theme_color_ecm};
+    --hyv: #{$theme_color_ecm};
+    --ycp: #{$theme_color_kxn};
+    --iub: #{$theme_color_kxn};
+    --cop: #{$theme_color_tjn};
+    --yun: #{$theme_color_tjn};
+    --ptn: #{$theme_color_bvc};
+    --dwk: #{$theme_color_bvc};
+    --uzf: #{$theme_color_wnc};
+    --hap: #{$theme_color_wnc};
+    --rqb: #{$theme_color_yhn};
+    --thm: #{$theme_color_yhn};
+    --suc: #{$theme_color_yhn};
+    --pxd: #{$theme_color_kxn};
+    --ksu: #{$theme_color_tjn};
+    --upd: #{$theme_color_bvc};
+    --fpw: #{$theme_color_bvc};
+    --dfp: #29394d;
+    --pgs: white;
+    --tdu: #932228;
+    --hyp: #3a8736;
+    --dlf: #1d63a9;
+    --nqp: #{$theme_color_gsl};
+    --hgb: #{$theme_color_gsl};
+    --beu: rgb(0 0 0 / 90%);
+}

package/scss/shared/themes/colors/lavender.scss

@@ -1,48 +1,57 @@
+@use '../../vars';
+
 $theme_color_ynq: white;
 $theme_color_jqv: rgb(255 255 255 / 0.1%);
 $theme_color_udj: #19f4ff;
 $theme_color_kvo: #4bff1f;
 $theme_color_ftp: #fbff12;
 $theme_color_oyq: #ff8400;
-$htc: $theme_color_ynq;
-$tbn: $glass_color;
-$gaq: #efefef;
-$gqb: linear-gradient(128deg, #3d29d1 0%, #6b3b9b 100%);
-$hfb: transparent;
-$gvb: rgb(255 255 255 / 36%);
-$npw: rgb(255 255 255 / 20%);
-$hcx: $theme_color_jqv;
-$hev: #bbb;
-$hyn: rgb(255 255 255 / 50%);
-$fxm: rgb(255 255 255 / 37.5%);
-$nur: rgb(255 255 255 / 20.8%);
-$yuv: rgb(255 255 255 / 60%);
-$vqo: $theme_color_jqv;
-$lpe: $theme_color_ynq;
-$rbp: $black;
-$tgp: $theme_color_ynq;
-$mdc: #d9d9d9;
-$yos: #42b326;
-$nep: #90efff;
-$htm: #ff974d;
-$qgp: #1f90ff;
-$hyv: #89ff84;
-$ycp: $theme_color_ftp;
-$iub: #2e8cff;
-$cop: $theme_color_kvo;
-$yun: #14bf0a;
-$ptn: $theme_color_udj;
-$dwk: #d046e9;
-$uzf: $theme_color_oyq;
-$hap: #f15f41;
-$rqb: #ff5f66;
-$thm: #ff9ea3;
-$suc: #d0111a;
-$pxd: #fff900;
-$ksu: #67ff5f;
-$upd: $theme_color_udj;
-$fpw: $theme_color_udj;
-$dfp: #4831df;
-$nqp: rgb(244 96 62 / 99%);
-$hgb: rgb(255 77 85 / 99%);
-$beu: rgb(255 255 255 / 75%);
+
+:root {
+    --htc: #{$theme_color_ynq};
+    --gaq: #efefef;
+    --tbn: #{vars.$glass_color};
+    --gqb: linear-gradient(128deg, #3d29d1 0%, #6b3b9b 100%);
+    --hfb: transparent;
+    --gvb: rgb(255 255 255 / 36%);
+    --npw: rgb(255 255 255 / 20%);
+    --hcx: #{$theme_color_jqv};
+    --hev: #bbb;
+    --hyn: rgb(255 255 255 / 50%);
+    --fxm: rgb(255 255 255 / 37.5%);
+    --nur: rgb(255 255 255 / 20.8%);
+    --yuv: rgb(255 255 255 / 60%);
+    --vqo: #{$theme_color_jqv};
+    --lpe: #{$theme_color_ynq};
+    --rbp: #{vars.$black};
+    --tgp: #{$theme_color_ynq};
+    --mdc: #a7a7a7;
+    --yos: #42b326;
+    --nep: #90efff;
+    --htm: #ff974d;
+    --qgp: #1f90ff;
+    --hyv: #89ff84;
+    --ycp: #{$theme_color_ftp};
+    --iub: #2e8cff;
+    --cop: #{$theme_color_kvo};
+    --yun: #14bf0a;
+    --ptn: #{$theme_color_udj};
+    --dwk: #d046e9;
+    --uzf: #{$theme_color_oyq};
+    --hap: #f15f41;
+    --rqb: #ff5f66;
+    --thm: #ff9ea3;
+    --suc: #d0111a;
+    --pxd: #fff900;
+    --ksu: #67ff5f;
+    --upd: #{$theme_color_udj};
+    --fpw: #{$theme_color_udj};
+    --dfp: #4831df;
+    --pgs: #{$theme_color_ynq};
+    --tdu: rgb(219 0 11 / 50%);
+    --hyp: rgb(13 255 0 / 40%);
+    --dlf: rgb(0 243 255 / 40%);
+    --nqp: rgb(244 96 62 / 99%);
+    --hgb: rgb(255 77 85 / 99%);
+    --beu: rgb(255 255 255 / 75%);
+}