From 9c2ded79dd7670174a065c91274675366e6871b7 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Fri, 31 Aug 2018 19:32:17 +0200
Subject: [PATCH] CSS: Cleanup and simplification

Mainly to rely more on bootstrap styling
---
 src/styles/_comments.sass            |   9 +
 src/styles/_config.sass              |   2 +-
 src/styles/_organizations.sass       |   3 -
 src/styles/_project.sass             | 384 +++++----------------------
 src/styles/_user.sass                |   7 -
 src/styles/_utils.sass               |  21 +-
 src/styles/blog.sass                 |  23 +-
 src/styles/components/_base.sass     |   6 +-
 src/styles/components/_dropdown.sass |   1 +
 src/styles/components/_footer.sass   |  19 +-
 src/styles/components/_inputs.sass   |  16 --
 src/styles/components/_navbar.sass   | 128 ++++-----
 src/styles/components/_search.sass   |  21 +-
 src/styles/plugins/_jstree.sass      |  10 +-
 src/styles/theatre.sass              |   3 +-
 15 files changed, 177 insertions(+), 476 deletions(-)

diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass
index 0c24e0f4..812aca8d 100644
--- a/src/styles/_comments.sass
+++ b/src/styles/_comments.sass
@@ -453,12 +453,17 @@ $comments-width-max: 710px
 		transition: background-color 150ms ease-in-out, color 150ms ease-in-out
 		width: 100px
 
+		// The actual button for submitting the comment.
 		button.comment-action-submit
+			align-items: center
 			background: transparent
 			border: none
 			border-top-left-radius: 0
 			border-bottom-left-radius: 0
 			color: $color-success
+			cursor: pointer
+			display: flex
+			justify-content: center
 			flex-direction: column
 			height: 100%
 			position: relative
@@ -466,8 +471,12 @@ $comments-width-max: 710px
 			white-space: nowrap
 			width: 100%
 
+			&:hover
+				background: rgba($color-success, .1)
+
 			&:focus
 				background: lighten($color-success, 10%)
+				color: $white
 
 			&.submitting
 				color: $color-info
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 04c0831e..f0f1f1f7 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -132,7 +132,7 @@ $btn-border-radius: $border-radius
 
 $primary: $color-primary
 
-$body-bg: $color-background
+$body-bg: $white
 $body-color: $color-text
 
 $color-background-nav: #fff
diff --git a/src/styles/_organizations.sass b/src/styles/_organizations.sass
index 583a8250..f3b82eb0 100644
--- a/src/styles/_organizations.sass
+++ b/src/styles/_organizations.sass
@@ -5,9 +5,6 @@ body.organizations
 
 		li.result
 			padding: 10px 20px
-		li.create
-			margin-left: auto
-
 
 	.dashboard-secondary
 		.box
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 2a71724c..822380ca 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -1,4 +1,3 @@
-$project-sidebar-background: lighten($color-background, 5%)
 $node-latest-thumbnail-size: 160px
 
 body.open-projects,
@@ -68,11 +67,6 @@ body.blog
 		width: 100%
 
 	ul.project-tabs
-		background-color: $color-background-nav
-		margin: 0
-		padding: 0
-		list-style: none
-
 		position: fixed
 		width: $project-sidebar-width
 		top: $project_header-height
@@ -85,16 +79,9 @@ body.blog
 			width: 100%
 
 		li
-			display: flex
-			align-items: center
-			justify-content: center
 			width: $project-sidebar-width
 			height: $project-sidebar-width
 			position: relative
-			color: white
-			background-color: $color-background-nav
-			border-left: 2px solid transparent
-			transition: all 100ms ease-in-out
 
 			+media-xs
 				border-bottom: 2px solid transparent
@@ -109,77 +96,41 @@ body.blog
 				border-top: thin solid transparent
 
 			&:hover
-				background-color: $color-background-nav-light
+				background-color: $primary
 				cursor: pointer
 
