atproto blogging
nonbinary.computer
1.drafts-page {
2 max-width: 800px;
3 margin: 0 auto;
4 padding: 2rem;
5}
6
7.drafts-header {
8 display: flex;
9 justify-content: space-between;
10 align-items: center;
11 margin-bottom: 2rem;
12}
13
14.drafts-header h1 {
15 margin: 0;
16}
17
18.drafts-empty {
19 text-align: center;
20 padding: 4rem 2rem;
21 color: var(--color-subtle);
22}
23
24.drafts-list {
25 display: flex;
26 flex-direction: column;
27 gap: 0.5rem;
28}
29
30.draft-card {
31 display: flex;
32 align-items: center;
33 gap: 1rem;
34 padding: 1rem;
35 background: var(--color-surface);
36 border: 1px solid var(--color-border);
37 border-radius: 0;
38 transition: border-color 0.15s ease;
39}
40
41.draft-card:hover {
42 border-color: var(--color-primary);
43}
44
45.draft-card-link {
46 flex: 1;
47 text-decoration: none;
48 color: inherit;
49}
50
51.draft-card-content {
52 display: flex;
53 align-items: center;
54 gap: 1rem;
55}
56
57.draft-title {
58 margin: 0;
59 font-size: 1rem;
60 font-weight: 500;
61}
62
63.draft-badges {
64 display: flex;
65 gap: 0.5rem;
66 flex-wrap: wrap;
67}
68
69.draft-badge {
70 font-size: 0.75rem;
71 padding: 0.125rem 0.5rem;
72 border-radius: 4px;
73 font-weight: 500;
74}
75
76.draft-badge-new {
77 background: var(--color-surface);
78 color: var(--color-secondary);
79 border: 1px solid var(--color-secondary);
80}
81
82.draft-badge-edit {
83 background: var(--color-surface);
84 color: var(--color-subtle);
85 border: 1px solid var(--color-border);
86}
87
88.draft-badge-synced {
89 background: var(--color-surface);
90 color: var(--color-success);
91 border: 1px solid var(--color-success);
92}
93
94.draft-badge-local {
95 background: var(--color-surface);
96 color: var(--color-warning);
97 border: 1px solid var(--color-warning);
98}
99
100.draft-badge-remote {
101 background: var(--color-surface);
102 color: var(--color-primary);
103 border: 1px solid var(--color-primary);
104}
105
106/* Mobile adjustments */
107@media (max-width: 600px) {
108 .drafts-page {
109 padding: 1rem;
110 }
111
112 .drafts-header {
113 flex-direction: column;
114 align-items: flex-start;
115 gap: 1rem;
116 }
117
118 .draft-card {
119 padding: 0.75rem;
120 }
121
122 .draft-card-content {
123 flex-direction: column;
124 align-items: flex-start;
125 gap: 0.5rem;
126 }
127}