Debug bar: Dark/light mode + Complete CSS refactoring

admin/css/debug-toolbar/_graphic-charter.scss

@@ -0,0 +1,20 @@
+// COLORS
+// ========================================================================== */
+
+// Themes
+$t-dark: #252525;
+$t-light: #FFFFFF;
+
+// Glossy colors
+$g-blue: #5BC0DE;
+$g-gray: #434343;
+$g-green: #9ACE25;
+$g-orange: #DD8615;
+$g-red: #DD4814;
+
+// Matt colors
+$m-blue: #D8EAF0;
+$m-gray: #DFDFDF;
+$m-green: #DFF0D8;
+$m-orange: #FDC894;
+$m-red: #EF9090;

admin/css/debug-toolbar/_mixins.scss

@@ -0,0 +1,13 @@
+// MIXINS
+// ========================================================================== */
+
+@mixin border-radius($radius) {
+					border-radius: $radius;
+		 -moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+}
+@mixin box-shadow($left, $top, $radius, $color) {
+					box-shadow: $left $top $radius $color;
+		 -moz-box-shadow: $left $top $radius $color;
+	-webkit-box-shadow: $left $top $radius $color;
+}

admin/css/debug-toolbar/_settings.scss

@@ -0,0 +1,8 @@
+// FONT
+// ========================================================================== */
+
+// Standard "sans-serif" font stack used by Github
+$base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+
+// Default size, all other styles are based on this size
+$base-size: 16px;

admin/css/debug-toolbar/_theme-dark.scss

@@ -0,0 +1,152 @@
+// IMPORTS
+// ========================================================================== */
+
+// The "box-shadow" mixin uses colors
+@import '_mixins';
+
+// Graphic charter
+@import '_graphic-charter';
+
+
+// DEBUG ICON
+// ========================================================================== */
+
+#debug-icon {
+	background-color: $t-dark;
+	@include box-shadow(0, 0, 4px, $m-gray);
+	a:active, a:link, a:visited {
+		color: $g-orange;
+	}
+}
+
+
+// DEBUG BAR
+// ========================================================================== */
+
+#debug-bar {
+ 	background-color: $t-dark;
+ 	color: $m-gray;
+
+	// Reset to prevent conflict with other CSS files
+ 	h1,
+	h2,
+	h3,
+	p,
+	a,
+	button,
+	table,
+	thead,
+	tr,
+	td,
+	button,
+	.toolbar {
+		background-color: transparent;
+ 		color: $m-gray;
+ 	}
+
+	// Buttons
+	button {
+		background-color: $t-dark;
+	}
+
+	// Tables
+ 	table {
+ 		strong {
+			color: $m-orange;
+ 		}
+ 		tbody tr {
+ 			&:hover {
+ 				background-color: $g-gray;
+ 			}
+ 			&.current {
+ 				background-color: $m-orange;
+				td {
+					color: $t-dark;
+				}
+				&:hover td {
+	 				background-color: $g-red;
+					color: $t-light;
+	 			}
+ 			}
+ 		}
+ 	}
+
+	// The toolbar
+ 	.toolbar {
+ 		background-color: $g-gray;
+ 		@include box-shadow(0, 0, 4px, $g-gray);
+		img {
+			filter: brightness(0) invert(1);
+		}
+ 	}
+
+	// Fixed top
+	&.fixed-top {
+		& .toolbar {
+			@include box-shadow(0, 0, 4px, $g-gray);
+		}
+		.tab {
+			@include box-shadow(0, 1px, 4px, $g-gray);
+		}
+	}
+
+	// "Muted" elements
+	.muted {
+ 		color: $m-gray;
+ 		td {
+ 			color: $g-gray;
+ 		}
+ 		&:hover td {
+ 			color: $m-gray;
+ 		}
+ 	}
+
+	// The toolbar preferences
+	#toolbar-position,
+	#toolbar-theme, {
+		filter: brightness(0) invert(0.6);
+	}
+
+	// The toolbar menus
+ 	.ci-label {
+ 		&.active {
+ 			background-color: $t-dark;
+ 		}
+ 		&:hover {
+ 			background-color: $t-dark;
+ 		}
+ 		.badge {
+ 			background-color: $g-blue;
+ 			color: $m-gray;
+ 		}
+ 	}
+
+	// The tabs container
+ 	.tab {
+ 		background-color: $t-dark;
+		@include box-shadow(0, -1px, 4px, $g-gray);
+ 	}
+
+	// The "Timeline" tab
+	.timeline {
+ 		th,
+		td {
+ 			border-color: $g-gray;
+ 		}
+ 		.timer {
+ 			background-color: $g-orange;
+ 		}
+ 	}
+}
+
+
+// DEBUG VIEW
+// ========================================================================== */
+
+.debug-view.show-view {
+	border-color: $g-orange;
+}
+.debug-view-path {
+	background-color: $m-orange;
+	color: $g-gray;
+}