-				+media-xs
-					border-bottom: 2px solid $color-background-nav-light
-				+media-sm
-					border-bottom: 2px solid $color-background-nav-light
-				+media-md
-					border-left: 2px solid $color-background-nav-light
-				+media-lg
-					border-left: 2px solid $color-background-nav-light
+				a
+					color: $white
 
 			a
-				width: $project-sidebar-width
-				height: $project-sidebar-width
-				display: flex
 				align-items: center
+				display: flex
 				justify-content: center
-				color: $color-text-light-primary
+				height: $project-sidebar-width
+				width: $project-sidebar-width
 
 			i
 				font-size: 1.1em
 
 			&.active
-				background-color: $color-background-nav-light
-
-				// The tiny triangle
-				&:after
-					+media-xs
-						border-top-color: $project-sidebar-background
-						border-right-color: transparent
-						left: 50%
-						right: initial
-						transform: translateX(-50%)
-						top: 0
-
-					border: 7px solid transparent
-					border-right-color: $project-sidebar-background
-					content: ''
-					display: block
-					position: absolute
-					right: 0
-					top: 50%
-					transform: translateY(-50%)
+				background-color: $primary
+				color: $white
 
 				a
-					color: white
+					color: $white
 
 			&.tabs-thumbnail
-				height: $project-sidebar-width
-				border-bottom: 2px solid $color-background-nav-light
-
 				img
-					width: $project-sidebar-width
 					height: $project-sidebar-width
-
-				&.image
-					border-left: none
+					width: $project-sidebar-width
 
 				#project-loading
-					position: absolute
-					width: $project-sidebar-width
-					height: $project-sidebar-width
-					display: flex
 					align-items: center
+					display: flex
+					height: $project-sidebar-width
 					justify-content: center
-					i
-						position: relative
-						top: -1px
-						font-size: 1em
-						color: white
+					width: $project-sidebar-width
+
 
 #search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
 	background-color: $color-background-nav-dark
@@ -199,7 +150,6 @@ body.blog
 	+media-xs
 		width: initial
 
-	background-color: $project-sidebar-background
 	display: block
 	left: 0
 	position: relative
@@ -221,10 +171,6 @@ body.blog
 
 #project_context-header
 	align-items: center
-	background-color: white
-	background-color: $color-background-light
-	border-bottom: thin solid lighten($color-text-dark-hint, 10%)
-	box-shadow: none
 	color: $color-text-dark-secondary
 	display: flex
 	height: $project_header-height
@@ -232,42 +178,24 @@ body.blog
 	position: fixed
 	top: $project_header-height
 	transition: box-shadow 250ms ease-in-out
-	width: auto
 	z-index: $z-index-base + 3
 
 	&.is-offset
 		box-shadow: 0 0 25px rgba(black, .2)
 
 #project_nav-header
-	z-index: $z-index-base + 3
+	left: 0
 	position: absolute
 	top: 0
-	left: 0
-	height: $project_header-height
-	min-height: $project_header-height
 	width: 100%
-	background-color: $color-background-light
-	border-bottom: thin solid $color-background-dark
+	z-index: $z-index-base + 3
 
 	/* Name of the project */
 	.project-title
-		width: 100%
-		max-width: 100%
+		+text-overflow-ellipsis
 		height: 100%
-		transition: background-color 150ms ease-in-out
-
-		a
-			display: block
-			width: 100%
-			color: $color-text-dark
-			padding: 15px
-			font-size: 1.1em
-			+text-overflow-ellipsis
-
-			&:hover, &:active
-				color: $color-primary
-				text-decoration: none
-				outline: none
+		max-width: 100%
+		width: 100%
 
 span#status-bar
 	position: absolute
@@ -278,7 +206,6 @@ span#status-bar
 	color: $color-text-dark
 	opacity: 0
 	z-index: 1
-	background-color: $color-background-light
 	font-weight: 400
 	white-space: nowrap
 	transition: all 250ms ease-in-out
@@ -293,7 +220,7 @@ span#status-bar
 	&.info
 		color: $color-info
 	&.error
