(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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434.feed-container { /* background: var(--bg-elevated); */ /* border: 1px solid var(--border-hover); */ /* border-radius: var(--radius-xl); */ overflow: visible; /* padding: 8px; */ position: relative;}
.feed { display: flex; flex-direction: column; gap: 12px; width: 100%; overflow: visible; border-radius: var(--radius-lg); position: relative;}
.feed-load-more { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; background: var(--bg-tertiary); border: none; border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease;}
.feed-load-more:hover { background: var(--bg-hover); color: var(--text-primary);}
.feed-load-more:disabled { opacity: 0.6; cursor: not-allowed;}
.feed > * { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; overflow: hidden;}
.feed > *:last-child { border-bottom: 1px solid var(--border);}
.feed > *:hover { z-index: 10;}
.feed-page { animation: fadeIn 0.3s ease-out;}
@keyframes fadeIn { from { opacity: 0; }
to { opacity: 1; }}
.feed-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.feed-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;}
.feed-filters { display: flex; gap: 4px; margin-bottom: 20px; background: transparent; padding: 0; border: none; flex-wrap: wrap;}
.filter-tab { padding: 8px 14px; font-size: 0.875rem; font-weight: 500; color: var(--text-tertiary); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease;}
.filter-tab:hover { color: var(--text-secondary); background: var(--bg-tertiary);}
.filter-tab.active { color: var(--text-primary); background: var(--bg-tertiary);}
.filter-pill { padding: 8px 14px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-tertiary); border: none; border-radius: var(--radius-full); cursor: pointer; transition: all 0.15s;}
.filter-pill:hover { background: var(--bg-hover); color: var(--text-primary);}
.filter-pill.active { background: var(--accent); color: var(--bg-primary);}
.page-header { margin-bottom: 28px;}
.page-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; color: var(--text-primary);}
.page-description { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.5;}
.url-input-wrapper { margin-bottom: var(--spacing-lg); position: relative;}
.url-input-container { display: flex; gap: var(--spacing-sm);}
.url-input { width: 100%; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.9rem; transition: all 0.15s ease;}
.url-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle);}
.url-input::placeholder { color: var(--text-tertiary);}
.url-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md);}
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; text-decoration: none; margin-bottom: var(--spacing-lg); padding: 6px 12px; background: var(--bg-tertiary); border-radius: var(--radius-sm); transition: all 0.15s;}
.back-link:hover { background: var(--bg-hover); color: var(--text-primary);}
.url-target-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--spacing-lg);}
.url-target-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--text-tertiary);}
.url-target-link { color: var(--accent); font-size: 0.85rem; font-weight: 500; text-decoration: none; word-break: break-all; line-height: 1.4;}
.url-target-link:hover { text-decoration: underline;}
.share-notes-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: 12px 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--spacing-md);}
.share-notes-info { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--text-primary); font-size: 0.85rem; font-weight: 500;}
.share-notes-actions { display: flex; gap: var(--spacing-sm);}
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center;}
.empty-state-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border-radius: var(--radius-lg); color: var(--text-tertiary); margin-bottom: 16px;}
.empty-state-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px;}
.empty-state-text { font-size: 0.9rem; color: var(--text-secondary); max-width: 300px; line-height: 1.5;}
@media (max-width: 640px) { .feed-filters { gap: 4px; }
.filter-tab, .filter-pill { padding: 6px 10px; font-size: 0.75rem; }}
.feed-controls { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg);}
.active-filter-banner { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: 6px 10px 6px 12px; background: var(--accent-subtle); border: 1px solid var(--accent); border-radius: var(--radius-full); font-size: 0.8rem; color: var(--accent); margin-bottom: var(--spacing-md); width: fit-content;}
.active-filter-banner strong { color: var(--accent-text);}
.active-filter-clear { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: transparent; border: none; border-radius: var(--radius-full); color: var(--accent); cursor: pointer; transition: all 0.15s;}
.active-filter-clear:hover { background: var(--accent); color: white;}
.keyboard-hint { display: none; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-tertiary); margin-left: auto;}
@media (min-width: 768px) { .keyboard-hint { display: flex; }}
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 0.65rem; font-family: var(--font-mono); color: var(--text-secondary);}
.back-to-top-btn { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: all 0.2s ease; z-index: 100; opacity: 0; visibility: hidden; transform: translateY(10px);}
.back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0);}
.back-to-top-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg);}