Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
3.9 kB · 253 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254:root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400;
color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424;
font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a { font-weight: 500; color: #14b8a6; text-decoration: inherit;}a:hover { color: #0d9488;}
body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh;}
h1 { font-size: 2em; line-height: 1.1; margin-bottom: 1.5em;}
#app { max-width: 400px; margin: 0 auto; padding: 2rem;}
.container { text-align: center;}
.form-group { margin-bottom: 1rem; text-align: left;}
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500;}
.form-group input { width: 100%; padding: 0.6em; font-size: 1em; font-family: inherit; border: 1px solid #444; border-radius: 4px; background-color: #1a1a1a; color: inherit; box-sizing: border-box;}
.form-group input:focus { outline: none; border-color: #14b8a6;}
.error { color: #ff6b6b; font-size: 0.9em; margin-top: 0.5rem; min-height: 1.2em;}
.profile-card { background-color: #1a1a1a; padding: 1.5rem; border-radius: 8px; margin: 2rem 0; display: flex; align-items: center; gap: 1rem; text-align: left;}
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.profile-info { flex: 1;}
.profile-name { margin: 0 0 0.25rem 0; font-size: 1.3em; font-weight: 600;}
.profile-handle { margin: 0 0 0.75rem 0; color: #888; font-size: 0.9em;}
.profile-stats { display: flex; gap: 1.5rem; font-size: 0.9em;}
.profile-stats span { color: #888;}
.profile-stats strong { color: inherit; font-weight: 600;}
.notifications-section { margin: 2rem 0; text-align: left;}
.notifications-section h3 { font-size: 1.2em; margin: 0 0 1rem 0; font-weight: 600;}
.notifications-list { background-color: #1a1a1a; border-radius: 8px; overflow: hidden;}
.notification-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid #333;}
.notification-item:last-child { border-bottom: none;}
.notification-item.unread { background-color: rgba(20, 184, 166, 0.1);}
.notification-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;}
.notification-content { flex: 1;}
.notification-text { margin: 0 0 0.25rem 0; font-size: 0.95em; line-height: 1.4;}
.notification-text strong { font-weight: 600;}
.notification-time { margin: 0; font-size: 0.85em; color: #888;}
.session-info { background-color: #1a1a1a; padding: 1.5rem; border-radius: 8px; margin: 2rem 0; text-align: left;}
.session-info p { margin: 0.5rem 0; word-break: break-all;}
button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: #14b8a6; color: white; cursor: pointer; transition: background-color 0.25s; width: 100%; margin-top: 1rem;}button:hover { background-color: #0d9488;}button:focus,button:focus-visible { outline: 4px auto -webkit-focus-ring-color;}
@media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #2dd4bf; } .form-group input { background-color: #f9f9f9; border-color: #ddd; } .profile-card, .notifications-list, .session-info { background-color: #f9f9f9; } .notification-item { border-bottom-color: #e0e0e0; } .notification-item.unread { background-color: rgba(20, 184, 166, 0.05); }}