-		color: $color-danger
+		color: $danger
 	&.warning
 		color: $color-warning
 	&.success
@@ -320,71 +247,29 @@ span#project-edit-title
 	display: none
 
 ul.project-edit-tools
-	display: flex
 	align-items: center
-	height: 100%
-	padding: 0
-	margin:
-		top: 0
-		left: auto
-		right: 5px
-		bottom: 0
-	color: $color-text-dark-hint
-
+	display: flex
 	list-style-type: none
-	font-size: .9em
+	margin: 0 0 0 auto
+	padding: 0
 
 	+media-xs
 		width: 100%
 		margin: 0 auto
 		justify-content: space-around
 
-	/* Bottons at the end of a form, like Save Changes */
-	&.bottom
-		+clearfix
-		padding: 20px 0 25px 0
-		border-top: thin solid $color-text-dark-hint
-		justify-content: flex-end
-		width: 100%
-		height: initial
-
 	li
-		margin: 0
-		padding: 0
-		position: relative
-		float: left
-		user-select: none
+		a, button
+			padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
 
-		a
-			min-width: 110px
-			user-select: none
-
-			&:focus, &:active
-				text-decoration: none
-				outline: none
+			i
+				padding-right: 10px
 
 		&.button-save
-
-			&.disabled
-				border-bottom: none
-
-				a
-					color: white
-					border-color: darken($color-success, 10%)
-
-			a
-				border-color: $color-success
-				background-color: $color-success
-				color: white
-				margin-right: 10px
-
-				&:hover
-					background-color: lighten($color-success, 5%)
-
 			&.field-error
 				a
-					background-color: $color-danger
-					border-color: $color-danger
+					background-color: $danger
+					border-color: $danger
 					color: white
 
 			&.saving
@@ -411,31 +296,6 @@ ul.project-edit-tools
 		&.button-edit
 			min-width: 80px
 
-
-		&.button-dropdown
-			min-width: 50px
-			cursor: pointer
-			i
-				margin: auto
-				padding: 0
-
-				&.button-add-icon
-					margin-right: 5px
-
-			a.dropdown-toggle
-				display: inline-block
-				min-width: auto
-
-			&.open
-				a.dropdown-toggle
-					color: $color-text-light
-					background-color: $color-primary
-					border-color: darken($color-primary, 5%)
-
-				li.button-delete:hover
-					a
-						color: $color-danger
-
 		&.featured
 			a
 				color: $color-warning
@@ -445,132 +305,44 @@ ul.project-edit-tools
 					background-color: rgba($color-warning, .1)
 
 		&.disabled
-			cursor: not-allowed
-			border-bottom: thin solid $color-text-dark-hint
+			+disabled-stripes
 
 			a
-				pointer-events: none
-				background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
-				border-color: darken($color-text-dark-hint, 5%)
-				opacity: .6
-				color: $color-text-dark
+				+disabled-stripes
 
-		&.button-dropdown.disabled
-			border-bottom: none
-
-	a
-		margin: 5px
-		padding: 5px 15px
-		color: $color-text-dark-primary
-		border-radius: 3px
-		border: thin solid $color-text-dark-primary
-		text-align: center
-		text-transform: uppercase
-		transition: background-color 150ms ease-in-out
-		background-color: $color-background-light
-
-		i
-			margin-right: 5px
-
-		&:hover
-			background-color: $color-background-active-dark
-			border-color: darken($color-background-active-dark, 5%)
-			color: $color-text-light
-			text-decoration: none
-
-		&:focus, &:active
-			text-decoration: none
-			outline: none
-
-
-		&#item_save,
-		&#item_cancel
-			i
-				font-size: 1em
-
-		&#item_add,
-		&#item_edit,
-		&#item_move,
-		&#item_featured
+		&.dropdown
 			li
-				i
-					margin-right: 10px
+				padding: 0
 
