|
84 | 84 | @import 'variables'; |
85 | 85 | @import 'helpers'; |
86 | 86 | @import 'elements/screen-reader'; |
87 | | - |
88 | | -:root { |
89 | | - --pkp-spacing: 0.25rem; |
90 | | - --pkp-text-base-size: 1rem; |
91 | | - --pkp-color-primary: #006798; |
92 | | - --pkp-color-hover: #0082bf; |
93 | | - --pkp-color-attention: #d00a0a; |
94 | | - --pkp-color-success: #00b24e; |
95 | | - --pkp-color-negative: #d00a6c; |
96 | | - --pkp-color-transparent: transparent; |
97 | | - --pkp-background-color-default: #eaedee; |
98 | | - --pkp-background-color-secondary: #ffffff; |
99 | | - --pkp-background-color-tertiary: rgba(234, 237, 238, 0.3); |
100 | | - --pkp-background-color-blur: rgba(0, 0, 0, 0.5); |
101 | | - --pkp-background-color-selection-light: #d5e9f2; |
102 | | - --pkp-background-color-selection-dark: #002c40; |
103 | | - --pkp-background-color-disabled: rgba(28, 27, 31, 0.1); |
104 | | - --pkp-text-color-default: #222222; |
105 | | - --pkp-text-color-secondary: #505050; |
106 | | - --pkp-text-color-heading: #01354f; |
107 | | - --pkp-text-color-disabled: #4e4f4f; |
108 | | - --pkp-text-color-on-dark: #ffffff; |
109 | | - --pkp-border-color-dark: #696969; |
110 | | - --pkp-border-color-light: #bbbbbb; |
111 | | - --pkp-border-color-form-fields: #777777; |
112 | | - --pkp-border-color-transparent: transparent; |
113 | | - --pkp-radius: 4px; |
114 | | - --pkp-radius-full: 9999px; |
115 | | - --pkp-shadow: 0 0 4px rgba(0, 0, 0, 0.5); |
116 | | - --pkp-font: |
117 | | - 'Noto Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', |
118 | | - 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
119 | | - /** 10px */ |
120 | | - --pkp-text-xs-normal: calc(0.625 * var(--pkp-text-base-size)); |
121 | | - --pkp-text-xs-normal--line-height: calc(0.75 * var(--pkp-text-base-size)); |
122 | | - --pkp-text-xs-normal--font-weight: 400; |
123 | | - /** 11px */ |
124 | | - --pkp-text-sm-light: calc(0.6875 * var(--pkp-text-base-size)); |
125 | | - --pkp-text-sm-light--line-height: calc(0.875 * var(--pkp-text-base-size)); |
126 | | - --pkp-text-sm-light--font-weight: 300; |
127 | | - --pkp-text-sm-normal: calc(0.6875 * var(--pkp-text-base-size)); |
128 | | - --pkp-text-sm-normal--line-height: calc(0.875 * var(--pkp-text-base-size)); |
129 | | - --pkp-text-sm-normal--font-weight: 400; |
130 | | - /** 12px */ |
131 | | - --pkp-text-base-light: calc(0.75 * var(--pkp-text-base-size)); |
132 | | - --pkp-text-base-light--line-height: calc(1 * var(--pkp-text-base-size)); |
133 | | - --pkp-text-base-light--font-weight: 300; |
134 | | - --pkp-text-base-normal: calc(0.75 * var(--pkp-text-base-size)); |
135 | | - --pkp-text-base-normal--line-height: calc(1 * var(--pkp-text-base-size)); |
136 | | - --pkp-text-base-normal--font-weight: 400; |
137 | | - --pkp-text-base-bold: calc(0.75 * var(--pkp-text-base-size)); |
138 | | - --pkp-text-base-bold--line-height: calc(1 * var(--pkp-text-base-size)); |
139 | | - --pkp-text-base-bold--font-weight: 700; |
140 | | - /** 14px */ |
141 | | - --pkp-text-lg-normal: calc(0.875 * var(--pkp-text-base-size)); |
142 | | - --pkp-text-lg-normal--line-height: calc(1.25 * var(--pkp-text-base-size)); |
143 | | - --pkp-text-lg-normal--font-weight: 400; |
144 | | - --pkp-text-lg-medium: calc(0.875 * var(--pkp-text-base-size)); |
145 | | - --pkp-text-lg-medium--line-height: calc(1.25 * var(--pkp-text-base-size)); |
146 | | - --pkp-text-lg-medium--font-weight: 500; |
147 | | - --pkp-text-lg-semibold: calc(0.875 * var(--pkp-text-base-size)); |
148 | | - --pkp-text-lg-semibold--line-height: calc(1.25 * var(--pkp-text-base-size)); |
149 | | - --pkp-text-lg-semibold--font-weight: 600; |
150 | | - --pkp-text-lg-bold: calc(0.875 * var(--pkp-text-base-size)); |
151 | | - --pkp-text-lg-bold--line-height: calc(1.25 * var(--pkp-text-base-size)); |
152 | | - --pkp-text-lg-bold--font-weight: 700; |
153 | | - /** 16px */ |
154 | | - --pkp-text-xl-bold: calc(1 * var(--pkp-text-base-size)); |
155 | | - --pkp-text-xl-bold--line-height: calc(1.5 * var(--pkp-text-base-size)); |
156 | | - --pkp-text-xl-bold--font-weight: 700; |
157 | | - /** 18px */ |
158 | | - --pkp-text-2xl-bold: calc(1.125 * var(--pkp-text-base-size)); |
159 | | - --pkp-text-2xl-bold--line-height: calc(1.75 * var(--pkp-text-base-size)); |
160 | | - --pkp-text-2xl-bold--font-weight: 700; |
161 | | - /** 20px */ |
162 | | - --pkp-text-3xl-normal: calc(1.25 * var(--pkp-text-base-size)); |
163 | | - --pkp-text-3xl-normal--line-height: calc(1.75 * var(--pkp-text-base-size)); |
164 | | - --pkp-text-3xl-normal--font-weight: 400; |
165 | | - --pkp-text-3xl-medium: calc(1.25 * var(--pkp-text-base-size)); |
166 | | - --pkp-text-3xl-medium--line-height: calc(1.75 * var(--pkp-text-base-size)); |
167 | | - --pkp-text-3xl-medium--font-weight: 500; |
168 | | - --pkp-text-3xl-bold: calc(1.25 * var(--pkp-text-base-size)); |
169 | | - --pkp-text-3xl-bold--line-height: calc(1.75 * var(--pkp-text-base-size)); |
170 | | - --pkp-text-3xl-bold--font-weight: 700; |
171 | | - /** 24px */ |
172 | | - --pkp-text-4xl-bold: calc(1.5 * var(--pkp-text-base-size)); |
173 | | - --pkp-text-4xl-bold--line-height: calc(2 * var(--pkp-text-base-size)); |
174 | | - --pkp-text-4xl-bold--font-weight: 700; |
175 | | - /** 36px */ |
176 | | - --pkp-text-5xl-bold: calc(2.25 * var(--pkp-text-base-size)); |
177 | | - --pkp-text-5xl-bold--line-height: calc(2.5 * var(--pkp-text-base-size)); |
178 | | - --pkp-text-5xl-bold--font-weight: 700; |
179 | | - /* Additional css variables to make easier to use them in plugins*/ |
180 | | - /* 10px */ |
181 | | - --pkp-font-xs-normal: var(--pkp-text-xs-normal--font-weight) |
182 | | - var(--pkp-text-xs-normal) / var(--pkp-text-xs-normal--line-height) |
183 | | - var(--pkp-font); |
184 | | - /* 11px */ |
185 | | - --pkp-font-sm-light: var(--pkp-text-sm-light--font-weight) |
186 | | - var(--pkp-text-sm-light) / var(--pkp-text-sm-light--line-height) |
187 | | - var(--pkp-font); |
188 | | - --pkp-font-sm-normal: var(--pkp-text-sm-normal--font-weight) |
189 | | - var(--pkp-text-sm-normal) / var(--pkp-text-sm-normal--line-height) |
190 | | - var(--pkp-font); |
191 | | - /* 12px */ |
192 | | - --pkp-font-base-light: var(--pkp-text-base-light--font-weight) |
193 | | - var(--pkp-text-base-light) / var(--pkp-text-base-light--line-height) |
194 | | - var(--pkp-font); |
195 | | - --pkp-font-base-normal: var(--pkp-text-base-normal--font-weight) |
196 | | - var(--pkp-text-base-normal) / var(--pkp-text-base-normal--line-height) |
197 | | - var(--pkp-font); |
198 | | - --pkp-font-base-bold: var(--pkp-text-base-bold--font-weight) |
199 | | - var(--pkp-text-base-bold) / var(--pkp-text-base-bold--line-height) |
200 | | - var(--pkp-font); |
201 | | - /* 14px */ |
202 | | - --pkp-font-lg-normal: var(--pkp-text-lg-normal--font-weight) |
203 | | - var(--pkp-text-lg-normal) / var(--pkp-text-lg-normal--line-height) |
204 | | - var(--pkp-font); |
205 | | - --pkp-font-lg-medium: var(--pkp-text-lg-medium--font-weight) |
206 | | - var(--pkp-text-lg-medium) / var(--pkp-text-lg-medium--line-height) |
207 | | - var(--pkp-font); |
208 | | - --pkp-font-lg-semibold: var(--pkp-text-lg-semibold--font-weight) |
209 | | - var(--pkp-text-lg-semibold) / var(--pkp-text-lg-semibold--line-height) |
210 | | - var(--pkp-font); |
211 | | - --pkp-font-lg-bold: var(--pkp-text-lg-bold--font-weight) |
212 | | - var(--pkp-text-lg-bold) / var(--pkp-text-lg-bold--line-height) |
213 | | - var(--pkp-font); |
214 | | - /* 16px */ |
215 | | - --pkp-font-xl-bold: var(--pkp-text-xl-bold--font-weight) |
216 | | - var(--pkp-text-xl-bold) / var(--pkp-text-xl-bold--line-height) |
217 | | - var(--pkp-font); |
218 | | - /* 18px */ |
219 | | - --pkp-font-2xl-bold: var(--pkp-text-2xl-bold--font-weight) |
220 | | - var(--pkp-text-2xl-bold) / var(--pkp-text-2xl-bold--line-height) |
221 | | - var(--pkp-font); |
222 | | - /* 20px */ |
223 | | - --pkp-font-3xl-normal: var(--pkp-text-3xl-normal--font-weight) |
224 | | - var(--pkp-text-3xl-normal) / var(--pkp-text-3xl-normal--line-height) |
225 | | - var(--pkp-font); |
226 | | - --pkp-font-3xl-medium: var(--pkp-text-3xl-medium--font-weight) |
227 | | - var(--pkp-text-3xl-medium) / var(--pkp-text-3xl-medium--line-height) |
228 | | - var(--pkp-font); |
229 | | - --pkp-font-3xl-bold: var(--pkp-text-3xl-bold--font-weight) |
230 | | - var(--pkp-text-3xl-bold) / var(--pkp-text-3xl-bold--line-height) |
231 | | - var(--pkp-font); |
232 | | - /* 24px */ |
233 | | - --pkp-font-4xl-bold: var(--pkp-text-4xl-bold--font-weight) |
234 | | - var(--pkp-text-4xl-bold) / var(--pkp-text-4xl-bold--line-height) |
235 | | - var(--pkp-font); |
236 | | - /* 36px */ |
237 | | - --pkp-font-5xl-bold: var(--pkp-text-5xl-bold--font-weight) |
238 | | - var(--pkp-text-5xl-bold) / var(--pkp-text-5xl-bold--line-height) |
239 | | - var(--pkp-font); |
240 | | - --pkp-spacing-0: 0px; |
241 | | - --pkp-spacing-px: calc(var(--pkp-spacing) / 4); |
242 | | - --pkp-spacing-0-5: calc(0.5 * var(--pkp-spacing)); /* 2px */ |
243 | | - --pkp-spacing-1: calc(1 * var(--pkp-spacing)); /* 4px */ |
244 | | - --pkp-spacing-1-5: calc(1.5 * var(--pkp-spacing)); /* 6px */ |
245 | | - --pkp-spacing-2: calc(2 * var(--pkp-spacing)); /* 8px */ |
246 | | - --pkp-spacing-2-5: calc(2.5 * var(--pkp-spacing)); /* 10px */ |
247 | | - --pkp-spacing-3: calc(3 * var(--pkp-spacing)); /* 12px */ |
248 | | - --pkp-spacing-3-5: calc(3.5 * var(--pkp-spacing)); /* 14px */ |
249 | | - --pkp-spacing-4: calc(4 * var(--pkp-spacing)); /* 16px */ |
250 | | - --pkp-spacing-5: calc(5 * var(--pkp-spacing)); /* 20px */ |
251 | | - --pkp-spacing-6: calc(6 * var(--pkp-spacing)); /* 24px */ |
252 | | - --pkp-spacing-7: calc(7 * var(--pkp-spacing)); /* 28px */ |
253 | | - --pkp-spacing-8: calc(8 * var(--pkp-spacing)); /* 32px */ |
254 | | - --pkp-spacing-9: calc(9 * var(--pkp-spacing)); /* 36px */ |
255 | | - --pkp-spacing-10: calc(10 * var(--pkp-spacing)); /* 40px */ |
256 | | - --pkp-spacing-11: calc(11 * var(--pkp-spacing)); /* 44px */ |
257 | | - --pkp-spacing-12: calc(12 * var(--pkp-spacing)); /* 48px */ |
258 | | - --pkp-spacing-14: calc(14 * var(--pkp-spacing)); /* 56px */ |
259 | | - --pkp-spacing-16: calc(16 * var(--pkp-spacing)); /* 64px */ |
260 | | - --pkp-spacing-20: calc(20 * var(--pkp-spacing)); /* 80px */ |
261 | | - --pkp-spacing-24: calc(24 * var(--pkp-spacing)); /* 96px */ |
262 | | - --pkp-spacing-28: calc(28 * var(--pkp-spacing)); /* 112px */ |
263 | | - --pkp-spacing-32: calc(32 * var(--pkp-spacing)); /* 128px */ |
264 | | - --pkp-spacing-36: calc(36 * var(--pkp-spacing)); /* 144px */ |
265 | | - --pkp-spacing-40: calc(40 * var(--pkp-spacing)); /* 160px */ |
266 | | - --pkp-spacing-44: calc(44 * var(--pkp-spacing)); /* 176px */ |
267 | | - --pkp-spacing-48: calc(48 * var(--pkp-spacing)); /* 192px */ |
268 | | - --pkp-spacing-52: calc(52 * var(--pkp-spacing)); /* 208px */ |
269 | | - --pkp-spacing-56: calc(56 * var(--pkp-spacing)); /* 224px */ |
270 | | - --pkp-spacing-60: calc(60 * var(--pkp-spacing)); /* 240px */ |
271 | | - --pkp-spacing-64: calc(64 * var(--pkp-spacing)); /* 256px */ |
272 | | - --pkp-spacing-72: calc(72 * var(--pkp-spacing)); /* 288px */ |
273 | | - --pkp-spacing-80: calc(80 * var(--pkp-spacing)); /* 320px */ |
274 | | - --pkp-spacing-96: calc(96 * var(--pkp-spacing)); /* 384px */ |
275 | | -} |
0 commit comments