@latest-thinking/lt-player 1.2.0 → 2.0.0-b

package/src/assets/sass/sections/_settings.scss

@@ -1,504 +0,0 @@
-@import "../abstracts/variables";
-
-.settings-dialog {
-  background: $default-lt-player-white;
-  padding: 0;
-  width: 100%;
-  max-width: 375px;
-  border: none;
-  z-index: 10;
-
-  &::backdrop {
-    background-color: rgba($default-lt-button-color, .75);
-  }
-
-  .settings-controllers {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .line-button {
-    @extend %line-button;
-    display: none;
-  }
-
-  .settings-text {
-    font-size: $lt-player-font-size-base;
-    font-weight: $lt-player-font-weight-sm;
-    color: $default-lt-button-color !important;
-    margin: 0;
-  }
-
-  .settings-controllers-enable {
-    &__speed-range {
-      padding: 24px 24px 0 24px;
-      align-items: center;
-      color: $default-lt-player-black;
-      display: flex;
-      position: relative;
-
-      .speed-range-input-body {
-        color: $default-lt-player-black;
-        width: 65%;
-        margin-left: auto;
-        position: relative;
-
-        output {
-          font-size: $lt-player-font-size-base;
-          font-weight: $lt-player-font-weight-lg;
-          color: $default-lt-player-blue;
-          position: absolute;
-          left: 50%;
-          top: -20px;
-        }
-
-        .speed-range-input::-webkit-slider-thumb {
-          @extend %input-range--webkit-slider-thumb;
-          border: 7px solid $default-lt-player-blue;
-          height: 20px;
-          width: 20px;
-          background: $default-lt-player-white;
-          margin-top: -9.5px;
-        }
-
-        .speed-range-input::-moz-range-thumb {
-          @extend %input-range--moz-range-thumb;
-          color: $default-lt-player-white;
-          box-shadow: none;
-          border: 7px solid $default-lt-player-blue;
-          background: $default-lt-player-white;
-        }
-
-        .speed-range-input::-ms-thumb {
-          @extend %input-range--ms-thumb;
-          margin-top: 3px;
-          box-shadow: 1px 1px 1px $default-lt-player-white;
-          border: 7px solid $default-lt-player-blue;
-          height: 20px;
-          width: 20px;
-          background: $default-lt-player-white;
-        }
-
-        .speed-range-input {
-          color: $default-lt-player-blue;
-          height: 32px;
-          cursor: pointer;
-          width: 100%;
-          appearance: none;
-        }
-
-        .speed-range-input::-webkit-slider-runnable-track {
-          @extend %input-range--webkit-slider-runnable-track;
-          color: $default-lt-player-blue;
-          background: $default-lt-player-blue;
-        }
-
-        .speed-range-input::-moz-range-track {
-          @extend %input-range--moz-range-track;
-          color: $default-lt-player-blue;
-          background: $default-lt-player-blue;
-
-        }
-
-        .speed-range-input::-ms-track {
-          @extend %input-range--ms-track;
-          color: $default-lt-player-blue;
-          background: $default-lt-player-blue;
-        }
-
-        .speed-range-input::-moz-range-progress {
-          @extend %input-range--moz-range-progress;
-          height: 4px;
-        }
-      }
-    }
-
-    &__subtitles {
-      display: flex;
-      justify-content: space-between;
-      padding: 16px 24px 0 24px;
-      align-items: center;
-
-      .subtitles-body__input-switch:checked + .subtitles-body__slider {
-        background-color: $default_color_player;
-      }
-
-      .subtitles-body__input-switch:checked + .subtitles-body__slider::before {
-        -webkit-transform: translateX(26px);
-        -ms-transform: translateX(26px);
-        transform: translateX(26px);
-      }
-
-      .subtitles-body {
-        &__switch {
-          z-index: 4;
-          position: relative;
-          display: inline-block;
-          min-width: 60px;
-          height: 34px;
-          margin-left: 10px;
-        }
-
-        &__input-switch {
-          opacity: 0;
-          width: 0;
-          height: 0;
-          accent-color: #D8D846;
-          margin: 0;
-          font-family: inherit;
-          font-size: inherit;
-          line-height: inherit;
-        }
-
-        &__slider {
-          position: absolute;
-          cursor: pointer;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: #E6E6E6;
-          -webkit-transition: 0.4s;
-          transition: 0.4s;
-          display: inline-block;
-          margin-bottom: 0!important;
-          margin-top: 0!important;
-        }
-
-        &__slider:focus {
-          box-shadow: 0 0 1px #D8D846;
-        }
-
-        &__slider:before {
-          width: 26px;
-          height: 26px;
-          background-color: $default-lt-player-white;
-          position: absolute;
-          content: "";
-          left: 4px;
-          bottom: 4px;
-          -webkit-transition: 0.4s;
-          transition: 0.4s;
-        }
-      }
-    }
-
-    &__button-save {
-      padding: 16px 20px 20px 20px;
-      color: black;
-      display: flex;
-      justify-content: left;
-
-      .button-save {
-        @extend %lt-player-btn;
-        @include yellow-btn;
-        padding: 12px 32px;
-      }
-    }
-
-    &__exit-button {
-      padding: 16px;
-
-      span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0.2em;
-      }
-
-      span:hover {
-        color: black;
-      }
-    }
-
-    &__background {
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      background: #27282A;
-      opacity: 0.75;
-      z-index: 10;
-    }
-  }
-}
-
-.plyr {
-  &__controls {
-    .settings-controllers {
-      position: absolute;
-      width: 100%;
-      z-index: 5;
-      left: 0;
-      background: $default-lt-player-white;
-      border-radius: 0 0 0 30px;
-      bottom: 0;
-      opacity: 0;
-
-      .line-button {
-        @extend %line-button;
-      }
-
-      .settings-text {
-        font-size: $lt-player-font-size-base;
-        font-weight: $lt-player-font-weight-sm;
-        color: $default-lt-button-color !important;
-        margin: 0;
-      }
-    }
-
-    .settings-controllers-enable {
-      position: absolute;
-      width: 100%;
-      z-index: 30;
-      left: 0;
-      background: $default-lt-player-white;
-      border-radius: 0 0 0 30px;
-      bottom: 0;
-      opacity: 1;
-      display: flex;
-      flex-direction: column;
-      padding: 0 0 24px 0;
-      border: 1px solid $default-lt-span-color;
-
-      &__speed-range {
-        padding: 24px 24px 0 24px;
-        align-items: center;
-        color: $default-lt-player-black;
-        display: flex;
-        position: relative;
-
-        .mobile {
-          display: flex;
-          width: 80%!important;
-        }
-
-        .speed-range-input-body {
-          color: $default-lt-player-black;
-          width: 65%;
-          margin-left: auto;
-          position: relative;
-
-          button {
-            color: #27282A;
-            background-color: #D8D846;
-            width: 16%;
-            margin: 0 2px;
-          }
-
-          .button_active {
-            background-color: #27282A;
-            color: grey;
-          }
-
-
-          output {
-            font-size: $lt-player-font-size-base;
-            font-weight: $lt-player-font-weight-lg;
-            color: $default-lt-player-blue;
-            position: absolute;
-            left: 50%;
-            top: -20px;
-          }
-
-          .speed-range-input::-webkit-slider-thumb {
-            @extend %input-range--webkit-slider-thumb;
-            border: 7px solid $default-lt-player-blue;
-            height: 20px;
-            width: 20px;
-            background: $default-lt-player-white;
-            margin-top: -9.5px;
-          }
-
-          .speed-range-input::-moz-range-thumb {
-            @extend %input-range--moz-range-thumb;
-            color: $default-lt-player-white;
-            box-shadow: none;
-            border: 7px solid $default-lt-player-blue;
-            background: $default-lt-player-white;
-          }
-
-          .speed-range-input::-ms-thumb {
-            @extend %input-range--ms-thumb;
-            margin-top: 3px;
-            box-shadow: 1px 1px 1px $default-lt-player-white;
-            border: 7px solid $default-lt-player-blue;
-            height: 20px;
-            width: 20px;
-            background: $default-lt-player-white;
-          }
-
-          .speed-range-input {
-            color: $default-lt-player-blue;
-            height: 32px;
-            cursor: pointer;
-          }
-
-          .speed-range-input::-webkit-slider-runnable-track {
-            @extend %input-range--webkit-slider-runnable-track;
-            color: $default-lt-player-blue;
-            background: $default-lt-player-blue;
-          }
-
-          .speed-range-input::-moz-range-track {
-            @extend %input-range--moz-range-track;
-            color: $default-lt-player-blue;
-            background: $default-lt-player-blue;
-
-          }
-
-          .speed-range-input::-ms-track {
-            @extend %input-range--ms-track;
-            color: $default-lt-player-blue;
-            background: $default-lt-player-blue;
-          }
-
-          .speed-range-input::-moz-range-progress {
-            @extend %input-range--moz-range-progress;
-            height: 4px;
-          }
-        }
-      }
-
-      &__subtitles {
-        display: flex;
-        justify-content: space-between;
-        padding: 16px 24px 0 24px;
-        align-items: center;
-
-        .subtitles-body__input-switch:checked + .subtitles-body__slider {
-          background-color: $default_color_player;
-        }
-
-        .subtitles-body__input-switch:checked + .subtitles-body__slider::before {
-          -webkit-transform: translateX(26px);
-          -ms-transform: translateX(26px);
-          transform: translateX(26px);
-        }
-
-        .subtitles-body {
-          &__switch {
-            z-index: 4;
-            position: relative;
-            display: inline-block;
-            min-width: 60px;
-            height: 34px;
-            margin-left: 10px;
-          }
-
-          &__input-switch {
-            opacity: 0;
-            width: 0;
-            height: 0;
-            accent-color: #D8D846;
-            margin: 0;
-            font-family: inherit;
-            font-size: inherit;
-            line-height: inherit;
-          }
-
-          &__slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #E6E6E6;
-            -webkit-transition: 0.4s;
-            transition: 0.4s;
-            display: inline-block;
-            margin-bottom: 0!important;
-            margin-top: 0!important;
-          }
-
-          &__slider:focus {
-            box-shadow: 0 0 1px #D8D846;
-          }
-
-          &__slider:before {
-            width: 26px;
-            height: 26px;
-            background-color: $default-lt-player-white;
-            position: absolute;
-            content: "";
-            left: 4px;
-            bottom: 4px;
-            -webkit-transition: 0.4s;
-            transition: 0.4s;
-          }
-        }
-      }
-
-      &__button-save {
-        padding: 16px 24px 0 24px;
-        color: black;
-        display: flex;
-        justify-content: left;
-
-        .button-save {
-          @extend %lt-player-btn;
-          @include yellow-btn;
-          padding: 12px 32px;
-        }
-      }
-
-      &__exit-button {
-        padding: 16px;
-
-        span {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 0.2em;
-        }
-
-        span:hover {
-          color: black;
-        }
-      }
-
-      &__background {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        background: #27282A;
-        opacity: 0.75;
-        z-index: 10;
-      }
-    }
-  }
-}
-
-.lt-player-orientation--landscape {
-  .plyr {
-    &__controls {
-      .settings-controllers {
-        transition: none;
-      }
-
-      .settings-controllers-enable {
-        top: 50%;
-        left: 50%;
-        right: 0;
-        bottom: 0;
-        max-width: 345px;
-        height: fit-content;
-        transform: translate(-50%, -50%);
-        transition: none;
-        width: 100%;
-        border-radius: 0;
-        border: none;
-
-        &__subtitles {
-          padding: 16px 24px 0 24px;
-        }
-
-        .line-button {
-          display: none;
-        }
-      }
-    }
-  }
-}