salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling fiexes and logout fixed

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-19 21:08:25 +00:00
parent 8eb4d40cf1
commit 375863b157
9 changed files with 286 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/styles/design-system.css
View File

@@ -75,7 +75,7 @@
--color-warning: #F59E0B;
--color-danger: #DC2626;
--color-purple: #F63B82;
--color-gray-base: #031D48;
--color-gray-base: #30425d;
/* ===================================================================
@@ -161,14 +161,14 @@
=================================================================== */
.dark {
/* Backgrounds - derived from gray-base */
--color-surface: color-mix(in srgb, var(--color-gray-base) 20%, black);
--color-panel: color-mix(in srgb, var(--color-gray-base) 30%, black);
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 15%, black);
--color-surface: color-mix(in srgb, var(--color-gray-base) 26%, black);
--color-panel: color-mix(in srgb, var(--color-gray-base) 40%, black);
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 28%, black);
/* Text - derived from gray-base */
--color-text: color-mix(in srgb, var(--color-gray-base) 10%, white);
--color-text-dim: color-mix(in srgb, var(--color-gray-base) 40%, white);
--color-stroke: color-mix(in srgb, var(--color-gray-base) 50%, black);
--color-stroke: color-mix(in srgb, var(--color-gray-base) 62%, black);
/* Shadows for dark mode */
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
@@ -541,11 +541,11 @@
}
@utility menu-item-active {
@apply bg-brand-50 text-brand-500 dark:bg-brand-500/[0.12] dark:text-brand-400;
@apply bg-brand-50 text-brand-600 dark:bg-brand-500/[0.18] dark:text-brand-300;
}
@utility menu-item-inactive {
@apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300;
@apply text-gray-600 hover:bg-gray-100 group-hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/70 dark:hover:text-white/90;
}
@utility menu-item-icon-size {
@@ -554,11 +554,11 @@
}
@utility menu-item-icon-active {
@apply text-brand-500;
@apply text-brand-600 dark:text-brand-300;
}
@utility menu-item-icon-inactive {
@apply text-gray-500 group-hover:text-gray-700;
@apply text-gray-400 group-hover:text-gray-700 dark:text-gray-300 dark:group-hover:text-white/90;
}
/* -----------------------------------------------------------------
@@ -570,11 +570,11 @@
}
@utility menu-dropdown-item-active {
@apply text-brand-600 bg-brand-50;
@apply text-brand-600 bg-brand-50 dark:text-brand-300 dark:bg-brand-500/[0.14];
}
@utility menu-dropdown-item-inactive {
@apply text-gray-600 hover:text-gray-900 hover:bg-gray-50;
@apply text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:text-white/90 dark:hover:bg-gray-800/70;
}
@utility menu-dropdown-badge {
@@ -582,11 +582,11 @@
}
@utility menu-dropdown-badge-active {
@apply bg-brand-100 text-brand-700;
@apply bg-brand-100 text-brand-700 dark:bg-brand-500/[0.18] dark:text-brand-300;
}
@utility menu-dropdown-badge-inactive {
@apply bg-gray-100 text-gray-600;
@apply bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300;
}
@@ -600,15 +600,88 @@ select.igny8-select-styled {
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
border: 1px solid var(--color-stroke) !important;
background-color: var(--color-panel) !important;
color: var(--color-text) !important;
}
.dark select.igny8-select-styled {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-color: var(--color-panel) !important;
border-color: var(--color-stroke) !important;
color: var(--color-text) !important;
}
/* For button-based selects (SelectDropdown), icon is rendered by component */
button.igny8-select-styled {
/* No background-image - ChevronDownIcon is rendered inside the component */
border: 1px solid var(--color-stroke);
background-color: var(--color-panel);
color: var(--color-text);
}
.dark button.igny8-select-styled {
border-color: var(--color-stroke);
background-color: var(--color-panel);
color: var(--color-text);
}
/* Global form surface refinement */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
border-color: var(--color-stroke);
background-color: var(--color-panel);
color: var(--color-text);
}
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
border-color: var(--color-stroke);
background-color: var(--color-panel);
color: var(--color-text);
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
/* Dark mode surface boosts for cards and panels */
.dark .dark\:bg-white\/\[0\.03\] {
background-color: color-mix(in srgb, var(--color-panel) 92%, transparent) !important;
}
.dark .dark\:bg-white\/\[0\.04\] {
background-color: color-mix(in srgb, var(--color-panel) 95%, transparent) !important;
}
.dark .dark\:bg-white\/\[0\.08\] {
background-color: color-mix(in srgb, var(--color-panel) 88%, transparent) !important;
}
.dark .dark\:bg-gray-800\/50,
.dark .dark\:bg-gray-800\/40,
.dark .dark\:bg-gray-800\/30,
.dark .dark\:bg-gray-900\/50 {
background-color: color-mix(in srgb, var(--color-panel) 75%, transparent) !important;
}
.dark .dark\:border-gray-800,
.dark .dark\:border-gray-700,
.dark .dark\:border-white\/10,
.dark .dark\:border-white\/\[0\.08\],
.dark .dark\:border-white\/\[0\.04\] {
border-color: var(--color-stroke) !important;
}
/* Sidebar boundary clarity */
.dark aside.border-r {
border-right-color: var(--color-stroke) !important;
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-gray-base) 55%, black);
}
/* Checkbox styling */
@@ -655,6 +728,15 @@ button.igny8-select-styled {
border-bottom-color: var(--color-stroke) !important;
}
/* Table row hover (subtle) */
.igny8-table-compact tbody tr:hover td {
background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}
.dark .igny8-table-compact tbody tr:hover td {
background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.igny8-table-compact th.text-center,
.igny8-table-compact td.text-center {
text-align: center !important;