aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player/settings-menu.scss
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/player/settings-menu.scss')
-rw-r--r--client/src/sass/player/settings-menu.scss180
1 files changed, 180 insertions, 0 deletions
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
new file mode 100644
index 000000000..6c213c5d1
--- /dev/null
+++ b/client/src/sass/player/settings-menu.scss
@@ -0,0 +1,180 @@
1@import '_variables';
2@import '_mixins';
3@import './_player-variables';
4
5$setting-transition-duration: 0.15s;
6$setting-transition-easing: ease-out;
7
8/* Sass for videojs-settings-menu */
9
10.video-js {
11
12 .vjs-settings {
13 @include disable-outline;
14
15 cursor: pointer;
16 width: 37px;
17
18 .vjs-icon-placeholder {
19 display: inline-block;
20 width: 17px;
21 height: 17px;
22 vertical-align: middle;
23 background: url('#{$assets-path}/player/images/settings.svg') no-repeat;
24 background-size: contain;
25
26 &::before {
27 content: '';
28 }
29 }
30 }
31
32 .vjs-settings-sub-menu-title {
33 width: 4em;
34 text-transform: initial;
35 }
36
37 .vjs-settings-dialog {
38 position: absolute;
39 right: .5em;
40 bottom: 3.5em;
41 color: $primary-foreground-color;
42 opacity: $primary-foreground-opacity;
43 margin: 0 auto;
44 font-size: $font-size !important;
45
46 width: auto;
47 overflow: hidden;
48
49 transition: width $setting-transition-duration $setting-transition-easing, height $setting-transition-duration $setting-transition-easing;
50
51 .vjs-settings-sub-menu-value,
52 .vjs-settings-sub-menu-title {
53 display: table-cell;
54 padding: 0 5px;
55 }
56
57 .vjs-settings-sub-menu-title {
58 text-align: left;
59 font-weight: $font-semibold;
60 }
61
62 .vjs-settings-sub-menu-value {
63 width: 100%;
64 text-align: right;
65
66 small {
67 font-size: 0.85em;
68 opacity: 0.8;
69 }
70 }
71
72 .vjs-settings-panel {
73 position: absolute;
74 bottom: 0;
75 right: 0;
76 overflow-y: auto;
77 overflow-x: hidden;
78 border-radius: 1px;
79 }
80
81 .vjs-settings-panel-child {
82 display: flex;
83
84 align-items: flex-end;
85 white-space: nowrap;
86
87 &:focus,
88 &:active {
89 outline: none;
90 }
91
92 > .vjs-menu {
93 flex: 1;
94 min-width: 200px;
95 }
96
97 > .vjs-menu,
98 > .vjs-settings-sub-menu {
99 transition: all $setting-transition-duration $setting-transition-easing;
100
101 .vjs-menu-item {
102
103 &:hover {
104 background-color: rgba(255, 255, 255, 0.2);
105 }
106
107 &:first-child {
108 margin-top: 5px;
109 }
110
111 &:last-child {
112 margin-bottom: 5px;
113 }
114 }
115
116 li {
117 font-size: 1em;
118 text-transform: initial;
119
120 &:hover {
121 cursor: pointer;
122 }
123 }
124 }
125
126 > .vjs-menu {
127 .vjs-menu-item {
128 padding: 8px 16px;
129 }
130
131 .vjs-settings-sub-menu-value::after {
132 @include chevron-right(9px, 2px);
133
134 margin-left: 5px;
135 }
136 }
137
138 > .vjs-settings-sub-menu {
139 width: 80px;
140
141 .vjs-menu-item {
142 outline: 0;
143 font-weight: $font-semibold;
144
145 padding: 5px 8px;
146 text-align: right;
147
148 &.vjs-back-button {
149 background-color: inherit;
150 padding: 8px 8px 13px 8px;
151 margin-bottom: 5px;
152 border-bottom: 1px solid grey;
153
154 &::before {
155 @include chevron-left(9px, 2px);
156
157 margin-right: 5px;
158 }
159 }
160
161 &.vjs-selected {
162 background-color: inherit;
163 color: inherit;
164 position: relative;
165
166 &::before {
167 @include icon(15px);
168
169 position: absolute;
170 left: 8px;
171 content: ' ';
172 margin-top: 1px;
173 background-image: url('#{$assets-path}/player/images/tick.svg');
174 }
175 }
176 }
177 }
178 }
179 }
180} \ No newline at end of file