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 {
font-size: 18px;
color: #3b82f6;
transition: color 0.2s ease;
}
/* Dark mode star icon */
body.dark-mode .star-icon {
color: #60a5fa;
}
.brand-text {
@@ -156,6 +162,11 @@ body.dark-mode .primary-sidebar-header .brand-text {
margin: 0;
}
/* Dark mode app title */
body.dark-mode .app-title {
color: #f9fafb;
}
.primary-sidebar:hover .app-title {
opacity: 1;
}
@@ -168,6 +179,13 @@ body.dark-mode .primary-sidebar-header .brand-text {
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 {
display: flex;
align-items: center;
@@ -180,6 +198,16 @@ body.dark-mode .primary-sidebar-header .brand-text {
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 {
background-color: var(--hover-color);
}
@@ -225,11 +253,14 @@ body.dark-mode .primary-sidebar-header .brand-text {
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 {
flex-direction: column;
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 */
@@ -436,6 +467,11 @@ body.dark-mode .nav-button.active {
opacity: 1;
}
/* Completely hide info button in collapsed mode */
.primary-sidebar:not(:hover) .info-button {
display: none;
}
/* Dark mode info button */
body.dark-mode .info-button {
background: rgba(255, 255, 255, 0.1);
@@ -1364,6 +1400,8 @@ body.dark-mode .save-option-btn small {
.info-modal-content {
max-width: 600px;
max-height: 80vh;
padding-top: 50px;
padding-right: 50px;
}
.info-modal-body {
@@ -1422,7 +1460,7 @@ body.dark-mode .info-tab-link.active {
}
.info-tab-content {
padding: 24px;
padding: 24px 60px 24px 24px;
max-height: 400px;
overflow-y: auto;
background-color: white;