this repo has no description
Fix layout regression in Settings sheet
My laziness in separating the styles between Settings and Accounts sheets bit back
+67
-28
+56
src/pages/accounts.css
+56
src/pages/accounts.css
···
1
+
#accounts-container {
2
+
background-color: var(--bg-faded-color);
3
+
}
4
+
5
+
#accounts-container section {
6
+
background-color: var(--bg-color);
7
+
margin: 8px 0 0;
8
+
padding: 8px 16px;
9
+
border-top: var(--hairline-width) solid var(--outline-color);
10
+
border-bottom: var(--hairline-width) solid var(--outline-color);
11
+
border-radius: 8px;
12
+
}
13
+
#accounts-container section ul > li:last-child {
14
+
border-bottom: none;
15
+
}
16
+
17
+
#accounts-container section > ul {
18
+
margin: 0;
19
+
padding: 0;
20
+
list-style: none;
21
+
}
22
+
#accounts-container section > ul > li {
23
+
padding: 8px 0;
24
+
display: flex;
25
+
justify-content: space-between;
26
+
align-items: center;
27
+
border-bottom: var(--hairline-width) solid var(--outline-color);
28
+
}
29
+
30
+
#accounts-container section > ul > li .current {
31
+
margin-right: 8px;
32
+
color: var(--green-color);
33
+
opacity: 0.1;
34
+
}
35
+
#accounts-container section > ul > li .current.is-current {
36
+
opacity: 1;
37
+
}
38
+
#accounts-container section > ul > li .current.is-current + .avatar {
39
+
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
40
+
}
41
+
#accounts-container section > ul > li .avatar + .name-text {
42
+
vertical-align: middle;
43
+
}
44
+
#accounts-container section > ul > li > div.actions {
45
+
flex-basis: fit-content;
46
+
margin-top: 8px;
47
+
}
48
+
49
+
#accounts-container .avatar {
50
+
margin-right: 8px;
51
+
}
52
+
53
+
#accounts-container .accounts-list li div {
54
+
display: flex;
55
+
align-items: center;
56
+
}
+2
-2
src/pages/accounts.jsx
+2
-2
src/pages/accounts.jsx
···
1
-
import './settings.css';
1
+
import './accounts.css';
2
2
3
3
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
4
4
import { useReducer, useState } from 'preact/hooks';
···
22
22
const [_, reload] = useReducer((x) => x + 1, 0);
23
23
24
24
return (
25
-
<div id="settings-container" class="sheet" tabIndex="-1">
25
+
<div id="accounts-container" class="sheet" tabIndex="-1">
26
26
{!!onClose && (
27
27
<button type="button" class="sheet-close" onClick={onClose}>
28
28
<Icon icon="x" />
+9
-26
src/pages/settings.css
+9
-26
src/pages/settings.css
···
31
31
display: flex;
32
32
justify-content: space-between;
33
33
align-items: center;
34
-
/* flex-wrap: wrap; */
34
+
flex-wrap: wrap;
35
35
border-bottom: var(--hairline-width) solid var(--outline-color);
36
36
}
37
-
#settings-container section > ul > li .current {
38
-
margin-right: 8px;
39
-
color: var(--green-color);
40
-
opacity: 0.1;
41
-
}
42
-
#settings-container section > ul > li .current.is-current {
43
-
opacity: 1;
44
-
}
45
-
#settings-container section > ul > li .current.is-current + .avatar {
46
-
box-shadow: 0 0 0 1.5px var(--green-color), 0 0 8px var(--green-color);
47
-
}
48
-
#settings-container section > ul > li .avatar + .name-text {
49
-
vertical-align: middle;
50
-
}
51
-
#settings-container section > ul > li > div {
52
-
display: flex;
53
-
align-items: center;
54
-
}
55
-
#settings-container section > ul > li > div.actions {
56
-
flex-basis: fit-content;
57
-
margin-top: 8px;
58
-
}
59
37
#settings-container section > ul > li > div:last-child {
60
38
text-align: right;
61
39
}
···
67
45
#settings-container section > ul > li .sub-section p {
68
46
margin-block: 0.5em;
69
47
}
48
+
#settings-container section > ul > li .sub-section ul {
49
+
margin: 0;
50
+
padding: 0;
51
+
list-style: none;
52
+
}
53
+
#settings-container section > ul > li .sub-section ul li {
54
+
line-height: 1.6;
55
+
}
70
56
#settings-container section > ul > li .sub-section p:last-child {
71
57
margin-block-end: 0;
72
58
}
73
59
#settings-container div {
74
60
vertical-align: middle;
75
-
}
76
-
#settings-container .avatar {
77
-
margin-right: 8px;
78
61
}
79
62
80
63
#settings-container section select {