Redesign

layout/sidebar/sidebar.scarlet

@@ -8,7 +8,7 @@ sidebar-spacing-y = 0.7rem
 	z-index 10
 	min-width 200px
 	height 100%
-	background ui-background
+	background sidebar-opaque-background
 	transform translateX(-100%)
 	overflow-x hidden
 	overflow-y auto
@@ -32,8 +32,7 @@ sidebar-spacing-y = 0.7rem
 		pointer-events auto
 		box-shadow none
 		border-right ui-border
-		// background rgba(0, 0, 0, 0.03)
+		background sidebar-background
-		background rgba(0, 0, 0, 0.2)
 
 .sidebar-visible
 	transform translateX(0) !important

pages/animelist/animelist.scarlet

@@ -30,7 +30,7 @@
 	clip-long-text
 
 	a
-		color text-color
+		color anime-list-item-name-color
 		:hover
 			color link-hover-color
 

pages/shop/history.pixy

@@ -3,6 +3,9 @@ component PurchaseHistory(purchases []*arn.Purchase, user *arn.User)
 
 	h1.page-title Purchase History
 
+	if len(purchases) == 0
+		p.text-center.mountable You haven't bought anything yet.
+	else
 		table
 			thead
 				tr.mountable

styles/forum.scarlet

@@ -98,14 +98,14 @@ post-content-padding-y = 0.75rem
 	&:before
 		content "+"
 
-// .post-permalink
+.post-permalink
-// 	color post-permalink-color !important
+	color post-permalink-color
 
-// .post-like
+.post-like
-// 	color post-like-color !important
+	color post-like-color
 
-// .post-unlike
+.post-unlike
-// 	color post-unlike-color !important
+	color post-unlike-color
 
 .post-save
 	//

styles/include/config.scarlet

@@ -37,6 +37,9 @@ tab-active-color = white
 tab-active-background = hsl(216, 68%, 42%)
 // tab-active-background = rgb(46, 85, 160)
 
+sidebar-background = rgba(0, 0, 0, 0.03)
+sidebar-opaque-background = ui-background
+
 // Forum
 forum-width = 830px
 post-highlight-color = rgba(248, 165, 130, 0.7)
@@ -54,9 +57,12 @@ nav-link-hover-slide-color = main-color
 // nav-link-hover-color = rgb(80, 80, 80)
 
 // Forum
-post-like-color = green
+post-like-color = green !important
-post-unlike-color = rgb(255, 32, 12)
+post-unlike-color = rgb(255, 32, 12) !important
-post-permalink-color = blue
+post-permalink-color = blue !important
+
+table-row-hover-background = hsla(0, 0%, 0%, 0.01)
+anime-list-item-name-color = link-color
 
 // Tables
 table-width-normal = 900px

styles/include/dark.scarlet

@@ -11,6 +11,9 @@ link-color = hsl(hue, saturation, 66%)
 link-hover-color = hsl(hue, saturation, 76%)
 link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 66%, 0.5)
 ui-background = hsla(0, 0%, 8%, 0.3)
+sidebar-background = rgba(0, 0, 0, 0.2)
+sidebar-opaque-background = ui-background
+table-row-hover-background = hsla(0, 0%, 100%, 0.01)
 
 // White/black
 theme-white = bg-color
@@ -26,8 +29,9 @@ 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)
+anime-list-item-name-color = text-color
 
 // Forum
-post-like-color = green
+post-like-color = link-color
-post-unlike-color = rgb(255, 32, 12)
+post-unlike-color = link-color
-post-permalink-color = blue
+post-permalink-color = link-color

styles/input.scarlet

@@ -1,8 +1,8 @@
 mixin input-focus
 	:focus
-		border 1px solid input-focus-border-color
+		border 1px solid input-focus-border-color !important
 		// TODO: Replace with alpha(main-color, 20%) function
-		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
+		box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
 
 input, textarea, button, .button, select
 	ui-element

styles/table.scarlet

@@ -21,4 +21,7 @@ th
 
 tbody
 	tr
-		bg-light-up
+		background-color transparent
+		
+		:hover
+			background-color table-row-hover-background

styles/widgets.scarlet

@@ -22,7 +22,6 @@
 .widget
 	vertical
 	width 100%
-	max-width 300px
 	margin calc(content-padding / 2)
 	overflow hidden