Prvi commit

EveryThing/wwwroot/vendor/libs/plyr/_mixins.scss

@@ -0,0 +1,43 @@
+@import "../../css/_appwork/functions";
+
+@mixin plyr-theme($background, $color: null) {
+  $color: if($color, $color, yiq($background));
+
+  .plyr input[type='range']::-ms-fill-lower {
+    background: $background !important;
+  }
+
+  .plyr input[type='range']:active {
+    &::-webkit-slider-thumb {
+      background: $background !important;
+    }
+    &::-moz-range-thumb {
+      background: $background !important;
+    }
+    &::-ms-thumb {
+      background: $background !important;
+    }
+  }
+
+  .plyr--video .plyr__controls button.tab-focus:focus,
+  .plyr--video .plyr__controls button:hover {
+    background: $background !important;
+    color: $color !important;
+  }
+
+  .plyr--audio .plyr__controls button.tab-focus:focus,
+  .plyr--audio .plyr__controls button:hover {
+    background: $background !important;
+    color: $color !important;
+  }
+
+  .plyr__play-large {
+    background: $background !important;
+    color: $color !important;
+  }
+
+  .plyr__progress--played,
+  .plyr__volume--display {
+    color: $background !important;
+  }
+}

EveryThing/wwwroot/vendor/libs/plyr/plyr.scss

@@ -0,0 +1,129 @@
+@import '../../css/_custom-variables/libs';
+
+$plyr-range-track-height: 4px !default;
+$plyr-range-thumb-height: 14px !default;
+$plyr-range-thumb-width: 14px !default;
+$plyr-audio-controls-border: none !default;
+$plyr-progress-loading-size: 15px !default;
+$plyr-audio-controls-bg: transparent !default;
+$plyr-audio-progress-bg: rgba(0,0,0,.1) !default;
+$plyr-control-spacing: 10px !default;
+$plyr-bp-screen-sm: 480px !default;
+$plyr-bp-screen-md: 768px !default;
+
+@import "../../../../node_modules/plyr/src/scss/plyr.scss";
+
+.plyr--audio .plyr__controls {
+  padding: 0;
+}
+
+[dir=rtl] {
+  .plyr {
+    direction: rtl;
+  }
+
+  .plyr__play-large {
+    transform: translate(-50%, -50%) scaleX(-1);
+  }
+
+  .plyr__controls > button svg {
+    transform: scaleX(-1);
+  }
+
+  .plyr__controls > button,
+  .plyr__controls .plyr__progress,
+  .plyr__controls .plyr__time {
+    margin-right: ($plyr-control-spacing / 2);
+    margin-left: 0;
+
+    &:first-child {
+      margin-right: 0;
+    }
+  }
+
+  .plyr__controls .plyr__volume {
+    margin-right: ($plyr-control-spacing / 2);
+    margin-left: 0;
+  }
+
+  .plyr__controls [data-plyr="pause"] {
+    margin-right: 0;
+  }
+
+  @media (min-width: $plyr-bp-screen-sm) {
+    .plyr__controls > button,
+    .plyr__controls .plyr__progress,
+    .plyr__controls .plyr__time {
+      margin-right: $plyr-control-spacing;
+      margin-left: 0;
+    }
+  }
+
+  .plyr__progress--played,
+  .plyr__volume--display {
+    &::-webkit-progress-value {
+      border-radius: 100px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &::-moz-progress-bar {
+      border-radius: 100px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .plyr__time + .plyr__time {
+    display: none;
+
+    @media (min-width: $plyr-bp-screen-md) {
+      display: inline-block;
+    }
+
+    &::before {
+      margin-right: 0;
+      margin-left: $plyr-control-spacing;
+    }
+  }
+}
+
+.default-style {
+  @import "../../css/_appwork/include";
+
+  .plyr {
+    font-family: $font-family-sans-serif;
+  }
+
+  .plyr--audio .plyr__progress--buffer {
+    color: $gray-200;
+  }
+  .plyr--audio.plyr--loading .plyr__progress--buffer {
+    background-color: $gray-200;
+  }
+
+  .plyr__tooltip {
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+  }
+}
+
+.material-style {
+  @import "../../css/_appwork/include-material";
+
+  .plyr {
+    font-family: $font-family-sans-serif;
+  }
+
+  .plyr--audio .plyr__progress--buffer {
+    color: $gray-200;
+  }
+  .plyr--audio.plyr--loading .plyr__progress--buffer {
+    background-color: $gray-200;
+  }
+
+  .plyr__tooltip {
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+  }
+}