From b63faacdcfa5d343897455bd93798eaec51df0a7 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 13 Oct 2016 19:24:53 +0200
Subject: [PATCH] Style modal dialog and status-debug classes

---
 src/styles/_base.sass | 88 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/styles/_base.sass b/src/styles/_base.sass
index 918645d..84431e2 100644
--- a/src/styles/_base.sass
+++ b/src/styles/_base.sass
@@ -27,20 +27,36 @@ nav.sidebar
 	width: $sidebar-width
 	height: 100%
 	background-color: $color-background-nav
+	display: flex
+	flex-direction: column
 
-	dl
-		dd
+	ul
+		width: 100%
+		margin: 0
+		padding: 0
+
+		&.bottom
+			margin-top: auto
+
+		li
+			display: block
+			padding: 0
 			margin: 0
-			a
+			a, button
 				display: flex
 				color: $color-text-light-hint
 				font-size: 1.5em
 				align-items: center
 				justify-content: center
 				padding: 10px 0
+				background: transparent
+				border: none
+				width: 100%
 
 				&:hover
 					color: $color-text-light-primary
+				&:active
+					outline: none
 
 #col_sidebar
 	width: $sidebar-width
@@ -204,3 +220,69 @@ select.input-transparent
 
 .fg-status
 	@include status-color-property(color, '', 'dark')
+
+.modal-content
+	border: none
+	border-radius: 3px
+	box-shadow: 0 0 25px rgba(black, .25)
+	background-color: $color-background-light
+
+	.modal-header
+		border-top-left-radius: 3px
+		border-top-right-radius: 3px
+		background-color: white
+		padding: 10px 10px 10px 15px
+
+		.title
+			font-size: 1.2em
+
+		.close
+			float: right
+			background: transparent
+			border: none
+			color: $color-text-dark-hint
+
+			&:hover
+				color: $color-primary
+
+.modal-backdrop
+	background-color: $color-background-nav
+
+
+.modal-help-panel
+	overflow: hidden
+	border-radius: 3px
+	width: 30%
+	background-color: white
+	box-shadow: 1px 2px 10px rgba(black, .1)
+
+	.title
+		display: block
+		padding: 10px
+		color: $color-text-dark-primary
+
+.status-debug-item
+	width: 100%
+
+.status-debug-item-statuses
+	display: flex
+	align-items: center
+	justify-content: center
+	color: $color-text
+	text-shadow: 1px 1px 0 rgba(white, .3)
+
+	.light, .regular, .dark
+		flex: 1
+		min-height: 25px
+		display: flex
+		align-items: center
+		justify-content: center
+
+	.light
+		@include status-color-property(background-color, '', 'light')
+	.regular
+		flex: 3
+		@include status-color-property(background-color, '', '')
+	.dark
+		@include status-color-property(background-color, '', 'dark')
+