@yongdall/theme 0.1.0 → 0.1.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.
Files changed (13) hide show
  1. package/assets.yongdall.mjs +2 -2
  2. package/hooks.yongdall.mjs +14 -7
  3. package/hooks.yongdall.mjs.map +1 -1
  4. package/index.mjs +25 -25
  5. package/index.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/theme-base.css +210 -0
  8. package/theme-base.css.map +1 -0
  9. package/{theme-tradition.css → theme-tabs.css} +41 -41
  10. package/theme-tabs.css.map +1 -0
  11. package/theme-tabs.mjs +0 -0
  12. package/theme-tradition.css.map +0 -1
  13. /package/{theme-tradition.mjs → theme-base.mjs} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yongdall/theme",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "exports": {
5
5
  ".": "./index.mjs"
6
6
  },
package/theme-base.css ADDED
@@ -0,0 +1,210 @@
1
+ body.YongDallTheme-base {
2
+ --YongDallTheme-base-nav-size: 48px;
3
+ --YongDallTheme-base-button-size: 40px;
4
+ --YongDallTheme-base-button-font-size: 20px;
5
+ --YongDallTheme-base-menu-button-size: 48px;
6
+ --YongDallTheme-base-menu-button-font-size: 32px;
7
+ --YongDallTheme-base-menu-button-inset: 20px;
8
+ --YongDallTheme-base-button-border-size: 2px;
9
+
10
+ padding-inline-start: 0;
11
+ padding-block-start: var(--YongDallTheme-base-nav-size);
12
+ transition: padding-inline-start 0.2s;
13
+
14
+ .Page {
15
+ min-block-size: calc(100dvb - var(--YongDallTheme-base-nav-size));
16
+ }
17
+
18
+ .Page-mode-flex {
19
+ block-size: calc(100dvb - var(--YongDallTheme-base-nav-size));
20
+ }
21
+ .Page-sides {
22
+ min-inline-size: 200px;
23
+ }
24
+
25
+
26
+ &.YongDallTheme-base-menu-open {
27
+ padding-inline-start: var(--theme-sider-size);
28
+
29
+ }
30
+
31
+ @media screen and (max-width: 800px) {
32
+
33
+ &.YongDallTheme-base-menu-open {
34
+ padding-inline-start: 0;
35
+ overflow: hidden;
36
+
37
+ }
38
+ }
39
+ }
40
+
41
+ body.YongDallTheme-base .YongDallTheme-user {
42
+ inline-size: 300px;
43
+ inset-block-start: var(--YongDallTheme-base-nav-size);
44
+ inset-inline-end: 0;
45
+ max-inline-size: 100dvw;
46
+ max-block-size: calc(100dvh - var(--YongDallTheme-base-nav-size));
47
+ border: #001529 1px solid;
48
+ box-sizing: border-box;
49
+ margin: 0;
50
+ inset-inline-start: auto;
51
+ padding: 0;
52
+ }
53
+ .YongDallTheme-base-header {
54
+
55
+ position: fixed;
56
+ inset-inline: 0;
57
+ inset-block-start: 0;
58
+ block-size: var(--YongDallTheme-base-nav-size);
59
+ z-index: 100000;
60
+ transition: bottom 0.5s;
61
+
62
+ display: flex;
63
+ flex-direction: row;
64
+ align-items: center;
65
+ color: var(--color-nav-text);
66
+ background-color: var(--color-nav-bg);
67
+ user-select: none;
68
+ overflow: auto;
69
+ scrollbar-width: none;
70
+
71
+
72
+ >* {
73
+ flex-shrink: 0;
74
+ background-color: inherit;
75
+
76
+ }
77
+
78
+ >span {
79
+ flex: auto;
80
+ }
81
+
82
+
83
+ a:hover {
84
+ color: var(--color-nav-text-highlight);
85
+ }
86
+
87
+ }
88
+
89
+ .YongDallTheme-base-header-title {
90
+ font-weight: bold;
91
+ font-size: 1.2em;
92
+ margin-inline-start: .4em;
93
+ }
94
+
95
+
96
+ .YongDallTheme-base-menu-button {
97
+ flex-shrink: 0;
98
+ overflow: hidden;
99
+ cursor: pointer;
100
+ inline-size: calc(var(--YongDallTheme-base-nav-size) * 0.6);
101
+ block-size: calc(var(--YongDallTheme-base-nav-size) * 0.6);
102
+ margin-inline: 4px;
103
+ text-align: center;
104
+ position: relative;
105
+ border-block: var(--YongDallTheme-base-button-border-size) solid transparent;
106
+
107
+
108
+
109
+
110
+ }
111
+ .YongDallTheme-base-header .YongDallTheme-logo {
112
+ display: contents;
113
+
114
+ }
115
+
116
+ body.YongDallTheme-base .YongDallTheme-logo > * {
117
+ max-block-size: 100%;
118
+ }
119
+ body.YongDallTheme-base .YongDallTheme-user-button {
120
+ flex-shrink: 0;
121
+ overflow: hidden;
122
+ cursor: pointer;
123
+ inline-size: var(--YongDallTheme-base-button-size);
124
+ line-height: var(--YongDallTheme-base-button-size);
125
+ block-size: 100%;
126
+ text-align: center;
127
+ position: relative;
128
+ font-size: var(--YongDallTheme-base-button-font-size);
129
+ border-block: var(--YongDallTheme-base-button-border-size) solid transparent;
130
+
131
+
132
+
133
+ >a {
134
+ display: block;
135
+ overflow: hidden;
136
+ inline-size: 100%;
137
+ block-size: 100%;
138
+ }
139
+
140
+
141
+ }
142
+
143
+
144
+
145
+ body.YongDallTheme-base .YongDallTheme-user-button img {
146
+ position: absolute;
147
+ inset: 0;
148
+ margin: auto;
149
+ max-block-size: 100%;
150
+ max-inline-size: 100%;
151
+ }
152
+
153
+ body.YongDallTheme-base .YongDallTheme-user-button,
154
+ .YongDallTheme-base-button {
155
+ &:hover {
156
+ background-color: var(--color-nav-bg-highlight);
157
+ }
158
+ }
159
+
160
+ .YongDallTheme-base-sidebar {
161
+
162
+ position: fixed;
163
+ inset-block-start: var(--YongDallTheme-base-nav-size);
164
+ inset-block-end: 0;
165
+ inset-inline-start: 0;
166
+ block-size: 100%;
167
+ display: flex;
168
+ flex-direction: row;
169
+ z-index: 100000;
170
+ transition: bottom 0.5s;
171
+
172
+ transition: inline-size 0.2s;
173
+ border-inline-end: 1px solid #f0f0f0;
174
+ background: rgba(0, 21, 41, 0.08);
175
+ overflow: hidden;
176
+ block-size: calc(100% - var(--YongDallTheme-base-nav-size));
177
+ max-inline-size: var(--theme-sider-size);
178
+ inline-size: 0;
179
+
180
+ >* {
181
+ inline-size: var(--theme-sider-size);
182
+ block-size: 100%;
183
+ background: #fff;
184
+ position: relative;
185
+ overflow: auto;
186
+ }
187
+
188
+ @media screen and (max-width: 800px) {
189
+ transition: none;
190
+ max-inline-size: initial;
191
+ inline-size: 0;
192
+
193
+
194
+ >* {
195
+ max-inline-size: 100%;
196
+ }
197
+ }
198
+ }
199
+
200
+ .YongDallTheme-base-menu-open .YongDallTheme-base-sidebar {
201
+ inline-size: var(--theme-sider-size);
202
+
203
+ @media screen and (max-width: 800px) {
204
+ inline-size: 100vw;
205
+ }
206
+
207
+ }
208
+
209
+
210
+ /*# sourceMappingURL=theme-base.css.map*/
package/theme-base.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-base.css","names":[],"sources":["../../packages/theme/theme-base.css"],"sourcesContent":["body.YongDallTheme-base {\n\t--YongDallTheme-base-nav-size: 48px;\n\t--YongDallTheme-base-button-size: 40px;\n\t--YongDallTheme-base-button-font-size: 20px;\n\t--YongDallTheme-base-menu-button-size: 48px;\n\t--YongDallTheme-base-menu-button-font-size: 32px;\n\t--YongDallTheme-base-menu-button-inset: 20px;\n\t--YongDallTheme-base-button-border-size: 2px;\n\n\tpadding-inline-start: 0;\n\tpadding-block-start: var(--YongDallTheme-base-nav-size);\n\ttransition: padding-inline-start 0.2s;\n\n\t.Page {\n\t\tmin-block-size: calc(100dvb - var(--YongDallTheme-base-nav-size));\n\t}\n\n\t.Page-mode-flex {\n\t\tblock-size: calc(100dvb - var(--YongDallTheme-base-nav-size));\n\t}\n\t.Page-sides {\n\t\tmin-inline-size: 200px;\n\t}\n\n\n\t&.YongDallTheme-base-menu-open {\n\t\tpadding-inline-start: var(--theme-sider-size);\n\n\t}\n\n\t@media screen and (max-width: 800px) {\n\n\t\t&.YongDallTheme-base-menu-open {\n\t\t\tpadding-inline-start: 0;\n\t\t\toverflow: hidden;\n\n\t\t}\n\t}\n}\n\nbody.YongDallTheme-base .YongDallTheme-user {\n\tinline-size: 300px;\n\tinset-block-start: var(--YongDallTheme-base-nav-size);\n\tinset-inline-end: 0;\n\tmax-inline-size: 100dvw;\n\tmax-block-size: calc(100dvh - var(--YongDallTheme-base-nav-size));\n\tborder: #001529 1px solid;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tinset-inline-start: auto;\n\tpadding: 0;\n}\n.YongDallTheme-base-header {\n\n\tposition: fixed;\n\tinset-inline: 0;\n\tinset-block-start: 0;\n\tblock-size: var(--YongDallTheme-base-nav-size);\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tcolor: var(--color-nav-text);\n\tbackground-color: var(--color-nav-bg);\n\tuser-select: none;\n\toverflow: auto;\n\tscrollbar-width: none;\n\n\n\t>* {\n\t\tflex-shrink: 0;\n\t\tbackground-color: inherit;\n\n\t}\n\n\t>span {\n\t\tflex: auto;\n\t}\n\n\n\ta:hover {\n\t\tcolor: var(--color-nav-text-highlight);\n\t}\n\n}\n\n.YongDallTheme-base-header-title {\n\tfont-weight: bold;\n\tfont-size: 1.2em;\n\tmargin-inline-start: .4em;\n}\n\n\n.YongDallTheme-base-menu-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: calc(var(--YongDallTheme-base-nav-size) * 0.6);\n\tblock-size: calc(var(--YongDallTheme-base-nav-size) * 0.6);\n\tmargin-inline: 4px;\n\ttext-align: center;\n\tposition: relative;\n\tborder-block: var(--YongDallTheme-base-button-border-size) solid transparent;\n\n\n\n\n}\n.YongDallTheme-base-header .YongDallTheme-logo {\n\tdisplay: contents;\n\n}\n\nbody.YongDallTheme-base .YongDallTheme-logo > * {\n\tmax-block-size: 100%;\n}\nbody.YongDallTheme-base .YongDallTheme-user-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: var(--YongDallTheme-base-button-size);\n\tline-height: var(--YongDallTheme-base-button-size);\n\tblock-size: 100%;\n\ttext-align: center;\n\tposition: relative;\n\tfont-size: var(--YongDallTheme-base-button-font-size);\n\tborder-block: var(--YongDallTheme-base-button-border-size) solid transparent;\n\n\n\n\t>a {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\tinline-size: 100%;\n\t\tblock-size: 100%;\n\t}\n\n\n}\n\n\n\nbody.YongDallTheme-base .YongDallTheme-user-button img {\n\tposition: absolute;\n\tinset: 0;\n\tmargin: auto;\n\tmax-block-size: 100%;\n\tmax-inline-size: 100%;\n}\n\nbody.YongDallTheme-base .YongDallTheme-user-button,\n.YongDallTheme-base-button {\n\t&:hover {\n\t\tbackground-color: var(--color-nav-bg-highlight);\n\t}\n}\n\n.YongDallTheme-base-sidebar {\n\n\tposition: fixed;\n\tinset-block-start: var(--YongDallTheme-base-nav-size);\n\tinset-block-end: 0;\n\tinset-inline-start: 0;\n\tblock-size: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\ttransition: inline-size 0.2s;\n\tborder-inline-end: 1px solid #f0f0f0;\n\tbackground: rgba(0, 21, 41, 0.08);\n\toverflow: hidden;\n\tblock-size: calc(100% - var(--YongDallTheme-base-nav-size));\n\tmax-inline-size: var(--theme-sider-size);\n\tinline-size: 0;\n\n\t>* {\n\t\tinline-size: var(--theme-sider-size);\n\t\tblock-size: 100%;\n\t\tbackground: #fff;\n\t\tposition: relative;\n\t\toverflow: auto;\n\t}\n\n\t@media screen and (max-width: 800px) {\n\t\ttransition: none;\n\t\tmax-inline-size: initial;\n\t\tinline-size: 0;\n\n\n\t\t>* {\n\t\t\tmax-inline-size: 100%;\n\t\t}\n\t}\n}\n\n.YongDallTheme-base-menu-open .YongDallTheme-base-sidebar {\n\tinline-size: var(--theme-sider-size);\n\n\t@media screen and (max-width: 800px) {\n\t\tinline-size: 100vw;\n\t}\n\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA"}
package/{theme-tradition.css → theme-tabs.css} RENAMED
@@ -1,23 +1,23 @@
1
- body.YongDallTheme-tradition {
2
- --YongDallTheme-tradition-nav-size: 48px;
3
- --YongDallTheme-tradition-activity-size: 48px;
4
- --YongDallTheme-tradition-button-size: 40px;
5
- --YongDallTheme-tradition-button-font-size: 20px;
6
- --YongDallTheme-tradition-menu-button-size: 48px;
7
- --YongDallTheme-tradition-menu-button-font-size: 32px;
8
- --YongDallTheme-tradition-menu-button-inset: 20px;
9
- --YongDallTheme-tradition-button-border-size: 2px;
1
+ body.YongDallTheme-tabs {
2
+ --YongDallTheme-tabs-nav-size: 48px;
3
+ --YongDallTheme-tabs-activity-size: 48px;
4
+ --YongDallTheme-tabs-button-size: 40px;
5
+ --YongDallTheme-tabs-button-font-size: 20px;
6
+ --YongDallTheme-tabs-menu-button-size: 48px;
7
+ --YongDallTheme-tabs-menu-button-font-size: 32px;
8
+ --YongDallTheme-tabs-menu-button-inset: 20px;
9
+ --YongDallTheme-tabs-button-border-size: 2px;
10
10
 
11
11
  padding-inline-start: 0;
12
- padding-block-start: calc(var(--YongDallTheme-tradition-nav-size) + var(--YongDallTheme-tradition-activity-size));
12
+ padding-block-start: calc(var(--YongDallTheme-tabs-nav-size) + var(--YongDallTheme-tabs-activity-size));
13
13
  transition: padding-inline-start 0.2s;
14
14
 
15
15
  .Page {
16
- min-block-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));
16
+ min-block-size: calc(100dvb - var(--YongDallTheme-tabs-nav-size) - var(--YongDallTheme-tabs-activity-size));
17
17
  }
18
18
 
19
19
  .Page-mode-flex {
20
- block-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));
20
+ block-size: calc(100dvb - var(--YongDallTheme-tabs-nav-size) - var(--YongDallTheme-tabs-activity-size));
21
21
  }
