Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
60 lines (51 loc) · 2.92 KB
/
Copy pathstyle.css
File metadata and controls
60 lines (51 loc) · 2.92 KB
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
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
display: flex; align-items: center; justify-content: center;
min-height: 100vh; background: linear-gradient(135deg, #7f1d1d, #991b1b, #dc2626);
padding: 1rem;
}
.container {
width: 100%; max-width: 420px; text-align: center;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
border-radius: 28px; padding: 2rem; backdrop-filter: blur(20px);
animation: slideUp 0.5s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
h1 { color: #fff; font-size: 1.5rem; margin-bottom: 1.5rem; }
h1 i { margin-right: 0.5rem; }
.mode-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.mode-btn {
padding: 0.5rem 1rem; border: 2px solid rgba(255,255,255,0.15); border-radius: 50px;
background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); font-weight: 600;
font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 0.25s ease;
}
.mode-btn.active { background: #fff; color: #dc2626; border-color: #fff; }
.mode-btn:hover:not(.active) { border-color: rgba(255,255,255,0.4); color: #fff; }
.timer-display { position: relative; width: 260px; height: 260px; margin: 0 auto 1.5rem; }
.progress-ring { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; }
.ring-fill { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.time-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 3.5rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums;
}
.mode-label {
position: absolute; top: 68%; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.6); font-size: 0.85rem; font-weight: 500; white-space: nowrap;
}
.controls { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.5rem; }
.control-btn {
padding: 0.75rem 2rem; border: none; border-radius: 50px; font-weight: 700;
font-size: 1rem; cursor: pointer; font-family: inherit; transition: all 0.25s ease;
display: flex; align-items: center; gap: 0.5rem;
}
.start-btn { background: #fff; color: #dc2626; }
.start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,255,255,0.3); }
.reset-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.reset-btn:hover { background: rgba(255,255,255,0.2); }
.stats { display: flex; gap: 1rem; justify-content: center; }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-value { color: #fff; font-size: 1.5rem; font-weight: 800; }
.stat-label { color: rgba(255,255,255,0.5); font-size: 0.75rem; font-weight: 600; }
@media (max-width: 380px) { .timer-display { width: 220px; height: 220px; } .time-text { font-size: 2.8rem; } }