193 lines
4.8 KiB
SCSS
193 lines
4.8 KiB
SCSS
/* FREE-WAREZ — Premium Theme v2
|
|
Technical · Minimal · Sharp */
|
|
|
|
:root {
|
|
--fw-cyan: #00d4ff;
|
|
--fw-purple: #8b5cf6;
|
|
--fw-indigo: #6366f1;
|
|
--fw-dark: #0d0d1a;
|
|
--fw-surface:#141428;
|
|
--fw-border: rgba(0, 212, 255, 0.14);
|
|
--fw-text: #e8e8ff;
|
|
--fw-muted: #94a3b8;
|
|
}
|
|
|
|
/* ─── HEADER ─── */
|
|
.d-header {
|
|
background-color: rgba(13, 13, 26, 0.95) !important;
|
|
background-image: none !important;
|
|
backdrop-filter: blur(16px) saturate(1.5) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.5) !important;
|
|
border-bottom: 1px solid var(--fw-border) !important;
|
|
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5) !important;
|
|
position: relative !important;
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
/* Gradient accent line — bottom of header */
|
|
.d-header::after {
|
|
content: '' !important;
|
|
position: absolute !important;
|
|
bottom: -1px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
height: 2px !important;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
var(--fw-cyan) 15%,
|
|
var(--fw-indigo) 50%,
|
|
var(--fw-purple) 85%,
|
|
transparent 100%
|
|
) !important;
|
|
pointer-events: none !important;
|
|
z-index: 1001 !important;
|
|
}
|
|
|
|
.d-header .wrap {
|
|
padding: 10px 24px !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* ─── LOGO ─── */
|
|
.title .logo-big img,
|
|
.title img.logo-big {
|
|
height: 40px !important;
|
|
width: auto !important;
|
|
max-width: 280px !important;
|
|
image-rendering: -webkit-optimize-contrast !important;
|
|
transition: opacity 0.25s ease !important;
|
|
}
|
|
|
|
.title .logo-big img:hover {
|
|
opacity: 0.85 !important;
|
|
}
|
|
|
|
.title .logo-small img,
|
|
.title img.logo-small {
|
|
height: 30px !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
/* ─── ICONS & BUTTONS ─── */
|
|
.d-header .btn,
|
|
.d-header button,
|
|
.d-header .icon {
|
|
color: var(--fw-muted) !important;
|
|
background: transparent !important;
|
|
border-radius: 6px !important;
|
|
transition: color 0.15s ease, background 0.15s ease !important;
|
|
}
|
|
|
|
.d-header .btn:hover,
|
|
.d-header button:hover,
|
|
.d-header .icon:hover {
|
|
color: var(--fw-cyan) !important;
|
|
background: rgba(0, 212, 255, 0.1) !important;
|
|
}
|
|
|
|
/* ─── SEARCH ─── */
|
|
.search-input,
|
|
#search-term {
|
|
background: rgba(20, 20, 40, 0.85) !important;
|
|
border: 1px solid var(--fw-border) !important;
|
|
color: var(--fw-text) !important;
|
|
border-radius: 6px !important;
|
|
font-size: 14px !important;
|
|
transition: border-color 0.15s, box-shadow 0.15s !important;
|
|
}
|
|
|
|
.search-input:focus,
|
|
#search-term:focus {
|
|
border-color: var(--fw-cyan) !important;
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ─── NAV TABS ─── */
|
|
.nav-pills > li > a {
|
|
font-size: 11px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 1.5px !important;
|
|
text-transform: uppercase !important;
|
|
color: var(--fw-muted) !important;
|
|
border: 1px solid transparent !important;
|
|
border-radius: 5px !important;
|
|
padding: 5px 12px !important;
|
|
transition: color 0.15s, border-color 0.15s, background 0.15s !important;
|
|
}
|
|
|
|
.nav-pills > li.active > a,
|
|
.nav-pills > li > a:hover {
|
|
color: var(--fw-cyan) !important;
|
|
border-color: var(--fw-border) !important;
|
|
background: rgba(0, 212, 255, 0.07) !important;
|
|
}
|
|
|
|
/* ─── TOPIC TITLES ─── */
|
|
.topic-list-item .title a:hover,
|
|
.fancy-title:hover {
|
|
color: var(--fw-cyan) !important;
|
|
}
|
|
|
|
/* ─── BUTTONS ─── */
|
|
.btn-primary,
|
|
.btn-primary:visited {
|
|
background: linear-gradient(135deg, var(--fw-cyan) 0%, var(--fw-purple) 100%) !important;
|
|
border: none !important;
|
|
font-size: 12px !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: 0.5px !important;
|
|
border-radius: 6px !important;
|
|
box-shadow: 0 2px 14px rgba(0, 212, 255, 0.22) !important;
|
|
transition: box-shadow 0.2s ease, transform 0.1s ease !important;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
box-shadow: 0 4px 24px rgba(0, 212, 255, 0.38) !important;
|
|
transform: translateY(-1px) !important;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
/* ─── CUSTOM SCROLLBAR ─── */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--fw-dark);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, var(--fw-cyan), var(--fw-purple));
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg, #33dcff, #a78bfa);
|
|
}
|
|
|
|
/* ─── BADGES ─── */
|
|
.badge-notification {
|
|
background: var(--fw-purple) !important;
|
|
font-size: 10px !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
/* ─── CATEGORY BADGES ─── */
|
|
.badge-category {
|
|
font-size: 10px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.5px !important;
|
|
}
|
|
|
|
/* ─── AVATAR ring on hover ─── */
|
|
.avatar {
|
|
transition: box-shadow 0.15s ease !important;
|
|
}
|
|
.avatar:hover {
|
|
box-shadow: 0 0 0 2px var(--fw-cyan) !important;
|
|
}
|
|
|