340 lines
7.2 KiB
CSS
340 lines
7.2 KiB
CSS
/* ========== Variáveis CSS ========== */
|
|
:root {
|
|
--toggle-bg: #ffffff;
|
|
--toggle-border: #e5e7eb;
|
|
--toggle-hover: #f3f4f6;
|
|
--toggle-active: #dbeafe;
|
|
--toggle-text: #1f2937;
|
|
--toggle-text-secondary: #374151;
|
|
--toggle-icon: #6b7280;
|
|
--toggle-accent: #2563eb;
|
|
--toggle-accent-hover: #1d4ed8;
|
|
--toggle-shadow: rgba(0, 0, 0, 0.05);
|
|
--toggle-shadow-hover: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* ========== Container Principal ========== */
|
|
.toggle-sidebar-wrapper {
|
|
background: var(--toggle-bg);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--toggle-border);
|
|
margin-bottom: 16px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
box-shadow: 0 1px 3px var(--toggle-shadow);
|
|
transition: box-shadow 0.2s ease;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.toggle-sidebar-wrapper::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.toggle-sidebar-wrapper:hover {
|
|
box-shadow: 0 4px 6px var(--toggle-shadow-hover);
|
|
}
|
|
|
|
.container-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
cursor: pointer;
|
|
background-color: var(--toggle-bg);
|
|
transition: background-color 0.2s ease;
|
|
border-bottom: 1px solid var(--toggle-border);
|
|
}
|
|
|
|
.container-title:hover {
|
|
background-color: var(--toggle-hover);
|
|
}
|
|
|
|
.toggle-title {
|
|
color: var(--toggle-text);
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
user-select: none;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.toggle-arrow {
|
|
color: var(--toggle-icon);
|
|
transition: transform 0.2s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.container-title:hover .toggle-arrow {
|
|
color: var(--toggle-accent);
|
|
}
|
|
|
|
/* ========== Menu Lista ========== */
|
|
.sidebar-menu-list {
|
|
list-style: none;
|
|
padding: 8px;
|
|
margin: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
|
|
/* Scroll invisível mas funcional */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.sidebar-menu-list::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.sidebar-item {
|
|
list-style: none;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* ========== Links da Sidebar ========== */
|
|
.sidebar-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--toggle-text-secondary);
|
|
padding: 11px 14px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
text-align: left;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: none;
|
|
gap: 12px;
|
|
}
|
|
|
|
.sidebar-link i {
|
|
font-size: 19px;
|
|
color: var(--toggle-icon);
|
|
transition: none;
|
|
}
|
|
|
|
.sidebar-link:hover {
|
|
background-color: var(--toggle-hover);
|
|
color: var(--toggle-text);
|
|
}
|
|
|
|
.sidebar-link:hover i {
|
|
color: var(--toggle-accent);
|
|
}
|
|
|
|
.sidebar-link.active {
|
|
background-color: var(--toggle-active);
|
|
color: var(--toggle-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-link.active i {
|
|
color: var(--toggle-accent);
|
|
}
|
|
|
|
/* ========== Título da Sidebar ========== */
|
|
.sidebar-title {
|
|
padding: 18px 14px 10px;
|
|
font-size: 13px;
|
|
color: var(--toggle-text-secondary);
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ========== Itens com Submenu ========== */
|
|
.sidebar-item.has-sub {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sidebar-item.has-sub .sidebar-link {
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-item.has-sub .sidebar-link::after {
|
|
content: "\F285";
|
|
font-family: "bootstrap-icons";
|
|
margin-left: auto;
|
|
transition: transform 0.2s ease;
|
|
font-size: 12px;
|
|
color: var(--toggle-icon);
|
|
}
|
|
|
|
.sidebar-item.has-sub.active .sidebar-link::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.sidebar-item.has-sub .sidebar-link.submenu-active {
|
|
background-color: var(--toggle-hover);
|
|
color: var(--toggle-text);
|
|
}
|
|
|
|
.sidebar-item.has-sub .sidebar-link.submenu-active i {
|
|
color: var(--toggle-accent);
|
|
}
|
|
|
|
/* ========== Submenu ========== */
|
|
.submenu {
|
|
list-style: none;
|
|
padding: 4px 0 4px 8px;
|
|
margin: 0;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
|
|
/* Scroll invisível */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.submenu::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-item.has-sub.active .submenu {
|
|
max-height: 1000px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.submenu-item {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.submenu-item .sidebar-link {
|
|
padding: 9px 14px 9px 40px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
}
|
|
|
|
.submenu-item .sidebar-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 22px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background-color: var(--toggle-icon);
|
|
}
|
|
|
|
.submenu-item .sidebar-link:hover::before {
|
|
background-color: var(--toggle-accent);
|
|
}
|
|
|
|
.submenu-item .sidebar-link.active::before {
|
|
background-color: var(--toggle-accent);
|
|
}
|
|
|
|
/* ========== Ícones e Indicadores ========== */
|
|
.external-icon {
|
|
font-size: 11px;
|
|
margin-left: auto;
|
|
opacity: 0.6;
|
|
color: var(--toggle-icon);
|
|
}
|
|
|
|
.active-indicator {
|
|
display: none;
|
|
}
|
|
|
|
/* ========== Botão de Logout ========== */
|
|
.logout-item {
|
|
margin-top: auto;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--toggle-border);
|
|
position: sticky;
|
|
bottom: 0;
|
|
background: var(--toggle-bg);
|
|
z-index: 10;
|
|
}
|
|
|
|
.logout-button {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: #dc3545;
|
|
padding: 11px 14px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
text-align: left;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: background-color 0.2s ease;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logout-button i {
|
|
font-size: 19px;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.logout-button:hover {
|
|
background-color: #fee;
|
|
color: #c82333;
|
|
}
|
|
|
|
.logout-button:hover i {
|
|
color: #c82333;
|
|
}
|
|
|
|
/* ========== Scroll Invisível mas Funcional ========== */
|
|
/* Containers do Mazer template que envolvem o ToggleSidebar */
|
|
#sidebar,
|
|
#sidebar .sidebar-wrapper,
|
|
#sidebar .sidebar-wrapper.active,
|
|
.sidebar-wrapper,
|
|
.sidebar-wrapper.active,
|
|
.sidebar-menu,
|
|
.sidebar-menu ul,
|
|
.sidebar-menu ul.menu,
|
|
ul.menu {
|
|
overflow-y: auto !important;
|
|
overflow-x: hidden !important;
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
}
|
|
|
|
#sidebar::-webkit-scrollbar,
|
|
#sidebar .sidebar-wrapper::-webkit-scrollbar,
|
|
#sidebar .sidebar-wrapper.active::-webkit-scrollbar,
|
|
.sidebar-wrapper::-webkit-scrollbar,
|
|
.sidebar-wrapper.active::-webkit-scrollbar,
|
|
.sidebar-menu::-webkit-scrollbar,
|
|
.sidebar-menu ul::-webkit-scrollbar,
|
|
.sidebar-menu ul.menu::-webkit-scrollbar,
|
|
ul.menu::-webkit-scrollbar {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* ========== Dark Mode Support ========== */
|
|
html[data-bs-theme="dark"] {
|
|
--toggle-bg: #1f2937;
|
|
--toggle-border: #374151;
|
|
--toggle-hover: #374151;
|
|
--toggle-active: #1e3a8a;
|
|
--toggle-text: #f9fafb;
|
|
--toggle-text-secondary: #d1d5db;
|
|
--toggle-icon: #9ca3af;
|
|
--toggle-accent: #60a5fa;
|
|
--toggle-accent-hover: #3b82f6;
|
|
--toggle-shadow: rgba(0, 0, 0, 0.3);
|
|
--toggle-shadow-hover: rgba(0, 0, 0, 0.5);
|
|
}
|