init

liuxiaolong

2019-05-06 8700cf1dc46c350371d865532c2914595187788e

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
@import '~@/vendor/styles/_custom-variables/libs';
 
$plyr-range-track-height: 4px !default;
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-width: 14px !default;
$plyr-audio-controls-border: none !default;
$plyr-progress-loading-size: 15px !default;
$plyr-audio-controls-bg: transparent !default;
$plyr-audio-progress-bg: rgba(0,0,0,.1) !default;
$plyr-control-spacing: 10px !default;
$plyr-bp-screen-sm: 480px !default;
$plyr-bp-screen-md: 768px !default;
 
@import "~node_modules/plyr/src/scss/plyr.scss";
 
.plyr--audio .plyr__controls {
  padding: 0;
}
 
[dir=rtl] {
  .plyr {
    direction: rtl;
  }
 
  .plyr__play-large {
    transform: translate(-50%, -50%) scaleX(-1);
  }
 
  .plyr__controls > button svg {
    transform: scaleX(-1);
  }
 
  .plyr__controls > button,
  .plyr__controls .plyr__progress,
  .plyr__controls .plyr__time {
    margin-right: ($plyr-control-spacing / 2);
    margin-left: 0;
 
    &:first-child {
      margin-right: 0;
    }
  }
 
  .plyr__controls .plyr__volume {
    margin-right: ($plyr-control-spacing / 2);
    margin-left: 0;
  }
 
  .plyr__controls [data-plyr="pause"] {
    margin-right: 0;
  }
 
  @media (min-width: $plyr-bp-screen-sm) {
    .plyr__controls > button,
    .plyr__controls .plyr__progress,
    .plyr__controls .plyr__time {
      margin-right: $plyr-control-spacing;
      margin-left: 0;
    }
  }
 
  .plyr__progress--played,
  .plyr__volume--display {
    &::-webkit-progress-value {
      border-radius: 100px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
 
    &::-moz-progress-bar {
      border-radius: 100px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
 
  .plyr__time + .plyr__time {
    display: none;
 
    @media (min-width: $plyr-bp-screen-md) {
      display: inline-block;
    }
 
    &::before {
      margin-right: 0;
      margin-left: $plyr-control-spacing;
    }
  }
}
 
.default-style {
  @import "~@/vendor/styles/_appwork/include";
 
  .plyr {
    font-family: $font-family-sans-serif;
  }
 
  .plyr--audio .plyr__progress--buffer {
    color: $gray-200;
  }
  .plyr--audio.plyr--loading .plyr__progress--buffer {
    background-color: $gray-200;
  }
 
  .plyr__tooltip {
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }
}
 
.material-style {
  @import "~@/vendor/styles/_appwork/include-material";
 
  .plyr {
    font-family: $font-family-sans-serif;
  }
 
  .plyr--audio .plyr__progress--buffer {
    color: $gray-200;
  }
  .plyr--audio.plyr--loading .plyr__progress--buffer {
    background-color: $gray-200;
  }
 
  .plyr__tooltip {
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }
}