(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5@layer base {
6 html {
7 font-family: "Inter", system-ui, sans-serif;
8 -webkit-font-smoothing: antialiased;
9 -moz-osx-font-smoothing: grayscale;
10 }
11
12 html {
13 background-color: #f4f4f5;
14 color: #18181b;
15 }
16
17 html[data-theme="dark"] {
18 background-color: #18181b;
19 color: #fafafa;
20 }
21
22 h1,
23 h2,
24 h3,
25 h4,
26 h5,
27 h6 {
28 font-family: "Outfit", sans-serif;
29 letter-spacing: -0.02em;
30 }
31}
32
33@layer utilities {
34 .animate-fade-in {
35 animation: fadeIn 0.3s ease-out;
36 }
37
38 .animate-slide-up {
39 animation: slideUp 0.3s ease-out;
40 }
41
42 .animate-scale-in {
43 animation: scaleIn 0.2s ease-out;
44 }
45
46 .focus-ring {
47 @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;
48 }
49
50 .glass {
51 @apply bg-white/80 dark:bg-surface-900/80 backdrop-blur-xl;
52 }
53
54 .card {
55 @apply bg-surface-100 dark:bg-surface-900 rounded-xl border border-surface-200/60 dark:border-surface-800 shadow-sm dark:shadow-none;
56 }
57
58 .transition-default {
59 @apply transition-all duration-200 ease-out;
60 }
61
62 .no-scrollbar {
63 scrollbar-width: none;
64 -ms-overflow-style: none;
65 }
66
67 .no-scrollbar::-webkit-scrollbar {
68 display: none;
69 }
70
71 .custom-scrollbar::-webkit-scrollbar {
72 width: 6px;
73 height: 6px;
74 }
75
76 .custom-scrollbar::-webkit-scrollbar-track {
77 @apply bg-transparent;
78 }
79
80 .custom-scrollbar::-webkit-scrollbar-thumb {
81 @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors;
82 }
83
84 .custom-emoji-picker {
85 --epr-bg-color: transparent !important;
86 --epr-category-label-bg-color: transparent !important;
87 --epr-text-color: theme("colors.surface.900") !important;
88 --epr-picker-border-color: theme("colors.surface.200") !important;
89
90 --epr-search-input-bg-color: theme("colors.surface.50") !important;
91 --epr-search-input-text-color: theme("colors.surface.900") !important;
92
93 --epr-hover-bg-color: theme("colors.surface.200") !important;
94 --epr-focus-bg-color: theme("colors.primary.100") !important;
95 --epr-highlight-color: theme("colors.primary.500") !important;
96
97 font-family: inherit !important;
98 border: none !important;
99 }
100
101 [data-theme="dark"] .custom-emoji-picker {
102 --epr-text-color: theme("colors.white") !important;
103 --epr-picker-border-color: theme("colors.surface.700") !important;
104
105 --epr-search-input-bg-color: theme("colors.surface.800") !important;
106 --epr-search-input-text-color: theme("colors.white") !important;
107
108 --epr-hover-bg-color: theme("colors.surface.700") !important;
109 --epr-focus-bg-color: theme("colors.primary.900") !important;
110 }
111
112 .custom-emoji-picker .epr-search-container input {
113 border-radius: 0.5rem !important;
114 border: 1px solid theme("colors.surface.200") !important;
115 background-color: theme("colors.surface.50") !important;
116 }
117
118 [data-theme="dark"] .custom-emoji-picker .epr-search-container input {
119 border: 1px solid theme("colors.surface.700") !important;
120 background-color: theme("colors.surface.800") !important;
121 }
122
123 .custom-emoji-picker .epr-header-overlay {
124 padding: 0 !important;
125 }
126
127 .custom-emoji-picker .epr-emoji-category-label {
128 position: static !important;
129 background-color: transparent !important;
130 height: 32px !important;
131 line-height: 32px !important;
132 }
133
134 .custom-emoji-picker .epr-body::-webkit-scrollbar {
135 width: 6px;
136 height: 6px;
137 }
138
139 .custom-emoji-picker .epr-body::-webkit-scrollbar-track {
140 @apply bg-transparent;
141 }
142
143 .custom-emoji-picker .epr-body::-webkit-scrollbar-thumb {
144 @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors;
145 }
146}
147
148@keyframes fadeIn {
149 from {
150 opacity: 0;
151 }
152
153 to {
154 opacity: 1;
155 }
156}
157
158@keyframes slideUp {
159 from {
160 opacity: 0;
161 transform: translateY(8px);
162 }
163
164 to {
165 opacity: 1;
166 transform: translateY(0);
167 }
168}
169
170@keyframes scaleIn {
171 from {
172 opacity: 0;
173 transform: scale(0.95);
174 }
175
176 to {
177 opacity: 1;
178 transform: scale(1);
179 }
180}
181
182::view-transition-old(root),
183::view-transition-new(root) {
184 animation: none;
185}