Something went wrong. Try again.
(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension web atproto comments
Something went wrong. Try again.
CSS
at ui-refactor
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
:root { --bg-primary: #0a0a0d; --bg-secondary: #121216; --bg-tertiary: #1a1a1f; --bg-card: #0f0f13; --bg-elevated: #18181d; --bg-hover: #1e1e24;
--glass-border: rgba(234, 234, 238, 0.08); --glass-bg: rgba(10, 10, 13, 0.92);
--text-primary: #eaeaee; --text-secondary: #b7b6c5; --text-tertiary: #6e6d7a;
--border: rgba(183, 182, 197, 0.12); --border-hover: rgba(183, 182, 197, 0.2); --accent: #957a86; --accent-hover: #a98d98; --accent-subtle: rgba(149, 122, 134, 0.15); --accent-text: #c4a8b2;
--success: #7fb069; --error: #d97766; --warning: #e8a54b; --info: #6eb5ff;
--radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(149, 122, 134, 0.2);
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-display: "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", monospace;
--nav-bg: rgba(10, 10, 13, 0.95);
--sidebar-width: 200px; --right-sidebar-width: 260px; --content-max-width: 600px; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 20px; --spacing-xl: 28px;}
[data-theme="light"] { --bg-primary: #f8f8fa; --bg-secondary: #ffffff; --bg-tertiary: #f0f0f4; --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-hover: #eeeef2;
--glass-border: rgba(92, 73, 90, 0.1); --glass-bg: rgba(248, 248, 250, 0.95);
--text-primary: #18171c; --text-secondary: #5c495a; --text-tertiary: #8a8494;
--border: rgba(92, 73, 90, 0.12); --border-hover: rgba(92, 73, 90, 0.22);
--accent: #7a5f6d; --accent-hover: #664e5b; --accent-subtle: rgba(149, 122, 134, 0.12); --accent-text: #5c495a;
--shadow-sm: 0 1px 3px rgba(92, 73, 90, 0.06); --shadow-md: 0 4px 12px rgba(92, 73, 90, 0.08); --shadow-lg: 0 8px 24px rgba(92, 73, 90, 0.1); --shadow-glow: 0 0 20px rgba(149, 122, 134, 0.1);
--nav-bg: rgba(255, 255, 255, 0.95);}
* { margin: 0; padding: 0; box-sizing: border-box;}
html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden;}
body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100vw; font-size: 0.9375rem;}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.3;}
h1 { font-size: 1.5rem;}h2 { font-size: 1.25rem;}h3 { font-size: 1.1rem;}
p { color: var(--text-secondary); line-height: 1.6;}
a { color: inherit; text-decoration: none; transition: color 0.2s ease;}
button { font-family: inherit; cursor: pointer; border: none; background: none;}
input,textarea,select { font-family: inherit; font-size: inherit; color: var(--text-primary);}
::selection { background: var(--accent-subtle); color: var(--accent-text);}
::-webkit-scrollbar { width: 10px; height: 10px;}
::-webkit-scrollbar-track { background: var(--bg-secondary);}
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: var(--radius-full); border: 2px solid var(--bg-secondary);}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary);}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;}
.text-sm { font-size: 0.9rem;}
.text-xs { font-size: 0.8rem;}
.font-medium { font-weight: 500;}
.font-semibold { font-weight: 600;}
.font-mono { font-family: var(--font-mono);}
.text-muted { color: var(--text-secondary);}
.text-faint { color: var(--text-tertiary);}
.card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border);}