margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
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-white 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 .custom-scrollbar::-webkit-scrollbar {
63 width: 6px;
64 height: 6px;
65 }
66
67 .custom-scrollbar::-webkit-scrollbar-track {
68 @apply bg-transparent;
69 }
70
71 .custom-scrollbar::-webkit-scrollbar-thumb {
72 @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors;
73 }
74
75 .custom-emoji-picker {
76 --epr-bg-color: transparent !important;
77 --epr-category-label-bg-color: transparent !important;
78 --epr-text-color: theme("colors.surface.900") !important;
79 --epr-picker-border-color: theme("colors.surface.200") !important;
80
81 --epr-search-input-bg-color: theme("colors.surface.50") !important;
82 --epr-search-input-text-color: theme("colors.surface.900") !important;
83
84 --epr-hover-bg-color: theme("colors.surface.200") !important;
85 --epr-focus-bg-color: theme("colors.primary.100") !important;
86 --epr-highlight-color: theme("colors.primary.500") !important;
87
88 font-family: inherit !important;
89 border: none !important;
90 }
91
92 [data-theme="dark"] .custom-emoji-picker {
93 --epr-text-color: theme("colors.white") !important;
94 --epr-picker-border-color: theme("colors.surface.700") !important;
95
96 --epr-search-input-bg-color: theme("colors.surface.800") !important;
97 --epr-search-input-text-color: theme("colors.white") !important;
98
99 --epr-hover-bg-color: theme("colors.surface.700") !important;
100 --epr-focus-bg-color: theme("colors.primary.900") !important;
101 }
102
103 .custom-emoji-picker .epr-search-container input {
104 border-radius: 0.5rem !important;
105 border: 1px solid theme("colors.surface.200") !important;
106 background-color: theme("colors.surface.50") !important;
107 }
108
109 [data-theme="dark"] .custom-emoji-picker .epr-search-container input {
110 border: 1px solid theme("colors.surface.700") !important;
111 background-color: theme("colors.surface.800") !important;
112 }
113
114 .custom-emoji-picker .epr-header-overlay {
115 padding: 0 !important;
116 }
117
118 .custom-emoji-picker .epr-emoji-category-label {
119 position: static !important;
120 background-color: transparent !important;
121 height: 32px !important;
122 line-height: 32px !important;
123 }
124
125 .custom-emoji-picker .epr-body::-webkit-scrollbar {
126 width: 6px;
127 height: 6px;
128 }
129
130 .custom-emoji-picker .epr-body::-webkit-scrollbar-track {
131 @apply bg-transparent;
132 }
133
134 .custom-emoji-picker .epr-body::-webkit-scrollbar-thumb {
135 @apply bg-surface-300 dark:bg-surface-700 rounded-full hover:bg-surface-400 dark:hover:bg-surface-600 transition-colors;
136 }
137}
138
139@keyframes fadeIn {
140 from {
141 opacity: 0;
142 }
143
144 to {
145 opacity: 1;
146 }
147}
148
149@keyframes slideUp {
150 from {
151 opacity: 0;
152 transform: translateY(8px);
153 }
154
155 to {
156 opacity: 1;
157 transform: translateY(0);
158 }
159}
160
161@keyframes scaleIn {
162 from {
163 opacity: 0;
164 transform: scale(0.95);
165 }
166
167 to {
168 opacity: 1;
169 transform: scale(1);
170 }
171}