-		&#item_delete
-			li i
-				margin-right: 0
-		// &:not(:last-of-type)
-			// border-right: thin solid darken($color-background, 50%)
+				a
+					color: $body-color
+					display: block
+					padding: $dropdown-item-padding-y $dropdown-item-padding-x
+					padding-left: 15px
+					user-select: none
 
-	/* ul.project-edit-tools */
+					&:hover
+						color: $primary
+						text-decoration: none
 
-	/* Extra asset tools in dropdown */
-	ul.dropdown-menu
-		width: auto
-		min-width: 180px
-		padding: 0
-		margin: 0
-		top: 44px
-		left: initial
-		right: 10px
-		bottom: initial
-		border: thin solid $color-text-dark-hint
-		border-bottom-left-radius: 3px
-		border-bottom-right-radius: 3px
-		border-top-left-radius: 0
-		border-top-right-radius: 0
-		background-color: white
-		color: $color-text-dark-primary
-		box-shadow: 1px 1px 25px rgba(black, .2)
-
-		li
-			padding: 0
-			clear: both
-			display: flex
-			align-items: center
-			width: 100%
-
-			a
-				margin: 0
-				padding: 10px 15px
-				width: 100%
-				border: 0
-				font-size: .9em
-				width: 100%
-				text-align: left
-
-				&:hover
-					color: $color-primary
-					background-color: transparent
-				&:active, &:focus
-					color: $color-primary
-					background-color: transparent
-
-				i
-					display: inline-block
-					margin: 0 15px 0 0
-
-					&.icon-group:after
-						content: '\e80d'
-					&.icon-group_texture:after,
-					&.icon-group_hdri:after
-						content: '\e80b'
-						font-size: 1.1em
-					&.icon-asset:after
-						content: '\e825'
-					&.icon-page:after
-						content: '\e824'
-					&.icon-texture:after
-						content: '\e80a'
-					&.icon-hdri:after
-						content: '\f019'
+	/* Icons per asset type. */
+	i
+		&.icon-group:after
+			content: '\e80d'
+		&.icon-group_texture:after,
+		&.icon-group_hdri:after
+			content: '\e80b'
+			font-size: 1.1em
+		&.icon-asset:after
+			content: '\e825'
+		&.icon-page:after
+			content: '\e824'
+		&.icon-texture:after
+			content: '\e80a'
+		&.icon-hdri:after
+			content: '\f019'
 
 	/* // Extra asset tools in dropdown */
-
-	&.open
-		button
-			box-shadow: none
-
 /* // Edit Asset buttons */
 
 #project-loading
@@ -661,7 +433,6 @@ ul.project_nav-edit-list
 
 #node-container
 	flex: 1
-	color: $color-text-dark
 	background-color: white
 
 	/* For error messages (403) and other overlaid text*/
@@ -684,8 +455,6 @@ ul.project_nav-edit-list
 /* Project context on the right of the navigation */
 /* Contains #project_context */
 #project_context-container
-	background-color: $color-background-nav
-
 	iframe#server_error
 		width: 100%
 		min-height: 800px
@@ -697,11 +466,10 @@ ul.project_nav-edit-list
 	+media-xs
 		margin-top: 0
 
-	background-color: $project-sidebar-background
 	border-right: thin solid $color-background
-	margin-top: $project_header-height
-	overflow-y: auto
-	padding: 0 0 5px 0// some padding on top/bottom of jstree
+	margin-top: $project_header-height //so it's right below the project title.
+	overflow-y: auto // show vertical scrollbars when needed.
+	padding: 0 0 5px 0 // some padding on top/bottom of jstree.
 	position: relative
 
 	&.edit
@@ -820,7 +588,7 @@ $node-preview-max-height-lg: 700px
 				margin-left: auto
 
 			&.pending
-				color: $color-danger
+				color: $danger
 
 	section.node-preview.texture
 		overflow: hidden
@@ -1069,13 +837,6 @@ section.node-preview-forbidden
 	span
 		display: block
 
