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