layerpro 3.0.0 → 3.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 (8) hide show
  1. package/README.md +116 -14
  2. package/index.cjs +346 -317
  3. package/index.css +63 -45
  4. package/index.js +346 -315
  5. package/llms.txt +2 -2
  6. package/markdown/GUIDE.md +72 -20
  7. package/package.json +1 -7
  8. package/types/layerpro.d.ts +36 -25
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* styles/index.scss */
1
+ /* scss/index.scss */
2
2
  :root {
3
3
  --input-background-color: #444;
4
4
  --input-color: white;
@@ -13,6 +13,33 @@
13
13
  --dock-sideCenter: auto;
14
14
  --dock-sideRight: 10px;
15
15
  --dock-icon-width: 140px;
16
+ --bar-background:
17
+ linear-gradient(
18
+ 45deg,
19
+ #4a4a4f 60%,
20
+ #AAA 100%);
21
+ --bar-selected-background:
22
+ linear-gradient(
23
+ 45deg,
24
+ #162858 60%,
25
+ #224e918a 100%);
26
+ --bar-color: #eee;
27
+ --bar-border-bottom: 2px solid #555;
28
+ --bar-shadow: 0 1px 1px #888;
29
+ --window-background: gray;
30
+ --window-shadow: 0 0 10px rgba(0, 0, 0, .3);
31
+ --window-border-radius: 10px;
32
+ --window-z-high-border: #278ed0;
33
+ --window-z-high-shadow: 0 0 15px rgba(0, 0, 0, .7);
34
+ --internal-background:
35
+ linear-gradient(
36
+ 0deg,
37
+ rgba(60, 60, 60, 1) 0%,
38
+ #4a4a4f 100%);
39
+ --body-color: #eee;
40
+ --body-background: transparent;
41
+ --raised-background: rgba(0, 0, 0, .3);
42
+ --popup-z-index: 1000;
16
43
  --transition-time: .5s;
17
44
  --border-radius: 25px;
18
45
  --corner-size: 14px;
@@ -92,73 +119,66 @@
92
119
  text-shadow: 0 0 15px rgb(255, 255, 255), 0 0 3px rgb(255, 255, 255);
93
120
  }
94
121
  #popup .popup_bar_selected {
95
- background:
96
- linear-gradient(
97
- 45deg,
98
- #162858 60%,
99
- rgba(34, 78, 145, 0.5411764706) 100%) !important;
122
+ background: var(--bar-selected-background) !important;
100
123
  }
101
124
  #popup .zHigh {
102
- border-top-color: #278ed0 !important;
103
- box-shadow: 0 -15px 20px -10px rgba(30, 150, 255, 0.5), 0 0 15px rgba(0, 0, 0, 0.7) !important;
125
+ border-top-color: var(--window-z-high-border) !important;
126
+ box-shadow: var(--window-z-high-shadow) !important;
104
127
  border: 1px solid rgba(0, 0, 0, 0.05);
105
128
  }
106
- #popup [class^=popup_raised_] {
129
+ #popup [class*=popup_raised_] {
107
130
  position: absolute;
108
131
  inset: 0;
109
132
  width: 100%;
110
133
  height: 100%;
111
- background-color: rgba(0, 0, 0, 0.3);
134
+ background-color: var(--raised-background);
112
135
  z-index: 1;
113
136
  }
114
- #popup [class^=popup_window_] {
137
+ #popup [class*=popup_window_] {
115
138
  position: absolute;
116
139
  inset: 0;
117
140
  width: 100%;
118
141
  height: 100%;
119
142
  z-index: 2;
120
- border-radius: 10px;
121
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
143
+ border-radius: var(--window-border-radius);
144
+ box-shadow: var(--window-shadow);
122
145
  overflow: hidden;
123
146
  }
124
- #popup [class^=popup_overflow_] {
147
+ #popup [class*=popup_overflow_] {
125
148
  position: absolute;
126
149
  inset: auto;
127
150
  z-index: 3;
128
- border-radius: 10px;
129
- background: gray;
151
+ border-radius: var(--window-border-radius);
152
+ background: var(--window-background);
130
153
  }
131
- #popup [class^=popup_bar_] {
154
+ #popup .popup_bar,
155
+ #popup [class*=popup_bar_] {
132
156
  display: flex;
133
157
  width: 100%;
134
158
  height: 36px;
