mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
034aec6d12
- Updated `dashboard.css` with new animations for DATUM text, including a rainbow glitch effect and pulse glow. - Added margin-top to `.stats-grid` in `earnings.css` for better layout. - Modified `.search-box` focus styles in `workers.css` to use primary color variable. - Refactored filtering functionality in `workers.js` to simplify logic and improve search capabilities. - Reintroduced user settings info section in `earnings.html`. - Removed 'asic' and 'bitaxe' filter buttons in `workers.html` for a cleaner interface.
518 lines
9.2 KiB
CSS
518 lines
9.2 KiB
CSS
/* Specific styles for the main dashboard */
|
|
|
|
#graphContainer {
|
|
background-color: #000;
|
|
padding: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
height: 230px;
|
|
border: 1px solid var(--primary-color);
|
|
box-shadow: 0 0 10px rgba(247, 147, 26, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
/* Add scanline effect to graph */
|
|
#graphContainer::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1),
|
|
rgba(0, 0, 0, 0.1) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Override for Payout & Misc card */
|
|
#payoutMiscCard {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Row equal height for card alignment */
|
|
.row.equal-height {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.row.equal-height > [class*="col-"] {
|
|
display: flex;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.row.equal-height > [class*="col-"] .card {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Arrow indicator styles */
|
|
.arrow {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Bounce animations for indicators */
|
|
@keyframes bounceUp {
|
|
0% { transform: translateY(0); }
|
|
25% { transform: translateY(-2px); }
|
|
50% { transform: translateY(0); }
|
|
75% { transform: translateY(-2px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes bounceDown {
|
|
0% { transform: translateY(0); }
|
|
25% { transform: translateY(2px); }
|
|
50% { transform: translateY(0); }
|
|
75% { transform: translateY(2px); }
|
|
100% { transform: translateY(0); }
|
|
}
|
|
|
|
.bounce-up {
|
|
animation: bounceUp 1s infinite;
|
|
}
|
|
|
|
.bounce-down {
|
|
animation: bounceDown 1s infinite;
|
|
}
|
|
|
|
.chevron {
|
|
font-size: 0.8rem;
|
|
position: relative;
|
|
}
|
|
|
|
/* Refresh timer container */
|
|
#refreshUptime {
|
|
text-align: center;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
#refreshContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#uptimeTimer strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#uptimeTimer {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Metric styling by category */
|
|
.metric-value {
|
|
color: var(--text-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Yellow color family (BTC price, sats metrics, time to payout) */
|
|
#btc_price,
|
|
#daily_mined_sats,
|
|
#monthly_mined_sats,
|
|
#estimated_earnings_per_day_sats,
|
|
#estimated_earnings_next_block_sats,
|
|
#estimated_rewards_in_window_sats,
|
|
#est_time_to_payout {
|
|
color: #ffd700;
|
|
}
|
|
|
|
/* Green color family (profits, earnings) */
|
|
#unpaid_earnings,
|
|
#daily_revenue,
|
|
#daily_profit_usd,
|
|
#monthly_profit_usd {
|
|
color: #32CD32;
|
|
}
|
|
|
|
/* Red color family (costs) */
|
|
#daily_power_cost {
|
|
color: #ff5555 !important;
|
|
}
|
|
|
|
/* White metrics (general stats) */
|
|
.metric-value.white,
|
|
#block_number,
|
|
#network_hashrate,
|
|
#difficulty,
|
|
#workers_hashing,
|
|
#last_share,
|
|
#blocks_found,
|
|
#last_block_height,
|
|
#pool_fees_percentage {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Blue metrics (time data) */
|
|
#last_block_time {
|
|
color: #00dfff;
|
|
}
|
|
|
|
.card-body strong {
|
|
color: var(--primary-color);
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.card-body p {
|
|
margin: 0.25rem 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Hidden Congrats Message */
|
|
#congratsMessage {
|
|
display: none;
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
background: #f7931a;
|
|
color: #000;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 15px rgba(247, 147, 26, 0.7);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Add these styles to dashboard.css */
|
|
@keyframes pulse-block-marker {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(45deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(45deg) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.chart-container-relative {
|
|
position: relative;
|
|
}
|
|
|
|
/* Styling for optimal fee indicator */
|
|
.fee-star {
|
|
color: gold;
|
|
margin-left: 4px;
|
|
font-size: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Rainbow Glitch animation for DATUM text */
|
|
@keyframes rainbow-shift {
|
|
0% {
|
|
color: #ff2a6d;
|
|
text-shadow: 2px 0 #05d9e8, -2px 0 #ff2a6d, 0 0 10px #ff2a6d;
|
|
}
|
|
|
|
10% {
|
|
color: #ff2a6d;
|
|
text-shadow: 2px 0 #05d9e8, -2px 0 #ff2a6d, 0 0 10px #ff2a6d;
|
|
}
|
|
|
|
20% {
|
|
color: #ff7f00;
|
|
text-shadow: -2px 0 #05d9e8, 2px 0 #ff7f00, 0 0 10px #ff7f00;
|
|
}
|
|
|
|
30% {
|
|
color: #d8ff00;
|
|
text-shadow: 2px 0 #05d9e8, -2px 0 #d8ff00, 0 0 10px #d8ff00;
|
|
}
|
|
|
|
40% {
|
|
color: #00ff80;
|
|
text-shadow: -2px 0 #ff2a6d, 2px 0 #00ff80, 0 0 10px #00ff80;
|
|
}
|
|
|
|
50% {
|
|
color: #05d9e8;
|
|
text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8, 0 0 10px #05d9e8;
|
|
}
|
|
|
|
60% {
|
|
color: #0000ff;
|
|
text-shadow: -2px 0 #ff2a6d, 2px 0 #0000ff, 0 0 10px #0000ff;
|
|
}
|
|
|
|
70% {
|
|
color: #8000ff;
|
|
text-shadow: 2px 0 #05d9e8, -2px 0 #8000ff, 0 0 10px #8000ff;
|
|
}
|
|
|
|
80% {
|
|
color: #ff00ff;
|
|
text-shadow: -2px 0 #05d9e8, 2px 0 #ff00ff, 0 0 10px #ff00ff;
|
|
}
|
|
|
|
90% {
|
|
color: #ff007f;
|
|
text-shadow: 2px 0 #05d9e8, -2px 0 #ff007f, 0 0 10px #ff007f;
|
|
}
|
|
|
|
100% {
|
|
color: #ff2a6d;
|
|
text-shadow: -2px 0 #05d9e8, 2px 0 #ff2a6d, 0 0 10px #ff2a6d;
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-anim {
|
|
0% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
7% {
|
|
transform: skew(-0.5deg, -0.9deg);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
10% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
27% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
30% {
|
|
transform: skew(0.8deg, -0.1deg);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
35% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
52% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
55% {
|
|
transform: skew(-1deg, 0.2deg);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
50% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
72% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
75% {
|
|
transform: skew(0.4deg, 1deg);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
80% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0% {
|
|
filter: brightness(1);
|
|
}
|
|
|
|
50% {
|
|
filter: brightness(1.3);
|
|
}
|
|
|
|
100% {
|
|
filter: brightness(1);
|
|
}
|
|
}
|
|
|
|
.datum-label {
|
|
position: relative;
|
|
color: cyan;
|
|
font-size: 0.95em;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-left: 4px;
|
|
padding: 2px 5px;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 3px;
|
|
letter-spacing: 2px;
|
|
display: inline-block;
|
|
animation: rainbow-shift 8s infinite linear, glitch-anim 3s infinite, pulse-glow 2s infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
/* Create a glitch effect with duplicated text */
|
|
.datum-label::before,
|
|
.datum-label::after {
|
|
content: "DATUM";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
border-radius: 3px;
|
|
padding: 2px 5px;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
.datum-label::before {
|
|
left: -1px;
|
|
animation: glitch-frames 2s infinite linear alternate-reverse;
|
|
text-shadow: -2px 0 #ff2a6d;
|
|
clip: rect(44px, 450px, 56px, 0);
|
|
}
|
|
|
|
.datum-label::after {
|
|
left: 1px;
|
|
animation: glitch-frames 3s infinite linear alternate-reverse;
|
|
text-shadow: 2px 0 #05d9e8;
|
|
clip: rect(24px, 450px, 36px, 0);
|
|
}
|
|
|
|
@keyframes glitch-frames {
|
|
0% {
|
|
clip: rect(19px, 450px, 23px, 0);
|
|
}
|
|
|
|
5% {
|
|
clip: rect(36px, 450px, 16px, 0);
|
|
}
|
|
|
|
10% {
|
|
clip: rect(11px, 450px, 41px, 0);
|
|
}
|
|
|
|
15% {
|
|
clip: rect(22px, 450px, 33px, 0);
|
|
}
|
|
|
|
20% {
|
|
clip: rect(9px, 450px, 47px, 0);
|
|
}
|
|
|
|
25% {
|
|
clip: rect(31px, 450px, 21px, 0);
|
|
}
|
|
|
|
30% {
|
|
clip: rect(44px, 450px, 9px, 0);
|
|
}
|
|
|
|
35% {
|
|
clip: rect(17px, 450px, 38px, 0);
|
|
}
|
|
|
|
40% {
|
|
clip: rect(26px, 450px, 25px, 0);
|
|
}
|
|
|
|
45% {
|
|
clip: rect(12px, 450px, 43px, 0);
|
|
}
|
|
|
|
50% {
|
|
clip: rect(35px, 450px, 18px, 0);
|
|
}
|
|
|
|
55% {
|
|
clip: rect(8px, 450px, 49px, 0);
|
|
}
|
|
|
|
60% {
|
|
clip: rect(29px, 450px, 23px, 0);
|
|
}
|
|
|
|
65% {
|
|
clip: rect(42px, 450px, 11px, 0);
|
|
}
|
|
|
|
70% {
|
|
clip: rect(15px, 450px, 40px, 0);
|
|
}
|
|
|
|
75% {
|
|
clip: rect(24px, 450px, 27px, 0);
|
|
}
|
|
|
|
80% {
|
|
clip: rect(10px, 450px, 45px, 0);
|
|
}
|
|
|
|
85% {
|
|
clip: rect(33px, 450px, 20px, 0);
|
|
}
|
|
|
|
90% {
|
|
clip: rect(46px, 450px, 7px, 0);
|
|
}
|
|
|
|
95% {
|
|
clip: rect(13px, 450px, 42px, 0);
|
|
}
|
|
|
|
100% {
|
|
clip: rect(28px, 450px, 26px, 0);
|
|
}
|
|
}
|
|
|
|
/* Add some hover effects for interactivity */
|
|
.datum-label:hover {
|
|
animation-play-state: paused;
|
|
filter: brightness(1.5);
|
|
cursor: pointer;
|
|
transform: scale(1.1);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
/* Pool luck indicators */
|
|
.very-lucky {
|
|
color: #32CD32 !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.lucky {
|
|
color: #90EE90 !important;
|
|
}
|
|
|
|
.normal-luck {
|
|
color: #ffd700 !important;
|
|
}
|
|
|
|
.unlucky {
|
|
color: #ff5555 !important;
|
|
}
|
|
|
|
/* Ensure the pool fee in SATS is always red regardless of theme */
|
|
#pool_fees_sats {
|
|
color: #ff5555 !important;
|
|
font-weight: bold !important;
|
|
margin-left: 6px;
|
|
} |