@bagelink/vue 0.0.988 → 0.0.992

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 (44) hide show
  1. package/dist/components/Btn.vue.d.ts.map +1 -1
  2. package/dist/components/Loading.vue.d.ts +16 -0
  3. package/dist/components/Loading.vue.d.ts.map +1 -0
  4. package/dist/components/form/BglField.vue.d.ts.map +1 -1
  5. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts +12 -57
  6. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts.map +1 -1
  7. package/dist/components/form/inputs/FileUpload.vue.d.ts.map +1 -1
  8. package/dist/components/form/inputs/RichText/components/gridBox.vue.d.ts +3 -7
  9. package/dist/components/form/inputs/RichText/components/gridBox.vue.d.ts.map +1 -1
  10. package/dist/components/form/inputs/RichText/composables/useEditor.d.ts.map +1 -1
  11. package/dist/components/form/inputs/RichText/index.vue.d.ts.map +1 -1
  12. package/dist/components/form/inputs/RichText/utils/table.d.ts +2 -1
  13. package/dist/components/form/inputs/RichText/utils/table.d.ts.map +1 -1
  14. package/dist/components/index.d.ts +1 -0
  15. package/dist/components/index.d.ts.map +1 -1
  16. package/dist/components/layout/TabsNav.vue.d.ts.map +1 -1
  17. package/dist/editor-a8DSbb6P.js +4 -0
  18. package/dist/editor-xBt_vIha.cjs +4 -0
  19. package/dist/index.cjs +10289 -48576
  20. package/dist/index.mjs +10290 -48577
  21. package/dist/style.css +815 -20218
  22. package/package.json +6 -34
  23. package/src/components/Btn.vue +110 -136
  24. package/src/components/Loading.vue +177 -0
  25. package/src/components/form/BglField.vue +2 -0
  26. package/src/components/form/inputs/CodeEditor/Index.vue +77 -400
  27. package/src/components/form/inputs/CodeEditor/format.ts +2 -2
  28. package/src/components/form/inputs/FileUpload.vue +2 -1
  29. package/src/components/form/inputs/RichText/components/gridBox.vue +37 -8
  30. package/src/components/form/inputs/RichText/composables/useEditor.ts +11 -4
  31. package/src/components/form/inputs/RichText/config.ts +1 -1
  32. package/src/components/form/inputs/RichText/editor.css +14 -14
  33. package/src/components/form/inputs/RichText/index.vue +11 -10
  34. package/src/components/form/inputs/RichText/utils/table.ts +60 -58
  35. package/src/components/index.ts +2 -2
  36. package/src/components/layout/TabsNav.vue +1 -0
  37. package/src/styles/theme.css +256 -256
  38. package/src/components/form/inputs/CodeEditor/themes/brown-papersq.png +0 -0
  39. package/src/components/form/inputs/CodeEditor/themes/pojoaque.jpg +0 -0
  40. package/src/components/form/inputs/CodeEditor/themes/themes-base16.css +0 -12809
  41. package/src/components/form/inputs/CodeEditor/themes/themes.css +0 -6740
  42. package/src/components/formkit/FileUploader.vue +0 -406
  43. package/src/components/formkit/MiscFields.vue +0 -74
  44. package/src/components/formkit/Toggle.vue +0 -149
@@ -3,372 +3,372 @@
3
3
 
4
4
  /* TEHEME */
