index.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. .vjs-theme-fantasy {
  2. --vjs-theme-fantasy--primary: #9f44b4;
  3. --vjs-theme-fantasy--secondary: #fff;
  4. }
  5. .vjs-theme-fantasy .vjs-big-play-button {
  6. width: 70px;
  7. height: 70px;
  8. background: none;
  9. line-height: 70px;
  10. font-size: 80px;
  11. border: none;
  12. top: 50%;
  13. left: 50%;
  14. margin-top: -35px;
  15. margin-left: -35px;
  16. color: var(--vjs-theme-fantasy--primary);
  17. }
  18. .vjs-theme-fantasy:hover .vjs-big-play-button,
  19. .vjs-theme-fantasy.vjs-big-play-button:focus {
  20. background-color: transparent;
  21. color: #fff;
  22. }
  23. .vjs-theme-fantasy .vjs-control-bar {
  24. height: 54px;
  25. }
  26. .vjs-theme-fantasy .vjs-button > .vjs-icon-placeholder::before {
  27. line-height: 54px;
  28. }
  29. .vjs-theme-fantasy .vjs-time-control {
  30. line-height: 54px;
  31. }
  32. /* Play Button */
  33. .vjs-theme-fantasy .vjs-play-control {
  34. font-size: 1.5em;
  35. position: relative;
  36. }
  37. .vjs-theme-fantasy .vjs-volume-panel {
  38. order: 4;
  39. }
  40. .vjs-theme-fantasy .vjs-volume-bar {
  41. margin-top: 2.5em;
  42. }
  43. .vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
  44. height: 100%;
  45. }
  46. .vjs-theme-fantasy .vjs-progress-control .vjs-progress-holder {
  47. font-size: 1.5em;
  48. }
  49. .vjs-theme-fantasy .vjs-progress-control:hover .vjs-progress-holder {
  50. font-size: 1.5em;
  51. }
  52. .vjs-theme-fantasy .vjs-play-control .vjs-icon-placeholder::before {
  53. height: 1.3em;
  54. width: 1.3em;
  55. margin-top: 0.2em;
  56. border-radius: 1em;
  57. border: 3px solid var(--vjs-theme-fantasy--secondary);
  58. top: 2px;
  59. left: 9px;
  60. line-height: 1.1;
  61. }
  62. .vjs-theme-fantasy .vjs-play-control:hover .vjs-icon-placeholder::before {
  63. border: 3px solid var(--vjs-theme-fantasy--secondary);
  64. }
  65. .vjs-theme-fantasy .vjs-play-progress {
  66. background-color: var(--vjs-theme-fantasy--primary);
  67. }
  68. .vjs-theme-fantasy .vjs-play-progress::before {
  69. height: 0.8em;
  70. width: 0.8em;
  71. content: '';
  72. background-color: var(--vjs-theme-fantasy--primary);
  73. border: 4px solid var(--vjs-theme-fantasy--secondary);
  74. border-radius: 0.8em;
  75. top: -0.25em;
  76. }
  77. .vjs-theme-fantasy .vjs-progress-control {
  78. font-size: 14px;
  79. }
  80. .vjs-theme-fantasy .vjs-fullscreen-control {
  81. order: 6;
  82. }
  83. .vjs-theme-fantasy .vjs-remaining-time {
  84. display: none;
  85. }
  86. /* Nyan version */
  87. .vjs-theme-fantasy.nyan .vjs-play-progress {
  88. background: linear-gradient(to bottom, #fe0000 0%, #fe9a01 16.666666667%, #fe9a01 16.666666667%, #ffff00 33.332666667%, #ffff00 33.332666667%, #32ff00 49.999326667%, #32ff00 49.999326667%, #0099fe 66.6659926%, #0099fe 66.6659926%, #6633ff 83.33266%, #6633ff 83.33266%);
  89. }
  90. .vjs-theme-fantasy.nyan .vjs-play-progress::before {
  91. height: 1.3em;
  92. width: 1.3em;
  93. background: svg-load('icons/nyan-cat.svg', fill=#fff) no-repeat;
  94. border: none;
  95. top: -0.35em;
  96. }