135
- background:
136
- linear-gradient(
137
- 45deg,
138
- #4a4a4f 60%,
139
- #AAA 100%);
140
- border-bottom: 2px solid #555;
141
- box-shadow: 0 1px 1px #888;
159
+ background: var(--bar-background);
160
+ border-bottom: var(--bar-border-bottom);
161
+ box-shadow: var(--bar-shadow);
142
162
  z-index: 2;
143
163
  }
144
- #popup [class^=popup_drag_] {
164
+ #popup [class*=popup_drag_] {
145
165
  width: 100%;
146
166
  padding: 10px 0 0 10px;
147
- color: #eee;
167
+ color: var(--bar-color);
148
168
  text-overflow: ellipsis;
149
169
  white-space: nowrap;
150
170
  overflow: hidden;
151
171
  }
152
- #popup [class^=popup_icon_] {
172
+ #popup [class*=popup_icon_] {
153
173
  padding: 8px 0 0 10px;
154
- color: #eee;
174
+ color: var(--bar-color);
155
175
  font-size: 1.1em;
156
176
  }
157
- #popup [class^=popup_option_] {
177
+ #popup [class*=popup_option_] {
158
178
  display: flex;
159
179
  margin-right: 15px;
160
180
  }
161
- #popup [class^=popup_option_] button {
181
+ #popup [class*=popup_option_] button {
162
182
  position: relative;
163
183
  display: inline-block;
164
184
  width: 36px;
@@ -169,14 +189,14 @@
169
189
  transition: all 0.3s ease;
170
190
  background: transparent;
171
191
  }
172
- #popup [class^=popup_option_] button img {
192
+ #popup [class*=popup_option_] button img {
173
193
  filter: invert(1);
174
194
  opacity: 0.5;
175
195
  width: 15px;
176
196
  height: auto;
177
197
  margin-top: 2px;
178
198
  }
179
- #popup [class^=popup_option_] button:after {
199
+ #popup [class*=popup_option_] button:after {
180
200
  content: "";
181
201
  inset: 0;
182
202
  display: block;
@@ -189,40 +209,38 @@
189
209
  border-radius: 5px;
190
210
  z-index: -1;
191
211
  }
192
- #popup [class^=popup_option_] button:after {
212
+ #popup [class*=popup_option_] button:after {
193
213
  opacity: 0;
194
214
  transition: opacity 0.3s ease-in-out;
195
215
  }
196
- #popup [class^=popup_option_] button:hover {
216
+ #popup [class*=popup_option_] button:hover {
197
217
  background: rgba(255, 255, 255, 0.1);
198
218
  box-shadow: inset 0 0 5px rgb(0, 0, 0);
199
219
  text-shadow: 0 0 15px rgb(255, 255, 255), 0 0 3px rgb(255, 255, 255);
200
220
  }
201
- #popup [class^=popup_option_] button:hover::after {
221
+ #popup [class*=popup_option_] button:hover::after {
202
222
  opacity: 1;
203
223
  }
204
- #popup [class^=popup_option_] button [class^=button_close_]:hover {
224
+ #popup [class*=popup_option_] button [class*=button_close_]:hover {
205
225
  background: rgb(255, 0, 0) !important;
206
226
  box-shadow: inset 0 0 25px rgb(255, 255, 255), 0 0 35px rgb(255, 0, 0) !important;
207
227
  }
208
- #popup [class^=button_close_]:hover {
228
+ #popup [class*=button_close_]:hover {
209
229
  background: rgb(255, 0, 0) !important;
210
230
  box-shadow: inset 0 0 25px rgb(255, 255, 255), 0 0 35px rgb(255, 0, 0) !important;
211
231
  }
212
- #popup [class^=popup_internal_] {
232
+ #popup [class*=popup_internal_] {
213
233
  position: absolute;
214
234
  inset: 37px 0 0 0;
215
235
  z-index: 1;
216
- background:
217
- linear-gradient(
218
- 0deg,
219
- rgb(60, 60, 60) 0%,
220
- #4a4a4f 100%);
236
+ background: var(--internal-background);
221
237
  }
222
- #popup [class^=popup_body_] {
238
+ #popup .popup_body,
239
+ #popup [class*=popup_body_] {
223
240
  position: absolute;
224
241
  inset: 0;
225
- color: #eee;
242
+ color: var(--body-color);
243
+ background: var(--body-background);
226
244
  text-align: center;
227
245
  }
228
246
  .popupMaxSize {