161 lines
2.6 KiB
CSS
161 lines
2.6 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#viewer-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
min-height: 100vh;
|
|
padding: 10px;
|
|
}
|
|
|
|
#viewer-count {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#viewer-count.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Theme: Dark (default) */
|
|
body.theme-dark #viewer-count {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: #fff;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Theme: Light */
|
|
body.theme-light #viewer-count {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
color: #1a1a1a;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Theme: Minimal (no background) */
|
|
body.theme-minimal #viewer-count {
|
|
background: transparent;
|
|
color: #fff;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
padding: 0;
|
|
}
|
|
|
|
body.theme-minimal.light-text #viewer-count {
|
|
color: #1a1a1a;
|
|
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Icon */
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Platform-specific colors */
|
|
body.platform-twitch .icon svg {
|
|
fill: #9146FF;
|
|
}
|
|
|
|
body.platform-youtube .icon svg {
|
|
fill: #FF0000;
|
|
}
|
|
|
|
body.platform-combined .icon svg {
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Count value */
|
|
#count-value {
|
|
font-size: var(--count-font-size, 24px);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 2ch;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Label */
|
|
#count-label {
|
|
font-size: calc(var(--count-font-size, 24px) * 0.6);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
body.hide-label #count-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Font sizes */
|
|
body.font-small {
|
|
--count-font-size: 18px;
|
|
}
|
|
|
|
body.font-medium {
|
|
--count-font-size: 24px;
|
|
}
|
|
|
|
body.font-large {
|
|
--count-font-size: 36px;
|
|
}
|
|
|
|
body.font-xlarge {
|
|
--count-font-size: 48px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
#viewer-count.updating #count-value {
|
|
animation: pulse 0.3s ease;
|
|
}
|
|
|
|
/* Live indicator dot */
|
|
body.show-live-dot #viewer-count::before {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #e91916;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
animation: live-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes live-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* Status message */
|
|
.status {
|
|
color: #aaa;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.status.error {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.status.hidden {
|
|
display: none;
|
|
}
|
|
|