grain.social is a photo sharing platform built on atproto.
grain.social
1@import "tailwindcss";
2
3/* use to test light mode */
4/* @custom-variant dark (&:where(.dark, .dark *)); */
5
6@font-face {
7 font-family: "Jersey 20";
8 src: url("/build/fonts/Jersey20-Regular.ttf") format("truetype");
9 font-weight: normal;
10 font-style: normal;
11 font-display: swap;
12}
13
14:root {
15 --focus-ring-light: var(--color-zinc-200);
16 --focus-ring-dark: var(--color-zinc-500);
17 --btn-border-radius: var(--radius-sm);
18 --input-border-radius: var(--radius-sm);
19}
20
21@layer base {
22 :focus-visible {
23 outline: none;
24 box-shadow: 0 0 0 2px var(--focus-ring-light);
25 border-radius: var(--radius-sm);
26 }
27}
28
29@media (prefers-color-scheme: dark) {
30 :focus-visible {
31 box-shadow: 0 0 0 2px var(--focus-ring-dark);
32 }
33}
34
35@layer components {
36 .grain-label {
37 display: block;
38 margin-bottom: --spacing(2);
39 }
40
41 .grain-input {
42 border: 1px solid var(--color-zinc-100);
43 padding-inline: --spacing(3);
44 padding-block: --spacing(2);
45 width: 100%;
46 background-color: var(--color-zinc-100);
47 color: var(--color-zinc-900);
48 font-size: var(--font-size-base);
49 line-height: var(--line-height-normal);
50 border-radius: var(--input-border-radius);
51 box-shadow: none;
52 outline: none;
53 }
54
55 .grain-input::placeholder {
56 color: var(--color-zinc-400);
57 }
58
59 .grain-input:disabled {
60 background-color: var(--color-zinc-100);
61 cursor: not-allowed;
62 opacity: 0.7;
63 }
64
65 .grain-input.grain-input-error {
66 border-color: var(--color-red-500);
67 }
68
69 @media (prefers-color-scheme: dark) {
70 .grain-input {
71 background-color: var(--color-zinc-800);
72 color: var(--color-zinc-50);
73 border-color: var(--color-zinc-800);
74 }
75 }
76
77 .grain-btn {
78 display: inline-block;
79 padding-inline: --spacing(3);
80 padding-block: --spacing(1.5);
81 font-size: var(--font-size-base);
82 font-weight: 500;
83 line-height: var(--line-height-normal);
84 text-align: center;
85 cursor: pointer;
86 border-radius: var(--btn-border-radius);
87 box-shadow: none;
88 outline: none;
89
90 &.grain-btn-primary {
91 background-color: var(--color-sky-500);
92 color: var(--color-white);
93 border: 1px solid var(--color-sky-500);
94 }
95
96 &.grain-btn-secondary {
97 background-color: var(--color-zinc-100);
98 color: var(--color-zinc-800);
99 border: 1px solid var(--color-zinc-100);
100 }
101
102 @media (prefers-color-scheme: dark) {
103 &.grain-btn-secondary {
104 background-color: var(--color-zinc-800);
105 color: var(--color-zinc-100);
106 border: 1px solid var(--color-zinc-800);
107 }
108 }
109
110 &.grain-btn-ghost {
111 background-color: transparent;
112 border: 1px solid transparent;
113 }
114
115 &.grain-btn-destructive {
116 background-color: var(--color-red-500);
117 color: var(--color-white);
118 border: 1px solid var(--color-red-500);
119 }
120
121 &.grain-btn-tab {
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 min-width: 120px;
126 padding-inline: --spacing(3);
127 padding-block: --spacing(2);
128 cursor: pointer;
129 font-weight: var(--font-weight-semibold);
130 text-align: center;
131
132 &[aria-selected="true"] {
133 background-color: var(--color-zinc-100);
134 font-weight: 600;
135 }
136
137 @media (prefers-color-scheme: dark) {
138 &[aria-selected="true"] {
139 background-color: var(--color-zinc-800);
140 }
141 }
142 }
143 }
144
145 .grain-input:focus-visible,
146 .grain-btn:focus-visible {
147 box-shadow: 0 0 0 2px var(--focus-ring-light);
148 }
149
150 @media (prefers-color-scheme: dark) {
151 .grain-input:focus-visible,
152 .grain-btn:focus-visible {
153 box-shadow: 0 0 0 2px var(--focus-ring-dark);
154 }
155 }
156
157 body[data-scroll-locked] {
158 overflow: hidden !important;
159 overscroll-behavior: contain;
160 position: relative !important;
161 padding-left: 0px;
162 padding-top: 0px;
163 padding-right: 0px;
164 margin-left: 0;
165 margin-top: 0;
166 margin-right: 0px !important;
167 }
168
169 .grain-scroll-area {
170 overflow-y: auto;
171 scrollbar-gutter: stable;
172 scrollbar-width: thin; /* Firefox */
173 }
174
175 .grain-scroll-area::-webkit-scrollbar {
176 width: 8px; /* Chrome/Safari */
177 }
178
179 .grain-scroll-area::-webkit-scrollbar-thumb {
180 background: rgba(100, 100, 100, 0.4);
181 border-radius: 4px;
182 }
183}