Retropex/custom-ocean.xyz-dashboard
1
0
Fork 0
mirror of https://github.com/Retropex/custom-ocean.xyz-dashboard.git synced 2025-05-12 11:10:44 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhance theme styling and mobile responsiveness

Browse Source 
Updated `theme-toggle.css` for improved mobile styling of the theme toggle button, increasing padding and width. Reorganized CSS variables in `theme.js` for the DeepSea theme to enhance structure and readability. Adjusted color selectors for consistency across elements, including pool hashrate and navigation links, and modified button hover effects to utilize new primary color variables for a cohesive theme.
This commit is contained in:
DJObleezy 2025-04-23 06:58:56 -07:00
parent df1678fac7
commit a802880011
2 changed files with 146 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/css/theme-toggle.css
View File

@ -49,10 +49,10 @@
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#themeToggle, #themeToggle,
.theme-toggle-btn { .theme-toggle-btn {
padding: 6px; padding: 10px;
font-size: 12px; font-size: 12px;
border-radius: 3px; border-radius: 3px;
width: 35px; width: 40px;
height: 35px; height: 35px;
} }

384
static/js/theme.js
View File

@ -68,23 +68,17 @@ function applyDeepSeaTheme() {
const styleElement = document.createElement('style'); const styleElement = document.createElement('style');
styleElement.id = 'deepSeaThemeStyles'; // Give it an ID so we can check if it exists styleElement.id = 'deepSeaThemeStyles'; // Give it an ID so we can check if it exists
// Enhanced CSS with your requested changes // Enhanced CSS with clean, organized structure
styleElement.textContent = ` styleElement.textContent = `
/* Base theme variables */ /* Base theme variables */
:root { :root {
--primary-color: #0088cc !important; --primary-color: #0088cc;
--bitcoin-orange: #0088cc !important; --primary-color-rgb: 0, 136, 204;
--bitcoin-orange-rgb: 0, 136, 204 !important; --accent-color: #00b3ff;
--bg-gradient: linear-gradient(135deg, #0a0a0a, #131b20) !important; --bg-gradient: linear-gradient(135deg, #0a0a0a, #131b20);
--accent-color: #00b3ff !important;
--header-bg: linear-gradient(to right, #0088cc, #005580) !important;
--card-header-bg: linear-gradient(to right, #0088cc, #006699) !important;
--progress-bar-color: #0088cc !important;
--link-color: #0088cc !important;
--link-hover-color: #00b3ff !important;
/* Standardized text shadow values */ /* Standardized text shadow values */
--blue-text-shadow: 0 0 10px rgba(0, 136, 204, 0.8), 0 0 5px rgba(0, 136, 204, 0.5); --blue-text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.8), 0 0 5px rgba(var(--primary-color-rgb), 0.5);
--yellow-text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5); --yellow-text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 5px rgba(255, 215, 0, 0.5);
--green-text-shadow: 0 0 10px rgba(50, 205, 50, 0.8), 0 0 5px rgba(50, 205, 50, 0.5); --green-text-shadow: 0 0 10px rgba(50, 205, 50, 0.8), 0 0 5px rgba(50, 205, 50, 0.5);
--red-text-shadow: 0 0 10px rgba(255, 85, 85, 0.8), 0 0 5px rgba(255, 85, 85, 0.5); --red-text-shadow: 0 0 10px rgba(255, 85, 85, 0.8), 0 0 5px rgba(255, 85, 85, 0.5);
@ -92,233 +86,191 @@ function applyDeepSeaTheme() {
--cyan-text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 5px rgba(0, 255, 255, 0.5); --cyan-text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 5px rgba(0, 255, 255, 0.5);
} }
/* Blue elements - main theme elements */ /* Card styling */
.card-header, .card > .card-header,
.container-fluid .card > .card-header {
background: linear-gradient(to right, #0088cc, #006699) !important;
border-bottom: 1px solid #0088cc !important;
text-shadow: var(--blue-text-shadow) !important;
color: #fff !important;
}
.card { .card {
border: 1px solid #0088cc !important; border: 1px solid var(--primary-color) !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.3) !important; box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3) !important;
} }
/* Navigation and interface elements */ .card-header, .card > .card-header {
.nav-link { background: linear-gradient(to right, var(--primary-color), #006699) !important;
border: 1px solid #0088cc !important; border-bottom: 1px solid var(--primary-color) !important;
color: #0088cc !important; text-shadow: var(--blue-text-shadow) !important;
}
.nav-link:hover, .nav-link.active {
background-color: #0088cc !important;
color: #fff !important; color: #fff !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.5) !important;
} }
/* Navigation */
.nav-link {
border: 1px solid var(--primary-color) !important;
color: var(--primary-color) !important;
}
.nav-link:hover, .nav-link.active {
background-color: var(--primary-color) !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
}
/* Interface elements */
#terminal-cursor { #terminal-cursor {
background-color: #0088cc !important; background-color: var(--primary-color) !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.8) !important; box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.8) !important;
} }
#lastUpdated { #lastUpdated {
color: #0088cc !important; color: var(--primary-color) !important;
} }
/* Chart and progress elements */
.bitcoin-progress-inner {
background: linear-gradient(90deg, #0088cc, #00b3ff) !important;
}
.bitcoin-progress-container {
border: 1px solid #0088cc !important;
box-shadow: 0 0 8px rgba(0, 136, 204, 0.5) !important;
}
h1, .text-center h1 { h1, .text-center h1 {
color: #0088cc !important; color: var(--primary-color) !important;
text-shadow: var(--blue-text-shadow) !important; text-shadow: var(--blue-text-shadow) !important;
} }
.nav-badge { .nav-badge {
background-color: #0088cc !important; background-color: var(--primary-color) !important;
}
/* Bitcoin progress elements */
.bitcoin-progress-inner {
background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
}
.bitcoin-progress-container {
border: 1px solid var(--primary-color) !important;
box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5) !important;
} }
/* Theme toggle button styling */ /* Theme toggle button styling */
#themeToggle, #themeToggle, button.theme-toggle, .toggle-theme-btn {
button.theme-toggle,
.toggle-theme-btn {
background: transparent !important; background: transparent !important;
border: 1px solid #0088cc !important; border: 1px solid var(--primary-color) !important;
color: #0088cc !important; color: var(--primary-color) !important;
transition: all 0.3s ease !important; transition: all 0.3s ease !important;
} }
#themeToggle:hover, #themeToggle:hover, button.theme-toggle:hover, .toggle-theme-btn:hover {
button.theme-toggle:hover, background-color: rgba(var(--primary-color-rgb), 0.1) !important;
.toggle-theme-btn:hover { box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3) !important;
background-color: rgba(0, 136, 204, 0.1) !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.3) !important;
} }
/* FIX 1: Make pool hashrate value text white - with more specific selectors */ /* ===== SPECIAL CASE FIXES ===== */
#pool_hashrate,
#pool_total_hashrate, /* Pool hashrate - always white */
span#pool_total_hashrate, [id^="pool_"] {
span#pool_hashrate,
.card-body p #pool_total_hashrate,
.card-body p span#pool_hashrate,
.metric-value#pool_total_hashrate,
.metric-value#pool_hashrate,
div[class*="col"] span#pool_total_hashrate,
div[class*="col"] span#pool_hashrate,
.card-body span#pool_total_hashrate.metric-value,
.card-body span#pool_hashrate.metric-value {
color: #ffffff !important; color: #ffffff !important;
text-shadow: var(--white-text-shadow) !important; text-shadow: var(--white-text-shadow) !important;
} }
/* FIX 2: Make .stat-item strong blue in blocks page */ /* Block page elements */
.stat-item strong { .stat-item strong,
color: #0088cc !important; .block-height,
.block-detail-title {
color: var(--primary-color) !important;
text-shadow: var(--blue-text-shadow) !important; text-shadow: var(--blue-text-shadow) !important;
} }
/* FIX 3: Make .filter-button.active box shadow blue in notifications page */ /* Block inputs and button styles */
.filter-button.active {
background-color: var(--primary-color) !important;
color: var(--bg-color) !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.5) !important;
}
/* FIX 4: Update filter-button hover effect in notifications page to match DeepSea theme */
.filter-button:hover {
background-color: rgba(0, 136, 204, 0.2) !important; /* DeepSea blue with transparency */
box-shadow: 0 0 5px rgba(0, 136, 204, 0.3) !important;
}
/* Also update action buttons in notifications page */
.action-button:hover:not(.danger) {
background-color: rgba(0, 136, 204, 0.2) !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.3) !important;
}
/* And load more button */
.load-more-button:hover {
background-color: rgba(0, 136, 204, 0.2) !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.3) !important;
}
/* FIX 5: Update block card hover effect to match DeepSea theme */
.block-card:hover {
box-shadow: 0 0 15px rgba(0, 136, 204, 0.5) !important; /* DeepSea blue glow */
transform: translateY(-2px);
}
/* Update block-height color in blocks page */
.block-height {
color: var(--primary-color) !important;
text-shadow: var(--blue-text-shadow) !important;
}
/* Also update block inputs and button hover styles */
.block-input:focus { .block-input:focus {
outline: none !important; outline: none !important;
box-shadow: 0 0 8px rgba(0, 136, 204, 0.5) !important; box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5) !important;
} }
.block-button:hover { .block-button:hover {
background-color: #0088cc !important; background-color: var(--primary-color) !important;
color: var(--bg-color) !important; color: #000 !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.5) !important; box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
} }
/* Update block modal styling */ /* Notification page elements */
.filter-button.active {
background-color: var(--primary-color) !important;
color: #000 !important;
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
}
.filter-button:hover,
.action-button:hover:not(.danger),
.load-more-button:hover {
background-color: rgba(var(--primary-color-rgb), 0.2) !important;
box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3) !important;
}
/* Block cards and modals */
.block-card:hover {
box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.5) !important;
transform: translateY(-2px);
}
.block-modal-content { .block-modal-content {
box-shadow: 0 0 20px rgba(0, 136, 204, 0.5) !important; box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.5) !important;
} }
.block-modal-header { .block-modal-header {
text-shadow: 0 0 5px #0088cc !important; text-shadow: 0 0 5px var(--primary-color) !important;
} }
.block-modal-close:hover, .block-modal-close:hover,
.block-modal-close:focus { .block-modal-close:focus {
color: #00b3ff !important; color: var(--accent-color) !important;
text-shadow: 0 0 10px rgba(0, 179, 255, 0.8) !important; text-shadow: 0 0 10px rgba(0, 179, 255, 0.8) !important;
} }
.block-detail-title { /* ===== COLOR CATEGORIES ===== */
color: var(--primary-color) !important;
text-shadow: 0 0 5px rgba(0, 136, 204, 0.5) !important;
}
/* ===== COLOR SPECIFIC STYLING ===== */
/* YELLOW - SATOSHI EARNINGS & BTC PRICE */ /* YELLOW - SATOSHI EARNINGS & BTC PRICE */
/* All Satoshi earnings in yellow with consistent text shadow */ [id$="_sats"],
#daily_mined_sats, #btc_price,
#monthly_mined_sats, .metric-value[id$="_sats"],
#estimated_earnings_per_day_sats,
#estimated_earnings_next_block_sats,
#estimated_rewards_in_window_sats,
#btc_price, /* BTC Price in yellow */
.card:contains('SATOSHI EARNINGS') span.metric-value {
color: #ffd700 !important; /* Bitcoin gold/yellow */
text-shadow: var(--yellow-text-shadow) !important;
}
/* More specific selectors for Satoshi values */
span.metric-value[id$="_sats"] {
color: #ffd700 !important;
text-shadow: var(--yellow-text-shadow) !important;
}
/* Retaining original yellow for specific elements */
.est_time_to_payout:not(.green):not(.red) { .est_time_to_payout:not(.green):not(.red) {
color: #ffd700 !important; color: #ffd700 !important;
text-shadow: var(--yellow-text-shadow) !important;
} }
/* GREEN - POSITIVE USD VALUES */ /* GREEN - POSITIVE USD VALUES */
/* USD earnings that are positive should be green */
.metric-value.green, .metric-value.green,
span.green, span.green,
#daily_revenue:not([style*="color: #ff"]), #daily_revenue:not([style*="color: #ff"]),
#monthly_profit_usd:not([style*="color: #ff"]), #monthly_profit_usd:not([style*="color: #ff"]),
#daily_profit_usd:not([style*="color: #ff"]) { #daily_profit_usd:not([style*="color: #ff"]),
color: #32CD32 !important; /* Lime green */ .status-green,
text-shadow: var(--green-text-shadow) !important; #pool_luck.very-lucky,
} #pool_luck.lucky {
/* Status indicators remain green */
.status-green {
color: #32CD32 !important; color: #32CD32 !important;
text-shadow: var(--green-text-shadow) !important; text-shadow: var(--green-text-shadow) !important;
} }
.online-dot { .online-dot {
background: #32CD32 !important; background: #32CD32 !important;
box-shadow: 0 0 10px #32CD32, 0 0 20px #32CD32 !important; box-shadow: 0 0 10px #32CD32, 0 0 20px #32CD32 !important;
} }
/* RED - NEGATIVE USD VALUES & WARNINGS */ /* Light green for "lucky" status */
/* Red for negative values and warnings */ #pool_luck.lucky {
color: #90EE90 !important;
text-shadow: 0 0 10px rgba(144, 238, 144, 0.8), 0 0 5px rgba(144, 238, 144, 0.5) !important;
}
/* NORMAL LUCK - KHAKI */
#pool_luck.normal-luck {
color: #F0E68C !important;
text-shadow: 0 0 10px rgba(240, 230, 140, 0.8), 0 0 5px rgba(240, 230, 140, 0.5) !important;
}
/* RED - NEGATIVE VALUES & WARNINGS */
.metric-value.red, .metric-value.red,
span.red, span.red,
.status-red, .status-red,
#daily_power_cost { #daily_power_cost,
#pool_luck.unlucky {
color: #ff5555 !important; color: #ff5555 !important;
text-shadow: var(--red-text-shadow) !important; text-shadow: var(--red-text-shadow) !important;
} }
.offline-dot { .offline-dot {
background: #ff5555 !important; background: #ff5555 !important;
box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555 !important; box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555 !important;
} }
/* WHITE - Network stats and worker data */ /* WHITE - NETWORK STATS & WORKER DATA */
#block_number, #block_number,
#difficulty, #difficulty,
#network_hashrate, #network_hashrate,
@ -326,74 +278,36 @@ function applyDeepSeaTheme() {
#workers_hashing, #workers_hashing,
#last_share, #last_share,
#blocks_found, #blocks_found,
#last_block_height { #last_block_height,
color: #ffffff !important;
text-shadow: var(--white-text-shadow) !important;
}
/* CYAN - Time ago in last block */
#last_block_time {
color: #00ffff !important; /* Cyan */
text-shadow: var(--cyan-text-shadow) !important;
}
/* BLUE - Pool statistics - OVERRIDE TO WHITE */
#pool_total_hashrate {
color: #ffffff !important;
text-shadow: var(--white-text-shadow) !important;
}
/* Hashrate values are white */
#hashrate_24hr, #hashrate_24hr,
#hashrate_3hr, #hashrate_3hr,
#hashrate_10min, #hashrate_10min,
#hashrate_60sec { #hashrate_60sec {
color: white !important; color: #ffffff !important;
text-shadow: var(--white-text-shadow) !important; text-shadow: var(--white-text-shadow) !important;
} }
/* Pool luck/efficiency colors - PRESERVE EXISTING */ /* CYAN - TIME AGO IN LAST BLOCK */
#pool_luck.very-lucky { #last_block_time {
color: #32CD32 !important; /* Very lucky - bright green */ color: #00ffff !important;
text-shadow: var(--green-text-shadow) !important; text-shadow: var(--cyan-text-shadow) !important;
} }
#pool_luck.lucky { /* CONGRATULATIONS MESSAGE */
color: #90EE90 !important; /* Lucky - light green */
text-shadow: 0 0 10px rgba(144, 238, 144, 0.8), 0 0 5px rgba(144, 238, 144, 0.5) !important;
}
#pool_luck.normal-luck {
color: #F0E68C !important; /* Normal - khaki */
text-shadow: 0 0 10px rgba(240, 230, 140, 0.8), 0 0 5px rgba(240, 230, 140, 0.5) !important;
}
#pool_luck.unlucky {
color: #ff5555 !important; /* Unlucky - red */
text-shadow: var(--red-text-shadow) !important;
}
/* Congrats message */
#congratsMessage { #congratsMessage {
background: #0088cc !important; background: var(--primary-color) !important;
box-shadow: 0 0 15px rgba(0, 136, 204, 0.7) !important; box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7) !important;
} }
/* Animations */ /* ANIMATIONS */
@keyframes waitingPulse { @keyframes waitingPulse {
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; opacity: 0.8; } 0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 15px var(--primary-color) !important; opacity: 0.8; }
50% { box-shadow: 0 0 20px #0088cc, 0 0 35px #0088cc !important; opacity: 1; } 50% { box-shadow: 0 0 20px var(--primary-color), 0 0 35px var(--primary-color) !important; opacity: 1; }
} }
@keyframes glow { @keyframes glow {
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; } 0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 15px var(--primary-color) !important; }
50% { box-shadow: 0 0 15px #0088cc, 0 0 25px #0088cc !important; } 50% { box-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--primary-color) !important; }
}
/* Final important overrides to ensure theme consistency */
.card-body p strong + span#pool_total_hashrate.metric-value.white {
color: #ffffff !important;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.5) !important;
} }
`; `;
@ -424,16 +338,6 @@ function applyDeepSeaTheme() {
themeToggle.style.color = '#0088cc'; themeToggle.style.color = '#0088cc';
} }
// Add direct style application to pool hashrate elements
setTimeout(() => {
// Direct DOM manipulation as a fallback to ensure the pool hashrate is white
const poolHashrateElements = document.querySelectorAll('#pool_total_hashrate, #pool_hashrate');
poolHashrateElements.forEach(el => {
el.style.setProperty('color', '#ffffff', 'important');
el.style.setProperty('text-shadow', '0 0 10px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.5)', 'important');
});
}, 100);
console.log("DeepSea theme applied with color adjustments"); console.log("DeepSea theme applied with color adjustments");
} finally { } finally {
// Always reset the guard flag when done, even if there's an error // Always reset the guard flag when done, even if there's an error