5
5
  :root {
6
- --bgl-primary: #2e5bff;
7
- --bgl-primary-tint: #2e5bff80;
8
- --bgl-primary-light: #eef6ff;
9
- --bgl-black: #282929;
10
- --bgl-black-tint: #28292980;
11
- --bgl-white: #fff;
12
- --bgl-gray: #b7b7b7;
13
- --bgl-gray-light: #f5f8fa;
14
- --bgl-gray-80: #e8ecef;
15
- --bgl-gray-20: rgba(183, 183, 183, 0.2);
16
- --bgl-gray-40: rgba(183, 183, 183, 0.4);
17
- --bgl-accent-color: var(--bgl-primary);
18
- --bgl-bg: #f4f6fa;
19
- --bgl-shadow: #00000031;
20
- --border-color: #00000020;
21
- --placeholder-color: #00000040;
22
- --label-color: #00000080;
23
- --input-bg: #f5f8fa;
24
- --input-color: #000000;
25
- --bgl-box-bg: var(--bgl-white);
26
- --bgl-popup-bg: var(--bgl-white);
27
- --bgl-popup-text: var(--bgl-black);
28
- --bgl-text-color: var(--bgl-black);
29
- --bgl-light-text: var(--bgl-white);
30
- --bgl-richtext-color: var(--bgl-white);
31
- --bgl-code-bg: var(--bgl-black);
32
- --bgl-code-color: var(--bgl-white);
33
- --bgl-dark-bg: rgba(0, 0, 0, 0.7);
34
- --bgl-selection-bg: var(--bgl-blue-dark);
35
- --bgl-selection-color: var(--bgl-white);
36
- --bgl-scrollbar-thumb: var(--bgl-gray);
37
- --pill-btn-color: var(--bgl-white);
38
- --pill-btn-bg: var(--placeholder-color);
39
- --bgl-selected: var(--bgl-gray-light);
40
- --skeleton-bg: #f0f0f0;
41
- --skeleton-pulse: var(--bgl-bg);
6
+ --bgl-primary: var(--bgl-blue);
7
+ --bgl-primary-tint: #2e5bff80;
8
+ --bgl-primary-light: #eef6ff;
9
+ --bgl-black: #282929;
10
+ --bgl-black-tint: #28292980;
11
+ --bgl-white: #fff;
12
+ --bgl-gray: #b7b7b7;
13
+ --bgl-gray-light: #f5f8fa;
14
+ --bgl-gray-80: #e8ecef;
15
+ --bgl-gray-20: rgba(183, 183, 183, 0.2);
16
+ --bgl-gray-40: rgba(183, 183, 183, 0.4);
17
+ --bgl-accent-color: var(--bgl-primary);
18
+ --bgl-bg: #f4f6fa;
19
+ --bgl-shadow: #00000031;
20
+ --border-color: #00000020;
21
+ --placeholder-color: #00000040;
22
+ --label-color: #00000080;
23
+ --input-bg: #f5f8fa;
24
+ --input-color: #000000;
25
+ --bgl-box-bg: var(--bgl-white);
26
+ --bgl-popup-bg: var(--bgl-white);
27
+ --bgl-popup-text: var(--bgl-black);
28
+ --bgl-text-color: var(--bgl-black);
29
+ --bgl-light-text: var(--bgl-white);
30
+ --bgl-richtext-color: var(--bgl-white);
31
+ --bgl-code-bg: var(--bgl-black);
32
+ --bgl-code-color: var(--bgl-white);
33
+ --bgl-dark-bg: rgba(0, 0, 0, 0.7);
34
+ --bgl-selection-bg: var(--bgl-blue-dark);
35
+ --bgl-selection-color: var(--bgl-white);
36
+ --bgl-scrollbar-thumb: var(--bgl-gray);
37
+ --pill-btn-color: var(--bgl-white);
38
+ --pill-btn-bg: var(--placeholder-color);
39
+ --bgl-selected: var(--bgl-gray-light);
40
+ --skeleton-bg: #f0f0f0;
41
+ --skeleton-pulse: var(--bgl-bg);
42
42
  }
43
43
 
44
44
  /* TYPE */
45
45
  :root {
46
- --bgl-font: 'Lexend', 'Ploni', sans-serif;
47
- --input-font-size: 16px;
46
+ --bgl-font: 'Lexend', 'Ploni', sans-serif;
47
+ --input-font-size: 16px;
48
48
  }
49
49
 
50
50
  /* DIMENSIONS */
51
51
  :root {
52
- --bgl-font-size: 16px;
53
- --input-height: 40px;
54
- --label-font-size: 12px;
55
- --input-border-radius: 7px;
56
- --card-border-radius: 12px;
57
- --btn-border-radius: 10px;
58
- --btn-padding: 30px;
59
- --btn-height: 40px;
60
- --pill-border-radius: 8px;
61
- --pill-height: 30px;
62
- --skeleton-radius: 0.25rem;
63
- --skeleton-margin: 1rem;
52
+ --bgl-font-size: 16px;
53
+ --input-height: 40px;
54
+ --label-font-size: 12px;
55
+ --input-border-radius: 7px;
56
+ --card-border-radius: 12px;
57
+ --btn-border-radius: 10px;
58
+ --btn-padding: 30px;
59
+ --btn-height: 40px;
60
+ --pill-border-radius: 8px;
61
+ --pill-height: 30px;
62
+ --skeleton-radius: 0.25rem;
63
+ --skeleton-margin: 1rem;
64
64
  }
