@bagelink/vue 1.9.142 → 1.9.148

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 (21) hide show
  1. package/dist/components/form/inputs/ArrayInput.vue.d.ts.map +1 -1
  2. package/dist/components/layout/SidebarMenu.vue.d.ts.map +1 -1
  3. package/dist/form-flow/FormFlow.vue.d.ts.map +1 -1
  4. package/dist/i18n/index.d.ts +18 -0
  5. package/dist/i18n/index.d.ts.map +1 -1
  6. package/dist/index.cjs +34 -34
  7. package/dist/index.mjs +1757 -1725
  8. package/dist/style.css +1 -1
  9. package/package.json +1 -1
  10. package/src/components/form/inputs/ArrayInput.vue +44 -19
  11. package/src/components/layout/SidebarMenu.vue +0 -8
  12. package/src/form-flow/FormFlow.vue +2 -0
  13. package/src/i18n/locales/en.json +3 -0
  14. package/src/i18n/locales/es.json +3 -0
  15. package/src/i18n/locales/fr.json +3 -0
  16. package/src/i18n/locales/he.json +3 -0
  17. package/src/i18n/locales/it.json +3 -0
  18. package/src/i18n/locales/ru.json +3 -0
  19. package/src/styles/appearance.css +12 -0
  20. package/src/styles/base-colors.css +1 -0
  21. package/src/styles/theme.css +421 -412
package/src/styles/theme.css CHANGED
@@ -2,577 +2,586 @@
2
2
 
3
3
  /* TEHEME */
4
4
  :root {
5
- --bgl-primary: var(--bgl-blue);
6
- --bgl-primary-tint: #2e5bff80;
7
- --bgl-primary-light: #eef6ff;
8
- --bgl-black: #282929;
9
- --bgl-black-tint: #28292980;
10
- --bgl-white: #fff;
11
- --bgl-gray: #b7b7b7;
12
- --bgl-gray-light: #f5f8fa;
13
- --bgl-gray-tint: rgba(183, 183, 183, 0.2);
14
- --bgl-gray-tint-dark: rgba(183, 183, 183, 0.4);
15
- --bgl-accent-color: var(--bgl-primary);
16
- --bgl-bg: #f4f6fa;
17
- --bgl-shadow: #00000031;
18
- --border-color: #00000020;
19
- --placeholder-color: #00000040;
20
- --label-color: #00000080;
21
- --input-bg: #f5f8fa;
22
- --input-color: #000000;
23
- --dropdown-color: var(--bgl-black);
24
- --bgl-box-bg: var(--bgl-white);
25
- --bgl-popup-bg: var(--bgl-white);
26
- --bgl-popup-text: var(--bgl-black);
27
- --popper-border-radius: var(--card-border-radius);
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
- --bgl-scrollbar-size: 0.5rem;
38
- --pill-btn-color: var(--bgl-white);
39
- --pill-btn-bg: var(--placeholder-color);
40
- --bgl-selected: var(--bgl-gray-light);
41
- --skeleton-bg: #f0f0f0;
42
- --skeleton-pulse: var(--bgl-bg);
43
- --bgl-range-thumb-color: var(--bgl-white);
5
+ --bgl-primary: var(--bgl-blue);
6
+ --bgl-primary-tint: #2e5bff80;
7
+ --bgl-primary-light: #eef6ff;
8
+ --bgl-black: #282929;
9
+ --bgl-black-tint: #28292980;
10
+ --bgl-white: #fff;
11
+ --bgl-gray: #b7b7b7;
12
+ --bgl-gray-light: #f5f8fa;
13
+ --bgl-gray-tint: rgba(183, 183, 183, 0.2);
14
+ --bgl-gray-tint-dark: rgba(183, 183, 183, 0.4);
15
+ --bgl-accent-color: var(--bgl-primary);
16
+ --bgl-bg: #f4f6fa;
17
+ --bgl-shadow: #00000031;
18
+ --border-color: #00000020;
19
+ --placeholder-color: #00000040;
20
+ --label-color: #00000080;
21
+ --input-bg: #f5f8fa;
22
+ --input-color: #000000;
23
+ --dropdown-color: var(--bgl-black);
24
+ --bgl-box-bg: var(--bgl-white);
25
+ --bgl-popup-bg: var(--bgl-white);
26
+ --bgl-popup-text: var(--bgl-black);
27
+ --popper-border-radius: var(--card-border-radius);
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
+ --bgl-scrollbar-size: 0.5rem;
38
+ --pill-btn-color: var(--bgl-white);
39
+ --pill-btn-bg: var(--placeholder-color);
40
+ --bgl-selected: var(--bgl-gray-light);
41
+ --skeleton-bg: #f0f0f0;
42
+ --skeleton-pulse: var(--bgl-bg);
43
+ --bgl-range-thumb-color: var(--bgl-white);
44
44
  }
45
45
 
46
46
  /* TYPE */
47
47
  :root {
48
- --bgl-font: 'Lexend', 'Ploni', sans-serif;
49
- --input-font-size: 14px;
48
+ --bgl-font: 'Lexend', 'Ploni', sans-serif;
49
+ --input-font-size: 14px;
50
50
  }
