mirror of
https://github.com/Alexander-D-Karpov/about.git
synced 2026-03-16 22:06:08 +03:00
78 lines
1.9 KiB
CSS
78 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);
|
|
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: transparent;
|
|
border: 1px solid var(--edge-0);
|
|
transition: border-color .15s ease;
|
|
}
|
|
|
|
.visitor-stat:hover {
|
|
border-color: var(--edge-1);
|
|
}
|
|
.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: inset 0 0 0 1px var(--edge-1);
|
|
opacity:0;
|
|
pointer-events:none;
|
|
transition: opacity .15s ease;
|
|
z-index:100;
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]:hover::before{
|
|
opacity:1;
|
|
}
|
|
|
|
.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 .15s ease;
|
|
z-index:100;
|
|
}
|
|
|
|
.visitor-stat[data-tooltip]:hover::after{
|
|
opacity:1;
|
|
} |