106 lines
2.6 KiB
CSS
106 lines
2.6 KiB
CSS
:root{
|
|
--ink:#07060a;
|
|
--glass: rgba(16, 14, 26, .72);
|
|
--glass2: rgba(18, 16, 30, .82);
|
|
--b: rgba(255,255,255,.12);
|
|
--muted: rgba(255,255,255,.78);
|
|
--muted2: rgba(255,255,255,.55);
|
|
--violet: rgba(139,92,246,.95);
|
|
--fuchsia: rgba(217,70,239,.88);
|
|
--table-border: rgba(255,255,255,.08);
|
|
}
|
|
|
|
body{
|
|
background: var(--ink);
|
|
color: #fff;
|
|
}
|
|
|
|
.bg-aurora, .bg-grid{
|
|
position: fixed; inset: 0; pointer-events: none;
|
|
}
|
|
.bg-aurora{
|
|
background:
|
|
radial-gradient(1100px 520px at 20% 20%, rgba(139,92,246,.32), transparent 60%),
|
|
radial-gradient(900px 620px at 78% 24%, rgba(217,70,239,.22), transparent 60%),
|
|
radial-gradient(980px 640px at 60% 86%, rgba(167,139,250,.20), transparent 60%);
|
|
z-index:-2;
|
|
}
|
|
.bg-grid{
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
|
|
background-size: 48px 48px;
|
|
opacity:.12;
|
|
mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 70%);
|
|
z-index:-1;
|
|
}
|
|
|
|
.card-glass{
|
|
background: linear-gradient(140deg, var(--glass), var(--glass2));
|
|
border: 1px solid var(--b);
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: 0 16px 60px rgba(0,0,0,.45);
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.pill{
|
|
padding: .35rem .7rem;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,.06);
|
|
border: 1px solid var(--b);
|
|
color: var(--muted);
|
|
font-size: .82rem;
|
|
}
|
|
|
|
.table-dark{
|
|
--bs-table-bg: transparent;
|
|
--bs-table-striped-bg: rgba(255,255,255,.03);
|
|
--bs-table-hover-bg: rgba(255,255,255,.07);
|
|
--bs-table-border-color: var(--table-border);
|
|
}
|
|
.table-dark th{
|
|
color: var(--muted);
|
|
border-bottom-color: var(--table-border) !important;
|
|
font-weight: 700;
|
|
}
|
|
.table-dark td{
|
|
color: #fff;
|
|
border-top-color: var(--table-border) !important;
|
|
}
|
|
.table-hover tbody tr:hover{
|
|
background: rgba(255,255,255,.03);
|
|
}
|
|
|
|
.btn-violet{
|
|
border:0 !important;
|
|
color:#0b0712 !important;
|
|
font-weight:900 !important;
|
|
border-radius: 14px !important;
|
|
background: linear-gradient(135deg, var(--violet), var(--fuchsia)) !important;
|
|
box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 18px 40px rgba(139,92,246,.22);
|
|
}
|
|
.btn-outline-light{
|
|
border-radius: 14px !important;
|
|
border: 1px solid rgba(255,255,255,.16) !important;
|
|
background: rgba(255,255,255,.07) !important;
|
|
color: #fff !important;
|
|
}
|
|
.btn-outline-light:hover{ background: rgba(255,255,255,.15) !important; }
|
|
.btn-outline-secondary{
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.badge.text-bg-light{
|
|
color:#0b0712;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.table-message{
|
|
color: #e6e6e6;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.alert{
|
|
border-radius: 14px;
|
|
}
|