Nessuna descrizione
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

plyr.scss 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. @import "../../scss/_bootstrap-extended/include";
  2. /* Variables */
  3. @import "plyr/src/sass/settings/breakpoints";
  4. @import "plyr/src/sass/settings/colors";
  5. @import "plyr/src/sass/settings/cosmetics";
  6. @import "plyr/src/sass/settings/type";
  7. @import "plyr/src/sass/settings/badges";
  8. @import "plyr/src/sass/settings/captions";
  9. @import "plyr/src/sass/settings/controls";
  10. @import "plyr/src/sass/settings/helpers";
  11. @import "plyr/src/sass/settings/menus";
  12. @import "plyr/src/sass/settings/progress";
  13. @import "plyr/src/sass/settings/sliders";
  14. @import "plyr/src/sass/settings/tooltips";
  15. @import "plyr/src/sass/lib/animation";
  16. @import "plyr/src/sass/lib/functions";
  17. @import "plyr/src/sass/lib/mixins";
  18. /* Components */
  19. @import "plyr/src/sass/base";
  20. @import "plyr/src/sass/components/badges";
  21. @import "plyr/src/sass/components/captions";
  22. @import "plyr/src/sass/components/control";
  23. @import "plyr/src/sass/components/controls";
  24. @import "plyr/src/sass/components/menus";
  25. @import "plyr/src/sass/components/sliders";
  26. @import "plyr/src/sass/components/poster";
  27. @import "plyr/src/sass/components/times";
  28. @import "plyr/src/sass/components/tooltips";
  29. @import "plyr/src/sass/components/progress";
  30. @import "plyr/src/sass/components/volume";
  31. @import "plyr/src/sass/types/audio";
  32. @import "plyr/src/sass/types/video";
  33. @import "plyr/src/sass/states/fullscreen";
  34. @import "plyr/src/sass/plugins/ads";
  35. @import "plyr/src/sass/plugins/preview-thumbnails";
  36. @import "plyr/src/sass/utils/animation";
  37. @import "plyr/src/sass/utils/hidden";
  38. .plyr {
  39. --plyr-color-main: var(--#{$prefix}primary);
  40. --plyr-focus-visible-color: var(--#{$prefix}primary);
  41. --plyr-menu-background: var(--#{$prefix}white);
  42. --plyr-video-control-color-hover: var(--#{$prefix}primary-contrast);
  43. --plyr-audio-control-color-hover: var(--plyr-video-control-color-hover);
  44. .plyr--audio .plyr__controls {
  45. padding: 0;
  46. }
  47. &.plyr--video,
  48. &.plyr--audio {
  49. .plyr__control:focus-visible {
  50. outline: none;
  51. }
  52. }
  53. &.plyr--audio {
  54. .plyr__progress__buffer {
  55. color: var(--#{$prefix}gray-200);
  56. }
  57. .plyr__controls {
  58. padding: 0;
  59. background-color: var(--#{$prefix}paper-bg);
  60. color: var(--#{$prefix}body-color);
  61. }
  62. }
  63. &.plyr--full-ui.plyr--audio input[type="range"] {
  64. &::-webkit-slider-runnable-track,
  65. &::-moz-range-track,
  66. &::-ms-track {
  67. background-color: var(--#{$prefix}gray-100);
  68. }
  69. }
  70. .plyr__menu__container .plyr__control[role="menuitemradio"] {
  71. &:hover,
  72. &:focus-visible {
  73. &::before {
  74. background: $plyr-color-gray-100;
  75. }
  76. }
  77. &[aria-checked="true"] {
  78. &:hover,
  79. &:focus-visible {
  80. &::before {
  81. background: var(--#{$prefix}white);
  82. }
  83. &::after {
  84. background: var(--#{$prefix}primary);
  85. }
  86. }
  87. }
  88. }
  89. input[type="range"] {
  90. &::-ms-fill-lower {
  91. background: var(--#{$prefix}primary);
  92. }
  93. &:active {
  94. &::-webkit-slider-thumb {
  95. background: var(--#{$prefix}primary);
  96. }
  97. &::-moz-range-thumb {
  98. background: var(--#{$prefix}primary);
  99. }
  100. &::-ms-thumb {
  101. background: var(--#{$prefix}primary);
  102. }
  103. }
  104. }
  105. .plyr__tooltip,
  106. .plyr__menu__container {
  107. box-shadow: none;
  108. filter: drop-shadow(0 .0625rem .125rem rgba($pure-black, .15));
  109. }
  110. .plyr__controls {
  111. flex-wrap: wrap;
  112. .plyr__progress__container {
  113. min-inline-size: 3.75rem;
  114. }
  115. }
  116. }
  117. //? Library does not provide RTL support
  118. :dir(rtl) {
  119. .plyr__menu__container {
  120. direction: rtl;
  121. .plyr__control--forward {
  122. &::after {
  123. border-inline-end-color: transparent;
  124. border-inline-start-color: rgba($plyr-menu-color, .8);
  125. inset-inline: auto 5px;
  126. }
  127. }
  128. .plyr__menu__value {
  129. padding-inline: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 1.5) 1rem;
  130. }
  131. .plyr__control[role="menuitemradio"] {
  132. &::before {
  133. margin-inline: 0 $plyr-control-spacing;
  134. }
  135. &::after {
  136. inset-inline: .9375rem auto;
  137. }
  138. }
  139. }
  140. }