(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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752.legal-content { max-width: 800px; margin: 0 auto; padding: 20px;}
.legal-content h1 { font-size: 2rem; margin-bottom: 8px; color: var(--text-primary);}
.legal-content h2 { font-size: 1.4rem; margin-top: 32px; margin-bottom: 12px; color: var(--text-primary);}
.legal-content h3 { font-size: 1.1rem; margin-top: 20px; margin-bottom: 8px; color: var(--text-primary);}
.legal-content p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px;}
.legal-content ul { color: var(--text-secondary); line-height: 1.7; margin-left: 24px; margin-bottom: 12px;}
.legal-content li { margin-bottom: 6px;}
.legal-content a { color: var(--accent); text-decoration: none;}
.legal-content a:hover { text-decoration: underline;}
.legal-content section { margin-bottom: 24px;}
.text-secondary { color: var(--text-secondary);}
.text-error { color: var(--error);}
.text-center { text-align: center;}
.flex { display: flex;}
.items-center { align-items: center;}
.justify-center { justify-content: center;}
.justify-end { justify-content: flex-end;}
.gap-2 { gap: 8px;}
.gap-3 { gap: 12px;}
.mt-3 { margin-top: 12px;}
.mb-6 { margin-bottom: 24px;}
.composer { margin-bottom: 24px;}
.composer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.composer-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin: 0;}
.composer-input { width: 100%; min-height: 120px; padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 1rem; resize: vertical; transition: all 0.15s ease;}
.composer-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle);}
.composer-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px;}
.composer-actions { display: flex; justify-content: flex-end; gap: 8px;}
.composer-count { font-size: 0.85rem; color: var(--text-tertiary);}
.composer-count.warning { color: var(--warning);}
.composer-count.error { color: var(--error);}
.composer-char-count.warning { color: var(--warning);}
.composer-char-count.error { color: var(--error);}
.composer-add-quote { width: 100%; padding: 12px 16px; margin-bottom: 12px; background: var(--bg-tertiary); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease;}
.composer-add-quote:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle);}
.composer-quote-input-wrapper { margin-bottom: 12px;}
.composer-quote-input { width: 100%; padding: 12px 16px; background: linear-gradient( 135deg, rgba(79, 70, 229, 0.05), rgba(168, 85, 247, 0.05) ); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-primary); font-size: 0.95rem; font-style: italic; resize: vertical; font-family: inherit; transition: all 0.15s ease;}
.composer-quote-input:focus { outline: none; border-color: var(--accent);}
.composer-quote-input::placeholder { color: var(--text-tertiary); font-style: italic;}
.composer-quote-remove-btn { margin-top: 8px; padding: 6px 12px; background: none; border: none; color: var(--text-tertiary); font-size: 0.85rem; cursor: pointer;}
.composer-quote-remove-btn:hover { color: var(--error);}
.composer-error { margin-top: 12px; padding: 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md); color: var(--error); font-size: 0.9rem;}
.composer-url { font-size: 0.85rem; color: var(--text-secondary); word-break: break-all;}
.composer-quote { position: relative; padding: 12px 16px; padding-right: 36px; background: var(--bg-secondary); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 16px; font-style: italic; color: var(--text-secondary); overflow-wrap: break-word; word-break: break-word; max-width: 100%;}
.composer-quote-remove { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-secondary); font-size: 1rem; display: flex; align-items: center; justify-content: center;}
.composer-quote-remove:hover { background: var(--bg-hover); color: var(--text-primary);}
.composer-tags { flex: 1;}
.composer-meta-row { display: flex; gap: 12px; margin-top: 12px; align-items: flex-start;}
.composer-labels-wrapper { position: relative;}
.composer-labels-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; color: var(--text-tertiary); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative;}
.composer-labels-btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--text-tertiary);}
.composer-labels-btn.active { color: var(--accent); background: var(--accent-subtle); border-color: var(--accent);}
.composer-labels-badge { position: absolute; top: -4px; right: -4px; background: var(--error); color: white; font-size: 0.7rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid var(--bg-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.composer-labels-picker { position: absolute; bottom: 100%; right: 0; margin-bottom: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 0; min-width: 200px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 50; animation: scaleIn 0.2s ease-out forwards; transform-origin: bottom right;}
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95) translateY(5px); }
to { opacity: 1; transform: scale(1) translateY(0); }}
.picker-header { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; padding: 4px 12px 8px; border-bottom: 1px solid var(--border);}
.picker-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; color: var(--text-secondary); font-size: 0.9rem; transition: all 0.15s ease; user-select: none;}
.picker-item:hover { background: var(--bg-hover); color: var(--text-primary);}
.picker-checkbox-wrapper { position: relative; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;}
.picker-checkbox-wrapper input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 10;}
.picker-checkbox-custom { width: 18px; height: 18px; border: 2px solid var(--text-tertiary); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: transparent; transition: all 0.2s ease; color: white;}
.picker-item:hover .picker-checkbox-custom { border-color: var(--text-secondary);}
.picker-checkbox-wrapper input:checked + .picker-checkbox-custom { background: var(--accent); border-color: var(--accent); color: white;}
.composer-tags-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.95rem; transition: all 0.15s ease;}
.composer-tags-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle);}
.composer-tags-input::placeholder { color: var(--text-tertiary);}
.history-panel { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; font-size: 0.9rem; animation: fadeIn 0.2s ease-out;}
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);}
.history-title { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--text-secondary);}
.history-list { list-style: none; display: flex; flex-direction: column; gap: 1rem;}
.history-item { position: relative; padding-left: 1rem; border-left: 2px solid var(--border);}
.history-date { font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: 0.25rem;}
.history-content { color: var(--text-secondary); white-space: pre-wrap;}
.history-close-btn { color: var(--text-tertiary); padding: 4px; border-radius: var(--radius-sm); transition: all 0.2s; display: flex; align-items: center; justify-content: center;}
.history-close-btn:hover { background: var(--bg-hover); color: var(--text-primary);}
.history-status { text-align: center; color: var(--text-tertiary); font-style: italic; padding: 1rem;}
.share-menu-container { position: relative; z-index: 10;}
.share-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); min-width: 200px; padding: 8px; z-index: 1000; animation: fadeInUp 0.15s ease;}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }}
.share-menu-section { display: flex; flex-direction: column;}
.share-menu-label { padding: 4px 12px 8px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary);}
.share-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: none; border: none; border-radius: var(--radius-md); width: 100%; text-align: left; font-size: 0.875rem; color: var(--text-primary); cursor: pointer; transition: all 0.1s ease;}
.share-menu-item:hover { background: var(--bg-hover);}
.share-menu-icon { font-size: 1.1rem; width: 24px; text-align: center;}
.share-menu-divider { height: 1px; background: var(--border); margin: 6px 0;}
.bookmark-card { display: flex; flex-direction: column; gap: 16px;}
.bookmark-preview { display: flex; flex-direction: column; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; transition: all 0.2s ease; position: relative;}
.bookmark-preview:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px);}
.bookmark-preview::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); opacity: 0.7;}
.bookmark-preview-content { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px;}
.bookmark-preview-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px;}
.bookmark-preview-site { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em;}
.bookmark-preview-title { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.bookmark-preview-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.bookmark-preview-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); padding: 0 4px; transition: all 0.2s ease;}
.bookmark-preview:hover .bookmark-preview-arrow { color: var(--accent); transform: translateX(2px);}
.bookmark-description { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.5;}
.bookmark-meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.85rem; color: var(--text-tertiary);}
.bookmark-time { color: var(--text-tertiary);}
.bookmark-preview { max-width: 100%; width: 100%; box-sizing: border-box;}
@media (max-width: 600px) { .bookmark-preview-content { padding: 12px 14px; }
.legal-content { padding: 16px; }}