burrito.space
experiments in a post-browser web
burrito.tngl.sh
1/* Import theme variables */
2@import url('peek://theme/variables.css');
3
4* {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10html {
11 font-family: var(--theme-font-sans);
12 -webkit-font-smoothing: antialiased;
13 font-size: 14px;
14 line-height: 1.5;
15}
16
17body {
18 background: var(--base00);
19 color: var(--base05);
20 min-height: 100vh;
21}
22
23/* Sheet header */
24.sheet-header {
25 display: flex;
26 align-items: center;
27 justify-content: space-between;
28 padding: 16px 24px;
29}
30
31.sheet-title {
32 font-size: 18px;
33 font-weight: 600;
34 color: var(--base05);
35}
36
37.sheet-actions {
38 display: flex;
39 gap: 8px;
40}
41
42/* Buttons */
43.btn {
44 padding: 6px 14px;
45 border: 1px solid var(--base02);
46 border-radius: 6px;
47 background: var(--base01);
48 color: var(--base05);
49 font-size: 13px;
50 cursor: pointer;
51 font-family: inherit;
52}
53
54.btn:hover {
55 background: var(--base02);
56}
57
58.btn-edit.active {
59 background: var(--base0D);
60 color: var(--base00);
61 border-color: var(--base0D);
62}
63
64/* Cards container */
65.cards {
66 padding: 0 24px 24px 24px;
67}
68
69/* Card styling */
70peek-card {
71 --peek-card-bg: var(--base01);
72 --peek-card-hover-bg: var(--base02);
73 --peek-card-border: var(--base02);
74 --peek-card-radius: 8px;
75 --peek-card-padding: 0;
76 --peek-card-gap: 0;
77 overflow: hidden;
78}
79
80/* Card header in edit mode */
81.card-header {
82 display: flex;
83 align-items: center;
84 justify-content: space-between;
85 padding: 4px 8px;
86 background: var(--base01);
87 border-bottom: 1px solid var(--base02);
88 min-height: 28px;
89}
90
91.card-header-title {
92 font-size: 11px;
93 color: var(--base04);
94 white-space: nowrap;
95 overflow: hidden;
96 text-overflow: ellipsis;
97 flex: 1;
98 min-width: 0;
99}
100
101.card-remove-btn {
102 display: none;
103 width: 20px;
104 height: 20px;
105 border: none;
106 border-radius: 4px;
107 background: transparent;
108 color: var(--base04);
109 cursor: pointer;
110 font-size: 14px;
111 line-height: 1;
112 flex-shrink: 0;
113 padding: 0;
114 text-align: center;
115}
116
117.card-remove-btn:hover {
118 background: var(--base08);
119 color: var(--base00);
120}
121
122/* Show remove button in edit mode */
123body.editing .card-remove-btn {
124 display: block;
125}
126
127/* Webview inside card */
128.card-webview {
129 width: 100%;
130 height: calc(100% - 28px);
131 border: none;
132}
133
134/* Disable webview interaction in edit mode */
135body.editing .card-webview {
136 pointer-events: none;
137}
138
139/* Add dialog */
140.add-dialog {
141 position: fixed;
142 inset: 0;
143 z-index: 1000;
144}
145
146.add-dialog-backdrop {
147 position: absolute;
148 inset: 0;
149 background: rgba(0, 0, 0, 0.5);
150}
151
152.add-dialog-content {
153 position: absolute;
154 top: 50%;
155 left: 50%;
156 transform: translate(-50%, -50%);
157 background: var(--base01);
158 border: 1px solid var(--base02);
159 border-radius: 12px;
160 padding: 24px;
161 min-width: 400px;
162}
163
164.add-dialog-content h2 {
165 font-size: 16px;
166 font-weight: 600;
167 margin-bottom: 16px;
168 color: var(--base05);
169}
170
171.add-dialog-input {
172 width: 100%;
173 padding: 8px 12px;
174 border: 1px solid var(--base02);
175 border-radius: 6px;
176 background: var(--base00);
177 color: var(--base05);
178 font-size: 14px;
179 font-family: inherit;
180 margin-bottom: 16px;
181}
182
183.add-dialog-input:focus {
184 outline: none;
185 border-color: var(--base0D);
186}
187
188.add-dialog-buttons {
189 display: flex;
190 justify-content: flex-end;
191 gap: 8px;
192}
193
194/* Empty state */
195.empty-state {
196 text-align: center;
197 padding: 48px 24px;
198 color: var(--base03);
199 font-size: 15px;
200}