fix(discourse-themes): fix contrast bugs, darkmode scheme and apply cyber glassmorphism styling
This commit is contained in:
eldov
@@ -250,13 +250,8 @@ div.ac-wrap {
|
||||
|
||||
html {
|
||||
body:not(.no-ember) {
|
||||
background:
|
||||
linear-gradient(
|
||||
0deg,
|
||||
rgb(var(--primary-rgb), 0.075) 0%,
|
||||
rgb(var(--primary-rgb), 0.075) 100%
|
||||
),
|
||||
linear-gradient(0deg, var(--secondary) 100%, var(--secondary) 100%);
|
||||
background-color: #050812 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
.background-container {
|
||||
@@ -265,12 +260,20 @@ html {
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--tertiary-hover) 0%,
|
||||
var(--tertiary) 100%
|
||||
);
|
||||
clip-path: ellipse(148% 70% at 91% -14%);
|
||||
background: #050812 url('/uploads/default/custom-assets/discourse_cyber_bg.jpg') no-repeat center center fixed !important;
|
||||
background-size: cover !important;
|
||||
opacity: 0.95;
|
||||
pointer-events: none;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.background-container::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(5, 8, 18, 0.75) 0%, rgba(5, 8, 18, 0.92) 100%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body.no-ember .background-container {
|
||||
@@ -279,18 +282,17 @@ html {
|
||||
}
|
||||
|
||||
html body #main-outlet {
|
||||
margin-top: 30px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 50px;
|
||||
background: var(--secondary);
|
||||
border-radius: 1em;
|
||||
padding: 3em 3em 5%;
|
||||
max-width: 1150px;
|
||||
padding-bottom: 5% !important; // overriding inline style
|
||||
box-shadow:
|
||||
0 24px 40px rgb(0, 0, 0, 0.07),
|
||||
0 10.8529px 24.1177px rgb(0, 0, 0, 0.0456112),
|
||||
0 4.50776px 10.0172px rgb(0, 0, 0, 0.035),
|
||||
0 1.63037px 3.62304px rgb(0, 0, 0, 0.0243888);
|
||||
background: rgba(10, 15, 28, 0.92) !important;
|
||||
backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.22) !important;
|
||||
border-radius: 20px !important;
|
||||
padding: 2.5em 2.5em 5%;
|
||||
max-width: 1180px;
|
||||
padding-bottom: 5% !important;
|
||||
box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 242, 254, 0.15);
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
padding: 1.5em;
|
||||
@@ -613,3 +615,272 @@ html body #main-outlet {
|
||||
.title-voting {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* Cyber Header & Accent Line */
|
||||
.d-header {
|
||||
background: rgba(8, 12, 24, 0.95) !important;
|
||||
backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
border-bottom: 1px solid rgba(0, 242, 254, 0.25) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.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%, #00f2fe 20%, #38bdf8 50%, #10b981 80%, transparent 100%) !important;
|
||||
box-shadow: 0 0 12px #00f2fe;
|
||||
pointer-events: none !important;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.d-header .title a img#site-logo,
|
||||
.d-header .title img.logo-big {
|
||||
filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.45));
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.d-header .title a img#site-logo:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* Glassmorphism Category & Topic Cards */
|
||||
.topic-list-item {
|
||||
background-color: rgba(14, 22, 38, 0.82) !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.18) !important;
|
||||
border-radius: 14px !important;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
}
|
||||
|
||||
.topic-list-item:hover {
|
||||
background-color: rgba(18, 30, 54, 0.95) !important;
|
||||
border-color: #00f2fe !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.25) !important;
|
||||
}
|
||||
|
||||
.topic-list-item .main-link a.title {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.topic-list-item .main-link a.title:hover {
|
||||
color: #00f2fe !important;
|
||||
text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
|
||||
color: #03060c !important;
|
||||
font-weight: 700 !important;
|
||||
border: none !important;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35) !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.15) !important;
|
||||
box-shadow: 0 6px 26px rgba(0, 242, 254, 0.6) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
W-MAKE DARK CYBERPUNK POLISH OVERRIDES
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
--primary: #f1f5f9;
|
||||
--secondary: #0b1120;
|
||||
--tertiary: #00f2fe;
|
||||
--tertiary-hover: #38bdf8;
|
||||
--header_background: #070a14;
|
||||
--header_primary: #f8fafc;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: #050812 !important;
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
/* 1. Global Background Wallpaper */
|
||||
.background-container {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
background: #050812 url('/uploads/default/custom-assets/discourse_cyber_bg.jpg') no-repeat center center fixed !important;
|
||||
background-size: cover !important;
|
||||
opacity: 0.95 !important;
|
||||
pointer-events: none !important;
|
||||
z-index: -2 !important;
|
||||
}
|
||||
|
||||
.background-container::after {
|
||||
content: '' !important;
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
background: radial-gradient(circle at 50% 30%, rgba(5, 8, 18, 0.6) 0%, rgba(5, 8, 18, 0.95) 100%) !important;
|
||||
pointer-events: none !important;
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
/* 2. Top Header */
|
||||
.d-header {
|
||||
background: rgba(7, 10, 20, 0.94) !important;
|
||||
backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
||||
border-bottom: 1px solid rgba(0, 242, 254, 0.22) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.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%, #00f2fe 20%, #6366f1 50%, #10b981 80%, transparent 100%) !important;
|
||||
box-shadow: 0 0 14px rgba(0, 242, 254, 0.8) !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.d-header .title a img#site-logo,
|
||||
.d-header .title img.logo-big {
|
||||
filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.45)) !important;
|
||||
transition: transform 0.25s ease !important;
|
||||
}
|
||||
|
||||
.d-header .title a img#site-logo:hover {
|
||||
transform: scale(1.03) !important;
|
||||
}
|
||||
|
||||
.d-header-icons .icon {
|
||||
color: #94a3b8 !important;
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.d-header-icons .icon:hover {
|
||||
color: #00f2fe !important;
|
||||
background: rgba(0, 242, 254, 0.12) !important;
|
||||
}
|
||||
|
||||
/* 3. Main Forum Card & Sidebar */
|
||||
html body #main-outlet {
|
||||
margin-top: 25px !important;
|
||||
margin-bottom: 50px !important;
|
||||
background: rgba(11, 17, 32, 0.88) !important;
|
||||
backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.2) !important;
|
||||
border-radius: 24px !important;
|
||||
padding: 2.2em 2.5em 5% !important;
|
||||
max-width: 1200px !important;
|
||||
box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 242, 254, 0.12) !important;
|
||||
}
|
||||
|
||||
.sidebar-wrapper, .d-sidebar {
|
||||
background: transparent !important;
|
||||
border-right: 1px solid rgba(0, 242, 254, 0.12) !important;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link {
|
||||
border-radius: 8px !important;
|
||||
color: #94a3b8 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:hover,
|
||||
.sidebar-section-link-wrapper .sidebar-section-link.active {
|
||||
background: rgba(0, 242, 254, 0.1) !important;
|
||||
color: #00f2fe !important;
|
||||
}
|
||||
|
||||
/* 4. Topic List Items (Cards) */
|
||||
.topic-list-body .topic-list-item {
|
||||
background: rgba(15, 23, 42, 0.75) !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.16) !important;
|
||||
border-radius: 14px !important;
|
||||
margin-bottom: 0.75em !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
|
||||
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
}
|
||||
|
||||
.topic-list-body .topic-list-item:hover {
|
||||
background: rgba(22, 34, 60, 0.95) !important;
|
||||
border-color: #00f2fe !important;
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 242, 254, 0.25) !important;
|
||||
}
|
||||
|
||||
.topic-list-item .main-link a.title {
|
||||
color: #f8fafc !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 1.05rem !important;
|
||||
}
|
||||
|
||||
.topic-list-item .main-link a.title:hover {
|
||||
color: #00f2fe !important;
|
||||
text-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
|
||||
}
|
||||
|
||||
.topic-list-item .topic-excerpt {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
/* 5. Navigation Pills & Filter Tabs */
|
||||
.nav-pills > li > a {
|
||||
color: #94a3b8 !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 600 !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.nav-pills > li > a:hover {
|
||||
color: #00f2fe !important;
|
||||
background: rgba(0, 242, 254, 0.08) !important;
|
||||
}
|
||||
|
||||
.nav-pills > li > a.active {
|
||||
background: rgba(0, 242, 254, 0.18) !important;
|
||||
color: #00f2fe !important;
|
||||
border: 1px solid rgba(0, 242, 254, 0.35) !important;
|
||||
box-shadow: 0 0 12px rgba(0, 242, 254, 0.2) !important;
|
||||
}
|
||||
|
||||
/* 6. Buttons & Badges */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00f2fe 0%, #10b981 100%) !important;
|
||||
color: #03060c !important;
|
||||
font-weight: 700 !important;
|
||||
border: none !important;
|
||||
border-radius: 10px !important;
|
||||
box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
filter: brightness(1.15) !important;
|
||||
box-shadow: 0 6px 26px rgba(0, 242, 254, 0.6) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.badge-notification {
|
||||
background: linear-gradient(135deg, #00f2fe, #6366f1) !important;
|
||||
color: #ffffff !important;
|
||||
border-radius: 999px !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
Reference in New Issue
Block a user