@yongdall/theme 0.1.0

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 (17) hide show
  1. package/assets.yongdall.mjs +6 -0
  2. package/hooks.mjs +69 -0
  3. package/hooks.mjs.map +1 -0
  4. package/hooks.yongdall.mjs +12 -0
  5. package/hooks.yongdall.mjs.map +1 -0
  6. package/index.mjs +749 -0
  7. package/index.mjs.map +1 -0
  8. package/package.json +18 -0
  9. package/style.css +203 -0
  10. package/style.css.map +1 -0
  11. package/style.mjs +0 -0
  12. package/theme-allSider.css +202 -0
  13. package/theme-allSider.css.map +1 -0
  14. package/theme-allSider.mjs +0 -0
  15. package/theme-tradition.css +242 -0
  16. package/theme-tradition.css.map +1 -0
  17. package/theme-tradition.mjs +0 -0
package/package.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "name": "@yongdall/theme",
3
+ "version": "0.1.0",
4
+ "exports": {
5
+ ".": "./index.mjs"
6
+ },
7
+ "dependencies": {
8
+ "@neeloong/components": "^0.7.0"
9
+ },
10
+ "devDependencies": {
11
+ "@yongdall/web": "^0.1.0"
12
+ },
13
+ "peerDependencies": {
14
+ "@yongdall/web": "^0.1.0"
15
+ },
16
+ "main": "./index.mjs",
17
+ "type": "module"
18
+ }
package/style.css ADDED
@@ -0,0 +1,203 @@
1
+ .YongDallTheme-activity-page {
2
+ display: flex;
3
+ /* margin: 5px; */
4
+ background-color: #DDD;
5
+ outline: 1px solid #3337;
6
+ flex-direction: row;
7
+ flex-wrap: nowrap;
8
+ align-content: center;
9
+ align-items: center;
10
+ /* border-radius: 5px; */
11
+ position: relative;
12
+ overflow: hidden;
13
+ }
14
+
15
+ .YongDallTheme-activity-title {
16
+ flex: 1;
17
+ padding-inline: 8px;
18
+ overflow: hidden;
19
+ text-overflow: ellipsis;
20
+ white-space: nowrap;
21
+ }
22
+ .YongDallTheme-activity-title::before {
23
+ content: '';
24
+
25
+ position: absolute;
26
+ inset: 0;
27
+ }
28
+
29
+ .YongDallTheme-activity-current {
30
+ background-color: #ADD;
31
+ }
32
+
33
+ .YongDallTheme-activity-close {
34
+ appearance: none;
35
+ background: none;
36
+ border: none;
37
+ inline-size: 40px;
38
+ block-size: 40px;
39
+ position: relative;
40
+ overflow: clip;
41
+ cursor: pointer;
42
+
43
+ &::before,
44
+ &::after {
45
+ position: absolute;
46
+ inset: 0;
47
+ margin: auto;
48
+ transform-origin: center center;
49
+ inline-size: 50%;
50
+ block-size: 6.25%;
51
+ border-radius: 1000px;
52
+ background-color: currentColor;
53
+
54
+ }
55
+
56
+ &::before {
57
+ transform: rotate(45deg);
58
+ }
59
+
60
+ &::after {
61
+ transform: rotate(-45deg);
62
+ }
63
+ }
64
+
65
+ .YongDallTheme-activity-page:hover,
66
+ .YongDallTheme-activity-current,
67
+ .YongDallTheme-activity-page:focus-within {
68
+
69
+ .YongDallTheme-activity-close {
70
+ display: block;
71
+
72
+ &::before,
73
+ &::after {
74
+ content: '';
75
+
76
+ }
77
+ }
78
+ }
79
+
80
+ .YongDallTheme-activity-unsaved .YongDallTheme-activity-close {
81
+ color: #AAAAAA;
82
+ display: block;
83
+
84
+ &::before,
85
+ &::after {
86
+ content: '';
87
+ inline-size: 25%;
88
+ block-size: 25%;
89
+ }
90
+ }
91
+
92
+ .YongDallTheme-activity-close {
93
+
94
+ &:hover,
95
+ &:focus {
96
+ color: #40a9ff;
97
+
98
+ &::before,
99
+ &::after {
100
+ inline-size: 50%;
101
+ block-size: 6.25%;
102
+ }
103
+ }
104
+ }
105
+
106
+
107
+ .YongDallTheme-user-info {
108
+ position: sticky;
109
+ top: 0;
110
+ background-color: #fff;
111
+ display: flex;
112
+ flex-direction: row;
113
+ font-size: 16px;
114
+ border-bottom: solid 1px #f0f0f0;
115
+ }
116
+
117
+ .YongDallTheme-user-info > * {
118
+ margin: auto;
119
+ }
120
+
121
+ .YongDallTheme-user-info .btns {
122
+ block-size: 40px;
123
+ margin-right: 8px;
124
+ font-size: 32px;
125
+ margin-left: auto;
126
+ align-items: center;
127
+ display: inline-flex;
128
+ gap: 8px;
129
+ }
130
+
131
+ .YongDallTheme-user-info .btns > * {
132
+ inline-size: 40px;
133
+ font-size: 32px;
134
+ color: inherit;
135
+ cursor: pointer;
136
+ }
137
+
138
+
139
+ .YongDallTheme-user-info .btns > *:hover {
140
+ color: var(--color-primary);
141
+ }
142
+
143
+ .avatar {
144
+ margin: 8px;
145
+ background: transparent;
146
+ box-sizing: border-box;
147
+ padding: 0;
148
+ font-variant: tabular-nums;
149
+ list-style: none;
150
+ font-feature-settings: 'tnum';
151
+ position: relative;
152
+ display: inline-block;
153
+ overflow: hidden;
154
+ white-space: nowrap;
155
+ text-align: center;
156
+ vertical-align: middle;
157
+ inline-size: 48px;
158
+ block-size: 48px;
159
+ line-height: 48px;
160
+ }
161
+
162
+ .username {
163
+ flex: 1;
164
+ overflow: hidden;
165
+ white-space: nowrap;
166
+ text-overflow: ellipsis;
167
+ }
168
+
169
+ .YongDallTheme-user-avatar {
170
+ position: relative;
171
+ & > img {
172
+ border-radius: 50%;
173
+ }
174
+ & > :last-child {
175
+ position: absolute;
176
+ inline-size: auto;
177
+ block-size: auto;
178
+ bottom: 0;
179
+ right: 0;
180
+ top: 60%;
181
+ left: 60%;
182
+ }
183
+ & > :first-child {
184
+ position: absolute;
185
+ inline-size: auto;
186
+ block-size: auto;
187
+ top: 0;
188
+ left: 0;
189
+ }
190
+ }
191
+
192
+
193
+ .YongDallTheme-logo {
194
+ color: var(--color-nav-logo);
195
+ }
196
+ .YongDallTheme-root {
197
+ min-block-size: 100%;
198
+ container-type: inline-size;
199
+ position: relative;
200
+ }
201
+
202
+
203
+ /*# sourceMappingURL=style.css.map*/
package/style.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.css","names":[],"sources":["../../packages/theme/pageManager/activity.css","../../packages/theme/user/user-menu.css","../../packages/theme/style.css"],"sourcesContent":[".YongDallTheme-activity-page {\n\tdisplay: flex;\n\t/* margin: 5px; */\n\tbackground-color: #DDD;\n\toutline: 1px solid #3337;\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\talign-content: center;\n\talign-items: center;\n\t/* border-radius: 5px; */\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.YongDallTheme-activity-title {\n\tflex: 1;\n\tpadding-inline: 8px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n.YongDallTheme-activity-title::before {\n\tcontent: '';\n\n\tposition: absolute;\n\tinset: 0;\n}\n\n.YongDallTheme-activity-current {\n\tbackground-color: #ADD;\n}\n\n.YongDallTheme-activity-close {\n\tappearance: none;\n\tbackground: none;\n\tborder: none;\n\tinline-size: 40px;\n\tblock-size: 40px;\n\tposition: relative;\n\toverflow: clip;\n\tcursor: pointer;\n\n\t&::before,\n\t&::after {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tmargin: auto;\n\t\ttransform-origin: center center;\n\t\tinline-size: 50%;\n\t\tblock-size: 6.25%;\n\t\tborder-radius: 1000px;\n\t\tbackground-color: currentColor;\n\n\t}\n\n\t&::before {\n\t\ttransform: rotate(45deg);\n\t}\n\n\t&::after {\n\t\ttransform: rotate(-45deg);\n\t}\n}\n\n.YongDallTheme-activity-page:hover,\n.YongDallTheme-activity-current,\n.YongDallTheme-activity-page:focus-within {\n\n\t.YongDallTheme-activity-close {\n\t\tdisplay: block;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tcontent: '';\n\n\t\t}\n\t}\n}\n\n.YongDallTheme-activity-unsaved .YongDallTheme-activity-close {\n\tcolor: #AAAAAA;\n\t\tdisplay: block;\n\n\t&::before,\n\t&::after {\n\t\tcontent: '';\n\t\tinline-size: 25%;\n\t\tblock-size: 25%;\n\t}\n}\n\n.YongDallTheme-activity-close {\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: #40a9ff;\n\n\t\t&::before,\n\t\t&::after {\n\t\t\tinline-size: 50%;\n\t\t\tblock-size: 6.25%;\n\t\t}\n\t}\n}\n","\n.YongDallTheme-user-info {\n\tposition: sticky;\n\ttop: 0;\n\tbackground-color: #fff;\n\tdisplay: flex;\n\tflex-direction: row;\n\tfont-size: 16px;\n\tborder-bottom: solid 1px #f0f0f0;\n}\n\n.YongDallTheme-user-info > * {\n\tmargin: auto;\n}\n\n.YongDallTheme-user-info .btns {\n\tblock-size: 40px;\n\tmargin-right: 8px;\n\tfont-size: 32px;\n\tmargin-left: auto;\n\talign-items: center;\n\tdisplay: inline-flex;\n\tgap: 8px;\n}\n\n.YongDallTheme-user-info .btns > * {\n\tinline-size: 40px;\n\tfont-size: 32px;\n\tcolor: inherit;\n\tcursor: pointer;\n}\n\n\n.YongDallTheme-user-info .btns > *:hover {\n\tcolor: var(--color-primary);\n}\n\n.avatar {\n\tmargin: 8px;\n\tbackground: transparent;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tfont-variant: tabular-nums;\n\tlist-style: none;\n\tfont-feature-settings: 'tnum';\n\tposition: relative;\n\tdisplay: inline-block;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-align: center;\n\tvertical-align: middle;\n\tinline-size: 48px;\n\tblock-size: 48px;\n\tline-height: 48px;\n}\n\n.username {\n\tflex: 1;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n}\n\n.YongDallTheme-user-avatar {\n\tposition: relative;\n\t& > img {\n\t\tborder-radius: 50%;\n\t}\n\t& > :last-child {\n\t\tposition: absolute;\n\t\tinline-size: auto;\n\t\tblock-size: auto;\n\t\tbottom: 0;\n\t\tright: 0;\n\t\ttop: 60%;\n\t\tleft: 60%;\n\t}\n\t& > :first-child {\n\t\tposition: absolute;\n\t\tinline-size: auto;\n\t\tblock-size: auto;\n\t\ttop: 0;\n\t\tleft: 0;\n\t}\n}\n","@import url('./pageManager/activity.css');\n@import url('./user/user-menu.css');\n\n.YongDallTheme-logo {\n\tcolor: var(--color-nav-logo);\n}\n.YongDallTheme-root {\n\tmin-block-size: 100%;\n\tcontainer-type: inline-size;\n\tposition: relative;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACtGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
package/style.mjs ADDED
File without changes
package/theme-allSider.css ADDED
@@ -0,0 +1,202 @@
1
+ body.YongDallTheme-allSider {
2
+ --YongDallTheme-allSider-nav-size: 48px;
3
+ --YongDallTheme-allSider-button-size: 40px;
4
+ --YongDallTheme-allSider-button-font-size: 20px;
5
+ --YongDallTheme-allSider-menu-button-size: 48px;
6
+ --YongDallTheme-allSider-menu-button-font-size: 32px;
7
+ --YongDallTheme-allSider-menu-button-inset: 20px;
8
+ --YongDallTheme-allSider-button-border-size: 2px;
9
+ padding-inline-start: var(--YongDallTheme-allSider-nav-size);
10
+ transition: padding-inline-start 0.2s;
11
+
12
+ .Page {
13
+ min-block-size: 100dvb;
14
+ }
15
+
16
+ .Page-mode-flex {
17
+ block-size: 100dvb;
18
+ }
19
+
20
+ &.YongDallTheme-allSider-nav-open {
21
+ padding-inline-start: calc(var(--YongDallTheme-allSider-nav-size) + var(--theme-sider-size));
22
+ }
23
+
24
+ @media screen and (max-width: 800px) {
25
+
26
+ &.YongDallTheme-allSider-nav-open {
27
+ padding-inline-start: var(--YongDallTheme-allSider-nav-size);
28
+ overflow: hidden;
29
+ }
30
+ }
31
+ .YongDallTheme-activity-page {
32
+ line-height: 40px;
33
+ }
34
+ }
35
+
36
+
37
+ .YongDallTheme-allSider-nav-header {
38
+ position: fixed;
39
+ bottom: 0;
40
+ inset-inline-start: 0;
41
+ block-size: 100%;
42
+ display: flex;
43
+ flex-direction: row;
44
+ z-index: 100000;
45
+ transition: bottom 0.5s;
46
+
47
+ }
48
+
49
+
50
+ .YongDallTheme-allSider-nav-actions {
51
+ inline-size: var(--YongDallTheme-allSider-nav-size);
52
+ position: relative;
53
+ display: flex;
54
+ flex-direction: column;
55
+ block-size: 100%;
56
+ align-items: center;
57
+ color: var(--color-nav-text);
58
+ background-color: var(--color-nav-bg);
59
+ user-select: none;
60
+ overflow: auto;
61
+ scrollbar-width: none;
62
+
63
+
64
+ >* {
65
+ flex-shrink: 0;
66
+ background-color: inherit;
67
+
68
+ }
69
+
70
+ >span {
71
+ flex: auto;
72
+ }
73
+
74
+ > :last-child {
75
+ position: sticky;
76
+ display: flex;
77
+ flex-direction: column;
78
+ inline-size: 100%;
79
+
80
+ inset-block-end: 0;
81
+ box-shadow: 0 0 20px 10px #fff5;
82
+ }
83
+
84
+ a:hover {
85
+ color: var(--color-nav-text-highlight);
86
+ }
87
+
88
+ }
89
+
90
+
91
+ .YongDallTheme-allSider-nav-group {
92
+ display: contents;
93
+ }
94
+
95
+
96
+ .YongDallTheme-allSider-nav-actions .YongDallTheme-logo {
97
+ flex-shrink: 0;
98
+ overflow: hidden;
99
+ cursor: pointer;
100
+ block-size: var(--YongDallTheme-allSider-button-size);
101
+ line-height: var(--YongDallTheme-allSider-button-size);
102
+ inline-size: 100%;
103
+ text-align: center;
104
+ position: relative;
105
+
106
+
107
+ svg, img {
108
+ position: absolute;
109
+ inset: 0;
110
+ margin: auto;
111
+ max-block-size: 40px;
112
+ max-inline-size: 40px;
113
+ }
114
+
115
+ }
116
+
117
+ .YongDallTheme-allSider-nav-button {
118
+ flex-shrink: 0;
119
+ overflow: hidden;
120
+ cursor: pointer;
121
+ block-size: var(--YongDallTheme-allSider-button-size);
122
+ line-height: var(--YongDallTheme-allSider-button-size);
123
+ inline-size: 100%;
124
+ text-align: center;
125
+ position: relative;
126
+ font-size: var(--YongDallTheme-allSider-button-font-size);
127
+ border-inline: var(--YongDallTheme-allSider-button-border-size) solid transparent;
128
+
129
+ &[hidden] {
130
+ display: none;
131
+ }
132
+
133
+
134
+ >a {
135
+ display: block;
136
+ overflow: hidden;
137
+ inline-size: 100%;
138
+ block-size: 100%;
139
+ }
140
+
141
+ &.YongDallTheme-allSider-nav-selectable:hover {
142
+ background-color: var(--color-nav-bg-highlight);
143
+ }
144
+
145
+ &.YongDallTheme-allSider-nav-selected {
146
+ background-color: var(--color-nav-bg-highlight);
147
+ border-inline-end-color: currentColor;
148
+ }
149
+ }
150
+ .YongDallTheme-allSider-nav-button:not(.YongDallTheme-user-button) {
151
+ display: flex;
152
+
153
+ align-items: center;
154
+ justify-content: space-evenly;
155
+
156
+
157
+ >svg:only-child, >img:only-child {
158
+ block-size: 80%;
159
+ }
160
+
161
+ }
162
+
163
+ .YongDallTheme-allSider-nav-sidebar {
164
+ transition: inline-size 0.2s;
165
+ border-inline-end: 1px solid #f0f0f0;
166
+ background: rgba(0, 21, 41, 0.08);
167
+ overflow: hidden;
168
+ block-size: 100%;
169
+ max-inline-size: var(--theme-sider-size);
170
+ inline-size: 0;
171
+
172
+ >* {
173
+ inline-size: var(--theme-sider-size);
174
+ block-size: 100%;
175
+ background: #fff;
176
+ position: relative;
177
+ overflow: auto;
178
+ }
179
+
180
+ @media screen and (max-width: 800px) {
181
+ transition: none;
182
+ max-inline-size: initial;
183
+ inline-size: 0;
184
+
185
+
186
+ >* {
187
+ max-inline-size: 100%;
188
+ }
189
+ }
190
+ }
191
+
192
+ .YongDallTheme-allSider-nav-open .YongDallTheme-allSider-nav-sidebar {
193
+ inline-size: var(--theme-sider-size);
194
+
195
+ @media screen and (max-width: 800px) {
196
+ inline-size: calc(100vw - var(--YongDallTheme-allSider-nav-size));
197
+ }
198
+
199
+ }
200
+
201
+
202
+ /*# sourceMappingURL=theme-allSider.css.map*/
package/theme-allSider.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-allSider.css","names":[],"sources":["../../packages/theme/theme-allSider.css"],"sourcesContent":["body.YongDallTheme-allSider {\n\t--YongDallTheme-allSider-nav-size: 48px;\n\t--YongDallTheme-allSider-button-size: 40px;\n\t--YongDallTheme-allSider-button-font-size: 20px;\n\t--YongDallTheme-allSider-menu-button-size: 48px;\n\t--YongDallTheme-allSider-menu-button-font-size: 32px;\n\t--YongDallTheme-allSider-menu-button-inset: 20px;\n\t--YongDallTheme-allSider-button-border-size: 2px;\n\tpadding-inline-start: var(--YongDallTheme-allSider-nav-size);\n\ttransition: padding-inline-start 0.2s;\n\n\t.Page {\n\t\tmin-block-size: 100dvb;\n\t}\n\n\t.Page-mode-flex {\n\t\tblock-size: 100dvb;\n\t}\n\n\t&.YongDallTheme-allSider-nav-open {\n\t\tpadding-inline-start: calc(var(--YongDallTheme-allSider-nav-size) + var(--theme-sider-size));\n\t}\n\n\t@media screen and (max-width: 800px) {\n\n\t\t&.YongDallTheme-allSider-nav-open {\n\t\t\tpadding-inline-start: var(--YongDallTheme-allSider-nav-size);\n\t\t\toverflow: hidden;\n\t\t}\n\t}\n\t.YongDallTheme-activity-page {\n\t\tline-height: 40px;\n\t}\n}\n\n\n.YongDallTheme-allSider-nav-header {\n\tposition: fixed;\n\tbottom: 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}\n\n\n.YongDallTheme-allSider-nav-actions {\n\tinline-size: var(--YongDallTheme-allSider-nav-size);\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tblock-size: 100%;\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\t> :last-child {\n\t\tposition: sticky;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tinline-size: 100%;\n\n\t\tinset-block-end: 0;\n\t\tbox-shadow: 0 0 20px 10px #fff5;\n\t}\n\n\ta:hover {\n\t\tcolor: var(--color-nav-text-highlight);\n\t}\n\n}\n\n\n.YongDallTheme-allSider-nav-group {\n\tdisplay: contents;\n}\n\n\n.YongDallTheme-allSider-nav-actions .YongDallTheme-logo {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tblock-size: var(--YongDallTheme-allSider-button-size);\n\tline-height: var(--YongDallTheme-allSider-button-size);\n\tinline-size: 100%;\n\ttext-align: center;\n\tposition: relative;\n\n\n\tsvg, img {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tmargin: auto;\n\t\tmax-block-size: 40px;\n\t\tmax-inline-size: 40px;\n\t}\n\n}\n\n.YongDallTheme-allSider-nav-button {\n\tflex-shrink: 0;\n\toverflow: hidden;\n\tcursor: pointer;\n\tblock-size: var(--YongDallTheme-allSider-button-size);\n\tline-height: var(--YongDallTheme-allSider-button-size);\n\tinline-size: 100%;\n\ttext-align: center;\n\tposition: relative;\n\tfont-size: var(--YongDallTheme-allSider-button-font-size);\n\tborder-inline: var(--YongDallTheme-allSider-button-border-size) solid transparent;\n\n\t&[hidden] {\n\t\tdisplay: none;\n\t}\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\t&.YongDallTheme-allSider-nav-selectable:hover {\n\t\tbackground-color: var(--color-nav-bg-highlight);\n\t}\n\n\t&.YongDallTheme-allSider-nav-selected {\n\t\tbackground-color: var(--color-nav-bg-highlight);\n\t\tborder-inline-end-color: currentColor;\n\t}\n}\n.YongDallTheme-allSider-nav-button:not(.YongDallTheme-user-button) {\n\tdisplay: flex;\n\n\talign-items: center;\n\tjustify-content: space-evenly;\n\n\n\t>svg:only-child, >img:only-child {\n\t\tblock-size: 80%;\n\t}\n\n}\n\n.YongDallTheme-allSider-nav-sidebar {\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: 100%;\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-allSider-nav-open .YongDallTheme-allSider-nav-sidebar {\n\tinline-size: var(--theme-sider-size);\n\n\t@media screen and (max-width: 800px) {\n\t\tinline-size: calc(100vw - var(--YongDallTheme-allSider-nav-size));\n\t}\n\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;AAGA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;AAGA;AACA;AACA;;AAEA;;AAEA;AACA;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-allSider.mjs ADDED
File without changes
package/theme-tradition.css ADDED
@@ -0,0 +1,242 @@
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;
10
+
11
+ padding-inline-start: 0;
12
+ padding-block-start: calc(var(--YongDallTheme-tradition-nav-size) + var(--YongDallTheme-tradition-activity-size));
13
+ transition: padding-inline-start 0.2s;
14
+
15
+ .Page {
16
+ min-block-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));
17
+ }
18
+
19
+ .Page-mode-flex {
20
+ block-size: calc(100dvb - var(--YongDallTheme-tradition-nav-size) - var(--YongDallTheme-tradition-activity-size));
21
+ }
22
+ .Page-sides {
23
+ min-inline-size: 200px;
24
+ }
25
+
26
+ .YongDallTheme-activity {
27
+ position: fixed;
28
+ inset-inline: 0;
29
+ inset-block-start: var(--YongDallTheme-tradition-nav-size);
30
+ block-size: var(--YongDallTheme-tradition-activity-size);
31
+ display: flex;
32
+ flex-direction: row;
33
+ overflow: scroll;
34
+ overflow-y: hidden;
35
+ scrollbar-width: thin;
36
+ z-index: 10000;
37
+ background: var(--color-global-background);
38
+ }
39
+
40
+ .YongDallTheme-activity-page {
41
+ max-inline-size: 300px;
42
+ min-inline-size: 100px;
43
+ margin-inline: 4px;
44
+ margin-block: 4px;
45
+ border-radius: 4px;
46
+
47
+ >a {
48
+ line-height: auto;
49
+ }
50
+ }
51
+
52
+ &.YongDallTheme-tradition-menu-open {
53
+ padding-inline-start: var(--theme-sider-size);
54
+
55
+ .YongDallTheme-activity {
56
+ inset-inline-start: var(--theme-sider-size);
57
+ }
58
+ }
59
+
60
+ @media screen and (max-width: 800px) {
61
+
62
+ &.YongDallTheme-tradition-menu-open {
63
+ padding-inline-start: 0;
64
+ overflow: hidden;
65
+
66
+ .YongDallTheme-activity {
67
+ inset-inline-start: 0;
68
+ }
69
+ }
70
+ }
71
+ }
72
+
73
+ body.YongDallTheme-tradition .YongDallTheme-user {
74
+ inline-size: 300px;
75
+ inset-block-start: var(--YongDallTheme-tradition-nav-size);
76
+ inset-inline-end: 0;
77
+ max-inline-size: 100dvw;
78
+ max-block-size: calc(100dvh - var(--YongDallTheme-tradition-nav-size));
79
+ border: #001529 1px solid;
80
+ box-sizing: border-box;
81
+ margin: 0;
82
+ inset-inline-start: auto;
83
+ padding: 0;
84
+ }
85
+ .YongDallTheme-tradition-header {
86
+
87
+ position: fixed;
88
+ inset-inline: 0;
89
+ inset-block-start: 0;
90
+ block-size: var(--YongDallTheme-tradition-nav-size);
91
+ z-index: 100000;
92
+ transition: bottom 0.5s;
93
+
94
+ display: flex;
95
+ flex-direction: row;
96
+ align-items: center;
97
+ color: var(--color-nav-text);
98
+ background-color: var(--color-nav-bg);
99
+ user-select: none;
100
+ overflow: auto;
101
+ scrollbar-width: none;
102
+
103
+
104
+ >* {
105
+ flex-shrink: 0;
106
+ background-color: inherit;
107
+
108
+ }
109
+
110
+ >span {
111
+ flex: auto;
112
+ }
113
+
114
+
115
+ a:hover {
116
+ color: var(--color-nav-text-highlight);
117
+ }
118
+
119
+ }
120
+
121
+ .YongDallTheme-tradition-header-title {
122
+ font-weight: bold;
123
+ font-size: 1.2em;
124
+ margin-inline-start: .4em;
125
+ }
126
+
127
+
128
+ .YongDallTheme-tradition-menu-button {
129
+ flex-shrink: 0;
130
+ overflow: hidden;
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);
134
+ margin-inline: 4px;
135
+ text-align: center;
136
+ position: relative;
137
+ border-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;
138
+
139
+
140
+
141
+
142
+ }
143
+ .YongDallTheme-tradition-header .YongDallTheme-logo {
144
+ display: contents;
145
+
146
+ }
147
+
148
+ body.YongDallTheme-tradition .YongDallTheme-logo > * {
149
+ max-block-size: 100%;
150
+ }
151
+ body.YongDallTheme-tradition .YongDallTheme-user-button {
152
+ flex-shrink: 0;
153
+ overflow: hidden;
154
+ cursor: pointer;
155
+ inline-size: var(--YongDallTheme-tradition-button-size);
156
+ line-height: var(--YongDallTheme-tradition-button-size);
157
+ block-size: 100%;
158
+ text-align: center;
159
+ position: relative;
160
+ font-size: var(--YongDallTheme-tradition-button-font-size);
161
+ border-block: var(--YongDallTheme-tradition-button-border-size) solid transparent;
162
+
163
+
164
+
165
+ >a {
166
+ display: block;
167
+ overflow: hidden;
168
+ inline-size: 100%;
169
+ block-size: 100%;
170
+ }
171
+
172
+
173
+ }
174
+
175
+
176
+
177
+ body.YongDallTheme-tradition .YongDallTheme-user-button img {
178
+ position: absolute;
179
+ inset: 0;
180
+ margin: auto;
181
+ max-block-size: 100%;
182
+ max-inline-size: 100%;
183
+ }
184
+
185
+ body.YongDallTheme-tradition .YongDallTheme-user-button,
186
+ .YongDallTheme-tradition-button {
187
+ &:hover {
188
+ background-color: var(--color-nav-bg-highlight);
189
+ }
190
+ }
191
+
192
+ .YongDallTheme-tradition-sidebar {
193
+
194
+ position: fixed;
195
+ inset-block-start: var(--YongDallTheme-tradition-nav-size);
196
+ inset-block-end: 0;
197
+ inset-inline-start: 0;
198
+ block-size: 100%;
199
+ display: flex;
200
+ flex-direction: row;
201
+ z-index: 100000;
202
+ transition: bottom 0.5s;
203
+
204
+ transition: inline-size 0.2s;
205
+ border-inline-end: 1px solid #f0f0f0;
206
+ background: rgba(0, 21, 41, 0.08);
207
+ overflow: hidden;
208
+ block-size: calc(100% - var(--YongDallTheme-tradition-nav-size));
209
+ max-inline-size: var(--theme-sider-size);
210
+ inline-size: 0;
211
+
212
+ >* {
213
+ inline-size: var(--theme-sider-size);
214
+ block-size: 100%;
215
+ background: #fff;
216
+ position: relative;
217
+ overflow: auto;
218
+ }
219
+
220
+ @media screen and (max-width: 800px) {
221
+ transition: none;
222
+ max-inline-size: initial;
223
+ inline-size: 0;
224
+
225
+
226
+ >* {
227
+ max-inline-size: 100%;
228
+ }
229
+ }
230
+ }
231
+
232
+ .YongDallTheme-tradition-menu-open .YongDallTheme-tradition-sidebar {
233
+ inline-size: var(--theme-sider-size);
234
+
235
+ @media screen and (max-width: 800px) {
236
+ inline-size: 100vw;
237
+ }
238
+
239
+ }
240
+
241
+
242
+ /*# sourceMappingURL=theme-tradition.css.map*/
package/theme-tradition.css.map ADDED
@@ -0,0 +1 @@
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 ADDED
File without changes