rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app sidebar UI polishing

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-07 13:52:32 +04:00
parent dbc7711f98
commit a388c8cb96
11 changed files with 261 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
apps/console/src/styles/colors.css Normal file
View File

@@ -0,0 +1,168 @@
@theme {
--color-lime-1: var(--lime-1);
--color-lime-2: var(--lime-2);
--color-lime-3: var(--lime-3);
--color-lime-4: var(--lime-4);
--color-lime-5: var(--lime-5);
--color-lime-6: var(--lime-6);
--color-lime-7: var(--lime-7);
--color-lime-8: var(--lime-8);
--color-lime-9: var(--lime-9);
--color-lime-10: var(--lime-10);
--color-lime-11: var(--lime-11);
--color-lime-12: var(--lime-12);
--color-lime-a1: var(--lime-a1);
--color-lime-a2: var(--lime-a2);
--color-lime-a3: var(--lime-a3);
--color-lime-a4: var(--lime-a4);
--color-lime-a5: var(--lime-a5);
--color-lime-a6: var(--lime-a6);
--color-lime-a7: var(--lime-a7);
--color-lime-a8: var(--lime-a8);
--color-lime-a9: var(--lime-a9);
--color-lime-a10: var(--lime-a10);
--color-lime-a11: var(--lime-a11);
--color-lime-a12: var(--lime-a12);
--color-lime-contrast: var(--lime-contrast);
--color-lime-surface: var(--lime-surface);
--color-lime-indicator: var(--lime-indicator);
--color-lime-track: var(--lime-track);
}
@layer base {
:root {
--lime-1: #fcfdfa;
--lime-2: #f7faf4;
--lime-3: #e9f7de;
--lime-4: #dbf1c9;
--lime-5: #cce8b5;
--lime-6: #bbdba0;
--lime-7: #a6ca87;
--lime-8: #8ab562;
--lime-9: #8bb663;
--lime-10: #80aa58;
--lime-11: #597b38;
--lime-12: #314023;
--lime-a1: #66990005;
--lime-a2: #468c000b;
--lime-a3: #55c20021;
--lime-a4: #55bd0036;
--lime-a5: #50b0014a;
--lime-a6: #499f005f;
--lime-a7: #428f0078;
--lime-a8: #4187009d;
--lime-a9: #4288009c;
--lime-a10: #3d7d00a7;
--lime-a11: #2a5600c7;
--lime-a12: #102200dc;
--lime-contrast: #fff;
--lime-surface: #f5f9f1cc;
--lime-indicator: #8bb663;
--lime-track: #8bb663;
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
--lime-1: oklch(99.3% 0.0039 131.3);
--lime-2: oklch(98.2% 0.0087 131.3);
--lime-3: oklch(96% 0.0366 131.3);
--lime-4: oklch(93.2% 0.0583 131.3);
--lime-5: oklch(89.8% 0.0744 131.3);
--lime-6: oklch(85.4% 0.0862 131.3);
--lime-7: oklch(79.5% 0.0979 131.3);
--lime-8: oklch(72.3% 0.121 131.3);
--lime-9: oklch(72.6% 0.121 131.3);
--lime-10: oklch(68.9% 0.121 131.3);
--lime-11: oklch(54.2% 0.1026 131.3);
--lime-12: oklch(35% 0.0511 131.3);
--lime-a1: color(display-p3 0.4118 0.6078 0.0196 / 0.02);
--lime-a2: color(display-p3 0.3765 0.5569 0.0196 / 0.044);
--lime-a3: color(display-p3 0.3922 0.7451 0.0039 / 0.122);
--lime-a4: color(display-p3 0.3647 0.702 0.0078 / 0.197);
--lime-a5: color(display-p3 0.3373 0.6549 0.0039 / 0.271);
--lime-a6: color(display-p3 0.3059 0.5843 0.0039 / 0.35);
--lime-a7: color(display-p3 0.2745 0.5255 0.0039 / 0.444);
--lime-a8: color(display-p3 0.2667 0.4902 0 / 0.577);
--lime-a9: color(display-p3 0.2667 0.4941 0 / 0.573);
--lime-a10: color(display-p3 0.251 0.4549 0 / 0.616);
--lime-a11: color(display-p3 0.1686 0.302 0 / 0.75);
--lime-a12: color(display-p3 0.0667 0.1216 0 / 0.851);
--lime-contrast: #fff;
--lime-surface: color(display-p3 0.9647 0.9765 0.9529 / 0.8);
--lime-indicator: oklch(72.6% 0.121 131.3);
--lime-track: oklch(72.6% 0.121 131.3);
}
}
}
.dark {
--lime-1: #0f120d;
--lime-2: #161914;
--lime-3: #21281b;
--lime-4: #2b371f;
--lime-5: #354527;
--lime-6: #405330;
--lime-7: #4c6238;
--lime-8: #597441;
--lime-9: #8bb663;
--lime-10: #80aa58;
--lime-11: #9cc775;
--lime-12: #d2ebbf;
--lime-a1: #00910002;
--lime-a2: #9ff46709;
--lime-a3: #b5fc7719;
--lime-a4: #b3fe6929;
--lime-a5: #b5fe7638;
--lime-a6: #baff8147;
--lime-a7: #beff8457;
--lime-a8: #bdfd846b;
--lime-a9: #c1ff88b1;
--lime-a10: #beff80a4;
--lime-a11: #c7ff94c3;
--lime-a12: #e4ffcfea;
--lime-contrast: #fff;
--lime-surface: #1b211780;
--lime-indicator: #8bb663;
--lime-track: #8bb663;
@supports (color: color(display-p3 1 1 1)) {
@media (color-gamut: p3) {
--lime-1: oklch(17.8% 0.0117 131.3);
--lime-2: oklch(20.9% 0.0117 131.3);
--lime-3: oklch(26.6% 0.025 131.3);
--lime-4: oklch(31.9% 0.0435 131.3);
--lime-5: oklch(36.7% 0.0515 131.3);
--lime-6: oklch(41.6% 0.06 131.3);
--lime-7: oklch(46.8% 0.0695 131.3);
--lime-8: oklch(52.4% 0.081 131.3);
--lime-9: oklch(72.6% 0.121 131.3);
--lime-10: oklch(68.9% 0.121 131.3);
--lime-11: oklch(78% 0.1182 131.3);
--lime-12: oklch(91.1% 0.0649 131.3);
--lime-a1: color(display-p3 0 0.8549 0 / 0.005);
--lime-a2: color(display-p3 0.7608 0.9922 0.4157 / 0.034);
--lime-a3: color(display-p3 0.7569 1 0.5137 / 0.097);
--lime-a4: color(display-p3 0.7529 1 0.4863 / 0.16);
--lime-a5: color(display-p3 0.7686 1 0.5176 / 0.219);
--lime-a6: color(display-p3 0.8 1 0.5686 / 0.274);
--lime-a7: color(display-p3 0.8 1 0.5804 / 0.337);
--lime-a8: color(display-p3 0.8 1 0.5843 / 0.412);
--lime-a9: color(display-p3 0.8118 1 0.5922 / 0.69);
--lime-a10: color(display-p3 0.8039 1 0.5647 / 0.639);
--lime-a11: color(display-p3 0.8314 1 0.6275 / 0.761);
--lime-a12: color(display-p3 0.9216 1 0.8353 / 0.912);
--lime-contrast: #fff;
--lime-surface: color(display-p3 0.1098 0.1255 0.0863 / 0.5);
--lime-indicator: oklch(72.6% 0.121 131.3);
--lime-track: oklch(72.6% 0.121 131.3);
}
}
}
}