1@use "@/common/styles/colors" as *
2
3$purple-primary: #8b5cf6
4$purple-secondary: #7c3aed
5$purple-glow: rgba(139, 92, 246, 0.4)
6
7.analyse-area
8 margin-top: 2rem
9 display: flex
10 padding: 2.5rem 2rem
11 border: 1px solid $light-gray
12 background-color: var(--glass-bg)
13 backdrop-filter: blur(16px)
14 -webkit-backdrop-filter: blur(16px)
15 border-radius: 1rem
16 width: 100%
17 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
18 align-items: center
19 justify-content: center
20 margin-bottom: 2rem
21 box-sizing: border-box
22 user-select: none
23 position: relative
24 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
25
26.pulse
27 border-color: $accent-primary
28 animation: pulse 2s infinite
29
30@keyframes pulse
31 0%
32 box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6)
33 70%
34 box-shadow: 0 0 0 12px rgba(16, 185, 129, 0)
35 100%
36 box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)
37
38.test-running
39 border: 1px solid $light-gray
40 animation: none
41 position: relative
42
43.loading-value
44 display: inline-block
45 animation: value-pulse 1.5s ease-in-out infinite
46
47@keyframes value-pulse
48 0%, 100%
49 opacity: 0.3
50 50%
51 opacity: 0.6
52
53.inner-container
54 margin-left: 2rem
55 margin-right: 2rem
56 transition: margin 0.5s
57 animation: fadeIn 0.5s ease-out
58
59.container-header
60 display: flex
61 align-items: center
62
63.tests-paused
64 border-color: $accent-warning
65
66.container-text
67 margin: 0 0 0 25px
68 color: $white
69 font-weight: 500
70 font-size: 24pt
71 white-space: nowrap
72
73.container-subtext
74 color: $subtext
75 font-size: 15pt
76 margin-left: 10px
77 font-weight: 400
78
79.container-main
80 text-align: center
81 color: $subtext
82
83 h2
84 font-size: 28pt
85 font-weight: 600
86 margin: 1rem
87 display: flex
88 align-items: center
89 justify-content: center
90
91.jitter-suffix
92 font-size: 14pt
93 font-weight: 400
94 color: $subtext
95 cursor: pointer
96 transition: opacity 0.2s ease
97 padding-left: 0.4rem
98 margin-left: 0.4rem
99 border-left: 2px solid $light-gray
100 opacity: 0.7
101 display: flex
102 align-items: center
103 gap: 0.25rem
104
105 &:hover
106 opacity: 1
107
108 .jitter-icon
109 width: 0.9rem
110 height: 0.9rem
111
112@media (max-width: 1351px)
113 .inner-container
114 margin-left: 1rem
115 margin-right: 1rem
116
117@media (max-width: 1200px)
118 .analyse-area
119 flex-wrap: wrap
120 .mobile-break
121 width: 100%
122 .analyse-area
123 justify-content: space-evenly
124
125@media (max-width: 730px)
126 .analyse-area
127 flex-direction: column
128
129@media (max-width: 475px)
130 .analyse-area
131 padding-left: 1rem
132 padding-bottom: 1rem
133 padding-top: 1rem
134 .inner-container
135 margin: 0