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