Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
10 kB · 697 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697/* src/components/UserProfile/UserProfile.css */
/* Container for the profile page */.user-profile { margin: auto; max-width: 1200px; margin-top: 40px;}
.user-profile h1 { margin: 0px;}
/* Media query for responsiveness (optional, handled by react-grid-layout) */@media (max-width: 1200px) { .layout { width: 100%; }}
.user-profile { margin: auto; max-width: 1200px; opacity: 0; /* Initially hidden */ transform: translateY(20px); transition: opacity 1s ease, transform 1s ease;}
.user-profile.fade-in { opacity: 1; transform: translateY(0);}
.user-profile.hidden { display: none;}
.user-profile.loading-container { opacity: 1; transition: opacity 1s ease;}
.user-profile.loading-container.fade-out { opacity: 0; pointer-events: none;}
.user-profile-header { text-align: center;}
.react-grid-item.react-grid-placeholder { background: #3B9AF8 !important; border-radius: 8px; opacity: 0.2; transition-duration: 100ms; z-index: 2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.react-grid-item.react-grid-placeholder.placeholder-resizing { transition: none;}
.react-grid-layout { margin-bottom: 40px;}
/* src/components/UserProfile/UserProfile.css */
.user-profile-header { display: inline-grid; column-gap: 50px; row-gap: 22px; justify-content: center; text-align: center; grid-auto-flow: column; margin-left: 36.5px;}
.toggle-button {padding: 10px 20px;margin: 0 5px;border: none;background-color: #a9a9a9;cursor: pointer;border-radius: 6px;transition: background-color 0.3s;}
.toggle-button.active {background-color: #3B9AF8;color: white;}
.toggle-button:hover {background-color: #ccc;}
.user-profile-header p {margin-bottom: 0px;margin-top: 0px;}
.user-profile-header h2 {font-size: 1.2em;margin: 0px;}
.user-profile-header h1 {margin-bottom: 0px;line-height: 0.9em;}
.text-center.font-semibold.mt-2 {font-size: 1.2em;font-weight: 600;color: var(--text);margin-top: -10.5px;margin-left: 11.5px;display: flex;gap: 8.5px;}
.user-profile-header-main {display: flex;flex-direction: column;gap: 20px;align-content: center;justify-content: center;}
.user-profile-data {display: flex;flex-direction: column;}
.user-profile-data {justify-content: center;gap: 35px;}
.circular-badge {margin-bottom: -10px;margin-top: -10px;}
.user-profile-name {gap: 7px;display: flex;flex-direction: column;}
.loading-container-1 {min-height: 0 !important;margin-bottom: 50px;margin-top: 30px;}
/* Make grid items responsive and flexible */.grid-item {overflow: hidden;transition: all 0.3s ease;display: flex;flex-direction: column;}
.react-grid-item {transition: all 200ms ease;transition-property: left, top, width, height;}
.narrative-card p:first-letter {text-transform: capitalize;}
.user-profile-badges h3 {margin: 0px;font-size: 0.8em;font-weight: 500;margin-bottom: 4px;}
.circular-badge {position: relative;display: inline-block;grid-row: 1;grid-column: 1;margin-left: -9px;margin-right: -18px;}
/* Light mode styles */.circular-logo-text {fill: var(--circular-logo-text, #004f84);transition: fill 0.3s ease;}
.user-profile .recharts-responsive-container {max-width: 100%;}
.share-button-container {align-content: center;grid-column: 3;grid-row: 2;display: flex;flex-direction: column;gap: 5px;font-size: 0.8em;}
.toggle-switch {display: none;}
.user-profile-activity {text-transform: capitalize;align-content: center;justify-content: center;display: flex;flex-direction: column;padding: 8px 0px;}
tspan {font-family: articulat-cf;}
.dark-mode tspan {fill: white;opacity: 0.5;}
.user-profile-score {align-content: center;justify-content: center;display: flex;flex-direction: column;}
.user-profile-data-group {display: flex;flex-direction: column;justify-content: center;grid-row: 2;grid-column: 2;font-size: 0.8em;}
.dark-mode rect {stroke: #2c2c2c !important;stroke-width: 5px !important;}
.recharts-surface {stroke-width: 0.3px;}
.recharts-cartesian-axis-ticks {font-size: 0.7em;}
.text-sm.text-gray-500.text-center.mt-4 {text-align: center;padding-top: 10px;font-size: 0.8em;opacity: 0.5;}
.user-profile-header-rechart {align-items: center;display: flex;grid-row: 1;justify-content: center;margin: 0 auto;max-height: 130px;max-width: 200px;padding: 1rem;width: 100%;grid-column: 3;scale: 0.9;}
.score-gauge {margin-right: 10px !important;}
.user-profile-main {display: flex;flex-direction: column;grid-row: 1;justify-content: space-evenly;padding-top: 5px;grid-column: 2;max-width: 240px;}
.user-profile-container {text-align: center;margin: 55px 20px 40px;}
.user-profile-age h2 {font-size: 0.8em;}
.compare-button-container {align-content: center;grid-row: 3;}
.max-score {opacity: 0.5;}
.comparea-button-profile {background: gray;}
.user-profile-emoji-group {display: inline-grid;font-size: 1.8em;align-content: center;justify-content: center;row-gap: 10px;column-gap: 20px;margin-left: 10px;grid-column: 1;grid-row: 2;}
.emoji-1 {grid-column: 1;grid-row: 1;}
.emoji-2 {grid-column: 2;grid-row: 1;}
.emoji-3 {grid-column: 1;grid-row: 2;}
.emoji-4 {grid-column: 2;grid-row: 2;}
.narrative-card {font-size: 0.9em;}
.narrative-disclaimer {font-size: 0.8em;margin-top: 13.5px;opacity: 0.5;}
.post-type-card .recharts-surface {margin-left: -15px;}
.score-breakdown-card .disclaimer {margin-left: 3px;}
.user-profile-container {margin: auto; margin-top: auto; margin-bottom: auto;width: 100%;margin-top: 60px;margin-bottom: 60px;}
.profile-sections-wrapper {display: grid;grid-template-columns: 1fr 2fr 1fr;gap: 20px;align-items: start;max-width: 1200px;margin: 0 auto;}
/* Left Section */.profile-section.left-section {justify-self: start;margin-right: 31.1px;margin-top: 15.3px;}
/* Middle Section */.profile-section.middle-section {display: flex;flex-direction: column;align-items: center;gap: 17px;justify-self: center;margin-right: -31.3px;margin-top: 11.5px;}
.user-profile-header-rechart {margin: 0 auto;max-width: 200px;width: 100%;scale: 1.07;margin-top: 4px;}
.user-profile-data-group {text-align: center;width: 100%;max-width: 300px;gap: 10px;}
.share-button-container {width: 100%;text-align: center;display: block;}
.comparea-button-profile {margin-top: 10px;}
/* Right Section */.profile-section.right-section {justify-self: end;padding-left: 32.6px;scale: 0.9;}
.user-profile-main {text-align: center;gap: 22.5px;}
.user-profile-activity {align-content: center;display: flex;flex-direction: column;justify-content: center;padding: 0px;text-transform: capitalize;}
.user-profile-badges {font-size: 1.2em;line-height: 1.2em;}
.context-line p {margin: 0px;font-size: 0.7em;opacity: 0.5;}
.bluesky-link {font-size: 0.8em;text-decoration: underline;}
.user-profile-data-group p {margin: 2px;}
.user-profile-name h2 {font-size: 1em;margin: 0px;}
.user-profile-age h2 {font-size: .8em;margin: 0px;}
.circular-badge {margin: 0px}
.card .disclaimer {margin: 0px; margin-top: 0px;margin-top: 12.3px;max-width: 400px;}
.learn-more-text {font-size: 0.9em}
.score-breakdown-container .disclaimer {margin-left: 3px;}
/* Make card component fill grid item */.grid-item > div {height: 100%;width: 100%;display: flex;flex-direction: column;}
/* Make card content expand to fill available space */.card-content {flex: 1;overflow: visible; /* Changed from auto to prevent scrollbars */}
/* Style for resize handle */.react-resizable-handle {background-color: rgba(0, 0, 0, 0.1);border-radius: 0 0 5px 0;z-index: 10;}
.react-resizable-handle:hover {background-color: rgba(0, 0, 0, 0.2);}
/* Custom styles for the Card component */.card {display: flex;flex-direction: column;height: 100%;overflow: visible; /* Changed from hidden to allow content to determine height */}
.activity-card { overflow: hidden;}
.card-content {overflow: auto;}
.profile-card p { line-height: 1em;}
/* Responsive Adjustments for Cards */@media (max-width: 835px) {
.user-profile-container { margin: 30px auto; margin-top: 30px; width: 100%; margin-top: 40px;}
.profile-sections-wrapper { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 27px;}
.profile-section.left-section { justify-self: center; padding-left: 0; scale: .7; grid-column: 1; grid-row: 1;}
.profile-section.left-section { margin-right: 0px;}
.profile-section.right-section { justify-self: center; padding-left: 0; grid-column: 1; grid-row: 3; margin-top: -10px;}
.user-profile-main { text-align: center;}
.circular-badge { grid-column: 1; grid-row: 1; margin-left: 0; margin-right: 1.5px;}.user-profile-emoji-group { grid-row: 1; grid-column: 1; display: none;}.user-profile-main { grid-row: 2; grid-column: 1; gap: 20.8px;}.user-profile-header-rechart { grid-row: 3; grid-column: 1; scale: 0.9; margin-bottom: 5px;}
.user-profile-data-group { grid-row: 4; grid-column: 1;}
.share-button-container { gap: 10px;}
.user-profile-score { padding: 0px;}
.share-button-container { grid-row: 5; grid-column: 1; text-align: center;}
.user-profile-header { margin-left: 0px; row-gap: 10px;}.user-profile-data-group { text-align: center;}
.share-button-container { text-align: center;}
.profile-section.left-section { scale: 0.6; margin-top: -64.5px;}
.profile-section.middle-section { margin-top: -85.7px; gap: 13.5px; grid-column: 1; grid-row: 2; margin-right: 0px;}
.user-profile-badges { margin-top: 0px;}
.text-center.font-semibold.mt-2 { font-size: 1.5em;}
.react-grid-item { margin-bottom: 15px;}}
@media (max-width: 440px) {.score-breakdown-card .disclaimer { font-size: .7em !important; margin: 0px; margin-top: 0px; max-width: 300px;}
.react-resizable-handle { width: 20px; height: 20px;}
/* Make the resizing handle more touch-friendly on small screens */.react-resizable-handle::after { content: ''; position: absolute; width: 20px; height: 20px; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.1); border-radius: 0 0 5px 0;}}