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 | ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-child {
|
22 | padding-top: 0px;
|
23 | }
|
24 |
|
25 | .ion-color-primary {
|
26 | --ion-color-base: var(--ion-color-primary, #3880ff) !important;
|
27 | --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
|
28 | --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
|
29 | --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
|
30 | --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
|
31 | --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
|
32 | }
|
33 |
|
34 | .ion-color-secondary {
|
35 | --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
|
36 | --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
|
37 | --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
|
38 | --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
|
39 | --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
|
40 | --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
|
41 | }
|
42 |
|
43 | .ion-color-tertiary {
|
44 | --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
|
45 | --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
|
46 | --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
|
47 | --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
|
48 | --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
|
49 | --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
|
50 | }
|
51 |
|
52 | .ion-color-success {
|
53 | --ion-color-base: var(--ion-color-success, #2dd36f) !important;
|
54 | --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
|
55 | --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
|
56 | --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
|
57 | --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
|
58 | --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
|
59 | }
|
60 |
|
61 | .ion-color-warning {
|
62 | --ion-color-base: var(--ion-color-warning, #ffc409) !important;
|
63 | --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
|
64 | --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
|
65 | --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
|
66 | --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
|
67 | --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
|
68 | }
|
69 |
|
70 | .ion-color-danger {
|
71 | --ion-color-base: var(--ion-color-danger, #eb445a) !important;
|
72 | --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
|
73 | --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
|
74 | --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
|
75 | --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
|
76 | --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
|
77 | }
|
78 |
|
79 | .ion-color-light {
|
80 | --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
|
81 | --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
|
82 | --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
|
83 | --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
|
84 | --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
|
85 | --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
|
86 | }
|
87 |
|
88 | .ion-color-medium {
|
89 | --ion-color-base: var(--ion-color-medium, #92949c) !important;
|
90 | --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
|
91 | --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
|
92 | --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
|
93 | --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
|
94 | --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
|
95 | }
|
96 |
|
97 | .ion-color-dark {
|
98 | --ion-color-base: var(--ion-color-dark, #222428) !important;
|
99 | --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
|
100 | --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
|
101 | --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
|
102 | --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
|
103 | --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
|
104 | }
|
105 |
|
106 | .ion-page {
|
107 | left: 0;
|
108 | right: 0;
|
109 | top: 0;
|
110 | bottom: 0;
|
111 | display: flex;
|
112 | position: absolute;
|
113 | flex-direction: column;
|
114 | justify-content: space-between;
|
115 | contain: layout size style;
|
116 | overflow: hidden;
|
117 | z-index: 0;
|
118 | }
|
119 |
|
120 | .split-pane-visible > .ion-page.split-pane-main {
|
121 | position: relative;
|
122 | }
|
123 |
|
124 | ion-route,
|
125 | ion-route-redirect,
|
126 | ion-router,
|
127 | ion-select-option,
|
128 | ion-nav-controller,
|
129 | ion-menu-controller,
|
130 | ion-action-sheet-controller,
|
131 | ion-alert-controller,
|
132 | ion-loading-controller,
|
133 | ion-modal-controller,
|
134 | ion-picker-controller,
|
135 | ion-popover-controller,
|
136 | ion-toast-controller,
|
137 | .ion-page-hidden,
|
138 | [hidden] {
|
139 |
|
140 | display: none !important;
|
141 | }
|
142 |
|
143 | .ion-page-invisible {
|
144 | opacity: 0;
|
145 | }
|
146 |
|
147 | .can-go-back > ion-header ion-back-button {
|
148 | display: block;
|
149 | }
|
150 |
|
151 | html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
|
152 | --ion-statusbar-padding: 20px;
|
153 | }
|
154 |
|
155 | @supports (padding-top: 20px) {
|
156 | html {
|
157 | --ion-safe-area-top: var(--ion-statusbar-padding);
|
158 | }
|
159 | }
|
160 | @supports (padding-top: constant(safe-area-inset-top)) {
|
161 | html {
|
162 | --ion-safe-area-top: constant(safe-area-inset-top);
|
163 | --ion-safe-area-bottom: constant(safe-area-inset-bottom);
|
164 | --ion-safe-area-left: constant(safe-area-inset-left);
|
165 | --ion-safe-area-right: constant(safe-area-inset-right);
|
166 | }
|
167 | }
|
168 | @supports (padding-top: env(safe-area-inset-top)) {
|
169 | html {
|
170 | --ion-safe-area-top: env(safe-area-inset-top);
|
171 | --ion-safe-area-bottom: env(safe-area-inset-bottom);
|
172 | --ion-safe-area-left: env(safe-area-inset-left);
|
173 | --ion-safe-area-right: env(safe-area-inset-right);
|
174 | }
|
175 | }
|
176 | ion-card.ion-color .ion-inherit-color,
|
177 | ion-card-header.ion-color .ion-inherit-color {
|
178 | color: inherit;
|
179 | }
|
180 |
|
181 | .menu-content {
|
182 | transform: translate3d(0, 0, 0);
|
183 | }
|
184 |
|
185 | .menu-content-open {
|
186 | cursor: pointer;
|
187 | touch-action: manipulation;
|
188 | pointer-events: none;
|
189 | }
|
190 |
|
191 | .ios .menu-content-reveal {
|
192 | box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
|
193 | }
|
194 |
|
195 | [dir=rtl].ios .menu-content-reveal {
|
196 | box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
|
197 | }
|
198 |
|
199 | .md .menu-content-reveal {
|
200 | box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
|
201 | }
|
202 |
|
203 | .md .menu-content-push {
|
204 | box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
|
205 | }
|
206 |
|
207 |
|