scss/popdowns/media.scss


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

@use "sass:color";
@use "../scheme";
@use "../lib";
@use "../font";

$-accent: scheme.$lavender;
$-accent2: scheme.$pink;

.media {
    @include lib.rounded(8);
    @include lib.border($-accent, 0.4, 2);
    @include lib.shadow;
    @include font.mono;

    background-color: scheme.$mantle;
    color: $-accent;
    padding: lib.s(12);
    font-size: lib.s(14);
    min-width: lib.s(500);
    min-height: lib.s(220);

    .icon {
        font-size: lib.s(32);
    }

    .overlay {
        @include lib.rounded(5);

        background-color: color.change(scheme.$mantle, $alpha: 0.8);
    }

    .background {
        @include lib.rounded(5);

        transition: background 300ms ease-in-out;
        background-color: scheme.$surface0;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .player {
        padding: lib.s(35) lib.s(12);
        font-weight: bold;

        @include lib.spacing(10, true);

        .title {
            font-size: lib.s(18);
        }

        .artist {
            color: scheme.$green;
        }

        .album {
            color: $-accent2;
        }

        .controls {
            margin-top: lib.s(3);

            @include lib.spacing(10);

            button {
                @include lib.rounded(4);
                @include lib.element-decel;
                @include lib.border(scheme.$base, 0.7);

                padding: lib.s(5) lib.s(12);
                font-size: lib.s(18);
                background-color: $-accent;
                color: scheme.$base;

                &:disabled {
                    background-color: scheme.$overlay2;
                }

                &:hover,
                &:focus {
                    background-color: color.change($-accent, $alpha: 0.8);
                }

                &:active {
                    background-color: color.change($-accent, $alpha: 0.6);
                }
            }
        }

        // Progress bar
        trough {
            @include lib.rounded(3);

            margin-top: lib.s(10);
            background-color: scheme.$surface0;

            highlight {
                @include lib.rounded(3);

                background-color: $-accent2;
                padding: lib.s(3) 0;
            }

            slider {
                @include lib.rounded(3);

                background-color: scheme.$overlay0;
                min-width: lib.s(15);
                min-height: lib.s(15);
            }
        }
    }
}