51
51
 
52
52
  /* DIMENSIONS */
53
53
  :root {
54
- --bgl-font-size: 16px;
55
- --input-height: 40px;
56
- --label-font-size: 12px;
57
- --pill-font-size: 12px;
58
- --input-border-radius: 7px;
59
- --card-border-radius: 12px;
60
- --btn-border-radius: 6px;
61
- --btn-padding: 30px;
62
- --btn-height: 40px;
63
- --pill-border-radius: 8px;
64
- --pill-height: 20px;
65
- --skeleton-radius: 0.25rem;
66
- --skeleton-margin: 1rem;
67
- --bgl-range-thumb-size: 20px;
68
- --bgl-range-track-height: 8px;
54
+ --bgl-font-size: 16px;
55
+ --input-height: 40px;
56
+ --label-font-size: 12px;
57
+ --pill-font-size: 12px;
58
+ --input-border-radius: 7px;
59
+ --card-border-radius: 12px;
60
+ --btn-border-radius: 6px;
61
+ --btn-padding: 30px;
62
+ --btn-height: 40px;
63
+ --pill-border-radius: 8px;
64
+ --pill-height: 20px;
65
+ --skeleton-radius: 0.25rem;
66
+ --skeleton-margin: 1rem;
67
+ --bgl-range-thumb-size: 20px;
68
+ --bgl-range-track-height: 8px;
69
69
  }
70
70
 
71
71
  /* MISC */
72
72
  :root {
73
- --bgl-transition: all 200ms ease;
74
- --bgl-transition-400: all 400ms ease;
75
- --bgl-hover-filter: brightness(90%);
76
- --bgl-active-filter: brightness(70%);
73
+ --bgl-transition: all 200ms ease;
74
+ --bgl-transition-400: all 400ms ease;
75
+ --bgl-hover-filter: brightness(90%);
76
+ --bgl-active-filter: brightness(70%);
77
+ }
78
+
79
+ /* tooltip */
80
+ :root {
81
+ --bgl-tooltip-bg: var(--bgl-black);
82
+ --bgl-tooltip-color: var(--bgl-white);
83
+ --bgl-tooltip-font-size: 13px;
84
+ --bgl-tooltip-padding: 0.5rem 1rem;
85
+ --bgl-tooltip-arrow-color: var(--bgl-black);
77
86
  }
78
87
 
79
88
  /* Base Colors */
80
89
  :root {
81
- --bgl-blue: #2e5bff;
82
- --bgl-green: #75c98f;
83
- --bgl-red: #ed6c6f;
84
- --bgl-yellow: #ffbb00;
85
- --bgl-purple: #8a4baf;
86
- --bgl-brown: #a67c52;
87
- --bgl-orange: #ff8c00;
88
- --bgl-turquoise: #00d8c0;
89
- --bgl-pink: #f1416c;
90
+ --bgl-blue: #2e5bff;
91
+ --bgl-green: #75c98f;
92
+ --bgl-red: #ed6c6f;
93
+ --bgl-yellow: #ffbb00;
94
+ --bgl-purple: #8a4baf;
95
+ --bgl-brown: #a67c52;
96
+ --bgl-orange: #ff8c00;
97
+ --bgl-turquoise: #00d8c0;
98
+ --bgl-pink: #f1416c;
90
99
  }
91
100
 
92
101
  /* OTHER LIGHT COLORS */
93
102
  :root {
94
- --bgl-blue-tint: rgba(46, 91, 255, 20%);
95
- --bgl-blue-dark: #191c30;
96
- --bgl-blue-light: #eef6ff;
97
- --bgl-pink-light: #fde8f0;
98
- --bgl-red-tint: #fbe2e2;
99
- --bgl-red-light: #fde8e8;
100
- --bgl-yellow-light: #fff6d5;
101
- --bgl-green-light: #e8f7f0;
102
- --bgl-purple-light: #f0e8f7;
103
- --bgl-brown-light: #f9f4f0;
104
- --bgl-orange-light: #ffebd9;
105
- --bgl-turquoise-light: #e8f9f7;
103
+ --bgl-blue-tint: rgba(46, 91, 255, 20%);
104
+ --bgl-blue-dark: #191c30;
105
+ --bgl-blue-light: #eef6ff;
106
+ --bgl-pink-light: #fde8f0;
107
+ --bgl-red-tint: #fbe2e2;
108
+ --bgl-red-light: #fde8e8;
109
+ --bgl-yellow-light: #fff6d5;
110
+ --bgl-green-light: #e8f7f0;
111
+ --bgl-purple-light: #f0e8f7;
112
+ --bgl-brown-light: #f9f4f0;
113
+ --bgl-orange-light: #ffebd9;
114
+ --bgl-turquoise-light: #e8f9f7;
106
115
  }
107
116
 
108
117
  /* 10% tints (lightest) */
