blob: 5e0785677fbf25e3f6c6d2daef262b6c85db4624 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
:host {
--list-background-color: lightgray;
list-style-type: none;
border: 2px solid #000;
display: block;
border-radius: 5px;
}
div {
border: 2px solid #000;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
ul {
list-style-type: none;
padding-inline-start: 0px;
}
li {
background-color: var(--list-background-color);
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
font-weight: bold;
border: 2px solid #000;
border-radius: 5px;
margin: 5px;
> button {
background-color: transparent;
width: 88%;
transition: all 0.3s ease;
font-weight: bold;
border: none;
border-radius: 5px;
padding-left: 1.5%;
> section {
width: 100%;
flex: none;
display: inline-block;
background-color: magenta;
> progress {
width: 25%;
float: none;
}
}
}
> section {
width: 12%;
}
}
section button{
margin: 4%;
}
li > button span {
font-style: italic;
font-weight: normal;
}
li > button:hover p {
text-decoration: underline;
}
.icon {
width: 18px;
margin: 3px -3px -1px -3px;
}
#search-container {
background-color: #d9d9d9;
#search-form {
background-color: light-dark(#d9d9d9, #1b1b1b);
padding: 10px 20px 20px 20px;
border: 2px solid #000;
border-radius: 5px;
.wide-input {
width: 60%;
}
border-radius: 5px;
visibility: visible;
}
|