-	a
-		color: $color-text-light
-
-		&.btn
-			border-color: white
-			color: white
-
 	hr
 		opacity: .5
 
@@ -1122,9 +883,6 @@ section.node-preview.group
 				padding: 0
 				margin: 0
 
-	&.project
-		.node-details-title
-			padding: 10px 20px 0 20px
 
 .node-details-description
 	+node-details-description
@@ -1158,7 +916,7 @@ section.node-preview.group
 				padding-left: 0
 
 			&.status-pending
-				color: $color-danger
+				color: $danger
 
 			&.public
 				color: $color-success
@@ -1348,7 +1106,7 @@ section.node-details-container
 					opacity: 1
 
 .error-node-type-not-found
-	color: $color-danger
+	color: $danger
 	clear: both
 
 a.learn-more
@@ -2093,15 +1851,15 @@ section.node-children
 				text-transform: capitalize
 
 			&.error
-				color: $color-danger
+				color: $danger
 				background-color: $color-background-light
 				padding: 10px 15px
-				border: thin solid lighten($color-danger, 10%)
-				border-top: 2px solid $color-danger
+				border: thin solid lighten($danger, 10%)
+				border-top: 2px solid $danger
 				border-bottom-left-radius: 3px
 				border-bottom-right-radius: 3px
 				label
-					color: $color-danger
+					color: $danger
 					font-weight: 500
 
 			&.file
@@ -2168,7 +1926,7 @@ section.node-children
 					outline: none
 
 				&.field-error
-					border-color: $color-danger
+					border-color: $danger
 
 			.md-preview-loading
 				position: absolute
@@ -2415,7 +2173,7 @@ section.node-children
 		.cancel
 			+button($color-warning, 3px)
 		.delete
-			+button($color-danger, 3px)
+			+button($danger, 3px)
 		.toggle
 			margin: 0 20px
 
@@ -2426,7 +2184,7 @@ section.node-children
 			&.cancel
 				+button($color-warning, 3px)
 			&.delete
-				+button($color-danger, 3px)
+				+button($danger, 3px)
 
 			&.create
 				+button($color-success, 3px)
diff --git a/src/styles/_user.sass b/src/styles/_user.sass
index a201494b..09929fb2 100644
--- a/src/styles/_user.sass
+++ b/src/styles/_user.sass
@@ -68,13 +68,6 @@
           background-color: lighten($provider-color-google, 7%)
 
 #settings
-  +media-xs
-    flex-direction: column
-
-  align-items: stretch
-  display: flex
-  margin: 25px auto
-
   #settings-sidebar
     +media-xs
       width: 100%
diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass
index f68216a0..3bdf374c 100644
--- a/src/styles/_utils.sass
+++ b/src/styles/_utils.sass
@@ -82,6 +82,15 @@
 			text-shadow: none
 
 
+=disabled-stripes
+	color: $color-text-dark
+	cursor: not-allowed
+	background: repeating-linear-gradient(-45deg, lighten($color-text-dark-hint, 15%), lighten($color-text-dark-hint, 15%) 10px, lighten($color-text-dark-hint, 5%) 10px, lighten($color-text-dark-hint, 5%) 20px)
+	border-color: darken($color-text-dark-hint, 5%)
+	pointer-events: none
+	opacity: .6
+
+
 @mixin overlay($from-color, $from-percentage, $to-color, $to-percentage)
 	position: absolute
 	top: 0
@@ -121,23 +130,17 @@
 	transform: translate(-50%, -50%)
 
 =input-generic
-	padding: 5px 5px 5px 0
+	// padding: 5px 5px 5px 0
 	color: $color-text-dark
-	box-shadow: none
-	border: thin solid transparent
-	border-radius: 0
-	border-bottom-color: $color-background-dark
 	background-color: transparent
-	transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
 
 	&:hover
 		border-bottom-color: $color-background
 
 	&:focus
 		outline: 0
