This repository has no description
1/* frontend-cred-blue/src/components/Verifier/Verifier.css */
2
3/* General container */
4.canceler-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.canceler-container h1,
13.canceler-container h2 {
14 color: var(--button-bg); /* Match heading color */
15 text-align: left;
16 margin-bottom: 15px;
17}
18
19.canceler-container h1 {
20 font-size: 2em; /* Adjust */
21}
22.canceler-intro-container {
23 margin-bottom: 20px;
24}
25
26/* Apply consistent styles ONLY to h2 elements within canceler sections */
27.canceler-section h2 {
28 margin-top: 0;
29}
30
31.canceler-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.canceler-list {
41 margin-top: 10px;
42}
43
44.canceler-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.canceler-sign-out-button,
52.canceler-submit-button,
53.canceler-action-button,
54.canceler-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.canceler-sign-out-button:hover,
68.canceler-submit-button:hover,
69.canceler-action-button:hover,
70.canceler-revoke-button:hover {
71 background: var(--button-hover-bg, #0056b3); /* Use main hover color */
72}
73
74.canceler-sign-out-button:disabled,
75.canceler-submit-button:disabled,
76.canceler-action-button:disabled,
77.canceler-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.canceler-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.canceler-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.canceler-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.canceler-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.canceler-input-field:hover,
129.canceler-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.canceler-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.canceler-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.canceler-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.canceler-status-box .canceler-intent-link { /* Renamed class */
156 color: var(--success-text, #155724);
157 font-weight: bold;
158 text-decoration: underline;
159}
160
161.canceler-status-box p {
162 margin:
1630px;
164}
165
166/* Dark Mode Status Box Styles */
167.dark-mode .canceler-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 .canceler-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 .canceler-status-box .canceler-intent-link {
178 color: var(--success-text-dark, #a3e9a4);
179}
180
181.canceler-list-header h2 {
182 margin: 0;
183 padding: 0;
184 border-bottom: none; /* Explicitly remove border here */
185}
186
187.canceler-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.canceler-canceler-list {
197 margin: 0;
198 padding-left: 15px;
199 padding-top: 10px;
200}
201
202.canceler-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.canceler-list-item-content {
216 flex-grow: 1;
217}
218.canceler-list-item-handle {
219 font-size: 0.9em;
220 color: var(--text-muted, var(--text));
221 margin: 2px 0;
222}
223.canceler-list-item-date {
224 font-size: 0.8em;
225 color: var(--text-muted, var(--text));
226 margin-top: 5px;
227}
228
229.canceler-list-item-actions {
230 flex-shrink: 0; /* Prevent button shrinking */
231 margin-left: auto; /* Added to push button right */
232}
233
234.canceler-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.canceler-profile-link {
240 display: flex;
241 flex-direction: column;
242 text-decoration: none;
243 color: var(--text);
244 margin-bottom: 5px;
245}
246
247.canceler-profile-link:hover {
248 text-decoration: underline;
249}
250
251.canceler-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 .canceler-display-name {
259 color: #3b9af8; /* Light blue for dark mode */
260}
261
262.canceler-network-results p {
263 margin: 0px;
264}
265
266/* Validity status indicators */
267.canceler-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.canceler-list {
276 margin-top: 15px;
277}
278
279.canceler-validity-status.valid {
280 background-color: var(--success-bg, rgba(0, 128, 0, 0.1));
281 color: var(--success-text, green);
282}
283
284.canceler-validity-status.invalid {
285 background-color: var(--error-bg, rgba(255, 0, 0, 0.1));
286 color: var(--error-text, red);
287}
288
289.canceler-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 .canceler-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 .canceler-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 .canceler-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.canceler-validity-warning {
312 display: none;
313}
314
315/* Media query for mobile optimization */
316@media (max-width: 480px) {
317 .canceler-list-item {
318 flex-direction: column;
319 }
320
321 .canceler-list-item-content {
322 width: 100%;
323 margin-bottom: 10px;
324 }
325
326 .canceler-list-item-actions {
327 align-self: flex-end;
328 }
329}
330
331/* Network Verifications */
332.canceler-check-network-button {
333 font-size: .9em;
334 margin: 0px;
335 margin-top: 16.4px;
336}
337
338.canceler-action-button.canceler-refresh-button {
339 margin: 0px;
340}
341
342.canceler-network-status {
343 font-style: italic;
344 color: var(--text-muted, var(--text));
345 margin: 10px 0;
346}
347.canceler-network-results {
348 margin-top: 0px;
349}
350
351.canceler-additional-context p {
352 margin-top: 0px;
353}
354
355.canceler-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.canceler-share-stats-link {
363 display: inline-block;
364 margin-top: 15px;
365 font-size: 0.9em;
366 font-weight: bold;
367}
368
369.canceler-official-canceler-note {
370 font-size: 0.9em;
371 margin: 5px 0;
372 padding-left: 5px; /* Indent slightly */
373}
374
375.canceler-network-results {
376 margin-top: 20px;
377}
378
379.canceler-verified-status { color: var(--success-text, green); }
380.canceler-not-verified-status { color: var(--text-muted, grey); }
381.canceler-error-status { color: var(--error-text, red); }
382.canceler-checking-status, .canceler-idle-status { color: var(--text-muted, grey); }
383
384/* Styles for Typeahead/Autocomplete Suggestions */
385.canceler-input-wrapper {
386 position: relative; /* Required for absolute positioning of suggestions */
387}
388
389.canceler-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.canceler-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.canceler-suggestion-item.loading,
415.canceler-suggestion-item.none {
416 font-style: italic;
417 color: var(--text-muted);
418 cursor: default;
419}
420
421.canceler-suggestion-item:hover.loading,
422.canceler-suggestion-item:hover.none {
423 background-color: transparent; /* Don't highlight loading/none items */
424 color: var(--text-muted);
425}
426
427.canceler-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.canceler-suggestion-text {
437 display: flex;
438 flex-direction: column;
439 overflow: hidden; /* Prevent long text overflow */
440 white-space: nowrap;
441}
442
443.canceler-suggestion-name {
444 font-weight: bold;
445 text-overflow: ellipsis;
446 overflow: hidden;
447}
448
449.canceler-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.canceler-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.canceler-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.canceler-mode-toggle input[type="radio"] {
475 cursor: pointer;
476 /* Optional: style the radio button itself */
477}
478
479.canceler-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.canceler-list-select:hover,
495.canceler-list-select:focus {
496 border-color: var(--button-bg);
497 background-color: var(--background); /* Match main app focus */
498 outline: none;
499}
500
501.canceler-list-select:disabled {
502 background-color: var(--button-disabled-bg, #cccccc);
503 cursor: not-allowed;
504 opacity: 0.7;
505}
506
507/* Progress Indicator */
508.canceler-status-box-progress p {
509 margin: 0; /* Reset margin for progress text */
510 font-style: italic;
511}
512
513.canceler-bulk-progress {
514 font-style: italic;
515 color: var(--text-muted, var(--text));
516 margin-top: 8px;
517 font-size: 0.9em;
518}
519
520/* Verification Options */
521.canceler-options {
522 margin-bottom: 15px;
523 margin-top: 10px; /* Added margin top */
524}
525
526.canceler-options label {
527 cursor: pointer;
528 display: flex;
529 align-items: center;
530 gap: 5px;
531 color: var(--text);
532 font-size: 0.9em;
533}
534
535.canceler-options input[type="checkbox"] {
536 cursor: pointer;
537 margin: 0;
538}
539
540
541/* Time-based Revocation Styles */
542.canceler-time-revoke-wrapper {
543 margin-top: 15px;
544}
545
546.canceler-time-revoke-wrapper p {
547 margin-bottom: 10px;
548 color: var(--text);
549}
550
551.canceler-time-range-selector {
552 display: flex;
553 gap: 15px;
554 margin-bottom: 15px;
555 flex-wrap: wrap; /* Allow wrapping */
556}
557
558.canceler-time-range-selector label {
559 cursor: pointer;
560 display: flex;
561 align-items: center;
562 gap: 5px;
563 color: var(--text);
564}
565
566.canceler-time-range-selector input[type="radio"] {
567 cursor: pointer;
568}
569
570.canceler-time-revoke-wrapper .canceler-revoke-button {
571 /* Optional: Specific styling if needed, otherwise inherits from .canceler-revoke-button */
572}