dev: rearranged and documented variables a bit

This commit is contained in:
lscambo13
2025-05-11 17:46:54 +05:30
parent fb49ca0d7a
commit 721a90aa3f

View File

@@ -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';
}