refactor code; add genre colors; rename video player class

18 files changed, 142 insertions, 25 deletions

diff --git a/static/css/anime/anime.css b/static/css/anime/anime.css
index 2171dee9..2171dee9 100755..100644
--- a/static/css/anime/anime.css
+++ b/static/css/anime/anime.css
diff --git a/static/css/anime/single_anime.css b/static/css/anime/single_anime.css
index acb445ea..49ffe316 100755..100644
--- a/static/css/anime/single_anime.css
+++ b/static/css/anime/single_anime.css
@@ -202,7 +202,101 @@
     color: #ffa800;
 }
 
-/* Add all other genre styles here */
+.genre-link[href*="Cars"] {
+    background: rgba(128, 128, 128, 0.15);
+    border: 1px solid #808080;
+    color: #808080;
+}
+
+.genre-link[href*="Comedy"] {
+    background: rgba(255, 255, 0, 0.15);
+    border: 1px solid #ffff00;
+    color: #ffff00;
+}
+
+.genre-link[href*="Drama"] {
+    background: rgba(147, 112, 219, 0.15);
+    border: 1px solid #9370db;
+    color: #9370db;
+}
+
+.genre-link[href*="Fantasy"] {
+    background: rgba(0, 191, 255, 0.15);
+    border: 1px solid #00bfff;
+    color: #00bfff;
+}
+
+.genre-link[href*="Horror"] {
+    background: rgba(139, 0, 0, 0.15);
+    border: 1px solid #8b0000;
+    color: #8b0000;
+}
+
+.genre-link[href*="Mahou Shoujo"] {
+    background: rgba(255, 182, 193, 0.15);
+    border: 1px solid #ffb6c1;
+    color: #ffb6c1;
+}
+
+.genre-link[href*="Mecha"] {
+    background: rgba(169, 169, 169, 0.15);
+    border: 1px solid #a9a9a9;
+    color: #a9a9a9;
+}
+
+.genre-link[href*="Music"] {
+    background: rgba(138, 43, 226, 0.15);
+    border: 1px solid #8a2be2;
+    color: #8a2be2;
+}
+
+.genre-link[href*="Mystery"] {
+    background: rgba(75, 0, 130, 0.15);
+    border: 1px solid #4b0082;
+    color: #4b0082;
+}
+
+.genre-link[href*="Psychological"] {
+    background: rgba(0, 100, 0, 0.15);
+    border: 1px solid #006400;
+    color: #006400;
+}
+
+.genre-link[href*="Romance"] {
+    background: rgba(255, 105, 180, 0.15);
+    border: 1px solid #ff69b4;
+    color: #ff69b4;
+}
+
+.genre-link[href*="Sci-Fi"] {
+    background: rgba(0, 255, 255, 0.15);
+    border: 1px solid #00ffff;
+    color: #00ffff;
+}
+
+.genre-link[href*="Slice of Life"] {
+    background: rgba(152, 251, 152, 0.15);
+    border: 1px solid #98fb98;
+    color: #98fb98;
+}
+
+.genre-link[href*="Sports"] {
+    background: rgba(255, 140, 0, 0.15);
+    border: 1px solid #ff8c00;
+    color: #ff8c00;
+}
+
+.genre-link[href*="Supernatural"] {
+    background: rgba(186, 85, 211, 0.15);
+    border: 1px solid #ba55d3;
+    color: #ba55d3;
+}
+
+.genre-link[href*="Thriller"] {
+    background: rgba(220, 20, 60, 0.15);
+    border: 1px solid #dc143c;
+    color: #dc143c;
+}
 
 /* Hover effect */
 .genre-link:hover {
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;
 }
 
diff --git a/static/css/core/home.css b/static/css/core/home.css
index 04cd9acc..04cd9acc 100755..100644
--- a/static/css/core/home.css
+++ b/static/css/core/home.css
diff --git a/static/css/core/post_list.css b/static/css/core/post_list.css
index 7df9b158..7df9b158 100755..100644
--- a/static/css/core/post_list.css
+++ b/static/css/core/post_list.css
diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
index 1e18972e..1e18972e 100755..100644
--- a/static/css/en/login-area.css
+++ b/static/css/en/login-area.css
diff --git a/static/css/fonts.css b/static/css/fonts.css
index e277ec51..e277ec51 100755..100644
--- a/static/css/fonts.css
+++ b/static/css/fonts.css
diff --git a/static/css/harlem-shake.css b/static/css/harlem-shake.css
index 65597b30..65597b30 100755..100644
--- a/static/css/harlem-shake.css
+++ b/static/css/harlem-shake.css
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
index 475b239b..475b239b 100755..100644
--- a/static/css/ja/login-area.css
+++ b/static/css/ja/login-area.css
diff --git a/static/css/pagoda/pagoda.css b/static/css/pagoda/pagoda.css
index c8f3469a..c8f3469a 100755..100644
--- a/static/css/pagoda/pagoda.css
+++ b/static/css/pagoda/pagoda.css
diff --git a/static/css/phone_compatibility.css b/static/css/phone_compatibility.css
index f329c68e..f329c68e 100755..100644
--- a/static/css/phone_compatibility.css
+++ b/static/css/phone_compatibility.css
diff --git a/static/css/search.css b/static/css/search.css
index 946650c0..946650c0 100755..100644
--- a/static/css/search.css
+++ b/static/css/search.css
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index de275aa1..0a87f989 100755..100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -132,10 +132,19 @@ img {
   width: 100%;
   height: 100%;
   background-color: #000;
-  opacity: 0.8;
+  opacity: 0.7;
   z-index: -99;
 }
 
+#spaceship {
+  position: fixed;
+  width: 500px;
+  z-index: 1;
+  bottom: -200px;
+  left: -500px;
+  filter: brightness(0.8);
+}
+
 /* Layout Structure */
 #body-wrapper {
   position: relative;
@@ -214,6 +223,12 @@ img {
 }
 
 .navigation-title {
+  width: 100%;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.navigation-title {
   font-family: 'SweetFairy', sans-serif;
   filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white) drop-shadow(0px 1px 1px #623795) drop-shadow(0px 1px 1px #623795);
   color: #623795;
diff --git a/static/css/shared/directory.css b/static/css/shared/directory.css
index 94941560..94941560 100755..100644
--- a/static/css/shared/directory.css
+++ b/static/css/shared/directory.css
diff --git a/static/css/shared/kawaiibeats.css b/static/css/shared/kawaiibeats.css
index 68e5ee8e..68e5ee8e 100755..100644
--- a/static/css/shared/kawaiibeats.css
+++ b/static/css/shared/kawaiibeats.css
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
index 3ea863fb..3ea863fb 100755..100644
--- a/static/css/shared/login-area.css
+++ b/static/css/shared/login-area.css
diff --git a/static/css/sidebar.css b/static/css/sidebar.css
index 07d2c6ef..07d2c6ef 100755..100644
--- a/static/css/sidebar.css
+++ b/static/css/sidebar.css
diff --git a/static/css/styles.css b/static/css/styles.css
index 7300973d..7300973d 100755..100644
--- a/static/css/styles.css
+++ b/static/css/styles.css