mashlib 2.0.0-e7e12362 → 2.0.0-e99c8da3
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.
- package/dist/841.mashlib.js +111 -111
- package/dist/841.mashlib.min.js +9 -9
- package/dist/841.mashlib.min.js.map +1 -1
- package/dist/browse-test.html +65 -26
- package/dist/browse.html +61 -20
- package/dist/databrowser.html +1 -1
- package/dist/mash.css +2435 -617
- package/dist/mash.css.map +1 -1
- package/dist/mashlib.js +2152 -2358
- package/dist/mashlib.js.map +1 -1
- package/dist/mashlib.min.js +336 -150
- package/dist/mashlib.min.js.map +1 -1
- package/package.json +24 -24
package/dist/mash.css
CHANGED
|
@@ -1,25 +1,1582 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
/* CVCard.css */
|
|
2
|
+
/* Note: Uses utilities: .section-title for cvOrg styling */
|
|
3
|
+
|
|
4
|
+
.cvSection {
|
|
5
|
+
margin-bottom: 1.25em;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.cvRole {
|
|
9
|
+
margin: var(--spacing-xs) 0;
|
|
10
|
+
font-size: var(--font-size-base);
|
|
11
|
+
line-height: var(--line-height-base);
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
gap: 0.2em;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.cvOrg {
|
|
18
|
+
font-weight: 600;
|
|
19
|
+
color: var(--color-primary);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.cvSkill, .cvLanguage {
|
|
23
|
+
text-align: left;
|
|
24
|
+
margin: var(--spacing-xs) 0;
|
|
25
|
+
font-size: var(--font-size-base);
|
|
26
|
+
line-height: var(--line-height-base);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cvSection h3 {
|
|
30
|
+
color: var(--color-text);
|
|
31
|
+
font-size: var(--font-size-lg);
|
|
32
|
+
font-weight: 600;
|
|
33
|
+
line-height: var(--line-height-tight);
|
|
34
|
+
margin-bottom: var(--spacing-xs);
|
|
35
|
+
border-bottom: 1px solid var(--color-border-pale);
|
|
36
|
+
padding-bottom: var(--spacing-xs);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* ChatWithMe.css */
|
|
40
|
+
/* Uses utilities: .section-centered, .loading-text, .btn-primary, .btn-transparent */
|
|
41
|
+
|
|
42
|
+
.chatSection {
|
|
43
|
+
overflow-x: auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* FriendList.css */
|
|
47
|
+
/* Uses utilities: .list-reset, .section-title, .zebra-stripe, .flex, .gap-xs, .mb-md */
|
|
48
|
+
|
|
49
|
+
.friendItem {
|
|
50
|
+
padding: var(--spacing-xs) 0;
|
|
51
|
+
font-size: 1em;
|
|
52
|
+
color: var(--color-text-muted);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.friendItem:last-child {
|
|
56
|
+
border-bottom: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* ProfileCard.css */
|
|
60
|
+
/* Uses utilities: .action-button-focus, .btn-primary, .flex-column-center, .text-truncate, .text-center, .text-wrap-anywhere, .section-centered, .btn-transparent */
|
|
61
|
+
|
|
62
|
+
.actionButton {
|
|
63
|
+
width: 100%;
|
|
64
|
+
min-width: 180px;
|
|
65
|
+
max-width: 320px;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
display: inline-block;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.profileCard {
|
|
71
|
+
/* Component container */
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.image {
|
|
75
|
+
width: 160px;
|
|
76
|
+
height: 160px;
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
object-fit: cover;
|
|
79
|
+
margin-bottom: var(--spacing-sm);
|
|
80
|
+
box-shadow: var(--box-shadow-sm);
|
|
81
|
+
border: 3px solid var(--color-primary);
|
|
82
|
+
background: var(--color-card-bg);
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.image-alt {
|
|
87
|
+
width: 160px;
|
|
88
|
+
height: 160px;
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
border-radius: 50%;
|
|
93
|
+
margin-bottom: var(--spacing-sm);
|
|
94
|
+
box-shadow: var(--box-shadow-sm);
|
|
95
|
+
border: 3px solid var(--color-primary);
|
|
96
|
+
background: var(--color-card-bg);
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
color: var(--color-text-secondary);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.name {
|
|
102
|
+
font-size: var(--font-size-xl);
|
|
103
|
+
font-weight: 700;
|
|
104
|
+
line-height: var(--line-height-tight);
|
|
105
|
+
text-decoration: underline;
|
|
106
|
+
text-underline-offset: 0.2em;
|
|
107
|
+
margin: 0;
|
|
108
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.intro {
|
|
112
|
+
color: var(--color-text-secondary);
|
|
113
|
+
font-size: var(--font-size-base);
|
|
114
|
+
line-height: var(--line-height-base);
|
|
115
|
+
margin-bottom: var(--spacing-xs);
|
|
116
|
+
max-width: 40ch;
|
|
117
|
+
margin-left: auto;
|
|
118
|
+
margin-right: auto;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.buttonSection {
|
|
122
|
+
color: var(--color-text-secondary);
|
|
123
|
+
font-size: 1em;
|
|
124
|
+
margin-bottom: var(--spacing-xs);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.buttonSubSection {
|
|
128
|
+
width: 100%;
|
|
129
|
+
min-width: 0;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.buttonSubSection button {
|
|
133
|
+
width: 100%;
|
|
134
|
+
min-width: 0;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.qrCodeSection {
|
|
138
|
+
color: var(--color-text-secondary);
|
|
139
|
+
font-size: 1em;
|
|
140
|
+
margin-bottom: var(--spacing-xs);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.details {
|
|
144
|
+
color: var(--color-text-muted);
|
|
145
|
+
font-size: var(--font-size-base);
|
|
146
|
+
line-height: var(--line-height-base);
|
|
147
|
+
max-width: 45ch;
|
|
148
|
+
margin-left: auto;
|
|
149
|
+
margin-right: auto;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* ProfileCard styles as regular CSS */
|
|
153
|
+
.profile-card {
|
|
154
|
+
border: 1px solid #ccc;
|
|
155
|
+
padding: 16px;
|
|
156
|
+
background: white;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ProfileView.css */
|
|
160
|
+
/* Uses utilities: .section-bg, .text-center */
|
|
161
|
+
|
|
162
|
+
.profileSection {
|
|
163
|
+
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Horizontal layout for cards */
|
|
167
|
+
.profile-grid .profileSection {
|
|
168
|
+
width: 100%;
|
|
169
|
+
max-width: 100%;
|
|
170
|
+
box-sizing: border-box;
|
|
171
|
+
margin-bottom: var(--spacing-md);
|
|
172
|
+
box-sizing: border-box;
|
|
173
|
+
margin-bottom: var(--spacing-md);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@media (min-width: 900px) {
|
|
177
|
+
.profileSection {
|
|
178
|
+
margin-bottom: 0;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* QRCodeCard.css */
|
|
183
|
+
/* Note: Uses utilities: .text-center */
|
|
184
|
+
|
|
185
|
+
/* Caption under the QR code */
|
|
186
|
+
.qrCaption {
|
|
187
|
+
text-align: center;
|
|
188
|
+
margin-top: 0;
|
|
189
|
+
font-size: 0.95em;
|
|
190
|
+
color: var(--color-text-secondary);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.QRCode {
|
|
194
|
+
width: 100%;
|
|
195
|
+
max-width: 320px;
|
|
196
|
+
min-width: 180px;
|
|
197
|
+
margin: 0 auto;
|
|
198
|
+
display: block;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.QRCode [role="img"]:focus {
|
|
202
|
+
outline: 2px solid var(--color-primary, #7C4DFF);
|
|
203
|
+
outline-offset: 2px;
|
|
204
|
+
box-shadow: 0 0 0 2px rgba(124,77,255,0.2);
|
|
205
|
+
}
|
|
206
|
+
/* SocialCard.css */
|
|
207
|
+
/* Uses utilities: .list-reset, .text-wrap-anywhere, .flex, .gap-sm, .gap-lg, .rounded-sm */
|
|
208
|
+
|
|
209
|
+
.socialList {
|
|
210
|
+
display: flex;
|
|
211
|
+
flex-direction: row;
|
|
212
|
+
flex-wrap: wrap;
|
|
213
|
+
gap: var(--spacing-lg);
|
|
214
|
+
justify-content: center;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.socialItem {
|
|
218
|
+
display: flex;
|
|
219
|
+
align-items: center;
|
|
220
|
+
gap: var(--spacing-sm);
|
|
221
|
+
font-size: 1.1em;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.socialItem span {
|
|
225
|
+
min-width: 0;
|
|
226
|
+
display: block;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.socialItem a {
|
|
230
|
+
color: var(--color-primary);
|
|
231
|
+
text-decoration: none;
|
|
232
|
+
display: flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: var(--spacing-sm);
|
|
235
|
+
min-height: var(--min-touch-target);
|
|
236
|
+
padding: var(--spacing-xs);
|
|
237
|
+
border-radius: var(--border-radius-base);
|
|
238
|
+
transition: background-color var(--animation-duration) ease;
|
|
239
|
+
position: relative;
|
|
240
|
+
flex: 1;
|
|
241
|
+
min-width: 0;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.socialItem a:hover,
|
|
245
|
+
.socialItem a:focus {
|
|
246
|
+
text-decoration: underline;
|
|
247
|
+
background-color: rgba(124, 77, 255, 0.1);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* Screen reader only external link indication */
|
|
251
|
+
.socialItem a[href^="http"]:after {
|
|
252
|
+
content: " (external link)";
|
|
253
|
+
position: absolute;
|
|
254
|
+
left: -10000px;
|
|
255
|
+
width: 1px;
|
|
256
|
+
height: 1px;
|
|
257
|
+
overflow: hidden;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.socialIcon {
|
|
261
|
+
width: 2.5em;
|
|
262
|
+
height: 2.5em;
|
|
263
|
+
border-radius: var(--border-radius-base);
|
|
264
|
+
background: var(--color-card-bg);
|
|
265
|
+
flex-shrink: 0;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* StuffCard.css */
|
|
269
|
+
/* Uses utilities: .zebra-stripe */
|
|
270
|
+
|
|
271
|
+
.stuffTable {
|
|
272
|
+
width: 100%;
|
|
273
|
+
border-collapse: collapse;
|
|
274
|
+
margin-bottom: var(--spacing-md);
|
|
275
|
+
caption-side: top;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.stuffTable caption {
|
|
279
|
+
font-weight: 600;
|
|
280
|
+
padding: var(--spacing-sm);
|
|
281
|
+
text-align: left;
|
|
282
|
+
color: var(--color-text);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.stuffTable th,
|
|
286
|
+
.stuffTable td {
|
|
287
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
288
|
+
text-align: left;
|
|
289
|
+
line-height: 1.4;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Utility-first CSS classes for layout, spacing, and responsiveness */
|
|
293
|
+
/* ===========================================
|
|
294
|
+
PROFILE GRID LAYOUT
|
|
295
|
+
=========================================== */
|
|
296
|
+
|
|
297
|
+
.profile-grid {
|
|
298
|
+
display: grid;
|
|
299
|
+
grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
|
|
300
|
+
gap: var(--spacing-lg);
|
|
301
|
+
background: var(--color-background);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.profile-header,
|
|
305
|
+
.profile-footer {
|
|
306
|
+
grid-column: 1 / -1;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.center {
|
|
310
|
+
display: flex;
|
|
311
|
+
justify-content: center;
|
|
312
|
+
align-items: center;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.flex {
|
|
316
|
+
display: flex;
|
|
317
|
+
}
|
|
318
|
+
.grid {
|
|
319
|
+
display: grid;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* Spacing utilities using CSS variables */
|
|
323
|
+
.gap-xs { gap: var(--spacing-xs); }
|
|
324
|
+
.gap-sm { gap: var(--spacing-sm); }
|
|
325
|
+
.gap-md { gap: var(--spacing-md); }
|
|
326
|
+
.gap-lg { gap: var(--spacing-lg); }
|
|
327
|
+
.gap-xl { gap: var(--spacing-xl); }
|
|
328
|
+
|
|
329
|
+
.mt-xs { margin-top: var(--spacing-xs); }
|
|
330
|
+
.mt-sm { margin-top: var(--spacing-sm); }
|
|
331
|
+
.mt-md { margin-top: var(--spacing-md); }
|
|
332
|
+
.mt-lg { margin-top: var(--spacing-lg); }
|
|
333
|
+
|
|
334
|
+
.mb-xs { margin-bottom: var(--spacing-xs); }
|
|
335
|
+
.mb-sm { margin-bottom: var(--spacing-sm); }
|
|
336
|
+
.mb-md { margin-bottom: var(--spacing-md); }
|
|
337
|
+
.mb-lg { margin-bottom: var(--spacing-lg); }
|
|
338
|
+
|
|
339
|
+
.p-xs { padding: var(--spacing-xs); }
|
|
340
|
+
.p-sm { padding: var(--spacing-sm); }
|
|
341
|
+
.p-md { padding: var(--spacing-md); }
|
|
342
|
+
.p-lg { padding: var(--spacing-lg); }
|
|
343
|
+
|
|
344
|
+
.rounded { border-radius: var(--border-radius-full); }
|
|
345
|
+
.rounded-sm { border-radius: var(--border-radius-base); }
|
|
346
|
+
|
|
347
|
+
.shadow { box-shadow: var(--box-shadow); }
|
|
348
|
+
.shadow-sm { box-shadow: var(--box-shadow-sm); }
|
|
349
|
+
|
|
350
|
+
.bg-primary {
|
|
351
|
+
background: var(--color-primary);
|
|
352
|
+
color: #fff;
|
|
353
|
+
}
|
|
354
|
+
.bg-card {
|
|
355
|
+
background: var(--color-card-bg);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Accessibility utilities */
|
|
359
|
+
.sr-only {
|
|
360
|
+
position: absolute;
|
|
361
|
+
width: 1px;
|
|
362
|
+
height: 1px;
|
|
363
|
+
padding: 0;
|
|
364
|
+
margin: -1px;
|
|
365
|
+
overflow: hidden;
|
|
366
|
+
clip: rect(0, 0, 0, 0);
|
|
367
|
+
white-space: nowrap;
|
|
368
|
+
border: 0;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.min-touch-target {
|
|
372
|
+
min-height: var(--min-touch-target);
|
|
373
|
+
min-width: var(--min-touch-target);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
/* Enhanced accessibility utilities */
|
|
377
|
+
.visually-hidden {
|
|
378
|
+
position: absolute !important;
|
|
379
|
+
width: 1px !important;
|
|
380
|
+
height: 1px !important;
|
|
381
|
+
padding: 0 !important;
|
|
382
|
+
margin: -1px !important;
|
|
383
|
+
overflow: hidden !important;
|
|
384
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
385
|
+
white-space: nowrap !important;
|
|
386
|
+
border: 0 !important;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.visually-hidden.focusable:focus,
|
|
390
|
+
.visually-hidden.focusable:active {
|
|
391
|
+
position: static !important;
|
|
392
|
+
width: auto !important;
|
|
393
|
+
height: auto !important;
|
|
394
|
+
padding: inherit !important;
|
|
395
|
+
margin: inherit !important;
|
|
396
|
+
overflow: visible !important;
|
|
397
|
+
clip: auto !important;
|
|
398
|
+
white-space: inherit !important;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
/* Skip links utility */
|
|
402
|
+
.skip-links {
|
|
403
|
+
position: absolute;
|
|
404
|
+
top: -100px;
|
|
405
|
+
left: 0;
|
|
406
|
+
z-index: 1000;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.skip-links a {
|
|
410
|
+
position: absolute;
|
|
411
|
+
left: 6px;
|
|
412
|
+
top: 6px;
|
|
413
|
+
padding: var(--spacing-sm);
|
|
414
|
+
background: var(--color-primary);
|
|
415
|
+
color: white;
|
|
416
|
+
text-decoration: none;
|
|
417
|
+
border-radius: var(--border-radius-base);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.skip-links a:focus {
|
|
421
|
+
top: 6px;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.reduced-motion {
|
|
425
|
+
animation: none !important;
|
|
426
|
+
transition: none !important;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
/* Focus management */
|
|
430
|
+
.focus-ring {
|
|
431
|
+
outline: 2px solid var(--color-primary);
|
|
432
|
+
outline-offset: 2px;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.no-focus-ring {
|
|
436
|
+
outline: none;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* ARIA live regions */
|
|
440
|
+
.live-region {
|
|
441
|
+
position: absolute;
|
|
442
|
+
left: -10000px;
|
|
443
|
+
width: 1px;
|
|
444
|
+
height: 1px;
|
|
445
|
+
overflow: hidden;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Note: Use aria-live="polite" or aria-live="assertive" HTML attributes with .live-region */
|
|
449
|
+
|
|
450
|
+
/* Text scaling utilities */
|
|
451
|
+
.text-scale-friendly {
|
|
452
|
+
line-height: 1.5;
|
|
453
|
+
max-width: 70ch; /* Optimal reading length */
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/* Text accessibility utilities */
|
|
457
|
+
.text-readable {
|
|
458
|
+
line-height: var(--line-height-base);
|
|
459
|
+
max-width: 65ch;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.text-lg {
|
|
463
|
+
font-size: var(--font-size-lg);
|
|
464
|
+
line-height: var(--line-height-base);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.text-small {
|
|
468
|
+
font-size: max(var(--font-size-sm), var(--min-font-size));
|
|
469
|
+
line-height: var(--min-line-height);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.text-contrast-high {
|
|
473
|
+
color: var(--color-text);
|
|
474
|
+
font-weight: 600;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* Better focus for text elements */
|
|
478
|
+
.focusable-text:focus {
|
|
479
|
+
background-color: rgba(124, 77, 255, 0.1);
|
|
480
|
+
outline: 2px solid var(--color-primary);
|
|
481
|
+
outline-offset: 2px;
|
|
482
|
+
border-radius: 2px;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* High contrast text */
|
|
486
|
+
.high-contrast {
|
|
487
|
+
color: var(--color-text);
|
|
488
|
+
background: var(--color-background);
|
|
489
|
+
border: 1px solid var(--color-border-pale);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
/* ===========================================
|
|
493
|
+
CONSOLIDATED COMPONENT PATTERNS
|
|
494
|
+
=========================================== */
|
|
495
|
+
|
|
496
|
+
/* Primary Button - used by ChatWithMe, ProfileCard */
|
|
497
|
+
.btn-primary {
|
|
498
|
+
min-height: var(--min-touch-target);
|
|
499
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
500
|
+
border: 1px solid var(--color-primary);
|
|
501
|
+
border-radius: var(--border-radius-base);
|
|
502
|
+
background: var(--color-primary);
|
|
503
|
+
color: white;
|
|
504
|
+
font-weight: 600;
|
|
505
|
+
cursor: pointer;
|
|
506
|
+
transition: all var(--animation-duration) ease;
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.btn-primary:hover {
|
|
510
|
+
background: color-mix(in srgb, var(--color-primary) 90%, black);
|
|
511
|
+
box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.btn-primary:active {
|
|
515
|
+
box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.btn-primary:disabled {
|
|
519
|
+
opacity: 0.6;
|
|
520
|
+
cursor: not-allowed;
|
|
521
|
+
transform: none;
|
|
522
|
+
}
|
|
523
|
+
|
|
524
|
+
/* Action Button Focus - used by ChatWithMe, ProfileCard */
|
|
525
|
+
.action-button-focus:focus,
|
|
526
|
+
.action-button-focus:focus-visible {
|
|
527
|
+
outline: 3px solid var(--color-primary) !important;
|
|
528
|
+
outline-offset: 2px !important;
|
|
529
|
+
box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;
|
|
530
|
+
z-index: 1;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
/* List Reset - used by FriendList, SocialCard, nav */
|
|
534
|
+
.list-reset {
|
|
535
|
+
list-style: none;
|
|
536
|
+
padding: 0;
|
|
537
|
+
margin: 0;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* Zebra Striping - used by FriendList, StuffCard tables */
|
|
541
|
+
.zebra-stripe tr:nth-child(even),
|
|
542
|
+
.zebra-stripe > *:nth-child(even) {
|
|
543
|
+
background-color: rgba(0, 0, 0, 0.02);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/* Section Title - primary colored heading */
|
|
547
|
+
.section-title {
|
|
548
|
+
font-size: 1.25em;
|
|
549
|
+
font-weight: 600;
|
|
550
|
+
color: var(--color-primary);
|
|
551
|
+
margin: 0;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
/* Text Overflow - used by ProfileCard, SocialCard */
|
|
555
|
+
.text-truncate {
|
|
556
|
+
white-space: nowrap;
|
|
557
|
+
text-overflow: ellipsis;
|
|
558
|
+
overflow: hidden;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.text-wrap-anywhere {
|
|
562
|
+
overflow-wrap: anywhere;
|
|
563
|
+
word-break: break-word;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Loading Text - primary colored centered loading indicator */
|
|
567
|
+
.loading-text {
|
|
568
|
+
color: var(--color-primary);
|
|
569
|
+
text-align: center;
|
|
570
|
+
margin: var(--spacing-md) 0;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
/* Centered Section - flex column with center alignment */
|
|
574
|
+
.section-centered {
|
|
575
|
+
display: flex;
|
|
576
|
+
flex-direction: column;
|
|
577
|
+
align-items: center;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
/* Card Section Background */
|
|
581
|
+
.section-bg {
|
|
582
|
+
background: var(--color-section-bg);
|
|
583
|
+
border-radius: var(--border-radius-full);
|
|
584
|
+
box-shadow: var(--box-shadow);
|
|
585
|
+
padding: var(--spacing-md);
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/* Transparent button override (for solid-ui integration) */
|
|
589
|
+
.btn-transparent {
|
|
590
|
+
background-color: transparent;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.btn-transparent:hover {
|
|
594
|
+
background-color: transparent;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
/*
|
|
598
|
+
** Light Theme (Default)
|
|
599
|
+
** Default color scheme for SolidOS
|
|
7
600
|
*/
|
|
8
601
|
|
|
9
|
-
|
|
602
|
+
:root {
|
|
603
|
+
/* Background and Text */
|
|
604
|
+
--color-background: white;
|
|
605
|
+
--color-text: ##1A1A1A;
|
|
606
|
+
--color-text-secondary: #666;
|
|
607
|
+
--color-text-light: #aaa;
|
|
608
|
+
--color-text-link: #3B5998;
|
|
609
|
+
--color-text-link-visited: #3B5998;
|
|
610
|
+
--color-text-link-hover: #3B5998;
|
|
611
|
+
--color-text-link-active: #888;
|
|
612
|
+
--color-text-answer: #00c;
|
|
613
|
+
--color-text-muted: #444;
|
|
614
|
+
--color-text-dark-gray: #202;
|
|
615
|
+
--color-text-blue: #004;
|
|
616
|
+
--color-text-brown: #440;
|
|
617
|
+
|
|
618
|
+
/* Borders */
|
|
619
|
+
--color-border: #ccc;
|
|
620
|
+
--color-border-dark: #777;
|
|
621
|
+
--color-border-darker: #444;
|
|
622
|
+
--color-border-light: #aaa;
|
|
623
|
+
--color-border-pale: #eee;
|
|
624
|
+
|
|
625
|
+
/* Status Colors */
|
|
626
|
+
--color-selected-bg: #8F3;
|
|
627
|
+
--color-warning: red;
|
|
628
|
+
--color-success-bg: #dfd;
|
|
629
|
+
--color-success-border: green;
|
|
630
|
+
--color-failure-bg: white;
|
|
631
|
+
--color-failure-border: red;
|
|
632
|
+
|
|
633
|
+
/* Info and Alert Colors */
|
|
634
|
+
--color-info-bg: #ccccff;
|
|
635
|
+
--color-info-border: #3399ff;
|
|
636
|
+
--color-alert-bg: #ffffdd;
|
|
637
|
+
--color-alert-border: yellow;
|
|
638
|
+
--color-fetch-bg: #eeffee;
|
|
639
|
+
--color-request-bg: yellow;
|
|
640
|
+
--color-error-bg: white;
|
|
641
|
+
--color-error-notice-bg: #fee;
|
|
642
|
+
--color-unparseable-bg: #ffcc00;
|
|
643
|
+
|
|
644
|
+
/* Component Colors */
|
|
645
|
+
--color-container-border: black;
|
|
646
|
+
--color-iframe-bg: white;
|
|
647
|
+
--color-main-block-bg: #fff;
|
|
648
|
+
--color-nav-block-bg: #eee;
|
|
649
|
+
--color-nav-block-border: gray;
|
|
650
|
+
--color-category-bg: #f8fff8;
|
|
651
|
+
--color-category-border: #777777;
|
|
652
|
+
--color-category-class-bg: #efe;
|
|
653
|
+
--color-category-class-border: green;
|
|
654
|
+
--color-pubs-pane-bg: #F2F6DA;
|
|
655
|
+
--color-pubs-pane-border: #777777;
|
|
656
|
+
--color-cv-pane-bg: LightSkyBlue;
|
|
657
|
+
|
|
658
|
+
/* Data Content Pane */
|
|
659
|
+
--color-data-pane-border-top: black;
|
|
660
|
+
--color-data-pane-border-side: #777;
|
|
661
|
+
--color-table-header-bg: #ddf;
|
|
662
|
+
--color-table-result-bg: #fff;
|
|
663
|
+
--color-table-border-dark: #777;
|
|
664
|
+
|
|
665
|
+
/* Notification Colors */
|
|
666
|
+
--color-log-normal: black;
|
|
667
|
+
--color-log-info: black;
|
|
668
|
+
--color-log-warn: black;
|
|
669
|
+
--color-log-warn-bg: #ffd;
|
|
670
|
+
--color-log-error: black;
|
|
671
|
+
--color-log-error-bg: #fdd;
|
|
672
|
+
--color-log-message: green;
|
|
673
|
+
--color-log-debug: black;
|
|
674
|
+
--color-log-debug-bg: #ddf;
|
|
675
|
+
|
|
676
|
+
/* Suggestion List */
|
|
677
|
+
--color-suggestion-bg: white;
|
|
678
|
+
--color-suggestion-border: navy;
|
|
679
|
+
--color-suggestion-link: navy;
|
|
680
|
+
--color-suggestion-selected-bg: navy;
|
|
681
|
+
--color-suggestion-selected-text: white;
|
|
682
|
+
|
|
683
|
+
/* Photo Pane */
|
|
684
|
+
--color-photo-border: #AAAAAA;
|
|
685
|
+
--color-photo-tag-highlight: #DDEEFF;
|
|
686
|
+
--color-photo-tag-highlight-border: #DDBB99;
|
|
687
|
+
--color-photo-thumb-border: #CCCCCC;
|
|
688
|
+
|
|
689
|
+
/* Menu and Tab Colors */
|
|
690
|
+
--color-menu-bg: #FFFFFF;
|
|
691
|
+
--color-menu-item-text: #654d6c;
|
|
692
|
+
--color-menu-item-active: #D1C6DA;
|
|
693
|
+
--color-view-tab-bg: #fff;
|
|
694
|
+
--color-view-window-bg: #ccc;
|
|
695
|
+
--color-query-select-bg: #ccc;
|
|
696
|
+
--color-tab-inactive-bg: #eee;
|
|
697
|
+
--color-tab-inactive-border: #ddd;
|
|
698
|
+
--color-tab-inactive-border-light: #aaa;
|
|
699
|
+
--color-tab-inactive-text: #99f;
|
|
700
|
+
--color-tab-active-bg: #ccc;
|
|
701
|
+
--color-tab-active-border: #ddd;
|
|
702
|
+
--color-tab-active-border-light: #aaa;
|
|
703
|
+
--color-tab-active-text: #22f;
|
|
704
|
+
|
|
705
|
+
/* Special Highlights */
|
|
706
|
+
--color-source-highlight: yellow;
|
|
707
|
+
--color-hover-visibility: visible;
|
|
708
|
+
--color-hidden-visibility: hidden;
|
|
709
|
+
--color-mild-notice-bg: #ffe;
|
|
710
|
+
--color-bottom-border-highlight: rgb(100%,65%,0%);
|
|
711
|
+
--color-col-close: #aaa;
|
|
712
|
+
--color-sort-arrow: #aaa;
|
|
713
|
+
--color-pending-edit: #bbb;
|
|
714
|
+
|
|
715
|
+
/* Typography */
|
|
716
|
+
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
717
|
+
--font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
718
|
+
--font-size-base: 100%;
|
|
719
|
+
--font-size-strong: 120%;
|
|
720
|
+
--font-weight-normal: normal;
|
|
721
|
+
--font-weight-bold: bold;
|
|
722
|
+
--line-height-base: 1.5;
|
|
723
|
+
--line-height-tight: 1.4;
|
|
724
|
+
--line-height-loose: 1.6;
|
|
725
|
+
--letter-spacing-wide: 0.025em;
|
|
726
|
+
--font-size-sm: 0.875rem;
|
|
727
|
+
--font-size-lg: 1.125rem;
|
|
728
|
+
--font-size-xl: 1.25rem;
|
|
729
|
+
|
|
730
|
+
/* Spacing and Sizing */
|
|
731
|
+
--spacing-tiny: 0.05em;
|
|
732
|
+
--spacing-small: 0.1em;
|
|
733
|
+
--spacing-xs: 0.5rem;
|
|
734
|
+
--spacing-sm: 0.75em;
|
|
735
|
+
--spacing-base: 0.5em;
|
|
736
|
+
--spacing-md: 1em;
|
|
737
|
+
--spacing-lg: 1.5em;
|
|
738
|
+
--spacing-xl: 2em;
|
|
739
|
+
--spacing-2xl: 3em;
|
|
740
|
+
--border-width-thin: 1px;
|
|
741
|
+
--border-width-medium: 2px;
|
|
742
|
+
--border-width-bold: 5px;
|
|
743
|
+
--border-radius-base: 0.5em;
|
|
744
|
+
--border-radius-lg: 0.75em;
|
|
745
|
+
--border-radius-full: 1em;
|
|
746
|
+
|
|
747
|
+
/* Primary/Accent Colors */
|
|
748
|
+
--color-primary: #7C4DFF;
|
|
749
|
+
--color-primary-alpha: rgba(124, 77, 255, 0.25);
|
|
750
|
+
--color-primary-alpha-light: rgba(124, 77, 255, 0.1);
|
|
751
|
+
--color-secondary: #0077B6;
|
|
752
|
+
--color-accent: #FFD600;
|
|
753
|
+
--color-error: #B00020;
|
|
754
|
+
--color-success: #00C853;
|
|
755
|
+
|
|
756
|
+
/* Card/Section Backgrounds */
|
|
757
|
+
--color-card-bg: #FFFFFF;
|
|
758
|
+
--color-section-bg: #F5F5F5;
|
|
759
|
+
--color-zebra-stripe: rgba(0, 0, 0, 0.02);
|
|
760
|
+
--color-hover-bg: rgba(0, 0, 0, 0.05);
|
|
761
|
+
|
|
762
|
+
/* Shadows */
|
|
763
|
+
--box-shadow: 0 2px 8px rgba(124,77,255,0.08);
|
|
764
|
+
--box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12);
|
|
765
|
+
|
|
766
|
+
/* Accessibility */
|
|
767
|
+
--min-touch-target: 44px;
|
|
768
|
+
--focus-ring-width: 2px;
|
|
769
|
+
--focus-indicator-width: 3px;
|
|
770
|
+
--animation-duration: 0.2s;
|
|
771
|
+
--animation-duration-slow: 0.3s;
|
|
772
|
+
--min-font-size: 14px;
|
|
773
|
+
--min-line-height: 1.4;
|
|
774
|
+
--high-contrast-ratio: 7:1; /* WCAG AAA standard */
|
|
775
|
+
|
|
776
|
+
/* Overlay and Modal */
|
|
777
|
+
--overlay-bg: rgba(0, 0, 0, 0.5);
|
|
778
|
+
--z-index-modal: 9999;
|
|
779
|
+
--z-index-skip-links: 1000;
|
|
780
|
+
|
|
781
|
+
/* Opacity */
|
|
782
|
+
--opacity-disabled: 0.6;
|
|
783
|
+
|
|
784
|
+
/* Layout Values */
|
|
785
|
+
--max-width-readable: 65ch;
|
|
786
|
+
--max-width-readable-wide: 70ch;
|
|
787
|
+
|
|
788
|
+
/* Outline Offsets */
|
|
789
|
+
--outline-offset-sm: 2px;
|
|
790
|
+
|
|
791
|
+
/* Success Alpha */
|
|
792
|
+
--color-success-alpha: rgba(0, 200, 83, 0.1);
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
/*
|
|
796
|
+
** ------SolidOS Themes------
|
|
797
|
+
** Theme variables for light and dark modes
|
|
798
|
+
*/
|
|
799
|
+
/* @import url('./themes/dark.css'); */
|
|
800
|
+
|
|
801
|
+
|
|
802
|
+
/*
|
|
803
|
+
** ------SolidOS Utility Classes------
|
|
804
|
+
** Reusable utility classes for layout, spacing, accessibility, and components
|
|
805
|
+
*/
|
|
806
|
+
|
|
807
|
+
/* ===========================================
|
|
808
|
+
ACCESSIBILITY UTILITIES (HIGH PRIORITY)
|
|
809
|
+
=========================================== */
|
|
810
|
+
|
|
811
|
+
/* Screen reader only content - hidden visually but available to assistive tech */
|
|
812
|
+
.sr-only {
|
|
813
|
+
position: absolute;
|
|
814
|
+
width: 1px;
|
|
815
|
+
height: 1px;
|
|
816
|
+
padding: 0;
|
|
817
|
+
margin: -1px;
|
|
818
|
+
overflow: hidden;
|
|
819
|
+
clip: rect(0, 0, 0, 0);
|
|
820
|
+
white-space: nowrap;
|
|
821
|
+
border: 0;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
/* Visually hidden but can become visible on focus */
|
|
825
|
+
.visually-hidden {
|
|
826
|
+
position: absolute !important;
|
|
827
|
+
width: 1px !important;
|
|
828
|
+
height: 1px !important;
|
|
829
|
+
padding: 0 !important;
|
|
830
|
+
margin: -1px !important;
|
|
831
|
+
overflow: hidden !important;
|
|
832
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
833
|
+
white-space: nowrap !important;
|
|
834
|
+
border: 0 !important;
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
.visually-hidden.focusable:focus,
|
|
838
|
+
.visually-hidden.focusable:active {
|
|
839
|
+
position: static !important;
|
|
840
|
+
width: auto !important;
|
|
841
|
+
height: auto !important;
|
|
842
|
+
padding: inherit !important;
|
|
843
|
+
margin: inherit !important;
|
|
844
|
+
overflow: visible !important;
|
|
845
|
+
clip: auto !important;
|
|
846
|
+
white-space: inherit !important;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
/* Minimum touch target for mobile accessibility (WCAG 2.5.5) */
|
|
850
|
+
.min-touch-target {
|
|
851
|
+
min-height: var(--min-touch-target);
|
|
852
|
+
min-width: var(--min-touch-target);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/* Reduced motion support */
|
|
856
|
+
.reduced-motion {
|
|
857
|
+
animation: none !important;
|
|
858
|
+
transition: none !important;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
/* Focus ring utility */
|
|
862
|
+
.focus-ring {
|
|
863
|
+
outline: var(--focus-ring-width) solid var(--color-primary);
|
|
864
|
+
outline-offset: var(--outline-offset-sm);
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
.no-focus-ring {
|
|
868
|
+
outline: none;
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
/* ARIA live regions - for dynamic content announcements */
|
|
872
|
+
.live-region {
|
|
873
|
+
position: absolute;
|
|
874
|
+
left: -10000px;
|
|
875
|
+
width: 1px;
|
|
876
|
+
height: 1px;
|
|
877
|
+
overflow: hidden;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
/* Skip links for keyboard navigation */
|
|
881
|
+
.skip-links {
|
|
882
|
+
position: absolute;
|
|
883
|
+
top: -100px;
|
|
884
|
+
left: 0;
|
|
885
|
+
z-index: var(--z-index-skip-links);
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.skip-links a {
|
|
889
|
+
position: absolute;
|
|
890
|
+
left: var(--spacing-xs);
|
|
891
|
+
top: var(--spacing-xs);
|
|
892
|
+
padding: var(--spacing-sm);
|
|
893
|
+
background: var(--color-primary);
|
|
894
|
+
color: var(--color-background);
|
|
895
|
+
text-decoration: none;
|
|
896
|
+
border-radius: var(--border-radius-base);
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.skip-links a:focus {
|
|
900
|
+
top: var(--spacing-xs);
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/* ===========================================
|
|
904
|
+
LAYOUT UTILITIES
|
|
905
|
+
=========================================== */
|
|
906
|
+
|
|
907
|
+
.flex {
|
|
908
|
+
display: flex;
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.grid {
|
|
912
|
+
display: grid;
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
.center {
|
|
916
|
+
display: flex;
|
|
917
|
+
justify-content: center;
|
|
918
|
+
align-items: center;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.flex-center {
|
|
922
|
+
display: flex;
|
|
923
|
+
justify-content: center;
|
|
924
|
+
align-items: center;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.flex-column {
|
|
928
|
+
display: flex;
|
|
929
|
+
flex-direction: column;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.flex-column-center {
|
|
933
|
+
display: flex;
|
|
934
|
+
flex-direction: column;
|
|
935
|
+
align-items: center;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.flex-row {
|
|
939
|
+
display: flex;
|
|
940
|
+
flex-direction: row;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.flex-wrap {
|
|
944
|
+
flex-wrap: wrap;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.flex-1 {
|
|
948
|
+
flex: 1;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
.justify-start {
|
|
952
|
+
justify-content: flex-start;
|
|
953
|
+
}
|
|
954
|
+
|
|
955
|
+
.justify-end {
|
|
956
|
+
justify-content: flex-end;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.justify-center {
|
|
960
|
+
justify-content: center;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.justify-between {
|
|
964
|
+
justify-content: space-between;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.align-start {
|
|
968
|
+
align-items: flex-start;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
.align-end {
|
|
972
|
+
align-items: flex-end;
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.align-center {
|
|
976
|
+
align-items: center;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
/* ===========================================
|
|
980
|
+
SPACING UTILITIES
|
|
981
|
+
=========================================== */
|
|
982
|
+
|
|
983
|
+
/* Gap utilities */
|
|
984
|
+
.gap-xs { gap: var(--spacing-xs); }
|
|
985
|
+
.gap-sm { gap: var(--spacing-sm); }
|
|
986
|
+
.gap-md { gap: var(--spacing-md); }
|
|
987
|
+
.gap-lg { gap: var(--spacing-lg); }
|
|
988
|
+
.gap-xl { gap: var(--spacing-xl); }
|
|
989
|
+
|
|
990
|
+
/* Margin top */
|
|
991
|
+
.mt-0 { margin-top: 0; }
|
|
992
|
+
.mt-xs { margin-top: var(--spacing-xs); }
|
|
993
|
+
.mt-sm { margin-top: var(--spacing-sm); }
|
|
994
|
+
.mt-md { margin-top: var(--spacing-md); }
|
|
995
|
+
.mt-lg { margin-top: var(--spacing-lg); }
|
|
996
|
+
.mt-xl { margin-top: var(--spacing-xl); }
|
|
997
|
+
|
|
998
|
+
/* Margin bottom */
|
|
999
|
+
.mb-0 { margin-bottom: 0; }
|
|
1000
|
+
.mb-xs { margin-bottom: var(--spacing-xs); }
|
|
1001
|
+
.mb-sm { margin-bottom: var(--spacing-sm); }
|
|
1002
|
+
.mb-md { margin-bottom: var(--spacing-md); }
|
|
1003
|
+
.mb-lg { margin-bottom: var(--spacing-lg); }
|
|
1004
|
+
.mb-xl { margin-bottom: var(--spacing-xl); }
|
|
1005
|
+
|
|
1006
|
+
/* Margin left */
|
|
1007
|
+
.ml-0 { margin-left: 0; }
|
|
1008
|
+
.ml-xs { margin-left: var(--spacing-xs); }
|
|
1009
|
+
.ml-sm { margin-left: var(--spacing-sm); }
|
|
1010
|
+
.ml-md { margin-left: var(--spacing-md); }
|
|
1011
|
+
.ml-lg { margin-left: var(--spacing-lg); }
|
|
1012
|
+
|
|
1013
|
+
/* Margin right */
|
|
1014
|
+
.mr-0 { margin-right: 0; }
|
|
1015
|
+
.mr-xs { margin-right: var(--spacing-xs); }
|
|
1016
|
+
.mr-sm { margin-right: var(--spacing-sm); }
|
|
1017
|
+
.mr-md { margin-right: var(--spacing-md); }
|
|
1018
|
+
.mr-lg { margin-right: var(--spacing-lg); }
|
|
1019
|
+
|
|
1020
|
+
/* Margin horizontal (left + right) */
|
|
1021
|
+
.mx-auto { margin-left: auto; margin-right: auto; }
|
|
1022
|
+
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
|
|
1023
|
+
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
|
|
1024
|
+
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
|
|
1025
|
+
|
|
1026
|
+
/* Margin vertical (top + bottom) */
|
|
1027
|
+
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
|
|
1028
|
+
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
|
|
1029
|
+
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
|
|
1030
|
+
|
|
1031
|
+
/* Padding */
|
|
1032
|
+
.p-0 { padding: 0; }
|
|
1033
|
+
.p-xs { padding: var(--spacing-xs); }
|
|
1034
|
+
.p-sm { padding: var(--spacing-sm); }
|
|
1035
|
+
.p-md { padding: var(--spacing-md); }
|
|
1036
|
+
.p-lg { padding: var(--spacing-lg); }
|
|
1037
|
+
.p-xl { padding: var(--spacing-xl); }
|
|
1038
|
+
|
|
1039
|
+
/* Padding top */
|
|
1040
|
+
.pt-xs { padding-top: var(--spacing-xs); }
|
|
1041
|
+
.pt-sm { padding-top: var(--spacing-sm); }
|
|
1042
|
+
.pt-md { padding-top: var(--spacing-md); }
|
|
1043
|
+
.pt-lg { padding-top: var(--spacing-lg); }
|
|
1044
|
+
|
|
1045
|
+
/* Padding bottom */
|
|
1046
|
+
.pb-xs { padding-bottom: var(--spacing-xs); }
|
|
1047
|
+
.pb-sm { padding-bottom: var(--spacing-sm); }
|
|
1048
|
+
.pb-md { padding-bottom: var(--spacing-md); }
|
|
1049
|
+
.pb-lg { padding-bottom: var(--spacing-lg); }
|
|
1050
|
+
|
|
1051
|
+
/* Padding horizontal */
|
|
1052
|
+
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
|
|
1053
|
+
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
|
|
1054
|
+
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
|
|
1055
|
+
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
|
|
1056
|
+
|
|
1057
|
+
/* Padding vertical */
|
|
1058
|
+
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
|
|
1059
|
+
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
|
|
1060
|
+
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
|
|
1061
|
+
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
|
|
1062
|
+
|
|
1063
|
+
/* ===========================================
|
|
1064
|
+
TEXT UTILITIES
|
|
1065
|
+
=========================================== */
|
|
1066
|
+
|
|
1067
|
+
.text-center { text-align: center; }
|
|
1068
|
+
.text-left { text-align: left; }
|
|
1069
|
+
.text-right { text-align: right; }
|
|
1070
|
+
|
|
1071
|
+
.text-secondary { color: var(--color-text-secondary); }
|
|
1072
|
+
.text-muted { color: var(--color-text-muted); }
|
|
1073
|
+
.text-primary { color: var(--color-primary); }
|
|
1074
|
+
.text-error { color: var(--color-error); }
|
|
1075
|
+
.text-success { color: var(--color-success); }
|
|
1076
|
+
|
|
1077
|
+
.text-bold { font-weight: var(--font-weight-bold); }
|
|
1078
|
+
.text-normal { font-weight: var(--font-weight-normal); }
|
|
1079
|
+
|
|
1080
|
+
.text-sm { font-size: var(--font-size-sm); }
|
|
1081
|
+
.text-lg { font-size: var(--font-size-lg); }
|
|
1082
|
+
.text-xl { font-size: var(--font-size-xl); }
|
|
1083
|
+
|
|
1084
|
+
/* Text that respects accessibility guidelines */
|
|
1085
|
+
.text-readable {
|
|
1086
|
+
line-height: var(--line-height-base);
|
|
1087
|
+
max-width: var(--max-width-readable);
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.text-scale-friendly {
|
|
1091
|
+
line-height: var(--line-height-base);
|
|
1092
|
+
max-width: var(--max-width-readable-wide);
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
/* Text with minimum font size safety */
|
|
1096
|
+
.text-small {
|
|
1097
|
+
font-size: max(var(--font-size-sm), var(--min-font-size));
|
|
1098
|
+
line-height: var(--min-line-height);
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.text-large {
|
|
1102
|
+
font-size: var(--font-size-lg);
|
|
1103
|
+
line-height: var(--line-height-base);
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
/* Text overflow handling */
|
|
1107
|
+
.text-truncate {
|
|
1108
|
+
white-space: nowrap;
|
|
1109
|
+
text-overflow: ellipsis;
|
|
1110
|
+
overflow: hidden;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.text-wrap-anywhere {
|
|
1114
|
+
overflow-wrap: anywhere;
|
|
1115
|
+
word-break: break-word;
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
.text-nowrap {
|
|
1119
|
+
white-space: nowrap;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
/* High contrast text for accessibility */
|
|
1123
|
+
.text-contrast-high {
|
|
1124
|
+
color: var(--color-text);
|
|
1125
|
+
font-weight: var(--font-weight-bold);
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1128
|
+
/* Better focus for text elements */
|
|
1129
|
+
.focusable-text:focus {
|
|
1130
|
+
background-color: var(--color-primary-alpha-light);
|
|
1131
|
+
outline: var(--focus-ring-width) solid var(--color-primary);
|
|
1132
|
+
outline-offset: var(--outline-offset-sm);
|
|
1133
|
+
border-radius: var(--outline-offset-sm);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
/* High contrast box */
|
|
1137
|
+
.high-contrast {
|
|
1138
|
+
color: var(--color-text);
|
|
1139
|
+
background: var(--color-background);
|
|
1140
|
+
border: var(--border-width-thin) solid var(--color-border-pale);
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
/* ===========================================
|
|
1144
|
+
BORDER & SHADOW UTILITIES
|
|
1145
|
+
=========================================== */
|
|
1146
|
+
|
|
1147
|
+
.rounded { border-radius: var(--border-radius-full); }
|
|
1148
|
+
.rounded-sm { border-radius: var(--border-radius-base); }
|
|
1149
|
+
.rounded-lg { border-radius: var(--border-radius-lg); }
|
|
1150
|
+
.rounded-none { border-radius: 0; }
|
|
1151
|
+
|
|
1152
|
+
.shadow { box-shadow: var(--box-shadow); }
|
|
1153
|
+
.shadow-sm { box-shadow: var(--box-shadow-sm); }
|
|
1154
|
+
.shadow-none { box-shadow: none; }
|
|
1155
|
+
|
|
1156
|
+
.border { border: var(--border-width-thin) solid var(--color-border); }
|
|
1157
|
+
.border-dark { border: var(--border-width-thin) solid var(--color-border-dark); }
|
|
1158
|
+
.border-light { border: var(--border-width-thin) solid var(--color-border-light); }
|
|
1159
|
+
.border-none { border: none; }
|
|
1160
|
+
|
|
1161
|
+
/* ===========================================
|
|
1162
|
+
BACKGROUND UTILITIES
|
|
1163
|
+
=========================================== */
|
|
1164
|
+
|
|
1165
|
+
.bg-primary {
|
|
1166
|
+
background: var(--color-primary);
|
|
1167
|
+
color: var(--color-background);
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
.bg-card {
|
|
1171
|
+
background: var(--color-card-bg);
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
.bg-section {
|
|
1175
|
+
background: var(--color-section-bg);
|
|
1176
|
+
}
|
|
1177
|
+
|
|
1178
|
+
.bg-transparent {
|
|
1179
|
+
background: transparent;
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1182
|
+
.bg-white {
|
|
1183
|
+
background: var(--color-background);
|
|
1184
|
+
}
|
|
1185
|
+
|
|
1186
|
+
/* ===========================================
|
|
1187
|
+
BUTTON COMPONENTS
|
|
1188
|
+
=========================================== */
|
|
1189
|
+
|
|
1190
|
+
/* Primary button */
|
|
1191
|
+
.btn-primary {
|
|
1192
|
+
min-height: var(--min-touch-target);
|
|
1193
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
1194
|
+
border: var(--border-width-thin) solid var(--color-primary);
|
|
1195
|
+
border-radius: var(--border-radius-base);
|
|
1196
|
+
background: var(--color-primary);
|
|
1197
|
+
color: var(--color-background);
|
|
1198
|
+
font-weight: var(--font-weight-bold);
|
|
1199
|
+
cursor: pointer;
|
|
1200
|
+
transition: all var(--animation-duration) ease;
|
|
1201
|
+
text-decoration: none;
|
|
1202
|
+
display: inline-flex;
|
|
1203
|
+
align-items: center;
|
|
1204
|
+
justify-content: center;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
.btn-primary:hover {
|
|
1208
|
+
background: color-mix(in srgb, var(--color-primary) 85%, black);
|
|
1209
|
+
box-shadow: 0 2px 4px var(--color-primary-alpha);
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
.btn-primary:active {
|
|
1213
|
+
box-shadow: 0 1px 2px var(--color-primary-alpha);
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.btn-primary:focus,
|
|
1217
|
+
.btn-primary:focus-visible {
|
|
1218
|
+
outline: var(--focus-indicator-width) solid var(--color-primary);
|
|
1219
|
+
outline-offset: var(--outline-offset-sm);
|
|
1220
|
+
box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.btn-primary:disabled {
|
|
1224
|
+
opacity: var(--opacity-disabled);
|
|
1225
|
+
cursor: not-allowed;
|
|
1226
|
+
transform: none;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
/* Secondary button */
|
|
1230
|
+
.btn-secondary {
|
|
1231
|
+
min-height: var(--min-touch-target);
|
|
1232
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
1233
|
+
border: var(--border-width-thin) solid var(--color-secondary);
|
|
1234
|
+
border-radius: var(--border-radius-base);
|
|
1235
|
+
background: var(--color-secondary);
|
|
1236
|
+
color: var(--color-background);
|
|
1237
|
+
font-weight: var(--font-weight-bold);
|
|
1238
|
+
cursor: pointer;
|
|
1239
|
+
transition: all var(--animation-duration) ease;
|
|
1240
|
+
text-decoration: none;
|
|
1241
|
+
display: inline-flex;
|
|
1242
|
+
align-items: center;
|
|
1243
|
+
justify-content: center;
|
|
1244
|
+
}
|
|
1245
|
+
|
|
1246
|
+
.btn-secondary:hover {
|
|
1247
|
+
background: color-mix(in srgb, var(--color-secondary) 85%, black);
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
.btn-secondary:disabled {
|
|
1251
|
+
opacity: var(--opacity-disabled);
|
|
1252
|
+
cursor: not-allowed;
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
/* Outline button */
|
|
1256
|
+
.btn-outline {
|
|
1257
|
+
min-height: var(--min-touch-target);
|
|
1258
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
1259
|
+
border: var(--border-width-medium) solid var(--color-primary);
|
|
1260
|
+
border-radius: var(--border-radius-base);
|
|
1261
|
+
background: transparent;
|
|
1262
|
+
color: var(--color-primary);
|
|
1263
|
+
font-weight: var(--font-weight-bold);
|
|
1264
|
+
cursor: pointer;
|
|
1265
|
+
transition: all var(--animation-duration) ease;
|
|
1266
|
+
text-decoration: none;
|
|
1267
|
+
display: inline-flex;
|
|
1268
|
+
align-items: center;
|
|
1269
|
+
justify-content: center;
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.btn-outline:hover {
|
|
1273
|
+
background: var(--color-primary);
|
|
1274
|
+
color: var(--color-background);
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
.btn-outline:disabled {
|
|
1278
|
+
opacity: var(--opacity-disabled);
|
|
1279
|
+
cursor: not-allowed;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
/* Transparent button (for solid-ui integration) */
|
|
1283
|
+
.btn-transparent {
|
|
1284
|
+
background-color: transparent;
|
|
1285
|
+
border: none;
|
|
1286
|
+
cursor: pointer;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
.btn-transparent:hover {
|
|
1290
|
+
background-color: var(--color-hover-bg);
|
|
1291
|
+
}
|
|
1292
|
+
|
|
1293
|
+
/* Button focus state */
|
|
1294
|
+
.action-button-focus:focus,
|
|
1295
|
+
.action-button-focus:focus-visible {
|
|
1296
|
+
outline: var(--focus-indicator-width) solid var(--color-primary) !important;
|
|
1297
|
+
outline-offset: var(--outline-offset-sm) !important;
|
|
1298
|
+
box-shadow: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha) !important;
|
|
1299
|
+
z-index: 1;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
/* ===========================================
|
|
1303
|
+
CARD & SECTION COMPONENTS
|
|
1304
|
+
=========================================== */
|
|
1305
|
+
|
|
1306
|
+
.module-card {
|
|
1307
|
+
background: var(--color-card-bg);
|
|
1308
|
+
border-radius: var(--border-radius-full);
|
|
1309
|
+
box-shadow: var(--box-shadow);
|
|
1310
|
+
padding: var(--spacing-lg);
|
|
1311
|
+
margin-bottom: var(--spacing-lg);
|
|
1312
|
+
width: 100%;
|
|
1313
|
+
max-width: 100%;
|
|
1314
|
+
box-sizing: border-box;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
.module-header {
|
|
1318
|
+
text-align: center;
|
|
1319
|
+
margin-bottom: var(--spacing-md);
|
|
1320
|
+
}
|
|
1321
|
+
|
|
1322
|
+
.section-centered {
|
|
1323
|
+
display: flex;
|
|
1324
|
+
flex-direction: column;
|
|
1325
|
+
align-items: center;
|
|
1326
|
+
}
|
|
1327
|
+
|
|
1328
|
+
.section-bg {
|
|
1329
|
+
background: var(--color-section-bg);
|
|
1330
|
+
border-radius: var(--border-radius-full);
|
|
1331
|
+
box-shadow: var(--box-shadow);
|
|
1332
|
+
padding: var(--spacing-md);
|
|
1333
|
+
}
|
|
1334
|
+
|
|
1335
|
+
.section-title {
|
|
1336
|
+
font-size: var(--font-size-xl);
|
|
1337
|
+
font-weight: var(--font-weight-bold);
|
|
1338
|
+
color: var(--color-primary);
|
|
1339
|
+
margin: 0;
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
/* ===========================================
|
|
1343
|
+
LIST & TABLE UTILITIES
|
|
1344
|
+
=========================================== */
|
|
1345
|
+
|
|
1346
|
+
.list-reset {
|
|
1347
|
+
list-style: none;
|
|
1348
|
+
padding: 0;
|
|
1349
|
+
margin: 0;
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.zebra-stripe tr:nth-child(even),
|
|
1353
|
+
.zebra-stripe > *:nth-child(even) {
|
|
1354
|
+
background-color: var(--color-zebra-stripe);
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
/* ===========================================
|
|
1358
|
+
DISPLAY & VISIBILITY UTILITIES
|
|
1359
|
+
=========================================== */
|
|
1360
|
+
|
|
1361
|
+
.block { display: block; }
|
|
1362
|
+
.inline { display: inline; }
|
|
1363
|
+
.inline-block { display: inline-block; }
|
|
1364
|
+
.hidden { display: none; }
|
|
1365
|
+
.visible { visibility: visible; }
|
|
1366
|
+
.invisible { visibility: hidden; }
|
|
1367
|
+
|
|
1368
|
+
/* ===========================================
|
|
1369
|
+
WIDTH & HEIGHT UTILITIES
|
|
1370
|
+
=========================================== */
|
|
1371
|
+
|
|
1372
|
+
.w-full { width: 100%; }
|
|
1373
|
+
.w-auto { width: auto; }
|
|
1374
|
+
.h-full { height: 100%; }
|
|
1375
|
+
.h-auto { height: auto; }
|
|
1376
|
+
.max-w-full { max-width: 100%; }
|
|
1377
|
+
|
|
1378
|
+
/* ===========================================
|
|
1379
|
+
POSITION UTILITIES
|
|
1380
|
+
=========================================== */
|
|
1381
|
+
|
|
1382
|
+
.relative { position: relative; }
|
|
1383
|
+
.absolute { position: absolute; }
|
|
1384
|
+
.fixed { position: fixed; }
|
|
1385
|
+
.sticky { position: sticky; }
|
|
1386
|
+
|
|
1387
|
+
/* ===========================================
|
|
1388
|
+
LOADING & STATUS INDICATORS
|
|
1389
|
+
=========================================== */
|
|
1390
|
+
|
|
1391
|
+
.loading-text {
|
|
1392
|
+
color: var(--color-primary);
|
|
1393
|
+
text-align: center;
|
|
1394
|
+
margin: var(--spacing-md) 0;
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
.loading-spinner {
|
|
1398
|
+
width: var(--min-touch-target);
|
|
1399
|
+
height: var(--min-touch-target);
|
|
1400
|
+
border: var(--focus-indicator-width) solid var(--color-border-pale);
|
|
1401
|
+
border-top: var(--focus-indicator-width) solid var(--color-primary);
|
|
1402
|
+
border-radius: var(--border-radius-full);
|
|
1403
|
+
animation: spin var(--animation-duration-slow) linear infinite;
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
@keyframes spin {
|
|
1407
|
+
0% { transform: rotate(0deg); }
|
|
1408
|
+
100% { transform: rotate(360deg); }
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
/* ===========================================
|
|
1412
|
+
ARIA ROLE STYLING
|
|
1413
|
+
=========================================== */
|
|
1414
|
+
|
|
1415
|
+
[role="alert"] {
|
|
1416
|
+
padding: var(--spacing-md);
|
|
1417
|
+
border: var(--border-width-medium) solid var(--color-error);
|
|
1418
|
+
border-radius: var(--border-radius-base);
|
|
1419
|
+
background-color: var(--color-primary-alpha-light);
|
|
1420
|
+
margin: var(--spacing-md) 0;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
[role="status"] {
|
|
1424
|
+
padding: var(--spacing-md);
|
|
1425
|
+
border: var(--border-width-medium) solid var(--color-success);
|
|
1426
|
+
border-radius: var(--border-radius-base);
|
|
1427
|
+
background-color: var(--color-success-alpha);
|
|
1428
|
+
margin: var(--spacing-md) 0;
|
|
1429
|
+
}
|
|
1430
|
+
|
|
1431
|
+
/* ===========================================
|
|
1432
|
+
FOCUS TRAP FOR MODALS
|
|
1433
|
+
=========================================== */
|
|
1434
|
+
|
|
1435
|
+
.focus-trap {
|
|
1436
|
+
position: fixed;
|
|
1437
|
+
top: 0;
|
|
1438
|
+
left: 0;
|
|
1439
|
+
width: 100%;
|
|
1440
|
+
height: 100%;
|
|
1441
|
+
z-index: var(--z-index-modal);
|
|
1442
|
+
background: var(--overlay-bg);
|
|
1443
|
+
display: flex;
|
|
1444
|
+
justify-content: center;
|
|
1445
|
+
align-items: center;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
/* ===========================================
|
|
1449
|
+
MEDIA QUERIES
|
|
1450
|
+
=========================================== */
|
|
1451
|
+
|
|
1452
|
+
/* Respect reduced motion preferences */
|
|
1453
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1454
|
+
.loading-spinner {
|
|
1455
|
+
animation: none;
|
|
1456
|
+
border-top-color: var(--color-primary);
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
*,
|
|
1460
|
+
*::before,
|
|
1461
|
+
*::after {
|
|
1462
|
+
animation-duration: 0.01ms !important;
|
|
1463
|
+
animation-iteration-count: 1 !important;
|
|
1464
|
+
transition-duration: 0.01ms !important;
|
|
1465
|
+
}
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
/* High contrast mode support */
|
|
1469
|
+
@media (prefers-contrast: high) {
|
|
1470
|
+
.btn-primary,
|
|
1471
|
+
.btn-secondary,
|
|
1472
|
+
.btn-outline {
|
|
1473
|
+
border-width: var(--border-width-medium);
|
|
1474
|
+
}
|
|
1475
|
+
|
|
1476
|
+
.module-card,
|
|
1477
|
+
.section-bg {
|
|
1478
|
+
border: var(--border-width-medium) solid var(--color-border-dark);
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1481
|
+
|
|
1482
|
+
/* Mobile minimum font size */
|
|
1483
|
+
@media screen and (max-width: 768px) {
|
|
1484
|
+
html {
|
|
1485
|
+
font-size: max(16px, 1rem);
|
|
1486
|
+
}
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
/* Smooth scroll when no motion preference */
|
|
1490
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1491
|
+
html {
|
|
1492
|
+
scroll-behavior: smooth;
|
|
1493
|
+
}
|
|
1494
|
+
}
|
|
1495
|
+
|
|
1496
|
+
/*
|
|
1497
|
+
** ------SolidOS Styles------
|
|
1498
|
+
**
|
|
1499
|
+
*/
|
|
10
1500
|
|
|
11
1501
|
/* I couldn't find the code for the collapse image. this is a quick work around
|
|
12
1502
|
to make the collapsing easier to use ( the triangles dont jump 20 pixels). ~cm2
|
|
13
1503
|
*/
|
|
14
|
-
img[title="Hide details."]{
|
|
1504
|
+
img[title="Hide details."] {
|
|
1505
|
+
float: left;
|
|
1506
|
+
}
|
|
1507
|
+
|
|
1508
|
+
html, body {
|
|
1509
|
+
margin: 0;
|
|
1510
|
+
padding: 0;
|
|
1511
|
+
font-family: var(--font-family-base);
|
|
1512
|
+
font-size: var(--font-size-base);
|
|
1513
|
+
line-height: var(--line-height-base);
|
|
1514
|
+
background: var(--color-background);
|
|
1515
|
+
color: var(--color-text);
|
|
1516
|
+
-webkit-font-smoothing: antialiased;
|
|
1517
|
+
-moz-osx-font-smoothing: grayscale;
|
|
1518
|
+
text-rendering: optimizeLegibility;
|
|
1519
|
+
}
|
|
1520
|
+
|
|
1521
|
+
/* Improved heading hierarchy */
|
|
1522
|
+
h1, h2, h3, h4, h5, h6 {
|
|
1523
|
+
color: var(--color-primary);
|
|
1524
|
+
font-weight: 600;
|
|
1525
|
+
line-height: var(--line-height-tight);
|
|
1526
|
+
margin-top: 0;
|
|
1527
|
+
margin-bottom: var(--spacing-sm);
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
h1 { font-size: 2em; } /* 32px */
|
|
1531
|
+
h2 { font-size: 1.5em; } /* 24px */
|
|
1532
|
+
h3 { font-size: 1.25em; } /* 20px */
|
|
1533
|
+
h4 { font-size: 1.125em; }/* 18px */
|
|
1534
|
+
h5, h6 { font-size: 1em; }/* 16px */
|
|
1535
|
+
|
|
1536
|
+
/* Better paragraph spacing */
|
|
1537
|
+
p {
|
|
1538
|
+
margin-bottom: var(--spacing-md);
|
|
1539
|
+
line-height: var(--line-height-base);
|
|
1540
|
+
max-width: 65ch; /* Optimal reading width */
|
|
1541
|
+
}
|
|
1542
|
+
|
|
1543
|
+
/* Improved link accessibility */
|
|
1544
|
+
a {
|
|
1545
|
+
color: var(--color-primary);
|
|
1546
|
+
text-decoration: underline;
|
|
1547
|
+
text-underline-offset: 0.125em;
|
|
1548
|
+
text-decoration-thickness: 0.0625em;
|
|
1549
|
+
}
|
|
15
1550
|
|
|
16
|
-
|
|
17
|
-
|
|
1551
|
+
a:hover, a:focus {
|
|
1552
|
+
text-decoration-thickness: 0.125em;
|
|
1553
|
+
}
|
|
18
1554
|
|
|
19
|
-
|
|
20
|
-
|
|
1555
|
+
/* Main page elements in databrowser.html */
|
|
1556
|
+
#PageBody {
|
|
1557
|
+
display: flex;
|
|
1558
|
+
flex-direction: column;
|
|
1559
|
+
}
|
|
1560
|
+
#DummyUUID {
|
|
1561
|
+
flex: 1 0 auto;
|
|
1562
|
+
}
|
|
1563
|
+
#PageHeader {
|
|
1564
|
+
flex-shrink: 0;
|
|
1565
|
+
}
|
|
1566
|
+
#PageFooter {
|
|
1567
|
+
flex-shrink: 0;
|
|
1568
|
+
}
|
|
21
1569
|
|
|
22
|
-
.
|
|
1570
|
+
.warning {
|
|
1571
|
+
color: var(--color-warning);
|
|
1572
|
+
}
|
|
1573
|
+
.selected {
|
|
1574
|
+
background-color: var(--color-selected-bg);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
.licOkay {
|
|
1578
|
+
background-color: var(--color-success-bg);
|
|
1579
|
+
}
|
|
23
1580
|
|
|
24
1581
|
/*
|
|
25
1582
|
** other potential colors for CC:
|
|
@@ -28,24 +1585,50 @@ body { height: 100%; background-color: white ; font-family: sans-serif } /* was
|
|
|
28
1585
|
** #ccff99, mit page color
|
|
29
1586
|
*/
|
|
30
1587
|
|
|
31
|
-
strong {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
1588
|
+
strong {
|
|
1589
|
+
font-size: 120%;
|
|
1590
|
+
color: var(--color-text);
|
|
1591
|
+
font-weight: bold;
|
|
1592
|
+
}
|
|
1593
|
+
div.Outliner {
|
|
1594
|
+
margin-top: 2em;
|
|
1595
|
+
padding: 0.8em;
|
|
1596
|
+
}
|
|
1597
|
+
form#TabulateForm {
|
|
1598
|
+
padding: 0.8em;
|
|
1599
|
+
}
|
|
1600
|
+
div#addViewForm {
|
|
1601
|
+
padding: 0.8em;
|
|
1602
|
+
}
|
|
1603
|
+
iframe {
|
|
1604
|
+
background: var(--color-iframe-bg);
|
|
1605
|
+
}
|
|
36
1606
|
|
|
37
1607
|
/* Map */
|
|
38
1608
|
|
|
39
|
-
img.pic {
|
|
1609
|
+
img.pic {
|
|
1610
|
+
max-height: 20em;
|
|
1611
|
+
}
|
|
40
1612
|
|
|
41
1613
|
/* Sources */
|
|
42
1614
|
|
|
43
|
-
.fetched {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
.
|
|
1615
|
+
.fetched {
|
|
1616
|
+
background-color: var(--color-fetch-bg);
|
|
1617
|
+
}
|
|
1618
|
+
.requested {
|
|
1619
|
+
background-color: var(--color-request-bg);
|
|
1620
|
+
}
|
|
1621
|
+
.failed {
|
|
1622
|
+
color: var(--color-warning);
|
|
1623
|
+
background-color: var(--color-error-bg);
|
|
1624
|
+
}
|
|
1625
|
+
.unparseable {
|
|
1626
|
+
background-color: var(--color-unparseable-bg);
|
|
1627
|
+
}
|
|
47
1628
|
|
|
48
|
-
pre#status {
|
|
1629
|
+
pre#status {
|
|
1630
|
+
font-size: 100%;
|
|
1631
|
+
}
|
|
49
1632
|
|
|
50
1633
|
/* Panes */
|
|
51
1634
|
/*
|
|
@@ -62,13 +1645,13 @@ div.instancePane {
|
|
|
62
1645
|
/* ***************** For the Justification UI Panes **********/
|
|
63
1646
|
|
|
64
1647
|
div.container {
|
|
65
|
-
border-top: solid 5px
|
|
66
|
-
border-left: solid 5px
|
|
67
|
-
border-bottom: solid 5px
|
|
68
|
-
border-right: solid 5px
|
|
69
|
-
margin-top: 0.5em;
|
|
70
|
-
margin-bottom: 0.5em;
|
|
71
|
-
border-radius: 0.75em;
|
|
1648
|
+
border-top: solid 5px var(--color-container-border);
|
|
1649
|
+
border-left: solid 5px var(--color-container-border);
|
|
1650
|
+
border-bottom: solid 5px var(--color-container-border);
|
|
1651
|
+
border-right: solid 5px var(--color-container-border);
|
|
1652
|
+
margin-top: 0.5em;
|
|
1653
|
+
margin-bottom: 0.5em;
|
|
1654
|
+
border-radius: 0.75em;
|
|
72
1655
|
}
|
|
73
1656
|
/*
|
|
74
1657
|
div.nonCompliantPane {
|
|
@@ -94,136 +1677,209 @@ div.compliantPane {
|
|
|
94
1677
|
}
|
|
95
1678
|
*/
|
|
96
1679
|
div.justification {
|
|
97
|
-
font-size: 100%;
|
|
98
|
-
padding: 0 5px;
|
|
99
|
-
width: 80%; /* @@ Don't use pixels -- use em */
|
|
100
|
-
background-color:
|
|
101
|
-
margin-top: 0.5em;
|
|
1680
|
+
font-size: 100%;
|
|
1681
|
+
padding: 0 5px;
|
|
1682
|
+
width: 80%; /* @@ Don't use pixels -- use em */
|
|
1683
|
+
background-color: var(--color-background);
|
|
1684
|
+
margin-top: 0.5em;
|
|
1685
|
+
margin-bottom: 0.5em;
|
|
102
1686
|
}
|
|
103
1687
|
|
|
104
|
-
|
|
105
1688
|
div.description {
|
|
106
|
-
font-size: 120%;
|
|
107
|
-
border-top: solid 1px
|
|
108
|
-
border-left: solid 1px
|
|
109
|
-
border-bottom: solid 1px
|
|
110
|
-
border-right: solid 1px
|
|
111
|
-
padding: 15px;
|
|
112
|
-
width: 100%;
|
|
113
|
-
background-color:
|
|
114
|
-
margin-top: 0.5em;
|
|
115
|
-
margin-bottom: 0.5em;
|
|
116
|
-
margin-left: 0.5em;
|
|
117
|
-
margin-right: 0.5em;
|
|
118
|
-
border-radius: 0.75em;
|
|
119
|
-
position:relative;
|
|
120
|
-
left:0
|
|
1689
|
+
font-size: 120%;
|
|
1690
|
+
border-top: solid 1px var(--color-alert-border);
|
|
1691
|
+
border-left: solid 1px var(--color-alert-border);
|
|
1692
|
+
border-bottom: solid 1px var(--color-alert-border);
|
|
1693
|
+
border-right: solid 1px var(--color-alert-border);
|
|
1694
|
+
padding: 15px;
|
|
1695
|
+
width: 100%;
|
|
1696
|
+
background-color: var(--color-alert-bg);
|
|
1697
|
+
margin-top: 0.5em;
|
|
1698
|
+
margin-bottom: 0.5em;
|
|
1699
|
+
margin-left: 0.5em;
|
|
1700
|
+
margin-right: 0.5em;
|
|
1701
|
+
border-radius: 0.75em;
|
|
1702
|
+
position: relative;
|
|
1703
|
+
left: 0%;
|
|
121
1704
|
}
|
|
122
1705
|
|
|
123
1706
|
div.premises {
|
|
124
|
-
font-size: 100%;
|
|
125
|
-
border-top: solid 1px
|
|
126
|
-
border-left: solid 1px
|
|
127
|
-
border-bottom: solid 1px
|
|
128
|
-
border-right: solid 1px
|
|
129
|
-
padding: 0.5px;
|
|
130
|
-
width: 100%;
|
|
131
|
-
background-color:
|
|
132
|
-
margin-top: 0.5em;
|
|
133
|
-
margin-bottom: 0.5em;
|
|
134
|
-
margin-left: 0.5em;
|
|
135
|
-
margin-right: 0.5em;
|
|
136
|
-
border-radius: 0.75em;
|
|
137
|
-
position:relative;
|
|
138
|
-
left:0
|
|
1707
|
+
font-size: 100%;
|
|
1708
|
+
border-top: solid 1px var(--color-info-border);
|
|
1709
|
+
border-left: solid 1px var(--color-info-border);
|
|
1710
|
+
border-bottom: solid 1px var(--color-info-border);
|
|
1711
|
+
border-right: solid 1px var(--color-info-border);
|
|
1712
|
+
padding: 0.5px;
|
|
1713
|
+
width: 100%;
|
|
1714
|
+
background-color: var(--color-info-bg);
|
|
1715
|
+
margin-top: 0.5em;
|
|
1716
|
+
margin-bottom: 0.5em;
|
|
1717
|
+
margin-left: 0.5em;
|
|
1718
|
+
margin-right: 0.5em;
|
|
1719
|
+
border-radius: 0.75em;
|
|
1720
|
+
position: relative;
|
|
1721
|
+
left: 0%; /*May be we could shift the left margin a bit?*/
|
|
139
1722
|
}
|
|
140
1723
|
|
|
141
1724
|
/* ***************** Social Pane **********/
|
|
142
1725
|
|
|
143
1726
|
div.socialPane {
|
|
144
|
-
border-top: solid 1px
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
1727
|
+
border-top: solid 1px var(--color-border-dark);
|
|
1728
|
+
border-bottom: solid 1px var(--color-border-dark);
|
|
1729
|
+
padding-top: 0.5em;
|
|
1730
|
+
padding-bottom: 0.5em;
|
|
1731
|
+
margin: 0;
|
|
1732
|
+
}
|
|
150
1733
|
|
|
1734
|
+
img.foafPic {
|
|
1735
|
+
width: 100%;
|
|
1736
|
+
border: none;
|
|
1737
|
+
margin: 0;
|
|
1738
|
+
padding: 0;
|
|
1739
|
+
/*float:right; */
|
|
1740
|
+
}
|
|
151
1741
|
|
|
152
1742
|
div.mildNotice {
|
|
153
|
-
border: dashed 0.1em
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
1743
|
+
border: dashed 0.1em var(--color-border-dark);
|
|
1744
|
+
margin: 1em;
|
|
1745
|
+
padding: 1em;
|
|
1746
|
+
width: 80%; /* float: right; */
|
|
1747
|
+
background-color: var(--color-mild-notice-bg);
|
|
1748
|
+
}
|
|
1749
|
+
|
|
1750
|
+
.friendBox {
|
|
1751
|
+
/* height: 4em; */
|
|
1752
|
+
border-top: solid 0.01em var(--color-border);
|
|
1753
|
+
margin: 0;
|
|
1754
|
+
padding: 0.3em;
|
|
1755
|
+
/* float: left; */
|
|
1756
|
+
}
|
|
1757
|
+
.friendBoxBig {
|
|
1758
|
+
height: 20em;
|
|
1759
|
+
border-top: solid 0.01em var(--color-text-dark-gray); /* float: left; */
|
|
1760
|
+
}
|
|
1761
|
+
|
|
1762
|
+
.socialPane a {
|
|
1763
|
+
color: var(--color-text-link);
|
|
1764
|
+
text-decoration: none;
|
|
1765
|
+
font-weight: bold;
|
|
1766
|
+
}
|
|
1767
|
+
.socialPane a:link {
|
|
1768
|
+
color: var(--color-text-link);
|
|
1769
|
+
text-decoration: none;
|
|
1770
|
+
font-weight: bold;
|
|
1771
|
+
}
|
|
1772
|
+
.socialPane a:visited {
|
|
1773
|
+
color: var(--color-text-link-visited);
|
|
1774
|
+
text-decoration: none;
|
|
1775
|
+
font-weight: bold;
|
|
1776
|
+
}
|
|
1777
|
+
.socialPane a:hover {
|
|
1778
|
+
color: var(--color-text-link-hover);
|
|
1779
|
+
text-decoration: underline;
|
|
1780
|
+
font-weight: bold;
|
|
1781
|
+
}
|
|
1782
|
+
.socialPane a:active {
|
|
1783
|
+
color: var(--color-text-link-active);
|
|
1784
|
+
text-decoration: none;
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
img.foafThumb {
|
|
1788
|
+
height: 3em;
|
|
1789
|
+
border: 0px;
|
|
1790
|
+
margin: 0.1em;
|
|
1791
|
+
padding: 0.1em;
|
|
1792
|
+
vertical-align: middle;
|
|
169
1793
|
} /* Thumbnail of a fiend etc */
|
|
170
1794
|
|
|
171
|
-
.friendBox .confirmed {
|
|
1795
|
+
.friendBox .confirmed {
|
|
1796
|
+
font-weight: bold;
|
|
1797
|
+
}
|
|
172
1798
|
|
|
173
|
-
table.inputForm {
|
|
1799
|
+
table.inputForm {
|
|
1800
|
+
font-size: 100%;
|
|
1801
|
+
}
|
|
174
1802
|
|
|
175
1803
|
.mainBlock {
|
|
176
|
-
background:
|
|
177
|
-
color:
|
|
178
|
-
float: left;
|
|
179
|
-
width: 46%;
|
|
180
|
-
margin: 0;
|
|
181
|
-
border-left: 1px solid
|
|
182
|
-
border-right: 1px solid
|
|
183
|
-
border-bottom: 1px solid
|
|
184
|
-
padding: 0;
|
|
1804
|
+
background: var(--color-main-block-bg);
|
|
1805
|
+
color: var(--color-text);
|
|
1806
|
+
float: left;
|
|
1807
|
+
width: 46%;
|
|
1808
|
+
margin: 0;
|
|
1809
|
+
border-left: 1px solid var(--color-border);
|
|
1810
|
+
border-right: 1px solid var(--color-border);
|
|
1811
|
+
border-bottom: 1px solid var(--color-border);
|
|
1812
|
+
padding: 0;
|
|
185
1813
|
}
|
|
186
1814
|
|
|
187
1815
|
.navBlock {
|
|
188
|
-
background-color:
|
|
189
|
-
float: left;
|
|
190
|
-
width: 25%;
|
|
191
|
-
border: 0;
|
|
192
|
-
padding: 0.5em;
|
|
193
|
-
margin: 0;
|
|
1816
|
+
background-color: var(--color-nav-block-bg);
|
|
1817
|
+
float: left;
|
|
1818
|
+
width: 25%;
|
|
1819
|
+
border: 0;
|
|
1820
|
+
padding: 0.5em;
|
|
1821
|
+
margin: 0;
|
|
194
1822
|
}
|
|
195
1823
|
|
|
196
1824
|
.navBlock .navSection {
|
|
197
|
-
border: solid 0.05em
|
|
198
|
-
padding: 0.5em;
|
|
199
|
-
border-radius: 0.5em; /* CSS3: border-radius: .4em; */
|
|
1825
|
+
border: solid 0.05em var(--color-nav-block-border);
|
|
1826
|
+
padding: 0.5em;
|
|
1827
|
+
border-radius: 0.5em; /* CSS3: border-radius: .4em; */
|
|
200
1828
|
}
|
|
201
1829
|
|
|
202
|
-
div.socialPane h2 {
|
|
203
|
-
|
|
1830
|
+
div.socialPane h2 {
|
|
1831
|
+
color: var(--color-text-dark-gray);
|
|
1832
|
+
}
|
|
1833
|
+
div.socialPane h3 {
|
|
1834
|
+
color: var(--color-text-dark-gray);
|
|
1835
|
+
}
|
|
204
1836
|
|
|
205
1837
|
div.social_linkButton {
|
|
206
|
-
width: 80%;
|
|
207
|
-
background-color:
|
|
208
|
-
border: solid 0.05em
|
|
209
|
-
margin-top: 0.1em;
|
|
210
|
-
|
|
211
|
-
|
|
1838
|
+
width: 80%;
|
|
1839
|
+
background-color: var(--color-background);
|
|
1840
|
+
border: solid 0.05em var(--color-border);
|
|
1841
|
+
margin-top: 0.1em;
|
|
1842
|
+
margin-bottom: 0.1em;
|
|
1843
|
+
padding: 0.1em;
|
|
1844
|
+
text-align: center;
|
|
212
1845
|
}
|
|
213
1846
|
|
|
214
1847
|
/* For question-and-answer stuff for new web id but quite reusable.
|
|
215
1848
|
*/
|
|
216
|
-
.answer
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
1849
|
+
.answer {
|
|
1850
|
+
font-style: italic;
|
|
1851
|
+
color: var(--color-text-answer);
|
|
1852
|
+
text-decoration: underline;
|
|
1853
|
+
}
|
|
1854
|
+
.tip {
|
|
1855
|
+
font-style: normal;
|
|
1856
|
+
color: var(--color-text);
|
|
1857
|
+
margin: 1em;
|
|
1858
|
+
}
|
|
1859
|
+
.task {
|
|
1860
|
+
font-style: normal;
|
|
1861
|
+
color: var(--color-text);
|
|
1862
|
+
margin: 1em;
|
|
1863
|
+
background-color: var(--color-mild-notice-bg);
|
|
1864
|
+
padding: 1em;
|
|
1865
|
+
border-radius: 1em; /* CSS3: border-radius: 1em; */
|
|
1866
|
+
}
|
|
1867
|
+
.success {
|
|
1868
|
+
background-color: var(--color-success-bg);
|
|
1869
|
+
}
|
|
1870
|
+
.failure {
|
|
1871
|
+
background-color: var(--color-failure-bg);
|
|
1872
|
+
border: 0.5em var(--color-failure-border);
|
|
1873
|
+
}
|
|
1874
|
+
div.unknown {
|
|
1875
|
+
display: none;
|
|
1876
|
+
}
|
|
1877
|
+
div.yes > div.negative {
|
|
1878
|
+
display: none;
|
|
1879
|
+
}
|
|
1880
|
+
div.no > div.affirmative {
|
|
1881
|
+
display: none;
|
|
1882
|
+
}
|
|
227
1883
|
|
|
228
1884
|
/******************* Exception Pane ********
|
|
229
1885
|
**
|
|
@@ -231,228 +1887,301 @@ div.no > div.affirmative { display: none }
|
|
|
231
1887
|
** throws an exception
|
|
232
1888
|
**/
|
|
233
1889
|
|
|
234
|
-
div.exceptionPane pre {
|
|
235
|
-
|
|
236
|
-
|
|
1890
|
+
div.exceptionPane pre {
|
|
1891
|
+
background-color: var(--color-error-notice-bg);
|
|
1892
|
+
}
|
|
237
1893
|
|
|
238
1894
|
/******************* Category Pane *********/
|
|
239
1895
|
|
|
240
|
-
.categoryPane a
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
1896
|
+
.categoryPane a {
|
|
1897
|
+
color: var(--color-text-link);
|
|
1898
|
+
text-decoration: none;
|
|
1899
|
+
font-weight: bold;
|
|
1900
|
+
}
|
|
1901
|
+
.categoryPane a:link {
|
|
1902
|
+
color: var(--color-text-link);
|
|
1903
|
+
text-decoration: none;
|
|
1904
|
+
font-weight: bold;
|
|
1905
|
+
}
|
|
1906
|
+
.categoryPane a:visited {
|
|
1907
|
+
color: var(--color-text-link-visited);
|
|
1908
|
+
text-decoration: none;
|
|
1909
|
+
font-weight: bold;
|
|
1910
|
+
}
|
|
1911
|
+
.categoryPane a:hover {
|
|
1912
|
+
color: var(--color-text-link-hover);
|
|
1913
|
+
text-decoration: underline;
|
|
1914
|
+
font-weight: bold;
|
|
1915
|
+
}
|
|
1916
|
+
.categoryPane a:active {
|
|
1917
|
+
color: var(--color-text-link-active);
|
|
1918
|
+
text-decoration: none;
|
|
1919
|
+
}
|
|
245
1920
|
|
|
246
|
-
.categoryBottomClass {
|
|
1921
|
+
.categoryBottomClass {
|
|
1922
|
+
background-color: var(--color-category-class-bg);
|
|
1923
|
+
border: 0.1em solid var(--color-category-class-border);
|
|
1924
|
+
}
|
|
247
1925
|
|
|
248
|
-
.categoryTable {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
1926
|
+
.categoryTable {
|
|
1927
|
+
padding-left: 2em;
|
|
1928
|
+
}
|
|
1929
|
+
.categoryPane {
|
|
1930
|
+
background-color: var(--color-category-bg);
|
|
1931
|
+
padding: 0.5em;
|
|
1932
|
+
border-width: 0.1em;
|
|
1933
|
+
border-color: var(--color-category-border);
|
|
1934
|
+
border-radius: 1em; /* CSS3: border-radius: .4em; */
|
|
1935
|
+
}
|
|
252
1936
|
|
|
253
|
-
.categoryPane a.categoryWhy
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
.categoryPane a.categoryWhy:
|
|
257
|
-
|
|
1937
|
+
.categoryPane a.categoryWhy {
|
|
1938
|
+
color: var(--color-border-pale);
|
|
1939
|
+
}
|
|
1940
|
+
.categoryPane a.categoryWhy:link {
|
|
1941
|
+
color: var(--color-border-pale);
|
|
1942
|
+
text-decoration: none;
|
|
1943
|
+
font-weight: bold;
|
|
1944
|
+
}
|
|
1945
|
+
.categoryPane a.categoryWhy:visited {
|
|
1946
|
+
color: var(--color-border-pale);
|
|
1947
|
+
text-decoration: none;
|
|
1948
|
+
font-weight: bold;
|
|
1949
|
+
}
|
|
1950
|
+
.categoryPane a.categoryWhy:hover {
|
|
1951
|
+
color: var(--color-text-link-hover);
|
|
1952
|
+
text-decoration: underline;
|
|
1953
|
+
font-weight: bold;
|
|
1954
|
+
}
|
|
1955
|
+
.categoryPane a.categoryWhy:active {
|
|
1956
|
+
color: var(--color-border-pale);
|
|
1957
|
+
text-decoration: none;
|
|
1958
|
+
}
|
|
258
1959
|
|
|
259
|
-
.categoryPane a.categoryWhy {
|
|
1960
|
+
.categoryPane a.categoryWhy {
|
|
1961
|
+
color: grey;
|
|
1962
|
+
}
|
|
260
1963
|
/* a.categoryWhy:hover { color: #3B5998 } */
|
|
261
1964
|
|
|
262
|
-
|
|
263
1965
|
/******************* PubsPane *********/
|
|
264
1966
|
|
|
265
1967
|
.pubsPane {
|
|
266
|
-
background-color:
|
|
267
|
-
border-width: 0.1em;
|
|
268
|
-
border-color:
|
|
269
|
-
border-radius: 1em; /* CSS3: border-radius: .4em; */
|
|
270
|
-
padding: 1em;
|
|
1968
|
+
background-color: var(--color-pubs-pane-bg);
|
|
1969
|
+
border-width: 0.1em;
|
|
1970
|
+
border-color: var(--color-pubs-pane-border);
|
|
1971
|
+
border-radius: 1em; /* CSS3: border-radius: .4em; */
|
|
1972
|
+
padding: 1em;
|
|
271
1973
|
|
|
272
|
-
text-decoration: none;
|
|
273
|
-
font-weight: bold;
|
|
1974
|
+
text-decoration: none;
|
|
1975
|
+
font-weight: bold;
|
|
274
1976
|
}
|
|
275
1977
|
|
|
276
1978
|
.pubsPane h2 {
|
|
277
|
-
margin: 0;
|
|
278
|
-
padding: 0;
|
|
1979
|
+
margin: 0;
|
|
1980
|
+
padding: 0;
|
|
279
1981
|
}
|
|
280
1982
|
|
|
281
1983
|
.pubsPane form {
|
|
282
|
-
padding-left: 1em;
|
|
1984
|
+
padding-left: 1em;
|
|
283
1985
|
}
|
|
284
1986
|
|
|
285
1987
|
/*Clear both - start things on individula lines */
|
|
286
1988
|
.pubsRow {
|
|
287
|
-
margin: 0.5em 3em 0.5em 0em;
|
|
288
|
-
clear: both;
|
|
1989
|
+
margin: 0.5em 3em 0.5em 0em;
|
|
1990
|
+
clear: both;
|
|
289
1991
|
}
|
|
290
1992
|
|
|
291
1993
|
/*inputs float right to line up */
|
|
292
1994
|
.pubsRow input {
|
|
293
|
-
float: right;
|
|
294
|
-
width: 20em;
|
|
295
|
-
height: 1em;
|
|
1995
|
+
float: right;
|
|
1996
|
+
width: 20em;
|
|
1997
|
+
height: 1em;
|
|
296
1998
|
}
|
|
297
1999
|
#inpid_book_description {
|
|
298
|
-
float: right;
|
|
299
|
-
height: 8em;
|
|
300
|
-
width: 17em;
|
|
2000
|
+
float: right;
|
|
2001
|
+
height: 8em;
|
|
2002
|
+
width: 17em;
|
|
301
2003
|
}
|
|
302
2004
|
|
|
303
2005
|
.pubsRow button {
|
|
304
|
-
float: left;
|
|
305
|
-
height: 2em;
|
|
306
|
-
padding: 0.5em;
|
|
307
|
-
margin: 0.5em;
|
|
2006
|
+
float: left;
|
|
2007
|
+
height: 2em;
|
|
2008
|
+
padding: 0.5em;
|
|
2009
|
+
margin: 0.5em;
|
|
308
2010
|
}
|
|
309
2011
|
|
|
310
|
-
.hideit
|
|
311
|
-
|
|
312
|
-
display: none;
|
|
2012
|
+
.hideit {
|
|
2013
|
+
display: none;
|
|
313
2014
|
}
|
|
314
2015
|
|
|
315
2016
|
.active {
|
|
316
|
-
/* display: visible; */
|
|
2017
|
+
/* display: visible; */
|
|
317
2018
|
}
|
|
318
2019
|
|
|
319
2020
|
.submitRow {
|
|
320
|
-
clear: both;
|
|
321
|
-
height: 5em;
|
|
2021
|
+
clear: both;
|
|
2022
|
+
height: 5em;
|
|
322
2023
|
}
|
|
323
2024
|
|
|
324
2025
|
.submitRow button {
|
|
325
|
-
width: 7em;
|
|
326
|
-
height: 100%;
|
|
2026
|
+
width: 7em;
|
|
2027
|
+
height: 100%;
|
|
327
2028
|
}
|
|
328
2029
|
|
|
329
2030
|
#buttonid {
|
|
330
|
-
display: none;
|
|
2031
|
+
display: none;
|
|
331
2032
|
}
|
|
332
2033
|
|
|
333
|
-
#buttonid.active{
|
|
334
|
-
display: inline;
|
|
2034
|
+
#buttonid.active {
|
|
2035
|
+
display: inline;
|
|
335
2036
|
}
|
|
336
2037
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
2038
|
/******************* CV Pane *****************/
|
|
341
2039
|
|
|
342
2040
|
.CVclass {
|
|
343
|
-
background-color:
|
|
2041
|
+
background-color: var(--color-cv-pane-bg);
|
|
344
2042
|
}
|
|
345
2043
|
|
|
346
2044
|
/******************* Data Content Pane *****************/
|
|
347
2045
|
|
|
348
2046
|
div.dataContentPane {
|
|
349
|
-
border-top: solid 1px
|
|
350
|
-
border-left: solid 1px
|
|
351
|
-
border-bottom: solid 1px
|
|
352
|
-
border-right: solid 1px
|
|
353
|
-
padding: 0.5em; /* color: #404; */
|
|
354
|
-
margin-top: 0.5em;
|
|
2047
|
+
border-top: solid 1px var(--color-data-pane-border-top);
|
|
2048
|
+
border-left: solid 1px var(--color-data-pane-border-top);
|
|
2049
|
+
border-bottom: solid 1px var(--color-data-pane-border-side);
|
|
2050
|
+
border-right: solid 1px var(--color-data-pane-border-side);
|
|
2051
|
+
padding: 0.5em; /* color: #404; */
|
|
2052
|
+
margin-top: 0.5em;
|
|
2053
|
+
margin-bottom: 0.5em;
|
|
355
2054
|
}
|
|
356
2055
|
|
|
357
2056
|
.nestedFormula {
|
|
358
|
-
border-top: solid 1px
|
|
359
|
-
border-left: solid 1px
|
|
360
|
-
border-bottom: solid 1px
|
|
361
|
-
border-right: solid 1px
|
|
362
|
-
padding: 0.5em;
|
|
363
|
-
border-radius: 0.5em;
|
|
2057
|
+
border-top: solid 1px var(--color-data-pane-border-top);
|
|
2058
|
+
border-left: solid 1px var(--color-data-pane-border-top);
|
|
2059
|
+
border-bottom: solid 1px var(--color-data-pane-border-side);
|
|
2060
|
+
border-right: solid 1px var(--color-data-pane-border-side);
|
|
2061
|
+
padding: 0.5em;
|
|
2062
|
+
border-radius: 0.5em;
|
|
364
2063
|
}
|
|
365
2064
|
|
|
366
2065
|
div.dataContentPane td {
|
|
367
|
-
padding-left: 0.2em;
|
|
368
|
-
padding-top: 0.1em;
|
|
369
|
-
padding-right: 0.2em;
|
|
370
|
-
padding-bottom: 0.05em;
|
|
371
|
-
/* vertical-align: middle; /*@@ Lalana's request*/
|
|
372
|
-
vertical-align: top; /*@@ Tims's request*/
|
|
373
|
-
/* With middel, you can't tell what is with what */
|
|
374
|
-
/* background-color: white; */
|
|
2066
|
+
padding-left: 0.2em;
|
|
2067
|
+
padding-top: 0.1em;
|
|
2068
|
+
padding-right: 0.2em;
|
|
2069
|
+
padding-bottom: 0.05em;
|
|
2070
|
+
/* vertical-align: middle; /*@@ Lalana's request*/
|
|
2071
|
+
vertical-align: top; /*@@ Tims's request*/
|
|
2072
|
+
/* With middel, you can't tell what is with what */
|
|
2073
|
+
/* background-color: white; */
|
|
375
2074
|
}
|
|
376
2075
|
|
|
377
2076
|
div.dataContentPane tr {
|
|
378
|
-
margin-bottom: 0.6em;
|
|
379
|
-
padding-top: 1em;
|
|
380
|
-
padding-bottom: 1em;
|
|
381
|
-
|
|
2077
|
+
margin-bottom: 0.6em;
|
|
2078
|
+
padding-top: 1em;
|
|
2079
|
+
padding-bottom: 1em;
|
|
382
2080
|
}
|
|
383
2081
|
|
|
384
|
-
.dataContentPane a
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
2082
|
+
.dataContentPane a {
|
|
2083
|
+
color: var(--color-text-link);
|
|
2084
|
+
text-decoration: none;
|
|
2085
|
+
font-weight: bold;
|
|
2086
|
+
}
|
|
2087
|
+
.dataContentPane a:link {
|
|
2088
|
+
color: var(--color-text-link);
|
|
2089
|
+
text-decoration: none;
|
|
2090
|
+
font-weight: bold;
|
|
2091
|
+
}
|
|
2092
|
+
.dataContentPane a:visited {
|
|
2093
|
+
color: var(--color-text-link-visited);
|
|
2094
|
+
text-decoration: none;
|
|
2095
|
+
font-weight: bold;
|
|
2096
|
+
}
|
|
2097
|
+
.dataContentPane a:hover {
|
|
2098
|
+
color: var(--color-text-link-hover);
|
|
2099
|
+
text-decoration: underline;
|
|
2100
|
+
font-weight: bold;
|
|
2101
|
+
}
|
|
2102
|
+
.dataContentPane a:active {
|
|
2103
|
+
color: var(--color-text-link-active);
|
|
2104
|
+
text-decoration: none;
|
|
2105
|
+
}
|
|
389
2106
|
|
|
390
|
-
.dataContentPane.embeddedText {
|
|
391
|
-
|
|
2107
|
+
.dataContentPane.embeddedText {
|
|
2108
|
+
white-space: pre-wrap;
|
|
2109
|
+
}
|
|
2110
|
+
.dataContentPane.embeddedXHTML {
|
|
2111
|
+
}
|
|
392
2112
|
|
|
393
2113
|
/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
|
|
394
|
-
div.dataContentPane td.pred
|
|
395
|
-
|
|
2114
|
+
div.dataContentPane td.pred {
|
|
2115
|
+
min-width: 12em;
|
|
2116
|
+
} /* Keep aligned with others better */
|
|
2117
|
+
div.dataContentPane td.pred a {
|
|
2118
|
+
color: var(--color-text-muted);
|
|
2119
|
+
} /* Greyish as form field names have less info value */
|
|
396
2120
|
|
|
397
2121
|
/* .collectionAsTables {border-right: green 1px; margin: 0.2em;} */
|
|
398
2122
|
|
|
399
|
-
|
|
400
|
-
|
|
401
2123
|
div.n3Pane {
|
|
402
|
-
padding: 1em;
|
|
403
|
-
border-top: solid 1px
|
|
404
|
-
border-left: solid 1px
|
|
405
|
-
border-bottom: solid 1px
|
|
406
|
-
border-right: solid 1px
|
|
407
|
-
color:
|
|
2124
|
+
padding: 1em;
|
|
2125
|
+
border-top: solid 1px var(--color-data-pane-border-top);
|
|
2126
|
+
border-left: solid 1px var(--color-data-pane-border-top);
|
|
2127
|
+
border-bottom: solid 1px var(--color-data-pane-border-side);
|
|
2128
|
+
border-right: solid 1px var(--color-data-pane-border-side);
|
|
2129
|
+
color: var(--color-text-blue);
|
|
408
2130
|
}
|
|
409
2131
|
|
|
410
|
-
.imageView {
|
|
2132
|
+
.imageView {
|
|
2133
|
+
border: 1em var(--color-background);
|
|
2134
|
+
margin: 1em;
|
|
2135
|
+
}
|
|
411
2136
|
|
|
412
|
-
.n3Pane pre {
|
|
413
|
-
|
|
2137
|
+
.n3Pane pre {
|
|
2138
|
+
font-size: 120%;
|
|
2139
|
+
}
|
|
2140
|
+
div.n3Pane {
|
|
2141
|
+
}
|
|
414
2142
|
|
|
415
|
-
.RDFXMLPane pre {
|
|
416
|
-
|
|
2143
|
+
.RDFXMLPane pre {
|
|
2144
|
+
font-size: 120%;
|
|
2145
|
+
}
|
|
2146
|
+
div.RDFXMLPane {
|
|
2147
|
+
}
|
|
417
2148
|
|
|
418
2149
|
div.RDFXMLPane {
|
|
419
|
-
padding: 1em;
|
|
420
|
-
border-top: solid 2px
|
|
421
|
-
border-left: solid 2px
|
|
422
|
-
border-bottom: solid 2px
|
|
423
|
-
border-right: solid 2px
|
|
424
|
-
color:
|
|
2150
|
+
padding: 1em;
|
|
2151
|
+
border-top: solid 2px var(--color-data-pane-border-top);
|
|
2152
|
+
border-left: solid 2px var(--color-data-pane-border-top);
|
|
2153
|
+
border-bottom: solid 2px var(--color-data-pane-border-side);
|
|
2154
|
+
border-right: solid 2px var(--color-data-pane-border-side);
|
|
2155
|
+
color: var(--color-text-brown);
|
|
425
2156
|
}
|
|
426
2157
|
|
|
427
2158
|
/* Generic things useful anywhere */
|
|
428
2159
|
|
|
429
|
-
|
|
430
2160
|
img.hideTillHover {
|
|
431
|
-
visibility:hidden;
|
|
2161
|
+
visibility: hidden;
|
|
432
2162
|
}
|
|
433
|
-
img.hideTillHover:hover
|
|
434
|
-
visibility:visible;
|
|
2163
|
+
img.hideTillHover:hover {
|
|
2164
|
+
visibility: visible;
|
|
435
2165
|
}
|
|
436
|
-
.hideTillHover img{
|
|
437
|
-
visibility:hidden;
|
|
2166
|
+
.hideTillHover img {
|
|
2167
|
+
visibility: hidden;
|
|
438
2168
|
}
|
|
439
2169
|
.hideTillHover:hover img {
|
|
440
|
-
visibility:visible;
|
|
2170
|
+
visibility: visible;
|
|
441
2171
|
}
|
|
442
|
-
.hideTillHover a{
|
|
443
|
-
visibility:hidden;
|
|
2172
|
+
.hideTillHover a {
|
|
2173
|
+
visibility: hidden;
|
|
444
2174
|
}
|
|
445
2175
|
.hideTillHover:hover a {
|
|
446
|
-
visibility:visible;
|
|
2176
|
+
visibility: visible;
|
|
447
2177
|
}
|
|
448
|
-
.hoverControl .hoverControlHide{
|
|
449
|
-
visibility:hidden;
|
|
2178
|
+
.hoverControl .hoverControlHide {
|
|
2179
|
+
visibility: hidden;
|
|
450
2180
|
}
|
|
451
2181
|
.hoverControl:hover .hoverControlHide {
|
|
452
|
-
visibility:visible;
|
|
2182
|
+
visibility: visible;
|
|
453
2183
|
}
|
|
454
2184
|
|
|
455
|
-
|
|
456
2185
|
/* Pane icons: */
|
|
457
2186
|
|
|
458
2187
|
/*
|
|
@@ -478,311 +2207,369 @@ visibility:visible;
|
|
|
478
2207
|
.hoverControl:hover .paneHidden { border-radius: 0.5em; margin-left: 1em; padding: 3px; visibility:visible; }
|
|
479
2208
|
*/
|
|
480
2209
|
|
|
481
|
-
|
|
482
|
-
|
|
483
2210
|
/* outline object view */
|
|
484
|
-
img.outlineImage {
|
|
2211
|
+
img.outlineImage {
|
|
2212
|
+
max-height: 20em;
|
|
2213
|
+
max-width: 30em;
|
|
2214
|
+
} /* save vertical space */
|
|
485
2215
|
/* Compare facebook which only limits width -> lots of tall images! */
|
|
486
2216
|
|
|
487
|
-
img.phoneIcon {
|
|
2217
|
+
img.phoneIcon {
|
|
2218
|
+
border: 0;
|
|
2219
|
+
margin-left: 1em;
|
|
2220
|
+
}
|
|
488
2221
|
|
|
489
|
-
table#sources {
|
|
2222
|
+
table#sources {
|
|
2223
|
+
width: 100%;
|
|
2224
|
+
}
|
|
490
2225
|
|
|
491
|
-
table {
|
|
2226
|
+
table {
|
|
2227
|
+
border-spacing: 0;
|
|
2228
|
+
}
|
|
492
2229
|
|
|
493
|
-
table {
|
|
2230
|
+
table {
|
|
2231
|
+
margin: 0em;
|
|
2232
|
+
}
|
|
494
2233
|
|
|
495
|
-
td {
|
|
496
|
-
|
|
497
|
-
border-
|
|
498
|
-
border-
|
|
499
|
-
border-
|
|
500
|
-
|
|
501
|
-
|
|
2234
|
+
td {
|
|
2235
|
+
font-size: 100%;
|
|
2236
|
+
border-left: none;
|
|
2237
|
+
border-top: none;
|
|
2238
|
+
border-right: none;
|
|
2239
|
+
border-bottom: none;
|
|
2240
|
+
margin: 0.2em;
|
|
2241
|
+
/* border-right: solid purple 0.1em ;
|
|
502
2242
|
border-bottom: solid purple 0.1em;
|
|
503
2243
|
*/
|
|
504
|
-
vertical-align: top;
|
|
505
|
-
/* display: compact; Causes console errors in ffox */
|
|
2244
|
+
vertical-align: top;
|
|
2245
|
+
/* display: compact; Causes console errors in ffox */
|
|
506
2246
|
}
|
|
507
2247
|
|
|
508
|
-
td.pred {
|
|
2248
|
+
td.pred {
|
|
2249
|
+
padding-left: 0.5em;
|
|
2250
|
+
}
|
|
509
2251
|
/*td.optButton { display: none }
|
|
510
2252
|
tr[parentOfSelected] > td.pred td.optButton { display: block }
|
|
511
2253
|
*/
|
|
512
2254
|
|
|
513
|
-
table.results {
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
background-color:#fff;
|
|
517
|
-
border-left: none;
|
|
518
|
-
border-top: none;
|
|
519
|
-
border-right: none;
|
|
520
|
-
border-bottom: none;
|
|
521
|
-
margin: 0.1em;
|
|
522
|
-
border-right: solid #777 0.1em ;
|
|
523
|
-
border-bottom: solid #777 0.1em;
|
|
2255
|
+
table.results {
|
|
2256
|
+
width: 100%;
|
|
2257
|
+
}
|
|
524
2258
|
|
|
525
|
-
|
|
2259
|
+
table.results td {
|
|
2260
|
+
font-size: 100%;
|
|
2261
|
+
background-color: var(--color-table-result-bg);
|
|
2262
|
+
border-left: none;
|
|
2263
|
+
border-top: none;
|
|
2264
|
+
border-right: none;
|
|
2265
|
+
border-bottom: none;
|
|
2266
|
+
margin: 0.1em;
|
|
2267
|
+
border-right: solid var(--color-table-border-dark) 0.1em;
|
|
2268
|
+
border-bottom: solid var(--color-table-border-dark) 0.1em;
|
|
526
2269
|
|
|
2270
|
+
vertical-align: top;
|
|
2271
|
+
}
|
|
527
2272
|
|
|
528
|
-
table.results th {
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
border-
|
|
532
|
-
border-
|
|
533
|
-
border-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
2273
|
+
table.results th {
|
|
2274
|
+
font-size: 100%;
|
|
2275
|
+
background-color: var(--color-table-header-bg);
|
|
2276
|
+
border-left: none;
|
|
2277
|
+
border-top: none;
|
|
2278
|
+
border-right: solid var(--color-table-border-dark) 0.1em;
|
|
2279
|
+
border-bottom: solid var(--color-table-border-dark) 0.1em;
|
|
2280
|
+
margin: 0.3em;
|
|
2281
|
+
padding-top: 0.5em;
|
|
2282
|
+
padding-right: 0.5em;
|
|
2283
|
+
border-right: solid var(--color-table-border-dark) 0.1em;
|
|
2284
|
+
border-bottom: solid var(--color-table-border-dark) 0.1em;
|
|
538
2285
|
|
|
539
|
-
vertical-align: top
|
|
2286
|
+
vertical-align: top;
|
|
2287
|
+
}
|
|
540
2288
|
|
|
541
2289
|
/* Hide sections of the display.
|
|
542
2290
|
Collpase not actually in CSS1 except for table row and col.
|
|
543
2291
|
Supposed to leave layoutunchanged. So we float it too. */
|
|
544
2292
|
|
|
545
|
-
.collapse {
|
|
546
|
-
|
|
2293
|
+
.collapse {
|
|
2294
|
+
display: none;
|
|
2295
|
+
}
|
|
2296
|
+
.expand {
|
|
2297
|
+
display: block;
|
|
2298
|
+
}
|
|
547
2299
|
|
|
548
2300
|
/* log classes */
|
|
549
|
-
.nrml {
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
.
|
|
553
|
-
|
|
554
|
-
|
|
2301
|
+
.nrml {
|
|
2302
|
+
color: var(--color-log-normal);
|
|
2303
|
+
}
|
|
2304
|
+
.info {
|
|
2305
|
+
color: var(--color-log-info);
|
|
2306
|
+
}
|
|
2307
|
+
.warn {
|
|
2308
|
+
color: var(--color-log-warn);
|
|
2309
|
+
background-color: var(--color-log-warn-bg);
|
|
2310
|
+
}
|
|
2311
|
+
.eror {
|
|
2312
|
+
color: var(--color-log-error);
|
|
2313
|
+
background-color: var(--color-log-error-bg);
|
|
2314
|
+
}
|
|
2315
|
+
.mesg {
|
|
2316
|
+
color: var(--color-log-message);
|
|
2317
|
+
}
|
|
2318
|
+
.dbug {
|
|
2319
|
+
color: var(--color-log-debug);
|
|
2320
|
+
background-color: var(--color-log-debug-bg);
|
|
2321
|
+
} /* Blue */
|
|
555
2322
|
|
|
556
2323
|
/* Try to get the icons to flush right in the cell */
|
|
557
2324
|
|
|
558
2325
|
.sortheader {
|
|
559
|
-
color:
|
|
560
|
-
text-decoration: none;
|
|
561
|
-
position: relative;
|
|
562
|
-
border:none;
|
|
2326
|
+
color: var(--color-log-normal);
|
|
2327
|
+
text-decoration: none;
|
|
2328
|
+
position: relative;
|
|
2329
|
+
border: none; /* Jim's commented out */
|
|
563
2330
|
}
|
|
564
2331
|
|
|
565
|
-
.colclose {
|
|
566
|
-
|
|
567
|
-
|
|
2332
|
+
.colclose {
|
|
2333
|
+
float: right;
|
|
2334
|
+
color: var(--color-col-close);
|
|
2335
|
+
} /* Should be 67% transp black */
|
|
2336
|
+
.sortarrow {
|
|
2337
|
+
float: left;
|
|
2338
|
+
color: var(--color-sort-arrow);
|
|
2339
|
+
border: none;
|
|
2340
|
+
}
|
|
568
2341
|
|
|
569
2342
|
/* CSS Stuff for tabbed Views.. */
|
|
570
2343
|
table.viewTable {
|
|
571
|
-
padding: 0;
|
|
572
|
-
margin: 0;
|
|
573
|
-
border-style: none;
|
|
574
|
-
border-width: 0;
|
|
575
|
-
height: 40em;
|
|
576
|
-
width: 100%;
|
|
577
|
-
border-spacing: 0;
|
|
2344
|
+
padding: 0;
|
|
2345
|
+
margin: 0;
|
|
2346
|
+
border-style: none;
|
|
2347
|
+
border-width: 0;
|
|
2348
|
+
height: 40em;
|
|
2349
|
+
width: 100%;
|
|
2350
|
+
border-spacing: 0;
|
|
578
2351
|
}
|
|
579
2352
|
|
|
580
2353
|
div.viewTabs {
|
|
581
|
-
background-color:
|
|
582
|
-
padding:0;
|
|
2354
|
+
background-color: var(--color-view-tab-bg);
|
|
2355
|
+
padding: 0;
|
|
583
2356
|
}
|
|
584
2357
|
|
|
585
2358
|
div.viewWindows {
|
|
586
|
-
width: 100%;
|
|
587
|
-
height:100%;
|
|
588
|
-
overflow: auto;
|
|
589
|
-
margin: 0em;
|
|
590
|
-
padding:0em;
|
|
591
|
-
border-right: solid
|
|
592
|
-
border-left: solid
|
|
593
|
-
border-bottom: solid
|
|
594
|
-
background-color:
|
|
2359
|
+
width: 100%;
|
|
2360
|
+
height: 100%;
|
|
2361
|
+
overflow: auto;
|
|
2362
|
+
margin: 0em;
|
|
2363
|
+
padding: 0em;
|
|
2364
|
+
border-right: solid var(--color-border-light) 0.1em; /* was 2px */
|
|
2365
|
+
border-left: solid var(--color-border-light) 0.1em;
|
|
2366
|
+
border-bottom: solid var(--color-border-light) 0.1em;
|
|
2367
|
+
background-color: var(--color-view-window-bg);
|
|
595
2368
|
}
|
|
596
2369
|
|
|
597
2370
|
div.querySelect {
|
|
598
|
-
background-color:
|
|
599
|
-
width:100%;
|
|
600
|
-
height:100%;
|
|
601
|
-
border-left: solid
|
|
602
|
-
border-bottom: solid
|
|
603
|
-
overflow:auto;
|
|
604
|
-
margin: 0em;
|
|
605
|
-
padding:0em;
|
|
2371
|
+
background-color: var(--color-query-select-bg);
|
|
2372
|
+
width: 100%;
|
|
2373
|
+
height: 100%;
|
|
2374
|
+
border-left: solid var(--color-border-light) 0.1em;
|
|
2375
|
+
border-bottom: solid var(--color-border-light) 0.1em;
|
|
2376
|
+
overflow: auto;
|
|
2377
|
+
margin: 0em;
|
|
2378
|
+
padding: 0em;
|
|
606
2379
|
}
|
|
607
2380
|
|
|
608
2381
|
td.viewTableData {
|
|
609
|
-
padding: 0em;
|
|
610
|
-
margin: 0em;
|
|
611
|
-
height:100%;
|
|
612
|
-
width:80%;
|
|
2382
|
+
padding: 0em;
|
|
2383
|
+
margin: 0em;
|
|
2384
|
+
height: 100%;
|
|
2385
|
+
width: 80%;
|
|
613
2386
|
}
|
|
614
2387
|
|
|
615
2388
|
td.queryTableData {
|
|
616
|
-
padding: 0em;
|
|
617
|
-
margin: 0em;
|
|
618
|
-
border-width: 0em;
|
|
619
|
-
height:100%;
|
|
620
|
-
width:20%;
|
|
621
|
-
border-style:none;
|
|
2389
|
+
padding: 0em;
|
|
2390
|
+
margin: 0em;
|
|
2391
|
+
border-width: 0em;
|
|
2392
|
+
height: 100%;
|
|
2393
|
+
width: 20%;
|
|
2394
|
+
border-style: none;
|
|
622
2395
|
}
|
|
623
2396
|
|
|
624
2397
|
table.viewTable tr {
|
|
625
|
-
height: 100%;
|
|
626
|
-
margin: 0em;
|
|
627
|
-
padding: 0em;
|
|
628
|
-
border-style:none;
|
|
2398
|
+
height: 100%;
|
|
2399
|
+
margin: 0em;
|
|
2400
|
+
padding: 0em;
|
|
2401
|
+
border-style: none;
|
|
629
2402
|
}
|
|
630
2403
|
|
|
631
|
-
|
|
632
2404
|
a {
|
|
633
|
-
color:
|
|
634
|
-
text-decoration: none;
|
|
635
|
-
cursor: pointer;
|
|
636
|
-
}
|
|
637
|
-
a.inactive{
|
|
638
|
-
background-color:
|
|
639
|
-
border-right:solid
|
|
640
|
-
border-top:solid
|
|
641
|
-
border-left:solid
|
|
642
|
-
padding-top: 0.3em;
|
|
643
|
-
padding-left: 0.8em;
|
|
644
|
-
padding-right: 0.8em;
|
|
645
|
-
padding-bottom: 0em;
|
|
646
|
-
margin-right: 0.1em;
|
|
647
|
-
color:
|
|
648
|
-
text-decoration:none;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
|
-
a.active{
|
|
652
|
-
background-color:
|
|
653
|
-
border-right:solid
|
|
654
|
-
border-top:solid
|
|
655
|
-
border-left:solid
|
|
656
|
-
padding-top: 0.3em;
|
|
657
|
-
padding-left: 0.8em;
|
|
658
|
-
padding-right: 0.8em;
|
|
659
|
-
padding-bottom:0em;
|
|
660
|
-
margin-right:0.1em;
|
|
661
|
-
color:
|
|
662
|
-
text-decoration:none;
|
|
2405
|
+
color: var(--color-text-link);
|
|
2406
|
+
text-decoration: none;
|
|
2407
|
+
cursor: pointer;
|
|
2408
|
+
}
|
|
2409
|
+
a.inactive {
|
|
2410
|
+
background-color: var(--color-tab-inactive-bg);
|
|
2411
|
+
border-right: solid var(--color-tab-inactive-border) 0.1em;
|
|
2412
|
+
border-top: solid var(--color-tab-inactive-border-light) 0.1em;
|
|
2413
|
+
border-left: solid var(--color-tab-inactive-border-light) 0.1em;
|
|
2414
|
+
padding-top: 0.3em;
|
|
2415
|
+
padding-left: 0.8em;
|
|
2416
|
+
padding-right: 0.8em;
|
|
2417
|
+
padding-bottom: 0em;
|
|
2418
|
+
margin-right: 0.1em;
|
|
2419
|
+
color: var(--color-tab-inactive-text);
|
|
2420
|
+
text-decoration: none;
|
|
2421
|
+
}
|
|
2422
|
+
|
|
2423
|
+
a.active {
|
|
2424
|
+
background-color: var(--color-tab-active-bg);
|
|
2425
|
+
border-right: solid var(--color-tab-active-border) 0.1em;
|
|
2426
|
+
border-top: solid var(--color-tab-active-border-light) 0.1em;
|
|
2427
|
+
border-left: solid var(--color-tab-active-border-light) 0.1em;
|
|
2428
|
+
padding-top: 0.3em;
|
|
2429
|
+
padding-left: 0.8em;
|
|
2430
|
+
padding-right: 0.8em;
|
|
2431
|
+
padding-bottom: 0em;
|
|
2432
|
+
margin-right: 0.1em;
|
|
2433
|
+
color: var(--color-tab-active-text);
|
|
2434
|
+
text-decoration: none;
|
|
663
2435
|
}
|
|
664
2436
|
|
|
665
2437
|
input.tabQueryName {
|
|
666
|
-
border: solid
|
|
667
|
-
width:100%;
|
|
668
|
-
padding:0em;
|
|
2438
|
+
border: solid var(--color-border-light) 0.1em;
|
|
2439
|
+
width: 100%;
|
|
2440
|
+
padding: 0em;
|
|
669
2441
|
}
|
|
670
2442
|
|
|
671
2443
|
input.delQueryButton {
|
|
672
|
-
border:none;
|
|
673
|
-
color
|
|
674
|
-
background-color
|
|
675
|
-
cursor:pointer;
|
|
676
|
-
padding:0em;
|
|
2444
|
+
border: none;
|
|
2445
|
+
color: var(--color-warning);
|
|
2446
|
+
background-color: var(--color-tab-active-bg);
|
|
2447
|
+
cursor: pointer;
|
|
2448
|
+
padding: 0em;
|
|
677
2449
|
}
|
|
678
2450
|
|
|
679
2451
|
td.checkboxTD {
|
|
680
|
-
padding-right:0.5em;
|
|
2452
|
+
padding-right: 0.5em;
|
|
681
2453
|
}
|
|
682
2454
|
|
|
683
2455
|
.sourceHighlight {
|
|
684
|
-
background-color:
|
|
2456
|
+
background-color: var(--color-source-highlight);
|
|
685
2457
|
}
|
|
686
2458
|
|
|
687
2459
|
#MenuBar {
|
|
688
|
-
padding: 0.5em;
|
|
689
|
-
position: fixed;
|
|
690
|
-
top: 0;
|
|
691
|
-
bottom: auto;
|
|
692
|
-
left: 0;
|
|
693
|
-
right: 0;
|
|
694
|
-
background-color:
|
|
695
|
-
border: 0.1em solid
|
|
2460
|
+
padding: 0.5em;
|
|
2461
|
+
position: fixed;
|
|
2462
|
+
top: 0;
|
|
2463
|
+
bottom: auto;
|
|
2464
|
+
left: 0;
|
|
2465
|
+
right: 0;
|
|
2466
|
+
background-color: var(--color-nav-block-bg);
|
|
2467
|
+
border: 0.1em solid var(--color-border-light);
|
|
696
2468
|
}
|
|
697
2469
|
|
|
698
2470
|
#TabulatorStatusWidget {
|
|
699
|
-
position: fixed;
|
|
700
|
-
top: 0;
|
|
701
|
-
bottom: auto;
|
|
702
|
-
left: auto;
|
|
703
|
-
right: 0;
|
|
2471
|
+
position: fixed;
|
|
2472
|
+
top: 0;
|
|
2473
|
+
bottom: auto;
|
|
2474
|
+
left: auto;
|
|
2475
|
+
right: 0;
|
|
704
2476
|
}
|
|
705
2477
|
|
|
706
2478
|
div.mapKeyDiv {
|
|
707
|
-
position:relative;
|
|
708
|
-
float:right;
|
|
709
|
-
margin: 0.3em;
|
|
710
|
-
color:
|
|
711
|
-
background
|
|
712
|
-
border:solid
|
|
713
|
-
padding:0.1em;
|
|
2479
|
+
position: relative;
|
|
2480
|
+
float: right;
|
|
2481
|
+
margin: 0.3em;
|
|
2482
|
+
color: var(--color-border-dark);
|
|
2483
|
+
background: var(--color-background);
|
|
2484
|
+
border: solid var(--color-border-dark) 0.1em;
|
|
2485
|
+
padding: 0.1em;
|
|
714
2486
|
}
|
|
715
2487
|
|
|
716
2488
|
span.closeQuerySpan {
|
|
717
|
-
float:right;
|
|
718
|
-
text-align:right;
|
|
719
|
-
height: 0.1em;
|
|
720
|
-
overflow:visible;
|
|
2489
|
+
float: right;
|
|
2490
|
+
text-align: right;
|
|
2491
|
+
height: 0.1em;
|
|
2492
|
+
overflow: visible;
|
|
721
2493
|
}
|
|
722
2494
|
|
|
723
2495
|
span.openQuerySpan {
|
|
724
|
-
float:left;
|
|
725
|
-
overflow:visible;
|
|
726
|
-
height:0em;
|
|
727
|
-
text-align:left;
|
|
728
|
-
position:relative;
|
|
729
|
-
top:0em;
|
|
730
|
-
z-index:1;
|
|
2496
|
+
float: left;
|
|
2497
|
+
overflow: visible;
|
|
2498
|
+
height: 0em;
|
|
2499
|
+
text-align: left;
|
|
2500
|
+
position: relative;
|
|
2501
|
+
top: 0em;
|
|
2502
|
+
z-index: 1;
|
|
731
2503
|
}
|
|
732
2504
|
|
|
733
|
-
input.textinput{
|
|
734
|
-
width: 100%;
|
|
735
|
-
border: none;
|
|
736
|
-
font-size:95%;
|
|
737
|
-
padding: 0em;
|
|
738
|
-
margin: 0;
|
|
2505
|
+
input.textinput {
|
|
2506
|
+
width: 100%;
|
|
2507
|
+
border: none;
|
|
2508
|
+
font-size: 95%;
|
|
2509
|
+
padding: 0em;
|
|
2510
|
+
margin: 0;
|
|
739
2511
|
}
|
|
740
2512
|
|
|
741
|
-
textarea.textinput{
|
|
742
|
-
border: none;
|
|
2513
|
+
textarea.textinput {
|
|
2514
|
+
border: none;
|
|
743
2515
|
}
|
|
744
2516
|
|
|
745
2517
|
.pendingedit {
|
|
746
|
-
color:
|
|
2518
|
+
color: var(--color-pending-edit);
|
|
747
2519
|
}
|
|
748
2520
|
|
|
749
|
-
td.undetermined{
|
|
750
|
-
color:
|
|
751
|
-
font-style: italic;
|
|
2521
|
+
td.undetermined {
|
|
2522
|
+
color: var(--color-nav-block-border);
|
|
2523
|
+
font-style: italic;
|
|
752
2524
|
}
|
|
753
2525
|
|
|
754
2526
|
/*revert back*/
|
|
755
|
-
td.undetermined table{
|
|
756
|
-
color:
|
|
757
|
-
font-style: normal;
|
|
2527
|
+
td.undetermined table {
|
|
2528
|
+
color: var(--color-text);
|
|
2529
|
+
font-style: normal;
|
|
758
2530
|
}
|
|
759
2531
|
|
|
760
2532
|
/*color style from http://developer.yahoo.com/yui/docs/module_menu.html*/
|
|
761
|
-
.outlineMenu{
|
|
762
|
-
position:absolute;
|
|
763
|
-
/*width:10em;*/
|
|
764
|
-
height:10em;
|
|
765
|
-
background:
|
|
766
|
-
overflow-x: hidden;
|
|
767
|
-
overflow-y: auto;
|
|
768
|
-
border: 1px solid;
|
|
769
|
-
/*padding:.2em;*/
|
|
2533
|
+
.outlineMenu {
|
|
2534
|
+
position: absolute;
|
|
2535
|
+
/*width:10em;*/
|
|
2536
|
+
height: 10em; /* Jim's commented out */
|
|
2537
|
+
background: var(--color-menu-bg) none repeat scroll 0%;
|
|
2538
|
+
overflow-x: hidden;
|
|
2539
|
+
overflow-y: auto;
|
|
2540
|
+
border: 1px solid;
|
|
2541
|
+
/*padding:.2em;*/
|
|
2542
|
+
}
|
|
2543
|
+
.outlineMenu table {
|
|
2544
|
+
cursor: default;
|
|
2545
|
+
width: 100%;
|
|
2546
|
+
text-align: left;
|
|
2547
|
+
padding: 5px 5px;
|
|
2548
|
+
}
|
|
2549
|
+
.outlineMenu div {
|
|
2550
|
+
/*width:6em;*/
|
|
2551
|
+
overflow: auto;
|
|
2552
|
+
white-space: nowrap;
|
|
2553
|
+
}
|
|
2554
|
+
.outlineMenu td {
|
|
2555
|
+
color: var(--color-menu-item-text);
|
|
2556
|
+
}
|
|
2557
|
+
.outlineMenu .activeItem {
|
|
2558
|
+
background: var(--color-menu-item-active);
|
|
2559
|
+
} /* @@ Jim's: #f4e8fc; */
|
|
2560
|
+
.outlineMenu input {
|
|
2561
|
+
margin: 0.2em;
|
|
770
2562
|
}
|
|
771
|
-
.outlineMenu table{cursor:default;width:100%;text-align:left;padding:5px 5px;}
|
|
772
|
-
.outlineMenu div{/*width:6em;*/ overflow:auto; white-space:nowrap;}
|
|
773
|
-
.outlineMenu td{color:#654d6c;}
|
|
774
|
-
.outlineMenu .activeItem{background: #D1C6DA;} /* @@ Jim's: #f4e8fc; */
|
|
775
|
-
.outlineMenu input{margin: 0.2em;}
|
|
776
2563
|
|
|
777
|
-
div.bottom-border{
|
|
778
|
-
border: .2em solid transparent;
|
|
779
|
-
width: 100%;
|
|
2564
|
+
div.bottom-border {
|
|
2565
|
+
border: 0.2em solid transparent;
|
|
2566
|
+
width: 100%;
|
|
780
2567
|
}
|
|
781
2568
|
|
|
782
|
-
div.bottom-border-active{
|
|
783
|
-
cursor: copy;
|
|
784
|
-
border: .2em solid;
|
|
785
|
-
border-color:
|
|
2569
|
+
div.bottom-border-active {
|
|
2570
|
+
cursor: copy;
|
|
2571
|
+
border: 0.2em solid;
|
|
2572
|
+
border-color: var(--color-bottom-border-highlight);
|
|
786
2573
|
}
|
|
787
2574
|
|
|
788
2575
|
/* The thing below was for the kenny's orange bar*/
|
|
@@ -794,199 +2581,195 @@ td{
|
|
|
794
2581
|
*/
|
|
795
2582
|
|
|
796
2583
|
.deleteIcon {
|
|
797
|
-
margin-left: 0.1em;
|
|
2584
|
+
margin-left: 0.1em;
|
|
798
2585
|
}
|
|
799
2586
|
|
|
800
2587
|
.deleteCol {
|
|
801
|
-
float: right;
|
|
802
|
-
display: inline;
|
|
2588
|
+
float: right;
|
|
2589
|
+
display: inline;
|
|
803
2590
|
}
|
|
804
2591
|
|
|
805
|
-
.suggestion_list
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
padding: 4px;
|
|
2592
|
+
.suggestion_list {
|
|
2593
|
+
background: var(--color-suggestion-bg);
|
|
2594
|
+
border: 1px solid var(--color-suggestion-border);
|
|
2595
|
+
padding: 4px;
|
|
810
2596
|
}
|
|
811
2597
|
|
|
812
|
-
.suggestion_list ul
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
list-style-type: none;
|
|
2598
|
+
.suggestion_list ul {
|
|
2599
|
+
padding: 0;
|
|
2600
|
+
margin: 0;
|
|
2601
|
+
list-style-type: none;
|
|
817
2602
|
}
|
|
818
2603
|
|
|
819
|
-
.suggestion_list a
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
color: navy;
|
|
2604
|
+
.suggestion_list a {
|
|
2605
|
+
text-decoration: none;
|
|
2606
|
+
color: var(--color-suggestion-link);
|
|
823
2607
|
}
|
|
824
2608
|
|
|
825
|
-
.suggestion_list .selected
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
color: white;
|
|
2609
|
+
.suggestion_list .selected {
|
|
2610
|
+
background: var(--color-suggestion-selected-bg);
|
|
2611
|
+
color: var(--color-suggestion-selected-text);
|
|
829
2612
|
}
|
|
830
2613
|
|
|
831
|
-
.suggestion_list .selected a
|
|
832
|
-
|
|
833
|
-
color: white;
|
|
2614
|
+
.suggestion_list .selected a {
|
|
2615
|
+
color: var(--color-suggestion-selected-text);
|
|
834
2616
|
}
|
|
835
2617
|
|
|
836
|
-
#autosuggest
|
|
837
|
-
|
|
838
|
-
display: none;
|
|
2618
|
+
#autosuggest {
|
|
2619
|
+
display: none;
|
|
839
2620
|
}
|
|
840
2621
|
|
|
841
|
-
|
|
842
|
-
|
|
843
2622
|
/*
|
|
844
2623
|
Start of styles for the photoPane, by albert08@csail.mit.edu
|
|
845
2624
|
*/
|
|
846
2625
|
div.PhotoContentPane {
|
|
847
|
-
float: left;
|
|
848
|
-
width: 900px;
|
|
849
|
-
border: 1px solid
|
|
850
|
-
padding: 10px;
|
|
2626
|
+
float: left;
|
|
2627
|
+
width: 900px;
|
|
2628
|
+
border: 1px solid var(--color-photo-border);
|
|
2629
|
+
padding: 10px;
|
|
851
2630
|
}
|
|
852
2631
|
div.PhotoListPanel {
|
|
853
|
-
float: left;
|
|
854
|
-
padding: 5px
|
|
855
|
-
border: 1px solid
|
|
856
|
-
width: 540px;
|
|
857
|
-
min-height: 300px;
|
|
2632
|
+
float: left;
|
|
2633
|
+
padding: 5px;
|
|
2634
|
+
border: 1px solid var(--color-photo-border);
|
|
2635
|
+
width: 540px;
|
|
2636
|
+
min-height: 300px;
|
|
858
2637
|
}
|
|
859
2638
|
div.PhotoInfoPanel {
|
|
860
|
-
float: left;
|
|
861
|
-
padding: 10px;
|
|
862
|
-
border: 1px solid
|
|
863
|
-
width: 300px;
|
|
864
|
-
text-align: center;
|
|
865
|
-
margin: 0px 0px 10px 10px;
|
|
2639
|
+
float: left;
|
|
2640
|
+
padding: 10px;
|
|
2641
|
+
border: 1px solid var(--color-photo-border);
|
|
2642
|
+
width: 300px;
|
|
2643
|
+
text-align: center;
|
|
2644
|
+
margin: 0px 0px 10px 10px;
|
|
866
2645
|
}
|
|
867
2646
|
div.TagMenu {
|
|
868
|
-
float: left;
|
|
869
|
-
padding: 10px;
|
|
870
|
-
border: 1px solid
|
|
871
|
-
width: 300px;
|
|
872
|
-
margin: 0px 0px 0px 10px;
|
|
873
|
-
text-align: justify;
|
|
2647
|
+
float: left;
|
|
2648
|
+
padding: 10px;
|
|
2649
|
+
border: 1px solid var(--color-photo-border);
|
|
2650
|
+
width: 300px;
|
|
2651
|
+
margin: 0px 0px 0px 10px;
|
|
2652
|
+
text-align: justify;
|
|
874
2653
|
}
|
|
875
2654
|
.tagItem {
|
|
876
|
-
float: left;
|
|
877
|
-
padding: 2px;
|
|
878
|
-
margin: 2px;
|
|
879
|
-
cursor:pointer;
|
|
2655
|
+
float: left;
|
|
2656
|
+
padding: 2px;
|
|
2657
|
+
margin: 2px;
|
|
2658
|
+
cursor: pointer;
|
|
880
2659
|
}
|
|
881
2660
|
.tagItem_h {
|
|
882
|
-
float: left;
|
|
883
|
-
padding: 2px;
|
|
884
|
-
margin: 1px;
|
|
885
|
-
border: 1px solid
|
|
886
|
-
background-color:
|
|
887
|
-
cursor:pointer;
|
|
2661
|
+
float: left;
|
|
2662
|
+
padding: 2px;
|
|
2663
|
+
margin: 1px;
|
|
2664
|
+
border: 1px solid var(--color-photo-tag-highlight-border);
|
|
2665
|
+
background-color: var(--color-photo-tag-highlight);
|
|
2666
|
+
cursor: pointer;
|
|
888
2667
|
}
|
|
889
2668
|
div.photoItem {
|
|
890
|
-
float: left;
|
|
891
|
-
width: 100%;
|
|
2669
|
+
float: left;
|
|
2670
|
+
width: 100%;
|
|
892
2671
|
}
|
|
893
2672
|
div.photoFrame {
|
|
894
|
-
border-right: 1px solid
|
|
895
|
-
width: 260px;
|
|
896
|
-
padding: 10px;
|
|
897
|
-
margin: 10px 10px 10px 10px;
|
|
898
|
-
text-align: center;
|
|
899
|
-
float: left;
|
|
2673
|
+
border-right: 1px solid var(--color-photo-border);
|
|
2674
|
+
width: 260px;
|
|
2675
|
+
padding: 10px;
|
|
2676
|
+
margin: 10px 10px 10px 10px;
|
|
2677
|
+
text-align: center;
|
|
2678
|
+
float: left;
|
|
900
2679
|
}
|
|
901
2680
|
img.photoThumbnail {
|
|
902
|
-
border: 1px solid
|
|
903
|
-
margin: auto auto auto auto;
|
|
2681
|
+
border: 1px solid var(--color-photo-thumb-border);
|
|
2682
|
+
margin: auto auto auto auto;
|
|
904
2683
|
}
|
|
905
2684
|
.photoListTags {
|
|
906
|
-
width:200px;
|
|
907
|
-
margin-top: 10px;
|
|
908
|
-
padding-top: 10px;
|
|
909
|
-
float: left;
|
|
2685
|
+
width: 200px;
|
|
2686
|
+
margin-top: 10px;
|
|
2687
|
+
padding-top: 10px;
|
|
2688
|
+
float: left;
|
|
910
2689
|
}
|
|
911
2690
|
.photoList_tag {
|
|
912
|
-
background: transparent
|
|
913
|
-
|
|
914
|
-
|
|
2691
|
+
background: transparent
|
|
2692
|
+
url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
|
|
2693
|
+
1px no-repeat;
|
|
2694
|
+
padding: 1px 0px 1px 18px;
|
|
2695
|
+
margin-left: 5px;
|
|
915
2696
|
}
|
|
916
2697
|
.TagMenu_tag {
|
|
917
|
-
background: transparent
|
|
918
|
-
|
|
919
|
-
|
|
2698
|
+
background: transparent
|
|
2699
|
+
url("https://solidos.github.io/solid-ui/src/originalIcons/tag_tiny.png") 0px
|
|
2700
|
+
1px no-repeat;
|
|
2701
|
+
padding: 1px 0px 1px 18px;
|
|
2702
|
+
margin-left: 5px;
|
|
920
2703
|
}
|
|
921
2704
|
div.photoImportContentPane {
|
|
922
|
-
float: left;
|
|
923
|
-
padding: 0px;
|
|
924
|
-
width: 930px;
|
|
925
|
-
border: 1px solid
|
|
926
|
-
padding: 10px;
|
|
2705
|
+
float: left;
|
|
2706
|
+
padding: 0px;
|
|
2707
|
+
width: 930px;
|
|
2708
|
+
border: 1px solid var(--color-photo-border);
|
|
2709
|
+
padding: 10px;
|
|
927
2710
|
}
|
|
928
2711
|
.photoImportTitle {
|
|
929
|
-
font-size:
|
|
930
|
-
font-weight: bold;
|
|
2712
|
+
font-size: 1rem;
|
|
2713
|
+
font-weight: bold;
|
|
931
2714
|
}
|
|
932
2715
|
.photoItemPanel {
|
|
933
|
-
width: 260px;
|
|
934
|
-
height: 300px;
|
|
935
|
-
float: left;
|
|
936
|
-
padding: 10px;
|
|
937
|
-
border: 1px solid
|
|
938
|
-
margin: 0px 10px 10px 0px;
|
|
2716
|
+
width: 260px;
|
|
2717
|
+
height: 300px;
|
|
2718
|
+
float: left;
|
|
2719
|
+
padding: 10px;
|
|
2720
|
+
border: 1px solid var(--color-photo-border);
|
|
2721
|
+
margin: 0px 10px 10px 0px;
|
|
939
2722
|
}
|
|
940
2723
|
.photoControlImg {
|
|
941
|
-
border: 0px;
|
|
942
|
-
cursor: pointer;
|
|
2724
|
+
border: 0px;
|
|
2725
|
+
cursor: pointer;
|
|
943
2726
|
}
|
|
944
2727
|
.photoControlImgInactive {
|
|
945
|
-
opacity: .5;
|
|
946
|
-
border: 0px;
|
|
2728
|
+
opacity: 0.5;
|
|
2729
|
+
border: 0px;
|
|
947
2730
|
}
|
|
948
2731
|
#photoPageInfo {
|
|
949
|
-
font-family:
|
|
950
|
-
font-size:
|
|
951
|
-
font-weight: bold;
|
|
2732
|
+
font-family: var(--font-family-ui);
|
|
2733
|
+
font-size: 0.875rem;
|
|
2734
|
+
font-weight: bold;
|
|
952
2735
|
}
|
|
953
2736
|
.controls {
|
|
954
|
-
clear: both;
|
|
955
|
-
text-align: right;
|
|
956
|
-
margin: 15px 15px 0px 0px;
|
|
2737
|
+
clear: both;
|
|
2738
|
+
text-align: right;
|
|
2739
|
+
margin: 15px 15px 0px 0px;
|
|
957
2740
|
}
|
|
958
2741
|
.controlButton {
|
|
959
|
-
margin: 0px 0px 0px 10px;
|
|
2742
|
+
margin: 0px 0px 0px 10px;
|
|
960
2743
|
}
|
|
961
2744
|
div.TagPane {
|
|
962
|
-
min-width: 500px;
|
|
963
|
-
border: 1px solid
|
|
964
|
-
padding: 10px;
|
|
2745
|
+
min-width: 500px;
|
|
2746
|
+
border: 1px solid var(--color-photo-border);
|
|
2747
|
+
padding: 10px;
|
|
965
2748
|
}
|
|
966
2749
|
div.TagSemanticsPanel {
|
|
967
|
-
margin: 5px 0px 20px 0px;
|
|
2750
|
+
margin: 5px 0px 20px 0px;
|
|
968
2751
|
}
|
|
969
2752
|
div.TagSemanticsTable {
|
|
970
|
-
width: 100%;
|
|
971
|
-
font-family:
|
|
972
|
-
font-size:
|
|
2753
|
+
width: 100%;
|
|
2754
|
+
font-family: var(--font-family-ui);
|
|
2755
|
+
font-size: 0.75rem;
|
|
973
2756
|
}
|
|
974
2757
|
div.AddTagSemantics {
|
|
975
|
-
margin: 50px 0px 10px 0px;
|
|
2758
|
+
margin: 50px 0px 10px 0px;
|
|
976
2759
|
}
|
|
977
2760
|
.controlSelect {
|
|
978
|
-
margin: 5px;
|
|
979
|
-
font-family:
|
|
980
|
-
font-size:
|
|
2761
|
+
margin: 5px;
|
|
2762
|
+
font-family: var(--font-family-ui);
|
|
2763
|
+
font-size: 0.75rem;
|
|
981
2764
|
}
|
|
982
2765
|
.tagURIInput {
|
|
983
|
-
margin: 5px;
|
|
984
|
-
font-family:
|
|
985
|
-
font-size:
|
|
986
|
-
width: 300px;
|
|
2766
|
+
margin: 5px;
|
|
2767
|
+
font-family: var(--font-family-ui);
|
|
2768
|
+
font-size: 0.75rem;
|
|
2769
|
+
width: 300px;
|
|
987
2770
|
}
|
|
988
|
-
div.TagPane hr{
|
|
989
|
-
border: 1px solid
|
|
2771
|
+
div.TagPane hr {
|
|
2772
|
+
border: 1px solid var(--color-photo-border);
|
|
990
2773
|
}
|
|
991
2774
|
/*
|
|
992
2775
|
End of styles for the photoPane
|
|
@@ -997,91 +2780,126 @@ Styles for tableViewPane
|
|
|
997
2780
|
*/
|
|
998
2781
|
|
|
999
2782
|
.tableViewPane table th {
|
|
1000
|
-
background-color:
|
|
1001
|
-
color:
|
|
2783
|
+
background-color: var(--color-tab-inactive-bg);
|
|
2784
|
+
color: var(--color-log-normal);
|
|
1002
2785
|
}
|
|
1003
2786
|
|
|
1004
2787
|
.tableViewPane table th a {
|
|
1005
|
-
color:
|
|
2788
|
+
color: var(--color-text-secondary);
|
|
1006
2789
|
}
|
|
1007
2790
|
|
|
1008
2791
|
.tableViewPane table .selectors td {
|
|
1009
|
-
background-color:
|
|
2792
|
+
background-color: var(--color-tab-active-bg);
|
|
1010
2793
|
}
|
|
1011
2794
|
|
|
1012
2795
|
.tableViewPane table td {
|
|
1013
|
-
border-bottom: 1px solid
|
|
1014
|
-
border-right: 1px solid
|
|
2796
|
+
border-bottom: 1px solid var(--color-data-pane-border-top);
|
|
2797
|
+
border-right: 1px solid var(--color-data-pane-border-top);
|
|
1015
2798
|
}
|
|
1016
2799
|
|
|
1017
2800
|
.tableViewPane .toolbar td {
|
|
1018
|
-
border: none;
|
|
2801
|
+
border: none;
|
|
1019
2802
|
}
|
|
1020
2803
|
|
|
1021
2804
|
.tableViewPane .sparqlButton {
|
|
1022
|
-
width: 16px;
|
|
1023
|
-
height: 16px;
|
|
1024
|
-
border: 1px solid
|
|
2805
|
+
width: 16px;
|
|
2806
|
+
height: 16px;
|
|
2807
|
+
border: 1px solid var(--color-data-pane-border-top);
|
|
1025
2808
|
}
|
|
1026
2809
|
|
|
1027
2810
|
.tableViewPane .sparqlDialog {
|
|
1028
|
-
position: fixed;
|
|
1029
|
-
top: 40px;
|
|
1030
|
-
left: 100px;
|
|
1031
|
-
width: 600px;
|
|
1032
|
-
background:
|
|
1033
|
-
border: 1px solid
|
|
1034
|
-
padding: 5px;
|
|
2811
|
+
position: fixed;
|
|
2812
|
+
top: 40px;
|
|
2813
|
+
left: 100px;
|
|
2814
|
+
width: 600px;
|
|
2815
|
+
background: var(--color-background);
|
|
2816
|
+
border: 1px solid var(--color-data-pane-border-top);
|
|
2817
|
+
padding: 5px;
|
|
1035
2818
|
}
|
|
1036
2819
|
|
|
1037
2820
|
.tableViewPane .sparqlDialog textarea {
|
|
1038
|
-
width: 590px;
|
|
1039
|
-
height: 250px;
|
|
2821
|
+
width: 590px;
|
|
2822
|
+
height: 250px;
|
|
1040
2823
|
}
|
|
1041
2824
|
|
|
1042
2825
|
/* These should be the same as with hthe dataContentPane */
|
|
1043
|
-
.tableViewPane a
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
2826
|
+
.tableViewPane a {
|
|
2827
|
+
color: var(--color-text-link);
|
|
2828
|
+
text-decoration: none;
|
|
2829
|
+
font-weight: bold;
|
|
2830
|
+
}
|
|
2831
|
+
.tableViewPane a:link {
|
|
2832
|
+
color: var(--color-text-link);
|
|
2833
|
+
text-decoration: none;
|
|
2834
|
+
font-weight: bold;
|
|
2835
|
+
}
|
|
2836
|
+
.tableViewPane a:visited {
|
|
2837
|
+
color: var(--color-text-link-visited);
|
|
2838
|
+
text-decoration: none;
|
|
2839
|
+
font-weight: bold;
|
|
2840
|
+
}
|
|
2841
|
+
.tableViewPane a:hover {
|
|
2842
|
+
color: var(--color-text-link-hover);
|
|
2843
|
+
text-decoration: underline;
|
|
2844
|
+
font-weight: bold;
|
|
2845
|
+
}
|
|
2846
|
+
.tableViewPane a:active {
|
|
2847
|
+
color: var(--color-text-link-active);
|
|
2848
|
+
text-decoration: none;
|
|
2849
|
+
}
|
|
1051
2850
|
|
|
2851
|
+
.tableViewPane tr {
|
|
2852
|
+
border-color: var(--color-border-darker);
|
|
2853
|
+
padding-left: 0.3em;
|
|
2854
|
+
padding-right: 0.3em;
|
|
2855
|
+
}
|
|
1052
2856
|
|
|
1053
2857
|
/*The 'display explanation' feature*/
|
|
1054
2858
|
.inquiry {
|
|
1055
|
-
padding-left: 0.2em;
|
|
1056
|
-
color:
|
|
1057
|
-
font-family:
|
|
1058
|
-
font-weight: bold;
|
|
2859
|
+
padding-left: 0.2em;
|
|
2860
|
+
color: var(--color-warning);
|
|
2861
|
+
font-family: var(--font-family-ui);
|
|
2862
|
+
font-weight: bold;
|
|
1059
2863
|
}
|
|
1060
2864
|
|
|
1061
2865
|
/*
|
|
1062
2866
|
End of styles for tableViewPane
|
|
1063
2867
|
*/
|
|
1064
2868
|
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
2869
|
/* Styles for FORM PANE
|
|
1068
2870
|
**
|
|
1069
2871
|
** Colors from data cotent pane
|
|
1070
2872
|
*/
|
|
1071
2873
|
|
|
1072
|
-
.formPane a
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
.formPane a:
|
|
2874
|
+
.formPane a {
|
|
2875
|
+
color: var(--color-text-link);
|
|
2876
|
+
text-decoration: none;
|
|
2877
|
+
}
|
|
2878
|
+
.formPane a:link {
|
|
2879
|
+
color: var(--color-text-link);
|
|
2880
|
+
text-decoration: none;
|
|
2881
|
+
}
|
|
2882
|
+
.formPane a:visited {
|
|
2883
|
+
color: var(--color-text-link-visited);
|
|
2884
|
+
text-decoration: none;
|
|
2885
|
+
}
|
|
2886
|
+
.formPane a:hover {
|
|
2887
|
+
color: var(--color-text-link-hover);
|
|
2888
|
+
font-weight: bold;
|
|
2889
|
+
} /* was text-decoration: underline; */
|
|
2890
|
+
.formPane a:active {
|
|
2891
|
+
color: var(--color-text-link-active);
|
|
2892
|
+
text-decoration: none;
|
|
2893
|
+
}
|
|
1077
2894
|
|
|
1078
2895
|
/* ends */
|
|
1079
2896
|
|
|
1080
2897
|
@mixin box-shadow($x-axis: 0, $y-axis: 1px, $blur: 4px, $color: $default) {
|
|
1081
|
-
box-shadow: $x-axis $y-axis $blur $color;
|
|
1082
|
-
-webkit-box-shadow: $x-axis $y-axis $blur $color;
|
|
1083
|
-
-moz-box-shadow: $x-axis $y-axis $blur $color;
|
|
1084
|
-
-o-box-shadow: $x-axis $y-axis $blur $color;
|
|
2898
|
+
box-shadow: $x-axis $y-axis $blur $color;
|
|
2899
|
+
-webkit-box-shadow: $x-axis $y-axis $blur $color;
|
|
2900
|
+
-moz-box-shadow: $x-axis $y-axis $blur $color;
|
|
2901
|
+
-o-box-shadow: $x-axis $y-axis $blur $color;
|
|
1085
2902
|
}
|
|
1086
2903
|
|
|
2904
|
+
|
|
1087
2905
|
/*# sourceMappingURL=mash.css.map*/
|