Improved anime editing sidebar icons

layout/sidebar/sidebar.pixy

@@ -9,13 +9,13 @@ component Sidebar(searchTerm string, user *arn.User)
 					img.user-image.lazy(src=utils.EmptyImage(), data-src="/images/brand/64.png", data-webp="true", alt="Anime Notifier")
 			
 			if user != nil
-				a.badge.left-badge(href="/settings", title="Settings")
+				a.badge.sidebar-badge.left-badge(href="/settings", title="Settings")
 					RawIcon("cog")
 				
-				a#notification-icon.badge.right-badge(href="/notifications", title="Notifications")
+				a#notification-icon.badge.sidebar-badge.right-badge(href="/notifications", title="Notifications")
 					RawIcon("bell")
 				
-				a#notification-count.badge.right-badge.badge-important.hidden(href="/notifications", title="Notifications") 0
+				a#notification-count.badge.sidebar-badge.right-badge.badge-important.hidden(href="/notifications", title="Notifications") 0
 
 		//- Search
 		div(aria-label="Search")

layout/sidebar/sidebar.scarlet

@@ -70,11 +70,8 @@ const sidebar-spacing-y = 0.7rem
 	horizontal
 	justify-content center
 	align-items center
-	position absolute
-	top 50%
 	background reverse-light-color
 	border-radius 50%
-	transform translateY(-50%)
 	padding 0.5rem
 	color text-color
 	width 30px
@@ -84,6 +81,11 @@ const sidebar-spacing-y = 0.7rem
 		color text-color
 		background reverse-light-hover-color
 
+.sidebar-badge
+	position absolute
+	top 50%
+	transform translateY(-50%)
+
 	:active
 		transform translateY(-50%) translateY(3px)
 

pages/anime/editanime/editanime.pixy

@@ -10,16 +10,22 @@ component EditAnimeTabs(anime *arn.Anime)
 		Tab("Relations", "exchange", anime.Link() + "/edit/relations")
 		Tab("Episodes", "list-ol", anime.Link() + "/edit/episodes")
 		Tab("History", "history", anime.Link() + "/edit/history")
+	
 	.search-links
-		a.search-link.google-badge.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Google")
+		a.badge.search-link.google-badge.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Google")
 			RawIcon("google")
-		a.search-link.annilist-badge.tip(href="https://anilist.co/search/anime?sort=SEARCH_MATCH&search=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Annilist")
+		
-			RawIcon("annilist")
+		a.badge.search-link.anilist-badge.tip(href="https://anilist.co/search/anime?sort=SEARCH_MATCH&search=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="Anilist")
-		a.search-link.mal-badge.tip(href="https://myanimelist.net/anime.php?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="MyAnimeList")
+			RawIcon("anilist")
+		
+		a.badge.search-link.mal-badge.tip(href="https://myanimelist.net/anime.php?q=" + anime.Title.Canonical, target="_blank", rel="noopener", aria-label="MyAnimeList")
 			RawIcon("mal")
-		a.search-link.shoboi-badge.tip(href="http://cal.syoboi.jp/find?type=quick&sd=1&kw=" + anime.Title.Japanese, target="_blank", rel="noopener", aria-label="Shoboi")
+		
+		a.badge.search-link.shoboi-badge.tip(href="http://cal.syoboi.jp/find?type=quick&sd=1&kw=" + anime.Title.Japanese, target="_blank", rel="noopener", aria-label="Shoboi")
 			RawIcon("shoboi")
-		a.search-link.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical + " anime cover&tbm=isch&tbs=imgo:1,isz:lt,islt:qsvga", target="_blank", rel="noopener", aria-label="Cover image")
+		
+		a.badge.search-link.tip(href="https://www.google.com/search?q=" + anime.Title.Canonical + " anime cover&tbm=isch&tbs=imgo:1,isz:lt,islt:qsvga", target="_blank", rel="noopener", aria-label="Cover image")
 			RawIcon("image")
-		a.search-link.tip(href="https://www.youtube.com/results?search_query=" + strings.Replace(anime.Title.Canonical+" PV", " ", "+", -1), target="_blank", rel="noopener", aria-label="Trailer")
+		
+		a.badge.search-link.tip(href="https://www.youtube.com/results?search_query=" + strings.Replace(anime.Title.Canonical+" PV", " ", "+", -1), target="_blank", rel="noopener", aria-label="Trailer")
 			RawIcon("youtube-full-color")

pages/editor/editor.scarlet

@@ -26,42 +26,28 @@
 	background hsl(273, feature-card-saturation, feature-card-lightness) !important
 
 .search-links
-	position fixed
-	top 25%
-	left 95%
-	vertical
-	width fit-content
-
-
-// This is a copy of the .badge style, but the position:absolute broke the layout
-.search-link
 	horizontal
-	justify-content center
+	margin 0 auto
-	align-items center
-	background reverse-light-color
-	border-radius 50%
-	padding 0.5rem
-	color text-color
-	width 30px
-	height 30px
-	position relative
-	margin-top 0.2em
-	margin-bottom 0.2em
 
-	:hover
+.search-link
-		color text-color
+	margin 0.2rem
-		background reverse-light-hover-color
 
-	:active
+> 1000px
-		transform scale(1.2)
+	.search-links
+		vertical
+		position fixed
+		top 50%
+		right content-padding
+		transform translateY(-50%)
 
-.google-badge,.shoboi-badge
+.google-badge,
+.shoboi-badge
 	background rgba(255, 255, 255, 0.80) !important
 
 	:hover
 		background rgba(255, 255, 255, 1) !important
 
-.annilist-badge
+.anilist-badge
 	background rgba(31, 38, 49, 0.80) !important
 
 	:hover