A calm place to write long-form, and publish it to the open social web.
skypress.blog/
Style the writing-first sign-in panel and publish stepper
The SignInPanel's inner elements were unstyled (default input + grey
buttons), and the panel/menu cards used rgba()/Canvas colours that wash
out on the dark canvas. Mirror the editor's LoginForm (login.css) — display
title, muted lede, framed input, sun primary button, outline cancel, accent
signup link — and reframe the cards + account-pill menu on the paper-raised
surface with token borders/shadow so they read in light and dark.
author
Jeremy Herve
date
(Jun 17, 2026, 12:13 PM +0200)
commit
288de7b5
288de7b58e10d8cf5d855ba70e13ae129e5a7162
parent
6e107f4f
6e107f4f6fcc393cf487261c8769605c9bc867a5
+81
-10
+81
-10
src/styles/write-chrome.css
+81
-10
src/styles/write-chrome.css
···
59
59
width: 28px;
60
60
height: 28px;
61
61
border-radius: 999px;
62
-
background: rgba( 0, 0, 0, 0.1 );
62
+
background: var(--sun-tint);
63
+
color: var(--sun);
64
+
font-weight: 700;
65
+
font-size: 0.85rem;
63
66
}
64
67
65
68
.account-pill__menu {
···
69
72
min-width: 12rem;
70
73
display: flex;
71
74
flex-direction: column;
72
-
background: Canvas;
73
-
border: 1px solid rgba( 0, 0, 0, 0.15 );
75
+
background: var(--paper-raised);
76
+
border: 1px solid var(--line-strong);
74
77
border-radius: 0.5rem;
75
-
box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
78
+
box-shadow: var(--shadow);
76
79
overflow: hidden;
80
+
z-index: 5;
77
81
}
78
82
79
83
.account-pill__item {
···
88
92
}
89
93
90
94
.account-pill__item:hover {
91
-
background: rgba( 0, 0, 0, 0.06 );
95
+
background: var(--panel);
92
96
}
93
97
98
+
/* Sign-in panel + publish stepper: framed cards in the centred column. Use the paper-raised
99
+
surface + token border so they read correctly in light and dark (not a near-invisible
100
+
rgba hairline on the dark canvas). */
94
101
.write-signin,
95
102
.writeflow {
96
103
max-width: 32rem;
97
104
margin: 1rem auto;
98
-
padding: 1rem 1.25rem;
99
-
border: 1px solid rgba( 0, 0, 0, 0.15 );
100
-
border-radius: 0.75rem;
105
+
padding: 1.25rem 1.5rem;
106
+
background: var(--paper-raised);
107
+
border: 1px solid var(--line-strong);
108
+
border-radius: var(--radius);
109
+
box-shadow: var(--shadow);
110
+
}
111
+
112
+
/* Sign-in panel — mirrors the editor's LoginForm (login.css) so signing in looks the same
113
+
wherever a signed-out writer meets it. */
114
+
.signin-panel__title {
115
+
font-family: var(--font-display);
116
+
font-size: 1.5rem;
117
+
margin: 0 0 0.4rem;
118
+
color: var(--ink);
119
+
}
120
+
.signin-panel__lede {
121
+
color: var(--muted);
122
+
margin: 0 0 1.25rem;
123
+
font-size: 0.95rem;
124
+
}
125
+
.signin-panel__label {
126
+
display: block;
127
+
font-size: 0.85rem;
128
+
font-weight: 600;
129
+
margin-bottom: 0.35rem;
130
+
color: var(--ink);
131
+
}
132
+
.signin-panel__input {
133
+
width: 100%;
134
+
box-sizing: border-box;
135
+
padding: 0.6rem 0.7rem;
136
+
border: 1px solid var(--line-strong);
137
+
border-radius: 8px;
138
+
background: var(--paper);
139
+
color: var(--ink);
140
+
font: inherit;
141
+
}
142
+
.signin-panel__submit {
143
+
padding: 0.6rem 1.1rem;
144
+
border: 0;
145
+
border-radius: 8px;
146
+
background: var(--sun);
147
+
color: #fff;
148
+
font: inherit;
149
+
font-weight: 600;
150
+
cursor: pointer;
151
+
}
152
+
.signin-panel__cancel {
153
+
padding: 0.6rem 1rem;
154
+
border: 1px solid var(--line-strong);
155
+
background: var(--paper-raised);
156
+
border-radius: 8px;
157
+
color: inherit;
158
+
font: inherit;
159
+
cursor: pointer;
160
+
}
161
+
.signin-panel__signup {
162
+
margin: 1rem 0 0;
163
+
font-size: 0.85rem;
164
+
color: var(--muted);
165
+
}
166
+
.signin-panel__signup a {
167
+
color: var(--sun);
168
+
font-weight: 600;
101
169
}
102
170
103
171
.signin-panel__actions,
104
172
.writeflow__actions {
105
173
display: flex;
106
174
gap: 0.75rem;
107
-
margin-top: 0.75rem;
175
+
margin-top: 1rem;
108
176
}
109
177
110
178
.writeflow__warning {
111
179
font-size: 0.95rem;
180
+
margin: 0 0 0.75rem;
112
181
}
113
182
114
183
.writeflow__count,
115
184
.writeflow__error,
116
185
.signin-panel__error {
117
-
color: #b3261e;
186
+
color: var(--ember);
187
+
font-size: 0.9rem;
188
+
margin: 0.75rem 0 0;
118
189
}