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