client/src/sass/player/settings-menu.scss

   1 @use '_variables';
   2 @use '_mixins';
   3 @use './_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: 33px;
  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: pvar(--embedForegroundColor);
  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       text-transform: capitalize;
  56     }
  57
  58     .vjs-settings-sub-menu-title {
  59       text-align: start;
  60       font-weight: $font-semibold;
  61     }
  62
  63     .vjs-settings-sub-menu-value {
  64       width: 100%;
  65       text-align: end;
  66
  67       small {
  68         font-size: 0.85em;
  69         opacity: 0.8;
  70       }
  71     }
  72
  73     .vjs-settings-panel {
  74       position: absolute;
  75       bottom: 0;
  76       right: 0;
  77       overflow-y: auto;
  78       overflow-x: hidden;
  79       border-radius: 1px;
  80     }
  81
  82     .vjs-settings-panel-child {
  83       display: flex;
  84
  85       align-items: flex-end;
  86       white-space: nowrap;
  87
  88       &:focus,
  89       &:active {
  90         outline: none;
  91       }
  92
  93       > .vjs-menu {
  94         flex: 1;
  95         min-width: 200px;
  96       }
  97
  98       > .vjs-menu,
  99       > .vjs-settings-sub-menu {
 100         transition: all $setting-transition-duration $setting-transition-easing;
 101
 102         .vjs-menu-item {
 103           font-size: 1em;
 104           text-transform: initial;
 105
 106           &:hover {
 107             cursor: pointer;
 108             background-color: rgba(255, 255, 255, 0.2);
 109           }
 110
 111           &:first-child {
 112             margin-top: 5px;
 113           }
 114
 115           &:last-child {
 116             margin-bottom: 5px;
 117           }
 118
 119           &.disabled {
 120             opacity: 0.5;
 121             cursor: default !important;
 122             background-color: inherit !important;
 123           }
 124         }
 125       }
 126
 127       > .vjs-menu {
 128         .vjs-menu-item {
 129           padding: 8px 16px;
 130         }
 131
 132         .vjs-settings-sub-menu-value::after {
 133           @include chevron-right(9px, 2px);
 134
 135           @include margin-left(5px);
 136         }
 137       }
 138
 139       > .vjs-settings-sub-menu {
 140         width: 80px;
 141
 142         .vjs-menu-item {
 143           outline: 0;
 144           font-weight: $font-semibold;
 145           text-align: end;
 146           padding: 5px 8px;
 147
 148           &.vjs-back-button {
 149             background-color: inherit;
 150             padding: 8px 8px 13px 12px;
 151             margin-bottom: 5px;
 152             border-bottom: 1px solid #808080;
 153             text-align: start;
 154
 155             &::before {
 156               @include chevron-left(9px, 2px);
 157
 158               @include margin-right(5px);
 159             }
 160           }
 161
 162           &.vjs-selected {
 163             background-color: inherit;
 164             color: inherit;
 165             position: relative;
 166
 167             &::before {
 168               @include icon(15px);
 169
 170               position: absolute;
 171               left: 8px;
 172               content: ' ';
 173               margin-top: 1px;
 174               background-image: url('#{$assets-path}/player/images/tick-white.svg');
 175             }
 176           }
 177         }
 178
 179         // Special captions case
 180         // Bigger caption button
 181         &.vjs-captions-button {
 182           width: 200px;
 183
 184           .vjs-menu-item {
 185             text-align: start;
 186
 187             .vjs-menu-item-text {
 188               @include margin-left(25px);
 189               text-transform: capitalize;
 190             }
 191           }
 192         }
 193
 194         .vjs-menu {
 195           width: inherit;
 196         }
 197       }
 198     }
 199   }
 200 }