This repository has no description
1/* AltTextRatingTool.css */
2
3/* === Specific Styles for Alt Text Analyzer === */
4
5.alt-card {
6 background-color: var(--post-background-color);
7 max-width: 95%;
8 text-align: center;
9 border: 5px solid var(--card-border);
10 border-radius: 12px;
11 box-shadow: none;
12 padding: 20px 30px;
13}
14
15body.dark-mode .alt-card {
16 border-color: #444;
17}
18
19#alt-text-rating-form h1 {
20 font-size: 1.6em;
21 margin-top: 0px;
22 text-align: center;
23 margin-bottom: 10px;
24 }
25
26 #alt-text-rating-form p {
27 margin-top: 0px;
28 font-size: 0.9em;
29 }
30
31#textResults p {
32 margin-top: 5px;
33 }
34
35.results {
36 margin-top: 30px;
37 font-size: 0.95em;
38 word-wrap: break-word; /* Prevent long text from breaking the layout */
39}
40
41.checkbox-container {
42 align-items: center;
43 display: flex;
44 margin-bottom: 15px;
45 margin-right: 0px;
46 }
47
48.results p {
49 margin-bottom: 4px;
50 margin-top: 0px;
51 word-wrap: break-word; /* Prevent long text from breaking the layout */
52}
53
54.results h2 {
55 color: var(--text-color);
56 font-size: 1.5em;
57 max-width: 200px;
58 margin: 20px auto;
59 text-align: center;
60}
61
62.resources h3 {
63 font-size: 1em;
64 margin-top: 0px;
65}
66
67.resources ul {
68 list-style: none;
69 padding: 0;
70 font-size: 0.7em;
71 margin-bottom: 0px;
72}
73
74.credblue ul {
75 list-style: none;
76 padding: 0;
77 font-size: 0.7em;
78}
79
80.credblue h3 {
81 font-size: 1em;
82 margin-top: 20px;
83}
84
85.resources li {
86 margin-bottom: 5px;
87}
88
89.resources a {
90 text-decoration: none;
91 color: #3B9AF8;
92}
93
94.resources a:hover {
95 text-decoration: underline;
96}
97
98/* Responsive: For smaller screens, stack the elements vertically */
99@media (max-width: 500px) {
100 .search-bar {
101 flex-direction: column;
102 gap: 15px;
103 }
104
105 .checkbox-container {
106 margin-left: 0;
107 }
108}
109
110/* Action row: contains the button and the checkbox, arranged horizontally */
111.action-row {
112 display: flex;
113 align-items: center;
114 justify-content: center;
115 gap: 28px;
116}
117
118.custom-checkbox input[type="checkbox"]:checked:hover + .checkbox-indicator {
119 background-color: #004F84;
120 border-color: #004F84;
121}
122
123.custom-checkbox input[type="checkbox"]:hover + .checkbox-indicator {
124 background-color: #8fc5ff;
125}
126
127/* Custom Checkbox Styles */
128.custom-checkbox {
129 display: inline-flex;
130 align-items: center;
131 cursor: pointer;
132 font-size: 0.9em;
133 user-select: none;
134}
135
136/* Hide the default checkbox appearance */
137.custom-checkbox input[type="checkbox"] {
138 appearance: none;
139 -webkit-appearance: none;
140 -moz-appearance: none;
141 width: 15px;
142 height: 15px;
143 margin: 0;
144 border: 2px solid #3B9AF8;
145 border-radius: 4px;
146 outline: none;
147 cursor: pointer;
148 position: relative;
149 background-color: #fff;
150 transition: background-color 0.2s, border-color 0.2s;
151}
152
153/* Create a custom indicator (optional: you can use the input element itself) */
154.custom-checkbox .checkbox-indicator {
155 display: inline-block;
156 width: 20px;
157 height: 20px;
158 border: 2px solid #3B9AF8;
159 border-radius: 4px;
160 margin-right: 8px;
161 position: relative;
162 transition: background-color 0.2s, border-color 0.2s;
163}
164
165/* Hide the native checkmark; we use the indicator to display the check state. */
166.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator {
167 background-color: #3B9AF8;
168 border-color: #3B9AF8;
169}
170
171/* Optional: Add a checkmark icon using CSS pseudo-elements */
172.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator::after {
173 content: "";
174 position: absolute;
175 top: 2px;
176 left: 6px;
177 width: 5px;
178 height: 10px;
179 border: solid white;
180 border-width: 0 2px 2px 0;
181 transform: rotate(45deg);
182}
183
184/* When clicking, have a subtle focus outline */
185.custom-checkbox input[type="checkbox"]:focus {
186 box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.5);
187}
188
189/* Hide the native checkbox visually but still keep it accessible. */
190.custom-checkbox input[type="checkbox"] {
191 position: absolute;
192 opacity: 0;
193 pointer-events: none;
194}
195
196/* Instead, we use the indicator to toggle */
197.custom-checkbox {
198 position: relative;
199 padding-left: 33px; /* space for the checkbox indicator */
200 margin-bottom: 19px;
201 font-size: 1em;
202}
203
204/* Ensure the indicator sits in the correct position */
205.custom-checkbox .checkbox-indicator {
206 position: absolute;
207 left: 0;
208 top: 50%;
209 transform: translateY(-50%);
210}
211
212.filters-container {
213 font-size: 0.8em;
214 }
215
216 .alt-text-rating-tool {
217 margin: 30px auto 20px;
218 max-width: 450px;
219 padding: 20px;
220 gap: 20px;
221 display: flex;
222 flex-direction: column;
223 }
224
225 .alt-card {
226 background: #fff;
227 padding: 35px 20px;
228 }
229
230 .share-button {
231 background: #858585;
232 }
233
234 .action-row {
235 display: flex;
236 gap: 10px;
237 }
238
239 .gauge-container {
240 margin-top: 20px;
241 text-align: center;
242 }
243
244 .needle-group {
245 transition: transform 0.2s linear;
246 }
247
248 /* Checkbox styles */
249 .filters-container {
250 align-items: center;
251 display: flex;
252 justify-content: center;
253 margin-bottom: 10px;
254 margin-top: 20px;
255 gap: 20px;
256 }
257
258 .checkbox-container input {
259 margin-right: 5px;
260 }
261
262
263 /* Responsive container for the gauge */
264 .gauge-container {
265 margin: 20px auto;
266 width: 100%;
267 max-width: 400px;
268 position: relative;
269 padding-bottom: 0;
270 margin-top: -27px;
271 margin-bottom: -16px;
272 }
273 .gauge-container svg {
274 position: relative;
275 top: -18px;
276 left: 0;
277 width: 100%;
278 margin-top: -93px;
279 overflow: hidden;
280 }
281
282 .alt-text-rating-tool .search-bar {
283 margin-bottom: 0px;
284 }
285
286.alt-text-rating-tool ul {
287 font-size: 0.9em;
288 list-style: none;
289 margin-top: 0;
290 padding: 0;
291 text-align: center;
292 }
293
294 .alt-text-rating-tool .gauge-svg {
295 margin-top: -89px;
296 }
297
298 .action-row button {
299 margin: 0px;
300 }
301
302 .share-button {
303 background: gray !important;
304 }
305
306 .full-analysis-button {
307 margin-bottom: 24px;
308 }
309
310
311@media (max-width: 450px) {
312 .gauge-container {
313 margin: 20px auto;
314 width: 100%;
315 max-width: 400px;
316 position: relative;
317 padding-bottom: 0;
318 margin-top: 25px;
319 margin-bottom: -16px;
320 }
321}