-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
108 lines (87 loc) · 2.51 KB
/
style.css
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.form-wrapper{
display: flex;
align-items: center;
margin: auto;
}
.form-container{
display: flex;
align-items: center;
flex-direction: column;
margin: auto;
background: rgba(100, 100, 100, 0.15);
padding: 10px 0;
}
.rating-label{
text-align: center;
}
.rating{
background: rgba(100, 100, 100, 0.15);
}
label{
padding-top: 20px;
}
#library-wrapper{
display: flex;
flex-direction: column;
width: 70%;
margin: auto;
justify-content: space-between;
}
.book-card{
padding: 10px 0;
}
.rating {
--dir: right;
--fill: gold;
--fillbg: rgba(100, 100, 100, 0.15);
--heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
--star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
--stars: 5;
--starsize: 3rem;
--symbol: var(--star);
--value: 1;
--w: calc(var(--stars) * var(--starsize));
--x: calc(100% * (var(--value) / var(--stars)));
block-size: var(--starsize);
inline-size: var(--w);
position: relative;
touch-action: manipulation;
-webkit-appearance: none;
}
[dir="rtl"] .rating {
--dir: left;
}
.rating::-moz-range-track {
background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
block-size: 100%;
mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-webkit-slider-runnable-track {
background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
block-size: 100%;
mask: repeat left center/var(--starsize) var(--symbol);
-webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-moz-range-thumb {
height: var(--starsize);
opacity: 0;
width: var(--starsize);
}
.rating::-webkit-slider-thumb {
height: var(--starsize);
opacity: 0;
width: var(--starsize);
-webkit-appearance: none;
}
.rating, .rating-label {
display: block;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
margin-block-end: 1rem;
}