3 |
2 |
3 |
250 | 
256 | 
274 | ${updates.ratingPercent}%
275 | 
283 | 
${updates.description}
290 |Oh uh!
You really want to do this?
706 | 707 | 708 | 711 | 714 |
715 | ` 716 | 717 | toggle_switch.onclick = function() { 718 | let radio = document.getElementById(`yes_${idname}`) 719 | alertRequiredReload(radio.checked) 720 | setSetting('app', name, radio.checked) 721 | updateApp() 722 | } 723 | 724 | let def = document.createElement('div') 725 | def.classList.add('setting_def', 'fs14' , 'white_d_t', 'tu') 726 | 727 | def.innerText = 'default: ' 728 | if(setting.default) { 729 | def.innerText += 'on' 730 | } else { 731 | def.innerText += 'off' 732 | } 733 | 734 | setting_area.style = 'display:flex;justify-content:space-between;align-items:center;' 735 | setting_area.appendChild(toggle_switch) 736 | setting_area.appendChild(def) 737 | break 738 | } 739 | case 'range': { 740 | classname = 'setting_range' 741 | 742 | let slider = document.createElement('input') 743 | slider.type = 'range' 744 | slider.min = setting.range[0] / setting.accuracy 745 | slider.max = setting.range[1] / setting.accuracy 746 | slider.value = setting.status / setting.accuracy 747 | slider.style.background = `linear-gradient(to right, var(--accent_color) 0%, var(--accent_color) ${setting.status}%, var(--white_d) ${setting.status}%, var(--white_d) 100%)`; 748 | slider.classList.add('slider') 749 | 750 | slider.oninput = function() { 751 | let value = slider.value * setting.accuracy 752 | slider.style.background = 'linear-gradient(to right, var(--accent_color) 0%, var(--accent_color) '+value +'%, var(--white_d) ' + value + '%, var(--white_d) 100%)' 753 | setSetting('app', name, value) 754 | updateApp() 755 | } 756 | 757 | let def = document.createElement('div') 758 | def.classList.add('setting_def', 'fs14' , 'white_d_t', 'tu') 759 | 760 | def.innerText = 'default: ' + setting.default 761 | 762 | setting_area.appendChild(slider) 763 | setting_area.appendChild(def) 764 | break 765 | } 766 | default: { break } 767 | } 768 | 769 | let box = document.createElement('div') 770 | box.classList.add('panel_box', 'panel_box_container', 'setting') 771 | 772 | box.appendChild(setting_title) 773 | box.appendChild(setting_area) 774 | return box 775 | } 776 | 777 | /*::::::::::::::::::::::::::::::::::::::::::::::: SEARCH-PANEL :::::::::::::::::::::::::::::::::::::::::::::::*/ 778 | let searchHistoryCache = new Cache('searchHistory') 779 | 780 | // This gets fired when the user searches something from the sidebar 781 | async function search(text) { 782 | let requestTime = Date.now() 783 | removeSearchResults() 784 | 785 | if(text == '') { 786 | // empty search submitted 787 | return false 788 | } 789 | 790 | let cacheContent = searchHistoryCache.getKey(text) 791 | if(cacheContent !== undefined) { 792 | // add cached search results 793 | } 794 | 795 | let data = await searchRequestHelper(text).then(res => res) 796 | debugLog('request finished', data.date) 797 | 798 | data.result.forEach(item => { 799 | debugLog('search', `adding result ${item.trakt[item.trakt.type].ids.trakt} (${item.trakt.score})`) 800 | // fallback for unavailable images 801 | let img = url = '../../assets/'+config.client.placeholder.search 802 | 803 | if(item.fanart !== undefined) { 804 | if(item.fanart.hasOwnProperty('tvposter')) { 805 | img = item.fanart.tvposter[0].url 806 | } else if(item.fanart.hasOwnProperty('movieposter')) { 807 | img = item.fanart.movieposter[0].url 808 | } 809 | } 810 | 811 | // render search result 812 | addSearchResult({ 813 | title: item.trakt[item.trakt.type].title, 814 | type: item.trakt.type, 815 | rating: Math.round(item.trakt[item.trakt.type].rating * 10), 816 | img: img, 817 | description: item.trakt[item.trakt.type].overview, 818 | id: item.trakt[item.trakt.type].ids.tmdb 819 | }) 820 | }) 821 | 822 | debugLog('time taken', Date.now()-requestTime+'ms') 823 | } 824 | 825 | // This function generates a html element for one search result and adds it to the sidebar. 826 | function addSearchResult(result) { 827 | let panel = document.getElementById('results') 828 | let panel_box = document.createElement('div') 829 | panel_box.classList.add('panel_box', 'search', 'animation_slide_right') 830 | 831 | let poster_img = document.createElement('img') 832 | poster_img.classList.add('poster') 833 | poster_img.src = result.img 834 | 835 | let panel_box_container = document.createElement('div') 836 | panel_box_container.classList.add('panel_box_container') 837 | 838 | let h3 = document.createElement('h3') 839 | h3.classList.add('fs18', 'tOverflow') 840 | h3.innerText = result.title 841 | 842 | let p = document.createElement('p') 843 | p.classList.add('tOverflow', 'normal') 844 | p.innerText = result.description 845 | 846 | let poster_content = document.createElement('div') 847 | poster_content.classList.add('poster-content') 848 | 849 | let poster_content_left = document.createElement('div') 850 | poster_content_left.classList.add('poster-content-left') 851 | 852 | let heart = document.createElement('img') 853 | heart.src = '../../assets/icons/app/heart.svg' 854 | 855 | let span = document.createElement('span') 856 | span.classList.add('fs16') 857 | span.innerText = result.rating + "%" 858 | 859 | let poster_content_right = document.createElement('div') 860 | poster_content_right.classList.add('poster-content-right') 861 | poster_content_right.append(...createActionButtons(result.id)) 862 | 863 | poster_content_left.appendChild(heart) 864 | poster_content_left.appendChild(span) 865 | 866 | poster_content.appendChild(poster_content_left) 867 | poster_content.appendChild(poster_content_right) 868 | 869 | panel_box_container.appendChild(h3) 870 | panel_box_container.appendChild(p) 871 | panel_box_container.appendChild(poster_content) 872 | 873 | panel_box.appendChild(poster_img) 874 | panel_box.appendChild(panel_box_container) 875 | 876 | panel.appendChild(panel_box) 877 | } 878 | 879 | // Removes all elements from the search panel in the sidebar 880 | function removeSearchResults() { 881 | let panel = document.getElementById('results') 882 | boxes = panel.getElementsByClassName('panel_box search') 883 | while(boxes[0]) { 884 | boxes[0].parentNode.removeChild(boxes[0]) 885 | } 886 | } 887 | 888 | 889 | /*::::::::::::::::::::::::::::::::::::::::::::::: UP-NEXT-TO-WATCH :::::::::::::::::::::::::::::::::::::::::::::::*/ 890 | // This gets fired when the dashboard is loaded 891 | async function generatePosterSection(update) { 892 | let requestTime = Date.now() 893 | 894 | let data = await getUnfinishedProgressList(5, update) 895 | 896 | if(update) { 897 | // clear dashboard 898 | document.querySelector('#dash').innerHTML = ` 899 | 900 |'
1126 | playNow.setAttribute('onclick', `playNow(${item})`)
1127 |
1128 | let addToList = document.createElement('div')
1129 | addToList.classList.add('action_btn', 'list')
1130 | addToList.innerHTML = ''
1131 | addToList.setAttribute('onclick', `addToWatchlist(${item})`)
1132 |
1133 | let addToHistory = document.createElement('div')
1134 | addToHistory.classList.add('action_btn', 'history')
1135 | addToHistory.innerHTML = ''
1136 | addToHistory.setAttribute('onclick', `addToHistory(${item})`)
1137 |
1138 | return [playNow, addToList, addToHistory];
1139 | }
1140 |
1141 | function playNow(item) {
1142 | alert('playing now!')
1143 | }
1144 |
1145 | function addToHistory(item) {
1146 | alert('added to history!')
1147 | }
1148 |
1149 | function addToWatchlist(item) {
1150 | alert('added to watchlist!')
1151 | }
1152 |
--------------------------------------------------------------------------------
/pages/dashboard/style.css:
--------------------------------------------------------------------------------
1 | /*::::::::::::::::::::::::::::::::::::::::::::::: MAIN-COMPONENTS :::::::::::::::::::::::::::::::::::::::::::::::*/
2 | :root {
3 | --side_panel_width: 450px;
4 | --panel_padding: 40px;
5 | --search_result_height: 205px;
6 | }
7 |
8 | .wrapper.dashboard {
9 | height: 100vh;
10 | width: 100vw;
11 | }
12 |
13 | .dashboard {
14 | margin: auto;
15 | min-width: 716px;
16 | }
17 | /*:::::::::::::::::::::::::::::::::::::::::::::::: ACTION-BUTTTONS :::::::::::::::::::::::::::::::::::::::::::::::*/
18 | .action_btn {
19 | vertical-align: middle;
20 | padding: 8px;
21 | position: relative;
22 | cursor: pointer;
23 | margin: 3px;
24 | border-radius: 5px;
25 | }
26 |
27 | .action_btn,
28 | .action_btn > img {
29 | display: inline-block;
30 | width: 16px;
31 | height: 19px;
32 | }
33 |
34 | .action_btn:first-child {
35 | margin-left: 0;
36 | }
37 | .action_btn:last-child {
38 | margin-right: 0;
39 | }
40 |
41 | .action_btn::before {
42 | position: absolute;
43 | transform: translateY(-15%) translateX(calc(-100% - 7px));
44 | opacity: 0;
45 | visibility: hidden;
46 | padding: 3px 25px;
47 | font-size: 14px;
48 | white-space: nowrap;
49 | font-weight: 200;
50 | color: var(--white);
51 | border-radius: 3px 0 0 3px;
52 | transition: all 200ms ease;
53 | z-index: 1;
54 | }
55 |
56 | .action_btn:hover::before {
57 | opacity: 1;
58 | visibility: visible;
59 | }
60 |
61 | .action_btn.play {
62 | background-color: #C61017;
63 | }
64 | .action_btn.play::before {
65 | content: 'Play Now?';
66 | background-color: rgb(153, 13, 17);
67 | }
68 |
69 | .action_btn.list {
70 | background-color: #2B678F;
71 | }
72 | .action_btn.list:before {
73 | content: 'Add to watchlist?';
74 | background-color: rgb(25, 61, 85);
75 | }
76 |
77 | .action_btn.history {
78 | background-color: #8E44AD;
79 | }
80 | .action_btn.history:before {
81 | content: 'Add to history?';
82 | background-color: rgb(106, 51, 129);
83 | }
84 | /*:::::::::::::::::::::::::::::::::::::::::::::::: CARDS :::::::::::::::::::::::::::::::::::::::::::::::*/
85 | #infocard_overlay {
86 | width: 100%;
87 | height: 100%;
88 | position: absolute;
89 | z-index: 7;
90 | display: flex;
91 | justify-content: center;
92 | align-items: center;
93 | }
94 |
95 | #infocard_stack {
96 | width: 70%;
97 | height: 70%;
98 | }
99 |
100 | .infocard {
101 | position: absolute;
102 | width: 70%;
103 | height: 70%;
104 | border-radius: 8px;
105 | background-color: var(--black);
106 | transition: ease 0.5s;
107 | }
108 |
109 | .left_stack {
110 | transform: translateX(-110%);
111 | opacity: 0;
112 | }
113 |
114 | .right_stack {
115 | transform: translateX(110%);
116 | opacity: 0;
117 | }
118 |
119 | .cardcontent {
120 | width: 100%;
121 | height: 100%;
122 | overflow-y: scroll;
123 | }
124 |
125 | .cardcontent::-webkit-scrollbar {
126 | display: none;
127 | }
128 |
129 | .infocard .banner {
130 | max-height: 200px;
131 | overflow: hidden;
132 | }
133 |
134 | .infocard .banner img {
135 | width: 100%;
136 | border-radius: 8px 8px 0 0;
137 | }
138 |
139 | .infosection {
140 | padding: 20px;
141 | width: calc(100% - 40px);
142 | z-index: 1;
143 | }
144 |
145 | .infocard .btns {
146 | display: inline-flex;
147 | position: absolute;
148 | margin: 0;
149 | right: -12px;
150 | top: -12px;
151 | }
152 |
153 | .infocard .btns li {
154 | padding: 5px;
155 | }
156 |
157 | .infocard .btns .btn {
158 | margin: 0;
159 | }
160 |
161 | .infocard .btn.icon {
162 | padding: 5px;
163 | }
164 |
165 | .infocard .btn.icon img {
166 | width: 18px;
167 | height: 18px;
168 | }
169 |
170 | #indicator {
171 | position: absolute;
172 | display: flex;
173 | justify-content: center;
174 | bottom: 4%;
175 | width: 100%;
176 | }
177 |
178 | #indicator input {
179 | -webkit-appearance: none;
180 | width: 35%;
181 | height: 3px; /* has to be odd! */
182 | border-radius: 3px;
183 | background: var(--black);
184 | outline: none;
185 | -webkit-transition: .2s;
186 | transition: opacity .2s;
187 | pointer-events: none;
188 | }
189 |
190 | #indicator input::-webkit-slider-thumb {
191 | -webkit-appearance: none;
192 | width: 30px;
193 | height: 5px;
194 | border-radius: 5px;
195 | background: var(--accent_color);
196 | }
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 | /*----------------- NEW CARDS----------------*/
207 | .infocard_child {
208 | position: relative;
209 | width: 100%;
210 | height: 100%;
211 | border-radius: 4px;
212 | overflow-y: auto;
213 | margin: auto;
214 | }
215 |
216 | .infocard_child::-webkit-scrollbar {
217 | display: none;
218 | }
219 |
220 | .infocard_padding {
221 | padding: 10px 20px 10px 250px;
222 | }
223 |
224 | .infocard_banner {
225 | height: 200px;
226 | width: 100%;
227 | position: relative;
228 | }
229 | .infocard_banner img {
230 | width: 100%;
231 | height: 100%;
232 | object-fit: cover;
233 | filter: grayscale(10%);
234 | }
235 |
236 | #infocard_close {
237 | position: absolute;
238 | right: 12px;
239 | top: 12px;
240 | width: 18px; /*visually more appealing that the actual 19px*/
241 | line-height: 0;
242 | padding: 5px;
243 | border-radius: 5px;
244 | display: inline-block;
245 | text-align: center;
246 | vertical-align: middle;
247 | cursor: pointer;
248 | transition: opacity 200ms ease;
249 | }
250 |
251 | #infocard_close:hover {
252 | opacity: 0.8;
253 | }
254 |
255 | #infocard_close img {
256 | filter: invert(100%);
257 | width: 16px;
258 | height: 19px;
259 | }
260 |
261 |
262 | .infocard_titles {
263 | height: 55px;
264 | }
265 | .infocard_titles * {
266 | display: inline-block;
267 | vertical-align: middle;
268 | }
269 |
270 | .infocard_titles .vertical_border {
271 | margin: 0 20px;
272 | }
273 |
274 | .infocard_titles .rating {
275 | line-height: 24px;
276 | width: 40px;
277 | height: 55px;
278 | text-align: center;
279 | white-space: normal;
280 | }
281 | .infocard_titles .rating > img {
282 | width: 30px;
283 | height: auto;
284 | }
285 |
286 | .infocard_description {
287 | opacity: 0.8;
288 | margin: 0 0 0 2px;
289 | }
290 |
291 | .infocard_poster {
292 | position: absolute;
293 | transform: translateX(30px) translateY(-180px);
294 | width: 190px;
295 | }
296 | .infocard_poster > img {
297 | width: 100%;
298 | height: 250px;
299 | object-fit: cover;
300 | border-radius: 4px;
301 | }
302 | /*:::::::::::::::::::::::::::::::::::::::::::::::: UP-NEXT-TO-WATCH :::::::::::::::::::::::::::::::::::::::::::::::*/
303 | .titles {
304 | margin-left: 20px;
305 | transform: translateX(236px) translateY(10px);
306 | height: 0;
307 | overflow: visible;
308 | }
309 |
310 | .titles h1,
311 | .titles h3 {
312 | margin: 0;
313 | line-height: 36px;
314 | max-width: 625px;
315 | }
316 |
317 | .titles h1:last-child {
318 | line-height: 39px;
319 | }
320 |
321 | .poster-dashboard:nth-child(n+6) {
322 | display: none;
323 | }
324 | .poster-dashboard:first-child {
325 | width: 236px;
326 | height: 337px;
327 | }
328 | .poster-dashboard:last-child {
329 | margin-right: 0;
330 | }
331 | .poster-dashboard::before {
332 | content: '';
333 | display: block;
334 | position: absolute;
335 | border-radius: 0 0 5px 5px;
336 | height: 0%;
337 | width: 100%;
338 | bottom: 0;
339 | transition: height 400ms ease;
340 | background-image: linear-gradient(
341 | to bottom,
342 | rgba(255, 255, 255, 0) 0, #000000e0 80%
343 | );
344 | }
345 | .poster-dashboard:hover::before {
346 | height: 60%;
347 | }
348 |
349 | .poster-content {
350 | position: absolute;
351 | bottom: 0;
352 | display: flex;
353 | justify-content: space-between;
354 | padding: 10px 12px;
355 | opacity: 0;
356 | width: calc(100% - 24px);
357 | flex-direction: column;
358 | align-items: center;
359 | transition: all 400ms ease;
360 | }
361 | .poster-dashboard:first-child > .poster-content {
362 | flex-direction: row;
363 | }
364 | .poster-dashboard:hover > .poster-content {
365 | opacity: 1;
366 | }
367 |
368 | .poster-content-left,
369 | .poster-content-right {
370 | display: inline-block;
371 | vertical-align: middle;
372 | }
373 | .poster-content-left img,
374 | .poster-content-left span {
375 | vertical-align: middle;
376 | }
377 | .poster-content-right {
378 | cursor: pointer;
379 | letter-spacing: 0.5px;
380 | }
381 | .poster-content-left img {
382 | width: 25px;
383 | height: auto;
384 | margin-right: 4px;
385 | }
386 |
387 | .dark_overlay {
388 | display: block !important;
389 | animation: blend_in 0.15s !important;
390 | animation-fill-mode: forwards !important;
391 | }
392 |
393 | #dash_overlay {
394 | top: 0;
395 | left: 0;
396 | height: 100vh;
397 | width: 100vw;
398 | display: none;
399 |
400 | position: absolute;
401 | overflow: hidden;
402 | z-index: 2;
403 | background-color: rgb(20, 20, 20);
404 |
405 | opacity: 0.75;
406 | backdrop-filter: blur(8px);
407 | animation: blend_out 0.15s;
408 | animation-fill-mode: forwards;
409 | }
410 |
411 | #info_overlay {
412 | top: 0;
413 | left: 0;
414 | height: 100vh;
415 | width: 100vw;
416 | display: none;
417 |
418 | position: absolute;
419 | overflow: hidden;
420 | z-index: 6;
421 | background-color: rgb(20, 20, 20);
422 |
423 | opacity: 0.75;
424 | backdrop-filter: blur(8px);
425 | animation: blend_out 0.15s;
426 | animation-fill-mode: forwards;
427 | }
428 |
429 | /*::::::::::::::::::::::::::::::::::::::::::::::: SIDE-PANEL :::::::::::::::::::::::::::::::::::::::::::::::*/
430 | .side_panel {
431 | display: block;
432 | position: absolute;
433 | height: 100vh;
434 | width: var(--side_panel_width);
435 | background: var(--black);
436 | color: var(--white);
437 | right: calc(-1 * var(--side_panel_width));
438 | }
439 |
440 | .side_panel .relaunch {
441 | margin-bottom: 150px;
442 | }
443 |
444 | .panel {
445 | padding: var(--side_dist) var(--panel_padding);
446 | overflow: hidden auto;
447 | height: calc(100vh - var(--side_dist));
448 | scroll-behavior: smooth;
449 | }
450 |
451 | .panel_header,
452 | .panel_header_box,
453 | .panel_header_gradient {
454 | position: absolute;
455 | right: 0;
456 | width: var(--side_panel_width);
457 | }
458 |
459 | .panel_header {
460 | margin: 0;
461 | left: 0;
462 | padding: 4px var(--panel_padding);
463 | width: calc(
464 | var( --side_panel_width) - (2*(var(--panel_padding)))
465 | );
466 | }
467 |
468 | .panel_header_box {
469 | height: calc(44px + var(--side_dist) + 16px);
470 | background-color: var(--black);
471 | }
472 |
473 | .panel_header_gradient {
474 | margin-top: calc(44px + 12px);
475 | height: 16px;
476 | background-image: linear-gradient(
477 | to bottom,
478 | var(--black), rgba(0,0,0,0)
479 | );
480 | }
481 |
482 | .side_panel_list {
483 | width: calc(var(--side_panel_width) - (2*(var(--panel_padding))));
484 | margin-top: calc(44px + 10px + 16px);
485 | }
486 |
487 | .panel_box {
488 | border-radius: 5px;
489 | background-color: var(--black_d);
490 | margin-bottom: 15px;
491 | transition: all 200ms ease;
492 | }
493 |
494 | .panel_box_container {
495 | padding: 12px;
496 | position: relative;
497 | }
498 |
499 | .panel_box_container > h3 {
500 | margin: 0;
501 | }
502 |
503 | .side_panel_animate_out {
504 | right: calc(-1 * var(--side_panel_width));
505 | animation: move_out_right 0.3s !important;
506 | }
507 |
508 | .side_panel_animate_in {
509 | right: 0px !important;
510 | animation: move_in_right 0.3s !important;
511 | }
512 |
513 | .side_buttons_animate_out {
514 | right: var(--side_dist);
515 | animation: move_out_right_buttons 0.3s !important;
516 | }
517 |
518 | .side_buttons_animate_in {
519 | right: calc(var(--side_panel_width) - 22px) !important;
520 | animation: move_in_right_buttons 0.3s !important;
521 | }
522 |
523 | @keyframes move_in_right {
524 | 0% {opacity: 0;right: calc(-1 * var(--side_panel_width))}
525 | 66% {opacity: 1}
526 | 100% {opacity: 1;right: 0px}
527 | }
528 |
529 | @keyframes move_out_right {
530 | 0% {right: 0px;opacity: 1}
531 | 33% {opacity: 1}
532 | 100% {right: calc(-1 * var(--side_panel_width));opacity: 0}
533 | }
534 |
535 | @keyframes move_in_right_buttons {
536 | 0% {right: var(--side_dist)}
537 | 100% {right: calc(var(--side_panel_width) - 22px)}
538 | }
539 |
540 | @keyframes move_out_right_buttons {
541 | 0% {right: calc(var(--side_panel_width) - 22px)}
542 | 100% {right: var(--side_dist)}
543 | }
544 | /*::::::::::::::::::::::: SEARCH-COMPONENTS :::::::::::::::::::::::*/
545 | .panel_header.search {
546 | border: none;
547 | border-radius: 0 5px 5px 0;
548 | height: 44px;
549 | left: 0;
550 | padding: 0 20px 0 var(--panel_padding);
551 | width: calc(
552 | var(--side_panel_width) - (2*var(--panel_padding)) - 20px
553 | );
554 | }
555 |
556 | .panel_box.search {
557 | cursor: pointer;
558 | }
559 | .panel_box.search:hover {
560 | box-shadow: 0px 0px 34px rgba(0, 0, 0, 0.3);
561 | }
562 |
563 | .panel_box.search .poster {
564 | margin: 0;
565 | width: 40%;
566 | border-radius: 5px 0 0 5px;
567 | height: var(--search_result_height);
568 | }
569 |
570 | .panel_box.search .poster,
571 | .panel_box.search .panel_box_container {
572 | display: inline-block;
573 | vertical-align: middle;
574 | }
575 |
576 | .panel_box.search .panel_box_container {
577 | width: calc(60% - 24px);
578 | height: calc(var(--search_result_height) - 24px);
579 | }
580 |
581 | .panel_box_container > p {
582 | font-weight: 300;
583 | font-size: 13px;
584 | opacity: .60;
585 | display: -webkit-box;
586 | line-height: 18px;
587 | -webkit-line-clamp: 6;
588 | -webkit-box-orient: vertical;
589 | margin: 0;
590 | }
591 |
592 | .panel_box.search .poster-content {
593 | opacity: 1;
594 | padding: 0;
595 | flex-direction: row;
596 | bottom: 12px;
597 | }
598 |
599 | .panel_box.search .poster-content-left img {
600 | width: 20px;
601 | }
602 |
603 | #results .action_btn,
604 | #results .action_btn > img {
605 | width: 6px;
606 | }
607 | /*::::::::::::::::::::::: SETTINGS-COMPONENTS :::::::::::::::::::::::*/
608 | .panel_box.setting > h3 {
609 | margin: 0 0 10px 0;
610 | }
611 | .setting_container {
612 | display: inline-block;
613 | position: relative;
614 | text-align: center;
615 | width: 50px;
616 | vertical-align: top;
617 | margin-right: 10px;
618 | cursor: pointer;
619 | }
620 | .setting_container:last-child {
621 | margin: 0;
622 | }
623 |
624 | .setting_box {
625 | height: 50px;
626 | object-fit: cover;
627 | border: 2px solid var(--white_d);
628 | border-radius: 5px;
629 | }
630 | .setting_box.selected {
631 | border: 2px solid var(--accent_color_d)
632 | }
633 |
634 | .setting_container.wide {
635 | display: block;
636 | width: 100%;
637 | margin-bottom: 10px;
638 | }
639 | .setting_container.wide:last-child {
640 | margin-bottom: 0;
641 | }
642 | .setting_container.wide .setting_def {
643 | position: absolute;
644 | line-height: calc(50px + 4px);
645 | width: 100%;
646 | pointer-events: none;
647 | }
648 |
649 | #relaunch_box {
650 | width: calc(var(--side_panel_width) - (2*var(--side_dist)));
651 | padding: var(--side_dist);
652 | margin-left: calc(-1 * var(--side_dist) - 10px);
653 | }
654 |
655 | #relaunch_box > h3 {
656 | text-align: center;
657 | margin: 0 auto 10px;
658 | }
659 |
660 | #relaunch_box > div {
661 | width: fit-content;
662 | margin: auto;
663 | padding: 5px 20px;
664 | }
665 | /*::::::::::::::::::::::: LOGOUT-COMPONENTS :::::::::::::::::::::::*/
666 | .logout_btn {
667 | height: 44px;
668 | padding: 0 var(--panel_padding);
669 | border: none;
670 | position: absolute;
671 | top: calc(var(--side_dist) + calc(2 * 44px) + calc(2 * 8px));
672 | border-radius: 0 44px 44px 0;
673 | cursor: pointer;
674 | left: 0;
675 | }
676 | /*::::::::::::::::::::::::::::::::::::::::::::::: RESPONSIVE :::::::::::::::::::::::::::::::::::::::::::::::*/
677 | @media screen and (max-width: 952px) {
678 | :root {
679 | --side_panel_width: 380px;
680 | --search_result_height: 165px;
681 | }
682 |
683 | .titles {
684 | transform: translateX(236px) translateY(30px);
685 | }
686 | .titles h1,
687 | .titles h3 {
688 | margin: 0;
689 | line-height: 27px;
690 | max-width: 450px;
691 | }
692 | .titles h1:last-child {
693 | line-height: 34px;
694 | }
695 |
696 | .poster-dashboard:nth-child(4) {
697 | margin-right: 0;
698 | }
699 | .poster-dashboard:nth-child(5) {
700 | display: none;
701 | }
702 |
703 | .side_panel .relaunch {
704 | margin-bottom: 130px;
705 | }
706 |
707 | #relaunch_box {
708 | margin-left: calc(-1 * var(--side_dist) - 20px);
709 | }
710 |
711 | #results .panel_box_container > p {
712 | display: none;
713 | }
714 | }
715 |
--------------------------------------------------------------------------------
/pages/loading/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
27 |
53 | Man, this takes long!
54 |
55 | Try relaunching or reach out to us here to get help.
56 |
20 | 
38 | 
43 |