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