admin/css/debug-toolbar/_theme-light.scss

@@ -0,0 +1,149 @@
+// IMPORTS
+// ========================================================================== */
+
+// The "box-shadow" mixin uses colors
+@import '_mixins';
+
+// Graphic charter
+@import '_graphic-charter';
+
+
+// DEBUG ICON
+// ========================================================================== */
+
+#debug-icon {
+	background-color: $t-light;
+	@include box-shadow(0, 0, 4px, $m-gray);
+	a:active, a:link, a:visited {
+		color: $g-orange;
+	}
+}
+
+
+// DEBUG BAR
+// ========================================================================== */
+
+#debug-bar {
+ 	background-color: $t-light;
+ 	color: $g-gray;
+
+	// Reset to prevent conflict with other CSS files */
+ 	h1,
+	h2,
+	h3,
+	p,
+	a,
+	button,
+	table,
+	thead,
+	tr,
+	td,
+	button,
+	.toolbar {
+		background-color: transparent;
+		color: $g-gray;
+	}
+
+	// Buttons
+	button {
+		background-color: $t-light;
+	}
+
+	// Tables
+ 	table {
+ 		strong {
+ 			color: $m-orange;
+ 		}
+ 		tbody tr {
+ 			&:hover {
+ 				background-color: $m-gray;
+ 			}
+ 			&.current {
+ 				background-color: $m-orange;
+				&:hover td {
+	 				background-color: $g-red;
+					color: $t-light;
+	 			}
+ 			}
+ 		}
+ 	}
+
+	// The toolbar
+ 	.toolbar {
+ 		background-color: $t-light;
+ 		@include box-shadow(0, 0, 4px, $m-gray);
+		img {
+			filter: brightness(0) invert(0.4);
+		}
+ 	}
+
+	// Fixed top
+	&.fixed-top {
+		& .toolbar {
+			@include box-shadow(0, 0, 4px, $m-gray);
+		}
+		.tab {
+			@include box-shadow(0, 1px, 4px, $m-gray);
+		}
+	}
+
+	// "Muted" elements
+ 	.muted {
+ 		color: $g-gray;
+ 		td {
+ 			color: $m-gray;
+ 		}
+ 		&:hover td {
+ 			color: $g-gray;
+ 		}
+ 	}
+
+	// The toolbar preferences
+	#toolbar-position,
+	#toolbar-theme, {
+		filter: brightness(0) invert(0.6);
+	}
+
+	// The toolbar menus
+ 	.ci-label {
+ 		&.active {
+ 			background-color: $m-gray;
+ 		}
+ 		&:hover {
+ 			background-color: $m-gray;
+ 		}
+ 		.badge {
+ 			background-color: $g-blue;
+			color: $t-light;
+ 		}
+ 	}
+
+	// The tabs container
+ 	.tab {
+ 		background-color: $t-light;
+		@include box-shadow(0, -1px, 4px, $m-gray);
+ 	}
+
+	// The "Timeline" tab
+	.timeline {
+ 		th,
+		td {
+ 			border-color: $m-gray;
+ 		}
+ 		.timer {
+ 			background-color: $g-orange;
+ 		}
+ 	}
+}
+
+
+// DEBUG VIEW
+// ========================================================================== */
+
+.debug-view.show-view {
+	border-color: $g-orange;
+}
+.debug-view-path {
+	background-color: $m-orange;
+	color: $g-gray;
+}