tboudreaux/fourdst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(electron): ui improvments

Browse Source
This commit is contained in:
Emily Boudreaux
2025-08-10 09:34:06 -04:00
parent 6817c18f96
commit f06f597207
1 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
electron/styles.css
View File

@@ -131,6 +131,12 @@ body.dark-mode .primary-sidebar {
.star-icon { .star-icon {
font-size: 18px; font-size: 18px;
color: #3b82f6; color: #3b82f6;
transition: color 0.2s ease;
}
/* Dark mode star icon */
body.dark-mode .star-icon {
color: #60a5fa;
} }
.brand-text { .brand-text {
@@ -156,6 +162,11 @@ body.dark-mode .primary-sidebar-header .brand-text {
margin: 0; margin: 0;
} }
/* Dark mode app title */
body.dark-mode .app-title {
color: #f9fafb;
}
.primary-sidebar:hover .app-title { .primary-sidebar:hover .app-title {
opacity: 1; opacity: 1;
} }
@@ -168,6 +179,13 @@ body.dark-mode .primary-sidebar-header .brand-text {
gap: 8px; gap: 8px;
} }
/* Keep version at bottom but reduce excessive empty space in collapsed mode */
.primary-sidebar:not(:hover) .category-nav {
flex-grow: 1;
padding: 15px 0 8px 0;
min-height: auto;
}
.category-item { .category-item {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -180,6 +198,16 @@ body.dark-mode .primary-sidebar-header .brand-text {
position: relative; position: relative;
} }
/* Perfect symmetry for collapsed sidebar items */
.primary-sidebar:not(:hover) .category-item {
padding: 12px 12px 12px 12px;
}
/* Active item maintains perfect symmetry (accounting for 3px left border) */
.primary-sidebar:not(:hover) .category-item.active {
padding: 12px 15px 12px 9px;
}
.category-item:hover { .category-item:hover {
background-color: var(--hover-color); background-color: var(--hover-color);
} }
@@ -225,11 +253,14 @@ body.dark-mode .primary-sidebar-header .brand-text {
gap: 8px; gap: 8px;
} }
/* When sidebar is collapsed, only show version centered */ /* When sidebar is collapsed, only show version centered with tighter spacing */
.primary-sidebar:not(:hover) .primary-sidebar-footer { .primary-sidebar:not(:hover) .primary-sidebar-footer {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-end;
padding: 8px 16px 8px 16px;
min-height: 32px;
margin-top: auto;
} }
/* When sidebar is expanded, show both version and info button */ /* When sidebar is expanded, show both version and info button */
@@ -436,6 +467,11 @@ body.dark-mode .nav-button.active {
opacity: 1; opacity: 1;
} }
/* Completely hide info button in collapsed mode */
.primary-sidebar:not(:hover) .info-button {
display: none;
}
/* Dark mode info button */ /* Dark mode info button */
body.dark-mode .info-button { body.dark-mode .info-button {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
@@ -1364,6 +1400,8 @@ body.dark-mode .save-option-btn small {
.info-modal-content { .info-modal-content {
max-width: 600px; max-width: 600px;
max-height: 80vh; max-height: 80vh;
padding-top: 50px;
padding-right: 50px;
} }
.info-modal-body { .info-modal-body {
@@ -1422,7 +1460,7 @@ body.dark-mode .info-tab-link.active {
} }
.info-tab-content { .info-tab-content {
padding: 24px; padding: 24px 60px 24px 24px;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
background-color: white; background-color: white;