65
65
 
66
66
  /* MISC */
67
67
  :root {
68
- --bgl-transition: all 200ms ease;
69
- --bgl-transition-400: all 400ms ease;
70
- --bgl-hover-filter: brightness(90%);
71
- --bgl-active-filter: brightness(70%);
68
+ --bgl-transition: all 200ms ease;
69
+ --bgl-transition-400: all 400ms ease;
70
+ --bgl-hover-filter: brightness(90%);
71
+ --bgl-active-filter: brightness(70%);
72
72
  }
73
73
 
74
74
  /* OTHER COLORS */
75
75
  :root {
76
- --bgl-blue-20: rgba(46, 91, 255, 20%);
77
- --bgl-blue-dark: #191c30;
78
- --bgl-blue-light: #eef6ff;
79
- --bgl-pink: #f1416c;
80
- --bgl-red: #ed6c6f;
81
- --bgl-red-tint: #fbe2e2;
82
- --bgl-yellow: #ffbb00;
83
- --bgl-yellow-light: #fff6d5;
84
- --bgl-green: #75c98f;
85
- --whatsapp-gray: #89959f;
86
- --whatsapp-green: #e0fcd6;
87
- --whatsapp-blue: #71bce6;
76
+ --bgl-blue: #2e5bff;
77
+ --bgl-blue-20: rgba(46, 91, 255, 20%);
78
+ --bgl-blue-dark: #191c30;
79
+ --bgl-blue-light: #eef6ff;
80
+ --bgl-pink: #f1416c;
81
+ --bgl-red: #ed6c6f;
82
+ --bgl-red-tint: #fbe2e2;
83
+ --bgl-yellow: #ffbb00;
84
+ --bgl-yellow-light: #fff6d5;
85
+ --bgl-green: #75c98f;
86
+ --whatsapp-gray: #89959f;
87
+ --whatsapp-green: #e0fcd6;
88
+ --whatsapp-blue: #71bce6;
88
89
  }
89
90
 
90
-
91
91
  .testMe * {
92
- outline: 1px dotted red;
92
+ outline: 1px dotted red;
93
93
  }
94
94
 
95
95
  .Vue-Toastification__toast {
96
- border-radius: var(--card-border-radius);
97
- box-shadow: none;
96
+ border-radius: var(--card-border-radius);
97
+ box-shadow: none;
98
98
  }
99
99
 
100
100
  .Vue-Toastification__toast--default {
101
- background: var(--bgl-primary);
101
+ background: var(--bgl-primary);
102
102
  }
103
103
 
104
104
  .Vue-Toastification__close-button {
105
- height: 1.5rem;
106
- line-height: 1rem;
105
+ height: 1.5rem;
106
+ line-height: 1rem;
107
107
  }
108
108
 
109
109
  ::-moz-selection {
110
- color: var(--bgl-selection-color);
111
- background: var(--bgl-selection-bg);
110
+ color: var(--bgl-selection-color);
111
+ background: var(--bgl-selection-bg);
112
112
  }
113
113
 
114
114
  ::selection {
115
- color: var(--bgl-selection-color);
116
- background: var(--bgl-selection-bg);
115
+ color: var(--bgl-selection-color);
116
+ background: var(--bgl-selection-bg);
117
117
  }
118
118
 
119
119
  .popup {
120
- border-radius: 15px;
121
- background: var(--bgl-popup-bg);
122
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
123
- padding: 2rem;
124
- min-width: 300px;
125
- text-align: center;
120
+ border-radius: 15px;
121
+ background: var(--bgl-popup-bg);
122
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
123
+ padding: 2rem;
124
+ min-width: 300px;
125
+ text-align: center;
126
126
  }
127
127
 
