danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

add: menu page dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 19:30:16 +03:30
parent 5936f66665
commit d11cd474ab
11 changed files with 119 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+91 -50
View File
@@ -37,7 +37,7 @@ input[type="password"]:not(:placeholder-shown) {
font-style: normal;
font-weight: normal;
speak: none;
color: #b6b6b6da;
color: var(--disabled-text);
margin: 5px 0px 10px 0px;
font-size: 24px;
/* Controls dot size (width & height) */
@@ -96,7 +96,7 @@ input[type="password"]:not(:placeholder-shown) {
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 0px transparent inset !important;
box-shadow: 0 0 0px 0px transparent inset !important;
-webkit-text-fill-color: #b6b6b6da !important;
-webkit-text-fill-color: var(--disabled-text) !important;
background: currentColor !important;
transition: background-color 10000s ease-in-out 0s;
}
@@ -104,7 +104,7 @@ input:-webkit-autofill {
input:autofill {
-webkit-box-shadow: 0 0 0px 0px transparent inset !important;
box-shadow: 0 0 0px 0px transparent inset !important;
-webkit-text-fill-color: #b6b6b6da !important;
-webkit-text-fill-color: var(--disabled-text) !important;
background: currentColor !important;
transition: background-color 10000s ease-in-out 0s;
}
@@ -129,9 +129,9 @@ input:autofill {
border-radius: inherit;
/* inherit border-radius from parent */
background: linear-gradient(to bottom right,
#FFFFFF 6.25%,
var(--container) 6.25%,
rgba(255, 253, 253, 0) 52.01%,
#FFFFFF 96.87%);
var(--container) 96.87%);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
@@ -146,7 +146,6 @@ input:autofill {
box-sizing: border-box;
}
@theme {
--font-irancell: var(--font-irancell);
@@ -187,24 +186,38 @@ input:autofill {
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-background: var(--background); /* oklch(0.963 0.008 289.2) */
--color-container: var(--container); /* oklch(1 0 0) */
--color-primary: var(--primary); /* oklch(0.14 0 0) */
--color-border: var(--border); /* oklch(0.885 0.007 248.3) */
--color-invalid: var(--invalid); /* oklch(0.515 0.118 27.5) */
--color-valid: var(--valid); /* oklch(0.46 0.107 132.7) */
--color-foreground: var(--foreground); /* oklch(0.202 0 0) */
--color-disabled: var(--disabled); /* oklch(0.91 0.004 295.2) */
--color-disabled2: var(--disabled2); /* oklch(0.5 0 0) */
--color-disabled3: var(--disabled3); /* oklch(0.949 0.002 277.1) */
--color-disabled-text: var(--disabled-text); /* oklch(0.34 0.006 257.4) */
--color-menu-header: var(--menu-header); /* oklch(0.79 0.03 237.3) */
--color-icon-deactive: var(--icon-deactive); /* oklch(0.65 0.027 234.8) */
--color-icon-active: var(--icon-active); /* oklch(0.12 0.002 304.5) */
--color-background: var(--background);
/* oklch(0.963 0.008 289.2) */
--color-container: var(--container);
/* oklch(1 0 0) */
--color-primary: var(--primary);
/* oklch(0.14 0 0) */
--color-border: var(--border);
/* oklch(0.885 0.007 248.3) */
--color-invalid: var(--invalid);
/* oklch(0.515 0.118 27.5) */
--color-valid: var(--valid);
/* oklch(0.46 0.107 132.7) */
--color-foreground: var(--foreground);
/* oklch(0.202 0 0) */
--color-disabled: var(--disabled);
/* oklch(0.91 0.004 295.2) */
--color-disabled2: var(--disabled2);
/* oklch(0.5 0 0) */
--color-disabled3: var(--disabled3);
/* oklch(0.949 0.002 277.1) */
--color-disabled-text: var(--disabled-text);
/* oklch(0.34 0.006 257.4) */
--color-menu-header: var(--menu-header);
/* oklch(0.79 0.03 237.3) */
--color-icon-deactive: var(--icon-deactive);
/* oklch(0.65 0.027 234.8) */
--color-icon-active: var(--icon-active);
/* oklch(0.12 0.002 304.5) */
}
/* unified theme */
:root {
:root {
--font-irancell: "Irancell";
--radius-normal: 10px;
@@ -247,20 +260,34 @@ html[data-theme="light"] {
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0); */
--background: oklch(0.963 0.008 289.2); /* #F4F5F9 */
--container: oklch(1 0 0); /* #FFFFFF */
--primary: oklch(0.14 0 0); /* #000000 */
--border: oklch(0.885 0.007 248.3); /* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7); /* #439C46 */
--foreground: oklch(0.202 0 0); /* #333333 */
--disabled: oklch(0.91 0.004 295.2); /* #E7E7E7 */
--disabled2: oklch(0.5 0 0); /* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4); /* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5); /* #292D32 */
--background: oklch(0.963 0.008 289.2);
/* #F4F5F9 */
--container: oklch(1 0 0);
/* #FFFFFF */
--primary: oklch(0.14 0 0);
/* #000000 */
--border: oklch(0.885 0.007 248.3);
/* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5);
/* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7);
/* #439C46 */
--foreground: oklch(0.202 0 0);
/* #333333 */
--disabled: oklch(0.91 0.004 295.2);
/* #E7E7E7 */
--disabled2: oklch(0.5 0 0);
/* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */
--disabled-text: oklch(0.34 0.006 257.4);
/* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8);
/* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5);
/* #292D32 */
}
html[data-theme="dark"] {
@@ -296,20 +323,34 @@ html[data-theme="dark"] {
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0); */
--background: oklch(23.26% 0.014 253.1); /* #F4F5F9 */
--container: oklch(25.33% 0.016 252.42); /* #FFFFFF */
--primary: oklch(14% 0.005 285.823); /* #000000 */
--border: oklch(21.15% 0.012 254.09); /* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5); /* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7); /* #439C46 */
--foreground: oklch(97.807% 0.029 256.847); /* #333333 */
--disabled: oklch(42.866% 0.00494 286.051); /* #E7E7E7 */
--disabled2: oklch(0.5 0 0); /* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1); /* #F2F2F2 */
--disabled-text: oklch(75.73% 0.01398 251.72); /* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3); /* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8); /* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5); /* #292D32 */
--background: oklch(23.26% 0.014 253.1);
/* #F4F5F9 */
--container: oklch(30.33% 0.016 252.42);
/* #FFFFFF */
--primary: oklch(14% 0.005 285.823);
/* #000000 */
--border: oklch(21.15% 0.012 254.09);
/* #E5E5E5 */
--invalid: oklch(0.515 0.118 27.5);
/* red (#FF0000 approx) */
--valid: oklch(0.46 0.107 132.7);
/* #439C46 */
--foreground: oklch(97.807% 0.029 256.847);
/* #333333 */
--disabled: oklch(42.866% 0.00494 286.051);
/* #E7E7E7 */
--disabled2: oklch(0.5 0 0);
/* #7F7F7F */
--disabled3: oklch(0.949 0.002 277.1);
/* #F2F2F2 */
--disabled-text: oklch(75.73% 0.01398 251.72);
/* #8C90A3 */
--menu-header: oklch(0.79 0.03 237.3);
/* #C3C7DD */
--icon-deactive: oklch(0.65 0.027 234.8);
/* #A8ABBF */
--icon-active: oklch(0.12 0.002 304.5);
/* #292D32 */
}
/* @layer base {
@@ -320,4 +361,4 @@ html[data-theme="dark"] {
body {
@apply bg-background text-foreground;
}
} */
} */