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

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