114 lines
2.0 KiB
CSS
114 lines
2.0 KiB
CSS
/* General Styles */
|
|
body {
|
|
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
:root {
|
|
--light-bg: #FFFFFF;
|
|
--light-surface: #F8F9FA;
|
|
--light-text-primary: #212529;
|
|
--light-text-secondary: #6C757D;
|
|
--dark-bg: #121212;
|
|
--dark-surface: #1E1E1E;
|
|
--dark-text-primary: #E9ECEF;
|
|
--dark-text-secondary: #ADB5BD;
|
|
--accent-color: #0D6EFD;
|
|
}
|
|
|
|
body.light-theme {
|
|
background-color: var(--light-bg);
|
|
color: var(--light-text-primary);
|
|
}
|
|
|
|
body.dark-theme {
|
|
background-color: var(--dark-bg);
|
|
color: var(--dark-text-primary);
|
|
}
|
|
|
|
/* Layout */
|
|
.main-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
flex-shrink: 0;
|
|
padding: 1rem;
|
|
border-right: 1px solid #dee2e6;
|
|
}
|
|
|
|
body.light-theme .sidebar {
|
|
background-color: var(--light-surface);
|
|
border-right: 1px solid #dee2e6;
|
|
}
|
|
|
|
body.dark-theme .sidebar {
|
|
background-color: var(--dark-surface);
|
|
border-right: 1px solid #343a40;
|
|
}
|
|
|
|
.main-content {
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar h4 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar .nav-link {
|
|
color: var(--light-text-secondary);
|
|
}
|
|
|
|
body.dark-theme .sidebar .nav-link {
|
|
color: var(--dark-text-secondary);
|
|
}
|
|
|
|
.sidebar .nav-link.active,
|
|
.sidebar .nav-link:hover {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Search Bar */
|
|
.search-bar {
|
|
flex-grow: 1;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* Gallery */
|
|
.photo-gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.photo-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 0.25rem;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.photo-item img:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Theme switcher */
|
|
.theme-switcher {
|
|
cursor: pointer;
|
|
}
|