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 }