refactor code; add genre colors; rename video player class

1 files changed, 31 insertions, 23 deletions

diff --git a/static/css/anime/video_player.css b/static/css/anime/video_player.css
index e4b2f0b7..ca3fd2ab 100755..100644
--- a/static/css/anime/video_player.css
+++ b/static/css/anime/video_player.css
@@ -21,8 +21,8 @@
     position: relative;
 }
 
-/* Windows 98 Player Base */
-.win98-player {
+/* Shifoo Video Player Base */
+.shifoo-video-player {
     width: 780px;
     background: #C0C0C0;
     border: 2px solid;
@@ -31,7 +31,7 @@
 }
 
 /* Fullscreen styles */
-.win98-player:fullscreen {
+.shifoo-video-player:fullscreen {
     width: 100%;
     height: 100%;
     background: #000;
@@ -39,33 +39,33 @@
     box-shadow: none;
 }
 
-.win98-player:fullscreen .retro-buffer {
+.shifoo-video-player:fullscreen .retro-buffer {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
-.win98-player:fullscreen .retro-buffer img {
+.shifoo-video-player:fullscreen .retro-buffer img {
     height: 64px;
     width: 64px;
 }
 
-.win98-player:fullscreen .win98-title-bar,
-.win98-player:fullscreen .episode-title {
+.shifoo-video-player:fullscreen .shifoo-video-player-title-bar,
+.shifoo-video-player:fullscreen .episode-title {
     display: none;
 }
 
-.win98-player:fullscreen .win98-player-content {
+.shifoo-video-player:fullscreen .shifoo-video-player-content {
     height: 100%;
     position: relative;
 }
 
-.win98-player:fullscreen #video-player {
+.shifoo-video-player:fullscreen #video-player {
     width: 100%;
     height: 100%;
 }
 
-.win98-player:fullscreen .win98-controls {
+.shifoo-video-player:fullscreen .shifoo-video-player-controls {
     position: fixed;
     bottom: 0px;
     width: 100%;
@@ -75,12 +75,12 @@
     z-index: 15;
 }
 
-.win98-player:fullscreen.controls-visible .win98-controls {
+.shifoo-video-player:fullscreen.controls-visible .shifoo-video-player-controls {
     opacity: 1;
 }
 
 /* Title Bar */
-.win98-title-bar {
+.shifoo-video-player-title-bar {
     background: rgb(3, 31, 106);
     background: linear-gradient(90deg, rgba(3, 31, 106, 1) 0%, rgba(163, 192, 227, 1) 100%);
     padding: 3px 2px 3px 3px;
@@ -104,7 +104,7 @@
 }
 
 /* Controls Area */
-.win98-controls {
+.shifoo-video-player-controls {
     padding: 8px;
     background: #C0C0C0;
     display: flex;
@@ -184,7 +184,7 @@ input[type="range"].seek-slider {
     gap: 4px;
 }
 
-.win98-btn {
+.shifoo-video-player-btn {
     height: 22px;
     min-width: 22px;
     border: none;
@@ -197,26 +197,26 @@ input[type="range"].seek-slider {
     color: #000;
 }
 
-.win98-btn:hover {
+.shifoo-video-player-btn:hover {
     color: #FFF;
     background: #000080;
 }
 
-.win98-btn:active {
+.shifoo-video-player-btn:active {
     color: #FFF;
     background: #0000FF;
 }
 
-.win98-btn:hover .win98-icon>* {
+.shifoo-video-player-btn:hover .shifoo-video-player-icon>* {
     color: #FFF;
 }
 
-.win98-icon {
+.shifoo-video-player-icon {
     width: 14px;
     height: 14px;
 }
 
-.win98-icon>* {
+.shifoo-video-player-icon>* {
     color: #000;
 }
 
@@ -300,6 +300,14 @@ input[type="range"].volume-slider {
     z-index: 10;
     max-height: 180px;
     overflow: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.quality-menu::-webkit-scrollbar,
+.sub-dub-menu::-webkit-scrollbar,
+.caption-menu::-webkit-scrollbar {
+    display: none;
 }
 
 .quality-menu.show,
@@ -366,7 +374,7 @@ video::-webkit-media-controls-enclosure {
     display: none !important;
 }
 
-.win98-controls:hover {
+.shifoo-video-player-controls:hover {
     opacity: 1;
 }
 
@@ -393,18 +401,18 @@ video::-webkit-media-controls-enclosure {
     -webkit-font-smoothing: antialiased;
 }
 
-.win98-player:fullscreen .custom-subtitles {
+.shifoo-video-player:fullscreen .custom-subtitles {
     bottom: 30px;
     transition: bottom 0.3s ease;
 }
 
-.win98-player:fullscreen .custom-subtitles span {
+.shifoo-video-player:fullscreen .custom-subtitles span {
     font-size: 48px;
     -webkit-text-stroke: 8px black;
     padding: 8px;
 }
 
-.win98-player:fullscreen.controls-visible .custom-subtitles {
+.shifoo-video-player:fullscreen.controls-visible .custom-subtitles {
     bottom: 96px;
 }