A self hosted solution for privately rating and reviewing different sorts of media
keii.dev
1.options_container {
2 width: calc((100vw - 860px) / 2);
3 margin-right: 20px;
4 border: 1px solid var(--c-border);
5 border-radius: 4px;
6 padding: 20px;
7 display: flex;
8 flex-direction: column;
9 height: max-content;
10 position: sticky;
11 top: 10px;
12}
13
14.options_container .header {
15 display: flex;
16 flex-direction: row;
17 color: #000;
18 gap: 20px;
19 margin-bottom: 30px;
20 transform: translateX(-5px);
21}
22
23.options_container .header .item {
24 display: flex;
25 flex-direction: column;
26 justify-content: center;
27}
28
29.options_container .header .item .selected_item {
30 border-radius: 100px;
31 height: 4px;
32 width: 20px;
33 background-color: #A6BB8D;
34 margin-left: auto;
35 margin-right: auto;
36 margin-top: 5px;
37}
38
39.options_container .header .item .icon_button {
40 margin-bottom: auto;
41}
42
43.options_container .title {
44 font-size: 20px;
45 margin-bottom: 10px;
46}
47
48.filter_input {
49 margin-bottom: 20px;
50 width: 100%;
51 height: 64px;
52 font-size: 20px;
53}
54
55.filter_input input {
56 width: 100%;
57 height: 31px;
58 font-size: 20px;
59}
60
61.options_container .filter_range {
62 margin-bottom: 20px;
63}
64
65.create_button {
66 width: 100%;
67 height: 64px;
68 border-radius: 100px !important;
69 margin-top: 20px !important;
70 color: #A6BB8D !important;
71 font-size: 20px;
72 font-family: 'Open Sans', sans-serif;
73 border: 1px solid #A6BB8D !important;
74}
75
76.delete_button {
77 width: 100%;
78 height: 64px;
79 border-radius: 100px;
80 color: #FF597B;
81 font-size: 20px;
82 font-family: 'Open Sans', sans-serif;
83 border: 1px solid #FF597B;
84}
85
86@media only screen and (max-width: 1370px){
87 .options_container {
88 position: relative;
89 width: 760px;
90 margin-left: auto;
91 margin-right: auto;
92 margin-bottom: 20px;
93 }
94}
95
96.hide_watched {
97 display: flex;
98 gap: 60px;
99}
100
101
102@media only screen and (max-width: 830px) {
103 .options_container {
104 max-width: 90vw;
105 min-width: none;
106 }
107}