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

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