109
118
  :root {
110
- --bgl-blue-10: #f7f9ff;
111
- --bgl-green-10: #f7fcf9;
112
- --bgl-red-10: #fef8f8;
113
- --bgl-yellow-10: #fffbf0;
114
- --bgl-purple-10: #faf7fb;
115
- --bgl-brown-10: #faf8f6;
116
- --bgl-orange-10: #fff8f0;
117
- --bgl-turquoise-10: #f0fffe;
118
- --bgl-gray-10: #fafafa;
119
- --bgl-black-10: #f8f8f8;
120
- --bgl-pink-10: #fef7f9;
119
+ --bgl-blue-10: #f7f9ff;
120
+ --bgl-green-10: #f7fcf9;
121
+ --bgl-red-10: #fef8f8;
122
+ --bgl-yellow-10: #fffbf0;
123
+ --bgl-purple-10: #faf7fb;
124
+ --bgl-brown-10: #faf8f6;
125
+ --bgl-orange-10: #fff8f0;
126
+ --bgl-turquoise-10: #f0fffe;
127
+ --bgl-gray-10: #fafafa;
128
+ --bgl-black-10: #f8f8f8;
129
+ --bgl-pink-10: #fef7f9;
121
130
  }
122
131
 
123
132
  /* 20% tints */
124
133
  :root {
125
- --bgl-blue-20: #eef6ff;
126
- --bgl-green-20: #eef9f2;
127
- --bgl-red-20: #fdf1f1;
128
- --bgl-yellow-20: #fff7e0;
129
- --bgl-purple-20: #f5eff7;
130
- --bgl-brown-20: #f5f1ed;
131
- --bgl-orange-20: #fff1e0;
132
- --bgl-turquoise-20: #e0fffc;
133
- --bgl-gray-20: #f5f5f5;
134
- --bgl-black-20: #f0f0f0;
135
- --bgl-pink-20: #fceff2;
134
+ --bgl-blue-20: #eef6ff;
135
+ --bgl-green-20: #eef9f2;
136
+ --bgl-red-20: #fdf1f1;
137
+ --bgl-yellow-20: #fff7e0;
138
+ --bgl-purple-20: #f5eff7;
139
+ --bgl-brown-20: #f5f1ed;
140
+ --bgl-orange-20: #fff1e0;
141
+ --bgl-turquoise-20: #e0fffc;
142
+ --bgl-gray-20: #f5f5f5;
143
+ --bgl-black-20: #f0f0f0;
144
+ --bgl-pink-20: #fceff2;
136
145
  }
137
146
 
138
147
  /* 30% tints */
139
148
  :root {
140
- --bgl-blue-30: #e0ebff;
141
- --bgl-green-30: #ddf3e5;
142
- --bgl-red-30: #fae5e6;
143
- --bgl-yellow-30: #fff0cc;
144
- --bgl-purple-30: #ede2f0;
145
- --bgl-brown-30: #ebe2db;
146
- --bgl-orange-30: #ffe6cc;
147
- --bgl-turquoise-30: #ccfff9;
148
- --bgl-gray-30: #ebebeb;
149
- --bgl-black-30: #e5e5e5;
150
- --bgl-pink-30: #f9e2e8;
149
+ --bgl-blue-30: #e0ebff;
150
+ --bgl-green-30: #ddf3e5;
151
+ --bgl-red-30: #fae5e6;
152
+ --bgl-yellow-30: #fff0cc;
153
+ --bgl-purple-30: #ede2f0;
154
+ --bgl-brown-30: #ebe2db;
155
+ --bgl-orange-30: #ffe6cc;
156
+ --bgl-turquoise-30: #ccfff9;
157
+ --bgl-gray-30: #ebebeb;
158
+ --bgl-black-30: #e5e5e5;
159
+ --bgl-pink-30: #f9e2e8;
151
160
  }
152
161
 
153
162
  /* 40% tints */
154
163
  :root {
155
- --bgl-blue-40: #c2d7ff;
156
- --bgl-green-40: #bfebcf;
157
- --bgl-red-40: #f4d1d2;
158
- --bgl-yellow-40: #ffe699;
159
- --bgl-purple-40: #dccbe1;
160
- --bgl-brown-40: #dcc9ba;
161
- --bgl-orange-40: #ffcc99;
162
- --bgl-turquoise-40: #99fff0;
163
- --bgl-gray-40: #d8d8d8;
164
- --bgl-black-40: #d2d2d2;
165
- --bgl-pink-40: #f4c9d4;
164
+ --bgl-blue-40: #c2d7ff;
165
+ --bgl-green-40: #bfebcf;
166
+ --bgl-red-40: #f4d1d2;
167
+ --bgl-yellow-40: #ffe699;
168
+ --bgl-purple-40: #dccbe1;
169
+ --bgl-brown-40: #dcc9ba;
170
+ --bgl-orange-40: #ffcc99;
171
+ --bgl-turquoise-40: #99fff0;
172
+ --bgl-gray-40: #d8d8d8;
173
+ --bgl-black-40: #d2d2d2;
174
+ --bgl-pink-40: #f4c9d4;
166
175
  }
167
176
 
168
177
  /* 50% tints */
