(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
CSS
at ui-refactor
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510.app { min-height: 100vh; background: var(--bg-primary);}
.top-nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);}
.top-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 56px; display: flex; align-items: center; gap: 32px;}
.top-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.1rem; flex-shrink: 0;}
.top-nav-logo img { width: 26px; height: 26px;}
.top-nav-links { display: flex; align-items: center; gap: 4px; flex: 1;}
.top-nav-link { padding: 8px 14px; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; border-radius: var(--radius-md); transition: all 0.15s;}
.top-nav-link:hover { color: var(--text-primary); background: var(--bg-hover);}
.top-nav-link.active { color: var(--text-primary); background: var(--bg-tertiary);}
.top-nav-link.extension-link { display: flex; align-items: center; gap: 6px;}
.top-nav-actions { display: flex; align-items: center; gap: 8px;}
.top-nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; position: relative; text-decoration: none;}
.top-nav-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary);}
.notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg-primary);}
.top-nav-new-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--accent); color: var(--bg-primary); border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.15s;}
.top-nav-new-btn:hover { background: var(--accent-hover);}
.top-nav-avatar { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: none; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; transition: opacity 0.15s;}
.top-nav-avatar:hover { opacity: 0.85;}
.top-nav-avatar img { width: 100%; height: 100%; object-fit: cover;}
.top-nav-mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--text-primary); cursor: pointer;}
.top-nav-dropdown { position: relative;}
.dropdown-menu { position: absolute; top: calc(100% + 8px); min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow-lg); z-index: 200;}
.dropdown-right { right: 0;}
.dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s; background: none; border: none; cursor: pointer; text-align: left;}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary);}
.dropdown-item.danger:hover { background: rgba(217, 119, 102, 0.12); color: var(--error);}
.dropdown-external { margin-left: auto; opacity: 0.4;}
.tangled-icon-wrapper { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;}
.tangled-icon-wrapper img { width: 16px; height: 16px; filter: grayscale(100%) brightness(1.5); opacity: 0.6; transition: all 0.15s;}
.dropdown-item:hover .tangled-icon-wrapper img { opacity: 0.9;}
[data-theme="light"] .tangled-icon-wrapper img { filter: grayscale(100%) brightness(0) invert(0.35); opacity: 1;}
[data-theme="light"] .dropdown-item:hover .tangled-icon-wrapper img { filter: grayscale(100%) brightness(0) invert(0.1); opacity: 1;}
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 0;}
.dropdown-user-info { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;}
.dropdown-user-name { font-weight: 600; color: var(--text-primary); font-size: 0.9rem;}
.dropdown-user-handle { color: var(--text-tertiary); font-size: 0.8rem;}
.main-content { max-width: 1300px; margin: 0 auto; padding: 32px 56px 80px;}
.mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: 12px 16px;}
.mobile-menu-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-md); transition: all 0.15s;}
.mobile-menu-link:hover,.mobile-menu-link.active { background: var(--bg-hover); color: var(--text-primary);}
.mobile-menu-link.active { color: var(--accent);}
.mobile-menu-divider { height: 1px; background: var(--border); margin: 8px 0;}
.notification-badge { background: var(--accent); color: var(--bg-primary); font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-full); margin-left: auto;}
.mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 100;}
.mobile-bottom-nav { display: none; justify-content: space-around; align-items: center;}
.mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; color: var(--text-tertiary); text-decoration: none; font-size: 0.65rem; font-weight: 500; transition: color 0.15s; min-width: 56px;}
.mobile-bottom-nav-item.active { color: var(--accent);}
.mobile-bottom-nav-item:active { transform: scale(0.95);}
.mobile-bottom-nav-new { padding: 6px 16px;}
.mobile-nav-new-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--accent); color: var(--bg-primary); border-radius: var(--radius-full); box-shadow: var(--shadow-md);}
.mobile-nav-avatar { width: 24px; height: 24px; border-radius: var(--radius-full); object-fit: cover;}
.ios-shortcut-banner { display: none; position: relative; padding: 20px; margin-bottom: 12px; text-align: center;}
.ios-shortcut-banner-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.15s;}
.ios-shortcut-banner-close:hover { opacity: 1;}
.ios-shortcut-banner-content { display: flex; flex-direction: column; align-items: center; gap: 12px;}
.ios-shortcut-banner-icon { display: none;}
.ios-shortcut-banner-text { text-align: center;}
.ios-shortcut-banner-text strong { display: none;}
.ios-shortcut-banner-text p { font-size: 0.8rem; color: var(--text-tertiary); margin: 0; line-height: 1.4;}
.ios-shortcut-banner-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); border-radius: 100px; text-decoration: none; transition: all 0.15s;}
.ios-shortcut-banner-btn:hover { background: var(--bg-hover); color: var(--text-primary);}
@media (max-width: 768px) { .ios-shortcut-banner { display: block; }}
@media (max-width: 768px) { .top-nav { display: none; }
.mobile-bottom-nav { display: flex; }
.main-content { padding: 16px 12px 100px; }
.feed-container { border-radius: var(--radius-md); padding: 4px; }}
@media (max-width: 480px) { .main-content { padding: 16px 12px 100px; }
.page-title { font-size: 1.25rem; }
.page-description { font-size: 0.85rem; }}