mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
157 lines
5.2 KiB
SCSS
157 lines
5.2 KiB
SCSS
:host,
|
|
:root {
|
|
--bew-radius: 12px;
|
|
--bew-radius-half: calc(var(--bew-radius) / 2);
|
|
|
|
--bew-filter-glass: blur(20px) saturate(180%);
|
|
|
|
// #region shadow
|
|
--bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
--bew-shadow-4: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
// #endregion
|
|
|
|
--bew-logo-color: var(--bew-theme-color);
|
|
|
|
// #region colors
|
|
--bew-theme-color: rgb(0 161 214);
|
|
--bew-theme-color-10: rgba(0 161 214 / 0.1);
|
|
--bew-theme-color-20: rgba(0 161 214 / 0.2);
|
|
--bew-theme-color-30: rgba(0 161 214 / 0.3);
|
|
--bew-theme-color-40: rgba(0 161 214 / 0.4);
|
|
--bew-theme-color-50: rgba(0 161 214 / 0.5);
|
|
--bew-theme-color-60: rgba(0 161 214 / 0.6);
|
|
--bew-theme-color-70: rgba(0 161 214 / 0.7);
|
|
--bew-theme-color-80: rgba(0 161 214 / 0.8);
|
|
--bew-theme-color-90: rgba(0 161 214 / 0.9);
|
|
|
|
--bew-info-color: rgb(56 189 248);
|
|
--bew-info-color-10: rgba(56 189 248 / 0.1);
|
|
--bew-info-color-20: rgba(56 189 248 / 0.2);
|
|
--bew-info-color-30: rgba(56 189 248 / 0.3);
|
|
--bew-info-color-40: rgba(56 189 248 / 0.4);
|
|
--bew-info-color-50: rgba(56 189 248 / 0.5);
|
|
--bew-info-color-60: rgba(56 189 248 / 0.6);
|
|
--bew-info-color-70: rgba(56 189 248 / 0.7);
|
|
--bew-info-color-80: rgba(56 189 248 / 0.8);
|
|
--bew-info-color-90: rgba(56 189 248 / 0.9);
|
|
|
|
--bew-success-color: rgb(110 231 183);
|
|
--bew-success-color-10: rgba(110 231 183 / 0.1);
|
|
--bew-success-color-20: rgba(110 231 183 / 0.2);
|
|
--bew-success-color-30: rgba(110 231 183 / 0.3);
|
|
--bew-success-color-40: rgba(110 231 183 / 0.4);
|
|
--bew-success-color-50: rgba(110 231 183 / 0.5);
|
|
--bew-success-color-60: rgba(110 231 183 / 0.6);
|
|
--bew-success-color-70: rgba(110 231 183 / 0.7);
|
|
--bew-success-color-80: rgba(110 231 183 / 0.8);
|
|
--bew-success-color-90: rgba(110 231 183 / 0.9);
|
|
|
|
--bew-warning-color: rgb(250 204 21);
|
|
--bew-warning-color-10: rgba(250 204 21 / 0.1);
|
|
--bew-warning-color-20: rgba(250 204 21 / 0.2);
|
|
--bew-warning-color-30: rgba(250 204 21 / 0.3);
|
|
--bew-warning-color-40: rgba(250 204 21 / 0.4);
|
|
--bew-warning-color-50: rgba(250 204 21 / 0.5);
|
|
--bew-warning-color-60: rgba(250 204 21 / 0.6);
|
|
--bew-warning-color-70: rgba(250 204 21 / 0.7);
|
|
--bew-warning-color-80: rgba(250 204 21 / 0.8);
|
|
--bew-warning-color-90: rgba(250 204 21 / 0.9);
|
|
|
|
--bew-error-color: rgb(251 114 153);
|
|
--bew-error-color-10: rgba(251 114 153 / 0.1);
|
|
--bew-error-color-20: rgba(251 114 153 / 0.2);
|
|
--bew-error-color-30: rgba(251 114 153 / 0.3);
|
|
--bew-error-color-40: rgba(251 114 153 / 0.4);
|
|
--bew-error-color-50: rgba(251 114 153 / 0.5);
|
|
--bew-error-color-60: rgba(251 114 153 / 0.6);
|
|
--bew-error-color-70: rgba(251 114 153 / 0.7);
|
|
--bew-error-color-80: rgba(251 114 153 / 0.8);
|
|
--bew-error-color-90: rgba(251 114 153 / 0.9);
|
|
// #endregion
|
|
|
|
// #region text colors
|
|
--bew-text-1: hsl(217 33% 17%);
|
|
--bew-text-2: hsl(215 19% 35%);
|
|
--bew-text-3: hsl(215 19% 58%);
|
|
--bew-text-4: hsl(215 19% 72%);
|
|
// #endregion
|
|
|
|
--bew-bg: hsl(220 14% 96%);
|
|
--bew-bg-mask-opacity: 0;
|
|
--bew-bg-mask: hsl(220 14% 96% / var(--bew-bg-mask-opacity));
|
|
|
|
--bew-content-opacity: 0.6;
|
|
|
|
// #region content colors, used to buttons, cards, popover and so on
|
|
--bew-content-1: hsl(0 0% 100% / var(--bew-content-opacity));
|
|
--bew-content-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
|
|
|
|
--bew-content-solid-1: hsl(0 0% 100%);
|
|
--bew-content-solid-1-hover: hsl(0 0% 85%);
|
|
|
|
--bew-elevated-1: hsl(0 0% 100% / var(--bew-content-opacity));
|
|
--bew-elevated-2: hsl(0 0% 100% / var(--bew-content-opacity));
|
|
|
|
--bew-elevated-solid-1: hsl(0 0% 100%);
|
|
--bew-elevated-solid-2: hsl(0 0% 100%);
|
|
// #endregion
|
|
|
|
--bew-fill-1: rgb(95 95 125 / 13%);
|
|
--bew-fill-2: rgb(95 95 125 / 23%);
|
|
--bew-fill-3: rgb(95 95 125 / 33%);
|
|
--bew-fill-4: rgb(95 95 125 / 43%);
|
|
|
|
--bew-border-color: var(--bew-fill-1);
|
|
|
|
--bew-page-max-width: 2000px;
|
|
}
|
|
|
|
:host(.dark),
|
|
:root.dark {
|
|
// dark mode
|
|
--bew-logo-color: var(--bew-text-1);
|
|
|
|
--bew-text-1: hsl(215 19% 98%);
|
|
--bew-text-2: hsl(215 19% 70%);
|
|
--bew-text-3: hsl(215 19% 48%);
|
|
--bew-text-4: hsl(215 19% 25%);
|
|
|
|
--bew-bg: hsl(230 12% 6%);
|
|
--bew-bg-mask: hsl(230 12% 6% / var(--bew-bg-mask-opacity));
|
|
|
|
--bew-content-1: hsl(230 12% 13% / var(--bew-content-opacity));
|
|
--bew-content-1-hover: hsl(230 12% 25% / var(--bew-content-opacity));
|
|
|
|
--bew-content-solid-1: hsl(230 12% 13%);
|
|
--bew-content-solid-1-hover: hsl(230 12% 25%);
|
|
|
|
--bew-elevated-1: hsl(230 12% 15% / var(--bew-content-opacity));
|
|
--bew-elevated-2: hsl(230 12% 20% / var(--bew-content-opacity));
|
|
|
|
--bew-elevated-solid-1: hsl(230 12% 15%);
|
|
--bew-elevated-solid-2: hsl(230 12% 20%);
|
|
|
|
--bew-fill-1: rgb(95 95 125 / 18%);
|
|
--bew-fill-2: rgb(95 95 125 / 26%);
|
|
--bew-fill-3: rgb(95 95 125 / 36%);
|
|
--bew-fill-4: rgb(95 95 125 / 46%);
|
|
}
|
|
|
|
:root {
|
|
--band_blue: var(--bew-theme-color);
|
|
--text1: var(--bew-text-1);
|
|
--text2: var(--bew-text-2);
|
|
--text3: var(--bew-text-3);
|
|
--bg1: var(--bew-content-1);
|
|
--bg2: var(--bew-content-1);
|
|
--bg3: var(--bew-content-1);
|
|
--line-light: var(--bew-fill-2);
|
|
--line_regular: var(--bew-fill-3);
|
|
--line_bold: var(--bew-fill-4);
|
|
}
|