templates/sass/salida.sass


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

$asana: #067ab4
$blanco: #fff
$copyleft: #1aafff
$enlace: #2dde98
$fondo: #2d3743
$green:  #5cb85c
$red: #fc636b
$submit: #3895ea

body
    background: $fondo
    color: $blanco

a.enlace
    color: $copyleft
    text-decoration: none
    &:hover
        color: $enlace

.contenedor
    margin: auto
    width: 100%
    max-width: 800px
    display: flex
    flex-direction: column
    flex-wrap: wrap
    align-items: center

    .libreyt
        padding-bottom: 20px

        .row
            display: flex
            width: 80%
            max-width: 400px
            flex-direction: row
            flex-wrap: wrap
            align-items: center
            justify-content: center

            .imageyt
                flex: 1 0 30%
                max-width: 40%
                padding: 0px 15px

                img
                    width: 100%
                    vertical-align: middle

            .features
                flex: 0
                min-height: 1px
                max-height: 100%
                position: relative
                padding: 0px 15px

                .yt-titulo
                    font-weight: 700
                    font-size: 1rem
                    line-height: 24px

.contenedor
    .row
        line-height: 2.5

        .col
            text-align: center
            padding: 0px 15px

            .boton-descarga
                padding: 2px 5px
                font-size: 12px
                border-radius: 3px
                color: $blanco
                background-color: $green
                border-color: $green
                text-decoration: none

.librevideojs
    width: 90%
    max-width: 700px

.mpv
    margin-bottom: .5rem
    margin-top: 0

header
    display: flex
    width: 90%
    padding: 20px 0px
    justify-content: center

    a.drm-free
        align-items: center
        height: auto
        opacity: .5
        transition: opacity 150ms

        &:before
            content: url("../images/drm-free.png")
            vertical-align: top
            display: block
            position: absolute
            top: 12px
            left: 12px
            max-width: 120px
            width: 100%

        &:hover
            opacity: 1

h2,h3,h5,h6
    margin-top: 0
    margin-bottom: 0
    line-height: 1.1

hr
    width: 100%

section
    width: 100%

h2
    text-align: center

footer
    p.copyleft
        font-size: 12px
        text-align: center

@media screen and (max-width: 768px)
    header
        a.drm-free
            &:before
                display: none