Improved forum

styles/config.styl

@@ -8,8 +8,18 @@ uiBorder = 1px solid rgba(0, 0, 0, 0.1)
 uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15)
 uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
-outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
-outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
-outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)
+outlineShadowLight = 0 0 6px alpha(black, 0.05)
+outlineShadowMedium = 0 0 6px alpha(black, 0.13)
+outlineShadowHeavy = 0 0 6px alpha(black, 0.6)
 transitionSpeed = 290ms
-fadeSpeed = 200ms
+fadeSpeed = 200ms
+
+uiElement()
+	border uiBorder
+	background uiBackground
+	transition all transitionSpeed ease
+
+	&:hover
+		border uiHoverBorder
+		background uiHoverBackground
+		box-shadow outlineShadowMedium

styles/forum.styl

@@ -74,17 +74,15 @@
 	color rgb(255, 32, 12) !important
 
 .post-content
+	uiElement()
 	text-align left
 	flex-grow 1
 	padding 0.4rem 1rem
 	margin-left 0.3rem
-	background uiBackground
-	border uiBorder
 	border-radius 3px
 	position relative
 
 	&:hover
-		background uiHoverBackground
 		.post-toolbar
 			opacity 1
 

styles/grid.styl

@@ -5,6 +5,8 @@
 	float none !important
 
 .grid-cell
+	uiElement()
+	
 	flex-grow 0
 	flex-shrink 0
 
@@ -19,13 +21,8 @@
 	background-position 50% 50%
 
 	margin 0.5rem
-	border uiBorder
-	background uiBackground
 
 	&:hover
-		border uiHoverBorder
-		background uiHoverBackground
-		box-shadow outlineShadowMedium
 		transform scale(1.03)
 		// .grid-icon
 		// 	transform scale(1.3)

styles/loading.styl

@@ -5,7 +5,7 @@ size = 24px
 	display block
 	position fixed
 	bottom 1.15rem
-	right calc(1.15rem + 17px)
+	right 1.15rem
 	pointer-events none
 
 .sk-cube-grid

styles/user.styl

@@ -26,8 +26,8 @@ avatarSize = 50px
 	object-fit cover
 
 svg.user-image
-	circle.body
-		fill rgb(60, 60, 60)
+	circle.body, circle.head
+		fill textColor
 	text
 		fill white
 		font-size 0.65rem