169
178
  :root {
170
- --bgl-blue-50: #94adff;
171
- --bgl-green-50: #9ae0b7;
172
- --bgl-red-50: #eeb4b6;
173
- --bgl-yellow-50: #ffdd66;
174
- --bgl-purple-50: #c4a8cd;
175
- --bgl-brown-50: #caa68b;
176
- --bgl-orange-50: #ffb366;
177
- --bgl-turquoise-50: #66ffe0;
178
- --bgl-gray-50: #c4c4c4;
179
- --bgl-black-50: #b8b8b8;
180
- --bgl-pink-50: #eea4b6;
179
+ --bgl-blue-50: #94adff;
180
+ --bgl-green-50: #9ae0b7;
181
+ --bgl-red-50: #eeb4b6;
182
+ --bgl-yellow-50: #ffdd66;
183
+ --bgl-purple-50: #c4a8cd;
184
+ --bgl-brown-50: #caa68b;
185
+ --bgl-orange-50: #ffb366;
186
+ --bgl-turquoise-50: #66ffe0;
187
+ --bgl-gray-50: #c4c4c4;
188
+ --bgl-black-50: #b8b8b8;
189
+ --bgl-pink-50: #eea4b6;
181
190
  }
182
191
 
183
192
  /* 60% tints */
184
193
  :root {
185
- --bgl-blue-60: #6690ff;
186
- --bgl-green-60: #87d4a7;
187
- --bgl-red-60: #e99799;
188
- --bgl-yellow-60: #ffd433;
189
- --bgl-purple-60: #b696c0;
190
- --bgl-brown-60: #bb9374;
191
- --bgl-orange-60: #ff9933;
192
- --bgl-turquoise-60: #33ffd0;
193
- --bgl-gray-60: #cecece;
194
- --bgl-black-60: #9e9e9e;
195
- --bgl-pink-60: #e88399;
194
+ --bgl-blue-60: #6690ff;
195
+ --bgl-green-60: #87d4a7;
196
+ --bgl-red-60: #e99799;
197
+ --bgl-yellow-60: #ffd433;
198
+ --bgl-purple-60: #b696c0;
199
+ --bgl-brown-60: #bb9374;
200
+ --bgl-orange-60: #ff9933;
201
+ --bgl-turquoise-60: #33ffd0;
202
+ --bgl-gray-60: #cecece;
203
+ --bgl-black-60: #9e9e9e;
204
+ --bgl-pink-60: #e88399;
196
205
  }
197
206
 
198
207
  /* 70% tints */
199
208
  :root {
200
- --bgl-blue-70: #527aff;
201
- --bgl-green-70: #7ec99f;
202
- --bgl-red-70: #e4898c;
203
- --bgl-yellow-70: #ffcc00;
204
- --bgl-purple-70: #a884b3;
205
- --bgl-brown-70: #ad805d;
206
- --bgl-orange-70: #ff8000;
207
- --bgl-turquoise-70: #00ffc0;
208
- --bgl-gray-70: #c0c0c0;
209
- --bgl-black-70: #858585;
210
- --bgl-pink-70: #e2627c;
209
+ --bgl-blue-70: #527aff;
210
+ --bgl-green-70: #7ec99f;
211
+ --bgl-red-70: #e4898c;
212
+ --bgl-yellow-70: #ffcc00;
213
+ --bgl-purple-70: #a884b3;
214
+ --bgl-brown-70: #ad805d;
215
+ --bgl-orange-70: #ff8000;
216
+ --bgl-turquoise-70: #00ffc0;
217
+ --bgl-gray-70: #c0c0c0;
218
+ --bgl-black-70: #858585;
219
+ --bgl-pink-70: #e2627c;
211
220
  }
212
221
 
213
222
  /* 80% tints */
214
223
  :root {
215
- --bgl-blue-80: #3e63ff;
216
- --bgl-green-80: #7cbf97;
217
- --bgl-red-80: #e07b7f;
218
- --bgl-yellow-80: #ffc300;
219
- --bgl-purple-80: #9a72a6;
220
- --bgl-brown-80: #9f6d46;
221
- --bgl-orange-80: #ff6600;
222
- --bgl-turquoise-80: #00efb0;
223
- --bgl-gray-80: #e8ecef;
224
- --bgl-black-80: #6b6b6b;
225
- --bgl-pink-80: #dc415f;
224
+ --bgl-blue-80: #3e63ff;
225
+ --bgl-green-80: #7cbf97;
226
+ --bgl-red-80: #e07b7f;
227
+ --bgl-yellow-80: #ffc300;
228
+ --bgl-purple-80: #9a72a6;
229
+ --bgl-brown-80: #9f6d46;
230
+ --bgl-orange-80: #ff6600;
231
+ --bgl-turquoise-80: #00efb0;
232
+ --bgl-gray-80: #e8ecef;
233
+ --bgl-black-80: #6b6b6b;
234
+ --bgl-pink-80: #dc415f;
226
235
  }
227
236
 
228
237
  /* 90% tints */
