216 lines
7 KiB
CSS
216 lines
7 KiB
CSS
|
/* BetterCurseForge — Purple Night Theme */
|
||
|
|
/* A rich, sleek, fully-integrated dark purple theme for CurseForge Launcher */
|
||
|
|
|
||
|
|
:root,
|
||
|
|
.cf-app,
|
||
|
|
.base-skin,
|
||
|
|
.dark-skin,
|
||
|
|
.cf-classic,
|
||
|
|
.theme-purple-night {
|
||
|
|
/* ── Accent & Brand ── */
|
||
|
|
--surface-brand-brand: #8b5cf6 !important;
|
||
|
|
--surface-brand-brand-hover: #9d74f7 !important;
|
||
|
|
--color-primary: #8b5cf6 !important;
|
||
|
|
--color-primary-hover: #9d74f7 !important;
|
||
|
|
--color-primary-active: #7c3aed !important;
|
||
|
|
--color-accent: #a78bfa !important;
|
||
|
|
--color-highlight: #8b5cf6 !important;
|
||
|
|
--border-primary: #8b5cf6 !important;
|
||
|
|
--border-highlight: #8b5cf6 !important;
|
||
|
|
--selected-item-border: 3px solid #8b5cf6 !important;
|
||
|
|
|
||
|
|
/* ── Backgrounds & Surfaces ── */
|
||
|
|
--color-background: #0d0818 !important;
|
||
|
|
--surface-base: #07040d !important;
|
||
|
|
--surface-base-half: rgba(7, 4, 13, 0.5) !important;
|
||
|
|
--surface-primary: #110b20 !important;
|
||
|
|
--surface-secondary: #170e2b !important;
|
||
|
|
--surface-tertiery: #21153d !important;
|
||
|
|
--surface-tertiery-hover: #2c1c52 !important;
|
||
|
|
--surface-quartinery: #382468 !important;
|
||
|
|
--surface-on-surface: rgba(255, 255, 255, 0.08) !important;
|
||
|
|
--surface-on-surface-hover: rgba(255, 255, 255, 0.14) !important;
|
||
|
|
|
||
|
|
/* ── Cards (Modpack / Project) ── */
|
||
|
|
--surface-card: #170e2b !important;
|
||
|
|
--surface-card-hover: #221540 !important;
|
||
|
|
--color-surface-card: #170e2b !important;
|
||
|
|
--color-surface-card-hover: #221540 !important;
|
||
|
|
--color-surface-card-active: #2b1b50 !important;
|
||
|
|
--color-surface-card-active-hover: #352163 !important;
|
||
|
|
--color-surface-card-disabled: #100a1e !important;
|
||
|
|
--color-surface-info-block: #21153d !important;
|
||
|
|
--color-surface-folder-view-item: #21153d !important;
|
||
|
|
|
||
|
|
/* ── Tables & Lists ── */
|
||
|
|
--color-surface-table: #170e2b !important;
|
||
|
|
--color-surface-table-hover: #21153d !important;
|
||
|
|
--color-surface-table-head: #1c1134 !important;
|
||
|
|
--color-surface-table-head-hover: #261747 !important;
|
||
|
|
|
||
|
|
/* ── Modals & Dialogs ── */
|
||
|
|
--color-surface-modal: #170e2b !important;
|
||
|
|
--color-surface-modal-footer: #110b20 !important;
|
||
|
|
--color-modal-border: #2c1c52 !important;
|
||
|
|
--color-modal-backdrop: rgba(7, 4, 13, 0.85) !important;
|
||
|
|
--color-modal-backdrop-low: rgba(7, 4, 13, 0.5) !important;
|
||
|
|
|
||
|
|
/* ── Title Bar ── */
|
||
|
|
--title-bar-background: linear-gradient(90deg, #110b20 0%, #1a1032 50%, #110b20 100%) !important;
|
||
|
|
--btn-window-action: #a78bfa !important;
|
||
|
|
--btn-window-action-hover: #2c1c52 !important;
|
||
|
|
|
||
|
|
/* ── Typography & Text ── */
|
||
|
|
--text-pure: #ffffff !important;
|
||
|
|
--text-primary: #f1f5f9 !important;
|
||
|
|
--color-text-title: #f8fafc !important;
|
||
|
|
--color-text-title-hover: #ffffff !important;
|
||
|
|
--color-text-primary: #e2e8f0 !important;
|
||
|
|
--color-text-body: #cbd5e1 !important;
|
||
|
|
--color-text-secondary: #94a3b8 !important;
|
||
|
|
--color-text-secondary-icon: #94a3b8 !important;
|
||
|
|
--color-text-dropdown: #e2e8f0 !important;
|
||
|
|
--color-text-tooltip: #ede9fe !important;
|
||
|
|
|
||
|
|
/* ── Buttons ── */
|
||
|
|
--btn-primary-text: #ffffff !important;
|
||
|
|
--btn-secondary-hover: rgba(139, 92, 246, 0.16) !important;
|
||
|
|
--btn-secondary-border: rgba(139, 92, 246, 0.35) !important;
|
||
|
|
--btn-clean-hover: #21153d !important;
|
||
|
|
--btn-tertiary-background: #21153d !important;
|
||
|
|
--btn-tertiary-hover-background: #2c1c52 !important;
|
||
|
|
--btn-tertiary-text: #f1f5f9 !important;
|
||
|
|
--btn-tertiary-hover-text: #ffffff !important;
|
||
|
|
|
||
|
|
/* ── Borders & Dividers ── */
|
||
|
|
--border-tertiery: rgba(139, 92, 246, 0.18) !important;
|
||
|
|
--color-divider-1: #21153d !important;
|
||
|
|
--color-divider-2: #2c1c52 !important;
|
||
|
|
|
||
|
|
/* ── Scrollbars ── */
|
||
|
|
--color-scrollbar-thumb: #3b2266 !important;
|
||
|
|
|
||
|
|
/* ── Theme Thumbnail Preview ── */
|
||
|
|
--color-thumb-primary: #8b5cf6 !important;
|
||
|
|
--color-thumb-title: #3b2266 !important;
|
||
|
|
--color-thumb-body: #241442 !important;
|
||
|
|
--color-thumb-name: #ffffff !important;
|
||
|
|
--color-thumb-icon-bg: #8b5cf6 !important;
|
||
|
|
--color-thumb-check-color: #ffffff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Element-Specific Polish ── */
|
||
|
|
|
||
|
|
/* Title bar */
|
||
|
|
.title-bar,
|
||
|
|
[class*="title-bar"],
|
||
|
|
[class*="TitleBar"] {
|
||
|
|
background: var(--title-bar-background) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidenav / left navigation */
|
||
|
|
.sidenav,
|
||
|
|
[class*="sidenav"] {
|
||
|
|
background-color: var(--surface-secondary) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar game icon active indicator bar */
|
||
|
|
.games-side-menu li a:after {
|
||
|
|
background-color: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* User profile button & avatar border */
|
||
|
|
#user-login-menu .user-profile-button:before,
|
||
|
|
.user-profile-button:before {
|
||
|
|
border-color: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
#user-login-menu .user-profile-button:hover:before,
|
||
|
|
#user-login-menu.is-open .user-profile-button:before,
|
||
|
|
.user-profile-button:hover:before {
|
||
|
|
border-color: var(--surface-brand-brand-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar active tab indicator (settings, etc.) */
|
||
|
|
.system-side-menu ul.user-menu .user-menu-item > a.tab.is-active:before,
|
||
|
|
.system-side-menu ul.user-menu .user-menu-item > button.tab.is-active:before,
|
||
|
|
.system-side-menu ul.user-menu .user-menu-item > .subscription-tooltip > a.tab.is-active:before {
|
||
|
|
border-left-color: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
.system-side-menu ul.user-menu .user-menu-item > a.tab.is-active,
|
||
|
|
.system-side-menu ul.user-menu .user-menu-item > button.tab.is-active {
|
||
|
|
color: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Active tab indicator and line in horizontal tabs */
|
||
|
|
.tabs-menu ul .line,
|
||
|
|
.tabs-menu ul li a:before,
|
||
|
|
.tabs-menu ul li .tab-control:before {
|
||
|
|
background-color: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
.tabs-menu ul li a.is-active,
|
||
|
|
.tabs-menu ul li.is-active a {
|
||
|
|
color: var(--color-text-title, #ffffff) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Notification badges and dots */
|
||
|
|
.highlight-indicator {
|
||
|
|
background-color: #8b5cf6 !important;
|
||
|
|
box-shadow: 0 0 6px rgba(139, 92, 246, 0.6) !important;
|
||
|
|
}
|
||
|
|
.badge-active:before,
|
||
|
|
.count-badge-wrapper .count-badge,
|
||
|
|
.popover-button button.btn-clean.btn-with-icon.has-badge:after {
|
||
|
|
background: var(--surface-brand-brand) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Primary buttons */
|
||
|
|
.btn-primary:not(.btn-secondary),
|
||
|
|
button[class*="primary"]:not([class*="secondary"]) {
|
||
|
|
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
|
||
|
|
border: none !important;
|
||
|
|
color: #ffffff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:not(.btn-secondary):hover,
|
||
|
|
button[class*="primary"]:not([class*="secondary"]):hover {
|
||
|
|
background: linear-gradient(135deg, #9d74f7 0%, #8b5cf6 100%) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Modpack card typography */
|
||
|
|
.tile-view-item .title,
|
||
|
|
.tile-view-item .title .name-container .mod-name {
|
||
|
|
color: var(--color-text-title, #ffffff) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile-view-item .author {
|
||
|
|
color: var(--color-text-secondary, #94a3b8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Modpack card version badge */
|
||
|
|
.tile-view-item .art .modpack-version:before {
|
||
|
|
background-color: rgba(23, 14, 43, 0.85) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile-view-item .art .modpack-version {
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Selection */
|
||
|
|
::selection {
|
||
|
|
background: rgba(139, 92, 246, 0.4) !important;
|
||
|
|
color: #ffffff !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scrollbars */
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: var(--surface-base);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--color-scrollbar-thumb);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: #52318c;
|
||
|
|
}
|