web: Modernize with Bower, Bootstrap, LESS
[ffmpeg-web.git] / src / less / style.less
1 // Author: db0 (db0company@gmail.com, http://db0.fr/)
2
3 // ************************************************************************* //
4 // COLORS
5
6 @Cmain: #313131;
7 @Cmaindark: darken(@Cmain, 5%);
8 @Cmaindarkdark: darken(@Cmaindark, 5%);
9 @Cmainlight: lighten(@Cmain, 5%);
10 @Cmainlightlight: lighten(@Cmainlight, 50%);
11 @Cborder: #101010;
12 @Cinvert: darken(#fff, 10%);
13 @Csecond: darken(#4cae4c, 0%);
14 @Cseconddark: darken(@Csecond, 10%);
15 @Cseconddarkdark: darken(@Cseconddark, 10%);
16 @Csecondlight: lighten(@Csecond, 15%);
17 @Csecondlightlight: lighten(@Csecondlight, 20%);
18
19 // ************************************************************************* //
20 // SIZES
21
22 @Smain: 100%;
23
24 // ************************************************************************* //
25 // Global
26
27 body {
28     background-color: @Cmain;
29     color: @Cinvert;
30     text-align: justify;
31 }
32
33 body, h1, h2, h3, h4, h5, h6 {
34     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Verdana, Tahoma, sans-serif;
35 }
36
37 a {
38     color: @Csecond;
39     strong {
40         color: @Cinvert;
41     }
42     &:hover {
43         color: @Csecondlight;
44         strong {
45             color: @Csecond;
46         }
47     }
48 }
49
50  
51 main {
52     width: @Smain !important;
53     min-height: 600px;
54     margin: auto;
55 }
56
57 h1, h2, h3, h4 {
58     font-weight: bold;
59     text-align: left;
60 }
61
62 h1, h2, h3 {
63     color: @Cmainlightlight;
64     strong {
65         color: @Cinvert;
66     }
67 }
68
69 h4, h5, h6 {
70     color: @Cseconddark;
71 }
72
73 h1 {
74   border-bottom: 4px @Cmainlightlight solid;
75   padding: 20px 2%;
76 }
77
78 h3 {
79   border-bottom: 2px @Cmainlightlight solid;
80   padding: 15px 1%;
81 }
82
83 h4 {
84     border-bottom: 1px solid @Cinvert;
85     padding: 10px 0;
86     margin: 20px 0;
87     color: @Cinvert;
88 }
89
90 .list-group {
91     .list-group-item {
92         background-color: @Cmainlight;
93         border-color: black;
94     }
95     &.list-group-big .list-group-item {
96         padding: 25px;
97     }
98     a.list-group-item {
99         color: @Csecondlight;
100         &:hover {
101             background-color: @Cmain;
102             color: @Csecond;
103         }
104     }
105 }
106
107
108 .well {
109     background-color: @Cmaindark;
110     border-color: black;
111     color: @Cmainlightlight;
112     strong {
113         color: @Cinvert;
114     }
115     code {
116         background-color: @Cmain;
117     }
118     hr {
119         border-color: @Cseconddark;
120     }
121     h3 {
122         margin: 5px 0 15px 0;
123         border: 0;
124         padding: 0;
125     }
126     a {
127         color: @Csecond;
128     }
129     a.btn {
130         color: white;
131     }
132     small {
133         display: block;
134         padding: 0 10px;
135         font-style: italic;
136     }
137     &.example {
138         padding-top: 40px;
139         margin-bottom: 130px;
140         pre {
141             margin: 50px;
142             margin-bottom: 30px;
143             font-size: 1.5em;
144         }
145         .btn {
146             margin-right: 50px;
147             margin-bottom: 20px;
148         }
149     }
150     &.well-with-icon {
151         min-height: 136px;
152         .pull-right, .pull-left {
153             background-color: @Csecond;
154             color: @Cinvert;
155             padding: 10px;
156             border-radius: 5px;
157             margin: 5px;
158         }
159         .pull-right {
160             margin-left: 20px;
161         }
162         .pull-left {
163             margin-right: 20px;
164         }
165     }
166 }
167
168 a.well {
169     display: block;
170     &:hover {
171         text-decoration: none;
172         opacity: 0.8;
173         /* background-color: @Cmain; */
174         /* border-color: @Csecondlight; */
175         /* &.well-with-icon { */
176         /*     .pull-right, .pull-left { */
177         /*      background-color: @Csecondlight; */
178         /*     } */
179         /* } */
180     }
181 }
182
183 .info {
184     margin: 10px;
185     padding: 10px;
186     background-color: @Cmainlight;
187     border-left: 10px @Csecond solid;
188     color: @Cinvert;
189     code {
190         background-color: @Cmain;
191     }
192 }
193
194 .with-icon {
195     padding: 30px;
196     .pull-left {
197         padding-right: 30px;
198     }
199     .pull-right {
200         padding-left: 30px;
201     }
202 }
203
204 dd {
205     margin-left: 20px;
206 }
207
208 code {
209     background-color: @Cmaindark;
210     color: @Csecondlight;
211     display: inline-block;
212     margin: 5px;
213 }
214
215 .table {
216     margin: 20px 0;
217     border-radius: 4px;
218     th, td, tr {
219         border: 1px solid @Cmaindarkdark;
220     }
221     tr {
222         th {
223             background-color: @Cmainlight;
224             border-bottom: 2px solid @Cinvert;
225         }
226     }
227     tr:nth-child(odd) {
228         background-color: @Cmaindark;
229     }
230 }
231
232 // ************************************************************************* //
233 // Menu side bar nav
234
235 #sidebar-wrapper, .navbar {
236     background-color: @Cmaindarkdark;
237     .sidebar-brand, .navbar-brand {
238         img {
239             opacity: 0.6;
240             margin-right: 8px;
241         }
242         &:hover {
243             color: #fff;
244             img {
245                 opacity: 1;
246             }
247         }
248     }
249     .sidebar-nav {
250         li ul {
251             list-style-type: none;
252             padding: 0;
253             li {
254                 line-height: 20px;
255                 a {
256                     padding-left: 20px;
257                 }
258             }
259         }
260     }
261 }
262
263 .content-header {
264     height: auto;
265     background-color: @Cmaindark;
266     h1 {
267         color: @Cinvert;
268         display: block;
269         margin: 0;
270         margin-bottom: 20px;
271         line-height: normal;
272         border-bottom: none;
273     }
274 }
275
276 // ************************************************************************* //
277 // Download & Index page
278
279 #download, #index {
280
281     h4 {
282         margin-top: 180px;
283     }
284     h4.first {
285         margin-top: 20px;
286         small {
287             color: inherit;
288             font-size: 1em;
289         }
290     }
291
292     .btn-download-wrapper {
293         text-align: center;
294         margin: 160px auto;
295         .btn {
296             font-size: 3em;
297             padding: 3%;
298             display: inline-block;
299             margin-bottom: 5px;
300         }
301         small {
302             display: block;
303             font-size: 0.4em;
304         }
305     }
306     h2.description {
307         color: @Cinvert;
308         font-size: 2em;
309         font-weight: bold;
310         margin: 120px 50px;
311         line-height: 2em;
312         .label {
313             font-size: 0.5em;
314         }
315     }
316 }
317
318 #download {
319     .btn-download-wrapper {
320         margin: 40px auto;
321     }
322     .os-selector {
323         text-align: center;
324         color: @Cinvert;
325         margin: 30px 0;
326         a.btn-build {
327             color: @Cinvert;
328             display: block;
329             padding: 20px;
330             border-radius: 2px;
331         }
332         @linuxcolor: #e43;
333         @windowscolor: #06a;
334         @maccolor: darkgrey;
335         .btn-build[href="#build-linux"] {
336             background-color: @linuxcolor;
337             &:hover {
338                 color: @linuxcolor;
339                 background-color: @Cinvert;
340             }
341         }
342         .btn-build[href="#build-windows"] {
343             background-color: @windowscolor;
344             &:hover {
345                 color: @windowscolor;
346                 background-color: @Cinvert;
347             }
348         }
349         .btn-build[href="#build-mac"] {
350             background-color: @maccolor;
351             &:hover {
352                 color: @maccolor;
353                 background-color: @Cinvert;
354             }
355         }
356         .tab-content {
357             margin-top: 20px;
358         }
359         #build-linux {
360             h3 {
361                 color: @linuxcolor;
362             }
363         }
364         #build-windows {
365             h3 {
366                 color: @windowscolor;
367             }
368         }
369         #build-mac {
370             h3 {
371                 color: @maccolor;
372             }
373         }
374     }
375 }
376
377 // ************************************************************************* //
378 // Footer
379
380 footer {
381     background-color: @Cmaindark;
382     border-top: 1px @Cborder solid;
383     padding: 20px ((100%-@Smain)/2);
384     a {
385         display: block;
386     }
387     img[alt="FFmpeg"] {
388         width: 50%;
389         display: block;
390         margin: auto;
391     }
392 }