Skip to content

Commit 6daa120

Browse files
vanadium23claude
vanadium23
and
claude
committed
fix(css): fix toolbar alignment in Firefox
Use calc(var(--line-height) * 1em) instead of unitless line-height for consistent height across browsers. Add font: inherit and justify-content: center for proper vertical alignment. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 00d2378 commit 6daa120

2 files changed

Lines changed: 110 additions & 1 deletion

File tree

‎docker-compose.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ services:
33
postgres:
44
image: postgres
55
volumes:
6-
- pg-data:/var/lib/postgresql/data
6+
- pg-data:/var/lib/postgresql
77
environment:
88
POSTGRES_USER: 'user'
99
POSTGRES_PASSWORD: 'pass'

‎web/static/static.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,112 @@
4444
flex-grow: 1;
4545
margin-top: 0;
4646
}
47+
48+
/* Books toolbar - brutalist style */
49+
.books-toolbar {
50+
border: var(--border-thickness) solid var(--text-color);
51+
display: flex;
52+
width: 100%;
53+
margin-bottom: var(--line-height);
54+
}
55+
56+
/* Search form - fills remaining space */
57+
.search-form {
58+
display: flex;
59+
flex: 1;
60+
border-right: var(--border-thickness) solid var(--text-color);
61+
margin: 0;
62+
}
63+
64+
.search-form input[type="text"] {
65+
flex: 1;
66+
border: none;
67+
background: var(--background-color);
68+
color: var(--text-color);
69+
margin: 0;
70+
outline: none;
71+
min-width: 0;
72+
height: calc(var(--line-height) * 1em);
73+
padding: 0 1ch;
74+
box-sizing: border-box;
75+
font: inherit;
76+
}
77+
78+
.search-form button {
79+
border: none;
80+
border-left: var(--border-thickness) solid var(--text-color);
81+
background: var(--background-color);
82+
color: var(--text-color);
83+
cursor: pointer;
84+
margin: 0;
85+
white-space: nowrap;
86+
height: calc(var(--line-height) * 1em);
87+
padding: 0 1ch;
88+
box-sizing: border-box;
89+
font: inherit;
90+
}
91+
92+
.search-form button:hover {
93+
background: var(--background-color-alt);
94+
}
95+
96+
.search-form button:active {
97+
transform: translate(2px, 2px);
98+
}
99+
100+
/* Clear search button */
101+
.button-clear {
102+
border: none;
103+
border-left: var(--border-thickness) solid var(--text-color);
104+
background: var(--background-color);
105+
color: var(--text-color);
106+
text-decoration: none;
107+
cursor: pointer;
108+
white-space: nowrap;
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
height: calc(var(--line-height) * 1em);
113+
padding: 0 1ch;
114+
box-sizing: border-box;
115+
font: inherit;
116+
}
117+
118+
.button-clear:hover {
119+
background: var(--background-color-alt);
120+
}
121+
122+
/* Upload form */
123+
.upload-form {
124+
display: flex;
125+
flex-shrink: 0;
126+
margin: 0;
127+
}
128+
129+
.upload-label {
130+
display: flex;
131+
align-items: center;
132+
justify-content: center;
133+
border: none;
134+
background: var(--background-color);
135+
color: var(--text-color);
136+
cursor: pointer;
137+
margin: 0;
138+
white-space: nowrap;
139+
height: calc(var(--line-height) * 1em);
140+
padding: 0 1ch;
141+
box-sizing: border-box;
142+
font: inherit;
143+
}
144+
145+
.upload-label:hover {
146+
background: var(--background-color-alt);
147+
}
148+
149+
.upload-label:active {
150+
transform: translate(2px, 2px);
151+
}
152+
153+
.upload-label input[type="file"] {
154+
display: none;
155+
}

0 commit comments

Comments
 (0)