128
128
  .tabs {
129
- -moz-column-gap: 1rem;
130
- column-gap: 1rem;
131
- margin-top: 20px;
132
- margin-bottom: -2rem;
133
- border-top: 1px solid var(--border-color);
134
- width: calc(100% + 4rem);
135
- -webkit-margin-start: -2rem;
136
- margin-inline-start: -2rem;
137
- -webkit-padding-start: 2rem;
138
- padding-inline-start: 2rem;
139
- overflow: auto;
140
- display: flex;
129
+ -moz-column-gap: 1rem;
130
+ column-gap: 1rem;
131
+ margin-top: 20px;
132
+ margin-bottom: -2rem;
133
+ border-top: 1px solid var(--border-color);
134
+ width: calc(100% + 4rem);
135
+ -webkit-margin-start: -2rem;
136
+ margin-inline-start: -2rem;
137
+ -webkit-padding-start: 2rem;
138
+ padding-inline-start: 2rem;
139
+ overflow: auto;
140
+ display: flex;
141
141
  }
142
142
 
143
143
  .tab {
144
- font-size: 14px;
145
- font-weight: 600;
146
- line-height: 2.5;
147
- cursor: pointer;
148
- transition: var(--bgl-transition);
149
- border-bottom: 2px solid transparent;
150
- padding: 0 5px;
151
- white-space: nowrap;
152
- text-decoration: none;
153
- color: inherit;
144
+ font-size: 14px;
145
+ font-weight: 600;
146
+ line-height: 2.5;
147
+ cursor: pointer;
148
+ transition: var(--bgl-transition);
149
+ border-bottom: 2px solid transparent;
150
+ padding: 0 5px;
151
+ white-space: nowrap;
152
+ text-decoration: none;
153
+ color: inherit;
154
154
  }
155
155
 
156
156
  .tab.active {
157
- color: var(--bgl-primary);
158
- border-bottom: 2px solid var(--bgl-primary);
157
+ color: var(--bgl-primary);
158
+ border-bottom: 2px solid var(--bgl-primary);
159
159
  }
160
160
 
161
161
  .tab:hover {
162
- color: var(--bgl-primary);
162
+ color: var(--bgl-primary);
163
163
  }
164
164
 
165
165
  .tab:active {
166
- -webkit-filter: brightness(70%);
167
- filter: brightness(70%);
166
+ -webkit-filter: brightness(70%);
167
+ filter: brightness(70%);
168
168
  }
169
169
 
170
170
  .router-tab {
171
- font-size: 14px;
172
- font-weight: 600;
173
- line-height: 2.5;
174
- cursor: pointer;
175
- transition: var(--bgl-transition);
176
- border-bottom: 2px solid transparent;
177
- padding: 0 5px;
178
- white-space: nowrap;
179
- text-decoration: none;
180
- color: inherit;
171
+ font-size: 14px;
172
+ font-weight: 600;
173
+ line-height: 2.5;
174
+ cursor: pointer;
175
+ transition: var(--bgl-transition);
176
+ border-bottom: 2px solid transparent;
177
+ padding: 0 5px;
178
+ white-space: nowrap;
179
+ text-decoration: none;
180
+ color: inherit;
181
181
  }
182
182
 
183
183
  .router-tab.router-link-active {
184
- color: var(--bgl-primary);
185
- border-bottom: 2px solid var(--bgl-primary);
184
+ color: var(--bgl-primary);
185
+ border-bottom: 2px solid var(--bgl-primary);
186
186
  }
187
187
 
188
188
  .router-tab:hover {
189
- color: var(--bgl-primary);
189
+ color: var(--bgl-primary);
190
190
  }
191
191
 
192
192
  .router-tab:active {
193
- -webkit-filter: brightness(70%);
194
- filter: brightness(70%);
193
+ -webkit-filter: brightness(70%);
194
+ filter: brightness(70%);
195
195
  }
196
196
 
197
197
  .entity-container {
198
- display: grid;
199
- height: 100%;
200
- grid-template-columns: minmax(300px, 1fr) 3fr;
201
- grid-gap: 1rem;
202
- -moz-column-gap: 1rem;
203
- column-gap: 1rem;
204
- grid-template-rows: 1fr;
205
- grid-template-areas: 'list-view detail-view';
206
- transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
207
- transition:
208
- grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
209
- -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
210
- transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
198
+ display: grid;
199
+ height: 100%;
200
+ grid-template-columns: minmax(300px, 1fr) 3fr;
201
+ grid-gap: 1rem;
202
+ -moz-column-gap: 1rem;
203
+ column-gap: 1rem;
204
+ grid-template-rows: 1fr;
205
+ grid-template-areas: 'list-view detail-view';
206
+ transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
207
+ transition:
208
+ grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
209
+ -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
210
+ transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
211
211
  }
