renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
ccce9c2e05ab040ba8233fdbfc9bec0127ca08e2
BewlyBewly/src/styles/variables.scss
Hakadao ccce9c2e05 style: adjust max width for bewlybewly pages
2023-10-29 15:20:01 +08:00

457 lines
13 KiB
SCSS
Raw Blame History

: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.05);
--bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.12),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.14),
0 8px 10px -6px rgb(0 0 0 / 0.12);
--bew-shadow-4: 0 34px 60px -20px rgb(0 0 0 / 0.34),
0 25px 50px -12px rgb(0 0 0 / 0.2), 0 12px 14px -8px rgb(0 0 0 / 0.14);
// #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(219 65 108);
--bew-error-color-10: rgba(219 65 108 / 0.1);
--bew-error-color-20: rgba(219 65 108 / 0.2);
--bew-error-color-30: rgba(219 65 108 / 0.3);
--bew-error-color-40: rgba(219 65 108 / 0.4);
--bew-error-color-50: rgba(219 65 108 / 0.5);
--bew-error-color-60: rgba(219 65 108 / 0.6);
--bew-error-color-70: rgba(219 65 108 / 0.7);
--bew-error-color-80: rgba(219 65 108 / 0.8);
--bew-error-color-90: rgba(219 65 108 / 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(0 0% 100%);
--bew-homepage-bg: hsl(220 14% 96%);
--bew-homepage-bg-mask-opacity: 0;
--bew-homepage-bg-mask: hsl(
220 14% 96% / var(--bew-homepage-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-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
--bew-elevated-2: hsl(0 0% 100% / var(--bew-content-opacity));
--bew-elevated-2-hover: hsl(0 0% 85% / var(--bew-content-opacity));
--bew-elevated-solid-1: hsl(0 0% 100%);
--bew-elevated-solid-1-hover: hsl(0 0% 85%);
--bew-elevated-solid-2: hsl(0 0% 100%);
--bew-elevated-solid-2-hover: hsl(0 0% 85%);
// #endregion
--bew-fill-1: rgba(131 131 145 / 13%);
--bew-fill-2: rgb(131 131 145 / 23%);
--bew-fill-3: rgb(131 131 145 / 33%);
--bew-fill-4: rgb(131 131 145 / 43%);
--bew-border-color: rgb(131 131 145 / 18%);
--bew-page-max-width: 2280px;
--bew-filter-icon-glow: saturate(0) brightness(2)
drop-shadow(0 0 1px var(--bew-theme-color))
drop-shadow(0 0 4px var(--bew-theme-color));
}
:host(.dark),
:root.dark {
// dark mode
// #region shadow
--bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.15),
0 2px 4px -2px rgb(0 0 0 / 0.1);
--bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.22),
0 4px 6px -4px rgb(0 0 0 / 0.16);
--bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.22),
0 8px 10px -6px rgb(0 0 0 / 0.16);
--bew-shadow-4: 0 34px 60px -20px rgb(0 0 0 / 0.44),
0 25px 50px -12px rgb(0 0 0 / 0.3), 0 12px 14px -8px rgb(0 0 0 / 0.18);
// #endregion
--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-homepage-bg: hsl(230 12% 6%);
--bew-homepage-bg-mask: hsl(230 12% 6% / var(--bew-homepage-bg-mask-opacity));
--bew-content-1: hsl(230 12% 12% / var(--bew-content-opacity));
--bew-content-1-hover: hsl(230 12% 28% / var(--bew-content-opacity));
--bew-content-solid-1: hsl(230 12% 12%);
--bew-content-solid-1-hover: hsl(230 12% 28%);
--bew-elevated-1: hsl(230 12% 15% / var(--bew-content-opacity));
--bew-elevated-1-hover: hsl(230 12% 31% / var(--bew-content-opacity));
--bew-elevated-2: hsl(230 12% 18% / var(--bew-content-opacity));
--bew-elevated-2-hover: hsl(230 12% 34% / var(--bew-content-opacity));
--bew-elevated-solid-1: hsl(230 12% 15%);
--bew-elevated-solid-1-hover: hsl(230 12% 31%);
--bew-elevated-solid-2: hsl(230 12% 18%);
--bew-elevated-solid-2-hover: hsl(230 12% 34%);
--bew-fill-1: rgb(131 131 145 / 14%);
--bew-fill-2: rgb(131 131 145 / 24%);
--bew-fill-3: rgb(131 131 145 / 34%);
--bew-fill-4: rgb(131 131 145 / 44%);
--bew-border-color: rgb(131 131 145 / 26%);
}
:root.bewly-design {
--brand_pink: var(--bew-theme-color);
--brand_pink_thin: var(--bew-theme-color-20);
--brand_blue: var(--bew-theme-color);
--brand_blue_thin: var(--bew-theme-color-20);
--brand_pink_hover: var(--bew-theme-color-80);
--brand_pink_active: var(--bew-theme-color);
--brand_pink_disabled: var(--bew-theme-color-60);
--brand_blue_hover: var(--bew-theme-color-80);
--brand_blue_active: var(--bew-theme-color);
--brand_blue_disabled: var(--bew-theme-color-60);
--text_link: var(--bew-theme-color);
--bpx-fn-color: var(--bew-theme-color);
--bpx-primary-color: var(--bew-theme-color);
--bpx-fn-hover-color: var(--bew-theme-color-80);
--bpx-box-shadow: rgba(0, 0, 0, 0.15);
--bpx-toast-fn-color: var(--bew-theme-color);
--bpx-toast-fn-hover-color: var(--bew-theme-color-80);
}
:root.dark.bewly-design {
// --brand_pink: var(--bew-theme-color);
// --brand_pink_thin: var(--bew-theme-color-20);
// --brand_blue: var(--bew-theme-color);
// --brand_blue_thin: var(--bew-theme-color-20);
--stress_red: var(--Re5);
--stress_red_thin: var(--Re1);
--success_green: var(--Gr5);
--success_green_thin: var(--Gr1);
--operate_orange: var(--Or5);
--operate_orange_thin: var(--Or1);
--pay_yellow: var(--Ye5);
--pay_yellow_thin: var(--Ye1);
--bg1: var(--bew-bg);
--bg2: var(--bew-content-solid-1);
--bg3: var(--bew-content-solid-1);
--bg1_float: var(--bew-elevated-solid-1);
--bg2_float: var(--bew-elevated-solid-2);
--text_white: var(--Wh0_u);
--text1: var(--bew-text-1);
--text2: var(--bew-text-2);
--text3: var(--bew-text-3);
--text4: var(--bew-text-4);
// --text_link: var(--bew-theme-color);
--text_notice: var(--Ye6);
--line_light: var(--bew-fill-1);
--line_regular: var(--bew-fill-2);
--line_bold: var(--bew-fill-3);
--graph_white: var(--bew-content-solid-1);
--graph_bg_thin: var(--bew-content-solid-1);
--graph_bg_regular: var(--bew-elevated-solid-1);
--graph_bg_thick: var(--bew-elevated-solid-2);
--graph_weak: var(--Ga3);
--graph_medium: var(--Ga5);
--graph_icon: var(--Ga7);
--shadow: var(--Ba0);
// --bpx-primary-color: var(--bew-theme-color);
// --bpx-fn-color: var(--bew-theme-color);
// --bpx-fn-hover-color: var(--bew-theme-color);
// --brand_pink_hover: var(--bew-theme-color-80);
// --brand_pink_active: var(--bew-theme-color);
// --brand_pink_disabled: var(--bew-theme-color-60);
// --brand_blue_hover: var(--bew-theme-color-80);
// --brand_blue_active: var(--bew-theme-color);
// --brand_blue_disabled: var(--bew-theme-color-60);
--graph_bg_thin_rgb: 13, 14, 17;
--bpx-aux-header-bg: var(--bew-content-solid-1);
--bpx-aux-header-icon: var(--bew-text-2);
--bpx-aux-header-font: var(--bew-text-1);
--bpx-aux-content-bg: var(--bew-content-solid-1);
--bpx-aux-content-font1: var(--bew-text-1);
--bpx-aux-content-font2: var(--bew-text-2);
--bpx-aux-footer-bg: var(--bew-content-solid-1);
--bpx-aux-footer-font: var(--bew-text-3);
--bpx-aux-footer-font-hover: var(--bew-text-1);
--bpx-dmsend-main-bg: var(--bew-content-solid-1);
--bpx-dmsend-input-bg: var(--bew-fill-1);
--bpx-dmsend-info-font: var(--bew-text-1);
--bpx-dmsend-switch-icon: var(--bew-text-2);
--bpx-dmsend-border: var(--bew-border-color);
--bpx-dmsend-input-font: var(--bew-text-1);
}
:root.dark.bewly-design {
--Ga0: #0d0d0e;
--Ga0_s: #1e2022;
--Ga0_t: #1e2022;
--Ga1: #000000;
--Ga1_s: #232527;
--Ga1_t: #232527;
--Ga1_e: #232527;
--Ga2: #2f3134;
--Ga2_t: #2f3134;
--Ga3: #46494d;
--Ga3_t: #46494d;
--Ga4: #5e6267;
--Ga4_t: #5e6267;
--Ga5: #757a81;
--Ga5_t: #757a81;
--Ga6: #8b9097;
--Ga6_t: #8b9097;
--Ga7: #a2a7ae;
--Ga7_t: #a2a7ae;
--Ga8: #b9bdc2;
--Ga8_t: #b9bdc2;
--Ga9: #d0d3d7;
--Ga9_t: #d0d3d7;
--Ga10: #e7e9eb;
--Ga10_t: #e7e9eb;
--Ga11: #242628;
--Ga12: #1f2022;
--Wh0: #17181a;
--Wh0_t: #17181a;
--Ba0: #000000;
--Ba0_s: #ffffff;
--Ba0_t: #000000;
--Pi0: #26161c;
--Pi1: #2f1a22;
--Pi2: #472030;
--Pi3: #76304b;
--Pi4: #a73e65;
--Pi5: #d44e7d;
--Pi5_t: #d44e7d;
--Pi6: #dc6d94;
--Pi7: #e38caa;
--Pi8: #ebabc1;
--Pi9: #f2cad8;
--Pi10: #fae9ef;
--Ma0: #261525;
--Ma1: #2e182d;
--Ma2: #461c43;
--Ma3: #72296c;
--Ma4: #a13396;
--Ma5: #cb41bb;
--Ma6: #d462c7;
--Ma7: #dd83d3;
--Ma8: #e6a4de;
--Ma9: #efc5ea;
--Ma10: #f8e6f6;
--Re0: #261314;
--Re1: #2e1617;
--Re2: #471a1c;
--Re3: #742728;
--Re4: #a63131;
--Re5: #d1403e;
--Re6: #d9615f;
--Re7: #e18281;
--Re8: #e9a3a2;
--Re9: #f1c5c4;
--Re10: #f9e5e5;
--Or0: #28180f;
--Or1: #301b10;
--Or2: #4a230e;
--Or3: #783610;
--Or4: #a9490d;
--Or5: #d66011;
--Or6: #dd7c3a;
--Or7: #e49764;
--Or8: #ebb38d;
--Or9: #f2ceb6;
--Or10: #faeadf;
--Ye0: #2a1e0f;
--Ye1: #342410;
--Ye2: #4d300b;
--Ye3: #7c4c08;
--Ye4: #ad6800;
--Ye5: #db8700;
--Ye6: #e19c2c;
--Ye7: #e7b158;
--Ye8: #eec584;
--Ye9: #f4dab1;
--Ye10: #faefdd;
--Ly0: #2a2310;
--Ly1: #332a11;
--Ly2: #49390c;
--Ly3: #745909;
--Ly4: #a27c00;
--Ly5: #cca000;
--Ly6: #d5b02c;
--Ly7: #dec158;
--Ly8: #e7d184;
--Ly9: #efe2b1;
--Ly10: #f8f2dd;
--Lg0: #19220f;
--Lg1: #1e2911;
--Lg2: #273c0e;
--Lg3: #3c600f;
--Lg4: #50840b;
--Lg5: #67a70e;
--Lg6: #81b638;
--Lg7: #9cc562;
--Lg8: #b6d58b;
--Lg9: #d0e4b5;
--Lg10: #ebf3df;
--Gr0: #102017;
--Gr1: #11271b;
--Gr2: #123923;
--Gr3: #175c34;
--Gr4: #198042;
--Gr5: #1fa251;
--Gr6: #46b26f;
--Gr7: #6dc28d;
--Gr8: #93d2ab;
--Gr9: #bae2c9;
--Gr10: #e1f3e8;
--Cy0: #0c1f20;
--Cy1: #0d2627;
--Cy2: #093739;
--Cy3: #085b5c;
--Cy4: #028080;
--Cy5: #03a29f;
--Cy6: #2fb2b0;
--Cy7: #5ac2c0;
--Cy8: #86d2d1;
--Cy9: #b2e2e1;
--Cy10: #ddf3f3;
--Lb0: #0a1b23;
--Lb1: #0b202a;
--Lb2: #082d40;
--Lb3: #064a69;
--Lb4: #006996;
--Lb5: #0087bd;
--Lb6: #2c9cc8;
--Lb7: #58b1d4;
--Lb8: #84c5df;
--Lb9: #b1dbeb;
--Lb10: #ddeff6;
--Bl0: #151826;
--Bl1: #181c2f;
--Bl2: #1f2748;
--Bl3: #2e3c76;
--Bl4: #3b53a8;
--Bl5: #4b6bd4;
--Bl6: #6a85db;
--Bl7: #899ee3;
--Bl8: #a9b8ea;
--Bl9: #c8d2f2;
--Bl10: #e7ebf9;
--Pu0: #1d1628;
--Pu1: #221a31;
--Pu2: #31214c;
--Pu3: #4e317d;
--Pu4: #6d3fb1;
--Pu5: #8c50e0;
--Pu6: #a06ee5;
--Pu7: #b48deb;
--Pu8: #c8abf0;
--Pu9: #dbc9f5;
--Pu10: #f0e8fb;
--Br0: #211d1b;
--Br1: #282320;
--Br2: #382f2a;
--Br3: #59483f;
--Br4: #7a6154;
--Br5: #9a7c6a;
--Br6: #ac9384;
--Br7: #bda99e;
--Br8: #cebfb7;
--Br9: #e0d7d1;
--Br10: #f2eeeb;
--Si0: #212325;
--Si1: #27292c;
--Si2: #36393f;
--Si3: #535962;
--Si4: #6f7987;
--Si5: #8c99aa;
--Si6: #a0abb9;
--Si7: #b4bcc7;
--Si8: #c8ced6;
--Si9: #dce0e5;
--Si10: #f0f2f4;
}
Reference in New Issue View Git Blame Copy Permalink