Full screen modals for mobile view
[DeezloaderRemix.git] / app / public / css / style.css
1 :root {
2   --main-modal-background: #fafafa;
3   --appbar-height: 32px;
4 }
5
6 body {
7         background-color: white;
8 }
9
10 td{
11         text-align: left;
12 }
13 th{
14         text-align: left;
15 }
16 .remove-margin{
17         margin:0px;
18         padding-bottom: 3px;
19 }
20 .secondary-text{
21         opacity: 0.75;
22 }
23
24 #initializing {
25         z-index: 98;
26         position: fixed;
27         width: 100%;
28         height: 100%;
29 }
30 #modal_login_autologin{
31         line-height: 36px;
32 }
33 *:focus{
34         outline-color: #3f51b5;
35 }
36
37 #initializing>div {
38         width: 100%;
39 }
40
41 .resize-padding{
42         -webkit-app-region: no-drag !important;
43         margin:0px;
44 }
45
46 .btn-input{
47         height: 43px;
48         line-height: 43px;
49         font-size: 15px;
50         padding: 0 28px;
51         margin: 0px;
52 }
53
54 #title-bar {
55         -webkit-user-select: none;
56         -webkit-app-region: drag;
57         overflow: hidden !important;
58         position: fixed;
59         width: 100%;
60         left: 0;
61         top: 0;
62         right: 0;
63         z-index: 99;
64         height: 32px;
65         line-height: 32px;
66         padding: 0;
67         margin: 0;
68         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
69         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
70 }
71
72 #title-bar #title {
73         position: absolute;
74         top: 0px;
75         left: 6px;
76         color: #fff;
77 }
78
79 #title-bar #title-bar-btns {
80         -webkit-user-select: none;
81         -webkit-app-region: no-drag;
82         position: absolute;
83         top: 0px;
84         right: 6px;
85 }
86
87 #title-bar #title-bar-btns button {
88         line-height: 0px;
89         height: 32px;
90         background-color: transparent;
91         border: none;
92         color: #F1F1F1;
93         font-size: 14px;
94         padding: 0 3px;
95         -webkit-transition: 0.2s;
96         -o-transition: 0.2s;
97         transition: 0.2s;
98 }
99
100 #title-bar #title-bar-btns button:hover {
101         background: rgba(255, 255, 255, 0.1);
102 }
103
104 #title-bar #title-bar-btns {
105         right: 0px !important;
106 }
107
108 #title-bar #title-bar-btns i {
109         font-size: 20px;
110         padding: 0 10px;
111 }
112 .modal-custom-header > .modal-content{
113         padding: 0px !important;
114 }
115 .modal-container{
116         padding: 8px 24px;
117 }
118 .trackList-header{
119         background-position: 0% 35%;
120         background-size: cover;
121         padding: 220px 24px 8px;
122 }
123 .valignicon{
124   vertical-align: middle !important;
125 }
126
127 #slide-out .background{
128         background-image: url("../img/bg.png");
129         -webkit-background-size: cover;
130         background-size: cover;
131         overflow: hidden;
132 }
133
134 #main_icon{
135         position: absolute;
136         margin-top: 32px;
137         top: 58px;
138         left: calc(50% - 37.5px);
139         width: 75px;
140         height: 75px;
141 }
142
143 nav {
144         background-image: url("../img/bg.png");
145         -webkit-background-size: cover;
146         background-size: cover;
147         overflow: auto;
148         position: relative;
149         height: auto;
150         top: -1px;
151         margin-top: 32px;
152         padding-bottom: 60px;
153         -webkit-clip-path: polygon(0 0, 0 60%, 100% 100%, 100% 0);
154         width: 100%;
155 }
156 .deezloader-black{
157         background-color: #23232c;
158 }
159
160 @media only screen and (max-width: 992px) {
161         #nav-mobile .left{
162                 margin-right: 0px;
163         }
164 }
165
166 @media only screen and (max-width: 600px) {
167         nav {
168                 padding-top: 0px;
169                 padding-bottom: 0px;
170         }
171         .container{
172                 margin: auto 0px;
173                 width: 100%
174         }
175         .modal{
176                 width: 100%;
177                 margin: 0px;
178                 max-height: calc(100% - var(--appbar-height));
179                 height: 100% !important;
180                 top: var(--appbar-height) !important;
181         }
182         #main_icon{
183                 top: 4px;
184                 left: calc(50% - 25px);
185                 width: 50px;
186                 height: 50px;
187         }
188         .btn{
189                 padding-left: 16px;
190                 padding-right: 16px;
191         }
192         #modal_login_btn_signup, #modal_login_btn_login{
193                 margin-top: 8px;
194         }
195 }
196
197 nav .brand-logo{
198         margin-left: 24px;
199 }
200
201 nav .description {
202         font-size: 20px;
203         font-weight: 300;
204         padding: 8px 0;
205         margin: 0px;
206         padding-bottom: 20px;
207 }
208
209 nav .description:after {
210         content: "";
211         display: block;
212         width: 20%;
213         position: relative;
214         height: 2px;
215         background-color: #fff;
216         text-align: center;
217         margin: 0 auto;
218         top: 16px;
219         margin-bottom: 24px;
220 }
221
222 nav .brand-logo.left{
223         margin-left: 45px;
224 }
225
226 .nav-content{
227         background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%);
228         height: auto;
229 }
230
231 .container {
232         margin-top: 12px;
233         margin-bottom: 50px;
234 }
235 #tab-nav {
236         padding-left: 8px;
237         padding-right: 8px;
238 }
239
240 #main-content{
241         margin-top: 12px;
242 }
243
244 .inline-input-group {
245         width: 100%;
246         display: -webkit-box;
247         display: -webkit-flex;
248         display: flex;
249         overflow: hidden;
250         -webkit-box-pack: start;
251         -webkit-justify-content: flex-start;
252         justify-content: flex-start;
253         -webkit-align-content: space-between;
254         align-content: space-between;
255 }
256
257 .inline-input-group>* {
258         margin-left: 5px !important;
259         margin-right: 5px !important;
260 }
261
262 .loadingTab tr{
263         background-color: transparent !important;
264 }
265
266 ::-webkit-scrollbar {
267         height: 4px;
268         width: 10px;
269 }
270
271 ::-webkit-scrollbar-track {
272         background: #fafafa;
273 }
274
275 ::-webkit-scrollbar-thumb {
276         -webkit-border-radius: 5px;
277         border-radius: 5px;
278         background: #2692b7;
279 }
280
281 body::-webkit-scrollbar {
282         width: 10px;
283 }
284
285 body::-webkit-scrollbar-track {
286         background: #23232c;
287 }
288
289 body::-webkit-scrollbar-thumb {
290         background: #2692b7;
291 }
292
293 footer.page-footer{
294         width: 100%;
295         bottom:0;
296         position: fixed;
297         left: 0;
298         height: 50px;
299         padding-left: 12px;
300         z-index: 99;
301         padding-top: 0;
302         color: rgba(255,255,255,0.7);
303         -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 75%);
304 }
305
306 a.single-cover {
307   position: relative;
308   display: inline-block;
309 }
310
311 .preview_controls {
312         opacity: 0;
313   display: block;
314   background: rgba(0, 0, 0, .5);
315         width: 56px;
316         height: 56px;
317         text-align: center;
318         line-height: 56px;
319   position: absolute;
320         border-radius: 5px;
321   top: 0;
322   right: 0;
323 }
324 .rounded{
325         border-radius: 5px;
326 }
327
328 input, button, textarea, :focus {
329     outline: none; /* You should add some other style for :focus to help UX/a11y */
330 }
331
332 a:not([draggable=true]), img:not([draggable=true]) {
333     -webkit-user-drag: none;
334     user-drag: none; /* Technically not supported in Electron yet */
335 }
336 a[href^="http://"],
337 a[href^="https://"],
338 a[href^="ftp://"] {
339     -webkit-user-drag: auto;
340     user-drag: auto; /* Technically not supported in Electron yet */
341 }
342 .preview_playlist_controls{
343         cursor:pointer;
344 }
345 .toast{
346         justify-content: normal !important;
347 }
348
349 .brand-logo{
350         margin-left: 0px !important;
351 }
352
353 .btn{
354         overflow: hidden;
355 }
356
357 .resultLink{
358         cursor:pointer;
359         text-decoration: underline;
360 }