A self hosted solution for privately rating and reviewing different sorts of media
keii.dev
1.media_container {
2 min-width: 800px;
3 max-width: 800px;
4 min-height: 98vh;
5 top: 50px;
6 border-radius: 4px;
7 border: 1px solid var(--c-border);
8 font-size: 20px;
9}
10
11.media_container .header {
12 border-bottom: 1px solid var(--c-border);
13 padding: 20px;
14 padding-right: 40px;
15 display: flex;
16 flex-direction: row;
17 gap: 25px;
18}
19
20.media_container .header div {
21 font-weight: 500 !important;
22}
23
24.media_container .row {
25 padding: 20px;
26 padding-right: 40px;
27 display: flex;
28 flex-direction: row;
29 gap: 25px;
30 align-items: center;
31 transition: background-color 100ms ease-in-out;
32}
33
34.media_container .row:hover {
35 background-color: #f6f4f6;
36 transition: background-color 100ms ease-in-out;
37 cursor: pointer;
38}
39
40.image_spacer {
41 min-width: 64px;
42 max-width: 64px;
43 object-fit: cover;
44 border-radius: 4px;
45}
46
47.name {
48 flex-grow: 1;
49 font-weight: 600;
50}
51
52.studio {
53 max-width: 120px;
54 min-width: 120px;
55}
56
57.rating {
58 max-width: 24px;
59 min-width: 24px;
60}
61
62.category {
63 max-width: 24px;
64 min-width: 24px;
65}
66
67.selected {
68 border-radius: 100px;
69 height: 20px;
70 width: 4px;
71 background-color: #A6BB8D;
72 position: absolute;
73 transform: translateX(-12px);
74}
75
76.create_button {
77 width: 100%;
78 height: 64px;
79 border-radius: 100px;
80 color: #A6BB8D;
81 font-size: 20px;
82 font-family: 'Open Sans', sans-serif;
83 border: 1px solid #A6BB8D;
84}
85
86.delete_button {
87 width: 100%;
88 height: 64px;
89 border-radius: 100px;
90 color: #FF597B;
91 font-size: 20px;
92 font-family: 'Open Sans', sans-serif;
93 border: 1px solid #FF597B;
94}
95
96@media only screen and (max-width: 470px){
97 .name {
98 width: auto !important;
99 min-width: none !important;
100 max-width: none !important;
101 }
102}
103
104@media only screen and (max-width: 1370px){
105 .media_container {
106 margin-left: auto;
107 margin-right: auto;
108 }
109}
110
111
112@media only screen and (max-width: 830px) {
113 .media_container {
114 max-width: 99vw;
115 min-width: 0;
116 margin-bottom: 90px;
117 }
118
119 .name {
120 width: calc(100vw - 382px);
121 min-width: calc(100vw - 382px);
122 max-width: calc(100vw - 382px);
123 }
124
125 .studio {
126 width: 90px;
127 min-width: 90px;
128 max-width: 90px;
129 }
130}