CSS: $primary-accent color and gradient utils

src/styles/_apps_base.sass

@@ -411,10 +411,12 @@ $loader-bar-height: 2px
 	position: absolute
 	visibility: hidden
 	width: 100%
+	z-index: 20
 
 	&:before
 		animation: none
 		background-color: $primary
+		background-image: linear-gradient(to right, $primary-accent, $primary)
 		content: ''
 		display: block
 		height: $loader-bar-height
@@ -452,3 +454,4 @@ $loader-bar-height: 2px
 
 .progress-bar
 	background-color: $primary
+	background-image: linear-gradient(to right, $primary-accent, $primary)

src/styles/_config.sass

@@ -30,6 +30,7 @@ $color-primary: #009eff !default
 $color-primary-light: hsl(hue($color-primary), 30%, 90%) !default
 $color-primary-dark: hsl(hue($color-primary), 80%, 30%) !default
 $color-primary-accent:  hsl(hue($color-primary), 100%, 50%) !default
+$primary-accent: #0bd
 
 $color-secondary: #f42942 !default
 $color-secondary-light: hsl(hue($color-secondary), 30%, 90%) !default
@@ -156,3 +157,5 @@ $tooltip-max-width: auto
 $tooltip-opacity: 1
 
 $nav-link-height: 37px
+$navbar-padding-x: 0
+$navbar-padding-y: 0

src/styles/_notifications.sass

@@ -24,13 +24,16 @@
 			color: $color-secondary
 
 #notifications-toggle
+	color: $color-text
 	cursor: pointer
-	font-size: 1.5em
 	position: relative
 	user-select: none
 
 	> i:before
 		content: '\e815'
+		font-size: 1.3em
+		position: relative
+		top: 2px
 
 	&.has-notifications
 		> i:before

src/styles/_project.sass

@@ -77,6 +77,8 @@ body.workshops
 
 				a
 					color: $primary
+					i
+						+active-gradient
 
 			a
 				align-items: center

src/styles/_utils.sass

@@ -659,6 +659,9 @@
 .user-select-none
 	user-select: none
 
+.pointer-events-none
+	pointer-events: none
+
 // Bootstrap has .img-fluid, a class to limit the width of an image to 100%.
 // .imgs-fluid below is to be applied on a parent container when we can't add
 // classes to the images themselves. e.g. the blog.
@@ -677,7 +680,7 @@
 		-webkit-text-fill-color: transparent
 
 =active-gradient
-	+text-gradient(#0cc, $primary)
+	+text-gradient($primary-accent, $primary)
 
 	&:before
-		+text-gradient(#0cc, $primary)
+		+text-gradient($primary-accent, $primary)

src/styles/components/_card.sass

@@ -98,6 +98,7 @@
 		i
 			opacity: .2
 
+/* Tiny label for cards. e.g. 'WATCHED' on videos. */
 .card-label
 	background-color: rgba($black, .5)
 	border-radius: 3px
@@ -105,7 +106,7 @@
 	display: block
 	font-size: $font-size-xxs
 	left: 5px
-	top: -25px
+	top: -27px // enough to be above the progress-bar
 	position: absolute
 	padding: 1px 5px
 	z-index: 1