229
238
  :root {
230
- --bgl-blue-90: #3456ff;
231
- --bgl-green-90: #7ab58f;
232
- --bgl-red-90: #dc6d72;
233
- --bgl-yellow-90: #ffba00;
234
- --bgl-purple-90: #8c6099;
235
- --bgl-brown-90: #915a2f;
236
- --bgl-orange-90: #ff4d00;
237
- --bgl-turquoise-90: #00e5a0;
238
- --bgl-gray-90: #a4a4a4;
239
- --bgl-black-90: #525252;
240
- --bgl-pink-90: #d62042;
239
+ --bgl-blue-90: #3456ff;
240
+ --bgl-green-90: #7ab58f;
241
+ --bgl-red-90: #dc6d72;
242
+ --bgl-yellow-90: #ffba00;
243
+ --bgl-purple-90: #8c6099;
244
+ --bgl-brown-90: #915a2f;
245
+ --bgl-orange-90: #ff4d00;
246
+ --bgl-turquoise-90: #00e5a0;
247
+ --bgl-gray-90: #a4a4a4;
248
+ --bgl-black-90: #525252;
249
+ --bgl-pink-90: #d62042;
241
250
  }
242
251
 
243
252
  /* Base Colors */
244
253
  :root {
245
- --bgl-blue-100: #2e5bff;
246
- --bgl-green-100: #75c98f;
247
- --bgl-red-100: #ed6c6f;
248
- --bgl-yellow-100: #ffbb00;
249
- --bgl-purple-100: #8a4baf;
250
- --bgl-brown-100: #a67c52;
251
- --bgl-orange-100: #ff8c00;
252
- --bgl-turquoise-100: #00d8c0;
253
- --bgl-gray-100: #b7b7b7;
254
- --bgl-black-100: #282929;
255
- --bgl-pink-100: #f1416c;
254
+ --bgl-blue-100: #2e5bff;
255
+ --bgl-green-100: #75c98f;
256
+ --bgl-red-100: #ed6c6f;
257
+ --bgl-yellow-100: #ffbb00;
258
+ --bgl-purple-100: #8a4baf;
259
+ --bgl-brown-100: #a67c52;
260
+ --bgl-orange-100: #ff8c00;
261
+ --bgl-turquoise-100: #00d8c0;
262
+ --bgl-gray-100: #b7b7b7;
263
+ --bgl-black-100: #282929;
264
+ --bgl-pink-100: #f1416c;
256
265
  }
257
266
 
258
267
  /* 110% shades (darker than base) */
259
268
  :root {
260
- --bgl-blue-110: #1a42cc;
261
- --bgl-green-110: #5aa572;
262
- --bgl-red-110: #c5565a;
263
- --bgl-yellow-110: #cc9600;
264
- --bgl-purple-110: #6d3a88;
265
- --bgl-brown-110: #7a4f3e;
266
- --bgl-orange-110: #cc6f00;
267
- --bgl-turquoise-110: #00a699;
268
- --bgl-gray-110: #949494;
269
- --bgl-black-110: #1f2020;
270
- --bgl-pink-110: #bf2f55;
269
+ --bgl-blue-110: #1a42cc;
270
+ --bgl-green-110: #5aa572;
271
+ --bgl-red-110: #c5565a;
272
+ --bgl-yellow-110: #cc9600;
273
+ --bgl-purple-110: #6d3a88;
274
+ --bgl-brown-110: #7a4f3e;
275
+ --bgl-orange-110: #cc6f00;
276
+ --bgl-turquoise-110: #00a699;
277
+ --bgl-gray-110: #949494;
278
+ --bgl-black-110: #1f2020;
279
+ --bgl-pink-110: #bf2f55;
271
280
  }
272
281
 
273
282
  /* 120% shades */
274
283
  :root {
275
- --bgl-blue-120: #0f2e99;
276
- --bgl-green-120: #459555;
277
- --bgl-red-120: #ae3f43;
278
- --bgl-yellow-120: #997200;
279
- --bgl-purple-120: #4e1f61;
280
- --bgl-brown-120: #63442d;
281
- --bgl-orange-120: #995200;
282
- --bgl-turquoise-120: #007d72;
283
- --bgl-gray-120: #808080;
284
- --bgl-black-120: #161717;
285
- --bgl-pink-120: #a81e3e;
284
+ --bgl-blue-120: #0f2e99;
285
+ --bgl-green-120: #459555;
286
+ --bgl-red-120: #ae3f43;
287
+ --bgl-yellow-120: #997200;
288
+ --bgl-purple-120: #4e1f61;
289
+ --bgl-brown-120: #63442d;
290
+ --bgl-orange-120: #995200;
291
+ --bgl-turquoise-120: #007d72;
292
+ --bgl-gray-120: #808080;
293
+ --bgl-black-120: #161717;
294
+ --bgl-pink-120: #a81e3e;
286
295
  }
287
296
 
288
297
  /* 130% shades (darkest) */
