mirror of
https://github.com/Alexander-D-Karpov/about.git
synced 2026-03-16 22:06:08 +03:00
56 lines
1.9 KiB
CSS
56 lines
1.9 KiB
CSS
.visitors-section{background:linear-gradient(135deg, var(--paper) 0%, var(--bg-2) 100%);border-radius:var(--radius);padding:16px;box-shadow:inset 0 0 0 1px var(--edge-0), var(--shadow);overflow:hidden}
|
|
.visitors-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:16px;margin-top:8px}
|
|
.visitor-stat{text-align:center;padding:12px 8px;border-radius:10px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--edge-0);transition:transform .15s ease, background .15s ease}
|
|
.visitor-stat:hover{background:rgba(255,255,255,.04);transform:translateY(-1px)}
|
|
.visitor-number{font-size:20px;font-weight:800;color:var(--accent);line-height:1}
|
|
.visitor-label{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.5px}
|
|
.visitor-uptime{font-size:14px;font-weight:700;color:var(--ink-2)}
|
|
|
|
.visitor-stat[data-tooltip]{
|
|
cursor:help;
|
|
position:relative;
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]::before{
|
|
content:attr(data-tooltip);
|
|
position:absolute;
|
|
bottom:calc(100% + 8px);
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
background:var(--paper);
|
|
color:var(--ink);
|
|
padding:8px 12px;
|
|
border-radius:8px;
|
|
font-size:12px;
|
|
font-weight:600;
|
|
font-family:var(--mono);
|
|
white-space:nowrap;
|
|
box-shadow:var(--shadow), inset 0 0 0 1px var(--edge-1);
|
|
opacity:0;
|
|
pointer-events:none;
|
|
transition:opacity .2s ease, transform .2s ease;
|
|
z-index:100;
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]:hover::before{
|
|
opacity:1;
|
|
transform:translateX(-50%) translateY(-2px);
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]::after{
|
|
content:'';
|
|
position:absolute;
|
|
bottom:calc(100% + 2px);
|
|
left:50%;
|
|
transform:translateX(-50%);
|
|
border:6px solid transparent;
|
|
border-top-color:var(--paper);
|
|
opacity:0;
|
|
pointer-events:none;
|
|
transition:opacity .2s ease;
|
|
z-index:100;
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]:hover::after{
|
|
opacity:1;
|
|
} |