22
22
  .Page-sides {
23
23
  min-inline-size: 200px;
@@ -26,8 +26,8 @@ body.YongDallTheme-tradition {
26
26
  .YongDallTheme-activity {
27
27
  position: fixed;
28
28
  inset-inline: 0;
29
- inset-block-start: var(--YongDallTheme-tradition-nav-size);
30
- block-size: var(--YongDallTheme-tradition-activity-size);
29
+ inset-block-start: var(--YongDallTheme-tabs-nav-size);
30
+ block-size: var(--YongDallTheme-tabs-activity-size);
31
31
  display: flex;
32
32
  flex-direction: row;
33
33
  overflow: scroll;
@@ -49,7 +49,7 @@ body.YongDallTheme-tradition {
49
49
  }
50
50
  }
51
51
 
52
- &.YongDallTheme-tradition-menu-open {
52
+ &.YongDallTheme-tabs-menu-open {
53
53
  padding-inline-start: var(--theme-sider-size);
54
54
 
55
55
  .YongDallTheme-activity {
@@ -59,7 +59,7 @@ body.YongDallTheme-tradition {
59
59
 
60
60
  @media screen and (max-width: 800px) {
61
61
 
62
- &.YongDallTheme-tradition-menu-open {
62
+ &.YongDallTheme-tabs-menu-open {
63
63
  padding-inline-start: 0;
64
64
  overflow: hidden;
65
65
 
@@ -70,24 +70,24 @@ body.YongDallTheme-tradition {
70
70
  }
71
71
  }
72
72
 
73
- body.YongDallTheme-tradition .YongDallTheme-user {
73
+ body.YongDallTheme-tabs .YongDallTheme-user {
74
74
  inline-size: 300px;
75
- inset-block-start: var(--YongDallTheme-tradition-nav-size);
75
+ inset-block-start: var(--YongDallTheme-tabs-nav-size);
76
76
  inset-inline-end: 0;
77
77
  max-inline-size: 100dvw;
78
- max-block-size: calc(100dvh - var(--YongDallTheme-tradition-nav-size));
78
+ max-block-size: calc(100dvh - var(--YongDallTheme-tabs-nav-size));
79
79
  border: #001529 1px solid;
80
80
  box-sizing: border-box;
81
81
  margin: 0;
82
82
  inset-inline-start: auto;
83
83
  padding: 0;
84
84
  }
85
- .YongDallTheme-tradition-header {
85
+ .YongDallTheme-tabs-header {
86
86
 
87
87
  position: fixed;
88
88
  inset-inline: 0;
89
89
  inset-block-start: 0;
90
- block-size: var(--YongDallTheme-tradition-nav-size);
90
+ block-size: var(--YongDallTheme-tabs-nav-size);
91
91
  z-index: 100000;
92
92
  transition: bottom 0.5s;
93
93
 
@@ -118,47 +118,47 @@ body.YongDallTheme-tradition .YongDallTheme-user {
118
118
 
119
119
  }
120
120
 
121
- .YongDallTheme-tradition-header-title {
121
+ .YongDallTheme-tabs-header-title {
122
122
  font-weight: bold;
123
123
  font-size: 1.2em;
124
124
  margin-inline-start: .4em;
125
125
  }
126
126
 
127
127
 
128
- .YongDallTheme-tradition-menu-button {
128
+ .YongDallTheme-tabs-menu-button {
129
129
  flex-shrink: 0;
130
130
  overflow: hidden;
131
131
  cursor: pointer;
132
- inline-size: calc(var(--YongDallTheme-tradition-nav-size) * 0.6);
133
- block-size: calc(var(--YongDallTheme-tradition-nav-size) * 0.6);
132
+ inline-size: calc(var(--YongDallTheme-tabs-nav-size) * 0.6);
133
+ block-size: calc(var(--YongDallTheme-tabs-nav-size) * 0.6);
134
134
  margin-inline: 4px;
135
135
  text-align: center;
136
136
  position: relative;
137
- border-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;
137
+ border-block: var(--YongDallTheme-tabs-button-border-size) solid transparent;
138
138
 
139
139
 
140
140
 
141
141
 
142
142
  }
143
- .YongDallTheme-tradition-header .YongDallTheme-logo {
143
+ .YongDallTheme-tabs-header .YongDallTheme-logo {
144
144
  display: contents;
145
145
 
146
146
  }
147
147
 
148
- body.YongDallTheme-tradition .YongDallTheme-logo > * {
148
+ body.YongDallTheme-tabs .YongDallTheme-logo > * {
149
149
  max-block-size: 100%;
150
150
  }
151
- body.YongDallTheme-tradition .YongDallTheme-user-button {
151
+ body.YongDallTheme-tabs .YongDallTheme-user-button {
152
152
  flex-shrink: 0;
153
153
  overflow: hidden;
154
154
  cursor: pointer;
155
- inline-size: var(--YongDallTheme-tradition-button-size);
156
- line-height: var(--YongDallTheme-tradition-button-size);
155
+ inline-size: var(--YongDallTheme-tabs-button-size);
156
+ line-height: var(--YongDallTheme-tabs-button-size);
157
157
  block-size: 100%;
158
158
  text-align: center;
159
159
  position: relative;
160
- font-size: var(--YongDallTheme-tradition-button-font-size);
161
- border-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;
160
+ font-size: var(--YongDallTheme-tabs-button-font-size);
161
+ border-block: var(--YongDallTheme-tabs-button-border-size) solid transparent;
162
162
 
163
163
 
164
164
 
@@ -174,7 +174,7 @@ body.YongDallTheme-tradition .YongDallTheme-user-button {
174
174
 
175
175
 
176
176
 
177
- body.YongDallTheme-tradition .YongDallTheme-user-button img {
177
+ body.YongDallTheme-tabs .YongDallTheme-user-button img {
178
178
  position: absolute;
179
179
  inset: 0;
180
180
  margin: auto;
@@ -182,17 +182,17 @@ body.YongDallTheme-tradition .YongDallTheme-user-button img {
182
182
  max-inline-size: 100%;
183
183
  }
184
184
 
185
- body.YongDallTheme-tradition .YongDallTheme-user-button,
186
- .YongDallTheme-tradition-button {
185
+ body.YongDallTheme-tabs .YongDallTheme-user-button,
186
+ .YongDallTheme-tabs-button {
187
187
  &:hover {
188
188
  background-color: var(--color-nav-bg-highlight);
189
189
  }
190
190
  }
191
191
 
192
- .YongDallTheme-tradition-sidebar {
192
+ .YongDallTheme-tabs-sidebar {
193
193
 
194
194
  position: fixed;
195
- inset-block-start: var(--YongDallTheme-tradition-nav-size);
195
+ inset-block-start: var(--YongDallTheme-tabs-nav-size);
196
196
  inset-block-end: 0;
197
197
  inset-inline-start: 0;
198
198
  block-size: 100%;
@@ -205,7 +205,7 @@ body.YongDallTheme-tradition .YongDallTheme-user-button,
205
205
  border-inline-end: 1px solid #f0f0f0;
206
206
  background: rgba(0, 21, 41, 0.08);
207
207
  overflow: hidden;
208
- block-size: calc(100% - var(--YongDallTheme-tradition-nav-size));
208
+ block-size: calc(100% - var(--YongDallTheme-tabs-nav-size));
209
209
  max-inline-size: var(--theme-sider-size);
210
210
  inline-size: 0;
211
211
 
@@ -229,7 +229,7 @@ body.YongDallTheme-tradition .YongDallTheme-user-button,
229
229
  }
230
230
  }
231
231
 
232
- .YongDallTheme-tradition-menu-open .YongDallTheme-tradition-sidebar {
232
+ .YongDallTheme-tabs-menu-open .YongDallTheme-tabs-sidebar {
233
233
  inline-size: var(--theme-sider-size);
234
234
 
235
235
  @media screen and (max-width: 800px) {
@@ -239,4 +239,4 @@ body.YongDallTheme-tradition .YongDallTheme-user-button,
239
239
  }
240
240
 
241
241
 
242
- /*# sourceMappingURL=theme-tradition.css.map*/
242
+ /*# sourceMappingURL=theme-tabs.css.map*/
package/theme-tabs.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-tabs.css","names":[],"sources":["../../packages/theme/theme-tabs.css"],"sourcesContent":["body.YongDallTheme-tabs {\n\t--YongDallTheme-tabs-nav-size: 48px;\n\t--YongDallTheme-tabs-activity-size: 48px;\n\t--YongDallTheme-tabs-button-size: 40px;\n\t--YongDallTheme-tabs-button-font-size: 20px;\n\t--YongDallTheme-tabs-menu-button-size: 48px;\n\t--YongDallTheme-tabs-menu-button-font-size: 32px;\n\t--YongDallTheme-tabs-menu-button-inset: 20px;\n\t--YongDallTheme-tabs-button-border-size: 2px;\n\n\tpadding-inline-start: 0;\n\tpadding-block-start: calc(var(--YongDallTheme-tabs-nav-size) + var(--YongDallTheme-tabs-activity-size));\n\ttransition: padding-inline-start 0.2s;\n\n\t.Page {\n\t\tmin-block-size: calc(100dvb - var(--YongDallTheme-tabs-nav-size) - var(--YongDallTheme-tabs-activity-size));\n\t}\n\n\t.Page-mode-flex {\n\t\tblock-size: calc(100dvb - var(--YongDallTheme-tabs-nav-size) - var(--YongDallTheme-tabs-activity-size));\n\t}\n\t.Page-sides {\n\t\tmin-inline-size: 200px;\n\t}\n\n\t.YongDallTheme-activity {\n\t\tposition: fixed;\n\t\tinset-inline: 0;\n\t\tinset-block-start: var(--YongDallTheme-tabs-nav-size);\n\t\tblock-size: var(--YongDallTheme-tabs-activity-size);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\toverflow: scroll;\n\t\toverflow-y: hidden;\n\t\tscrollbar-width: thin;\n\t\tz-index: 10000;\n\t\tbackground: var(--color-global-background);\n\t}\n\n\t.YongDallTheme-activity-page {\n\t\tmax-inline-size: 300px;\n\t\tmin-inline-size: 100px;\n\t\tmargin-inline: 4px;\n\t\tmargin-block: 4px;\n\t\tborder-radius: 4px;\n\n\t\t>a {\n\t\t\tline-height: auto;\n\t\t}\n\t}\n\n\t&.YongDallTheme-tabs-menu-open {\n\t\tpadding-inline-start: var(--theme-sider-size);\n\n\t\t.YongDallTheme-activity {\n\t\t\tinset-inline-start: var(--theme-sider-size);\n\t\t}\n\t}\n\n\t@media screen and (max-width: 800px) {\n\n\t\t&.YongDallTheme-tabs-menu-open {\n\t\t\tpadding-inline-start: 0;\n\t\t\toverflow: hidden;\n\n\t\t\t.YongDallTheme-activity {\n\t\t\t\tinset-inline-start: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n\nbody.YongDallTheme-tabs .YongDallTheme-user {\n\tinline-size: 300px;\n\tinset-block-start: var(--YongDallTheme-tabs-nav-size);\n\tinset-inline-end: 0;\n\tmax-inline-size: 100dvw;\n\tmax-block-size: calc(100dvh - var(--YongDallTheme-tabs-nav-size));\n\tborder: #001529 1px solid;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tinset-inline-start: auto;\n\tpadding: 0;\n}\n.YongDallTheme-tabs-header {\n\n\tposition: fixed;\n\tinset-inline: 0;\n\tinset-block-start: 0;\n\tblock-size: var(--YongDallTheme-tabs-nav-size);\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tcolor: var(--color-nav-text);\n\tbackground-color: var(--color-nav-bg);\n\tuser-select: none;\n\toverflow: auto;\n\tscrollbar-width: none;\n\n\n\t>* {\n\t\tflex-shrink: 0;\n\t\tbackground-color: inherit;\n\n\t}\n\n\t>span {\n\t\tflex: auto;\n\t}\n\n\n\ta:hover {\n\t\tcolor: var(--color-nav-text-highlight);\n\t}\n\n}\n\n.YongDallTheme-tabs-header-title {\n\tfont-weight: bold;\n\tfont-size: 1.2em;\n\tmargin-inline-start: .4em;\n}\n\n\n.YongDallTheme-tabs-menu-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: calc(var(--YongDallTheme-tabs-nav-size) * 0.6);\n\tblock-size: calc(var(--YongDallTheme-tabs-nav-size) * 0.6);\n\tmargin-inline: 4px;\n\ttext-align: center;\n\tposition: relative;\n\tborder-block: var(--YongDallTheme-tabs-button-border-size) solid transparent;\n\n\n\n\n}\n.YongDallTheme-tabs-header .YongDallTheme-logo {\n\tdisplay: contents;\n\n}\n\nbody.YongDallTheme-tabs .YongDallTheme-logo > * {\n\tmax-block-size: 100%;\n}\nbody.YongDallTheme-tabs .YongDallTheme-user-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: var(--YongDallTheme-tabs-button-size);\n\tline-height: var(--YongDallTheme-tabs-button-size);\n\tblock-size: 100%;\n\ttext-align: center;\n\tposition: relative;\n\tfont-size: var(--YongDallTheme-tabs-button-font-size);\n\tborder-block: var(--YongDallTheme-tabs-button-border-size) solid transparent;\n\n\n\n\t>a {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\tinline-size: 100%;\n\t\tblock-size: 100%;\n\t}\n\n\n}\n\n\n\nbody.YongDallTheme-tabs .YongDallTheme-user-button img {\n\tposition: absolute;\n\tinset: 0;\n\tmargin: auto;\n\tmax-block-size: 100%;\n\tmax-inline-size: 100%;\n}\n\nbody.YongDallTheme-tabs .YongDallTheme-user-button,\n.YongDallTheme-tabs-button {\n\t&:hover {\n\t\tbackground-color: var(--color-nav-bg-highlight);\n\t}\n}\n\n.YongDallTheme-tabs-sidebar {\n\n\tposition: fixed;\n\tinset-block-start: var(--YongDallTheme-tabs-nav-size);\n\tinset-block-end: 0;\n\tinset-inline-start: 0;\n\tblock-size: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\ttransition: inline-size 0.2s;\n\tborder-inline-end: 1px solid #f0f0f0;\n\tbackground: rgba(0, 21, 41, 0.08);\n\toverflow: hidden;\n\tblock-size: calc(100% - var(--YongDallTheme-tabs-nav-size));\n\tmax-inline-size: var(--theme-sider-size);\n\tinline-size: 0;\n\n\t>* {\n\t\tinline-size: var(--theme-sider-size);\n\t\tblock-size: 100%;\n\t\tbackground: #fff;\n\t\tposition: relative;\n\t\toverflow: auto;\n\t}\n\n\t@media screen and (max-width: 800px) {\n\t\ttransition: none;\n\t\tmax-inline-size: initial;\n\t\tinline-size: 0;\n\n\n\t\t>* {\n\t\t\tmax-inline-size: 100%;\n\t\t}\n\t}\n}\n\n.YongDallTheme-tabs-menu-open .YongDallTheme-tabs-sidebar {\n\tinline-size: var(--theme-sider-size);\n\n\t@media screen and (max-width: 800px) {\n\t\tinline-size: 100vw;\n\t}\n\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA"}
package/theme-tabs.mjs ADDED
File without changes
package/theme-tradition.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"theme-tradition.css","names":[],"sources":["../../packages/theme/theme-tradition.css"],"sourcesContent":["body.YongDallTheme-tradition {\n\t--YongDallTheme-tradition-nav-size: 48px;\n\t--YongDallTheme-tradition-activity-size: 48px;\n\t--YongDallTheme-tradition-button-size: 40px;\n\t--YongDallTheme-tradition-button-font-size: 20px;\n\t--YongDallTheme-tradition-menu-button-size: 48px;\n\t--YongDallTheme-tradition-menu-button-font-size: 32px;\n\t--YongDallTheme-tradition-menu-button-inset: 20px;\n\t--YongDallTheme-tradition-button-border-size: 2px;\n\n\tpadding-inline-start: 0;\n\tpadding-block-start: calc(var(--YongDallTheme-tradition-nav-size) + var(--YongDallTheme-tradition-activity-size));\n\ttransition: padding-inline-start 0.2s;\n\n\t.Page {\n\t\tmin-block-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));\n\t}\n\n\t.Page-mode-flex {\n\t\tblock-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));\n\t}\n\t.Page-sides {\n\t\tmin-inline-size: 200px;\n\t}\n\n\t.YongDallTheme-activity {\n\t\tposition: fixed;\n\t\tinset-inline: 0;\n\t\tinset-block-start: var(--YongDallTheme-tradition-nav-size);\n\t\tblock-size: var(--YongDallTheme-tradition-activity-size);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\toverflow: scroll;\n\t\toverflow-y: hidden;\n\t\tscrollbar-width: thin;\n\t\tz-index: 10000;\n\t\tbackground: var(--color-global-background);\n\t}\n\n\t.YongDallTheme-activity-page {\n\t\tmax-inline-size: 300px;\n\t\tmin-inline-size: 100px;\n\t\tmargin-inline: 4px;\n\t\tmargin-block: 4px;\n\t\tborder-radius: 4px;\n\n\t\t>a {\n\t\t\tline-height: auto;\n\t\t}\n\t}\n\n\t&.YongDallTheme-tradition-menu-open {\n\t\tpadding-inline-start: var(--theme-sider-size);\n\n\t\t.YongDallTheme-activity {\n\t\t\tinset-inline-start: var(--theme-sider-size);\n\t\t}\n\t}\n\n\t@media screen and (max-width: 800px) {\n\n\t\t&.YongDallTheme-tradition-menu-open {\n\t\t\tpadding-inline-start: 0;\n\t\t\toverflow: hidden;\n\n\t\t\t.YongDallTheme-activity {\n\t\t\t\tinset-inline-start: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n\nbody.YongDallTheme-tradition .YongDallTheme-user {\n\tinline-size: 300px;\n\tinset-block-start: var(--YongDallTheme-tradition-nav-size);\n\tinset-inline-end: 0;\n\tmax-inline-size: 100dvw;\n\tmax-block-size: calc(100dvh - var(--YongDallTheme-tradition-nav-size));\n\tborder: #001529 1px solid;\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tinset-inline-start: auto;\n\tpadding: 0;\n}\n.YongDallTheme-tradition-header {\n\n\tposition: fixed;\n\tinset-inline: 0;\n\tinset-block-start: 0;\n\tblock-size: var(--YongDallTheme-tradition-nav-size);\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tcolor: var(--color-nav-text);\n\tbackground-color: var(--color-nav-bg);\n\tuser-select: none;\n\toverflow: auto;\n\tscrollbar-width: none;\n\n\n\t>* {\n\t\tflex-shrink: 0;\n\t\tbackground-color: inherit;\n\n\t}\n\n\t>span {\n\t\tflex: auto;\n\t}\n\n\n\ta:hover {\n\t\tcolor: var(--color-nav-text-highlight);\n\t}\n\n}\n\n.YongDallTheme-tradition-header-title {\n\tfont-weight: bold;\n\tfont-size: 1.2em;\n\tmargin-inline-start: .4em;\n}\n\n\n.YongDallTheme-tradition-menu-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: calc(var(--YongDallTheme-tradition-nav-size) * 0.6);\n\tblock-size: calc(var(--YongDallTheme-tradition-nav-size) * 0.6);\n\tmargin-inline: 4px;\n\ttext-align: center;\n\tposition: relative;\n\tborder-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;\n\n\n\n\n}\n.YongDallTheme-tradition-header .YongDallTheme-logo {\n\tdisplay: contents;\n\n}\n\nbody.YongDallTheme-tradition .YongDallTheme-logo > * {\n\tmax-block-size: 100%;\n}\nbody.YongDallTheme-tradition .YongDallTheme-user-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tinline-size: var(--YongDallTheme-tradition-button-size);\n\tline-height: var(--YongDallTheme-tradition-button-size);\n\tblock-size: 100%;\n\ttext-align: center;\n\tposition: relative;\n\tfont-size: var(--YongDallTheme-tradition-button-font-size);\n\tborder-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;\n\n\n\n\t>a {\n\t\tdisplay: block;\n\t\toverflow: hidden;\n\t\tinline-size: 100%;\n\t\tblock-size: 100%;\n\t}\n\n\n}\n\n\n\nbody.YongDallTheme-tradition .YongDallTheme-user-button img {\n\tposition: absolute;\n\tinset: 0;\n\tmargin: auto;\n\tmax-block-size: 100%;\n\tmax-inline-size: 100%;\n}\n\nbody.YongDallTheme-tradition .YongDallTheme-user-button,\n.YongDallTheme-tradition-button {\n\t&:hover {\n\t\tbackground-color: var(--color-nav-bg-highlight);\n\t}\n}\n\n.YongDallTheme-tradition-sidebar {\n\n\tposition: fixed;\n\tinset-block-start: var(--YongDallTheme-tradition-nav-size);\n\tinset-block-end: 0;\n\tinset-inline-start: 0;\n\tblock-size: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tz-index: 100000;\n\ttransition: bottom 0.5s;\n\n\ttransition: inline-size 0.2s;\n\tborder-inline-end: 1px solid #f0f0f0;\n\tbackground: rgba(0, 21, 41, 0.08);\n\toverflow: hidden;\n\tblock-size: calc(100% - var(--YongDallTheme-tradition-nav-size));\n\tmax-inline-size: var(--theme-sider-size);\n\tinline-size: 0;\n\n\t>* {\n\t\tinline-size: var(--theme-sider-size);\n\t\tblock-size: 100%;\n\t\tbackground: #fff;\n\t\tposition: relative;\n\t\toverflow: auto;\n\t}\n\n\t@media screen and (max-width: 800px) {\n\t\ttransition: none;\n\t\tmax-inline-size: initial;\n\t\tinline-size: 0;\n\n\n\t\t>* {\n\t\t\tmax-inline-size: 100%;\n\t\t}\n\t}\n}\n\n.YongDallTheme-tradition-menu-open .YongDallTheme-tradition-sidebar {\n\tinline-size: var(--theme-sider-size);\n\n\t@media screen and (max-width: 800px) {\n\t\tinline-size: 100vw;\n\t}\n\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA"}
/package/{theme-tradition.mjs → theme-base.mjs} RENAMED
File without changes