UNPKG

6.92 kBCSSView Raw
1html.ios {
2 --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
3}
4
5html.md {
6 --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
7}
8
9html {
10 --ion-font-family: var(--ion-default-font);
11}
12
13body {
14 background: var(--ion-background-color);
15}
16
17body.backdrop-no-scroll {
18 overflow: hidden;
19}
20
21ion-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
124ion-route,
125ion-route-redirect,
126ion-router,
127ion-select-option,
128ion-nav-controller,
129ion-menu-controller,
130ion-action-sheet-controller,
131ion-alert-controller,
132ion-loading-controller,
133ion-modal-controller,
134ion-picker-controller,
135ion-popover-controller,
136ion-toast-controller,
137.ion-page-hidden,
138[hidden] {
139 /* stylelint-disable-next-line declaration-no-important */
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
151html.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}
176ion-card.ion-color .ion-inherit-color,
177ion-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/*# sourceMappingURL=core.css.map */