CSS cleanup

config.json

@@ -13,7 +13,7 @@
 		"typography",
 		"mountable",
 		"layout",
-		"navigation",
+		"search",
 		"headers",
 		"input",
 		"grid",

layout/sidebar/sidebar.scarlet

@@ -75,6 +75,10 @@ sidebar-spacing-y = 0.7rem
 	padding 0.5rem
 	color text-color
 
+	:hover
+		color text-color
+		background reverse-light-hover-color
+
 	:active
 		transform translateY(-50%) translateY(3px)
 

styles/embedded.scarlet

@@ -4,24 +4,14 @@ remove-margin = 1.1rem
 	// Put navigation to the bottom of the screen
 	flex-direction column-reverse !important
 
-	// .extension-navigation
-	// 	display inline-block
-
 	.anime-list
-		// max-width 500px
 		margin-left calc(remove-margin * -1)
 		margin-top calc(remove-margin * -1)
 		width calc(100% + remove-margin * 2)
 
-		// td
-		// 	padding 0.4rem 0.8rem
-	
 	.anime-list-owner
 		display none
 
 	.anime-list-item-image,
 	.anime-list-item-image-container
 		width 27px
-	
-	#navigation
-		font-size 0.9rem

styles/include/config.scarlet

@@ -50,15 +50,6 @@ post-highlight-color = rgba(248, 165, 130, 0.7)
 // Avatar
 avatar-size = 50px
 
-// Navigation
-nav-color = text-color
-nav-link-color = rgba(255, 255, 255, 0.5)
-nav-link-hover-color = white
-nav-link-hover-slide-color = main-color
-// nav-color = rgb(245, 245, 245)
-// nav-link-color = rgb(160, 160, 160)
-// nav-link-hover-color = rgb(80, 80, 80)
-
 // Quote
 quote-color = hsl(0, 0%, 45%)
 quote-side-border-color = quote-color
@@ -76,7 +67,7 @@ anime-list-item-name-color = link-color
 table-width-normal = 900px
 
 // Loading animation
-loading-anim-color = nav-link-hover-slide-color
+loading-anim-color = main-color
 
 // Shadow
 shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
@@ -91,7 +82,6 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
 content-padding = 1.6rem
 content-padding-top = 1.6rem
 content-line-height = 1.7em
-hover-line-size = 3px
 typography-margin = 0.4rem
 
 // Timings

styles/navigation.scarlet

@@ -1,112 +0,0 @@
-#navigation
-	horizontal
-	overflow hidden
-	background-color nav-color
-	justify-content center
-	// border-bottom ui-border
-
-.navigation-link
-	color nav-link-color
-
-	:after
-		content ""
-		display block
-		height hover-line-size
-		background-color nav-link-hover-slide-color
-		transform scaleX(0)
-		opacity 0
-		default-transition
-
-	:hover,
-	&.active
-		color nav-link-hover-color
-		cursor pointer
-		:after
-			transform scaleX(1.0)
-			opacity 1
-
-	&.active
-		// text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5)
-		text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1)
-
-.navigation-button
-	horizontal
-	font-size 1em
-	line-height 1em
-	padding 0.75em 1em
-
-	.icon
-		margin-right 0
-
-.navigation-text
-	display none
-
-#search
-	background transparent
-	border none !important
-	box-shadow none !important
-	font-size 1em
-	padding 0
-	width 0
-	height auto
-	flex-grow 1
-
-// #search
-// 	flex 1
-// 	border-radius 0
-// 	background transparent
-// 	border none
-
-// 	color nav-link-hover-color
-// 	font-size 1em
-// 	min-width 0
-
-// 	::placeholder
-// 		color nav-link-color
-
-// 	:focus
-// 		border none
-// 		box-shadow none
-
-// .extra-navigation
-// 	display none
-
-// .extension-navigation
-// 	display none
-
-// > 330px
-// 	.navigation-button, #search
-// 		font-size 1.3em
-
-// > 550px
-// 	#navigation
-// 		padding 0 content-padding
-
-// > 930px
-// 	.navigation-button, #search
-// 		font-size 1.2em
-
-// 	#navigation
-// 		justify-content flex-start
-
-// 	.extra-navigation
-// 		display block
-
-// @media screen and (max-device-height: 500px)
-// 	#navigation
-// 		vertical
-// 		height 100%
-// 		padding content-padding 0
-
-// 	#container
-// 		horizontal
-
-// 	.extra-navigation
-// 		display block
-
-// 	#sidebar-toggle,
-// 	.hide-landscape
-// 		display none !important
-
-// 	#search
-// 		display none

styles/search.scarlet

@@ -0,0 +1,9 @@
+#search
+	background transparent
+	border none !important
+	box-shadow none !important
+	font-size 1em
+	padding 0
+	width 0
+	height auto
+	flex-grow 1