/* /src/lighthouse/assets/css/style.css */ /* lighthouse_frontend/assets/css/style.css Custom styles for a fixed sidebar and sticky header layout */ body { overflow-y: hidden; /* Prevent the body from scrolling */ } .main-wrapper { display: flex; } /* --- Sidebar Styles --- */ .sidebar { position: fixed; /* Keep the sidebar fixed on the left */ top: 0; left: 0; height: 100vh; width: 260px; /* Set desired width */ z-index: 1030; /* Ensure it's above content but below modals */ transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out; } /* --- Main Content Styles --- */ .main-content { width: 100%; margin-left: 260px; /* Offset content by sidebar width */ height: 100vh; /* Full viewport height */ display: flex; flex-direction: column; transition: margin-left 0.3s ease-in-out; } .content-wrapper { flex-grow: 1; /* Allow the content to fill the remaining space */ padding: 1.5rem; overflow-y: auto; /* Make ONLY this area scrollable */ } /* --- Sidebar Folding Styles --- */ /* MODIFIED: Selectors now based on class on tag */ html.sidebar-folded body .sidebar { width: 72px; /* Set folded width */ } html.sidebar-folded body .main-content { margin-left: 72px; /* Adjust content margin when sidebar is folded */ } html.sidebar-folded body .sidebar .nav-link span, html.sidebar-folded body .sidebar .dropdown-toggle::after, html.sidebar-folded body .sidebar .sidebar-brand-text, html.sidebar-folded body .sidebar .dropdown strong { display: none; } html.sidebar-folded body .sidebar .nav-link { justify-content: center; } /* FIX: Remove margin from icons in folded sidebar to allow centering */ html.sidebar-folded body .sidebar .nav-link .material-icons { margin-right: 0 !important; } html.sidebar-folded body .sidebar .sidebar-brand { justify-content: center; } /* --- Sticky Header Styles (JS-driven) --- */ .header { /* Base styles */ transition: box-shadow 0.3s ease; } .header.is-sticky { position: sticky; top: 0; z-index: 1020; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Add a subtle shadow when sticky */ } /* Styles moved from base.html */ .main-container { display: flex; height: calc(100vh - 56px); /* 56px is the default bootstrap navbar height */ } /* --- NEW: UI Alignment Fixes --- */ /* FIX: Vertically align icons with text in the sidebar */ .sidebar .nav-link .material-icons { font-size: 1.3rem; /* Adjust icon size to better match text */ line-height: 1; /* Remove extra vertical space from the icon font */ } /* FIX: Center the search icon in the header's search bar */ .search-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; border: none; /* Remove button background and border */ background-color: transparent; color: var(--bs-secondary-color); /* Use a theme-aware color */ } .search-btn:hover, .search-btn:focus { color: var(--bs-body-color); background-color: transparent; } /* --- Theme Switcher Icon Fix --- */ /* Ensures the correct icon font is always applied to the theme switcher icon */ #headerThemeSwitcherBtn .theme-switcher-icon { font-family: 'Material Icons' !important; } /* --- Full-height Table Layout Styles (for list pages) --- */ .page-content-row { height: 100%; } .filter-col, .table-col { display: flex; flex-direction: column; height: 100%; } .table-card { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; } .table-card .card-body { flex-grow: 1; overflow-y: auto; padding: 0; } .table-card .table thead { position: sticky; top: 0; z-index: 1; } /* --- Custom Theme-Aware Secondary Button --- */ .btn-theme-aware-secondary { /* Directly set the color and border properties */ color: var(--bs-body-color); background-color: transparent; border: 1px solid var(--bs-border-color); } .btn-theme-aware-secondary:hover { color: var(--bs-emphasis-color); background-color: var(--bs-tertiary-bg); border-color: var(--bs-emphasis-color); } .btn-theme-aware-secondary:disabled, .btn-theme-aware-secondary.disabled { color: var(--bs-secondary-color); background-color: transparent; border-color: var(--bs-border-color); } .platform-detail-sidebar .list-group-item.active .badge { color: var(--bs-primary); background-color: var(--bs-white); } .table thead th.sortable a { text-decoration: none; color: inherit; display: flex; align-items: center; } .table thead th.sortable a:hover { color: var(--bs-emphasis-color); } .table thead th.sortable a .material-icons { font-size: 1.1rem; margin-left: 0.25rem; vertical-align: middle; } .table thead th.sortable.text-center a { justify-content: center; } .material-icons.icon-text-btm { vertical-align: text-bottom !important; } .material-icons.icon-text-mid { vertical-align: middle !important; } .spin-animation { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cron-filter-dropdown { min-width: 250px; max-height: 400px; overflow-y: auto; } .cron-search-box { min-width: 250px; } .cron-job-command { white-space: pre-wrap; word-break: break-all; }