289
298
  :root {
290
- --bgl-blue-130: #041a66;
291
- --bgl-green-130: #308538;
292
- --bgl-red-130: #97282c;
293
- --bgl-yellow-130: #664e00;
294
- --bgl-purple-130: #2f043a;
295
- --bgl-brown-130: #4c391c;
296
- --bgl-orange-130: #663500;
297
- --bgl-turquoise-130: #00544b;
298
- --bgl-gray-130: #6c6c6c;
299
- --bgl-black-130: #0d0e0e;
300
- --bgl-pink-130: #910d27;
299
+ --bgl-blue-130: #041a66;
300
+ --bgl-green-130: #308538;
301
+ --bgl-red-130: #97282c;
302
+ --bgl-yellow-130: #664e00;
303
+ --bgl-purple-130: #2f043a;
304
+ --bgl-brown-130: #4c391c;
305
+ --bgl-orange-130: #663500;
306
+ --bgl-turquoise-130: #00544b;
307
+ --bgl-gray-130: #6c6c6c;
308
+ --bgl-black-130: #0d0e0e;
309
+ --bgl-pink-130: #910d27;
301
310
  }
302
311
 
303
312
  .testMe * {
304
- outline: 1px dotted red;
313
+ outline: 1px dotted red;
305
314
  }
306
315
 
307
316
  ::-moz-selection {
308
- color: var(--bgl-selection-color);
309
- background: var(--bgl-selection-bg);
317
+ color: var(--bgl-selection-color);
318
+ background: var(--bgl-selection-bg);
310
319
  }
311
320
 
312
321
  ::selection {
313
- color: var(--bgl-selection-color);
314
- background: var(--bgl-selection-bg);
322
+ color: var(--bgl-selection-color);
323
+ background: var(--bgl-selection-bg);
315
324
  }
316
325
 
317
326
  .popup {
318
- border-radius: 15px;
319
- background: var(--bgl-popup-bg);
320
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
321
- padding: 2rem;
322
- min-width: 300px;
323
- text-align: center;
327
+ border-radius: 15px;
328
+ background: var(--bgl-popup-bg);
329
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
330
+ padding: 2rem;
331
+ min-width: 300px;
332
+ text-align: center;
324
333
  }
325
334
 
326
335
  .tabs {
327
- -moz-column-gap: 1rem;
328
- column-gap: 1rem;
329
- margin-top: 20px;
330
- margin-bottom: -2rem;
331
- border-top: 1px solid var(--border-color);
332
- width: calc(100% + 4rem);
333
- -webkit-margin-start: -2rem;
334
- margin-inline-start: -2rem;
335
- -webkit-padding-start: 2rem;
336
- padding-inline-start: 2rem;
337
- overflow: auto;
338
- display: flex;
336
+ -moz-column-gap: 1rem;
337
+ column-gap: 1rem;
338
+ margin-top: 20px;
339
+ margin-bottom: -2rem;
340
+ border-top: 1px solid var(--border-color);
341
+ width: calc(100% + 4rem);
342
+ -webkit-margin-start: -2rem;
343
+ margin-inline-start: -2rem;
344
+ -webkit-padding-start: 2rem;
345
+ padding-inline-start: 2rem;
346
+ overflow: auto;
347
+ display: flex;
339
348
  }
340
349
 
341
350
  .tab {
342
- font-size: 14px;
343
- font-weight: 600;
344
- line-height: 2.5;
345
- cursor: pointer;
346
- transition: var(--bgl-transition);
347
- border-bottom: 2px solid transparent;
348
- padding: 0 5px;
349
- white-space: nowrap;
350
- text-decoration: none;
351
- color: inherit;
351
+ font-size: 14px;
352
+ font-weight: 600;
353
+ line-height: 2.5;
354
+ cursor: pointer;
355
+ transition: var(--bgl-transition);
356
+ border-bottom: 2px solid transparent;
357
+ padding: 0 5px;
358
+ white-space: nowrap;
359
+ text-decoration: none;
360
+ color: inherit;
352
361
  }
353
362
 
354
363
  .tab.active {
355
- color: var(--bgl-primary);
356
- border-bottom: 2px solid var(--bgl-primary);
364
+ color: var(--bgl-primary);
365
+ border-bottom: 2px solid var(--bgl-primary);
357
366
  }
358
367
 
359
368
  .tab:hover {
360
- color: var(--bgl-primary);
369
+ color: var(--bgl-primary);
361
370
  }
362
371
 
363
372
  .tab:active {
364
- -webkit-filter: brightness(70%);
365
- filter: brightness(70%);
373
+ -webkit-filter: brightness(70%);
374
+ filter: brightness(70%);
366
375
  }
367
376
 
368
377
  .router-tab {
369
- font-size: 14px;
370
- font-weight: 600;
371
- line-height: 2.5;
372
- cursor: pointer;
373
- transition: var(--bgl-transition);
374
- border-bottom: 2px solid transparent;
375
- padding: 0 5px;
376
- white-space: nowrap;
377
- text-decoration: none;
378
- color: inherit;
378
+ font-size: 14px;
379
+ font-weight: 600;
380
+ line-height: 2.5;
381
+ cursor: pointer;
382
+ transition: var(--bgl-transition);
383
+ border-bottom: 2px solid transparent;
384
+ padding: 0 5px;
385
+ white-space: nowrap;
386
+ text-decoration: none;
387
+ color: inherit;
379
388
  }
380
389
 
381
390
  .router-tab.router-link-active {
382
- color: var(--bgl-primary);
383
- border-bottom: 2px solid var(--bgl-primary);
391
+ color: var(--bgl-primary);
392
+ border-bottom: 2px solid var(--bgl-primary);
384
393
  }
