Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
9.8 kB · 490 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491/* Main container for single mode and comparison mode */.score-result { width: 70%; max-width: 800px; /* Optional: cap the width for larger screens */ margin: 20px auto; /* Center horizontally and add vertical spacing */ width: 100%;}
.mode-toggle { display: flex; align-items: center; justify-content: center; /* Centers the content horizontally */ max-width: 300px; /* Set a maximum width for the container */ margin: 10px auto; /* Center the div on the page */ padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.mode-toggle label { font-size: 16px; color: #333; display: flex; align-items: center; gap: 8px; /* Adds spacing between the checkbox and the label text */}
.mode-toggle input[type="checkbox"] { width: 18px; /* Adjusts the checkbox size */ height: 18px; cursor: pointer;}
/* Comparison mode layout */
/* Individual score breakdown cards */.score-breakdowns { display: flex; flex-direction: column; /* Default to column for single mode */ gap: 20px; width: 100%;}
/* Adjustments for comparison mode */.comparison-mode .score-breakdowns { flex-direction: row; /* Side-by-side in comparison mode */ justify-content: space-between; /* Evenly space the breakdowns */}
.score-breakdown { flex: 1; max-width: 100%; /* Full width by default */ padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; /* Include padding and border in width */}
/* Remove or comment out the existing custom bar-fill since Recharts handles it */.bar-fill { display: none; /* Hide custom bar-fill since Recharts handles it */}
/* Remove or comment out the existing h3 if it's no longer needed *//* .score-breakdown h3 { text-align: center; color: #333; margin-bottom: 15px;} */
/* New styles for the breakdown sections */.score-breakdown .breakdown-section { background-color: #ffffff; /* White background for clarity */ padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid #ddd;}
.score-breakdown .breakdown-section:last-child { margin-bottom: 0;}
.score-breakdown .breakdown-section h4 { margin-bottom: 0.5rem; color: #333;}
.score-breakdown .breakdown-section ul { list-style-type: disc; padding-left: 1.5rem;}
.score-breakdown .breakdown-section li { margin-bottom: 0.5rem; color: #555;}
/* Score Toggle Controls */.score-toggle-controls { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px;}
.score-toggle-controls label { font-size: 14px; color: #333; cursor: pointer; display: flex; align-items: center; gap: 5px;}
.score-toggle-controls input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer;}
/* Bar Fill Container */.bar-fill { display: flex; height: 30px; width: 100%; background-color: #e0e0e0; /* Light gray background */ border-radius: 5px; overflow: hidden; position: relative;}
/* Bluesky Segment */.bluesky-segment { background-color: #3B9AF8; /* Blue color */ position: relative; transition: opacity 0.3s ease;}
.bluesky-segment:hover { opacity: 0.8;}
/* Atproto Segment */.atproto-segment { background-color: #28a745; /* Green color */ position: relative; transition: opacity 0.3s ease;}
.atproto-segment:hover { opacity: 0.8;}
/* Bar Label */.bar-label { width: 150px; /* Fixed width */ text-align: right; padding-right: 10px; font-weight: bold; color: #333;}
/* Bar Container */.bar { display: flex; align-items: center; gap: 10px;}
/* Single Mode Chart */.single-chart .bar-chart { width: 100%;}
/* Comparison Mode Chart */.comparison-chart .bar-chart { width: 100%;}
/* Score Breakdown Header */.score-breakdown-header { font-size: 1.5rem; font-weight: bold; color: #3B9AF8; /* Blue color to make it stand out */ text-align: center; margin-bottom: 1rem;}
/* Ensure that the username header doesn't interfere with breakdown sections */.score-breakdown-header + .breakdown-section { margin-top: 0;}
/* Existing breakdown list styles */.score-breakdown ul { list-style: none; padding: 0; margin: 15px 0 0;}
.score-breakdown li { margin-bottom: 8px; color: #555;}
.score-breakdown p { margin: 8px 0; color: #222; font-weight: bold;}
/* Center score breakdown card in single mode */.single-mode .score-breakdown { max-width: 400px; margin: 0 auto;}
.single-chart { margin-bottom: 20px;}
/* Comparison chart and single chart styles */.chart { margin-top: 20px; padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.bar-chart { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.bar { display: flex; align-items: center; height: 40px; /* Ensure consistent height for bars */ gap: 10px;}
.bar-label { width: 150px; /* Fixed size for labels */ text-align: right; font-weight: bold; color: #333;}
.bar-fill { display: none; /* Hide custom bar-fill since Recharts handles it */}
/* Score Fill Span */.bar-fill span { position: absolute; width: 100%; left: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold;}
.bar-fill::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; background: #3B9AF8; border-radius: 5px; z-index: 0; width: 100%;}
/* High-Level Comparison Summary */.comparison-summary { margin-top: 20px; margin-bottom: 20px; padding: 15px; background-color: #e3f7e6; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); font-size: 16px; text-align: center;}
.comparison-summary p { margin: 10px 0; color: #333;}
.dark-mode .comparison-summary p { color: white;}
.comparison-summary-text { padding-bottom: 15px;}
/* Container for elements below the score breakdowns */.comparison-extras { flex: 1 1 100%;}
.loading-skeleton { background-color: #f0f0f0; border-radius: 8px; padding: 20px; width: 100%; max-width: 400px; margin: 0 auto 20px; animation: pulse 1.5s infinite;}
.skeleton-title { height: 20px; width: 50%; margin-bottom: 15px; background-color: #e0e0e0; border-radius: 4px;}
.skeleton-bar { height: 20px; width: 100%; margin-bottom: 15px; background-color: #e0e0e0; border-radius: 4px;}
.skeleton-paragraph { height: 15px; width: 80%; margin-bottom: 10px; background-color: #e0e0e0; border-radius: 4px;}
@keyframes pulse { 0% { background-color: #f0f0f0; } 50% { background-color: #e0e0e0; } 100% { background-color: #f0f0f0; }}
/* Responsive Design */@media (max-width: 768px) { .comparison-mode .score-breakdowns { flex-direction: column; /* Stack breakdowns vertically on small screens */ }
.score-breakdown { max-width: 100%; }
.bar-label { width: 100px; }}
@media (max-width: 768px) { .score-result { width: 90%; /* Take up more width on smaller screens */ padding: 15px; /* Reduce padding for smaller screens */ }}
/* Additional Styles for Breakdown Sections */
/* Ensure that the breakdown sections are clearly separated */.score-breakdown .breakdown-section { background-color: #ffffff; /* White background for clarity */ padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid #ddd;}
.score-breakdown .breakdown-section:last-child { margin-bottom: 0;}
.score-breakdown .breakdown-section h4 { margin-bottom: 0.5rem; color: #333;}
.score-breakdown .breakdown-section ul { list-style-type: disc; padding-left: 1.5rem;}
.score-breakdown .breakdown-section li { margin-bottom: 0.5rem; color: #555;}
/* Score Breakdown Header */.score-breakdown-header { font-size: 1.5rem; font-weight: bold; color: #3B9AF8; /* Blue color to make it stand out */ text-align: center; margin-bottom: 1rem;}
/* Ensure that the username header doesn't interfere with breakdown sections */.score-breakdown-header + .breakdown-section { margin-top: 0;}
/* Customize Recharts Tooltip */.recharts-tooltip-wrapper { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #ccc; border-radius: 4px; padding: 10px;}
/* Customize Recharts Legend */.recharts-legend-wrapper { font-size: 14px; color: #333; text-align: center;}
/* Optional: Customize Legend Items */.recharts-legend-item-text { cursor: pointer;}
.recharts-default-legend { padding-top: 20px;}
/* Hover Effects on Legend Items */.recharts-legend-item-text:hover { text-decoration: underline;}
/* Custom Tooltip Styles */.custom-tooltip { background-color: rgba(255, 255, 255, 0.95); border: 1px solid #ccc; border-radius: 4px; padding: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}
.custom-tooltip .label { font-weight: bold; margin-bottom: 5px; color: #333;}
.custom-tooltip p { margin: 0; color: #555; font-size: 14px;}