Improve color handling for night mode.

gskinner · gskinner · commit 50e6e4185ca0 · 2019-03-14T11:44:32.000-06:00
diff --git a/assets/themes/dark.css b/assets/themes/dark.css
diff --git a/dev/sass/controls.scss b/dev/sass/controls.scss
@@ -1,26 +1,16 @@
 %control {
-	background: rgba($doc-white, 0.25);
 	padding: 0.375rem 0.75rem;
 	font-size: 0.875rem;
 	border-radius: $control-radius;
 }
 
-.controlbar {
-	display: flex;
-	padding: 0;
-	margin: 0; // Firefox injects a 16px margin for some reason without this.
-	
-	> * {
-		margin-left: $pad*0.25;
-	}
-}
-
 input, textarea {
 	@extend %control;
+
 	border-radius: 0;
-	background: rgba($white, 0.05);
+	background: rgba($white, $input-opacity);
 	border: none;
-	border-bottom: solid 1px rgba($white, 0.05);
+	border-bottom: solid 1px rgba($white, $input-opacity);
 	font-family: $font-family;
 	font-size: 1rem;
 	display: block;
@@ -77,11 +67,14 @@ svg.icon {
 
 .control {
 	@extend %control;
+	
+	background: rgba($white, $control-opacity);
 }
 
-.button {
+.button, .buttonbar > *, .segcontrol > * {
 	@extend %control;
 	
+	background: rgba($white, $button-opacity);
 	display: inline-block;
 	cursor: pointer;
 	transition: background-color $transition-t ease-out;
@@ -95,12 +88,12 @@ svg.icon {
 		color: $black;
 		
 		&:hover {
-			background: $doc-white;
+			background: $white;
 		}
 	}
 	
 	&:hover, &.selected {
-		background: rgba($doc-white, 0.75);
+		background: rgba($white, $button-hover-opacity);
 		
 		> svg.icon.dropdown {
 			margin-top: 0.5em;
@@ -128,24 +121,43 @@ svg.icon {
 	}
 }
 
-.segcontrol {
-	@extend .controlbar;
-	 > * {
-		@extend .button;
-		margin-left: 1px;
-		border-radius: 0;
-		display: inline-block;
-		
-		 &:first-child {
-			border-radius: $control-radius 0 0 $control-radius;
-		}
-		
-		&:last-child {
-			border-radius: 0 $control-radius $control-radius 0;
-		}
+.controlbar, .buttonbar, .segcontrol {
+	display: flex;
+	padding: 0;
+	margin: 0; // Firefox injects a 16px margin for some reason without this.
+	
+	> * {
+		margin-left: $pad*0.25;
 	}
 }
 
+.buttonbar, .segcontrol {
+	> * {
+	   margin-left: 1px;
+	   border-radius: 0;
+	   display: inline-block;
+	   
+		&:first-child {
+		   border-radius: $control-radius 0 0 $control-radius;
+	   }
+	   
+	   &:last-child {
+		   border-radius: 0 $control-radius $control-radius 0;
+	   }
+   }
+}
+
+.segcontrol > * {
+	&:first-child {
+		border-radius: $control-radius 0 0 $control-radius;
+	}
+	
+	&:last-child {
+		border-radius: 0 $control-radius $control-radius 0;
+	}
+}
+
+
 
 .tooltip {
 	display: flex;
diff --git a/dev/sass/variables.scss b/dev/sass/variables.scss
@@ -3,6 +3,11 @@ $control-radius: 0.125rem;
 $input-height: 3.75rem;
 $title-height: 2.5rem;
 $transition-t: 0.2s;
+
+$control-opacity: 0.2;
+$button-opacity: 0.35;
+$input-opacity: 0.05;
+$button-hover-opacity: 0.75;
 $disabled-opacity: 0.35;
 
 $related-stroke-width: 1px;
diff --git a/dev/sass/views/doc.scss b/dev/sass/views/doc.scss
@@ -51,4 +51,26 @@
 			}
 		}
 	}
+
+	// overwrite colors:
+	input, textarea {
+		background:  rgba($doc-white, $input-opacity);
+		border-color: rgba($doc-white, $input-opacity);
+	}
+
+	.control {
+		background: rgba($doc-white, $control-opacity);
+	}
+
+	.button, .buttonbar > *, .segcontrol > * {
+		background: rgba($doc-white, $button-opacity);
+
+		&:hover, &.selected {
+			background: rgba($doc-white, $button-hover-opacity);
+		}
+
+		&.default:hover {
+			background: $doc-white;
+		}
+	}
 }
diff --git a/dev/sass/views/expression.scss b/dev/sass/views/expression.scss
@@ -33,9 +33,12 @@
 #tooltip-flavor, #tooltip-flags {
 	> .list {
 		li {
-			@extend %link;
-			
+			cursor: pointer;
 			color: $doc-light;
+
+			&:hover {
+				color: $doc-white;
+			}
 			
 			+ li {
 				margin-top: 0.5em;
diff --git a/dev/sass/views/header.scss b/dev/sass/views/header.scss
@@ -112,19 +112,22 @@
 		@extend .button;
 		margin: $pad*0.25 0;
 		padding: $pad*0.625;
+		color: $lightest;
 
-		background: $dark;
 		opacity: 0.85;
 		&:hover {
-			background: $dark;
 			opacity: 1;
 		}
 
+		&[data-id='GitHub'] {
+			background: #777777 !important;
+		}
+
 		&[data-id='Facebook'] {
-			background: #4267B2;
+			background: #4267B2 !important;
 		}
 		&[data-id='Google'] {
-			background: #C94130;
+			background: #C94130 !important;
 		}
 		
 		>svg.icon {
@@ -136,7 +139,12 @@
 		display: none;
 
 		.signoutbtn {
-			@extend %link;
+			cursor: pointer;
+			color: $theme-color;
+			
+			&:hover {
+				color: $doc-white;
+			}
 		}
 	}
 	
diff --git a/dev/sass/views/text.scss b/dev/sass/views/text.scss
@@ -61,7 +61,7 @@
 	}
 }
 
-#tooltip {
+#tooltip .texthover {
 	.more {
 		display: inline-block;
 		color: $doc-light;
diff --git a/dev/src/views/TextHover.js b/dev/src/views/TextHover.js
@@ -17,6 +17,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
 import CMUtils from "../utils/CMUtils";
+import $ from "../utils/DOMUtils";
 
 import app from "../app";
 
@@ -61,6 +62,11 @@ export default class TextHover {
 		}
 		let rect = (index != null) && CMUtils.getCharRect(cm, index);
 		if (rect) { rect.right = rect.left = x; }
-		app.tooltip.hover.show("TextHover", app.reference.tipForMatch(match, cm.getValue()), x, rect.bottom, true, 0);
+		let tip = app.reference.tipForMatch(match, cm.getValue());
+		if (tip) {
+			let div = $.create("div", "texthover", tip);
+			app.tooltip.hover.show("TextHover", div, x, rect.bottom, true, 0);
+		}
+		
 	}
 }

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`		`-#tooltip {`
	`64`	`+#tooltip .texthover {`
`65`	`65`	`.more {`
`66`	`66`	`display: inline-block;`
`67`	`67`	`color: $doc-light;`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.`
`17`	`17`	`*/`
`18`	`18`
`19`	`19`	`import CMUtils from "../utils/CMUtils";`
	`20`	`+import $ from "../utils/DOMUtils";`
`20`	`21`
`21`	`22`	`import app from "../app";`
`22`	`23`
`@@ -61,6 +62,11 @@ export default class TextHover {`
`61`	`62`	`}`
`62`	`63`	`let rect = (index != null) && CMUtils.getCharRect(cm, index);`
`63`	`64`	`if (rect) { rect.right = rect.left = x; }`
`64`		`- app.tooltip.hover.show("TextHover", app.reference.tipForMatch(match, cm.getValue()), x, rect.bottom, true, 0);`
	`65`	`+ let tip = app.reference.tipForMatch(match, cm.getValue());`
	`66`	`+ if (tip) {`
	`67`	`+ let div = $.create("div", "texthover", tip);`
	`68`	`+ app.tooltip.hover.show("TextHover", div, x, rect.bottom, true, 0);`
	`69`	`+ }`
	`70`	`+`
`65`	`71`	`}`
`66`	`72`	`}`