Add Purple theme with custom UX design
- New 'Purple' theme based on Vapor with deep violet palette - custom.scss: full UX redesign — pill search bar, gradient tables, card hover effects, purple badges, contrasted placeholder text - Fix btn-success → purple gradient (was green) - Switch default theme to Purple in settings template
This commit is contained in:
+1
-1
@@ -23,7 +23,7 @@ WALLET_RPC_PASS=
|
||||
# Host port the explorer is published on
|
||||
EXPLORER_PORT=3001
|
||||
# Bootswatch theme: Cerulean, Cosmo, Cyborg, Darkly, Flatly, Slate, Solar, ...
|
||||
EXPLORER_THEME=Darkly
|
||||
EXPLORER_THEME=Purple
|
||||
|
||||
# ─── Sync intervals (seconds) ────────────────────────────────────────────────
|
||||
SYNC_BLOCKS_INTERVAL=120
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
},
|
||||
|
||||
"shared_pages": {
|
||||
"theme": "${EXPLORER_THEME}",
|
||||
"theme": "Purple",
|
||||
"page_title": "${COIN_NAME} Explorer",
|
||||
"favicons": {
|
||||
"favicon32": "favicon-32.png",
|
||||
|
||||
+409
-1
@@ -1 +1,409 @@
|
||||
/* Add custom css rules here */
|
||||
/* ============================================================
|
||||
BitcoinPurple Explorer – custom UX overrides (Purple theme)
|
||||
============================================================ */
|
||||
|
||||
/* ── Variables ──────────────────────────────────────────────── */
|
||||
:root {
|
||||
--btcp-900: #0e001c;
|
||||
--btcp-800: #1c003a;
|
||||
--btcp-700: #2d1052;
|
||||
--btcp-600: #3d1278;
|
||||
--btcp-500: #5b21b6;
|
||||
--btcp-400: #7c3aed;
|
||||
--btcp-300: #9333ea;
|
||||
--btcp-200: #c084fc;
|
||||
--btcp-100: #f0e6ff; /* leggermente più luminoso per contrasto testo */
|
||||
--btcp-text: #f5eeff; /* testo principale – quasi bianco con tinta viola */
|
||||
--btcp-text-muted: #c8a8f0; /* secondario – viola chiaro leggibile */
|
||||
--btcp-search-text: #f0d9ff; /* testo dentro search bar – caldo/luminoso */
|
||||
--btcp-glow: 0 0 12px rgba(147,51,234,.45), 0 0 32px rgba(147,51,234,.15);
|
||||
--btcp-glow-sm: 0 0 6px rgba(147,51,234,.35);
|
||||
--radius: .6rem;
|
||||
--radius-pill: 50rem;
|
||||
}
|
||||
|
||||
/* ── Fix btn-success → purple ────────────────────────────────── */
|
||||
.btn-success,
|
||||
.btn-success:not(:disabled):not(.disabled) {
|
||||
background: linear-gradient(135deg, var(--btcp-400), var(--btcp-300)) !important;
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
letter-spacing: .02em;
|
||||
box-shadow: var(--btcp-glow-sm);
|
||||
transition: all .2s ease;
|
||||
}
|
||||
.btn-success:hover,
|
||||
.btn-success:focus {
|
||||
background: linear-gradient(135deg, var(--btcp-300), var(--btcp-200)) !important;
|
||||
box-shadow: var(--btcp-glow) !important;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-success:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: var(--btcp-glow-sm) !important;
|
||||
}
|
||||
|
||||
/* ── Search bar ──────────────────────────────────────────────── */
|
||||
.search-box-custom,
|
||||
#index-search,
|
||||
#search-row {
|
||||
padding: .75rem 0;
|
||||
}
|
||||
|
||||
.search-for,
|
||||
#index-search .form-group {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-for .form-control,
|
||||
#index-search input.form-control {
|
||||
background: rgba(18, 0, 40, .95) !important;
|
||||
border: 1.5px solid var(--btcp-500) !important;
|
||||
border-right: none !important;
|
||||
border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
|
||||
color: var(--btcp-search-text) !important;
|
||||
padding: .6rem 1.25rem !important;
|
||||
font-size: .95rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: .01em;
|
||||
transition: border-color .2s, box-shadow .2s;
|
||||
height: 44px;
|
||||
caret-color: var(--btcp-200);
|
||||
}
|
||||
.search-for .form-control:focus,
|
||||
#index-search input.form-control:focus {
|
||||
border-color: var(--btcp-300) !important;
|
||||
box-shadow: 0 0 0 3px rgba(147,51,234,.25) !important;
|
||||
background: rgba(20, 0, 45, 1) !important;
|
||||
color: #fff !important;
|
||||
outline: none;
|
||||
}
|
||||
.search-for .form-control::placeholder,
|
||||
#index-search input.form-control::placeholder {
|
||||
color: #d8b4fe;
|
||||
opacity: .85;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-for .btn-success,
|
||||
#index-search .btn-success {
|
||||
border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
|
||||
padding: .6rem 1.5rem !important;
|
||||
height: 44px;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
/* Search icon prefix */
|
||||
.search-for::before {
|
||||
content: "⌕";
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--btcp-200);
|
||||
font-size: 1.1rem;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
.search-for .form-control {
|
||||
padding-left: 2.5rem !important;
|
||||
}
|
||||
|
||||
/* ── Stat panels (header) ─────────────────────────────────────── */
|
||||
.panel-box,
|
||||
.card.panel,
|
||||
.stat-panel,
|
||||
[class*="stat-"] .card,
|
||||
.summary-panel .card {
|
||||
border-radius: var(--radius) !important;
|
||||
border: 1px solid var(--btcp-600) !important;
|
||||
background: linear-gradient(145deg, rgba(45,16,82,.95), rgba(28,0,58,.95)) !important;
|
||||
transition: transform .18s, box-shadow .18s;
|
||||
}
|
||||
.panel-box:hover,
|
||||
.card.panel:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--btcp-glow) !important;
|
||||
}
|
||||
|
||||
/* Panel values – big numbers */
|
||||
.panel-box .panel-value,
|
||||
.card .display-4,
|
||||
.card h3,
|
||||
.card .h3 {
|
||||
color: var(--btcp-100) !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Panel labels */
|
||||
.panel-box .panel-label,
|
||||
.card .card-title,
|
||||
.card small {
|
||||
color: var(--btcp-200) !important;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Tables ───────────────────────────────────────────────────── */
|
||||
.table {
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background: linear-gradient(90deg, var(--btcp-700), var(--btcp-600)) !important;
|
||||
color: var(--btcp-200) !important;
|
||||
font-size: .78rem !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: .07em !important;
|
||||
border: none !important;
|
||||
padding: .85rem 1rem !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: background .12s;
|
||||
}
|
||||
.table tbody tr:nth-child(odd) td {
|
||||
background: rgba(45,16,82,.25) !important;
|
||||
}
|
||||
.table tbody tr:nth-child(even) td {
|
||||
background: rgba(28,0,58,.25) !important;
|
||||
}
|
||||
.table tbody tr:hover td {
|
||||
background: rgba(124,58,237,.18) !important;
|
||||
}
|
||||
.table td {
|
||||
border-color: rgba(61,18,120,.4) !important;
|
||||
padding: .7rem 1rem !important;
|
||||
vertical-align: middle !important;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
/* Hash / tx links in tables */
|
||||
.table td a {
|
||||
color: var(--btcp-200) !important;
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.table td a:hover {
|
||||
color: #fff !important;
|
||||
text-shadow: 0 0 8px rgba(192,132,252,.7);
|
||||
}
|
||||
|
||||
/* ── Cards & containers ──────────────────────────────────────── */
|
||||
.card {
|
||||
border-radius: var(--radius) !important;
|
||||
border: 1px solid var(--btcp-600) !important;
|
||||
background: rgba(28,0,58,.85) !important;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.card-header {
|
||||
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0 !important;
|
||||
background: linear-gradient(90deg, var(--btcp-700), rgba(45,16,82,.8)) !important;
|
||||
border-bottom: 1px solid var(--btcp-600) !important;
|
||||
padding: .85rem 1.25rem !important;
|
||||
}
|
||||
.card-header h4,
|
||||
.card-header h5,
|
||||
.card-header .card-title {
|
||||
margin: 0;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
color: var(--btcp-100) !important;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── Navbar / sidebar ─────────────────────────────────────────── */
|
||||
header,
|
||||
.navbar,
|
||||
#main-header,
|
||||
#main-header-side {
|
||||
background: linear-gradient(135deg, #160032 0%, #1e0040 100%) !important;
|
||||
border-bottom: 1px solid var(--btcp-600) !important;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,.5) !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.1rem !important;
|
||||
color: var(--btcp-100) !important;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: rgba(233,213,255,.7) !important;
|
||||
font-size: .875rem !important;
|
||||
font-weight: 500 !important;
|
||||
padding: .5rem .85rem !important;
|
||||
border-radius: .4rem;
|
||||
transition: color .15s, background .15s;
|
||||
}
|
||||
.nav-link:hover,
|
||||
.nav-link.active,
|
||||
.nav-item.active .nav-link {
|
||||
color: #fff !important;
|
||||
background: rgba(124,58,237,.25) !important;
|
||||
}
|
||||
|
||||
/* ── Sidebar (side menu layout) ──────────────────────────────── */
|
||||
#sidebar,
|
||||
.sidebar-wrapper,
|
||||
nav.sidebar {
|
||||
background: linear-gradient(180deg, #130028 0%, #0e001c 100%) !important;
|
||||
border-right: 1px solid var(--btcp-600) !important;
|
||||
}
|
||||
|
||||
/* ── Badges ──────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
border-radius: var(--radius-pill) !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: .72rem !important;
|
||||
padding: .3em .7em !important;
|
||||
}
|
||||
.badge.bg-success,
|
||||
.badge.text-bg-success {
|
||||
background: rgba(74,222,128,.15) !important;
|
||||
color: #4ade80 !important;
|
||||
border: 1px solid rgba(74,222,128,.3) !important;
|
||||
}
|
||||
.badge.bg-danger,
|
||||
.badge.text-bg-danger {
|
||||
background: rgba(248,113,113,.15) !important;
|
||||
color: #f87171 !important;
|
||||
border: 1px solid rgba(248,113,113,.3) !important;
|
||||
}
|
||||
.badge.bg-primary,
|
||||
.badge.text-bg-primary {
|
||||
background: rgba(147,51,234,.2) !important;
|
||||
color: var(--btcp-200) !important;
|
||||
border: 1px solid var(--btcp-500) !important;
|
||||
}
|
||||
|
||||
/* ── Confirmations color ─────────────────────────────────────── */
|
||||
.text-success { color: #4ade80 !important; }
|
||||
.text-danger { color: #f87171 !important; }
|
||||
.text-warning { color: #fbbf24 !important; }
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────────── */
|
||||
.pagination {
|
||||
gap: 3px;
|
||||
}
|
||||
.page-link {
|
||||
border-radius: .4rem !important;
|
||||
background: var(--btcp-700) !important;
|
||||
border: 1px solid var(--btcp-600) !important;
|
||||
color: var(--btcp-200) !important;
|
||||
transition: all .15s;
|
||||
font-size: .85rem;
|
||||
}
|
||||
.page-link:hover {
|
||||
background: var(--btcp-400) !important;
|
||||
border-color: var(--btcp-400) !important;
|
||||
color: #fff !important;
|
||||
box-shadow: var(--btcp-glow-sm);
|
||||
}
|
||||
.page-item.active .page-link {
|
||||
background: linear-gradient(135deg, var(--btcp-400), var(--btcp-300)) !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: var(--btcp-glow-sm);
|
||||
}
|
||||
.page-item.disabled .page-link {
|
||||
background: rgba(45,16,82,.4) !important;
|
||||
border-color: var(--btcp-700) !important;
|
||||
color: var(--btcp-500) !important;
|
||||
}
|
||||
|
||||
/* ── Global text contrast boost ─────────────────────────────── */
|
||||
body {
|
||||
color: var(--btcp-text) !important;
|
||||
}
|
||||
|
||||
p, li, span, div, td, th, label {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Testo secondario / muted – più leggibile */
|
||||
.text-muted,
|
||||
small,
|
||||
.small {
|
||||
color: var(--btcp-text-muted) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Valori numerici nei pannelli – massima leggibilità */
|
||||
.card-body,
|
||||
.panel-body {
|
||||
color: var(--btcp-text) !important;
|
||||
}
|
||||
|
||||
/* Intestazioni */
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: var(--btcp-100) !important;
|
||||
}
|
||||
|
||||
/* ── Loading bar ─────────────────────────────────────────────── */
|
||||
#loading-bar,
|
||||
.loading-bar,
|
||||
#nprogress .bar {
|
||||
background: linear-gradient(90deg, var(--btcp-400), var(--btcp-200)) !important;
|
||||
box-shadow: 0 0 8px var(--btcp-300);
|
||||
}
|
||||
|
||||
/* ── Charts ──────────────────────────────────────────────────── */
|
||||
canvas {
|
||||
filter: drop-shadow(0 0 6px rgba(147,51,234,.2));
|
||||
}
|
||||
|
||||
/* ── Footer ──────────────────────────────────────────────────── */
|
||||
footer,
|
||||
#footer {
|
||||
background: linear-gradient(135deg, #130028 0%, #0e001c 100%) !important;
|
||||
border-top: 1px solid var(--btcp-600) !important;
|
||||
color: var(--btcp-500) !important;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ───────────────────────────────────────────────── */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--btcp-500) var(--btcp-900);
|
||||
}
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: var(--btcp-900); }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--btcp-500);
|
||||
border-radius: 99px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--btcp-300); }
|
||||
|
||||
/* ── Inputs & forms ──────────────────────────────────────────── */
|
||||
.form-control,
|
||||
.form-select {
|
||||
border-radius: .45rem !important;
|
||||
}
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--btcp-300) !important;
|
||||
box-shadow: 0 0 0 3px rgba(147,51,234,.2) !important;
|
||||
}
|
||||
|
||||
/* ── Tooltips ────────────────────────────────────────────────── */
|
||||
.tooltip-inner {
|
||||
background: var(--btcp-700) !important;
|
||||
border: 1px solid var(--btcp-600);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
/* ── Links ───────────────────────────────────────────────────── */
|
||||
a { transition: color .15s; }
|
||||
a:hover { text-decoration: none !important; }
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
@use './themes/united/variables' as united;
|
||||
@use './themes/vapor/variables' as vapor;
|
||||
@use './themes/yeti/variables' as yeti;
|
||||
@use './themes/purple/variables' as purple;
|
||||
@use './themes/zephyr/variables' as zephyr;
|
||||
|
||||
$theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
@@ -79,6 +80,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
border-color: united.$gray-300 if($important == 0, null, !important);
|
||||
} @else if $theme-name == "vapor" {
|
||||
border-color: vapor.$gray-300 if($important == 0, null, !important);
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
border-color: btcp.$gray-300 if($important == 0, null, !important);
|
||||
} @else if $theme-name == "yeti" {
|
||||
border-color: rgba(0, 0, 0, 0.1) if($important == 0, null, !important); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -137,6 +141,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
border-color: #853e64; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
border-color: #2e1b3e; /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
border-color: #3d1278; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
border-color: #383838; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -195,6 +202,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
border-color: #d2d4d7; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
border-color: #57ddea; /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
border-color: #9333ea; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
border-color: #d6d6d6; /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -277,6 +287,10 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: vapor.$white;
|
||||
background-color: vapor.$gray-900;
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: btcp.$white;
|
||||
background-color: btcp.$gray-900;
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: yeti.$white;
|
||||
background-color: yeti.$gray-900;
|
||||
@@ -364,6 +378,10 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: vapor.$white;
|
||||
background-color: vapor.$light;
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: btcp.$white;
|
||||
background-color: btcp.$light;
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: yeti.$black;
|
||||
background-color: yeti.$gray-200;
|
||||
@@ -427,6 +445,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: rgba(255, 255, 255, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -485,6 +506,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -543,6 +567,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(255, 255, 255, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: rgba(255, 255, 255, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -601,6 +628,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: rgba(0, 0, 0, 0.55); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -659,6 +689,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(255, 255, 255, 0.75); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(255, 255, 255, 0.75); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(255, 255, 255, 0.75); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: yeti.$white;
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -718,6 +751,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
color: rgba(0, 0, 0, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "vapor" {
|
||||
color: rgba(0, 0, 0, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
color: rgba(0, 0, 0, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "yeti" {
|
||||
color: rgba(0, 0, 0, 0.7); /* Hardcoded value not present in _variables.scss */
|
||||
} @else if $theme-name == "zephyr" {
|
||||
@@ -777,6 +813,9 @@ $theme-name: string.to-lower-case(theme-selector.$theme-name);
|
||||
background: united.$primary;
|
||||
} @else if $theme-name == "vapor" {
|
||||
background: vapor.$primary;
|
||||
|
||||
} @else if $theme-name == "purple" {
|
||||
background: btcp.$primary;
|
||||
} @else if $theme-name == "yeti" {
|
||||
background: yeti.$primary;
|
||||
} @else if $theme-name == "zephyr" {
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
// BitcoinPurple Theme
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
// Fonts
|
||||
|
||||
$web-font-path: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" !default;
|
||||
@if $web-font-path {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
|
||||
// Glow mixins
|
||||
|
||||
@mixin glow($color) {
|
||||
box-shadow: 0 0 6px rgba($color, .5), 0 0 20px rgba($color, .2);
|
||||
}
|
||||
|
||||
@mixin text-glow($color) {
|
||||
text-shadow: 0 0 8px rgba($color, .6), 0 0 20px rgba($color, .3);
|
||||
}
|
||||
|
||||
// Body — deep purple gradient background
|
||||
|
||||
body {
|
||||
background-image: linear-gradient(160deg, #130025 0%, #0e001c 40%, #0a0018 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
// Headings glow
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
@include text-glow(#a855f7);
|
||||
}
|
||||
|
||||
// Navbar — rich purple
|
||||
|
||||
.navbar {
|
||||
background: linear-gradient(135deg, #1a003a 0%, #2d0057 100%) !important;
|
||||
border-bottom: 1px solid #5b21b6;
|
||||
@include glow(#7c3aed);
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.nav-link {
|
||||
color: #e9d5ff !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: #fff !important;
|
||||
@include text-glow(#c084fc);
|
||||
}
|
||||
|
||||
// Sidebar menu
|
||||
|
||||
#sidebar,
|
||||
.sidebar,
|
||||
[id*="sidebar"],
|
||||
.nav-sidebar,
|
||||
.col-sidebar {
|
||||
background: linear-gradient(180deg, #1a003a 0%, #120028 100%) !important;
|
||||
border-right: 1px solid #3d1278;
|
||||
}
|
||||
|
||||
// Cards — dark purple glass effect
|
||||
|
||||
.card {
|
||||
background: rgba(28, 0, 58, .85) !important;
|
||||
border: 1px solid #3d1278 !important;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: rgba(45, 16, 82, .9) !important;
|
||||
border-bottom: 1px solid #4c1a8f !important;
|
||||
color: #d8b4fe !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
color: #e9d5ff;
|
||||
|
||||
th {
|
||||
background: #2d1052 !important;
|
||||
color: #c084fc !important;
|
||||
border-bottom: 2px solid #5b21b6 !important;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: .82rem;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
td {
|
||||
border-color: #2d1052 !important;
|
||||
}
|
||||
|
||||
tbody tr:hover td {
|
||||
background: rgba(147, 51, 234, .12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons — glowing purple
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
|
||||
border: none !important;
|
||||
@include glow(#9333ea);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
|
||||
@include glow(#a855f7);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #2d1052 !important;
|
||||
border: 1px solid #5b21b6 !important;
|
||||
color: #e9d5ff !important;
|
||||
}
|
||||
|
||||
// Badges & labels
|
||||
|
||||
.badge.bg-primary {
|
||||
background: #7c3aed !important;
|
||||
}
|
||||
|
||||
.badge.bg-success {
|
||||
background: #166534 !important;
|
||||
color: #4ade80 !important;
|
||||
}
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: #c084fc;
|
||||
|
||||
&:hover {
|
||||
color: #e9d5ff;
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
background: #1c003a !important;
|
||||
border-color: #3d1278 !important;
|
||||
color: #e9d5ff !important;
|
||||
|
||||
&:focus {
|
||||
background: #1c003a !important;
|
||||
border-color: #9333ea !important;
|
||||
box-shadow: 0 0 0 3px rgba(147, 51, 234, .25) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Panels / stat boxes
|
||||
|
||||
.panel,
|
||||
.stats-panel,
|
||||
[class*="panel-"] {
|
||||
background: rgba(28, 0, 58, .9) !important;
|
||||
border: 1px solid #3d1278 !important;
|
||||
}
|
||||
|
||||
// Pagination
|
||||
|
||||
.page-link {
|
||||
background: #2d1052 !important;
|
||||
border-color: #5b21b6 !important;
|
||||
color: #d8b4fe !important;
|
||||
|
||||
&:hover {
|
||||
background: #9333ea !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item.active .page-link {
|
||||
background: #7c3aed !important;
|
||||
border-color: #7c3aed !important;
|
||||
}
|
||||
|
||||
// Scrollbar styling
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0e001c;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #5b21b6;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: #9333ea;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
.breadcrumb {
|
||||
background: #2d1052 !important;
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: #c084fc !important;
|
||||
}
|
||||
|
||||
// Code / pre
|
||||
|
||||
code {
|
||||
color: #e879f9;
|
||||
background: rgba(45, 16, 82, .6);
|
||||
padding: .1em .3em;
|
||||
border-radius: .2em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #1c003a;
|
||||
border: 1px solid #3d1278;
|
||||
color: #e9d5ff;
|
||||
}
|
||||
|
||||
// Footer
|
||||
|
||||
footer,
|
||||
.footer {
|
||||
background: linear-gradient(135deg, #1a003a 0%, #0e001c 100%) !important;
|
||||
border-top: 1px solid #3d1278 !important;
|
||||
color: #a855f7 !important;
|
||||
}
|
||||
|
||||
// Alerts
|
||||
|
||||
.alert {
|
||||
border: none;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Misc utility
|
||||
|
||||
.text-muted {
|
||||
color: #a855f7 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #3d1278;
|
||||
opacity: .5;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
// BitcoinPurple Theme (based on Vapor 5.1.3)
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
$theme: "purple" !default;
|
||||
|
||||
// Color system
|
||||
|
||||
$white: #fff !default;
|
||||
$gray-100: #f3e8ff !default;
|
||||
$gray-200: #e9d5ff !default;
|
||||
$gray-300: #d8b4fe !default;
|
||||
$gray-400: #c084fc !default;
|
||||
$gray-500: #a855f7 !default;
|
||||
$gray-600: #7e22ce !default;
|
||||
$gray-700: #581c87 !default;
|
||||
$gray-800: #3b0764 !default;
|
||||
$gray-900: #160026 !default;
|
||||
$black: #08000f !default;
|
||||
|
||||
$blue: #818cf8 !default;
|
||||
$indigo: #6366f1 !default;
|
||||
$purple: #a855f7 !default;
|
||||
$pink: #e879f9 !default;
|
||||
$red: #f87171 !default;
|
||||
$orange: #fb923c !default;
|
||||
$yellow: #fbbf24 !default;
|
||||
$green: #4ade80 !default;
|
||||
$teal: #2dd4bf !default;
|
||||
$cyan: #22d3ee !default;
|
||||
|
||||
$primary: #9333ea !default;
|
||||
$secondary: #7c3aed !default;
|
||||
$success: $green !default;
|
||||
$info: $blue !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$min-contrast-ratio: 2 !default;
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: #0e001c !default;
|
||||
$body-color: #e9d5ff !default;
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $gray-300 !default;
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
|
||||
$text-muted: $gray-500 !default;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-border-color: #2d1052 !default;
|
||||
$table-bg-scale: 0 !default;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: #1c003a !default;
|
||||
$input-color: $gray-200 !default;
|
||||
$input-border-color: #3d1278 !default;
|
||||
$input-group-addon-color:$gray-400 !default;
|
||||
$input-group-addon-bg: #2d1052 !default;
|
||||
|
||||
$form-check-input-bg: #1c003a !default;
|
||||
$form-check-input-border: 1px solid #3d1278 !default;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-bg: #1c003a !default;
|
||||
$dropdown-border-color: #3d1278 !default;
|
||||
$dropdown-divider-bg: #3d1278 !default;
|
||||
$dropdown-link-color: $gray-200 !default;
|
||||
$dropdown-link-hover-color: $white !default;
|
||||
$dropdown-link-hover-bg: $primary !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-x: 2rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
$nav-tabs-border-color: #3d1278 !default;
|
||||
$nav-tabs-link-active-color:$white !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-dark-color: rgba($white, .75) !default;
|
||||
$navbar-dark-hover-color: $white !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: $primary !default;
|
||||
$pagination-border-width: 0 !default;
|
||||
$pagination-border-color: transparent !default;
|
||||
$pagination-hover-color: $white !default;
|
||||
$pagination-hover-bg: color.adjust($primary, $lightness: 8%) !default;
|
||||
$pagination-hover-border-color: transparent !default;
|
||||
$pagination-active-bg: color.adjust($primary, $lightness: 8%) !default;
|
||||
$pagination-active-border-color: transparent !default;
|
||||
$pagination-disabled-color: $gray-300 !default;
|
||||
$pagination-disabled-bg: color.adjust($primary, $lightness: -15%) !default;
|
||||
$pagination-disabled-border-color:transparent !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-cap-bg: #2d1052 !default;
|
||||
$card-bg: #1c003a !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: #1c003a !default;
|
||||
$popover-header-bg: #2d1052 !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-content-bg: #1c003a !default;
|
||||
$modal-content-border-color: #3d1278 !default;
|
||||
$modal-header-border-color: #3d1278 !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: #2d1052 !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-color: $body-color !default;
|
||||
$list-group-bg: #1c003a !default;
|
||||
$list-group-border-color: #3d1278 !default;
|
||||
$list-group-hover-bg: #2d1052 !default;
|
||||
$list-group-action-hover-color: $list-group-color !default;
|
||||
$list-group-action-active-bg: $gray-900 !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .375rem !default;
|
||||
$breadcrumb-padding-x: .75rem !default;
|
||||
$breadcrumb-bg: #2d1052 !default;
|
||||
$breadcrumb-border-radius:.25rem !default;
|
||||
|
||||
// Close button
|
||||
|
||||
$btn-close-color: $white !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity:1 !default;
|
||||
|
||||
// Code
|
||||
|
||||
$pre-color: inherit !default;
|
||||
+11979
File diff suppressed because it is too large
Load Diff
+12
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user