382 lines
8.8 KiB
CSS
382 lines
8.8 KiB
CSS
/*
|
|
Admin Glass Theme (Purple Aurora)
|
|
- Keeps your gradient style
|
|
- Fixes dropdowns/selects (no white background, readable states)
|
|
*/
|
|
|
|
:root{
|
|
/* Base */
|
|
--ink: #07060a;
|
|
--panel: rgba(16, 14, 26, .62);
|
|
--panel-strong: rgba(16, 14, 26, .86);
|
|
|
|
/* Borders / text */
|
|
--border: rgba(255,255,255,.10);
|
|
--border-strong: rgba(255,255,255,.16);
|
|
--text: rgba(255,255,255,.90);
|
|
--muted: rgba(255,255,255,.65);
|
|
|
|
/* Accents */
|
|
--violet: rgba(139,92,246,.95);
|
|
--magenta: rgba(217,70,239,.85);
|
|
--neon: rgba(167,139,250,.90);
|
|
|
|
/* Effects */
|
|
--shadow: 0 12px 50px rgba(0,0,0,.35);
|
|
--shadow-strong: 0 18px 70px rgba(0,0,0,.45);
|
|
--ring: 0 0 0 4px rgba(139,92,246,.18);
|
|
|
|
/* Radii */
|
|
--r-sm: 10px;
|
|
--r-md: 14px;
|
|
--r-lg: 18px;
|
|
}
|
|
|
|
/*
|
|
Base
|
|
*/
|
|
|
|
html, body{ height: 100%; }
|
|
body{
|
|
background: var(--ink);
|
|
color: var(--text);
|
|
}
|
|
|
|
a{ color: rgba(167,139,250,.95); }
|
|
a:hover{ color: rgba(217,70,239,.95); }
|
|
|
|
::selection{
|
|
background: rgba(167,139,250,.22);
|
|
color: #fff;
|
|
}
|
|
|
|
.container{ max-width: 1100px; }
|
|
|
|
/*
|
|
Background helpers
|
|
*/
|
|
|
|
.bg-aurora{
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(1000px 500px at 20% 20%, rgba(139,92,246,.28), transparent 60%),
|
|
radial-gradient(900px 600px at 80% 30%, rgba(217,70,239,.20), transparent 60%),
|
|
radial-gradient(900px 700px at 55% 90%, rgba(167,139,250,.16), transparent 60%);
|
|
z-index: -2;
|
|
}
|
|
|
|
.bg-grid{
|
|
position: fixed;
|
|
inset: 0;
|
|
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 65%);
|
|
z-index: -1;
|
|
}
|
|
|
|
/*
|
|
Brand / Titles
|
|
*/
|
|
|
|
h1.brand, .brand{
|
|
font-weight: 800;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.brand{
|
|
background: linear-gradient(90deg, #a78bfa, #d946ef, #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/*
|
|
Glass cards
|
|
*/
|
|
|
|
.card-glass,
|
|
.card.card-glass{
|
|
background: var(--panel);
|
|
border: 1px solid var(--border) !important;
|
|
backdrop-filter: blur(16px) saturate(150%);
|
|
box-shadow: var(--shadow);
|
|
border-radius: var(--r-lg);
|
|
}
|
|
|
|
/*
|
|
Alerts
|
|
*/
|
|
|
|
.alert.card-glass{ color: var(--text); }
|
|
|
|
.alert-danger{
|
|
background: rgba(220, 38, 38, .12) !important;
|
|
border: 1px solid rgba(220, 38, 38, .25) !important;
|
|
}
|
|
.alert-success{
|
|
background: rgba(34,197,94,.12) !important;
|
|
border: 1px solid rgba(34,197,94,.22) !important;
|
|
}
|
|
.alert-warning{
|
|
background: rgba(234,179,8,.12) !important;
|
|
border: 1px solid rgba(234,179,8,.22) !important;
|
|
}
|
|
/* Optional: Bootstrap info alert used in your Gallery tab */
|
|
.alert-info{
|
|
background: rgba(59,130,246,.12) !important;
|
|
border: 1px solid rgba(59,130,246,.22) !important;
|
|
color: var(--text) !important;
|
|
}
|
|
|
|
/* nicer list spacing in errors */
|
|
.alert ul{ padding-left: 1.25rem; }
|
|
.alert li{ margin: .2rem 0; }
|
|
|
|
/*
|
|
Tabs (Bootstrap nav-pills)
|
|
*/
|
|
|
|
.nav-pills .nav-link{
|
|
color: rgba(255,255,255,.78);
|
|
background: rgba(255,255,255,.04);
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: var(--r-md);
|
|
padding: .55rem .85rem;
|
|
}
|
|
.nav-pills .nav-link:hover{
|
|
background: rgba(255,255,255,.06);
|
|
border-color: rgba(255,255,255,.12);
|
|
color: rgba(255,255,255,.92);
|
|
}
|
|
.nav-pills .nav-link.active{
|
|
color: #fff;
|
|
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85));
|
|
border-color: rgba(167,139,250,.30);
|
|
box-shadow: 0 12px 30px rgba(139,92,246,.18);
|
|
}
|
|
|
|
/*
|
|
Forms
|
|
*/
|
|
|
|
.form-label{ color: var(--muted) !important; font-size: .92rem; }
|
|
.form-text{ color: rgba(255,255,255,.55) !important; }
|
|
|
|
/* Inputs / Textareas */
|
|
.form-control,
|
|
textarea.form-control{
|
|
background: rgba(255,255,255,.06) !important;
|
|
border: 1px solid rgba(255,255,255,.10) !important;
|
|
color: #fff !important;
|
|
border-radius: var(--r-md) !important;
|
|
padding: .85rem 1rem !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
textarea.form-control{ line-height: 1.35; }
|
|
|
|
.form-control::placeholder{ color: rgba(255,255,255,.35); }
|
|
|
|
.form-control:focus,
|
|
textarea.form-control:focus{
|
|
border-color: rgba(167,139,250,.55) !important;
|
|
box-shadow: var(--ring) !important;
|
|
}
|
|
|
|
/* Disabled/readonly */
|
|
.form-control:disabled,
|
|
.form-control[readonly]{
|
|
opacity: .75;
|
|
background: rgba(255,255,255,.04) !important;
|
|
}
|
|
|
|
/*
|
|
SELECTS (Dropdown fields) — fixes “white background” issue
|
|
Works for both:
|
|
- Bootstrap 5: .form-select
|
|
- Older Bootstrap: select.form-control
|
|
*/
|
|
|
|
.form-select,
|
|
select.form-control{
|
|
background-color: rgba(255,255,255,.06) !important;
|
|
border: 1px solid rgba(255,255,255,.10) !important;
|
|
color: #fff !important;
|
|
|
|
border-radius: var(--r-md) !important;
|
|
padding: .85rem 2.65rem .85rem 1rem !important;
|
|
|
|
/* Make sure OS arrow doesn't force ugly styles */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
|
|
/* Custom arrow */
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23a78bfa' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 1rem center;
|
|
background-size: 18px 18px;
|
|
}
|
|
|
|
.form-select:focus,
|
|
select.form-control:focus{
|
|
border-color: rgba(167,139,250,.55) !important;
|
|
box-shadow: var(--ring) !important;
|
|
}
|
|
|
|
/* Options: some browsers ignore this (native menu), but when supported it helps */
|
|
.form-select option,
|
|
select.form-control option{
|
|
background: #0c0a14;
|
|
color: rgba(255,255,255,.92);
|
|
}
|
|
|
|
/*
|
|
Bootstrap dropdown menus (the popup menus)
|
|
*/
|
|
|
|
.dropdown-menu{
|
|
background: var(--panel-strong) !important;
|
|
border: 1px solid var(--border) !important;
|
|
backdrop-filter: blur(18px) saturate(160%);
|
|
box-shadow: var(--shadow-strong);
|
|
border-radius: var(--r-md);
|
|
padding: .4rem;
|
|
}
|
|
|
|
.dropdown-divider{
|
|
border-top-color: rgba(255,255,255,.12) !important;
|
|
}
|
|
|
|
.dropdown-item{
|
|
color: rgba(255,255,255,.86) !important;
|
|
border-radius: var(--r-sm);
|
|
padding: .55rem .7rem;
|
|
}
|
|
|
|
.dropdown-item:hover,
|
|
.dropdown-item:focus{
|
|
background: rgba(167,139,250,.16) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.dropdown-item.active,
|
|
.dropdown-item:active{
|
|
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/*
|
|
Buttons
|
|
*/
|
|
|
|
.btn{
|
|
border-radius: var(--r-md) !important;
|
|
padding: .55rem .95rem !important;
|
|
font-weight: 600 !important;
|
|
transition: transform .12s ease, filter .12s ease, background .12s ease;
|
|
}
|
|
.btn:hover{ transform: translateY(-1px); }
|
|
|
|
.btn-violet{
|
|
color: #fff !important;
|
|
border: 1px solid rgba(167,139,250,.28) !important;
|
|
background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(217,70,239,.85)) !important;
|
|
box-shadow: 0 12px 30px rgba(139,92,246,.18);
|
|
}
|
|
.btn-violet:hover{ filter: brightness(1.06); }
|
|
|
|
.btn-outline-light{
|
|
color: rgba(255,255,255,.85) !important;
|
|
border: 1px solid rgba(255,255,255,.18) !important;
|
|
background: rgba(255,255,255,.06) !important;
|
|
}
|
|
.btn-outline-light:hover{ background: rgba(255,255,255,.10) !important; }
|
|
|
|
/*
|
|
Code tag
|
|
*/
|
|
|
|
code{
|
|
color: rgba(167,139,250,.95);
|
|
background: rgba(167,139,250,.10);
|
|
border: 1px solid rgba(167,139,250,.18);
|
|
padding: .15rem .35rem;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/*
|
|
Media manager (drop zone / grid)
|
|
*/
|
|
|
|
.media-drop{
|
|
border: 1px dashed rgba(255,255,255,.25);
|
|
background: rgba(255,255,255,.04);
|
|
min-height: 170px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
cursor: pointer;
|
|
transition: background .15s ease, border-color .15s ease, transform .12s ease;
|
|
}
|
|
.media-drop:hover{
|
|
background: rgba(255,255,255,.07);
|
|
transform: translateY(-1px);
|
|
}
|
|
.media-drop.is-drag{
|
|
border-color: rgba(167,139,250,.65);
|
|
box-shadow: 0 0 0 2px rgba(167,139,250,.25);
|
|
background: rgba(167,139,250,.08);
|
|
}
|
|
|
|
.media-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.media-card{
|
|
border: 1px solid rgba(255,255,255,.08);
|
|
border-radius: var(--r-md);
|
|
background: rgba(255,255,255,.04);
|
|
overflow: hidden;
|
|
position: relative;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.25);
|
|
}
|
|
|
|
.media-card img{
|
|
width: 100%;
|
|
height: 140px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.media-meta{ padding: .65rem .8rem; }
|
|
|
|
.media-actions{
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
.media-actions .btn{
|
|
padding: .3rem .6rem !important;
|
|
border-radius: 10px !important;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/*
|
|
Mobile polish
|
|
*/
|
|
|
|
@media (max-width: 576px){
|
|
.btn{ width: 100%; }
|
|
.mt-4.d-flex.gap-2{ flex-direction: column; }
|
|
}
|