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
136
137
138
139
140
141
142
143
144
145
146

$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: grid
    grid-template-columns: auto
    grid-template-rows: auto auto
    grid-gap: 1rem

    .libreyt
        .row
            display: flex
            width: 80%
            max-width: 400px
            flex-direction: row
            flex-wrap: wrap
            align-items: center
            justify-self: 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
    .v-download
        ul.download-dropdown-content
            padding-top: 1rem
            padding-bottom: 1rem
            background: black
            border: solid 1px #00b7f1
            li
                a
                    text-decoration: none
                    &:link
                        color: #22aaff

.librevideojs
    width: 90%
    max-width: 700px
    justify-self: center

.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,h4,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