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