51 lines
1.9 KiB
CSS
51 lines
1.9 KiB
CSS
:root{--radius:1rem}.card{border-radius:var(--radius)}.form-control,.form-select,.btn{border-radius:.75rem}.table{border-color:rgba(255,255,255,.1)}.badge{border-radius:.5rem}
|
||
/* UX enhancements */
|
||
.breadcrumb{--bs-breadcrumb-divider: '›';}
|
||
main.container{scroll-margin-top: 4rem;}
|
||
.toast-container{z-index: 1080}
|
||
.btn .bi{margin-right:.35rem}
|
||
.form-progress{height:4px}
|
||
.spinner-inline{display:inline-flex;align-items:center;gap:.5rem}
|
||
|
||
|
||
/* Modern dark theme */
|
||
:root{
|
||
--bg-elev: #111318;
|
||
--bg-header: linear-gradient(180deg, #0e1015 0%, #0b0d11 100%);
|
||
--accent: #4cc9f0;
|
||
--accent-2: #a78bfa;
|
||
--text: #e6e8ee;
|
||
--muted: #a3a6b0;
|
||
--link-bg: rgba(255,255,255,.06);
|
||
--link-bg-active: rgba(76,201,240,.18);
|
||
--border: rgba(255,255,255,.08);
|
||
}
|
||
*{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif}
|
||
body{background-color:#0b0d11;color:var(--text)}
|
||
|
||
.header1{
|
||
background: var(--bg-header);
|
||
border-bottom: 1px solid var(--border);
|
||
position: sticky; top:0; z-index: 1030;
|
||
}
|
||
.header1 .logo{font-weight:700; letter-spacing:.2px}
|
||
.header1 .logo .fa-globe{color: var(--accent)}
|
||
|
||
.menu-link{
|
||
display:inline-flex; align-items:center; gap:.4rem;
|
||
color: var(--text); text-decoration:none;
|
||
padding:.5rem .8rem; border-radius:.7rem;
|
||
background: transparent; transition: all .18s ease;
|
||
border:1px solid transparent;
|
||
}
|
||
.menu-link:hover{background: var(--link-bg); color:#fff; border-color: var(--border)}
|
||
.menu-link.active{background: var(--link-bg-active); border-color: rgba(76,201,240,.35); box-shadow: 0 0 0 .15rem rgba(76,201,240,.12) inset}
|
||
.menu-link:focus-visible{outline: 2px solid var(--accent-2); outline-offset: 2px}
|
||
.menu .btn{border-radius:.7rem}
|
||
|
||
.card{background: var(--bg-elev); border-color: var(--border)}
|
||
.table{--bs-table-bg: transparent; color: var(--text)}
|
||
.badge{background: var(--link-bg); color: var(--text)}
|
||
|
||
a{color: var(--accent)} a:hover{color:#7dd3ff}
|
||
|