@rdlabo/ionic-theme-ios26 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/css/ionic-theme-ios26.css +422 -0
- package/css/ionic-theme-ios26.css.map +1 -0
- package/fesm2022/rdlabo-ionic-theme-ios26.mjs +4 -0
- package/fesm2022/rdlabo-ionic-theme-ios26.mjs.map +1 -0
- package/index.d.ts +3 -0
- package/package.json +22 -0
- package/src/assets/ion-button.scss +77 -0
- package/src/assets/ion-popover.scss +23 -0
- package/src/assets/ion-searchbar.scss +42 -0
- package/src/assets/ion-segment.scss +12 -0
- package/src/assets/ion-tabs.scss +60 -0
- package/src/assets/ios-design-dark.scss +28 -0
- package/src/assets/ios-design.scss +131 -0
- package/src/assets/ios-talk-room.scss +50 -0
- package/src/assets/ios-variables.scss +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# Ionic Theme iOS26
|
|
2
|
+
|
|
3
|
+
A CSS theme library that applies iOS26 design system to Ionic applications.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This library provides CSS files to apply the iOS26 design system used in real projects to Ionic applications. It customizes the appearance and behavior of Ionic components based on the latest iOS26 design guidelines.
|
|
8
|
+
|
|
9
|
+
> **⚠️ Under Development**: This library is currently in the development and consideration phase as an OSS project, based on files copied from real projects. We are working on API stability and documentation improvement before full-scale use.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Setup
|
|
13
|
+
|
|
14
|
+
> **⚠️ Warning**: This library is under development. API changes and breaking changes may occur before full-scale use.
|
|
15
|
+
|
|
16
|
+
### 1. Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @rdlabo/ionic-theme-ios26
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. CSS File Import (Required)
|
|
23
|
+
|
|
24
|
+
Import the theme in your project's main CSS file (e.g., `src/styles.scss`) and set the `--max-safe-area` variable:
|
|
25
|
+
|
|
26
|
+
```scss
|
|
27
|
+
@import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
|
|
28
|
+
|
|
29
|
+
/* Required: Safe area configuration */
|
|
30
|
+
:root {
|
|
31
|
+
--max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> **Important**: The theme will not work correctly without the `--max-safe-area` setting. This configuration is mandatory.
|
|
36
|
+
|
|
37
|
+
### 3. Framework-specific Configuration Examples
|
|
38
|
+
|
|
39
|
+
#### For Angular Projects
|
|
40
|
+
|
|
41
|
+
Add CSS file to `angular.json`:
|
|
42
|
+
|
|
43
|
+
```json
|
|
44
|
+
{
|
|
45
|
+
"styles": [
|
|
46
|
+
"node_modules/@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css"
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
**Required**: Set `--max-safe-area` in `src/styles.scss`:
|
|
52
|
+
|
|
53
|
+
```scss
|
|
54
|
+
:root {
|
|
55
|
+
--max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### For React Projects
|
|
60
|
+
|
|
61
|
+
Import CSS file in `index.js` or `App.js`:
|
|
62
|
+
|
|
63
|
+
```javascript
|
|
64
|
+
import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**Required**: Set `--max-safe-area` in main CSS file:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
:root {
|
|
71
|
+
--max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
#### For Vue.js Projects
|
|
76
|
+
|
|
77
|
+
Import CSS file in `main.js`:
|
|
78
|
+
|
|
79
|
+
```javascript
|
|
80
|
+
import '@rdlabo/ionic-theme-ios26/css/ionic-theme-ios26.css';
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**Required**: Set `--max-safe-area` in main CSS file:
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
:root {
|
|
87
|
+
--max-safe-area: calc(max(10px, var(--ion-safe-area-bottom, 0px)) + var(--admob-safe-area, 0px));
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## Development Status
|
|
93
|
+
|
|
94
|
+
This library is currently in the development and consideration phase. We are working on the following tasks:
|
|
95
|
+
|
|
96
|
+
- [ ] API stabilization
|
|
97
|
+
- [ ] Documentation improvement
|
|
98
|
+
- [ ] Test coverage enhancement
|
|
99
|
+
- [ ] Performance optimization
|
|
100
|
+
- [ ] Community feedback collection
|
|
101
|
+
|
|
102
|
+
## Developer Information
|
|
103
|
+
|
|
104
|
+
### Build
|
|
105
|
+
|
|
106
|
+
```bash
|
|
107
|
+
ng build ionic-theme-ios26
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Test
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
ng test
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## License
|
|
117
|
+
|
|
118
|
+
MIT License
|
|
119
|
+
|
|
120
|
+
## Contributing
|
|
121
|
+
|
|
122
|
+
This project is under development. We welcome feedback and suggestions:
|
|
123
|
+
|
|
124
|
+
- Issue reporting
|
|
125
|
+
- Feature requests
|
|
126
|
+
- Documentation improvements
|
|
127
|
+
- Code review participation
|
|
128
|
+
|
|
129
|
+
## Support
|
|
130
|
+
|
|
131
|
+
- **Under Development**: No formal support is provided
|
|
132
|
+
- **Feedback**: Please report issues on GitHub Issues page
|
|
133
|
+
- **Community**: Participate in developer community discussions
|
|
@@ -0,0 +1,422 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
:root {
|
|
3
|
+
--system-dark-rgb: 0, 0, 0;
|
|
4
|
+
--system-light-rgb: 255, 255, 255;
|
|
5
|
+
--system-tab-active-rgb: 16, 16, 16;
|
|
6
|
+
--system-shadow-rgb: 224, 224, 224;
|
|
7
|
+
--system-background-rgb: 255, 255, 255;
|
|
8
|
+
--system-edge-rgb: 255, 255, 255;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ion-palette-dark {
|
|
12
|
+
--system-dark-rgb: 255, 255, 255;
|
|
13
|
+
--system-light-rgb: 58, 58, 58;
|
|
14
|
+
--system-tab-active-rgb: 255, 255, 255;
|
|
15
|
+
--system-shadow-rgb: translarent;
|
|
16
|
+
--system-background-rgb: 0, 0, 0;
|
|
17
|
+
--system-edge-rgb: 80, 80, 80;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ios ion-popover {
|
|
21
|
+
--backdrop-opacity: 0.04;
|
|
22
|
+
}
|
|
23
|
+
.ios ion-popover:not(.popover-exclude-content)::part(content) {
|
|
24
|
+
background: rgba(var(--system-light-rgb), 0.6);
|
|
25
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
26
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
27
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
28
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
29
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
30
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
31
|
+
transition: box-shadow 0.1s ease;
|
|
32
|
+
border-radius: 24px;
|
|
33
|
+
padding: 0;
|
|
34
|
+
}
|
|
35
|
+
.ios ion-popover ion-list {
|
|
36
|
+
background: transparent;
|
|
37
|
+
}
|
|
38
|
+
.ios ion-popover ion-list ion-item {
|
|
39
|
+
--background: transparent;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ios .toolbar-searchbar::part(container) {
|
|
43
|
+
padding-top: 3px;
|
|
44
|
+
padding-bottom: 3px;
|
|
45
|
+
}
|
|
46
|
+
.ios ion-modal ion-searchbar:not(.area-searchbar) .searchbar-input-container {
|
|
47
|
+
margin: 0 6px;
|
|
48
|
+
}
|
|
49
|
+
.ios ion-searchbar:not(.area-searchbar) {
|
|
50
|
+
min-height: 60px;
|
|
51
|
+
padding: 0;
|
|
52
|
+
}
|
|
53
|
+
.ios ion-searchbar:not(.area-searchbar) ion-icon.searchbar-search-icon {
|
|
54
|
+
inset-inline-start: 12px;
|
|
55
|
+
}
|
|
56
|
+
.ios ion-searchbar:not(.area-searchbar) .searchbar-input-container {
|
|
57
|
+
margin: 0 8px 0 16px;
|
|
58
|
+
align-self: center;
|
|
59
|
+
justify-self: center;
|
|
60
|
+
}
|
|
61
|
+
.ios ion-searchbar:not(.area-searchbar) .searchbar-input-container input.searchbar-input {
|
|
62
|
+
min-height: 44px;
|
|
63
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
64
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
65
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
66
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
67
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
68
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
69
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
70
|
+
transition: box-shadow 0.1s ease;
|
|
71
|
+
backdrop-filter: none;
|
|
72
|
+
border-radius: 20px;
|
|
73
|
+
padding-inline-start: 2.4rem !important;
|
|
74
|
+
}
|
|
75
|
+
.ios ion-searchbar:not(.area-searchbar) .searchbar-input-container .searchbar-clear-button {
|
|
76
|
+
padding-inline-end: 2rem !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.ios app-talk-room .talk-system-message {
|
|
80
|
+
transform: translateY(-80px);
|
|
81
|
+
}
|
|
82
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar {
|
|
83
|
+
--border-width: 0;
|
|
84
|
+
--background: transparent;
|
|
85
|
+
}
|
|
86
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: -56px;
|
|
89
|
+
}
|
|
90
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item {
|
|
91
|
+
padding: 8px 12px;
|
|
92
|
+
--inner-padding-end: 4px;
|
|
93
|
+
}
|
|
94
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar {
|
|
95
|
+
transform: translateX(-10px);
|
|
96
|
+
margin-right: 4px;
|
|
97
|
+
display: flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
}
|
|
101
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar ion-icon {
|
|
102
|
+
font-size: 1.6rem;
|
|
103
|
+
color: var(--ion-color-medium-tint);
|
|
104
|
+
}
|
|
105
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item::part(native) {
|
|
106
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
107
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
108
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
109
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
110
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
111
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
112
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
113
|
+
transition: box-shadow 0.1s ease;
|
|
114
|
+
border-radius: 20px;
|
|
115
|
+
}
|
|
116
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field {
|
|
117
|
+
transition: width 0.5s ease;
|
|
118
|
+
--padding-start: 16px;
|
|
119
|
+
--padding-end: 16px;
|
|
120
|
+
}
|
|
121
|
+
.ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field label.textarea-wrapper {
|
|
122
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
123
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
124
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
125
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
126
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
127
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
128
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
129
|
+
transition: box-shadow 0.1s ease;
|
|
130
|
+
margin: 8px 8px;
|
|
131
|
+
border-radius: 32px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.ios ion-fab.inner-tab-bar {
|
|
135
|
+
right: calc(16px + var(--ion-safe-area-right, 0px));
|
|
136
|
+
bottom: var(--max-safe-area);
|
|
137
|
+
}
|
|
138
|
+
.ios ion-fab.inner-tab-bar ion-fab-button {
|
|
139
|
+
--background-activated: rgba(var(--system-light-rgb), 0.3);
|
|
140
|
+
}
|
|
141
|
+
.ios ion-fab.inner-tab-bar ion-fab-button::part(native) {
|
|
142
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
143
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
144
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
145
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
146
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
147
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
148
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
149
|
+
transition: box-shadow 0.1s ease;
|
|
150
|
+
color: rgb(var(--system-dark-rgb));
|
|
151
|
+
}
|
|
152
|
+
.ios ion-tab-bar {
|
|
153
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
154
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
155
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
156
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
157
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
158
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
159
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
160
|
+
transition: box-shadow 0.1s ease;
|
|
161
|
+
z-index: 2;
|
|
162
|
+
border-radius: 40px;
|
|
163
|
+
width: calc(100% - 56px - 16px - 16px - 4px - 16px);
|
|
164
|
+
max-width: 400px;
|
|
165
|
+
padding: 2px 2px;
|
|
166
|
+
bottom: var(--max-safe-area);
|
|
167
|
+
left: calc(16px + var(--ion-safe-area-left, 0px));
|
|
168
|
+
position: absolute;
|
|
169
|
+
margin: auto;
|
|
170
|
+
transition: transform 100ms ease-out;
|
|
171
|
+
will-change: transform;
|
|
172
|
+
}
|
|
173
|
+
.ios ion-tab-bar:active {
|
|
174
|
+
transform: scale(1.02);
|
|
175
|
+
}
|
|
176
|
+
.ios ion-tab-bar ion-tab-button {
|
|
177
|
+
background: rgba(var(--system-light-rgb), 0);
|
|
178
|
+
height: auto;
|
|
179
|
+
}
|
|
180
|
+
.ios ion-tab-bar ion-tab-button > ion-icon {
|
|
181
|
+
font-size: 30px;
|
|
182
|
+
}
|
|
183
|
+
.ios ion-tab-bar ion-tab-button::part(native) {
|
|
184
|
+
overflow: visible;
|
|
185
|
+
}
|
|
186
|
+
.ios ion-tab-bar ion-tab-button.tab-selected::part(native) {
|
|
187
|
+
backdrop-filter: blur(7px);
|
|
188
|
+
background: rgba(var(--system-tab-active-rgb), 0.1);
|
|
189
|
+
transition: background 0.2s ease;
|
|
190
|
+
border-radius: 32px;
|
|
191
|
+
}
|
|
192
|
+
.ios ion-tab-bar ion-tab-button.tab-selected.ion-activated::part(native) {
|
|
193
|
+
background: rgba(var(--system-shadow-rgb), 0.02);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.ios {
|
|
197
|
+
/**
|
|
198
|
+
* パフォーマンス対策。必ず背景が単色である限りは不要
|
|
199
|
+
*/
|
|
200
|
+
}
|
|
201
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
|
|
202
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native) {
|
|
203
|
+
backdrop-filter: none !important;
|
|
204
|
+
}
|
|
205
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
|
|
206
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
|
|
207
|
+
.ios ion-buttons.liquid-glass-buttons ion-button {
|
|
208
|
+
max-height: inherit;
|
|
209
|
+
margin: 8px;
|
|
210
|
+
font-size: 1.05rem !important;
|
|
211
|
+
transition: transform 100ms ease-out;
|
|
212
|
+
will-change: transform;
|
|
213
|
+
}
|
|
214
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
|
|
215
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native),
|
|
216
|
+
.ios ion-buttons.liquid-glass-buttons ion-button::part(native) {
|
|
217
|
+
background: rgba(var(--system-light-rgb), 0.7);
|
|
218
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
219
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
220
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
221
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
222
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
223
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
224
|
+
transition: box-shadow 0.1s ease;
|
|
225
|
+
border-radius: 25px;
|
|
226
|
+
}
|
|
227
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).ion-activated,
|
|
228
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.ion-activated,
|
|
229
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.ion-activated {
|
|
230
|
+
transform: scale(1.2);
|
|
231
|
+
box-shadow: none;
|
|
232
|
+
}
|
|
233
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline],
|
|
234
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline],
|
|
235
|
+
.ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline] {
|
|
236
|
+
color: rgba(var(--ion-color-primary-rgb), 1);
|
|
237
|
+
transition: transform 100ms ease-out, color 50ms ease;
|
|
238
|
+
}
|
|
239
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native),
|
|
240
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native),
|
|
241
|
+
.ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native) {
|
|
242
|
+
color: rgba(var(--ion-color-primary-rgb), 0.2);
|
|
243
|
+
}
|
|
244
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native)::after,
|
|
245
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native)::after,
|
|
246
|
+
.ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native)::after {
|
|
247
|
+
transform: scale(1.2);
|
|
248
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
249
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
250
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
251
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
252
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
253
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
254
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
255
|
+
transition: box-shadow 0.1s ease;
|
|
256
|
+
box-shadow: none;
|
|
257
|
+
}
|
|
258
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only::part(native), .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only::part(native),
|
|
259
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only::part(native),
|
|
260
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only::part(native),
|
|
261
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only::part(native),
|
|
262
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only::part(native) {
|
|
263
|
+
border-radius: 50%;
|
|
264
|
+
width: 44px;
|
|
265
|
+
height: 44px;
|
|
266
|
+
padding: 2px;
|
|
267
|
+
}
|
|
268
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon, .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon,
|
|
269
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon,
|
|
270
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon,
|
|
271
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon,
|
|
272
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon {
|
|
273
|
+
font-size: 1.4rem !important;
|
|
274
|
+
}
|
|
275
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon[name=close-outline], .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon[name=close-outline],
|
|
276
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon[name=close-outline],
|
|
277
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon[name=close-outline],
|
|
278
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon[name=close-outline],
|
|
279
|
+
.ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon[name=close-outline] {
|
|
280
|
+
font-size: 2rem !important;
|
|
281
|
+
}
|
|
282
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
|
|
283
|
+
.ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
|
|
284
|
+
.ios ion-buttons.liquid-glass-buttons ion-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
|
|
285
|
+
padding: 0 16px;
|
|
286
|
+
min-height: 44px;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment {
|
|
290
|
+
width: calc(100% - 16px);
|
|
291
|
+
border-radius: 16px;
|
|
292
|
+
}
|
|
293
|
+
.ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment ion-segment-button::part(indicator-background) {
|
|
294
|
+
border-radius: 16px;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting),
|
|
298
|
+
.ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting) {
|
|
299
|
+
opacity: 1;
|
|
300
|
+
}
|
|
301
|
+
.ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting)::part(native),
|
|
302
|
+
.ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting)::part(native) {
|
|
303
|
+
opacity: 1;
|
|
304
|
+
}
|
|
305
|
+
.ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated::part(native),
|
|
306
|
+
.ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated::part(native) {
|
|
307
|
+
background: rgba(var(--system-tab-active-rgb), 0.25);
|
|
308
|
+
backdrop-filter: saturate(180%) blur(7px);
|
|
309
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
|
|
310
|
+
border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
|
|
311
|
+
transition: box-shadow 0.1s ease;
|
|
312
|
+
}
|
|
313
|
+
.ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated ion-icon,
|
|
314
|
+
.ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated ion-icon {
|
|
315
|
+
color: rgb(255, 255, 255) !important;
|
|
316
|
+
}
|
|
317
|
+
.ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native),
|
|
318
|
+
.ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native) {
|
|
319
|
+
color: var(--ion-color-primary-contrast) !important;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.ios ion-toast {
|
|
323
|
+
--border-radius: 24px;
|
|
324
|
+
}
|
|
325
|
+
.ios ion-card {
|
|
326
|
+
border-radius: 24px;
|
|
327
|
+
}
|
|
328
|
+
.ios ion-action-sheet {
|
|
329
|
+
--button-color: var(--ion-color-medium);
|
|
330
|
+
}
|
|
331
|
+
.ios .thread-fab ion-fab-button {
|
|
332
|
+
--background-activated: rgba(var(--system-light-rgb), 0.3);
|
|
333
|
+
}
|
|
334
|
+
.ios .thread-fab ion-fab-button::part(native) {
|
|
335
|
+
background: rgba(var(--system-light-rgb), 0.4);
|
|
336
|
+
backdrop-filter: saturate(240%) blur(6px);
|
|
337
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
338
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
339
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
340
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
341
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
342
|
+
transition: box-shadow 0.1s ease;
|
|
343
|
+
color: rgb(var(--system-dark-rgb));
|
|
344
|
+
}
|
|
345
|
+
.ios .thread-fab ion-fab-button ion-icon {
|
|
346
|
+
color: var(--ion-color-medium-shade);
|
|
347
|
+
}
|
|
348
|
+
.ios ion-item.suggest-seeking {
|
|
349
|
+
--padding-start: 16px !important;
|
|
350
|
+
}
|
|
351
|
+
.ios .can-go-back ion-header ion-toolbar:not(.md):first-child,
|
|
352
|
+
.ios .enable-back-button ion-header ion-toolbar:not(.md):first-child {
|
|
353
|
+
--border-width: 0;
|
|
354
|
+
}
|
|
355
|
+
.ios ion-header.header-translucent .header-background,
|
|
356
|
+
.ios ion-header.header-translucent .footer-background,
|
|
357
|
+
.ios ion-footer.footer-translucent .header-background,
|
|
358
|
+
.ios ion-footer.footer-translucent .footer-background {
|
|
359
|
+
backdrop-filter: none;
|
|
360
|
+
}
|
|
361
|
+
.ios ion-header.header-translucent ion-toolbar,
|
|
362
|
+
.ios ion-footer.footer-translucent ion-toolbar {
|
|
363
|
+
--border-width: 0;
|
|
364
|
+
--background: transparent;
|
|
365
|
+
}
|
|
366
|
+
.ios ion-header ion-toolbar:first-child {
|
|
367
|
+
padding-right: calc(var(--ion-safe-area-right) + 4px);
|
|
368
|
+
padding-left: calc(var(--ion-safe-area-left) + 4px);
|
|
369
|
+
}
|
|
370
|
+
.ios ion-content:not(:has(cdk-virtual-scroll-viewport)) {
|
|
371
|
+
--padding-bottom: calc(56px + var(--max-safe-area));
|
|
372
|
+
}
|
|
373
|
+
.ios .ion-page :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
|
|
374
|
+
margin-bottom: calc((56px + var(--max-safe-area)) * -1);
|
|
375
|
+
padding-bottom: calc(56px + var(--max-safe-area));
|
|
376
|
+
}
|
|
377
|
+
.ios .ion-page ion-content > ion-header > ion-toolbar:first-child {
|
|
378
|
+
--min-height: 66px;
|
|
379
|
+
}
|
|
380
|
+
.ios .ion-page.enable-back-button ion-content > ion-header > ion-toolbar:first-child, .ios .ion-page.ion-page.can-go-back ion-content > ion-header > ion-toolbar:first-child {
|
|
381
|
+
--min-height: auto;
|
|
382
|
+
}
|
|
383
|
+
.ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *::part(native) {
|
|
384
|
+
box-shadow: none !important;
|
|
385
|
+
border-radius: 25px;
|
|
386
|
+
background: var(--ion-color-primary) !important;
|
|
387
|
+
border-color: var(--ion-color-primary-contrast) !important;
|
|
388
|
+
border-width: 1px !important;
|
|
389
|
+
}
|
|
390
|
+
.ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated {
|
|
391
|
+
opacity: 0.4;
|
|
392
|
+
}
|
|
393
|
+
.ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated ion-icon {
|
|
394
|
+
border-color: var(--ion-color-primary-contrast) !important;
|
|
395
|
+
}
|
|
396
|
+
.ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated::part(native)::after {
|
|
397
|
+
background: transparent !important;
|
|
398
|
+
}
|
|
399
|
+
.ios app-photo-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native),
|
|
400
|
+
.ios app-editor-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native) {
|
|
401
|
+
box-shadow: none !important;
|
|
402
|
+
border-radius: 25px;
|
|
403
|
+
background: transparent !important;
|
|
404
|
+
border-width: 1px !important;
|
|
405
|
+
}
|
|
406
|
+
.ios .ion-page ion-content:not(.background-transparent)::after,
|
|
407
|
+
.ios ion-footer.footer-translucent::after {
|
|
408
|
+
content: "";
|
|
409
|
+
position: absolute;
|
|
410
|
+
bottom: 0;
|
|
411
|
+
width: 100%;
|
|
412
|
+
height: calc(56px + var(--max-safe-area));
|
|
413
|
+
box-shadow: inset 0 0 0 0 rgba(var(--system-background-rgb), 0), inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
|
|
414
|
+
pointer-events: none;
|
|
415
|
+
z-index: 1;
|
|
416
|
+
}
|
|
417
|
+
.ios app-editor-image.ion-page ion-content::after,
|
|
418
|
+
.ios app-photo-image.ion-page ion-content::after {
|
|
419
|
+
box-shadow: none !important;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
/*# sourceMappingURL=ionic-theme-ios26.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/assets/ios-variables.scss","../src/assets/ion-popover.scss","../src/assets/ion-searchbar.scss","../src/assets/ios-talk-room.scss","../src/assets/ion-tabs.scss","../src/assets/ion-button.scss","../src/assets/ion-segment.scss","../src/assets/ios-design-dark.scss","../src/assets/ios-design.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACZA;EACE;;AAKE;EDUJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;ECjBM;EACA;;AAGJ;EACE;;AACA;EACE;;;ACfN;EACE;EACA;;AAKE;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;EFVN;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EEIM;EACA;EACA;;AAEF;EACE;;;ACjCJ;EACE;;AAGA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EHVR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGGU;;AAKJ;EACE;EACA;EACA;;AACA;EHrBR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGcU;EACA;;;ACxCV;EACE;EACA;;AACA;EAKE;;AAJA;EJYJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EInBM;;AAMN;EJIA;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EIXE;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EACE;;AAGF;EAIE;EACA;;AAJA;EACE;;AAIF;EACE;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACpDV;AACE;AAAA;AAAA;;AAKE;AAAA;EACE;;AAIJ;AAAA;AAAA;EAGE;EAKA;EAEA;EAEA;EACA;;AATA;AAAA;AAAA;ELEF;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKTI;;AAQF;AAAA;AAAA;EACE;EACA;;AAMF;AAAA;AAAA;EACE;EACA,YACE;;AAIF;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EL1BR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKmBQ;;AAOJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;;AAMJ;AAAA;AAAA;EACE;EACA;;;ACtEJ;EACE;EACA;;AAEA;EACE;;;ACFJ;AAAA;EACE;;AACA;AAAA;EACE;;AAKF;AAAA;EPmBJ;EACA;EACA;EACA;EACA;;AOpBI;AAAA;EACE;;AAKF;AAAA;EACE;;;ACZN;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EAQE;;AAPA;ERNJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EQDM;;AAEF;EACE;;AAON;EACE;;AAGF;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;AAIA;EACE;EACA;;AAEF;EACE;;AAKA;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;;AAGA;EACE;;AAQJ;AAAA;EACE;EACA;EACA;EACA;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;;AAEF;AAAA;EAEE","file":"ionic-theme-ios26.css"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rdlabo-ionic-theme-ios26.mjs","sources":["../../../projects/ionic-theme-ios26/src/rdlabo-ionic-theme-ios26.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
|
package/index.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rdlabo/ionic-theme-ios26",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"exports": {
|
|
5
|
+
"./css/*": {
|
|
6
|
+
"style": "./css/*"
|
|
7
|
+
},
|
|
8
|
+
"./package.json": {
|
|
9
|
+
"default": "./package.json"
|
|
10
|
+
},
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./index.d.ts",
|
|
13
|
+
"default": "./fesm2022/rdlabo-ionic-theme-ios26.mjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"module": "fesm2022/rdlabo-ionic-theme-ios26.mjs",
|
|
18
|
+
"typings": "index.d.ts",
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"tslib": "^2.3.0"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
/**
|
|
5
|
+
* パフォーマンス対策。必ず背景が単色である限りは不要
|
|
6
|
+
*/
|
|
7
|
+
.ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
|
|
8
|
+
.ion-page ion-header > ion-toolbar > ion-buttons ion-back-button {
|
|
9
|
+
&::part(native) {
|
|
10
|
+
backdrop-filter: none !important;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
|
|
15
|
+
.ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
|
|
16
|
+
ion-buttons.liquid-glass-buttons ion-button {
|
|
17
|
+
max-height: inherit;
|
|
18
|
+
&::part(native) {
|
|
19
|
+
@include ios-variables.glass-background(0.7);
|
|
20
|
+
border-radius: 25px;
|
|
21
|
+
}
|
|
22
|
+
margin: 8px;
|
|
23
|
+
|
|
24
|
+
font-size: 1.05rem !important;
|
|
25
|
+
|
|
26
|
+
transition: transform 100ms ease-out;
|
|
27
|
+
will-change: transform;
|
|
28
|
+
&.ion-activated {
|
|
29
|
+
transform: scale(1.2);
|
|
30
|
+
box-shadow: none;
|
|
31
|
+
ion-icon {
|
|
32
|
+
// 色を指定しなくても半透明に
|
|
33
|
+
//color: var(--ion-color-medium-tint);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&[color='primary'][fill='outline'] {
|
|
37
|
+
color: rgba(var(--ion-color-primary-rgb), 1);
|
|
38
|
+
transition:
|
|
39
|
+
transform 100ms ease-out,
|
|
40
|
+
color 50ms ease;
|
|
41
|
+
}
|
|
42
|
+
&[color='primary'][fill='outline'].ion-activated {
|
|
43
|
+
&::part(native) {
|
|
44
|
+
color: rgba(var(--ion-color-primary-rgb), 0.2);
|
|
45
|
+
&::after {
|
|
46
|
+
transform: scale(1.2);
|
|
47
|
+
@include ios-variables.glass-background;
|
|
48
|
+
box-shadow: none;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&.button-has-icon-only,
|
|
54
|
+
&.back-button-has-icon-only {
|
|
55
|
+
&::part(native) {
|
|
56
|
+
border-radius: 50%;
|
|
57
|
+
width: 44px;
|
|
58
|
+
height: 44px;
|
|
59
|
+
padding: 2px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
ion-icon {
|
|
63
|
+
font-size: 1.4rem !important;
|
|
64
|
+
&[name='close-outline'] {
|
|
65
|
+
font-size: 2rem !important;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:not(.button-has-icon-only):not(.back-button-has-icon-only) {
|
|
71
|
+
&::part(native) {
|
|
72
|
+
padding: 0 16px;
|
|
73
|
+
min-height: 44px;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
ion-popover {
|
|
5
|
+
--backdrop-opacity: 0.04;
|
|
6
|
+
&::part(arrow) {
|
|
7
|
+
//display: none;
|
|
8
|
+
}
|
|
9
|
+
&:not(.popover-exclude-content) {
|
|
10
|
+
&::part(content) {
|
|
11
|
+
@include ios-variables.glass-background(0.6);
|
|
12
|
+
border-radius: 24px;
|
|
13
|
+
padding: 0;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
ion-list {
|
|
17
|
+
background: transparent;
|
|
18
|
+
ion-item {
|
|
19
|
+
--background: transparent;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
.toolbar-searchbar::part(container) {
|
|
5
|
+
padding-top: 3px;
|
|
6
|
+
padding-bottom: 3px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
ion-modal {
|
|
10
|
+
ion-searchbar:not(.area-searchbar) {
|
|
11
|
+
.searchbar-input-container {
|
|
12
|
+
margin: 0 6px;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
ion-searchbar:not(.area-searchbar) {
|
|
18
|
+
min-height: 60px;
|
|
19
|
+
padding: 0;
|
|
20
|
+
|
|
21
|
+
ion-icon.searchbar-search-icon {
|
|
22
|
+
inset-inline-start: 12px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.searchbar-input-container {
|
|
26
|
+
margin: 0 8px 0 16px;
|
|
27
|
+
align-self: center;
|
|
28
|
+
justify-self: center;
|
|
29
|
+
input.searchbar-input {
|
|
30
|
+
min-height: 44px;
|
|
31
|
+
@include ios-variables.glass-background;
|
|
32
|
+
// Modal表示でのアイコン非表示の不具合の対応
|
|
33
|
+
backdrop-filter: none;
|
|
34
|
+
border-radius: 20px;
|
|
35
|
+
padding-inline-start: 2.4rem !important;
|
|
36
|
+
}
|
|
37
|
+
.searchbar-clear-button {
|
|
38
|
+
padding-inline-end: 2rem !important;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
ion-fab.inner-tab-bar {
|
|
5
|
+
right: calc(16px + var(--ion-safe-area-right, 0px));
|
|
6
|
+
bottom: var(--max-safe-area);
|
|
7
|
+
ion-fab-button {
|
|
8
|
+
&::part(native) {
|
|
9
|
+
@include ios-variables.glass-background;
|
|
10
|
+
color: rgb(var(--system-dark-rgb));
|
|
11
|
+
}
|
|
12
|
+
--background-activated: rgba(var(--system-light-rgb), 0.3);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
ion-tab-bar {
|
|
17
|
+
@include ios-variables.glass-background;
|
|
18
|
+
z-index: 2;
|
|
19
|
+
|
|
20
|
+
border-radius: 40px;
|
|
21
|
+
|
|
22
|
+
width: calc(100% - 56px - 16px - 16px - 4px - 16px);
|
|
23
|
+
max-width: 400px;
|
|
24
|
+
padding: 2px 2px;
|
|
25
|
+
bottom: var(--max-safe-area);
|
|
26
|
+
left: calc(16px + var(--ion-safe-area-left, 0px));
|
|
27
|
+
position: absolute;
|
|
28
|
+
margin: auto;
|
|
29
|
+
|
|
30
|
+
transition: transform 100ms ease-out;
|
|
31
|
+
will-change: transform;
|
|
32
|
+
&:active {
|
|
33
|
+
transform: scale(1.02);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
ion-tab-button {
|
|
37
|
+
& > ion-icon {
|
|
38
|
+
font-size: 30px;
|
|
39
|
+
}
|
|
40
|
+
background: rgba(var(--system-light-rgb), 0);
|
|
41
|
+
height: auto;
|
|
42
|
+
&::part(native) {
|
|
43
|
+
overflow: visible;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&.tab-selected {
|
|
47
|
+
&::part(native) {
|
|
48
|
+
backdrop-filter: blur(7px);
|
|
49
|
+
background: rgba(var(--system-tab-active-rgb), 0.1);
|
|
50
|
+
transition: background 0.2s ease;
|
|
51
|
+
border-radius: 32px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&.ion-activated::part(native) {
|
|
55
|
+
background: rgba(var(--system-shadow-rgb), 0.02);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ion-palette-dark.ios {
|
|
4
|
+
.ion-page ion-header > ion-toolbar > ion-buttons *,
|
|
5
|
+
.ion-page ion-footer > ion-toolbar > ion-buttons * {
|
|
6
|
+
&:not(.link-setting) {
|
|
7
|
+
opacity: 1;
|
|
8
|
+
&::part(native) {
|
|
9
|
+
opacity: 1;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.ion-activated {
|
|
14
|
+
&::part(native) {
|
|
15
|
+
@include ios-variables.glass-background-dark-active;
|
|
16
|
+
}
|
|
17
|
+
ion-icon {
|
|
18
|
+
color: rgb(255, 255, 255) !important;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&[color='primary'][fill='outline'] {
|
|
23
|
+
&::part(native) {
|
|
24
|
+
color: var(--ion-color-primary-contrast) !important;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
@use 'ion-popover';
|
|
4
|
+
@use 'ion-searchbar';
|
|
5
|
+
@use 'ios-talk-room';
|
|
6
|
+
@use 'ion-tabs';
|
|
7
|
+
@use 'ion-button';
|
|
8
|
+
@use 'ion-segment';
|
|
9
|
+
@use 'ios-design-dark';
|
|
10
|
+
|
|
11
|
+
.ios {
|
|
12
|
+
ion-toast {
|
|
13
|
+
--border-radius: 24px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
ion-card {
|
|
17
|
+
border-radius: 24px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
ion-action-sheet {
|
|
21
|
+
--button-color: var(--ion-color-medium);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.thread-fab {
|
|
25
|
+
ion-fab-button {
|
|
26
|
+
&::part(native) {
|
|
27
|
+
@include ios-variables.glass-background;
|
|
28
|
+
color: rgb(var(--system-dark-rgb));
|
|
29
|
+
}
|
|
30
|
+
ion-icon {
|
|
31
|
+
color: var(--ion-color-medium-shade);
|
|
32
|
+
}
|
|
33
|
+
--background-activated: rgba(var(--system-light-rgb), 0.3);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// tweet action toolbar
|
|
38
|
+
ion-item.suggest-seeking {
|
|
39
|
+
--padding-start: 16px !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.can-go-back ion-header ion-toolbar:not(.md):first-child,
|
|
43
|
+
.enable-back-button ion-header ion-toolbar:not(.md):first-child {
|
|
44
|
+
--border-width: 0;
|
|
45
|
+
}
|
|
46
|
+
ion-header.header-translucent,
|
|
47
|
+
ion-footer.footer-translucent {
|
|
48
|
+
.header-background,
|
|
49
|
+
.footer-background {
|
|
50
|
+
backdrop-filter: none;
|
|
51
|
+
}
|
|
52
|
+
ion-toolbar {
|
|
53
|
+
--border-width: 0;
|
|
54
|
+
--background: transparent;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
ion-header ion-toolbar:first-child {
|
|
58
|
+
padding-right: calc(var(--ion-safe-area-right) + 4px);
|
|
59
|
+
padding-left: calc(var(--ion-safe-area-left) + 4px);
|
|
60
|
+
}
|
|
61
|
+
ion-content:not(:has(cdk-virtual-scroll-viewport)) {
|
|
62
|
+
--padding-bottom: calc(56px + var(--max-safe-area));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ion-page {
|
|
66
|
+
:not(:has(ion-footer)) cdk-virtual-scroll-viewport {
|
|
67
|
+
margin-bottom: calc(calc(56px + var(--max-safe-area)) * -1);
|
|
68
|
+
padding-bottom: calc(56px + var(--max-safe-area));
|
|
69
|
+
}
|
|
70
|
+
ion-content > ion-header > ion-toolbar:first-child {
|
|
71
|
+
--min-height: 66px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.enable-back-button,
|
|
75
|
+
&.ion-page.can-go-back {
|
|
76
|
+
ion-content > ion-header > ion-toolbar:first-child {
|
|
77
|
+
--min-height: auto;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons * {
|
|
83
|
+
&::part(native) {
|
|
84
|
+
box-shadow: none !important;
|
|
85
|
+
border-radius: 25px;
|
|
86
|
+
background: var(--ion-color-primary) !important;
|
|
87
|
+
border-color: var(--ion-color-primary-contrast) !important;
|
|
88
|
+
border-width: 1px !important;
|
|
89
|
+
}
|
|
90
|
+
&.ion-activated {
|
|
91
|
+
opacity: 0.4;
|
|
92
|
+
ion-icon {
|
|
93
|
+
border-color: var(--ion-color-primary-contrast) !important;
|
|
94
|
+
}
|
|
95
|
+
&::part(native) {
|
|
96
|
+
&::after {
|
|
97
|
+
background: transparent !important;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
app-photo-image,
|
|
103
|
+
app-editor-image {
|
|
104
|
+
&.ion-page ion-header > ion-toolbar > ion-buttons * {
|
|
105
|
+
&::part(native) {
|
|
106
|
+
box-shadow: none !important;
|
|
107
|
+
border-radius: 25px;
|
|
108
|
+
background: transparent !important;
|
|
109
|
+
border-width: 1px !important;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ion-page ion-content:not(.background-transparent)::after,
|
|
115
|
+
ion-footer.footer-translucent::after {
|
|
116
|
+
content: '';
|
|
117
|
+
position: absolute;
|
|
118
|
+
bottom: 0;
|
|
119
|
+
width: 100%;
|
|
120
|
+
height: calc(56px + var(--max-safe-area));
|
|
121
|
+
box-shadow:
|
|
122
|
+
inset 0 0 0 0 rgba(var(--system-background-rgb), 0),
|
|
123
|
+
inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
|
|
124
|
+
pointer-events: none;
|
|
125
|
+
z-index: 1;
|
|
126
|
+
}
|
|
127
|
+
app-editor-image.ion-page ion-content::after,
|
|
128
|
+
app-photo-image.ion-page ion-content::after {
|
|
129
|
+
box-shadow: none !important;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
@use 'ios-variables';
|
|
2
|
+
|
|
3
|
+
.ios {
|
|
4
|
+
app-talk-room {
|
|
5
|
+
.talk-system-message {
|
|
6
|
+
transform: translateY(-80px);
|
|
7
|
+
}
|
|
8
|
+
ion-footer#talk-footer {
|
|
9
|
+
ion-toolbar {
|
|
10
|
+
--border-width: 0;
|
|
11
|
+
--background: transparent;
|
|
12
|
+
}
|
|
13
|
+
ion-toolbar.toolbar-blockquote {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: -56px;
|
|
16
|
+
ion-item {
|
|
17
|
+
padding: 8px 12px;
|
|
18
|
+
--inner-padding-end: 4px;
|
|
19
|
+
ion-avatar {
|
|
20
|
+
transform: translateX(-10px);
|
|
21
|
+
margin-right: 4px;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
ion-icon {
|
|
26
|
+
font-size: 1.6rem;
|
|
27
|
+
color: var(--ion-color-medium-tint);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
&::part(native) {
|
|
31
|
+
@include ios-variables.glass-background;
|
|
32
|
+
border-radius: 20px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
ion-toolbar.send-message {
|
|
37
|
+
ion-textarea.input-field {
|
|
38
|
+
transition: width 0.5s ease;
|
|
39
|
+
--padding-start: 16px;
|
|
40
|
+
--padding-end: 16px;
|
|
41
|
+
label.textarea-wrapper {
|
|
42
|
+
@include ios-variables.glass-background;
|
|
43
|
+
margin: 8px 8px;
|
|
44
|
+
border-radius: 32px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--system-dark-rgb: 0, 0, 0;
|
|
3
|
+
--system-light-rgb: 255, 255, 255;
|
|
4
|
+
--system-tab-active-rgb: 16, 16, 16;
|
|
5
|
+
--system-shadow-rgb: 224, 224, 224;
|
|
6
|
+
--system-background-rgb: 255, 255, 255;
|
|
7
|
+
--system-edge-rgb: 255, 255, 255;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ion-palette-dark {
|
|
11
|
+
--system-dark-rgb: 255, 255, 255;
|
|
12
|
+
--system-light-rgb: 58, 58, 58;
|
|
13
|
+
--system-tab-active-rgb: 255, 255, 255;
|
|
14
|
+
--system-shadow-rgb: translarent;
|
|
15
|
+
--system-background-rgb: 0, 0, 0;
|
|
16
|
+
--system-edge-rgb: 80, 80, 80;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin glass-background($opacity: 0.4, $blur: 6px) {
|
|
20
|
+
background: rgba(var(--system-light-rgb), $opacity);
|
|
21
|
+
backdrop-filter: saturate(240%) blur($blur);
|
|
22
|
+
box-shadow:
|
|
23
|
+
inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2),
|
|
24
|
+
0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
|
|
25
|
+
border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
26
|
+
border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
|
|
27
|
+
border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
|
|
28
|
+
border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
|
|
29
|
+
transition: box-shadow 0.1s ease;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin glass-background-dark-active($opacity: 0.25, $blur: 7px) {
|
|
33
|
+
background: rgba(var(--system-tab-active-rgb), $opacity);
|
|
34
|
+
backdrop-filter: saturate(180%) blur($blur);
|
|
35
|
+
box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
|
|
36
|
+
border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
|
|
37
|
+
transition: box-shadow 0.1s ease;
|
|
38
|
+
}
|