Beesquit/picrinth-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style changes especially sidebar

Browse Source
This commit is contained in:
Beesquit
2025-09-22 12:41:58 +03:00
parent 774f34b971
commit 181fe61368
9 changed files with 95 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Sidebar.css
View File

@ -1,15 +1,21 @@
.sidebar {
position: fixed;
display: flex;
top: 0;
left: 0;
width: 240px;
height: 100%;
background-color: #2a2a2a;
background-color: var(--background-dark);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
border-right: 1px solid #404040;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
flex-direction: column;
}
.sidebar-content {
flex: 1;
}
.sidebar-header {
padding: 1.5rem;
border-bottom: 1px solid #404040;
@ -19,18 +25,24 @@
.sidebar-title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.87);
color: var(--text-dark);
}
.sidebar-nav {
padding: 1rem 0;
}
.sidebar-bottom {
padding: 0;
border-top: 1px solid #404040;
margin-top: auto;
}
.sidebar-link {
display: block;
padding: 0.75rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
color: var(--text-dark);
text-decoration: none;
transition: all 0.2s ease;
border-left: 3px solid transparent;
@ -42,28 +54,25 @@
color: var(--links-main-color);
}
.sidebar-link:active {
background-color: #2a2a2a;
}
.sidebar-bottom-link {
.logout-button {
display: block;
width: 100%;
padding: 0.75rem 1.5rem;
color: rgba(255, 255, 255, 0.87);
background: none;
border: none;
text-align: left;
font-family: inherit;
font-size: inherit;
color: var(--text-dark);
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
transition: color 0.2s ease;
border-left: 3px solid transparent;
bottom: 0;
}
.sidebar-bottom-link:hover {
.logout-button:hover {
color: var(--accent-color-alternative);
background-color: #333333;
/* a249a5 */
border-left-color: var(--links-main-color);
color: var(--links-main-color);
}
.sidebar-bottom-link:active {
background-color: #2a2a2a;
border-left-color: var(--accent-color-alternative);
}