47
47
}
48
48
}
49
49
50
+ // scroll
51
+
50
52
:root {
51
53
@include scroll .scroll (rgb (185 , 185 , 185 ), rgb (160 , 160 , 160 ));
54
+
52
55
& .dark {
53
56
@include scroll .scroll (rgb (95 , 95 , 95 ), rgb (120 , 120 , 120 ));
54
57
}
55
58
}
56
59
57
- /* *
60
+ @media not (pointer : coarse) {
61
+ * {
62
+ @include scroll .scroll (rgb (185 , 185 , 185 ), rgb (160 , 160 , 160 ));
63
+ }
64
+
65
+ .dark {
66
+ * {
67
+ @include scroll .scroll (rgb (95 , 95 , 95 ), rgb (120 , 120 , 120 ));
68
+ }
69
+ }
70
+ }
71
+
72
+ /* *
58
73
* Colors
59
74
*
60
75
* Each colors have exact same color scale system with 3 levels of solid
94
109
* in custom container, badges, etc.
95
110
* -------------------------------------------------------------------------- */
96
111
97
- :root {
98
- --vp-c-default-1 : var (--vp-c-gray-1 );
99
- --vp-c-default-2 : var (--vp-c-gray-2 );
100
- --vp-c-default-3 : var (--vp-c-gray-3 );
101
- --vp-c-default-soft : var (--vp-c-gray-soft );
102
-
103
- --vp-c-brand-1 : var (--vp-c-indigo-1 );
104
- --vp-c-brand-2 : var (--vp-c-indigo-2 );
105
- --vp-c-brand-3 : var (--vp-c-indigo-3 );
106
- --vp-c-brand-soft : var (--vp-c-indigo-soft );
107
-
108
- --vp-c-tip-1 : var (--vp-c-brand-1 );
109
- --vp-c-tip-2 : var (--vp-c-brand-2 );
110
- --vp-c-tip-3 : var (--vp-c-brand-3 );
111
- --vp-c-tip-soft : var (--vp-c-brand-soft );
112
-
113
- --vp-c-warning-1 : var (--vp-c-yellow-1 );
114
- --vp-c-warning-2 : var (--vp-c-yellow-2 );
115
- --vp-c-warning-3 : var (--vp-c-yellow-3 );
116
- --vp-c-warning-soft : var (--vp-c-yellow-soft );
117
-
118
- --vp-c-danger-1 : var (--vp-c-red-1 );
119
- --vp-c-danger-2 : var (--vp-c-red-2 );
120
- --vp-c-danger-3 : var (--vp-c-red-3 );
121
- --vp-c-danger-soft : var (--vp-c-red-soft );
122
- }
112
+ :root {
113
+ --vp-c-default-1 : var (--vp-c-gray-1 );
114
+ --vp-c-default-2 : var (--vp-c-gray-2 );
115
+ --vp-c-default-3 : var (--vp-c-gray-3 );
116
+ --vp-c-default-soft : var (--vp-c-gray-soft );
117
+
118
+ --vp-c-brand-1 : var (--vp-c-indigo-1 );
119
+ --vp-c-brand-2 : var (--vp-c-indigo-2 );
120
+ --vp-c-brand-3 : var (--vp-c-indigo-3 );
121
+ --vp-c-brand-soft : var (--vp-c-indigo-soft );
122
+
123
+ --vp-c-tip-1 : var (--vp-c-brand-1 );
124
+ --vp-c-tip-2 : var (--vp-c-brand-2 );
125
+ --vp-c-tip-3 : var (--vp-c-brand-3 );
126
+ --vp-c-tip-soft : var (--vp-c-brand-soft );
127
+
128
+ --vp-c-warning-1 : var (--vp-c-yellow-1 );
129
+ --vp-c-warning-2 : var (--vp-c-yellow-2 );
130
+ --vp-c-warning-3 : var (--vp-c-yellow-3 );
131
+ --vp-c-warning-soft : var (--vp-c-yellow-soft );
132
+
133
+ --vp-c-danger-1 : var (--vp-c-red-1 );
134
+ --vp-c-danger-2 : var (--vp-c-red-2 );
135
+ --vp-c-danger-3 : var (--vp-c-red-3 );
136
+ --vp-c-danger-soft : var (--vp-c-red-soft );
137
+ }
123
138
124
- /* *
139
+ /* *
125
140
* Component: Button
126
141
* -------------------------------------------------------------------------- */
127
142
128
- :root {
129
- --vp-button-brand-border : transparent ;
130
- --vp-button-brand-text : var (--vp-c-white );
131
- --vp-button-brand-bg : var (--vp-c-brand-3 );
132
- --vp-button-brand-hover-border : transparent ;
133
- --vp-button-brand-hover-text : var (--vp-c-white );
134
- --vp-button-brand-hover-bg : var (--vp-c-brand-2 );
135
- --vp-button-brand-active-border : transparent ;
136
- --vp-button-brand-active-text : var (--vp-c-white );
137
- --vp-button-brand-active-bg : var (--vp-c-brand-1 );
138
- }
143
+ :root {
144
+ --vp-button-brand-border : transparent ;
145
+ --vp-button-brand-text : var (--vp-c-white );
146
+ --vp-button-brand-bg : var (--vp-c-brand-3 );
147
+ --vp-button-brand-hover-border : transparent ;
148
+ --vp-button-brand-hover-text : var (--vp-c-white );
149
+ --vp-button-brand-hover-bg : var (--vp-c-brand-2 );
150
+ --vp-button-brand-active-border : transparent ;
151
+ --vp-button-brand-active-text : var (--vp-c-white );
152
+ --vp-button-brand-active-bg : var (--vp-c-brand-1 );
153
+ }
139
154
140
- /* *
155
+ /* *
141
156
* Component: Home
142
157
* -------------------------------------------------------------------------- */
143
158
144
- :root {
145
- --vp-home-hero-name-color : transparent ;
146
- --vp-home-hero-name-background : -webkit-linear-gradient (120deg ,
147
- #bd34fe 30% ,
148
- #41d1ff );
149
-
150
- --vp-home-hero-image-background-image : linear-gradient (-45deg ,
151
- #bd34fe 50% ,
152
- #47caff 50% );
153
- --vp-home-hero-image-filter : blur (44px );
154
- }
155
-
156
- @media (min-width : 640px ) {
157
159
:root {
158
- --vp-home-hero-image-filter : blur (56px );
160
+ --vp-home-hero-name-color : transparent ;
161
+ --vp-home-hero-name-background : -webkit-linear-gradient (120deg ,
162
+ #bd34fe 30% ,
163
+ #41d1ff );
164
+
165
+ --vp-home-hero-image-background-image : linear-gradient (-45deg ,
166
+ #bd34fe 50% ,
167
+ #47caff 50% );
168
+ --vp-home-hero-image-filter : blur (44px );
159
169
}
160
- }
161
170
162
- @media (min-width : 960px ) {
163
- :root {
164
- --vp-home-hero-image-filter : blur (68px );
171
+ @media (min-width : 640px ) {
172
+ :root {
173
+ --vp-home-hero-image-filter : blur (56px );
174
+ }
165
175
}
166
- }
167
176
168
- /* *
177
+ @media (min-width : 960px ) {
178
+ :root {
179
+ --vp-home-hero-image-filter : blur (68px );
180
+ }
181
+ }
182
+
183
+ /* *
169
184
* Component: Custom Block
170
185
* -------------------------------------------------------------------------- */
171
186
172
- :root {
173
- --vp-custom-block-tip-border : transparent ;
174
- --vp-custom-block-tip-text : var (--vp-c-text-1 );
175
- --vp-custom-block-tip-bg : var (--vp-c-brand-soft );
176
- --vp-custom-block-tip-code-bg : var (--vp-c-brand-soft );
177
- }
187
+ :root {
188
+ --vp-custom-block-tip-border : transparent ;
189
+ --vp-custom-block-tip-text : var (--vp-c-text-1 );
190
+ --vp-custom-block-tip-bg : var (--vp-c-brand-soft );
191
+ --vp-custom-block-tip-code-bg : var (--vp-c-brand-soft );
192
+ }
178
193
179
- /* *
194
+ /* *
180
195
* Component: Algolia
181
196
* -------------------------------------------------------------------------- */
182
197
183
- .DocSearch {
184
- --docsearch-primary-color : var (--vp-c-brand-1 ) !important ;
185
- }
198
+ .DocSearch {
199
+ --docsearch-primary-color : var (--vp-c-brand-1 ) !important ;
200
+ }
0 commit comments