-		border: thin solid transparent
-		border-bottom-color: $color-primary
-		box-shadow: 0 1px 0 0 $color-primary
+		border-color: $primary
+		box-shadow: none
 
 =label-generic
 	color: $color-text-dark-primary
diff --git a/src/styles/blog.sass b/src/styles/blog.sass
index e7460a5c..550d1edc 100644
--- a/src/styles/blog.sass
+++ b/src/styles/blog.sass
@@ -94,9 +94,6 @@
 	+media-xs
 		flex-direction: column
 		padding-top: 0
-	display: flex
-	padding:
-		bottom: 15px
 
 	video
 		max-width: 100%
@@ -278,14 +275,7 @@
 			width: 100%
 
 	.blog_index-item
-		+media-lg
-			max-width: 780px
-		+media-md
-			max-width: 780px
-		+media-sm
-			max-width: 780px
-
-		margin: 15px auto
+		max-width: 780px
 
 		&:hover
 			.item-info a
@@ -317,13 +307,6 @@
 			+media-lg
 				min-height: 250px
 
-		.item-title
-			color: $color-text-dark
-			display: block
-			font-size: 1.8em
-
-			padding: 10px 25px 10px
-
 		ul.meta
 			+list-meta
 			font-size: .9em
@@ -585,7 +568,7 @@
 				margin: 0 auto
 				padding: 15px 0
 				margin: 0 auto
-				border-bottom: thin solid $color-background
+				border-bottom: thin solid $color-background-dark
 
 				&:last-child
 					border-bottom: none
@@ -616,7 +599,7 @@
 					position: absolute
 					top: 20px
 					border-radius: 3px
-					background-color: $color-background
+					background-color: $color-background-dark
 					overflow: hidden
 
 					img
diff --git a/src/styles/components/_base.sass b/src/styles/components/_base.sass
index 51aa3ef4..b4a8fa0c 100644
--- a/src/styles/components/_base.sass
+++ b/src/styles/components/_base.sass
@@ -22,12 +22,8 @@ body
 	&.box
 		+container-box
 
-.container-page
-	background-color: white
-
 .page-content
-	position: relative
-	flex: 1
+	background-color: $white
 
 .container-box
 	+container-box
diff --git a/src/styles/components/_dropdown.sass b/src/styles/components/_dropdown.sass
index dc322071..f03e38df 100644
--- a/src/styles/components/_dropdown.sass
+++ b/src/styles/components/_dropdown.sass
@@ -1,6 +1,7 @@
 // Global, we want all menus to look like this.
 .dropdown-menu
 	box-shadow: $dropdown-box-shadow
+	top: 95% // So there is less gap between the dropdown and the item.
 
 	> li
 		> a
diff --git a/src/styles/components/_footer.sass b/src/styles/components/_footer.sass
index 9af3ba97..46c2b510 100644
--- a/src/styles/components/_footer.sass
+++ b/src/styles/components/_footer.sass
@@ -1,15 +1,24 @@
 /* FOOTER */
-#footer-container
+.footer-wrapper
+	background-color: $color-background
 	position: relative
 
-	.row
-		+media-xs
-			margin: 0
+	&:after
+		background-color: $color-background
+		bottom: 0
+		content: ''
+		position: fixed
+		left: 0
+		right: 0
+		top: 0
+		pointer-events: none
+		z-index: -1
 
 /* Footer Navigation */
 footer
 	font-size: .75em
 	padding: 0 0 10px 0
+
 	a
 		color: $color-text-dark-primary
 
@@ -58,7 +67,7 @@ footer
 		transform: scale(1)
 
 
-#footer-navigation
+.footer-navigation
 	font-size: .85em
 	margin-bottom: 5px
 	color: lighten($color-text, 30%)
diff --git a/src/styles/components/_inputs.sass b/src/styles/components/_inputs.sass
index 11dcd2f7..2690a549 100644
--- a/src/styles/components/_inputs.sass
+++ b/src/styles/components/_inputs.sass
@@ -24,23 +24,7 @@ textarea
 	resize: vertical
 
 button, .btn
