mirror of
https://github.com/lscambo13/ElegantFin.git
synced 2025-09-18 12:40:16 +00:00
dev: rearranged and documented variables a bit
This commit is contained in:
@@ -9,43 +9,49 @@
|
||||
|
||||
:root {
|
||||
--elegantFinFooterText: "ElegantFin Nightly";
|
||||
|
||||
/* Base theme colors */
|
||||
color-scheme: dark;
|
||||
--darkerGradientPoint: #111827;
|
||||
--darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
|
||||
--lighterGradientPoint: #1d2635;
|
||||
--lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
|
||||
--borderColor: rgb(71, 80, 92);
|
||||
--lighterBorderColor: rgb(255 255 255 / 20%);
|
||||
--lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
|
||||
--headerColor: rgba(30, 40, 54, 0.8);
|
||||
--drawerColor: rgba(30, 40, 54, 0.9);
|
||||
|
||||
--borderColor: rgb(71, 80, 92);
|
||||
--lighterBorderColor: rgb(255 255 255 / 20%);
|
||||
|
||||
--selectorBackgroundColor: rgb(55, 65, 81);
|
||||
--selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5);
|
||||
|
||||
--activeColorAlpha: rgba(119, 91, 244, 0.9);
|
||||
--activeColor: rgb(119, 91, 244);
|
||||
--tableBodyColor: rgb(31 41 55 / 1);
|
||||
--uiAccentColor: rgb(117 111 226);
|
||||
--btnMiniPlayColor: rgb(41 154 93);
|
||||
|
||||
/* Base component colors */
|
||||
--btnDeleteColor: rgb(169, 29, 29);
|
||||
--btnDeleteBorderColor: rgb(217, 84, 84);
|
||||
--btnSubmitColor: rgb(61, 54, 178);
|
||||
--btnSubmitBorderColor: rgb(117 111 226);
|
||||
--checkboxCheckedBgColor: rgb(79, 70, 229);
|
||||
--highlightOutlineColor: rgb(37, 99, 235);
|
||||
|
||||
--btnPlayBorderColor: color-mix(in srgb, var(--btnMiniPlayColor), rgb(255, 255, 255) 5%);
|
||||
--defaultBorder: var(--borderWidth) solid var(--borderColor);
|
||||
--defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);
|
||||
|
||||
/* dark theme based text colors */
|
||||
--textColor: rgb(209, 213, 219);
|
||||
--dimTextColor: rgb(156, 163, 175);
|
||||
--activeColorAlpha: rgba(119, 91, 244, 0.9);
|
||||
--activeColor: rgb(119, 91, 244);
|
||||
--tableBodyColor: rgb(31 41 55 / 1);
|
||||
--uiAccentColor: rgb(117 111 226);
|
||||
--btnMiniPlayColor: rgb(41 154 93);
|
||||
--btnPlayBorderColor: color-mix(in srgb, var(--btnMiniPlayColor), rgb(255, 255, 255) 5%);
|
||||
|
||||
/* textures */
|
||||
--backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
|
||||
--cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
|
||||
--hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
|
||||
--hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
|
||||
--shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
|
||||
--largerRadius: 1.25em;
|
||||
--largeRadius: 1em;
|
||||
--smallRadius: .5em;
|
||||
--smallerRadius: .375em;
|
||||
--borderWidth: 0.075em;
|
||||
--defaultBorder: var(--borderWidth) solid var(--borderColor);
|
||||
--defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);
|
||||
--ditheringMask: url(https://grainy-gradients.vercel.app/noise.svg);
|
||||
|
||||
/* login page customizations */
|
||||
@@ -53,11 +59,20 @@
|
||||
--loginPageBgUrl: url("");
|
||||
--loginPageText: "Sign in to continue";
|
||||
|
||||
/* standard component sizes */
|
||||
--largerRadius: 1.25em;
|
||||
--largeRadius: 1em;
|
||||
--smallRadius: .5em;
|
||||
--smallerRadius: .375em;
|
||||
--borderWidth: 0.075em;
|
||||
|
||||
--blurSmallest: blur(2px);
|
||||
--blurDefault: blur(5px);
|
||||
--blurLarge: blur(10px);
|
||||
--blurLargest: blur(20px);
|
||||
|
||||
--shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
|
||||
|
||||
/* to revert to old icons, use 'Material Icons'*/
|
||||
--iconPack: 'Material Icons Round';
|
||||
}
|
||||
|
Reference in New Issue
Block a user