2 lines
2.8 KiB
CSS
2 lines
2.8 KiB
CSS
:root{--layout-header-height: 60px;--layout-sidebar-width: 240px;--layout-transition: .25s ease-in-out}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{height:var(--layout-header-height);display:flex;align-items:center;background:var(--color-background);color:var(--color-text-primary);padding:0 1rem}.menu-btn{background:none;border:none;color:var(--color-primary);font-size:1.5rem;cursor:pointer;margin-right:.5rem}.app-main{flex:1;display:flex}.sidebar{position:fixed;top:0;left:-var(--layout-sidebar-width);width:var(--layout-sidebar-width);height:100%;background:var(--color-paper);color:var(--color-text-primary);overflow-y:auto;transition:left var(--layout-transition);z-index:1000}.sidebar.open{left:0}.sidebar ul{list-style:none;padding:1rem;margin:0}.sidebar li{margin:.5rem 0}.sidebar a{color:var(--color-text-secondary);text-decoration:none;display:block;padding:.5rem;border-radius:4px}.sidebar a:hover{background:var(--color-primary);color:var(--color-text-primary)}.close-btn{background:none;border:none;color:var(--color-text-primary);font-size:1.5rem;position:absolute;top:8px;right:8px;cursor:pointer}.app-footer{height:40px;background:var(--color-background);color:var(--color-text-muted);display:flex;justify-content:center;align-items:center;font-size:.8rem}@media (min-width: 768px){.app-main{margin-left:var(--layout-sidebar-width);transition:margin-left var(--layout-transition)}.sidebar,.sidebar.open{left:0}.menu-btn{display:none}}:root{--color-primary: #6a1b9a;--color-primary-dark: #510ca9;--color-secondary: #000080;--color-background: #000000;--color-paper: #121212;--color-text-primary: #ffffff;--color-text-secondary: #eeeeee;--color-text-muted: #888888;--color-white: #ffffff;--color-black: #000000}html{background-color:var(--color-background);color:var(--color-text-primary);font-family:system-ui,sans-serif;font-size:100%;line-height:1.5}body{margin:0;padding:0;background-color:var(--color-background);color:var(--color-text-primary)}.bg-primary{background-image:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))}.bg-secondary{background-image:linear-gradient(135deg,var(--color-secondary),var(--color-secondary) 70%)}.glow{filter:drop-shadow(0 0 8px var(--color-primary))}.button{display:inline-block;padding:.75rem 1.5rem;border:none;border-radius:4px;background-color:var(--color-primary);color:var(--color-text-primary);cursor:pointer;transition:background-color .15s ease-in-out}.button:hover{background-color:var(--color-primary-dark)}@media (prefers-reduced-motion: reduce){.button{transition:none}}*,:before,:after{box-sizing:border-box}*,*:before,*:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;font-family:system-ui,sans-serif;line-height:1.5}ul,ol{list-style:none;padding:0;margin:0}a{color:inherit;text-decoration:none}
|