1 | html.ios {
|
2 | --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
|
3 | }
|
4 |
|
5 | html.md {
|
6 | --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
|
7 | }
|
8 |
|
9 | html {
|
10 | --ion-font-family: var(--ion-default-font);
|
11 | }
|
12 |
|
13 | body {
|
14 | background: var(--ion-background-color);
|
15 | }
|
16 |
|
17 | body.backdrop-no-scroll {
|
18 | overflow: hidden;
|
19 | }
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 | html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
|
29 | html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
|
30 | html.ios ion-modal ion-footer ion-toolbar:first-of-type {
|
31 | padding-top: 6px;
|
32 | }
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 | html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
|
40 | html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
|
41 | padding-bottom: 6px;
|
42 | }
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | html.ios ion-modal ion-toolbar {
|
50 | padding-right: calc(var(--ion-safe-area-right) + 8px);
|
51 | padding-left: calc(var(--ion-safe-area-left) + 8px);
|
52 | }
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 | @media screen and (min-width: 768px) {
|
59 | html.ios ion-modal.modal-card:first-of-type {
|
60 | --backdrop-opacity: 0.18;
|
61 | }
|
62 | }
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {
|
87 | --backdrop-opacity: 0;
|
88 | --box-shadow: none;
|
89 | }
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | html.ios ion-modal.modal-card .ion-page {
|
102 | border-top-left-radius: var(--border-radius);
|
103 | }
|
104 |
|
105 | .ion-color-primary {
|
106 | --ion-color-base: var(--ion-color-primary, #3880ff) !important;
|
107 | --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
|
108 | --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
|
109 | --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
|
110 | --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
|
111 | --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
|
112 | }
|
113 |
|
114 | .ion-color-secondary {
|
115 | --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
|
116 | --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
|
117 | --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
|
118 | --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
|
119 | --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
|
120 | --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
|
121 | }
|
122 |
|
123 | .ion-color-tertiary {
|
124 | --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
|
125 | --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
|
126 | --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
|
127 | --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
|
128 | --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
|
129 | --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
|
130 | }
|
131 |
|
132 | .ion-color-success {
|
133 | --ion-color-base: var(--ion-color-success, #2dd36f) !important;
|
134 | --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
|
135 | --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
|
136 | --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
|
137 | --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
|
138 | --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
|
139 | }
|
140 |
|
141 | .ion-color-warning {
|
142 | --ion-color-base: var(--ion-color-warning, #ffc409) !important;
|
143 | --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
|
144 | --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
|
145 | --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
|
146 | --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
|
147 | --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
|
148 | }
|
149 |
|
150 | .ion-color-danger {
|
151 | --ion-color-base: var(--ion-color-danger, #eb445a) !important;
|
152 | --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
|
153 | --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
|
154 | --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
|
155 | --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
|
156 | --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
|
157 | }
|
158 |
|
159 | .ion-color-light {
|
160 | --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
|
161 | --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
|
162 | --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
|
163 | --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
|
164 | --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
|
165 | --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
|
166 | }
|
167 |
|
168 | .ion-color-medium {
|
169 | --ion-color-base: var(--ion-color-medium, #92949c) !important;
|
170 | --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
|
171 | --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
|
172 | --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
|
173 | --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
|
174 | --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
|
175 | }
|
176 |
|
177 | .ion-color-dark {
|
178 | --ion-color-base: var(--ion-color-dark, #222428) !important;
|
179 | --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
|
180 | --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
|
181 | --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
|
182 | --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
|
183 | --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
|
184 | }
|
185 |
|
186 | .ion-page {
|
187 | left: 0;
|
188 | right: 0;
|
189 | top: 0;
|
190 | bottom: 0;
|
191 | display: flex;
|
192 | position: absolute;
|
193 | flex-direction: column;
|
194 | justify-content: space-between;
|
195 | contain: layout size style;
|
196 | overflow: hidden;
|
197 | z-index: 0;
|
198 | }
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 | ion-modal .ion-page:not(ion-nav .ion-page) {
|
209 | position: relative;
|
210 | contain: layout style;
|
211 | height: 100%;
|
212 | }
|
213 |
|
214 | .split-pane-visible > .ion-page.split-pane-main {
|
215 | position: relative;
|
216 | }
|
217 |
|
218 | ion-route,
|
219 | ion-route-redirect,
|
220 | ion-router,
|
221 | ion-select-option,
|
222 | ion-nav-controller,
|
223 | ion-menu-controller,
|
224 | ion-action-sheet-controller,
|
225 | ion-alert-controller,
|
226 | ion-loading-controller,
|
227 | ion-modal-controller,
|
228 | ion-picker-controller,
|
229 | ion-popover-controller,
|
230 | ion-toast-controller,
|
231 | .ion-page-hidden,
|
232 | [hidden] {
|
233 |
|
234 | display: none !important;
|
235 | }
|
236 |
|
237 | .ion-page-invisible {
|
238 | opacity: 0;
|
239 | }
|
240 |
|
241 | .can-go-back > ion-header ion-back-button {
|
242 | display: block;
|
243 | }
|
244 |
|
245 | html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
|
246 | --ion-statusbar-padding: 20px;
|
247 | }
|
248 |
|
249 | @supports (padding-top: 20px) {
|
250 | html {
|
251 | --ion-safe-area-top: var(--ion-statusbar-padding);
|
252 | }
|
253 | }
|
254 | @supports (padding-top: constant(safe-area-inset-top)) {
|
255 | html {
|
256 | --ion-safe-area-top: constant(safe-area-inset-top);
|
257 | --ion-safe-area-bottom: constant(safe-area-inset-bottom);
|
258 | --ion-safe-area-left: constant(safe-area-inset-left);
|
259 | --ion-safe-area-right: constant(safe-area-inset-right);
|
260 | }
|
261 | }
|
262 | @supports (padding-top: env(safe-area-inset-top)) {
|
263 | html {
|
264 | --ion-safe-area-top: env(safe-area-inset-top);
|
265 | --ion-safe-area-bottom: env(safe-area-inset-bottom);
|
266 | --ion-safe-area-left: env(safe-area-inset-left);
|
267 | --ion-safe-area-right: env(safe-area-inset-right);
|
268 | }
|
269 | }
|
270 | ion-card.ion-color .ion-inherit-color,
|
271 | ion-card-header.ion-color .ion-inherit-color {
|
272 | color: inherit;
|
273 | }
|
274 |
|
275 | .menu-content {
|
276 | transform: translate3d(0, 0, 0);
|
277 | }
|
278 |
|
279 | .menu-content-open {
|
280 | cursor: pointer;
|
281 | touch-action: manipulation;
|
282 | pointer-events: none;
|
283 | }
|
284 |
|
285 | .ios .menu-content-reveal {
|
286 | box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
|
287 | }
|
288 |
|
289 | [dir=rtl].ios .menu-content-reveal {
|
290 | box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
|
291 | }
|
292 |
|
293 | .md .menu-content-reveal {
|
294 | box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
|
295 | }
|
296 |
|
297 | .md .menu-content-push {
|
298 | box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
|
299 | }
|
300 |
|
301 | ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
|
302 | border-top-left-radius: 8px;
|
303 | border-top-right-radius: 8px;
|
304 | }
|
305 |
|
306 | ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
|
307 | border-bottom-left-radius: 8px;
|
308 | border-bottom-right-radius: 8px;
|
309 | }
|
310 |
|
311 | ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
|
312 | --border-width: 0px;
|
313 | }
|
314 |
|
315 | ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
|
316 | transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
|
317 | }
|
318 |
|
319 | @media (prefers-reduced-motion: reduce) {
|
320 | ion-accordion .ion-accordion-toggle-icon {
|
321 |
|
322 | transition: none !important;
|
323 | }
|
324 | }
|
325 |
|
326 |
|
327 |
|
328 |
|
329 |
|
330 |
|
331 | ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
|
332 | ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
|
333 | transform: rotate(180deg);
|
334 | }
|
335 |
|
336 | ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
|
337 | --border-width: 0px;
|
338 | --inner-border-width: 0px;
|
339 | }
|
340 |
|
341 | ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
|
342 | ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
|
343 | margin-top: 0;
|
344 | }
|
345 |
|
346 | ion-input input::-webkit-date-and-time-value {
|
347 | text-align: start;
|
348 | }
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 | .ion-datetime-button-overlay {
|
357 | --width: fit-content;
|
358 | --height: fit-content;
|
359 | }
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 | .ion-datetime-button-overlay ion-datetime.datetime-grid {
|
369 | width: 320px;
|
370 | min-height: 320px;
|
371 | }
|
372 |
|
373 |
|