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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186@tailwind base;@tailwind components;@tailwind utilities;
@layer base { html { font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { background-color: #f4f4f5; color: #18181b; }
html[data-theme="dark"] { background-color: #18181b; color: #fafafa; }
h1, h2, h3, h4, h5, h6 { font-family: "Outfit", sans-serif; letter-spacing: -0.02em; }}
@layer utilities { .animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-up { animation: slideUp 0.3s ease-out; }
.animate-scale-in { animation: scaleIn 0.2s ease-out; }
.focus-ring { @apply focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-surface-900; }
.glass { @apply bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl; }
.card { @apply bg-surface-100 dark:bg-surface-900 rounded-xl border border-surface-200/60 dark:border-surface-800 shadow-sm dark:shadow-none; }
.transition-default { @apply transition-all duration-200 ease-out; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { @apply bg-transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors; }
.custom-emoji-picker { --epr-bg-color: transparent !important; --epr-category-label-bg-color: transparent !important; --epr-text-color: theme("colors.surface.900") !important; --epr-picker-border-color: theme("colors.surface.200") !important;
--epr-search-input-bg-color: theme("colors.surface.50") !important; --epr-search-input-text-color: theme("colors.surface.900") !important;
--epr-hover-bg-color: theme("colors.surface.200") !important; --epr-focus-bg-color: theme("colors.primary.100") !important; --epr-highlight-color: theme("colors.primary.500") !important;
font-family: inherit !important; border: none !important; }
[data-theme="dark"] .custom-emoji-picker { --epr-text-color: theme("colors.white") !important; --epr-picker-border-color: theme("colors.surface.700") !important;
--epr-search-input-bg-color: theme("colors.surface.800") !important; --epr-search-input-text-color: theme("colors.white") !important;
--epr-hover-bg-color: theme("colors.surface.700") !important; --epr-focus-bg-color: theme("colors.primary.900") !important; }
.custom-emoji-picker .epr-search-container input { border-radius: 0.5rem !important; border: 1px solid theme("colors.surface.200") !important; background-color: theme("colors.surface.50") !important; }
[data-theme="dark"] .custom-emoji-picker .epr-search-container input { border: 1px solid theme("colors.surface.700") !important; background-color: theme("colors.surface.800") !important; }
.custom-emoji-picker .epr-header-overlay { padding: 0 !important; }
.custom-emoji-picker .epr-emoji-category-label { position: static !important; background-color: transparent !important; height: 32px !important; line-height: 32px !important; }
.custom-emoji-picker .epr-body::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-emoji-picker .epr-body::-webkit-scrollbar-track { @apply bg-transparent; }
.custom-emoji-picker .epr-body::-webkit-scrollbar-thumb { @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors; }}
@keyframes fadeIn { from { opacity: 0; }
to { opacity: 1; }}
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }}
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }}
::view-transition-old(root),::view-transition-new(root) { animation: none;}