System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-20 00:35:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #268 from 3kh0/main

Browse source 
fix darkmode and overall style
This commit is contained in:
Echo 2025-05-30 00:15:59 -04:00 • committed by GitHub
commit f7de55f10f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 68 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
app/assets/stylesheets/nav.css
View file

@ -1,14 +1,15 @@
.nav-item.active {
color: var(--primary-color);
body {
display: flex;
min-height: 100vh;
}
.nav > ul {
list-style: none;
padding: 0;
}
a.nav-item {
text-decoration: none;
main {
flex: 1;
margin-left: 250px;
max-width: calc(100% - 250px);
padding: 20px;
margin-bottom: 100px;
transition: margin-left 0.3s ease, max-width 0.3s ease;
}
aside.nav {
@ -24,36 +25,50 @@ aside.nav {
z-index: 1000;
}
/* Add styles for the main content wrapper */
body {
display: flex;
min-height: 100vh;
.nav > ul {
list-style: none;
padding: 0;
background: transparent;
}
main {
flex: 1;
margin-left: 250px;
max-width: calc(100% - 250px);
padding: 20px;
margin-bottom: 100px;
transition: margin-left 0.3s ease, max-width 0.3s ease;
.nav > ul > li {
margin: 8px 0;
padding: 0;
}
.nav-item {
display: block;
padding: 10px 15px;
color: var(--text-color, #333);
border-radius: 6px;
transition: background-color 0.15s, color 0.15s;
text-decoration: none;
}
.nav-item.active {
color: var(--primary-color);
}
.nav-item:hover {
background-color: #f5f5f5;
color: var(--primary-color, #e13950);
transition: background-color 0.15s, color 0.15s;
}
/* Mobile styles */
@media (max-width: 768px) {
aside.nav {
transform: translateX(-100%);
}
aside.nav.open {
transform: translateX(0);
}
main {
margin-left: 0;
max-width: 100%;
}
.nav-toggle {
display: block;
position: fixed;
@ -73,11 +88,11 @@ main {
user-select: none;
transition: box-shadow 0.2s ease;
}
.nav-toggle:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.nav-overlay {
position: fixed;
top: 0;
@ -90,29 +105,51 @@ main {
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-overlay.open {
opacity: 1;
visibility: visible;
}
}
/* Desktop styles - hide toggle button */
@media (min-width: 769px) {
.nav-toggle {
display: none;
}
.nav-overlay {
display: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
aside.nav {
background-color: #13171f;
color: #f3f3f3;
border-right: 1px solid #222;
}
.nav > ul {
background: transparent;
}
.nav-item {
color: #f3f3f3;
}
.nav-item.active {
color: var(--primary-color, #e13950);
}
.nav-toggle {
background: #222;
color: #f3f3f3;
border: 1px solid #333;
}
.nav-item:hover {
background-color: #23272a;
color: var(--primary-color, #e13950);
transition: background-color 0.15s, color 0.15s;
}
.nav-toggle {
background: rgb(30, 30, 30);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
}
}
}