Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
6.4 kB · 321 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322/* AltTextRatingTool.css */
/* === Specific Styles for Alt Text Analyzer === */
.alt-card { background-color: var(--post-background-color); max-width: 95%; text-align: center; border: 5px solid var(--card-border); border-radius: 12px; box-shadow: none; padding: 20px 30px;}
body.dark-mode .alt-card { border-color: #444;}
#alt-text-rating-form h1 { font-size: 1.6em; margin-top: 0px; text-align: center; margin-bottom: 10px; }
#alt-text-rating-form p { margin-top: 0px; font-size: 0.9em; }
#textResults p { margin-top: 5px; }
.results { margin-top: 30px; font-size: 0.95em; word-wrap: break-word; /* Prevent long text from breaking the layout */}
.checkbox-container { align-items: center; display: flex; margin-bottom: 15px; margin-right: 0px; }
.results p { margin-bottom: 4px; margin-top: 0px; word-wrap: break-word; /* Prevent long text from breaking the layout */}
.results h2 { color: var(--text-color); font-size: 1.5em; max-width: 200px; margin: 20px auto; text-align: center;}
.resources h3 { font-size: 1em; margin-top: 0px;}
.resources ul { list-style: none; padding: 0; font-size: 0.7em; margin-bottom: 0px;}
.credblue ul { list-style: none; padding: 0; font-size: 0.7em;}
.credblue h3 { font-size: 1em; margin-top: 20px;}
.resources li { margin-bottom: 5px;}
.resources a { text-decoration: none; color: #3B9AF8;}
.resources a:hover { text-decoration: underline;}
/* Responsive: For smaller screens, stack the elements vertically */@media (max-width: 500px) { .search-bar { flex-direction: column; gap: 15px; }
.checkbox-container { margin-left: 0; }}
/* Action row: contains the button and the checkbox, arranged horizontally */.action-row { display: flex; align-items: center; justify-content: center; gap: 28px;}
.custom-checkbox input[type="checkbox"]:checked:hover + .checkbox-indicator { background-color: #004F84; border-color: #004F84;}
.custom-checkbox input[type="checkbox"]:hover + .checkbox-indicator { background-color: #8fc5ff;}
/* Custom Checkbox Styles */.custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; font-size: 0.9em; user-select: none;}
/* Hide the default checkbox appearance */.custom-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 15px; height: 15px; margin: 0; border: 2px solid #3B9AF8; border-radius: 4px; outline: none; cursor: pointer; position: relative; background-color: #fff; transition: background-color 0.2s, border-color 0.2s;}
/* Create a custom indicator (optional: you can use the input element itself) */.custom-checkbox .checkbox-indicator { display: inline-block; width: 20px; height: 20px; border: 2px solid #3B9AF8; border-radius: 4px; margin-right: 8px; position: relative; transition: background-color 0.2s, border-color 0.2s;}
/* Hide the native checkmark; we use the indicator to display the check state. */.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator { background-color: #3B9AF8; border-color: #3B9AF8;}
/* Optional: Add a checkmark icon using CSS pseudo-elements */.custom-checkbox input[type="checkbox"]:checked + .checkbox-indicator::after { content: ""; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
/* When clicking, have a subtle focus outline */.custom-checkbox input[type="checkbox"]:focus { box-shadow: 0 0 3px 2px rgba(0, 123, 255, 0.5);}
/* Hide the native checkbox visually but still keep it accessible. */.custom-checkbox input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none;}
/* Instead, we use the indicator to toggle */.custom-checkbox { position: relative; padding-left: 33px; /* space for the checkbox indicator */ margin-bottom: 19px; font-size: 1em;}
/* Ensure the indicator sits in the correct position */.custom-checkbox .checkbox-indicator { position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.filters-container { font-size: 0.8em; }
.alt-text-rating-tool { margin: 30px auto 20px; max-width: 450px; padding: 20px; gap: 20px; display: flex; flex-direction: column; } .alt-card { background: #fff; padding: 35px 20px; }
.share-button { background: #858585; } .action-row { display: flex; gap: 10px; } .gauge-container { margin-top: 20px; text-align: center; } .needle-group { transition: transform 0.2s linear; } /* Checkbox styles */ .filters-container { align-items: center; display: flex; justify-content: center; margin-bottom: 10px; margin-top: 20px; gap: 20px; } .checkbox-container input { margin-right: 5px; }
/* Responsive container for the gauge */ .gauge-container { margin: 20px auto; width: 100%; max-width: 400px; position: relative; padding-bottom: 0; margin-top: -27px; margin-bottom: -16px; } .gauge-container svg { position: relative; top: -18px; left: 0; width: 100%; margin-top: -93px; overflow: hidden; }
.alt-text-rating-tool .search-bar { margin-bottom: 0px; }
.alt-text-rating-tool ul { font-size: 0.9em; list-style: none; margin-top: 0; padding: 0; text-align: center; }
.alt-text-rating-tool .gauge-svg { margin-top: -89px; }
.action-row button { margin: 0px; }
.share-button { background: gray !important; }
.full-analysis-button { margin-bottom: 24px; }
@media (max-width: 450px) { .gauge-container { margin: 20px auto; width: 100%; max-width: 400px; position: relative; padding-bottom: 0; margin-top: 25px; margin-bottom: -16px; }}