212
212
 
213
213
  .detail-main {
214
- overflow-y: auto;
214
+ overflow-y: auto;
215
215
  }
216
216
 
217
217
  .content-row p {
218
- margin: 0 0 10px 0;
218
+ margin: 0 0 10px 0;
219
219
  }
220
220
 
221
221
  .id {
222
- color: var(--bgl-gray);
223
- font-size: 9px;
222
+ color: var(--bgl-gray);
223
+ font-size: 9px;
224
224
  }
225
225
 
226
226
  .field {
227
- --field-count: 1;
228
- --width: calc(100% / var(--field-count));
229
- grid-auto-columns: minmax(var(--width), var(--width));
230
- font-size: 10px;
231
- text-align: z;
227
+ --field-count: 1;
228
+ --width: calc(100% / var(--field-count));
229
+ grid-auto-columns: minmax(var(--width), var(--width));
230
+ font-size: 10px;
231
+ text-align: z;
232
232
  }
233
233
 
234
234
  .detail-view-inner {
235
- display: grid;
236
- height: 100%;
237
- overflow: hidden;
238
- grid-template-rows: -webkit-max-content 1fr;
239
- grid-template-rows: max-content 1fr;
240
- gap: 1rem;
235
+ display: grid;
236
+ height: 100%;
237
+ overflow: hidden;
238
+ grid-template-rows: -webkit-max-content 1fr;
239
+ grid-template-rows: max-content 1fr;
240
+ gap: 1rem;
241
241
  }
242
242
 
243
243
  .detail-view-inner-wrap {
244
- height: 100%;
245
- overflow: hidden;
246
- transition: var(--bgl-transition);
244
+ height: 100%;
245
+ overflow: hidden;
246
+ transition: var(--bgl-transition);
247
247
  }
248
248
 
249
249
  .table-list-wrap {
250
- overflow: auto;
250
+ overflow: auto;
251
251
  }
252
252
 
253
253
  [dir='rtl'] .data-row .bgl_icon-font,
254
254
  [dir='rtl'] .embedded-field .bgl_icon-font {
255
- transform: rotateY(180deg) !important;
255
+ transform: rotateY(180deg) !important;
256
256
  }
257
257
 
258
258
  .copy-url {
259
- background-color: var(--bgl-gray-light);
260
- border-radius: var(--btn-border-radius);
261
- padding: 0.5rem 1rem;
262
- align-items: center;
263
- justify-content: flex-start;
264
- margin-bottom: 1rem;
265
- display: flex;
266
- justify-content: space-between;
259
+ background-color: var(--bgl-gray-light);
260
+ border-radius: var(--btn-border-radius);
261
+ padding: 0.5rem 1rem;
262
+ align-items: center;
263
+ justify-content: flex-start;
264
+ margin-bottom: 1rem;
265
+ display: flex;
266
+ justify-content: space-between;
267
267
  }
268
268
 
269
269
  .copy-url a {
270
- margin: 0;
271
- font-size: 12px;
272
- opacity: 0.8;
273
- color: var(--bgl-text-color);
274
- word-break: break-all;
270
+ margin: 0;
271
+ font-size: 12px;
272
+ opacity: 0.8;
273
+ color: var(--bgl-text-color);
274
+ word-break: break-all;
275
275
  }
276
276
 
277
277
  .list-view {
278
- grid-area: list-view;
279
- grid-template-areas: 'list-header''list-content';
280
- grid-template-columns: 1fr;
281
- overflow-y: auto;
282
- grid-template-rows: -webkit-max-content 1fr;
283
- grid-template-rows: max-content 1fr;
284
- transition: var(--transition);
278
+ grid-area: list-view;
279
+ grid-template-areas: 'list-header' 'list-content';
280
+ grid-template-columns: 1fr;
281
+ overflow-y: auto;
282
+ grid-template-rows: -webkit-max-content 1fr;
283
+ grid-template-rows: max-content 1fr;
284
+ transition: var(--transition);
285
285
  }
286
286
 
287
287
  .shekel {
288
- line-height: 0;
288
+ line-height: 0;
289
289
  }
290
290
 
291
291
  .view-wrapper {
292
- height: 100%;
293
- position: relative;
294
- overflow: hidden;
292
+ height: 100%;
293
+ position: relative;
294
+ overflow: hidden;
295
295
  }
