source: Git/src/main/resources/static/css/shared.css@ 3fe36de

main
Last change on this file since 3fe36de was 3fe36de, checked in by Petar Partaloski <ppartaloski@…>, 2 years ago

Added User profiles, improved clarity, improved UI

  • Property mode set to 100644
File size: 4.9 KB
Line 
1.col{
2 max-width: 5vw;
3}
4
5.row{
6 height: 300px;
7 margin-bottom: 15px;
8}
9
10.row div{
11 height: 100%;
12}
13
14.row div div{
15 height: 100%;
16}
17
18.card{
19 background-size: 100vh auto;
20 float:left;
21 margin: 7px;
22 border-radius: 10px;
23 padding: 20px;
24 color: white;
25 -webkit-text-stroke-width: 1px !important;
26 -webkit-text-stroke-color: black !important;
27 width: 90%;
28 height: 90%;
29 box-shadow: 4px 4px 4px rgba(128,128,128,1);
30}
31
32.card a h3{
33 -webkit-text-stroke-width: 1px;
34 -webkit-text-stroke-color: black;
35 color:white;
36 transition: 100ms;
37}
38
39.card:hover a h3{
40 transition: 400ms;
41 color:black;
42 -webkit-text-stroke-color: white;
43}
44
45.title{
46 text-align: center;
47 background-color: rgba(0,0,0,0.25);
48 border-radius: 10px 10px 0px 0px;
49 padding: 10px;
50}
51
52.bottom{
53 position: absolute;
54 top: 75%;
55 margin:auto;
56 width: 100%;
57 left: 0%;
58 border-radius: 0px;
59 text-align: center;
60 background-color: rgba(0,0,0,0.25);
61}
62.bottom h3, .bottom span{
63 margin-bottom: 0px;
64 margin-top: 0px;
65}
66.bottom span{
67 font-size: 75%;
68 margin-top: 5px;
69}
70
71
72.elements .card .btn{
73 top: 60%;
74 left: auto;
75 position: absolute;
76 margin: auto;
77 width: 20%;
78 text-align: center;
79}
80
81#paging-section{
82 width: 100%;
83 clear: both;
84 margin-bottom: 30px;
85}
86
87#inner-paging{
88 width: fit-content;
89 margin: auto;
90
91}
92
93#button-sub, #button-add{
94 width: 100px;
95}
96
97#pageInput{
98 font-size: 100%;
99 text-align: center;
100 width: 175px;
101 margin: auto;
102}
103
104#button-submit-page{
105 margin: auto;
106 text-align: center;
107 margin-top: 7px;
108 display: none;
109}
110
111.visibility{
112 transition: 200ms;
113 opacity: 0;
114}
115
116.person-movies-list{
117 margin: auto;
118 margin-top: 20px;
119 padding: 10px;
120 width: 80%;
121 background-color: rgba(52, 58, 64, 0.7);
122 border-radius: 10px;
123 transition: 200ms;
124 color: white;
125}
126
127.person-movies-list:hover{
128 background-color: rgba(52, 58, 64, 1);
129}
130
131.person-movies-list ul{
132 list-style-type: none;
133}
134
135.person-movies-list ul li{
136 color:black;
137 background-color: rgba(255,255,255,0.7);
138 padding: 12px;
139 font-size: 120%;
140 width: 80%;
141 text-align: center;
142 margin: auto;
143 transition: 200ms;
144 border-radius: 10px;
145 margin-bottom: 5px;
146 text-decoration: underline;
147}
148
149.person-movies-list hr{
150 color: white;
151 background-color: white;
152 border-color: white;
153}
154
155.person-movies-list ul li:hover{
156 background-color: rgba(255,255,255,1);
157 text-decoration-color: blue;
158}
159
160.genres-listing ul li:hover{
161 background-color: rgba(222,128,128,1);
162}
163
164.genres-listing ul li{
165 background-color: rgba(192,128,128,0.7);
166 text-decoration: none;
167}
168
169.person-movies-list ul li a{
170 color: black;
171 transition: 250ms;
172 text-decoration: underline;
173 text-decoration-color: black;
174}
175
176.person-movies-list ul li a:hover{
177 color:blue;
178}
179
180
181#admin-buttons a{
182 display: inline-block;
183 width: 95%;
184 margin: auto;
185 margin-top: 10px;
186 font-size: 125%;
187 clear: both;
188}
189
190#image-movie-section{
191 height: fit-content;
192 min-height: fit-content;
193}
194
195#likes-showcase{
196 background-color: rgba(192,128,128,0.7);
197 border-radius: 10px;
198 padding:10px;
199 width: 60%;
200 margin: auto;
201 transition: 200ms;
202 margin-top: 2%;
203}
204
205#likes-showcase strong{
206 font-size: 150%;
207}
208
209#likes-showcase:hover{
210 background-color: rgba(222,128,128,1);
211}
212
213.invisible-search{
214 display: none;
215}
216
217.user-text{
218 font-size: 95%;
219 text-decoration: none !important;
220 text-decoration-color: transparent;
221 text-align: justify;
222}
223
224.user-text-small{
225 font-size: 85%;
226 text-decoration: none !important;
227 text-decoration-color: transparent;
228 text-align: justify;
229}
230
231
232.user-movies-list{
233 margin: auto;
234 margin-top: 20px;
235 padding: 10px;
236 width: 80%;
237 background-color: rgba(52, 58, 64, 0.7);
238 border-radius: 10px;
239 transition: 200ms;
240 margin-right: 15px;
241 color: white;
242 transition: 200ms;
243}
244
245.user-movies-list:hover{
246 background-color: rgba(52, 58, 64, 1);
247}
248
249.user-movies-list ul{
250 list-style-type: none;
251 width: 99%;
252 margin: auto;
253 display: none;
254}
255
256.hidden-class{
257 background-color: rgba(192,255,192,0.6);
258 color: black;
259}
260
261.hidden-class:hover{
262 background-color: rgba(128,255,128,1) !important;
263
264}
265
266.user-movies-list ul li{
267 color:black;
268 background-color: rgba(255,255,255,0.7);
269 padding: 12px;
270 font-size: 80%;
271 width: 90%;
272 text-align: center;
273 margin: auto;
274 transition: 200ms;
275 border-radius: 10px;
276 margin-bottom: 5px;
277 text-decoration: none;
278 float: left;
279}
280
281.user-movies-list hr{
282 color: white;
283 background-color: white;
284 border-color: white;
285}
286
287
288.user-movies-list ul li:hover{
289 background-color: rgba(255,255,255,1);
290}
291
292.rate-title{
293 font-size: 130%;
294}
295
296#buttons-person{
297 margin-top: 10px;
298}
299
300#buttons-person li{
301 float: left;
302 margin-right: 10px;
303}
Note: See TracBrowser for help on using the repository browser.