From cd003bdd5fdc7ff75b7b165b7da798748b3e5bfb Mon Sep 17 00:00:00 2001
From: Tomochin <tomochin@sugoimusic.me>
Date: Mon, 23 Jan 2023 20:20:05 +0800
Subject: [PATCH] FE update

* Collage mode FE changes
---
 static/styles/beluga/style.css    |  4 +++
 static/styles/genaviv/style.css   |  5 +++
 static/styles/global.css          | 72 ++++++++++++++++++++++++++++++++-------
 static/styles/noir/style.css      |  4 +++
 static/styles/noir2/style.css     |  4 +++
 static/styles/nostalgia/style.css |  4 +++
 static/styles/orion/style.css     |  4 +++
 static/styles/sugoi/style.css     |  4 +++
 static/styles/sugoidark/style.css |  6 +++-
 9 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/static/styles/beluga/style.css b/static/styles/beluga/style.css
index 67085a4..f03b857 100644
--- a/static/styles/beluga/style.css
+++ b/static/styles/beluga/style.css
@@ -360,6 +360,10 @@ p.min_padding {
   background-color: rgba(255,255,255,0.2);
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #filter_menu {
   width: 100%;
   text-align: center;
diff --git a/static/styles/genaviv/style.css b/static/styles/genaviv/style.css
index 9d7b0f2..93168bc 100644
--- a/static/styles/genaviv/style.css
+++ b/static/styles/genaviv/style.css
@@ -507,6 +507,11 @@ td.left {
 #menu ul>li,.main-menu ul>li {
   padding:15px 20px
 }
+
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #userinfo_minor a {
   line-height:30px;
   display:inline-block
diff --git a/static/styles/global.css b/static/styles/global.css
index bc97c69..8462aa3 100644
--- a/static/styles/global.css
+++ b/static/styles/global.css
@@ -6,18 +6,18 @@
 
 /* Torrent group details caticons  */
 /* margin: 0 auto ensures the caticons are always centered so the layout looks more ordered */
-.cats_album { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/album.png') no-repeat center center/contain; }
-.cats_single { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/single.png') no-repeat center center/contain; }
-.cats_ep { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; }
-.cats_bluray { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; }
-.cats_dvd { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; }
-.cats_tvmusic { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; }
-.cats_tvvariety { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; }
-.cats_tvdrama { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; }
-.cats_musicperformance { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; }
-.cats_pv { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; }
-.cats_pictures { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; }
-.cats_misc { margin: 0 auto; width: 48px; height: 48px; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; }
+.cats_album { margin: 0 auto; background: url('/static/common/caticons/album.png') no-repeat center center/contain; }
+.cats_single { margin: 0 auto; background: url('/static/common/caticons/single.png') no-repeat center center/contain; }
+.cats_ep { margin: 0 auto; background: url('/static/common/caticons/ep.png') no-repeat center center/contain; }
+.cats_bluray { margin: 0 auto; background: url('/static/common/caticons/bluray.png') no-repeat center center/contain; }
+.cats_dvd { margin: 0 auto; background: url('/static/common/caticons/dvd.png') no-repeat center center/contain; }
+.cats_tvmusic { margin: 0 auto; background: url('/static/common/caticons/tvmusic.png') no-repeat center center/contain; }
+.cats_tvvariety { margin: 0 auto; background: url('/static/common/caticons/tvvariety.png') no-repeat center center/contain; }
+.cats_tvdrama { margin: 0 auto; background: url('/static/common/caticons/tvdrama.png') no-repeat center center/contain; }
+.cats_musicperformance { margin: 0 auto; background: url('/static/common/caticons/musicperformance.png') no-repeat center center/contain; }
+.cats_pv { margin: 0 auto; background: url('/static/common/caticons/pv.png') no-repeat center center/contain; }
+.cats_pictures { margin: 0 auto; background: url('/static/common/caticons/pictures.png') no-repeat center center/contain; }
+.cats_misc { margin: 0 auto; background: url('/static/common/caticons/misc.png') no-repeat center center/contain; }
 
 /* Reduced, normalised sizes for all torrent list views */
 .cats_col .cats_album { width: 42px; height: 42px; }
@@ -55,9 +55,56 @@
 .tiny_cats_col {
   padding: 2px;
   width: 16px;  /* Ensures that the column is always as tight as possible */
+  height: 16px;
 }
 
 
+.tiny_cat_label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 4px;
+  padding: 2px 4px;
+  line-height: 12px;
+}
+
+.collage_text_label {
+  position: absolute;
+  background: #111111;
+  opacity: 0.8;
+  border-radius: 2px;
+  font-weight: 500;
+  color: white;
+  margin: 4px;
+  padding: 2px 4px;
+  line-height: 12px;
+}
+
+.audioformat_or_ressel_label {
+  top: 0;
+  right: 0;
+}
+
+.duration_label {
+  bottom: 0;
+  right: 0;
+}
+
+.torrent_status_label {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
+}
+
+.Radio {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Radio-Input {
+  margin: 0 0.5em 0;
+}
+
 
 .box h3 {
   font-size: 140%;
@@ -107,6 +154,7 @@ select {
 
 h2 .group_cat {
   margin: 0 8px;
+  width: 48px; height: 48px;
 }
 
 .group_displayname {
diff --git a/static/styles/noir/style.css b/static/styles/noir/style.css
index a40ee1c..276150d 100644
--- a/static/styles/noir/style.css
+++ b/static/styles/noir/style.css
@@ -278,6 +278,10 @@ ul.thin li { margin:0px 0px; padding:0px; }
   transition: ease-in-out 0.2s;
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #nav_links {
   max-width: 40px;
 }
diff --git a/static/styles/noir2/style.css b/static/styles/noir2/style.css
index 9eb1431..8b5e68a 100644
--- a/static/styles/noir2/style.css
+++ b/static/styles/noir2/style.css
@@ -295,6 +295,10 @@ ul.thin li { margin:0px 0px; padding:0px; }
   transition: ease-in-out 0.2s;
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #nav_links {
   max-width: 40px;
 }
diff --git a/static/styles/nostalgia/style.css b/static/styles/nostalgia/style.css
index a75a1c1..ee3f936 100644
--- a/static/styles/nostalgia/style.css
+++ b/static/styles/nostalgia/style.css
@@ -285,6 +285,10 @@ ul.thin li { margin:0px 0px; padding:0px; }
   transition: ease-in-out 0.2s;
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #nav_links {
   max-width: 40px;
 }
diff --git a/static/styles/orion/style.css b/static/styles/orion/style.css
index 626ef3c..3b4e3ce 100644
--- a/static/styles/orion/style.css
+++ b/static/styles/orion/style.css
@@ -703,6 +703,10 @@ li#nav_misc {
   font-size: 13px;
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #menu>ul>li.active a {
   font-weight: 600;
   color: var(--color7) !important;
diff --git a/static/styles/sugoi/style.css b/static/styles/sugoi/style.css
index 067a29c..2e769fc 100755
--- a/static/styles/sugoi/style.css
+++ b/static/styles/sugoi/style.css
@@ -195,6 +195,10 @@ ul.thin li { margin:0px 0px; padding:0px; }
   transition: ease-in-out 0.2s;
 }
 
+#menu ul li a img {
+  vertical-align: middle;
+}
+
 #nav_links {
   max-width: 40px;
 }
diff --git a/static/styles/sugoidark/style.css b/static/styles/sugoidark/style.css
index de8a81a..7329cc0 100644
--- a/static/styles/sugoidark/style.css
+++ b/static/styles/sugoidark/style.css
@@ -194,7 +194,11 @@
     color: #FFFFFF;
     transition: ease-in-out 0.2s;
   }
-  
+
+  #menu ul li a img {
+    vertical-align: middle;
+  }
+
   #nav_links {
     max-width: 40px;
   }