385
394
 
386
395
  .router-tab:hover {
387
- color: var(--bgl-primary);
396
+ color: var(--bgl-primary);
388
397
  }
389
398
 
390
399
  .router-tab:active {
391
- -webkit-filter: brightness(70%);
392
- filter: brightness(70%);
400
+ -webkit-filter: brightness(70%);
401
+ filter: brightness(70%);
393
402
  }
394
403
 
395
404
  .entity-container {
396
- display: grid;
397
- height: 100%;
398
- grid-template-columns: minmax(300px, 1fr) 3fr;
399
- grid-gap: 1rem;
400
- -moz-column-gap: 1rem;
401
- column-gap: 1rem;
402
- grid-template-rows: 1fr;
403
- grid-template-areas: 'list-view detail-view';
404
- transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
405
- transition:
406
- grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
407
- -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
408
- transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
405
+ display: grid;
406
+ height: 100%;
407
+ grid-template-columns: minmax(300px, 1fr) 3fr;
408
+ grid-gap: 1rem;
409
+ -moz-column-gap: 1rem;
410
+ column-gap: 1rem;
411
+ grid-template-rows: 1fr;
412
+ grid-template-areas: 'list-view detail-view';
413
+ transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
414
+ transition:
415
+ grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
416
+ -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
417
+ transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
409
418
  }
410
419
 
411
420
  .detail-main {
412
- overflow-y: auto;
421
+ overflow-y: auto;
413
422
  }
414
423
 
415
424
  .content-row p {
416
- margin: 0 0 10px 0;
425
+ margin: 0 0 10px 0;
417
426
  }
418
427
 
419
428
  .id {
420
- color: var(--bgl-gray);
421
- font-size: 9px;
429
+ color: var(--bgl-gray);
430
+ font-size: 9px;
422
431
  }
423
432
 
424
433
  .field {
425
- --field-count: 1;
426
- --width: calc(100% / var(--field-count));
427
- grid-auto-columns: minmax(var(--width), var(--width));
428
- font-size: 10px;
429
- text-align: z;
434
+ --field-count: 1;
435
+ --width: calc(100% / var(--field-count));
436
+ grid-auto-columns: minmax(var(--width), var(--width));
437
+ font-size: 10px;
438
+ text-align: z;
430
439
  }
431
440
 
432
441
  .detail-view-inner {
433
- display: grid;
434
- height: 100%;
435
- overflow: hidden;
436
- grid-template-rows: -webkit-max-content 1fr;
437
- grid-template-rows: max-content 1fr;
438
- gap: 1rem;
442
+ display: grid;
443
+ height: 100%;
444
+ overflow: hidden;
445
+ grid-template-rows: -webkit-max-content 1fr;
446
+ grid-template-rows: max-content 1fr;
447
+ gap: 1rem;
439
448
  }
440
449
 
441
450
  .detail-view-inner-wrap {
442
- height: 100%;
443
- overflow: hidden;
444
- transition: var(--bgl-transition);
451
+ height: 100%;
452
+ overflow: hidden;
453
+ transition: var(--bgl-transition);
445
454
  }
446
455
 
447
456
  .table-list-wrap {
448
- overflow: auto;
457
+ overflow: auto;
449
458
  }
450
459
 
451
460
  .copy-url {
452
- background-color: var(--bgl-gray-light);
453
- border-radius: var(--btn-border-radius);
454
- padding: 0.5rem 1rem;
455
- align-items: center;
456
- justify-content: flex-start;
457
- margin-bottom: 1rem;
458
- display: flex;
459
- justify-content: space-between;
461
+ background-color: var(--bgl-gray-light);
462
+ border-radius: var(--btn-border-radius);
463
+ padding: 0.5rem 1rem;
464
+ align-items: center;
465
+ justify-content: flex-start;
466
+ margin-bottom: 1rem;
467
+ display: flex;
468
+ justify-content: space-between;
460
469
  }
461
470
 
462
471
  .copy-url a {
463
- margin: 0;
464
- font-size: 12px;
465
- opacity: 0.8;
466
- color: var(--bgl-text-color);
467
- word-break: break-all;
472
+ margin: 0;
473
+ font-size: 12px;
474
+ opacity: 0.8;
475
+ color: var(--bgl-text-color);
476
+ word-break: break-all;
468
477
  }
469
478
 
470
479
  .list-view {
471
- grid-area: list-view;
472
- grid-template-areas: 'list-header' 'list-content';
473
- grid-template-columns: 1fr;
474
- overflow-y: auto;
475
- grid-template-rows: -webkit-max-content 1fr;
476
- grid-template-rows: max-content 1fr;
477
- transition: var(--transition);
480
+ grid-area: list-view;
481
+ grid-template-areas: 'list-header''list-content';
482
+ grid-template-columns: 1fr;
483
+ overflow-y: auto;
484
+ grid-template-rows: -webkit-max-content 1fr;
485
+ grid-template-rows: max-content 1fr;
486
+ transition: var(--transition);
478
487
  }
479
488
 
480
489
  .shekel {
481
- line-height: 0;
490
+ line-height: 0;
482
491
  }
