1@use "@/common/styles/colors" as *
2
3.speedtest
4 margin-bottom: 2rem
5 display: flex
6 padding: 1.5rem 2rem
7 border: 1px solid $light-gray
8 background-color: var(--glass-bg)
9 backdrop-filter: blur(16px)
10 -webkit-backdrop-filter: blur(16px)
11 border-radius: 1rem
12 justify-content: space-between
13 width: 100%
14 flex-wrap: wrap
15 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
16 animation: fadeIn 0.5s ease-out
17 cursor: pointer
18 user-select: none
19 box-sizing: border-box
20 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
21 position: relative
22 overflow: hidden
23
24.speedtest:hover
25 border-color: var(--accent-primary)
26 transform: translateY(-4px)
27 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.1)
28
29.speedtest-hidden
30 visibility: hidden
31 opacity: 0
32 animation: fadeOut 0.3s
33
34.speedtest-row
35 display: flex
36 align-items: center
37
38.date
39 display: flex
40 align-items: center
41
42.date-text
43 margin: 0 0 0 1rem
44 font-size: 24pt
45 font-weight: 500
46 color: $subtext
47
48.speedtest-text
49 margin: 0
50 font-size: 28pt
51 font-weight: 500
52 color: $subtext
53 display: flex
54 align-items: center
55
56.jitter-suffix
57 font-size: 14pt
58 font-weight: 400
59 color: $subtext
60 padding-left: 0.4rem
61 margin-left: 0.4rem
62 border-left: 2px solid $light-gray
63 opacity: 0.7
64 display: flex
65 align-items: center
66 gap: 0.25rem
67
68 .jitter-icon
69 width: 0.9rem
70 height: 0.9rem
71
72@media (max-width: 605px)
73 .speedtest
74 flex-direction: column
75 .date-text
76 font-size: 32pt
77 .speedtest-text
78 font-size: 32pt
79 .jitter-suffix
80 font-size: 16pt