Skip to content

Commit dfd56f6

Browse files
lukewhritlukewhrit
committed
fix(accounts): CSS styling
1 parent 9ef2b8d commit dfd56f6

3 files changed

Lines changed: 141 additions & 135 deletions

File tree

‎internal/server/web/account.html‎

Lines changed: 0 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -21,113 +21,6 @@
2121
<link rel="stylesheet" type="text/css" href="/static/normalize.css">
2222
<link rel="stylesheet" type="text/css" href="/static/global.css">
2323

24-
<style>
25-
.account-section {
26-
padding: 20px 50px;
27-
}
28-
29-
.account-section h2 {
30-
font-size: 1rem;
31-
color: var(--color-prompt);
32-
margin-bottom: 12px;
33-
padding: 0;
34-
text-transform: uppercase;
35-
letter-spacing: 0.05em;
36-
}
37-
38-
.doc-table {
39-
width: 100%;
40-
border-collapse: collapse;
41-
margin-bottom: 20px;
42-
}
43-
44-
.doc-table th,
45-
.doc-table td {
46-
text-align: left;
47-
padding: 6px 10px;
48-
font-size: var(--font-size);
49-
border-bottom: 1px solid #2a2a2a;
50-
}
51-
52-
.doc-table th {
53-
color: var(--color-prompt);
54-
font-weight: normal;
55-
}
56-
57-
.doc-table td a {
58-
color: var(--color-links);
59-
}
60-
61-
.doc-table td a:hover {
62-
color: var(--color-links-dark);
63-
}
64-
65-
.doc-actions {
66-
display: flex;
67-
gap: 8px;
68-
}
69-
70-
.doc-actions form {
71-
display: inline;
72-
background: none;
73-
padding: 0;
74-
gap: 0;
75-
}
76-
77-
.doc-actions button,
78-
.doc-actions a {
79-
padding: 2px 8px;
80-
background-color: var(--color-buttons);
81-
color: var(--color-foreground);
82-
border: none;
83-
cursor: pointer;
84-
font-size: var(--font-size);
85-
text-decoration: none;
86-
}
87-
88-
.doc-actions button:hover,
89-
.doc-actions a:hover {
90-
background-color: color-mix(in oklab, var(--color-buttons), black 10%);
91-
}
92-
93-
.doc-actions .delete-btn {
94-
color: #f97583;
95-
}
96-
97-
.empty-state {
98-
color: var(--color-prompt);
99-
font-size: var(--font-size);
100-
padding: 10px 0;
101-
}
102-
103-
.section-divider {
104-
border: none;
105-
border-top: 1px solid #2a2a2a;
106-
margin: 0 50px;
107-
}
108-
109-
.danger-zone h2 {
110-
color: #f97583;
111-
}
112-
113-
#delete-account-confirm {
114-
display: none;
115-
}
116-
117-
#delete-account-confirm.visible {
118-
display: block;
119-
margin-top: 8px;
120-
}
121-
122-
.preview-content {
123-
color: var(--color-prompt);
124-
max-width: 300px;
125-
overflow: hidden;
126-
text-overflow: ellipsis;
127-
white-space: nowrap;
128-
}
129-
</style>
130-
13124
{{.Analytics}}
13225
</head>
13326

‎internal/server/web/document.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,31 @@
6464
</svg>
6565
</button>
6666

67+
<a href="#qr" class="trigger">
68+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
69+
<rect x="1" y="1" width="22" height="22" rx="3" fill="none" stroke="currentColor" stroke-width="1.5" />
70+
71+
<rect x="3" y="3" width="6" height="6" rx="1" />
72+
<rect x="5" y="5" width="2" height="2" />
73+
74+
<rect x="15" y="3" width="6" height="6" rx="1" />
75+
<rect x="17" y="5" width="2" height="2"/>
76+
77+
<rect x="3" y="15" width="6" height="6" rx="1" />
78+
<rect x="5" y="17" width="2" height="2"/>
79+
80+
<rect x="11" y="3" width="2" height="2" />
81+
<rect x="13" y="7" width="2" height="2" />
82+
<rect x="11" y="11" width="2" height="2" />
83+
<rect x="15" y="11" width="2" height="2" />
84+
<rect x="9" y="13" width="2" height="2" />
85+
<rect x="13" y="15" width="2" height="2" />
86+
<rect x="17" y="15" width="2" height="2" />
87+
<rect x="11" y="19" width="2" height="2" />
88+
<rect x="15" y="19" width="2" height="2" />
89+
</svg>
90+
</a>
91+
6792
{{if eq .AccountsEnabled true}}
6893
<div id="authentication">
6994
{{if eq .Authenticated true }}
@@ -81,6 +106,8 @@
81106
</div>
82107
{{end}}
83108