483
492
 
484
493
  .view-wrapper {
485
- height: 100%;
486
- position: relative;
487
- overflow: hidden;
494
+ height: 100%;
495
+ position: relative;
496
+ overflow: hidden;
488
497
  }
489
498
 
490
499
  .extraOptions {
491
- max-height: 30px;
492
- overflow: hidden;
493
- transition: all 0.2s 30s ease;
500
+ max-height: 30px;
501
+ overflow: hidden;
502
+ transition: all 0.2s 30s ease;
494
503
  }
495
504
 
496
505
  .extraOptions:hover {
497
- max-height: 200vh;
498
- transition: 0.2s all 0.2s ease;
506
+ max-height: 200vh;
507
+ transition: 0.2s all 0.2s ease;
499
508
  }
500
509
 
501
510
  @media screen and (max-width: 1000px) {
502
- .entity-container {
503
- grid-template-columns: minmax(22vw, 1fr) 2fr;
504
- }
511
+ .entity-container {
512
+ grid-template-columns: minmax(22vw, 1fr) 2fr;
513
+ }
505
514
  }
506
515
 
507
516
  @media screen and (max-width: 910px) {
508
- .tab {
509
- font-size: 12px;
510
- }
511
-
512
- .entity-container {
513
- grid-template-columns: 1fr;
514
- gap: 0;
515
- }
516
-
517
- .detail-view-inner {
518
- border-radius: var(--card-border-radius);
519
- background: var(--bgl-box-bg);
520
- }
521
-
522
- .detail-view-inner-wrap {
523
- position: absolute;
524
- height: 100%;
525
- width: 100%;
526
- background: var(--bgl-bg);
527
- }
528
-
529
- .detail-view-inner-wrap.bgl_card {
530
- background: var(--bgl-box-bg);
531
- }
532
-
533
- .bgl_card {
534
- padding: 1rem 1rem;
535
- }
536
-
537
- .tabs {
538
- -moz-column-gap: 10px;
539
- column-gap: 10px;
540
- margin-top: 10px;
541
- margin-bottom: -15px;
542
- box-sizing: border-box;
543
- -webkit-margin-start: -1rem;
544
- margin-inline-start: -1rem;
545
- -webkit-padding-start: 1rem;
546
- padding-inline-start: 1rem;
547
- max-width: calc(100vw - 2rem);
548
- }
549
-
550
- .popup {
551
- border-radius: 15px;
552
- background: var(--bgl-popup-bg);
553
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
554
- padding: 2rem;
555
- min-width: 0;
556
- max-width: 90%;
557
- max-height: 90vh;
558
- overflow-x: auto;
559
- text-align: center;
560
- }
561
-
562
- .detail-main {
563
- overflow-y: unset;
564
- }
565
-
566
- .detail-section {
567
- height: -webkit-fit-content;
568
- height: -moz-fit-content;
569
- height: fit-content;
570
- }
571
-
572
- .field {
573
- display: flex;
574
- flex-wrap: wrap;
575
- gap: 0.5rem;
576
- align-items: center;
577
- }
578
- }
517
+ .tab {
518
+ font-size: 12px;
519
+ }
520
+
521
+ .entity-container {
522
+ grid-template-columns: 1fr;
523
+ gap: 0;
524
+ }
525
+
526
+ .detail-view-inner {
527
+ border-radius: var(--card-border-radius);
528
+ background: var(--bgl-box-bg);
529
+ }
530
+
531
+ .detail-view-inner-wrap {
532
+ position: absolute;
533
+ height: 100%;
534
+ width: 100%;
535
+ background: var(--bgl-bg);
536
+ }
537
+
538
+ .detail-view-inner-wrap.bgl_card {
539
+ background: var(--bgl-box-bg);
540
+ }
541
+
542
+ .bgl_card {
543
+ padding: 1rem 1rem;
544
+ }
545
+
546
+ .tabs {
547
+ -moz-column-gap: 10px;
548
+ column-gap: 10px;
549
+ margin-top: 10px;
550
+ margin-bottom: -15px;
551
+ box-sizing: border-box;
552
+ -webkit-margin-start: -1rem;
553
+ margin-inline-start: -1rem;
554
+ -webkit-padding-start: 1rem;
555
+ padding-inline-start: 1rem;
556
+ max-width: calc(100vw - 2rem);
557
+ }
558
+
559
+ .popup {
560
+ border-radius: 15px;
561
+ background: var(--bgl-popup-bg);
562
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
563
+ padding: 2rem;
564
+ min-width: 0;
565
+ max-width: 90%;
566
+ max-height: 90vh;
567
+ overflow-x: auto;
568
+ text-align: center;
569
+ }
570
+
571
+ .detail-main {
572
+ overflow-y: unset;
573
+ }
574
+
575
+ .detail-section {
576
+ height: -webkit-fit-content;
577
+ height: -moz-fit-content;
578
+ height: fit-content;
579
+ }
580
+
581
+ .field {
582
+ display: flex;
583
+ flex-wrap: wrap;
584
+ gap: 0.5rem;
585
+ align-items: center;
586
+ }
587
+ }