|
1
|
1 * {
|
|
|
2 box-sizing: border-box;
|
|
|
3 }
|
|
|
4
|
|
|
5 body {
|
|
|
6 font-family: Sans-Serif;
|
|
|
7 }
|
|
|
8
|
|
|
9 a {
|
|
|
10 text-decoration: none;
|
|
|
11 }
|
|
|
12 a:hover {
|
|
|
13 text-decoration: underline;
|
|
|
14 }
|
|
2
|
15
|
|
9
|
16 [onclick] {
|
|
|
17 cursor: pointer;
|
|
|
18 }
|
|
|
19
|
|
|
20 [pulldown] {
|
|
|
21 position: relative;
|
|
|
22 }
|
|
|
23 [pulldown_menu] {
|
|
11
|
24 display: none; /* set to flex */
|
|
|
25 flex-direction: column;
|
|
9
|
26 z-index: 20;
|
|
|
27 position: absolute;
|
|
|
28 top: 40px;
|
|
|
29 border: 1px solid #DDDDDD;
|
|
|
30 text-align: left;
|
|
|
31 background-color: #ffffff;
|
|
11
|
32 white-space: nowrap;
|
|
9
|
33 }
|
|
|
34
|
|
2
|
35 div[header] {
|
|
|
36 display: flex;
|
|
|
37 justify-content: space-between;
|
|
|
38 align-items: center;
|
|
|
39 }
|
|
8
|
40
|
|
|
41 div[header] img {
|
|
|
42 width: 50px;
|
|
|
43 height: 50px;
|
|
|
44 object-fit: cover;
|
|
|
45 border-radius: 50%;
|
|
|
46 }
|
|
9
|
47
|
|
|
48 div[header] [pulldown_menu] {
|
|
|
49 right: 0;
|
|
|
50 margin-top: 20px;
|
|
|
51 }
|