109+
110+
84111
{{if eq .IsOwner true}}
85112
<a href="/{{.ID}}/edit" aria-label="Edit document">
86113
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
@@ -89,9 +116,10 @@
89116
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
90117
</svg>
91118
</a>
119+
92120
<form method="post" action="/{{.ID}}/delete" style="display:inline" enctype="multipart/form-data"
93-
onsubmit="return confirm('Delete this document?')">
94-
<button aria-label="Delete document" style="color:#f97583">
121+
onsubmit="return confirm('Delete this document?')" id="delete-btn-form">
122+
<button aria-label="Delete document" class="delete-btn" type="submit">
95123
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
96124
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
97125
<polyline points="3 6 5 6 21 6" />
@@ -103,31 +131,6 @@
103131
</button>
104132
</form>
105133
{{end}}
106-
107-
<a href="#qr" class="trigger">
108-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
109-
<rect x="1" y="1" width="22" height="22" rx="3" fill="none" stroke="currentColor" stroke-width="1.5" />
110-
111-
<rect x="3" y="3" width="6" height="6" rx="1" />
112-
<rect x="5" y="5" width="2" height="2" />
113-
114-
<rect x="15" y="3" width="6" height="6" rx="1" />
115-
<rect x="17" y="5" width="2" height="2"/>
116-
117-
<rect x="3" y="15" width="6" height="6" rx="1" />
118-
<rect x="5" y="17" width="2" height="2"/>
119-
120-
<rect x="11" y="3" width="2" height="2" />
121-
<rect x="13" y="7" width="2" height="2" />
122-
<rect x="11" y="11" width="2" height="2" />
123-
<rect x="15" y="11" width="2" height="2" />
124-
<rect x="9" y="13" width="2" height="2" />
125-
<rect x="13" y="15" width="2" height="2" />
126-
<rect x="17" y="15" width="2" height="2" />
127-
<rect x="11" y="19" width="2" height="2" />
128-
<rect x="15" y="19" width="2" height="2" />
129-
</svg>
130-
</a>
131134
</header>
132135

133136
<div id="qr" class="modal">

‎internal/server/web/static/global.css‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,14 +160,19 @@ h1 {
160160
justify-content: center;
161161
}
162162

163-
form:not(#text):not(#signout-btn-form) {
163+
form:not(#text):not(#signout-btn-form):not(#delete-btn-form) {
164164
display: flex;
165165
flex-direction: column;
166166
background-color: var(--color-buttons);
167167
padding: 1rem;
168168
gap: 3px;
169169
}
170170

171+
.delete-btn {
172+
color: #f97583;
173+
padding: 1px;
174+
}
175+
171176
.btn-group {
172177
display: flex;
173178
max-width: fit-content;
@@ -281,3 +286,108 @@ input[type=submit] {
281286
/* responsive */
282287
height: auto;
283288
}
289+
290+
.account-section {
291+
padding: 20px 50px;
292+
}
293+
294+
.account-section h2 {
295+
font-size: 1rem;
296+
color: var(--color-prompt);
297+
margin-bottom: 12px;
298+
padding: 0;
299+
text-transform: uppercase;
300+
letter-spacing: 0.05em;
301+
}
302+
303+
.doc-table {
304+
width: 100%;
305+
border-collapse: collapse;
306+
margin-bottom: 20px;
307+
}
308+
309+
.doc-table th,
310+
.doc-table td {
311+
text-align: left;
312+
padding: 6px 10px;
313+
font-size: var(--font-size);
314+
border-bottom: 1px solid #2a2a2a;
315+
}
316+
317+
.doc-table th {
318+
color: var(--color-prompt);
319+
font-weight: normal;
320+
}
321+
322+
.doc-table td a {
323+
color: var(--color-links);
324+
}
325+
326+
.doc-table td a:hover {
327+
color: var(--color-links-dark);
328+
}
329+
330+
.doc-actions {
331+
display: flex;
332+
gap: 8px;
333+
}
334+
335+
.doc-actions form {
336+
display: inline;
337+
background: none;
338+
padding: 0 !important;
339+
gap: 0;
340+
}
341+
342+
.doc-actions button,
343+
.doc-actions a {
344+
padding: 4px 16px;
345+
background-color: var(--color-buttons);
346+
color: var(--color-foreground);
347+
border: none;
348+
cursor: pointer;
349+
font-size: var(--font-size);
350+
text-decoration: none;
351+
}
352+
353+
.doc-actions button:hover,
354+
.doc-actions a:hover {
355+
background-color: color-mix(in oklab, var(--color-buttons), black 10%);
356+
}
357+
358+
.doc-actions .delete-btn {
359+
color: #f97583;
360+
}
361+
362+
.empty-state {
363+
color: var(--color-prompt);
364+
font-size: var(--font-size);
365+
padding: 10px 0;
366+
}
367+
368+
.section-divider {
369+
border: none;
370+
border-top: 1px solid #2a2a2a;
371+
margin: 0 50px;
372+
}
373+
374+
.danger-zone h2 {
375+
color: #f97583;
376+
}
377+
378+
#delete-account-confirm {
379+
display: none;
380+
}
381+
382+
#delete-account-confirm.visible {
383+
display: block;
384+
margin-top: 8px;
385+
}
386+
387+
.preview-content {
388+
color: var(--color-prompt);
389+
max-width: 300px;
390+
overflow: hidden;
391+
text-overflow: ellipsis;
392+
white-space: nowrap;
393+
}

0 commit comments

Comments
 (0)