mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 03:00:45 +02:00
Remove text-shadow for cleaner UI across stylesheets
This commit removes `text-shadow` properties from various CSS classes in `blocks.css`, `boot.css`, `common.css`, `dashboard.css`, `error.css`, `retro-refresh.css`, and `workers.css`, enhancing readability and reducing visual clutter. In `main.js`, the inline styles for profit value elements are updated to eliminate `text-shadow`, simplifying styling logic. Additionally, `theme.js` sees the removal of `text-shadow` from headers and interface elements, with adjustments made to box-shadow values for improved visual depth. These changes reflect a design decision to create a more modern and streamlined interface.
This commit is contained in:
DJObleezy
parent
50b5241812
commit
6ba7545278
@ -112,7 +112,6 @@
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
}
|
||||
|
||||
.block-time {
|
||||
@ -142,27 +141,22 @@
|
||||
|
||||
.block-info-value.yellow {
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
.block-info-value.green {
|
||||
color: #32CD32;
|
||||
text-shadow: 0 0 6px rgba(50, 205, 50, 0.6);
|
||||
}
|
||||
|
||||
.block-info-value.blue {
|
||||
color: #00dfff;
|
||||
text-shadow: 0 0 6px rgba(0, 223, 255, 0.6);
|
||||
}
|
||||
|
||||
.block-info-value.white {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.block-info-value.red {
|
||||
color: #ff5555;
|
||||
text-shadow: 0 0 6px rgba(255, 85, 85, 0.6);
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
@ -221,7 +215,6 @@
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
text-shadow: 0 0 5px var(--primary-color);
|
||||
animation: flicker 4s infinite;
|
||||
font-family: var(--header-font);
|
||||
display: flex;
|
||||
@ -242,7 +235,6 @@
|
||||
.block-modal-close:hover,
|
||||
.block-modal-close:focus {
|
||||
color: #ffa500;
|
||||
text-shadow: 0 0 10px rgba(255, 165, 0, 0.8);
|
||||
}
|
||||
|
||||
.block-modal-body {
|
||||
@ -265,7 +257,6 @@
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,6 @@ body:not(.deepsea-theme) #prompt-text,
|
||||
body:not(.deepsea-theme) #user-input,
|
||||
body:not(.deepsea-theme) #loading-message {
|
||||
color: #f7931a;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.4);
|
||||
}
|
||||
|
||||
/* DeepSea theme text color */
|
||||
@ -30,7 +29,6 @@ body.deepsea-theme #prompt-text,
|
||||
body.deepsea-theme #user-input,
|
||||
body.deepsea-theme #loading-message {
|
||||
color: #0088cc;
|
||||
text-shadow: 0 0 5px rgba(0, 136, 204, 0.4);
|
||||
}
|
||||
|
||||
/* DeepSea cursor color */
|
||||
@ -55,7 +53,6 @@ body.deepsea-theme #config-form {
|
||||
|
||||
body.deepsea-theme .config-title {
|
||||
color: #0088cc;
|
||||
text-shadow: 0 0 8px rgba(0, 136, 204, 0.8);
|
||||
}
|
||||
|
||||
body.deepsea-theme .form-group label {
|
||||
@ -110,7 +107,6 @@ body.deepsea-theme #skip-button {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #f7931a;
|
||||
text-shadow: 0 0 8px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@ -451,7 +447,6 @@ body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
overflow-x: hidden;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.4);
|
||||
height: calc(100vh - 100px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -522,32 +517,26 @@ body::before {
|
||||
/* Neon-inspired color classes */
|
||||
.green {
|
||||
color: #39ff14 !important;
|
||||
text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #00dfff !important;
|
||||
text-shadow: 0 0 10px #00dfff, 0 0 20px #00dfff;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: #ffd700 !important;
|
||||
text-shadow: 0 0 8px #ffd700, 0 0 16px #ffd700;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #ff2d2d !important;
|
||||
text-shadow: 0 0 10px #ff2d2d, 0 0 20px #ff2d2d;
|
||||
}
|
||||
|
||||
.magenta {
|
||||
color: #ff2d95 !important;
|
||||
text-shadow: 0 0 10px #ff2d95, 0 0 20px #ff2d95;
|
||||
}
|
||||
|
||||
/* Bitcoin Logo styling with extra neon border */
|
||||
@ -621,7 +610,6 @@ body::before {
|
||||
#prompt-text {
|
||||
color: #f7931a;
|
||||
margin-right: 5px;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@ -637,7 +625,6 @@ body::before {
|
||||
height: 33px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -665,7 +652,6 @@ body::before {
|
||||
#loading-message {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
#debug-info {
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
padding: 10px 0;
|
||||
color: grey;
|
||||
font-size: 0.9rem;
|
||||
text-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
@ -132,7 +131,6 @@ h1 {
|
||||
color: var(--primary-color);
|
||||
font-family: var(--header-font);
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0 0 10px var(--primary-color);
|
||||
animation: flicker 4s infinite;
|
||||
}
|
||||
|
||||
@ -181,7 +179,6 @@ h1 {
|
||||
color: grey;
|
||||
text-decoration: none;
|
||||
font-size: 0.7rem; /* Decreased font size */
|
||||
text-shadow: 0 0 5px grey;
|
||||
padding: 5px 10px; /* Add padding for a larger clickable area */
|
||||
transition: background-color 0.3s ease; /* Optional: Add hover effect */
|
||||
}
|
||||
@ -238,7 +235,6 @@ h1 {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid var(--primary-color);
|
||||
text-shadow: 0 0 5px var(--primary-color);
|
||||
animation: flicker 4s infinite;
|
||||
font-family: var(--header-font);
|
||||
}
|
||||
@ -260,7 +256,6 @@ h1 {
|
||||
border-radius: 5px;
|
||||
z-index: 9999;
|
||||
font-size: 0.9rem;
|
||||
text-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
|
||||
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@ -340,54 +335,44 @@ h1 {
|
||||
|
||||
.red-glow, .status-red {
|
||||
color: #ff2d2d !important;
|
||||
text-shadow: 0 0 2px #ff2d2d, 0 0 2px #ff2d2d;
|
||||
}
|
||||
|
||||
.yellow-glow {
|
||||
color: #ffd700 !important;
|
||||
text-shadow: 0 0 2px #ffd700, 0 0 2px #ffd700;
|
||||
}
|
||||
|
||||
.blue-glow {
|
||||
color: #00dfff !important;
|
||||
text-shadow: 0 0 2px #00dfff, 0 0 2px #00dfff;
|
||||
}
|
||||
|
||||
.white-glow {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff;
|
||||
}
|
||||
|
||||
/* Basic color classes for backward compatibility */
|
||||
.green {
|
||||
color: #39ff14 !important;
|
||||
text-shadow: 0 0 10px #39ff14, 0 0 2px #39ff14;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #00dfff !important;
|
||||
text-shadow: 0 0 10px #00dfff, 0 0 2px #00dfff;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
color: #ffd700 !important;
|
||||
text-shadow: 0 0 10px #ffd700, 0 0 2px #ffd700 !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 0 10px #ffffff, 0 0 2px #ffffff;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #ff2d2d !important;
|
||||
text-shadow: 0 0 10px #ff2d2d, 0 0 2px #ff2d2d;
|
||||
}
|
||||
|
||||
.magenta {
|
||||
color: #ff2d95 !important;
|
||||
text-shadow: 0 0 10px #ff2d95, 0 0 2px #ff2d95;
|
||||
}
|
||||
|
||||
/* Bitcoin Progress Bar Styles */
|
||||
@ -470,7 +455,6 @@ h1 {
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color);
|
||||
margin-top: 0.3rem;
|
||||
text-shadow: 0 0 5px var(--primary-color);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -113,7 +113,6 @@
|
||||
.metric-value {
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 10px #32cd32;
|
||||
}
|
||||
|
||||
/* Yellow color family (BTC price, sats metrics, time to payout) */
|
||||
@ -125,7 +124,6 @@
|
||||
#estimated_rewards_in_window_sats,
|
||||
#est_time_to_payout {
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Green color family (profits, earnings) */
|
||||
@ -134,13 +132,11 @@
|
||||
#daily_profit_usd,
|
||||
#monthly_profit_usd {
|
||||
color: #32CD32;
|
||||
text-shadow: 0 0 6px rgba(50, 205, 50, 0.6);
|
||||
}
|
||||
|
||||
/* Red color family (costs) */
|
||||
#daily_power_cost {
|
||||
color: #ff5555 !important;
|
||||
text-shadow: 0 0 6px rgba(255, 85, 85, 0.6);
|
||||
}
|
||||
|
||||
/* White metrics (general stats) */
|
||||
@ -154,19 +150,16 @@
|
||||
#last_block_height,
|
||||
#pool_fees_percentage {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* Blue metrics (time data) */
|
||||
#last_block_time {
|
||||
color: #00dfff;
|
||||
text-shadow: 0 0 6px rgba(0, 223, 255, 0.6);
|
||||
}
|
||||
|
||||
.card-body strong {
|
||||
color: var(--primary-color);
|
||||
margin-right: 0.25rem;
|
||||
text-shadow: 0 0 10px var(--primary-color);
|
||||
}
|
||||
|
||||
.card-body p {
|
||||
@ -239,20 +232,16 @@
|
||||
.very-lucky {
|
||||
color: #32CD32 !important;
|
||||
font-weight: bold !important;
|
||||
text-shadow: 0 0 6px rgba(50, 205, 50, 0.6) !important;
|
||||
}
|
||||
|
||||
.lucky {
|
||||
color: #90EE90 !important;
|
||||
text-shadow: 0 0 4px rgba(144, 238, 144, 0.5) !important;
|
||||
}
|
||||
|
||||
.normal-luck {
|
||||
color: #ffd700 !important;
|
||||
text-shadow: 0 0 4px rgba(255, 215, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
.unlucky {
|
||||
color: #ff5555 !important;
|
||||
text-shadow: 0 0 4px rgba(255, 85, 85, 0.5) !important;
|
||||
}
|
||||
|
||||
@ -39,7 +39,6 @@ body {
|
||||
color: var(--text-color);
|
||||
padding-top: 50px;
|
||||
font-family: var(--terminal-font);
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
a.btn-primary {
|
||||
@ -97,7 +96,6 @@ h1 {
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--header-font);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 10px var(--primary-color);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -108,7 +106,6 @@ p {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #ff5555;
|
||||
text-shadow: 0 0 8px rgba(255, 85, 85, 0.6);
|
||||
}
|
||||
|
||||
/* Cursor blink for terminal feel */
|
||||
@ -133,6 +130,5 @@ p {
|
||||
font-family: var(--terminal-font);
|
||||
font-size: 1.2rem;
|
||||
color: #00dfff;
|
||||
text-shadow: 0 0 10px #00dfff, 0 0 20px #00dfff;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -70,7 +70,6 @@ body {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem; /* Match card header font size */
|
||||
border-bottom: none;
|
||||
text-shadow: 0 0 5px var(--primary-color);
|
||||
animation: flicker 4s infinite; /* Add flicker animation from card headers */
|
||||
font-family: var(--header-font); /* Use the same font variable */
|
||||
padding: 0.3rem 0; /* Match card header padding */
|
||||
@ -232,7 +231,6 @@ body {
|
||||
#retro-terminal-bar #progress-text {
|
||||
font-size: 16px;
|
||||
color: var(--terminal-text);
|
||||
text-shadow: 0 0 5px var(--terminal-text);
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@ -242,7 +240,6 @@ body {
|
||||
#retro-terminal-bar #uptimeTimer {
|
||||
font-size: 16px;
|
||||
color: var(--terminal-text);
|
||||
text-shadow: 0 0 5px var(--terminal-text);
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@ -95,7 +95,6 @@
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
text-shadow: 0 0 5px var(--primary-color);
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -157,14 +156,12 @@
|
||||
background-color: rgba(50, 205, 50, 0.2);
|
||||
border: 1px solid #32CD32;
|
||||
color: #32CD32;
|
||||
text-shadow: 0 0 5px rgba(50, 205, 50, 0.8);
|
||||
}
|
||||
|
||||
.status-badge-offline {
|
||||
background-color: rgba(255, 85, 85, 0.2);
|
||||
border: 1px solid #ff5555;
|
||||
color: #ff5555;
|
||||
text-shadow: 0 0 5px rgba(255, 85, 85, 0.8);
|
||||
}
|
||||
|
||||
/* Stats bars */
|
||||
|
||||
@ -459,7 +459,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
color: ${currentThemeColor};
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
text-shadow: 0 0 5px rgba(${rgbValues}, 0.8);
|
||||
animation: terminal-flicker 4s infinite;
|
||||
}
|
||||
|
||||
@ -523,7 +522,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
.terminal-clock {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px rgba(${rgbValues}, 0.5);
|
||||
}
|
||||
|
||||
/* Uptime Display - Modern Digital Clock Style (Horizontal) */
|
||||
@ -560,7 +558,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 8px rgba(${rgbValues}, 0.8);
|
||||
color: #dee2e6;
|
||||
}
|
||||
|
||||
@ -574,7 +571,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
text-shadow: 0 0 8px rgba(${rgbValues}, 0.8);
|
||||
}
|
||||
|
||||
.uptime-title {
|
||||
@ -582,7 +578,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 5px rgba(${rgbValues}, 0.8);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
@ -671,7 +666,6 @@ const BitcoinMinuteRefresh = (function () {
|
||||
#${DOM_IDS.MINIMIZED_UPTIME} {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px rgba(${rgbValues}, 0.5);
|
||||
margin-left: 45px;
|
||||
color: #dee2e6;
|
||||
}
|
||||
|
||||
@ -1719,7 +1719,7 @@ function updateUI() {
|
||||
dailyProfitElement.textContent = "$" + numberWithCommas(dailyProfitUSD.toFixed(2));
|
||||
if (dailyProfitUSD < 0) {
|
||||
// Use setAttribute to properly set the style with !important
|
||||
dailyProfitElement.setAttribute("style", "color: #ff5555 !important; font-weight: bold !important; text-shadow: 0 0 6px rgba(255, 85, 85, 0.6) !important;");
|
||||
dailyProfitElement.setAttribute("style", "color: #ff5555 !important; font-weight: bold !important;");
|
||||
} else {
|
||||
// Clear the style attribute completely instead of setting it to empty
|
||||
dailyProfitElement.removeAttribute("style");
|
||||
@ -1733,7 +1733,7 @@ function updateUI() {
|
||||
monthlyProfitElement.textContent = "$" + numberWithCommas(monthlyProfitUSD.toFixed(2));
|
||||
if (monthlyProfitUSD < 0) {
|
||||
// Use setAttribute to properly set the style with !important
|
||||
monthlyProfitElement.setAttribute("style", "color: #ff5555 !important; font-weight: bold !important; text-shadow: 0 0 6px rgba(255, 85, 85, 0.6) !important;");
|
||||
monthlyProfitElement.setAttribute("style", "color: #ff5555 !important; font-weight: bold !important;");
|
||||
} else {
|
||||
// Clear the style attribute completely
|
||||
monthlyProfitElement.removeAttribute("style");
|
||||
@ -1754,7 +1754,7 @@ function updateUI() {
|
||||
|
||||
// Check for "next block" in any case format
|
||||
if (payoutText && /next\s+block/i.test(payoutText)) {
|
||||
$("#est_time_to_payout").attr("style", "color: #32CD32 !important; text-shadow: 0 0 10px rgba(50, 205, 50, 0.6) !important; animation: pulse 1s infinite !important; text-transform: uppercase !important;");
|
||||
$("#est_time_to_payout").attr("style", "color: #32CD32 !important; animation: pulse 1s infinite !important; text-transform: uppercase !important;");
|
||||
} else {
|
||||
// Trim any extra whitespace
|
||||
const cleanText = payoutText ? payoutText.trim() : "";
|
||||
@ -1779,14 +1779,14 @@ function updateUI() {
|
||||
|
||||
if (!isNaN(totalDays)) {
|
||||
if (totalDays < 4) {
|
||||
$("#est_time_to_payout").attr("style", "color: #32CD32 !important; text-shadow: 0 0 6px rgba(50, 205, 50, 0.6) !important; animation: none !important;");
|
||||
$("#est_time_to_payout").attr("style", "color: #32CD32 !important; animation: none !important;");
|
||||
} else if (totalDays > 20) {
|
||||
$("#est_time_to_payout").attr("style", "color: #ff5555 !important; text-shadow: 0 0 6px rgba(255, 85, 85, 0.6) !important; animation: none !important;");
|
||||
$("#est_time_to_payout").attr("style", "color: #ff5555 !important; animation: none !important;");
|
||||
} else {
|
||||
$("#est_time_to_payout").attr("style", "color: #ffd700 !important; text-shadow: 0 0 6px rgba(255, 215, 0, 0.6) !important; animation: none !important;");
|
||||
$("#est_time_to_payout").attr("style", "color: #ffd700 !important; animation: none !important;");
|
||||
}
|
||||
} else {
|
||||
$("#est_time_to_payout").attr("style", "color: #ffd700 !important; text-shadow: 0 0 6px rgba(255, 215, 0, 0.6) !important; animation: none !important;");
|
||||
$("#est_time_to_payout").attr("style", "color: #ffd700 !important; animation: none !important;");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -79,26 +79,17 @@ function applyDeepSeaTheme() {
|
||||
--primary-color-rgb: 0, 136, 204;
|
||||
--accent-color: #00b3ff;
|
||||
--bg-gradient: linear-gradient(135deg, #0a0a0a, #131b20);
|
||||
|
||||
/* Standardized text shadow values */
|
||||
--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);
|
||||
--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);
|
||||
}
|
||||
|
||||
/* Card styling */
|
||||
.card {
|
||||
border: 1px solid var(--primary-color) !important;
|
||||
box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3) !important;
|
||||
}
|
||||
|
||||
.card-header, .card > .card-header {
|
||||
background: linear-gradient(to right, var(--primary-color), #006699) !important;
|
||||
border-bottom: 1px solid var(--primary-color) !important;
|
||||
text-shadow: var(--blue-text-shadow) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@ -117,7 +108,7 @@ function applyDeepSeaTheme() {
|
||||
/* Interface elements */
|
||||
#terminal-cursor {
|
||||
background-color: var(--primary-color) !important;
|
||||
box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.8) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.8) !important;
|
||||
}
|
||||
|
||||
#lastUpdated {
|
||||
@ -126,7 +117,6 @@ function applyDeepSeaTheme() {
|
||||
|
||||
h1, .text-center h1 {
|
||||
color: var(--primary-color) !important;
|
||||
text-shadow: var(--blue-text-shadow) !important;
|
||||
}
|
||||
|
||||
.nav-badge {
|
||||
@ -140,7 +130,7 @@ function applyDeepSeaTheme() {
|
||||
|
||||
.bitcoin-progress-container {
|
||||
border: 1px solid var(--primary-color) !important;
|
||||
box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
/* Theme toggle button styling */
|
||||
@ -161,7 +151,6 @@ function applyDeepSeaTheme() {
|
||||
/* Pool hashrate - always white */
|
||||
[id^="pool_"] {
|
||||
color: #ffffff !important;
|
||||
text-shadow: var(--white-text-shadow) !important;
|
||||
}
|
||||
|
||||
/* Block page elements */
|
||||
@ -169,13 +158,12 @@ function applyDeepSeaTheme() {
|
||||
.block-height,
|
||||
.block-detail-title {
|
||||
color: var(--primary-color) !important;
|
||||
text-shadow: var(--blue-text-shadow) !important;
|
||||
}
|
||||
|
||||
/* Block inputs and button styles */
|
||||
.block-input:focus {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.block-button:hover {
|
||||
@ -195,27 +183,22 @@ function applyDeepSeaTheme() {
|
||||
.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;
|
||||
box-shadow: 0 0 10px 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;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.block-modal-content {
|
||||
box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important;
|
||||
}
|
||||
|
||||
.block-modal-header {
|
||||
text-shadow: 0 0 5px var(--primary-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.block-modal-close:hover,
|
||||
.block-modal-close:focus {
|
||||
color: var(--accent-color) !important;
|
||||
text-shadow: 0 0 10px rgba(0, 179, 255, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ===== COLOR CATEGORIES ===== */
|
||||
@ -238,24 +221,21 @@ function applyDeepSeaTheme() {
|
||||
#pool_luck.very-lucky,
|
||||
#pool_luck.lucky {
|
||||
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;
|
||||
box-shadow: 0 0 10px #32CD32, 0 0 10px #32CD32 !important;
|
||||
}
|
||||
|
||||
/* Light green for "lucky" status */
|
||||
#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 */
|
||||
@ -265,12 +245,11 @@ function applyDeepSeaTheme() {
|
||||
#daily_power_cost,
|
||||
#pool_luck.unlucky {
|
||||
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;
|
||||
box-shadow: 0 0 10px #ff5555, 0 0 10px #ff5555 !important;
|
||||
}
|
||||
|
||||
/* WHITE - NETWORK STATS & WORKER DATA */
|
||||
@ -287,30 +266,28 @@ function applyDeepSeaTheme() {
|
||||
#hashrate_10min,
|
||||
#hashrate_60sec {
|
||||
color: #ffffff !important;
|
||||
text-shadow: var(--white-text-shadow) !important;
|
||||
}
|
||||
|
||||
/* CYAN - TIME AGO IN LAST BLOCK */
|
||||
#last_block_time {
|
||||
color: #00ffff !important;
|
||||
text-shadow: var(--cyan-text-shadow) !important;
|
||||
}
|
||||
|
||||
/* CONGRATULATIONS MESSAGE */
|
||||
#congratsMessage {
|
||||
background: var(--primary-color) !important;
|
||||
box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7) !important;
|
||||
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7) !important;
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes waitingPulse {
|
||||
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 var(--primary-color), 0 0 35px var(--primary-color) !important; opacity: 1; }
|
||||
0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 10px var(--primary-color) !important; opacity: 0.8; }
|
||||
50% { box-shadow: 0 0 10px var(--primary-color), 0 0 10px var(--primary-color) !important; opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 15px var(--primary-color) !important; }
|
||||
50% { box-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--primary-color) !important; }
|
||||
0%, 100% { box-shadow: 0 0 10px var(--primary-color), 0 0 10px var(--primary-color) !important; }
|
||||
50% { box-shadow: 0 0 10px var(--primary-color), 0 0 10px var(--primary-color) !important; }
|
||||
}
|
||||
`;
|
||||
|
||||
@ -460,4 +437,4 @@ function loadThemePreference() {
|
||||
document.addEventListener('DOMContentLoaded', loadThemePreference);
|
||||
|
||||
// For pages that load content dynamically, also check when the window loads
|
||||
window.addEventListener('load', loadThemePreference);
|
||||
window.addEventListener('load', loadThemePreference);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user