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.
623 lines
13 KiB
CSS
623 lines
13 KiB
CSS
/* earnings.css - Clean theme-switching friendly version */
|
|
|
|
/* Color variables - Defined at root level for global access */
|
|
:root {
|
|
/* Shared colors for both themes */
|
|
--yellow-color: #ffd700;
|
|
--green-color: #32CD32;
|
|
--light-green-color: #90EE90;
|
|
--red-color: #ff5555;
|
|
--accent-color: #00dfff;
|
|
--accent-color-rgb: 0, 223, 255;
|
|
--bg-color: #000;
|
|
--card-header-bg: #000;
|
|
}
|
|
|
|
/* Theme-specific variables */
|
|
html.bitcoin-theme {
|
|
--primary-color: #f2a900;
|
|
--primary-color-rgb: 242, 169, 0;
|
|
--border-color: #333;
|
|
--primary-gradient-end: #bf7d00; /* Darker orange */
|
|
}
|
|
|
|
html.deepsea-theme {
|
|
--primary-color: #0088cc;
|
|
--primary-color-rgb: 0, 136, 204;
|
|
--border-color: #224;
|
|
--primary-gradient-end: #006699; /* Darker blue */
|
|
}
|
|
|
|
/* ===== LAYOUT COMPONENTS ===== */
|
|
|
|
/* Main section styling */
|
|
.earnings-section {
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* Section headers */
|
|
.earnings-section h2 {
|
|
color: white;
|
|
padding: 0.5rem;
|
|
font-weight: bold;
|
|
font-family: var(--header-font);
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Stats grid for summary cards */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* ===== CARD STYLING ===== */
|
|
|
|
/* Stat card - Blue background with white text */
|
|
.stat-card {
|
|
color: white;
|
|
padding: 1rem;
|
|
border: 1px solid var(--primary-color);
|
|
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.stat-card h2 {
|
|
padding: 0.5rem;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
font-family: var(--header-font);
|
|
}
|
|
|
|
/* Card content elements */
|
|
.stat-value {
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-card .stat-value {
|
|
color: white;
|
|
}
|
|
|
|
.stat-unit {
|
|
font-size: 1rem;
|
|
color: var(--text-color);
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.stat-card .stat-unit,
|
|
.stat-card .stat-secondary {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.stat-secondary {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.stat-time {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--accent-color, #00dfff);
|
|
}
|
|
|
|
.stat-card .stat-time {
|
|
color: var(--accent-color, #a0ffff);
|
|
}
|
|
|
|
/* ===== TABLE STYLING ===== */
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
margin: 1rem 0;
|
|
background-color: var(--bg-color);
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--primary-color);
|
|
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.2);
|
|
position: relative;
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
|
|
}
|
|
|
|
/* Scanline effect for tables */
|
|
.table-container::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;
|
|
}
|
|
|
|
.earnings-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.earnings-table th,
|
|
.earnings-table td {
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.earnings-table th {
|
|
background-color: var(--card-header-bg);
|
|
color: var(--primary-color);
|
|
font-family: var(--header-font);
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Empty state message */
|
|
.earnings-table tr td[colspan] {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--text-color);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===== SPECIFIC DATA COLORS ===== */
|
|
|
|
/* Yellow color - BTC/sats values */
|
|
#unpaid-sats,
|
|
#total-paid-sats,
|
|
.earnings-table td:nth-child(4),
|
|
#unpaid-btc,
|
|
#total-paid-btc,
|
|
.earnings-table td:nth-child(3) {
|
|
color: var(--yellow-color);
|
|
}
|
|
|
|
/* Green color - Earnings/profits */
|
|
#total-paid-usd,
|
|
#total-paid-fiat,
|
|
.earnings-table td:nth-child(5) {
|
|
color: var(--green-color);
|
|
}
|
|
|
|
/* Red color - Fees/costs */
|
|
.earnings-fee,
|
|
.earnings-cost {
|
|
color: var(--red-color) !important;
|
|
}
|
|
|
|
/* Blue color - Dates */
|
|
.earnings-table td:nth-child(1) {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* ===== MISC ELEMENTS ===== */
|
|
|
|
/* Transaction links */
|
|
.tx-link {
|
|
color: var(--accent-color);
|
|
text-decoration: none;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.tx-link:hover {
|
|
text-decoration: underline;
|
|
text-shadow: 0 0 5px rgba(var(--accent-color-rgb), 0.7);
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-label {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-confirmed {
|
|
background-color: rgba(75, 181, 67, 0.15);
|
|
color: var(--green-color);
|
|
}
|
|
|
|
.status-pending {
|
|
background-color: rgba(247, 147, 26, 0.15);
|
|
color: var(--yellow-color);
|
|
}
|
|
|
|
.status-processing {
|
|
background-color: rgba(52, 152, 219, 0.15);
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* User settings info */
|
|
.settings-info {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 0.9em;
|
|
color: #888;
|
|
}
|
|
|
|
.setting-item {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.setting-item strong {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* Currency symbol */
|
|
.currency-symbol {
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
/* ===== SPECIFIC ELEMENT STYLING ===== */
|
|
|
|
/* Payment count */
|
|
#payment-count {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Latest payment timestamp */
|
|
#latest-payment {
|
|
color: var(--accent-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Pool luck indicators */
|
|
.very-lucky {
|
|
color: var(--green-color) !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.lucky {
|
|
color: var(--light-green-color) !important;
|
|
}
|
|
|
|
.normal-luck {
|
|
color: var(--yellow-color) !important;
|
|
}
|
|
|
|
.unlucky {
|
|
color: var(--red-color) !important;
|
|
}
|
|
|
|
/* ===== ANIMATIONS ===== */
|
|
|
|
/* Bounce animations */
|
|
@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;
|
|
}
|
|
|
|
/* Pulse animation for new payments */
|
|
@keyframes pulse-highlight {
|
|
0% {
|
|
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
|
|
}
|
|
|
|
50% {
|
|
background-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
|
|
}
|
|
|
|
100% {
|
|
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
|
|
}
|
|
}
|
|
|
|
.new-payment {
|
|
animation: pulse-highlight 2s infinite;
|
|
}
|
|
|
|
/* ===== FUTURE CHART STYLING ===== */
|
|
|
|
.chart-container {
|
|
background-color: var(--bg-color);
|
|
padding: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
height: 230px;
|
|
border: 1px solid var(--primary-color);
|
|
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.chart-container::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;
|
|
}
|
|
|
|
/* ===== UTILITY CLASSES ===== */
|
|
|
|
.arrow {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Metric value styling */
|
|
.metric-value {
|
|
color: var(--text-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Card body general styling */
|
|
.card-body strong {
|
|
color: var(--primary-color);
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.card-body p {
|
|
margin: 0.25rem 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* ===== RESPONSIVE STYLING ===== */
|
|
|
|
/* Tablets and smaller desktops */
|
|
@media (max-width: 768px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.earnings-table th,
|
|
.earnings-table td {
|
|
padding: 0.5rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 0.7rem;
|
|
padding: 0.15rem 0.3rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.tx-link {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.settings-info {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.setting-item {
|
|
margin-left: 0;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
/* Mobile phones */
|
|
@media (max-width: 480px) {
|
|
/* Card-like table layout for small screens */
|
|
.earnings-table thead {
|
|
display: none;
|
|
}
|
|
|
|
.earnings-table,
|
|
.earnings-table tbody,
|
|
.earnings-table tr {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.earnings-table tr {
|
|
margin-bottom: 15px;
|
|
border: 1px solid var(--border-color);
|
|
padding: 8px;
|
|
}
|
|
|
|
.earnings-table td {
|
|
display: flex;
|
|
padding: 6px 3px;
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.earnings-table td:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Responsive labels for table cells */
|
|
.earnings-table td::before {
|
|
content: attr(data-label);
|
|
font-weight: bold;
|
|
width: 40%;
|
|
color: var(--primary-color);
|
|
margin-right: 5%;
|
|
}
|
|
|
|
/* Table-specific cell labels */
|
|
#payment-history-table td:nth-child(1)::before {
|
|
content: "Date: ";
|
|
}
|
|
|
|
#payment-history-table td:nth-child(2)::before {
|
|
content: "BTC: ";
|
|
}
|
|
|
|
#payment-history-table td:nth-child(3)::before {
|
|
content: "Sats: ";
|
|
}
|
|
|
|
#payment-history-table td:nth-child(4)::before {
|
|
content: "TX: ";
|
|
}
|
|
|
|
#payment-history-table td:nth-child(5)::before {
|
|
content: "Status: ";
|
|
}
|
|
|
|
#monthly-summary-table td:nth-child(1)::before {
|
|
content: "Month: ";
|
|
}
|
|
|
|
#monthly-summary-table td:nth-child(2)::before {
|
|
content: "Payments: ";
|
|
}
|
|
|
|
#monthly-summary-table td:nth-child(3)::before {
|
|
content: "BTC: ";
|
|
}
|
|
|
|
#monthly-summary-table td:nth-child(4)::before {
|
|
content: "Sats: ";
|
|
}
|
|
|
|
#monthly-summary-table td:nth-child(5)::before {
|
|
content: "Fiat: ";
|
|
}
|
|
|
|
/* Fix truncated transaction links */
|
|
.tx-link {
|
|
word-break: break-all;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Add scanline effect to the main dashboard container */
|
|
.dashboard-container {
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Scanline effect for the entire dashboard container */
|
|
.dashboard-container::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 2px);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Update stat card with scanline effect */
|
|
.stat-card {
|
|
color: white;
|
|
padding: 1rem;
|
|
border: 1px solid var(--primary-color);
|
|
box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
|
|
position: relative;
|
|
background-color: var(--bg-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Add scanline effect to stat cards */
|
|
.stat-card::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;
|
|
}
|
|
|
|
/* Ensure h2 headers in stat cards show above scanlines */
|
|
.stat-card h2 {
|
|
padding: 0.5rem;
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
margin: -1rem -1rem 0.5rem -1rem;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-family: var(--header-font);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Ensure content in stat cards shows above scanlines */
|
|
.stat-card .stat-value,
|
|
.stat-card .stat-secondary,
|
|
.stat-card .stat-time,
|
|
.stat-card .stat-unit {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Add scanline overlay to section headers */
|
|
.earnings-section h2 {
|
|
position: relative;
|
|
}
|
|
|
|
.earnings-section h2::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 2px);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|