diff options
Diffstat (limited to 'frontend-vanilla/src')
| -rw-r--r-- | frontend-vanilla/src/style.css | 42 |
1 files changed, 29 insertions, 13 deletions
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index 7180d43..f724916 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -197,9 +197,9 @@ html { opacity: 1; } -/* Main Content area */ +/* Main Content area - always fills full width (sidebar overlays) */ .main-content { - flex: 1; + width: 100%; min-width: 0; overflow-y: auto; background-color: var(--bg-color); @@ -283,24 +283,40 @@ html { } } -/* Desktop Sidebar state */ +/* CONTENT CENTERING PARAMETER: + * The sidebar overlays content (position: fixed) and never shifts the main content area. + * Content is always centered in the full viewport width. + * To revert to sidebar-shifts-content: remove the @media (min-width: 1025px) fixed rules below + * and restore "flex: 1; min-width: 0" on .main-content only. + */ @media (min-width: 1025px) { - /* Desktop Sidebar state - Removed to keep toggle fixed */ + .sidebar { + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; + transform: translateX(-100%); + transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .sidebar-visible .sidebar { + transform: translateX(0); + box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1); + } + + .sidebar-hidden .sidebar { + transform: translateX(-100%); + } } /* Layout State */ .sidebar-hidden .sidebar { - display: none; + display: flex; } -@media (min-width: 1025px) { - .sidebar-hidden .sidebar { - display: none; - } - - .sidebar-visible .sidebar { - display: flex; - } +.sidebar-visible .sidebar { + display: flex; } input[type="text"], |