296
296
 
297
297
  @media screen and (max-width: 1000px) {
298
- .entity-container {
299
- grid-template-columns: minmax(22vw, 1fr) 2fr;
300
- }
298
+ .entity-container {
299
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
300
+ }
301
301
  }
302
302
 
303
303
  @media screen and (max-width: 910px) {
304
- .tab {
305
- font-size: 12px;
306
- }
307
-
308
- .entity-container {
309
- grid-template-columns: 1fr;
310
- gap: 0;
311
- }
312
-
313
- .detail-view-inner {
314
- border-radius: var(--card-border-radius);
315
- background: var(--bgl-box-bg);
316
- }
317
-
318
- .detail-view-inner-wrap {
319
- position: absolute;
320
- height: 100%;
321
- width: 100%;
322
- background: var(--bgl-bg);
323
- }
324
-
325
- .detail-view-inner-wrap.bgl_card {
326
- background: var(--bgl-box-bg);
327
- }
328
-
329
- .bgl_card {
330
- padding: 1rem 1rem;
331
- }
332
-
333
- .tabs {
334
- -moz-column-gap: 10px;
335
- column-gap: 10px;
336
- margin-top: 10px;
337
- margin-bottom: -15px;
338
- box-sizing: border-box;
339
- -webkit-margin-start: -1rem;
340
- margin-inline-start: -1rem;
341
- -webkit-padding-start: 1rem;
342
- padding-inline-start: 1rem;
343
- max-width: calc(100vw - 2rem);
344
- }
345
-
346
- .popup {
347
- border-radius: 15px;
348
- background: var(--bgl-popup-bg);
349
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
350
- padding: 2rem;
351
- min-width: 0;
352
- max-width: 90%;
353
- max-height: 90vh;
354
- overflow-x: auto;
355
- text-align: center;
356
- }
357
-
358
- .detail-main {
359
- overflow-y: unset;
360
- }
361
-
362
- .detail-section {
363
- height: -webkit-fit-content;
364
- height: -moz-fit-content;
365
- height: fit-content;
366
- }
367
-
368
- .field {
369
- display: flex;
370
- flex-wrap: wrap;
371
- gap: 0.5rem;
372
- align-items: center;
373
- }
374
- }
304
+ .tab {
305
+ font-size: 12px;
306
+ }
307
+
308
+ .entity-container {
309
+ grid-template-columns: 1fr;
310
+ gap: 0;
311
+ }
312
+
313
+ .detail-view-inner {
314
+ border-radius: var(--card-border-radius);
315
+ background: var(--bgl-box-bg);
316
+ }
317
+
318
+ .detail-view-inner-wrap {
319
+ position: absolute;
320
+ height: 100%;
321
+ width: 100%;
322
+ background: var(--bgl-bg);
323
+ }
324
+
325
+ .detail-view-inner-wrap.bgl_card {
326
+ background: var(--bgl-box-bg);
327
+ }
328
+
329
+ .bgl_card {
330
+ padding: 1rem 1rem;
331
+ }
332
+
333
+ .tabs {
334
+ -moz-column-gap: 10px;
335
+ column-gap: 10px;
336
+ margin-top: 10px;
337
+ margin-bottom: -15px;
338
+ box-sizing: border-box;
339
+ -webkit-margin-start: -1rem;
340
+ margin-inline-start: -1rem;
341
+ -webkit-padding-start: 1rem;
342
+ padding-inline-start: 1rem;
343
+ max-width: calc(100vw - 2rem);
344
+ }
345
+
346
+ .popup {
347
+ border-radius: 15px;
348
+ background: var(--bgl-popup-bg);
349
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
350
+ padding: 2rem;
351
+ min-width: 0;
352
+ max-width: 90%;
353
+ max-height: 90vh;
354
+ overflow-x: auto;
355
+ text-align: center;
356
+ }
357
+
358
+ .detail-main {
359
+ overflow-y: unset;
360
+ }
361
+
362
+ .detail-section {
363
+ height: -webkit-fit-content;
364
+ height: -moz-fit-content;
365
+ height: fit-content;
366
+ }
367
+
368
+ .field {
369
+ display: flex;
370
+ flex-wrap: wrap;
371
+ gap: 0.5rem;
372
+ align-items: center;
373
+ }
374
+ }