Implemented the new player.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / base / _icons.scss
1 /* ------------------------------
2     Base: Icons
3 ------------------------------ */
4
5 $icomoon-font-family: "wl" !default;
6 $icomoon-font-path:   "../fonts" !default;
7
8 $icon-liked: "\e900";
9 $icon-audio: "\e903";
10 $icon-book: "\e904";
11 $icon-eye: "\e905";
12 $icon-prev: "\e901";
13 $icon-next: "\e902";
14 $icon-play: "\e906";
15 $icon-pause: "\e907";
16 $icon-volume: "\e908";
17 $icon-mute: "\e909";
18 $icon-quote: "\e90a";
19 $icon-search: "\e90b";
20 $icon-acc-1: "\e90c";
21 $icon-acc-2: "\e90d";
22 $icon-acc-3: "\e90e";
23 $icon-all: "\e90f";
24 $icon-arrow-right: "\e910";
25 $icon-arrow-up: "\e911";
26 $icon-arrow-down: "\e912";
27 $icon-close: "\e913";
28
29 @font-face {
30   font-family: '#{$icomoon-font-family}';
31   src:
32     url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'),
33     url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'),
34     url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg');
35   font-weight: normal;
36   font-style: normal;
37   font-display: block;
38 }
39
40 [class^="icon-"], [class*=" icon-"] {
41   /* use !important to prevent issues with browser extensions that change fonts */
42   font-family: '#{$icomoon-font-family}' !important;
43   speak: never;
44   font-style: normal;
45   font-weight: normal;
46   font-variant: normal;
47   text-transform: none;
48   line-height: 1;
49
50   /* Better Font Rendering =========== */
51   -webkit-font-smoothing: antialiased;
52   -moz-osx-font-smoothing: grayscale;
53 }
54
55 .icon-liked {
56   &:before {
57     content: $icon-liked;
58   }
59 }
60 .icon-audio {
61   &:before {
62     content: $icon-audio;
63   }
64 }
65 .icon-book {
66   &:before {
67     content: $icon-book;
68   }
69 }
70 .icon-eye {
71   &:before {
72     content: $icon-eye;
73   }
74 }
75 .icon-prev {
76   &:before {
77     content: $icon-prev;
78   }
79 }
80 .icon-next {
81   &:before {
82     content: $icon-next;
83   }
84 }
85 .icon-play {
86   &:before {
87     content: $icon-play;
88   }
89 }
90 .jp-state-playing .icon-play,
91 .icon-pause {
92   &:before {
93     content: $icon-pause;
94   }
95 }
96 .icon-volume {
97   &:before {
98     content: $icon-volume;
99   }
100 }
101 .jp-state-muted .icon-volume,
102 .icon-mute {
103   &:before {
104     content: $icon-mute;
105   }
106 }
107 .icon-quote {
108   &:before {
109     content: $icon-quote;
110   }
111 }
112 .icon-search {
113   &:before {
114     content: $icon-search;
115   }
116 }
117 .icon-acc-1 {
118   &:before {
119     content: $icon-acc-1;
120   }
121 }
122 .icon-acc-2 {
123   &:before {
124     content: $icon-acc-2;
125   }
126 }
127 .icon-acc-3 {
128   &:before {
129     content: $icon-acc-3;
130   }
131 }
132 .icon-all {
133   &:before {
134     content: $icon-all;
135   }
136 }
137 .icon-arrow-right {
138   &:before {
139     content: $icon-arrow-right;
140   }
141 }
142 .icon-arrow-up {
143   &:before {
144     content: $icon-arrow-up;
145   }
146 }
147 .icon-arrow-down {
148   &:before {
149     content: $icon-arrow-down;
150   }
151 }
152 .icon-close {
153   &:before {
154     content: $icon-close;
155   }
156 }