mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
Implement DeepSea theme with CSS enhancements
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
parent
e87993a252
commit
f5e93f436b
@ -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 () {
|
$(document).ready(function () {
|
||||||
// Apply theme based on stored preference - moved to beginning for better initialization
|
// Apply theme based on stored preference - moved to beginning for better initialization
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -163,6 +163,97 @@ function applyDeepSeaTheme() {
|
|||||||
box-shadow: 0 0 10px rgba(0, 136, 204, 0.3) !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 */
|
||||||
|
#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 ===== */
|
/* ===== COLOR SPECIFIC STYLING ===== */
|
||||||
|
|
||||||
/* YELLOW - SATOSHI EARNINGS & BTC PRICE */
|
/* YELLOW - SATOSHI EARNINGS & BTC PRICE */
|
||||||
@ -246,10 +337,10 @@ function applyDeepSeaTheme() {
|
|||||||
text-shadow: var(--cyan-text-shadow) !important;
|
text-shadow: var(--cyan-text-shadow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BLUE - Pool statistics */
|
/* BLUE - Pool statistics - OVERRIDE TO WHITE */
|
||||||
#pool_total_hashrate {
|
#pool_total_hashrate {
|
||||||
color: #0088cc !important;
|
color: #ffffff !important;
|
||||||
text-shadow: var(--blue-text-shadow) !important;
|
text-shadow: var(--white-text-shadow) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hashrate values are white */
|
/* Hashrate values are white */
|
||||||
@ -298,6 +389,12 @@ function applyDeepSeaTheme() {
|
|||||||
0%, 100% { box-shadow: 0 0 10px #0088cc, 0 0 15px #0088cc !important; }
|
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; }
|
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
|
// Check if our style element already exists
|
||||||
@ -327,6 +424,16 @@ 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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user