GistPin/analytics/app/globals.css at fix-security-anonymous-posts · ghzhost/GistPin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@import "tailwindcss";

/* ── Custom scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #374151; }

/* ── Sidebar transition ────────────────────────────────────────── */
.sidebar-transition {
  transition: width 220ms ease, transform 220ms ease;
}

/* ── Active nav link indicator ─────────────────────────────────── */
.nav-active {
  position: relative;
}
.nav-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #6366f1;
}

/* ── Mobile: swipeable chart container ─────────────────────────── */
.chart-swipe-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 16px;
  padding-bottom: 8px;
}
.chart-swipe-container > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: min(100%, 480px);
}
@media (min-width: 768px) {
  .chart-swipe-container {
    overflow-x: visible;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .chart-swipe-container > * {
    width: auto;
  }
}

/* ── Touch-friendly tap targets ─────────────────────────────────── */
@media (pointer: coarse) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}