7ac3bfb0fa9d95286b58b9899fc8f6443c6e0c05
[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 .valignicon{
123   vertical-align: middle !important;
124 }
125
126 #slide-out .background{
127         background-image: url("../img/bg.png");
128         -webkit-background-size: cover;
129         background-size: cover;
130         overflow: hidden;
131 }
132
133 #main_icon{
134         position: absolute;
135         margin-top: 32px;
136         top: 58px;
137         left: calc(50% - 37.5px);
138         width: 75px;
139         height: 75px;
140 }
141
142 nav {
143         background-image: url("../img/bg.png");
144         -webkit-background-size: cover;
145         background-size: cover;
146         overflow: auto;
147         position: relative;
148         height: auto;
149         top: -1px;
150         margin-top: 32px;
151         padding-bottom: 60px;
152         -webkit-clip-path: polygon(0 0, 0 60%, 100% 100%, 100% 0);
153         width: 100%;
154 }
155 .deezloader-black{
156         background-color: #23232c;
157 }
158
159 @media only screen and (max-width: 992px) {
160         #nav-mobile .left{
161                 margin-right: 0px;
162         }
163 }
164
165 @media only screen and (max-width: 600px) {
166         nav {
167                 padding-top: 0px;
168                 padding-bottom: 0px;
169         }
170         .container{
171                 margin: auto 0px;
172                 width: 100%
173         }
174         .modal{
175                 width: 100%;
176                 margin: 0px;
177                 max-height: 95%;
178                 height: 100% !important;
179                 top: 32px !important;
180         }
181         #main_icon{
182                 top: 4px;
183                 left: calc(50% - 25px);
184                 width: 50px;
185                 height: 50px;
186         }
187         .btn{
188                 padding-left: 16px;
189                 padding-right: 16px;
190         }
191         #modal_login_btn_signup, #modal_login_btn_login{
192                 margin-top: 8px;
193         }
194 }
195
196 nav .brand-logo{
197         margin-left: 24px;
198 }
199
200 nav .description {
201         font-size: 20px;
202         font-weight: 300;
203         padding: 8px 0;
204         margin: 0px;
205         padding-bottom: 20px;
206 }
207
208 nav .description:after {
209         content: "";
210         display: block;
211         width: 20%;
212         position: relative;
213         height: 2px;
214         background-color: #fff;
215         text-align: center;
216         margin: 0 auto;
217         top: 16px;
218         margin-bottom: 24px;
219 }
220
221 nav .brand-logo.left{
222         margin-left: 45px;
223 }
224
225 .nav-content{
226         background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%);
227         height: auto;
228 }
229
230 .container {
231         margin-top: 12px;
232         margin-bottom: 50px;
233 }
234 #tab-nav {
235         padding-left: 8px;
236         padding-right: 8px;
237 }
238
239 #main-content{
240         margin-top: 12px;
241 }
242
243 .inline-input-group {
244         width: 100%;
245         display: -webkit-box;
246         display: -webkit-flex;
247         display: flex;
248         overflow: hidden;
249         -webkit-box-pack: start;
250         -webkit-justify-content: flex-start;
251         justify-content: flex-start;
252         -webkit-align-content: space-between;
253         align-content: space-between;
254 }
255
256 .inline-input-group>* {
257         margin-left: 5px !important;
258         margin-right: 5px !important;
259 }
260
261 .loadingTab tr{
262         background-color: transparent !important;
263 }
264
265 ::-webkit-scrollbar {
266         height: 4px;
267         width: 10px;
268 }
269
270 ::-webkit-scrollbar-track {
271         background: #fafafa;
272 }
273
274 ::-webkit-scrollbar-thumb {
275         -webkit-border-radius: 5px;
276         border-radius: 5px;
277         background: #2692b7;
278 }
279
280 body::-webkit-scrollbar {
281         width: 10px;
282 }
283
284 body::-webkit-scrollbar-track {
285         background: #23232c;
286 }
287
288 body::-webkit-scrollbar-thumb {
289         background: #2692b7;
290 }
291
292 footer.page-footer{
293         width: 100%;
294         bottom:0;
295         position: fixed;
296         left: 0;
297         height: 50px;
298         padding-left: 12px;
299         z-index: 99;
300         padding-top: 0;
301         color: rgba(255,255,255,0.7);
302         -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 75%);
303 }
304
305 a.single-cover {
306   position: relative;
307   display: inline-block;
308 }
309
310 .preview_controls {
311         opacity: 0;
312   display: block;
313   background: rgba(0, 0, 0, .5);
314         width: 56px;
315         height: 56px;
316         text-align: center;
317         line-height: 56px;
318   position: absolute;
319         border-radius: 5px;
320   top: 0;
321   right: 0;
322 }
323 .rounded{
324         border-radius: 5px;
325 }
326
327 input, button, textarea, :focus {
328     outline: none; /* You should add some other style for :focus to help UX/a11y */
329 }
330
331 a:not([draggable=true]), img:not([draggable=true]) {
332     -webkit-user-drag: none;
333     user-drag: none; /* Technically not supported in Electron yet */
334 }
335 a[href^="http://"],
336 a[href^="https://"],
337 a[href^="ftp://"] {
338     -webkit-user-drag: auto;
339     user-drag: auto; /* Technically not supported in Electron yet */
340 }
341 .preview_playlist_controls{
342         cursor:pointer;
343 }
344 .toast{
345         justify-content: normal !important;
346 }
347
348 .brand-logo{
349         margin-left: 0px !important;
350 }
351
352 .btn{
353         overflow: hidden;
354 }
355
356 .resultLink{
357         cursor:pointer;
358         text-decoration: underline;
359 }