Redesign

styles/include/config.scarlet

@@ -11,6 +11,7 @@ anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
 theme-white = bg-color
 theme-black = text-color
 link-hover-text-shadow = none
+tab-active-text-shadow = none
 
 // UI
 ui-border-color = rgba(0, 0, 0, 0.1)
@@ -30,6 +31,8 @@ input-focus-border-color = rgb(248, 165, 130)
 // Button
 button-hover-color = white
 button-hover-background = link-hover-color
+tab-background = rgba(0, 0, 0, 0.02)
+tab-hover-background = bg-color
 tab-active-color = white
 tab-active-background = hsl(216, 68%, 42%)
 // tab-active-background = rgb(46, 85, 160)

styles/include/dark.scarlet

@@ -20,7 +20,9 @@ main-color = link-color
 link-active-color = link-hover-color
 button-hover-color = link-hover-color
 button-hover-background = hsla(0, 0%, 12%, 0.5)
-tab-active-color = bg-color
-tab-active-background = white
+tab-background = hsla(0, 0%, 0%, 0.1)
+tab-hover-background = hsla(0, 0%, 0%, 0.2)
+tab-active-color = hsl(0, 0%, 95%)
+tab-active-background = hsla(0, 0%, 2%, 0.5)
 loading-anim-color = link-color
 anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)

styles/tabs.scarlet

@@ -1,21 +1,23 @@
 .tab
 	color text-color
 	padding 0.5rem 1rem
-	background-color rgba(0, 0, 0, 0.02)
+	background-color tab-background
 	border ui-border
 	border-left none
 	white-space nowrap
 
 	:hover
 		color text-color
-		background-color bg-color
+		background-color tab-hover-background
+		text-shadow none
 
 	:active
 		transform none
 
 	&.active
-		background tab-active-background
-		color theme-white
+		background-color tab-active-background
+		color tab-active-color
+		text-shadow tab-active-text-shadow
 
 	:first-child
 		border-left ui-border

styles/video.scarlet

@@ -1,11 +1,10 @@
-// iframe
-// 	min-height 200px
+video-padding = 56.25%
 
 .video-container
 	position relative
 	width 100%
 	height 0
-	padding-bottom 56.25%
+	padding-bottom video-padding
 	border-radius ui-element-border-radius
 	overflow hidden