-	+button($color-text-dark-secondary, $color-background, false)
-
-	&-success
-		+button($color-success, $color-success, false)
-	&-warning
-		+button($color-warning, $color-warning, false)
-	&-danger
-		+button($color-danger, $color-danger, false)
-	&-info
-		+button($color-info, $color-info, false)
-
-
 	&.disabled
-		+button($color-background-dark, $color-background, false)
-		background-color: $color-background-light !important
-		border-color: $color-background-dark !important
-		color: $color-text !important
 		opacity: .5 !important
 		pointer-events: none !important
 		text-shadow: none !important
diff --git a/src/styles/components/_navbar.sass b/src/styles/components/_navbar.sass
index f801ece6..ee13a1d5 100644
--- a/src/styles/components/_navbar.sass
+++ b/src/styles/components/_navbar.sass
@@ -1,43 +1,8 @@
 // Navigation.
-.navbar-overlay
-	+media-lg
-		display: block
-	bottom: 0
-	display: none
-	left: 0
-	height: 100%
-	position: absolute
-	right: 0
-	top: 0
-	transition: background-color 350ms ease-in-out
-	width: 100%
-	z-index: 0
-
-	&.is-active
-		background-color: $color-background-nav
-		text-shadow: none
-
-.navbar-brand
-	padding-left: 10px
-	color: $color-text
-	width: 120px // Blender Cloud logo width
-
-	&:hover
-		color: $color-text-dark-primary
-
-
-nav.navbar
-	.navbar-collapse
-		> ul > li > .navbar-item
-			padding: $navbar-nav-link-padding-x
-			height: $nav-link-height
-
 .navbar,
 nav.sidebar
-	align-items: center
-	background-color: $color-background-nav
 	border: none
-	display: flex
+	color: $color-text-dark-secondary
 	padding: 0
 	z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
 
@@ -53,30 +18,26 @@ nav.sidebar
 
 	.navbar-item
 		align-items: center
-		color: $color-text
 		display: flex
 		user-select: none
-		transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
+		color: inherit
 
 		+media-sm
 			padding-left: 10px
 			padding-right: 10px
 
 		&:hover, &:focus
-			color: $color-primary
+			color: $primary
 			background-color: transparent
-			box-shadow: inset 0 -3px 0 $color-primary
+			box-shadow: inset 0 -3px 0 $primary
 			text-decoration: none
 
 		&:focus
-			box-shadow: inset 0 -3px 0 $color-primary
+			box-shadow: inset 0 -3px 0 $primary
 
 		&.active
-			color: $color-primary
-			box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
-
-			&:hover
-				box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
+			color: $primary
+			box-shadow: inset 0 -3px 0 $primary
 
 		.pi-angle-down
 			position: relative
@@ -86,11 +47,6 @@ nav.sidebar
 		user-select: none
 		position: relative
 
-		&.nav-item-sign-in
-			i
-				padding-right: 6px
-				font-size: 1.1em
-
 		img.gravatar
 			border-radius: 999em
 			height: 32px
@@ -130,11 +86,6 @@ nav.sidebar
 	.dropdown
 		min-width: 60px // navbar avatar size
 
-		// Removes angle-down icon from bootstrap,
-		// since we use a nicer chevron.
-		a:after
-			display: none
-
 		span.fa-stack
 			position: absolute
 			top: 50%
@@ -176,9 +127,51 @@ nav.sidebar
 							font-size: .9em
 
 
