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