aboutsummaryrefslogtreecommitdiffstats
path: root/src/less/variables.less
blob: dd862f3f2495c4bce642593158812a761369f0a9 (plain)
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
// ==========================================================================
// Plyr variables
// https://github.com/sampotts/plyr
// ==========================================================================

// Settings
@plyr-border-box:                       true;
@plyr-touch-action:                     true;
@plyr-sr-only-important:                true;

// Colors
@plyr-color-main:                       #20d193;

// Font
@plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small:                  14px;
@plyr-font-size-base:                   16px;

// Captions
@plyr-captions-bg:                      fade(#000, 60%);
@plyr-captions-color:                   #fff;
@plyr-font-size-captions-base:          @plyr-font-size-base;
@plyr-font-size-captions-medium:        ceil(@plyr-font-size-base * 1.5);
@plyr-font-size-captions-large:         (@plyr-font-size-base * 2);

// Controls
@plyr-control-icon-size:                18px;
@plyr-control-spacing:                  10px;
@plyr-control-padding:                  (@plyr-control-spacing * .7);
@plyr-video-controls-bg:                #000;
@plyr-video-control-color:              #fff;
@plyr-video-control-color-hover:        #fff;
@plyr-video-control-bg-hover:           @plyr-color-main;
@plyr-audio-controls-bg:                #fff;
@plyr-audio-controls-border:            1px solid #dbe3e8;
@plyr-audio-control-color:              #565D64;
@plyr-audio-control-color-hover:        #fff;
@plyr-audio-control-bg-hover:           @plyr-color-main;

// Tooltips
@plyr-tooltip-bg:                       fade(#343f4a, 90%);
@plyr-tooltip-color:                    #fff;
@plyr-tooltip-padding:                  (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size:               4px;
@plyr-tooltip-radius:                   3px;

// Menus
@plyr-menu-bg:                          @plyr-tooltip-bg;
@plyr-menu-color:                       @plyr-tooltip-color;
@plyr-menu-arrow-size:                  6px;

// Progress
@plyr-progress-loading-size:            25px;
@plyr-progress-loading-bg:              fade(#343f4a, 20%);
@plyr-video-progress-bg:                fade(#fff, 25%);
@plyr-video-progress-buffered-bg:       @plyr-video-progress-bg;
@plyr-audio-progress-bg:                fade(#C6D6DB, 66%);
@plyr-audio-progress-buffered-bg:       @plyr-audio-progress-bg;

// Range sliders
@plyr-range-track-height:               8px;
@plyr-range-thumb-height:               floor(@plyr-range-track-height * 2);
@plyr-range-thumb-width:                floor(@plyr-range-track-height * 2);
@plyr-range-thumb-bg:                   #fff;
@plyr-range-thumb-border:               2px solid transparent;
@plyr-range-thumb-shadow:               0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%);
@plyr-range-thumb-active-border-color:  #fff;
@plyr-range-thumb-active-bg:            @plyr-video-control-bg-hover;
@plyr-range-thumb-active-scale:         1.25;
@plyr-video-range-track-bg:             @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg:             @plyr-audio-progress-buffered-bg;
@plyr-range-selected-bg:                @plyr-color-main;

// Breakpoints
@plyr-bp-screen-sm:                     480px;
@plyr-bp-screen-md:                     768px;
@plyr-bp-screen-lg:                     1024px;