147 lines
3.2 KiB
CSS
147 lines
3.2 KiB
CSS
/* Admin Panel Theme CSS */
|
||
|
||
:root {
|
||
--sidebar-width: 250px;
|
||
--header-height: 60px;
|
||
--transition-speed: 0.3s;
|
||
}
|
||
|
||
[data-bs-theme="light"] {
|
||
--bg-body: #f8f9fa;
|
||
--bg-sidebar: #ffffff;
|
||
--text-sidebar: #333333;
|
||
--border-color: #e9ecef;
|
||
--accent-color: #0d6efd;
|
||
--accent-color-rgb: 13,110,253;
|
||
}
|
||
|
||
[data-bs-theme="dark"] {
|
||
--bg-body: #212529;
|
||
--bg-sidebar: #1a1d20;
|
||
--text-sidebar: #e9ecef;
|
||
--border-color: #343a40;
|
||
--accent-color: #ffc107; /* Şeftali tonu veya sarımsı */
|
||
--accent-color-rgb: 255,193,7;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-body);
|
||
transition: background-color var(--transition-speed);
|
||
}
|
||
|
||
/* Sidebar Styles */
|
||
#sidebar {
|
||
width: var(--sidebar-width);
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: var(--bg-sidebar);
|
||
color: var(--text-sidebar);
|
||
border-right: 1px solid var(--border-color);
|
||
transition: transform var(--transition-speed);
|
||
z-index: 1040;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.sidebar-header {
|
||
height: var(--header-height);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 1.5rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.sidebar-nav .nav-link {
|
||
color: var(--text-sidebar);
|
||
padding: 0.75rem 1.5rem;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.sidebar-nav .nav-link:hover,
|
||
.sidebar-nav .nav-link.active {
|
||
background-color: rgba(var(--accent-color-rgb), 0.1);
|
||
border-left-color: var(--accent-color);
|
||
color: var(--accent-color);
|
||
}
|
||
|
||
/* Header Styles */
|
||
#main-header {
|
||
height: var(--header-height);
|
||
position: fixed;
|
||
top: 0;
|
||
left: var(--sidebar-width);
|
||
right: 0;
|
||
background-color: var(--bg-sidebar);
|
||
border-bottom: 1px solid var(--border-color);
|
||
z-index: 1030;
|
||
transition: left var(--transition-speed);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 1.5rem;
|
||
}
|
||
|
||
/* Main Content Area */
|
||
#main-content-wrapper {
|
||
margin-left: var(--sidebar-width);
|
||
padding-top: var(--header-height);
|
||
transition: margin-left var(--transition-speed);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Mobile Sidebar Behavior */
|
||
@media (max-width: 991.98px) {
|
||
#sidebar {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
#sidebar.show {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
#main-header {
|
||
left: 0;
|
||
}
|
||
|
||
#main-content-wrapper {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
/* Utilities */
|
||
.fade-in {
|
||
animation: fadeIn 0.3s ease-in-out;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* Turnstile Widget Placeholder Style */
|
||
.cf-turnstile {
|
||
margin: 1rem 0;
|
||
min-height: 65px;
|
||
}
|
||
|
||
/* Logo preview helpers: force preview backgrounds for white/black logos */
|
||
.logo-preview {
|
||
display: inline-block;
|
||
padding: 0.5rem;
|
||
border-radius: 0.25rem;
|
||
}
|
||
|
||
.logo-preview-dark {
|
||
/* stronger, always-visible dark preview (for white logos) */
|
||
background-color: rgba(0, 0, 0, 0.6) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.logo-preview-light {
|
||
/* white preview for dark/black logos */
|
||
background-color: #ffffff !important;
|
||
border: 1px solid rgba(0,0,0,0.08);
|
||
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
||
}
|