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

Implement DeepSea theme with CSS enhancements

Browse Source 
Replaced the `applyDeepSeaTheme` function in `main.js` to apply a cohesive DeepSea theme, including extensive CSS variable definitions for UI elements.

In `theme.js`, updated styles to ensure visibility of pool hashrate text, enhanced button hover effects, and added direct DOM manipulation for consistent styling.

These changes improve the overall visual consistency and user experience of the application.
This commit is contained in:
DJObleezy 2025-04-22 20:10:10 -07:00
parent e87993a252
commit f5e93f436b
2 changed files with 111 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
static/js/main.js
View File

@ -1916,269 +1916,6 @@ function resetDashboardChart() {
}
}
// Replace your entire function with this version
function applyDeepSeaTheme() {
// Check if we're already applying the theme to prevent recursion
if (isApplyingTheme) {
console.log("Theme application already in progress, avoiding recursion");
return;
}
// Set the guard flag
isApplyingTheme = true;
try {
console.log("Applying DeepSea theme...");
// Create or update CSS variables for the DeepSea theme
const styleElement = document.createElement('style');
styleElement.id = 'deepSeaThemeStyles'; // Give it an ID so we can check if it exists
// Enhanced CSS with your requested changes
styleElement.textContent = `
/* Base theme variables */
:root {
--primary-color: #0088cc !important;
--bitcoin-orange: #0088cc !important;
--bitcoin-orange-rgb: 0, 136, 204 !important;
--bg-gradient: linear-gradient(135deg, #0a0a0a, #131b20) !important;
--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 */
--blue-text-shadow: 0 0 10px rgba(0, 136, 204, 0.8), 0 0 5px rgba(0, 136, 204, 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);
--red-text-shadow: 0 0 10px rgba(255, 85, 85, 0.8), 0 0 5px rgba(255, 85, 85, 0.5);
--white-text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 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-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 {
border: 1px solid #0088cc !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.3) !important;
}
/* Navigation and interface elements */
.nav-link {
border: 1px solid #0088cc !important;
color: #0088cc !important;
}
.nav-link:hover, .nav-link.active {
background-color: #0088cc !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.5) !important;
}
#terminal-cursor {
background-color: #0088cc !important;
box-shadow: 0 0 5px rgba(0, 136, 204, 0.8) !important;
}
#lastUpdated {
color: #0088cc !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 {
color: #0088cc !important;
text-shadow: var(--blue-text-shadow) !important;
}
.nav-badge {
background-color: #0088cc !important;
}
/* ===== COLOR SPECIFIC STYLING ===== */
/* YELLOW - SATOSHI EARNINGS & BTC PRICE */
/* All Satoshi earnings in yellow with consistent text shadow */
#daily_mined_sats,
#monthly_mined_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) {
color: #ffd700 !important;
text-shadow: var(--yellow-text-shadow) !important;
}
/* GREEN - POSITIVE USD VALUES */
/* USD earnings that are positive should be green */
.metric-value.green,
span.green,
#daily_revenue:not([style*="color: #ff"]),
#monthly_profit_usd:not([style*="color: #ff"]),
#daily_profit_usd:not([style*="color: #ff"]) {
color: #32CD32 !important; /* Lime green */
text-shadow: var(--green-text-shadow) !important;
}
/* Status indicators remain green */
.status-green {
color: #32CD32 !important;
text-shadow: var(--green-text-shadow) !important;
}
.online-dot {
background: #32CD32 !important;
box-shadow: 0 0 10px #32CD32, 0 0 20px #32CD32 !important;
}
/* RED - NEGATIVE USD VALUES & WARNINGS */
/* Red for negative values and warnings */
.metric-value.red,
span.red,
.status-red,
#daily_power_cost {
color: #ff5555 !important;
text-shadow: var(--red-text-shadow) !important;
}
.offline-dot {
background: #ff5555 !important;
box-shadow: 0 0 10px #ff5555, 0 0 20px #ff5555 !important;
}
/* WHITE - Network stats and worker data */
#block_number,
#difficulty,
#network_hashrate,
#pool_fees_percentage,
#workers_hashing,
#last_share,
#blocks_found,
#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 */
#pool_total_hashrate {
color: #0088cc !important;
text-shadow: var(--blue-text-shadow) !important;
}
/* Hashrate values are white */
#hashrate_24hr,
#hashrate_3hr,
#hashrate_10min,
#hashrate_60sec {
color: white !important;
text-shadow: var(--white-text-shadow) !important;
}
/* Pool luck/efficiency colors - PRESERVE EXISTING */
#pool_luck.very-lucky {
color: #32CD32 !important; /* Very lucky - bright green */
text-shadow: var(--green-text-shadow) !important;
}
#pool_luck.lucky {
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 {
background: #0088cc !important;
box-shadow: 0 0 15px rgba(0, 136, 204, 0.7) !important;
}
/* Animations */
@keyframes waitingPulse {
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; opacity: 0.8; }
50% { box-shadow: 0 0 20px #0088cc, 0 0 35px #0088cc !important; opacity: 1; }
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; }
50% { box-shadow: 0 0 15px #0088cc, 0 0 25px #0088cc !important; }
}
`;
// Check if our style element already exists
const existingStyle = document.getElementById('deepSeaThemeStyles');
if (existingStyle) {
existingStyle.parentNode.removeChild(existingStyle);
}
// Add our new style element to the head
document.head.appendChild(styleElement);
// Update page title
document.title = document.title.replace("BTC-OS", "DeepSea");
document.title = document.title.replace("Bitcoin", "DeepSea");
// Update header text
const headerElement = document.querySelector('h1');
if (headerElement) {
headerElement.innerHTML = headerElement.innerHTML.replace("BTC-OS", "DeepSea");
headerElement.innerHTML = headerElement.innerHTML.replace("BITCOIN", "DEEPSEA");
}
console.log("DeepSea theme applied with color adjustments");
} finally {
// Always reset the guard flag when done, even if there's an error
isApplyingTheme = false;
}
}
// Make the function accessible globally so main.js can check for it
window.applyDeepSeaTheme = applyDeepSeaTheme;
$(document).ready(function () {
// Apply theme based on stored preference - moved to beginning for better initialization
try {

113
static/js/theme.js
View File

@ -163,6 +163,97 @@ function applyDeepSeaTheme() {
box-shadow: 0 0 10px rgba(0, 136, 204, 0.3) !important;
}
/* FIX 1: Make pool hashrate value text white - with more specific selectors */
#pool_hashrate,
#pool_total_hashrate,
span#pool_total_hashrate,
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;
text-shadow: var(--white-text-shadow) !important;
}
/* FIX 2: Make .stat-item strong blue in blocks page */
.stat-item strong {
color: #0088cc !important;
text-shadow: var(--blue-text-shadow) !important;
}
/* FIX 3: Make .filter-button.active box shadow blue in notifications page */
.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 {
outline: none !important;
box-shadow: 0 0 8px rgba(0, 136, 204, 0.5) !important;
}
.block-button:hover {
background-color: #0088cc !important;
color: var(--bg-color) !important;
box-shadow: 0 0 10px rgba(0, 136, 204, 0.5) !important;
}
/* Update block modal styling */
.block-modal-content {
box-shadow: 0 0 20px rgba(0, 136, 204, 0.5) !important;
}
.block-modal-header {
text-shadow: 0 0 5px #0088cc !important;
}
.block-modal-close:hover,
.block-modal-close:focus {
color: #00b3ff !important;
text-shadow: 0 0 10px rgba(0, 179, 255, 0.8) !important;
}
.block-detail-title {
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 */
@ -246,10 +337,10 @@ function applyDeepSeaTheme() {
text-shadow: var(--cyan-text-shadow) !important;
}
/* BLUE - Pool statistics */
/* BLUE - Pool statistics - OVERRIDE TO WHITE */
#pool_total_hashrate {
color: #0088cc !important;
text-shadow: var(--blue-text-shadow) !important;
color: #ffffff !important;
text-shadow: var(--white-text-shadow) !important;
}
/* Hashrate values are white */
@ -298,6 +389,12 @@ function applyDeepSeaTheme() {
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; }
50% { box-shadow: 0 0 15px #0088cc, 0 0 25px #0088cc !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;
}
`;
// Check if our style element already exists
@ -327,6 +424,16 @@ function applyDeepSeaTheme() {
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");
} finally {
// Always reset the guard flag when done, even if there's an error