-nav.sidebar
-	ul li.nav-item-sign-in a.navbar-item
-		font-size: .8em
+// Secondary navigation for
+.nav-secondary
+	align-items: center
+	box-shadow: 0 2px 0 0 $color-background
+
+	.nav-link
+		color: $color-text
+		transition: box-shadow 150ms ease-in-out
+
+		&:hover,
+		&.active
+			box-shadow: 0 2px 0 0 $primary
+
+
+.navbar-overlay
+	+media-lg
+		display: block
+	bottom: 0
+	display: none
+	left: 0
+	height: 100%
+	position: absolute
+	right: 0
+	top: 0
+	transition: background-color 350ms ease-in-out
+	width: 100%
+	z-index: 0
+
+	&.is-active
+		background-color: $color-background-nav
+		text-shadow: none
+
+.navbar-brand
+	padding-left: 10px
+	color: inherit
+	width: 120px // Blender Cloud logo width
+
+	&:hover
+		color: $primary
+
+nav.navbar
+	.navbar-collapse
+		> ul > li > .navbar-item
+			padding: $navbar-nav-link-padding-x
+			height: $nav-link-height
 
 
 .navbar-backdrop-container
@@ -206,20 +199,3 @@ nav.sidebar
 
 .navbar+.page-content
 	padding-top: $nav-link-height
-
-// Secondary navigation for
-.nav-secondary
-	align-items: center
-	box-shadow: 0 2px 0 0 $color-background
-
-	.nav-link
-		color: $color-text
-		transition: box-shadow 150ms ease-in-out
-
-		&:hover,
-		&.active
-			box-shadow: 0 2px 0 0 $color-primary
-
-	.nav-title
-		font-weight: bold
-		padding-right: 20px
diff --git a/src/styles/components/_search.sass b/src/styles/components/_search.sass
index 929ecb8d..62470e6f 100644
--- a/src/styles/components/_search.sass
+++ b/src/styles/components/_search.sass
@@ -35,30 +35,25 @@
 	padding: 0
 	margin: 0
 
-
 	.search-icon
 		position: absolute
-		color: white
 		top: 4px
 		left: 10px
 		cursor: pointer
 
 		&:after
-			opacity: 0
+			@extend .tooltip-inner
+
 			content: 'Use advanced search...'
-			font-style: normal
-			background: darken($color-background-nav, 5%)
-			color: $color-text-light-primary
-			box-shadow: 1px 1px 3px rgba(black, .4)
-			padding: 3px 10px
 			font-size: .85em
-			border-radius: 3px
-			top: 30px
+			font-style: normal
 			left: -10px
-			width: 150px
-			position: absolute
-			transition: top 150ms ease-in-out, opacity 150ms ease-in-out
+			opacity: 0
 			pointer-events: none
+			position: absolute
+			top: 30px
+			transition: top 150ms ease-in-out, opacity 150ms ease-in-out
+			width: 150px
 
 		&:hover
 			&:after
diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass
index b485e69b..a31a343f 100644
--- a/src/styles/plugins/_jstree.sass
+++ b/src/styles/plugins/_jstree.sass
@@ -1,9 +1,8 @@
 /* jsTree overrides */
-
 $tree-color-text: $color-text-dark-primary
-$tree-color-highlight: hsl(hue($color-background-active), 40%, 50%)
-$tree-color-highlight-background: hsl(hue($color-background-active), 40%, 50%)
-$tree-color-highlight-background-text: white
+$tree-color-highlight: $color-primary-accent
+$tree-color-highlight-background: $color-primary-accent
+$tree-color-highlight-background-text: $white
 
 .jstree-default
 	/* list item */
@@ -104,8 +103,7 @@ $tree-color-highlight-background-text: white
 			padding-left: 28px
 			padding-right: 10px
 			text-overflow: ellipsis
-			transition: none
-			transition: color 50ms ease-in-out, background-color 100ms ease-in-out
+			transition: background-color 100ms ease-in-out
 			white-space: nowrap
 			width: 100%
 
diff --git a/src/styles/theatre.sass b/src/styles/theatre.sass
index abb97a3a..371af62e 100644
--- a/src/styles/theatre.sass
+++ b/src/styles/theatre.sass
@@ -7,8 +7,7 @@ $color-theatre-background-dark: darken($color-theatre-background, 5%)
 
 $theatre-width: 350px
 
-body.theatre,
-body.theatre .container-page
+body.theatre
 	background-color: $color-theatre-background
 	nav.navbar
 		+media-lg