This repository has no description
1/* frontend-cred-blue/src/components/Verifier/Verifier.css */
2
3/* General container */
4.verifier-container {
5 font-family: "articulat-cf", sans-serif;
6 max-width: 450px; /* Adjust as needed */
7 margin: 20px auto;
8 padding: 20px;
9 color: var(--text);
10}
11
12.verifier-container h1,
13.verifier-container h2 {
14 color: var(--button-bg); /* Match heading color */
15 text-align: left;
16 margin-bottom: 15px;
17}
18
19.verifier-container h1 {
20 font-size: 2em; /* Adjust */
21}
22.verifier-intro-container {
23 margin-bottom: 20px;
24}
25
26/* Apply consistent styles ONLY to h2 elements within verifier sections */
27.verifier-section h2 {
28 margin-top: 0;
29}
30
31.verifier-page-header {
32 display: flex;
33 justify-content: space-between;
34 align-items: center;
35 margin-bottom: 15px;
36 flex-wrap: wrap; /* Allow wrapping on small screens */
37 gap: 10px;
38}
39
40.verifier-list {
41 margin-top: 10px;
42}
43
44.verifier-user-info {
45 font-size: 0.9em;
46 color: var(--text-muted, var(--text));
47 margin: 0; /* Remove default paragraph margin */
48}
49
50/* Buttons */
51.verifier-sign-out-button,
52.verifier-submit-button,
53.verifier-action-button,
54.verifier-revoke-button {
55 background: var(--button-bg);
56 color: var(--button-text);
57 border: none;
58 border-radius: 6px;
59 padding: 8px 15px; /* Slightly smaller padding */
60 font-weight: 700;
61 font-size: 0.9em;
62 margin: 0px;
63 cursor: pointer;
64 transition: background-color 0.3s ease;
65}
66
67.verifier-sign-out-button:hover,
68.verifier-submit-button:hover,
69.verifier-action-button:hover,
70.verifier-revoke-button:hover {
71 background: var(--button-hover-bg, #0056b3); /* Use main hover color */
72}
73
74.verifier-sign-out-button:disabled,
75.verifier-submit-button:disabled,
76.verifier-action-button:disabled,
77.verifier-revoke-button:disabled {
78 background-color: var(--button-disabled-bg, #cccccc); /* Add disabled style */
79 cursor: not-allowed;
80 opacity: 0.7;
81}
82
83/* Form Styles */
84.verifier-section {
85 background: var(--navbar-bg);
86 border: 5px solid var(--card-border); /* Match alt-card border */
87 border-radius: 12px; /* Match alt-card radius */
88 box-shadow: none; /* Match alt-card shadow */
89 padding: 40px 30px; /* Keep increased padding or adjust if alt-card is different */
90 margin: 30px auto; /* Match alt-card margin */
91 max-width: 95%; /* Match alt-card max-width */
92 /* margin-bottom: 20px; */ /* Remove specific margin-bottom */
93}
94
95.verifier-input-container {
96 position: relative; /* Needed for autocomplete positioning */
97 max-width: 400px;
98 border: none; /* Remove any potential border */
99 outline: none; /* Remove outline on focus */
100 padding: 0; /* Remove padding if any was added */
101 margin: 0; /* Remove margin if any was added */
102}
103
104.verifier-form-container {
105 display: flex;
106 gap: 10px;
107 flex-wrap: wrap; /* Allow wrapping */
108 padding: 0px;
109 border: 0px;
110 /* position: relative; */ /* Removed - no longer needed */
111}
112
113.verifier-input-field {
114 flex-grow: 1; /* Take available space */
115 border: 2px solid var(--card-border);
116 border-radius: 6px;
117 padding: 9px;
118 font-size: 1em;
119 background-color: var(--navbar-bg);
120 color: var(--text);
121 transition: all 0.3s ease;
122 font-family: inherit; /* Use main font */
123 min-width: 200px; /* Ensure minimum width */
124 margin: 0px;
125 text-align: left;
126}
127
128.verifier-input-field:hover,
129.verifier-input-field:focus {
130 border-color: var(--button-bg);
131 background-color: var(--background); /* Match main app focus */
132 outline: none;
133}
134
135/* Status Box */
136.verifier-status-box {
137 padding: 15px;
138 border-radius: 6px;
139 margin-top: 15px;
140 margin-bottom: 15px;
141 text-align: center;
142 border: 1px solid transparent; /* Base border */
143 transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
144}
145.verifier-status-box-success {
146 background-color: var(--success-bg, #d4edda);
147 color: var(--success-text, #155724);
148 border-color: var(--success-border, #c3e6cb);
149}
150.verifier-status-box-error {
151 background-color: var(--error-bg, #f8d7da);
152 color: var(--error-text, #721c24);
153 border-color: var(--error-border, #f5c6cb);
154}
155.verifier-status-box .verifier-intent-link { /* Renamed class */
156 color: var(--success-text, #155724);
157 font-weight: bold;
158 text-decoration: underline;
159}
160
161.verifier-status-box p {
162 margin:
1630px;
164}
165
166/* Dark Mode Status Box Styles */
167.dark-mode .verifier-status-box-success {
168 background-color: var(--success-bg-dark, #1a3a24); /* Example dark variable */
169 color: var(--success-text-dark, #a3e9a4);
170 border-color: var(--success-border-dark, #2a5a34);
171}
172.dark-mode .verifier-status-box-error {
173 background-color: var(--error-bg-dark, #4d1f24); /* Example dark variable */
174 color: var(--error-text-dark, #f5c6cb);
175 border-color: var(--error-border-dark, #721c24);
176}
177.dark-mode .verifier-status-box .verifier-intent-link {
178 color: var(--success-text-dark, #a3e9a4);
179}
180
181.verifier-list-header h2 {
182 margin: 0;
183 padding: 0;
184 border-bottom: none; /* Explicitly remove border here */
185}
186
187.verifier-list {
188 list-style: none;
189 padding: 0;
190 margin: 0; /* Reset default ul margins */
191 margin-top: 15px;
192 width: 100%; /* Added */
193 box-sizing: border-box; /* Added */
194}
195
196.verifier-verifier-list {
197 margin: 0;
198 padding-left: 15px;
199 padding-top: 10px;
200}
201
202.verifier-list-item {
203 display: flex;
204 align-items: center;
205 background-color: var(--navbar-bg); /* Match form background */
206 padding: 15px;
207 border: 1px solid var(--card-border);
208 border-radius: 8px;
209 margin-bottom: 10px;
210 flex-wrap: wrap; /* Allow actions to wrap */
211 gap: 10px;
212 width: 100%; /* Added */
213 box-sizing: border-box; /* Added */
214}
215.verifier-list-item-content {
216 flex-grow: 1;
217}
218.verifier-list-item-handle {
219 font-size: 0.9em;
220 color: var(--text-muted, var(--text));
221 margin: 2px 0;
222}
223.verifier-list-item-date {
224 font-size: 0.8em;
225 color: var(--text-muted, var(--text));
226 margin-top: 5px;
227}
228
229.verifier-list-item-actions {
230 flex-shrink: 0; /* Prevent button shrinking */
231 margin-left: auto; /* Added to push button right */
232}
233
234.verifier-list-item-invalid {
235 border-left: 5px solid var(--warning-border, orange); /* Highlight invalid items */
236}
237
238/* New styles for verification list profile links */
239.verifier-profile-link {
240 display: flex;
241 flex-direction: column;
242 text-decoration: none;
243 color: var(--text);
244 margin-bottom: 5px;
245}
246
247.verifier-profile-link:hover {
248 text-decoration: underline;
249}
250
251.verifier-display-name {
252 font-weight: bold;
253 font-size: 1.05em;
254 margin-right: 5px;
255}
256
257/* Add dark mode color for display name */
258.dark-mode .verifier-display-name {
259 color: #3b9af8; /* Light blue for dark mode */
260}
261
262.verifier-network-results p {
263 margin: 0px;
264}
265
266/* Validity status indicators */
267.verifier-validity-status {
268 display: inline-block;
269 font-size: 0.9em;
270 padding: 3px 6px;
271 border-radius: 4px;
272 margin-top: 5px;
273}
274
275.verifier-list {
276 margin-top: 15px;
277}
278
279.verifier-validity-status.valid {
280 background-color: var(--success-bg, rgba(0, 128, 0, 0.1));
281 color: var(--success-text, green);
282}
283
284.verifier-validity-status.invalid {
285 background-color: var(--error-bg, rgba(255, 0, 0, 0.1));
286 color: var(--error-text, red);
287}
288
289.verifier-validity-status.checking {
290 background-color: var(--warning-bg, rgba(255, 165, 0, 0.1));
291 color: var(--warning-text, orange);
292}
293
294/* Dark mode compatibility */
295.dark-mode .verifier-validity-status.valid {
296 background-color: var(--success-bg-dark, rgba(0, 128, 0, 0.3));
297 color: var(--success-text-dark, #a3e9a4);
298}
299
300.dark-mode .verifier-validity-status.invalid {
301 background-color: var(--error-bg-dark, rgba(255, 0, 0, 0.2));
302 color: var(--error-text-dark, #f5c6cb);
303}
304
305.dark-mode .verifier-validity-status.checking {
306 background-color: var(--warning-bg-dark, rgba(255, 165, 0, 0.2));
307 color: var(--warning-text-dark, #ffe4b5);
308}
309
310/* Remove the now-unused validity warning box styles */
311.verifier-validity-warning {
312 display: none;
313}
314
315/* Media query for mobile optimization */
316@media (max-width: 480px) {
317 .verifier-list-item {
318 flex-direction: column;
319 }
320
321 .verifier-list-item-content {
322 width: 100%;
323 margin-bottom: 10px;
324 }
325
326 .verifier-list-item-actions {
327 align-self: flex-end;
328 }
329}
330
331/* Network Verifications */
332.verifier-check-network-button {
333 font-size: .9em;
334 margin: 0px;
335 margin-top: 16.4px;
336}
337
338.verifier-action-button.verifier-refresh-button {
339 margin: 0px;
340}
341
342.verifier-network-status {
343 font-style: italic;
344 color: var(--text-muted, var(--text));
345 margin: 10px 0;
346}
347.verifier-network-results {
348 margin-top: 0px;
349}
350
351.verifier-additional-context p {
352 margin-top: 0px;
353}
354
355.verifier-additional-context {
356 font-size: 0.9em;
357 color: var(--text-muted, var(--text));
358 margin-top: 15px;
359 border-top: 1px dashed var(--card-border);
360 padding-top: 17px;
361}
362.verifier-share-stats-link {
363 display: inline-block;
364 margin-top: 15px;
365 font-size: 0.9em;
366 font-weight: bold;
367}
368
369.verifier-official-verifier-note {
370 font-size: 0.9em;
371 margin: 5px 0;
372 padding-left: 5px; /* Indent slightly */
373}
374
375.verifier-network-results {
376 margin-top: 20px;
377}
378
379.verifier-verified-status { color: var(--success-text, green); }
380.verifier-not-verified-status { color: var(--text-muted, grey); }
381.verifier-error-status { color: var(--error-text, red); }
382.verifier-checking-status, .verifier-idle-status { color: var(--text-muted, grey); }
383
384/* Styles for Typeahead/Autocomplete Suggestions */
385.verifier-input-wrapper {
386 position: relative; /* Required for absolute positioning of suggestions */
387}
388
389.verifier-suggestions-list {
390 list-style: none;
391 padding: 0;
392 margin: 10px 0px 0px 0px;
393 position: absolute;
394 top: 100%; /* Position below the input */
395 left: 0;
396 right: 0;
397 background-color: var(--navbar-bg); /* Match nearby elements */
398 border: 2px solid var(--card-border);
399 border-radius: 6px; /* Round bottom corners */
400 max-height: 275px; /* Limit height and allow scroll */
401 overflow: clip;
402 z-index: 1000; /* Ensure it appears above other content */
403 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
404}
405
406.verifier-suggestion-item {
407 display: flex;
408 align-items: center;
409 padding: 10px 15px;
410 cursor: pointer;
411 transition: background-color 0.2s ease;
412}
413
414.verifier-suggestion-item.loading,
415.verifier-suggestion-item.none {
416 font-style: italic;
417 color: var(--text-muted);
418 cursor: default;
419}
420
421.verifier-suggestion-item:hover.loading,
422.verifier-suggestion-item:hover.none {
423 background-color: transparent; /* Don't highlight loading/none items */
424 color: var(--text-muted);
425}
426
427.verifier-suggestion-avatar {
428 width: 30px;
429 height: 30px;
430 border-radius: 50%;
431 margin-right: 10px;
432 object-fit: cover;
433 flex-shrink: 0;
434}
435
436.verifier-suggestion-text {
437 display: flex;
438 flex-direction: column;
439 overflow: hidden; /* Prevent long text overflow */
440 white-space: nowrap;
441}
442
443.verifier-suggestion-name {
444 font-weight: bold;
445 text-overflow: ellipsis;
446 overflow: hidden;
447}
448
449.verifier-suggestion-handle {
450 font-size: 0.9em;
451 color: var(--text-muted);
452 text-overflow: ellipsis;
453 overflow: hidden;
454}
455
456/* Styles for List Verification */
457.verifier-mode-toggle {
458 display: flex;
459 gap: 20px; /* Space between radio buttons */
460 margin-bottom: 15px; /* Space below the toggle */
461 margin-top: 15px;
462 padding-bottom: 15px; /* More space */
463 border-bottom: 1px solid var(--card-border); /* Separator line */
464}
465
466.verifier-mode-toggle label {
467 cursor: pointer;
468 display: flex;
469 align-items: center;
470 gap: 5px; /* Space between radio and text */
471 color: var(--text);
472}
473
474.verifier-mode-toggle input[type="radio"] {
475 cursor: pointer;
476 /* Optional: style the radio button itself */
477}
478
479.verifier-list-select {
480 flex-grow: 1; /* Take available space */
481 border: 2px solid var(--card-border);
482 border-radius: 6px;
483 padding: 9px;
484 font-size: 1em;
485 background-color: var(--navbar-bg);
486 color: var(--text);
487 transition: all 0.3s ease;
488 font-family: inherit; /* Use main font */
489 min-width: 200px; /* Ensure minimum width */
490 margin: 0px;
491 max-width: 100%;
492}
493
494.verifier-list-select:hover,
495.verifier-list-select:focus {
496 border-color: var(--button-bg);
497 background-color: var(--background); /* Match main app focus */
498 outline: none;
499}
500
501.verifier-list-select:disabled {
502 background-color: var(--button-disabled-bg, #cccccc);
503 cursor: not-allowed;
504 opacity: 0.7;
505}
506
507.verifier-status-box-progress p {
508 margin-top: 5px; /* Space between main status and progress */
509 margin-bottom: 0;
510}
511
512.verifier-bulk-progress {
513 font-style: italic;
514 font-size: 0.9em;
515 color: var(--text-muted);
516}
517
518/* Styles for Verification Options (like Skip Duplicates checkbox) */
519.verifier-options {
520 margin-top: 10px; /* Space above the options */
521 margin-bottom: 15px; /* Space below the options */
522}
523
524.verifier-options label {
525 cursor: pointer;
526 display: flex;
527 align-items: center;
528 gap: 8px; /* Space between checkbox and text */
529 color: var(--text);
530 font-size: 0.95em;
531}
532
533.verifier-options input[type="checkbox"] {
534 cursor: pointer;
535 margin: 0px;
536}
537
538/* Styles for Time-Based Revocation */
539.verifier-time-revoke-wrapper {
540 margin-top: 15px; /* Add some space above the time controls */
541}
542
543.verifier-time-revoke-wrapper p {
544 margin-bottom: 10px; /* Space between description and radios */
545 color: var(--text);
546}
547
548.verifier-time-range-selector {
549 display: flex;
550 flex-direction: column; /* Stack radio buttons vertically */
551 gap: 10px; /* Space between radio buttons */
552 margin-bottom: 15px; /* Space below the radio group */
553}
554
555.verifier-time-range-selector label {
556 cursor: pointer;
557 display: flex;
558 align-items: center;
559 gap: 8px; /* Space between radio and text */
560 color: var(--text);
561}
562
563.verifier-time-range-selector input[type="radio"] {
564 cursor: pointer;
565 margin: 0;
566}
567
568.verifier-time-revoke-wrapper .verifier-revoke-button {
569 margin-top: 5px; /* Adjust if needed */
570}