331 lines
6.7 KiB
CSS
331 lines
6.7 KiB
CSS
:root {
|
|
--bg-color: #0d1117;
|
|
--row-bg: #161b22;
|
|
--row-border: #30363d;
|
|
--text-color: #c9d1d9;
|
|
--text-muted: #8b949e;
|
|
--primary: #58a6ff;
|
|
--danger: #f85149;
|
|
--success: #3fb950;
|
|
--warning: #d29922;
|
|
|
|
--bar-bg: #21262d;
|
|
--bar-height: 24px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid var(--row-border);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2em;
|
|
margin: 0 0 5px 0;
|
|
color: #ffffff;
|
|
}
|
|
|
|
header p {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.style-selector label {
|
|
margin-right: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.style-selector select {
|
|
background: var(--row-bg);
|
|
color: var(--text-color);
|
|
border: 1px solid var(--row-border);
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
font-size: 1em;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.provider-row {
|
|
background-color: var(--row-bg);
|
|
border: 1px solid var(--row-border);
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: transform 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.provider-row:hover {
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.provider-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.provider-details {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
padding-top: 10px;
|
|
border-top: 1px dashed var(--row-border);
|
|
}
|
|
|
|
.provider-details:empty {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.provider-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 0 0 200px;
|
|
}
|
|
|
|
.provider-icon {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.provider-name {
|
|
font-weight: 600;
|
|
font-size: 1.1em;
|
|
color: #fff;
|
|
}
|
|
|
|
.progress-container {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-bar {
|
|
background-color: var(--bar-bg);
|
|
height: var(--bar-height);
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
transition: width 0.8s ease-out;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.provider-stats {
|
|
flex: 0 0 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.percentage {
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.raw-value {
|
|
font-size: 0.85em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.charts {
|
|
background-color: var(--row-bg);
|
|
border: 1px solid var(--row-border);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
canvas {
|
|
max-height: 350px;
|
|
}
|
|
|
|
|
|
/* =========================================
|
|
STYLE 1: STANDARD
|
|
========================================= */
|
|
.style-standard .progress-fill {
|
|
background: linear-gradient(90deg, #58a6ff, #bb86fc);
|
|
}
|
|
|
|
/* =========================================
|
|
STYLE 2: PAC-MAN
|
|
========================================= */
|
|
.style-pacman .progress-bar {
|
|
background-image: radial-gradient(#fff 15%, transparent 16%);
|
|
background-size: 20px 20px;
|
|
background-position: 0 center;
|
|
}
|
|
.style-pacman .progress-fill {
|
|
background-color: var(--bg-color);
|
|
border-radius: 0;
|
|
}
|
|
.style-pacman .progress-fill::after {
|
|
content: "ᗧ";
|
|
color: #f1c40f;
|
|
font-size: 24px;
|
|
line-height: var(--bar-height);
|
|
position: absolute;
|
|
right: -10px;
|
|
top: -2px;
|
|
text-shadow: 0 0 5px rgba(241,196,15,0.5);
|
|
animation: chomp 0.5s infinite;
|
|
}
|
|
@keyframes chomp {
|
|
0%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.6); }
|
|
}
|
|
|
|
/* =========================================
|
|
STYLE 3: BATTERY
|
|
========================================= */
|
|
.style-battery .progress-bar {
|
|
border-radius: 4px;
|
|
border: 2px solid #555;
|
|
padding: 2px;
|
|
background: transparent;
|
|
height: calc(var(--bar-height) - 4px);
|
|
overflow: visible;
|
|
}
|
|
.style-battery .progress-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 5px;
|
|
width: 4px;
|
|
height: calc(100% - 10px);
|
|
background: #555;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
.style-battery .progress-fill {
|
|
background-color: #3fb950;
|
|
border-radius: 2px;
|
|
background-image: linear-gradient(90deg,
|
|
transparent 0%, transparent 90%,
|
|
var(--bg-color) 90%, var(--bg-color) 100%
|
|
);
|
|
background-size: 20px 100%;
|
|
}
|
|
|
|
/* =========================================
|
|
STYLE 4: NYAN CAT
|
|
========================================= */
|
|
.style-nyancat .progress-fill {
|
|
background: linear-gradient(to bottom,
|
|
#ff0000 16%, #ff9900 16% 32%, #ffff00 32% 48%,
|
|
#33ff00 48% 64%, #0099ff 64% 80%, #6633ff 80%
|
|
);
|
|
border-radius: 0;
|
|
}
|
|
.style-nyancat .progress-fill::after {
|
|
content: "🐈";
|
|
font-size: 20px;
|
|
position: absolute;
|
|
right: -15px;
|
|
top: -2px;
|
|
}
|
|
|
|
/* =========================================
|
|
STYLE 5: MATRIX
|
|
========================================= */
|
|
.style-matrix .progress-bar {
|
|
background-color: #000;
|
|
border-radius: 0;
|
|
border: 1px solid #0f0;
|
|
}
|
|
.style-matrix .progress-fill {
|
|
background-color: #000;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
}
|
|
.style-matrix .progress-fill::before {
|
|
content: '0101100101011101000101110010101010110010101110100010111001010';
|
|
color: #0f0;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
letter-spacing: 2px;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 0;
|
|
text-shadow: 0 0 5px #0f0;
|
|
}
|
|
|
|
/* =========================================
|
|
STYLE 6: LAVA
|
|
========================================= */
|
|
.style-lava .progress-bar {
|
|
background-color: #2b110a;
|
|
border: 2px solid #5a2c1f;
|
|
}
|
|
.style-lava .progress-fill {
|
|
background: linear-gradient(90deg, #ff4e00, #ec9f05, #ff4e00);
|
|
background-size: 200% 100%;
|
|
animation: lavaFlow 2s linear infinite;
|
|
box-shadow: 0 0 10px #ff4e00 inset;
|
|
}
|
|
@keyframes lavaFlow {
|
|
0% { background-position: 100% 0; }
|
|
100% { background-position: 0 0; }
|
|
}
|
|
|
|
/* Colors for percentages based on status */
|
|
.status-good { color: var(--success); }
|
|
.status-warn { color: var(--warning); }
|
|
.status-danger { color: var(--danger); }
|
|
|
|
.logo-title-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.main-logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 8px;
|
|
object-fit: contain;
|
|
}
|
|
|