A self hosted solution for privately rating and reviewing different sorts of media
keii.dev
1.image_spacer {
2 min-width: 64px;
3 max-width: 64px;
4 object-fit: cover;
5 border-radius: 4px;
6}
7
8.name {
9 flex-grow: 1;
10 font-weight: 600;
11}
12
13.studio {
14 max-width: 120px;
15 min-width: 120px;
16}
17
18.rating {
19 max-width: 24px;
20 min-width: 24px;
21}
22
23.category {
24 max-width: 24px;
25 min-width: 24px;
26}
27
28.selected {
29 border-radius: 100px;
30 height: 20px;
31 width: 4px;
32 background-color: #A6BB8D;
33 position: absolute;
34 transform: translateX(-12px);
35}
36
37.wrapper {
38 display: flex;
39}
40
41.season_container .season_header {
42 display: flex;
43 flex-direction: row;
44 font-weight: 600;
45 font-size: 20px;
46 margin-bottom: 35px;
47 cursor: pointer;
48}
49
50.season_container .season_header .title {
51 flex-grow: 1;
52}
53
54.season_container .info {
55 display: flex;
56 flex-direction: column;
57 gap: 20px;
58 margin-bottom: 40px;
59}
60
61.season_container .info .row {
62 width: 100%;
63 font-size: 20px;
64 display: flex;
65 align-items: center;
66}
67
68.info .row .identifier {
69 flex-grow: 1;
70}
71
72.value {
73 border: 0;
74 text-align: left;
75}
76
77.info .row .value {
78 max-width: 50%;
79 font-weight: 600;
80 min-width: 24px;
81 height: 24px;
82 font-size: 20px;
83 text-align: right;
84}
85
86textarea.value {
87 height: 300px;
88}
89
90.change_container {
91 border-radius: 4px;
92 padding: 20px;
93 font-size: 20px;
94 position: fixed;
95 top: 100vh;
96 display: flex;
97 flex-direction: row;
98 gap: 20px;
99 transform: translateY(calc(-100% - 10px));
100 background-color: #FD8A8A;
101 border: 1px solid #FF597B;
102 align-items: center;
103 font-weight: 600;
104 animation: changeanim 500ms ease-in-out 0ms 1 forwards;
105}
106
107@keyframes changeanim {
108 0% {
109 left: -400px;
110 }
111 100% {
112 left: 10px;
113 }
114}
115
116.filter_input {
117 margin-bottom: 20px;
118 width: 100%;
119 height: 64px;
120 font-size: 20px;
121}
122
123.filter_input input {
124 width: 100%;
125 height: 31px;
126 font-size: 20px;
127}
128
129.options_container .filter_range {
130 margin-bottom: 20px;
131}
132
133.create_button {
134 width: 100%;
135 height: 64px;
136 border-radius: 100px !important;
137 color: #A6BB8D !important;
138 font-size: 20px;
139 font-family: 'Open Sans', sans-serif;
140 border: 1px solid #A6BB8D !important;
141 margin-top: 20px !important;
142}
143
144.delete_button {
145 width: 100%;
146 height: 64px;
147 border-radius: 100px !important;
148 color: #FF597B !important;
149 font-size: 20px;
150 font-family: 'Open Sans', sans-serif;
151 border: 1px solid #FF597B !important;
152}
153
154.seasons {
155 border-bottom: 1px solid var(--c-border);
156 margin-bottom: 40px;
157}
158
159.season_container .title {
160 font-size: 20px;
161 margin-bottom: 10px;
162}
163
164.season_container .season_title {
165 font-weight: 600;
166 font-family: 'Open Sans', sans-serif;
167 border: 0;
168 font-size: 20px;
169 margin-right: auto;
170}
171
172.info .value {
173 font-size: 15px;
174}
175
176.create_notes {
177 font-size: 15px;
178 margin-bottom: 30px;
179}
180
181
182.season_container {
183 width: calc((100vw - 860px) / 2);
184 margin-left: 20px;
185 border: 1px solid var(--c-border);
186 border-radius: 4px;
187 padding: 20px;
188 display: flex;
189 flex-direction: column;
190 height: max-content;
191 position: sticky;
192 top: 10px;
193 overflow-y: scroll;
194 max-height: 93vh;
195}
196
197.season_container .header {
198 display: flex;
199 flex-direction: row;
200 color: #000;
201 gap: 20px;
202 margin-bottom: 30px;
203 transform: translateX(-5px);
204}
205
206.season_container .header .item {
207 display: flex;
208 flex-direction: column;
209 justify-content: center;
210}
211
212.season_container .header .item .selected_item {
213 border-radius: 100px;
214 height: 4px;
215 width: 20px;
216 background-color: #A6BB8D;
217 margin-left: auto;
218 margin-right: auto;
219 margin-top: 5px;
220}
221
222.season_container .header .item .icon_button {
223 margin-bottom: auto;
224}
225
226.error {
227 color: #FF597B;
228 font-size: 20px;
229 width: 100%;
230 text-align: center;
231 margin-bottom: 20px;
232}
233
234@media only screen and (max-width: 1370px){
235 .season_container {
236 position: relative;
237 width: 760px;
238 margin-left: auto;
239 margin-right: auto;
240 max-height: max-content;
241 margin-bottom: 20px;
242 overflow-y: visible;
243 }
244}
245
246
247
248@media only screen and (max-width: 830px) {
249 .season_container {
250 margin-bottom: 100px;
251 max-width: 90vw;
252 min-width: none;
253 }
254}
255
256.scontainer {
257 display: flex;
258 flex-direction: column;
259 gap: 10px;
260}