Style updates

- Add new variable for selected colour, using old hover colour
- More subtle hover colour
- Dimmer selected colour
- Bold font on selected elements for better readability
- Tweaked text colours
- Use brighter text colour for headings
- Reduced border-radius
- Restore some missing text shadows

index.html

@@ -130,26 +130,29 @@
     <style>
         /* Theme colours */
         :root {
-            --background-base: #222222; /* Buttons/sidebar */
+            --background-base: #222222; /* Foreground UI elements */
-            --background-dark: #121212; /* Body/map labels  */
+            --background-dark: #121212; /* Body/map labels */
-            --background-light: #333333; /* Scrollbars/inputs */
+            --background-light: #363636; /* Scrollbars/inputs */
             --background-error: #771616; /* Errors */
 
             --background-disabled: #555555; /* Disabled controls */
-            --background-hover: #cccccc; /* Button :hover/selected */
+            --background-hover: #363636; /* :hovered buttons/menu items */
+            --background-selected: #BDBDBD; /* Selected buttons/menu items */
 
-            --outline-focus: #eeeeee; /* Button :focus outline */
+            --outline-focus: #eeeeee; /* :focus outline */
 
-            --border-radius: 1rem;
+            --border-radius: 0.5rem;
             --border-color: #333333; /* Control borders */
             --box-shadow: 2px 2px 0px #111111;
 
-            --text-base: #cccccc; /* Normal text */
+            --text-base: rgba(255, 255, 255, 0.7); /* Normal text */
-            --text-emphasis: #eeeeee; /* Chat messages/:focus inputs */
+            --text-emphasis: rgba(255, 255, 255, 0.87); /* Chat messages/:focus inputs */
-            --text-subtle: #aaaaaa; /* Skeletons/secondary text */
+            --text-subtle: rgba(255, 255, 255, 0.5); /* Skeletons/secondary text */
-            --text-disabled: #999999; /* Disabled controls */
+            --text-disabled: var(--text-subtle); /* Disabled controls */
 
-            --text-hover: var(--background-base); /* Text in :hover/selected buttons */
+            --text-hover: var(--text-base); /* Text in :hover buttons */
+            --text-selected: var(--background-base); /* Text in selected buttons */
+            --text-shadow: 0.1rem 0.1rem #000000; /* Text in selected buttons */
 
             --text-night: #ddffff; /* Clock time at night */
             --text-day: #ffdd33; /* Clock time in day */
@@ -214,7 +217,7 @@
         body {
             font-family: Raleway, sans-serif;
             color: var(--text-base);
-            text-shadow: 0.1rem 0.1rem #000000;
+            text-shadow: var(--text-shadow);
             letter-spacing: 0.02rem;
         }
 

src/components/Sidebar.vue

@@ -247,9 +247,11 @@ export default defineComponent({
 				padding: 1.5rem 1.5rem 1rem;
 				margin: -1.5rem -1.5rem 0;
 				background-color: transparent;
+				font-weight: 400;
 				color: inherit;
 				width: calc(100% + 3rem);
 				align-items: center;
+				text-shadow: var(--text-shadow);
 
 				.svg-icon {
 					margin-left: auto;
@@ -260,7 +262,6 @@ export default defineComponent({
 
 			&:hover, &:focus-visible, &.focus-visible {
 				background-color: transparent;
-				color: inherit;
 			}
 		}
 

src/scss/_mixins.scss

@@ -36,7 +36,7 @@
 	font-size: 1.6rem;
 	font-family: Raleway, sans-serif;
 	box-sizing: border-box;
-	text-shadow: none;
+	text-shadow: var(--text-shadow);
 	user-select: none;
 
 	.svg-icon {
@@ -63,6 +63,13 @@
 	color: var(--text-hover);
 }
 
+@mixin button-pressed {
+	background-color: var(--background-selected);
+	color: var(--text-selected);
+	font-weight: bold;
+	text-shadow: none;
+}
+
 @mixin button-focused {
 	outline: var(--outline-focus) auto thick !important;
 	z-index: 1;

src/scss/_placeholders.scss

@@ -19,10 +19,14 @@
 %button {
 	@include button;
 
-	&:hover, &[aria-expanded="true"], &[aria-pressed="true"] {
+	&:hover {
 		@include button-hovered;
 	}
 
+	&[aria-expanded="true"], &[aria-pressed="true"] {
+		@include button-pressed;
+	}
+
 	&:focus {
 		@include button-focused;
 	}

src/scss/style.scss

@@ -36,7 +36,16 @@
 	font-style: normal;
 	font-weight: 400;
 	font-display: swap;
-	src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
+	src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+	font-family: 'Raleway';
+	font-style: normal;
+	font-weight: bold;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVsEpbCIPrE.woff2) format('woff2');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -53,6 +62,7 @@
 h1, h2, h3, h4, h5, h6 {
 	font-weight: normal;
 	margin-top: 0;
+	color: var(--text-emphasis);
 }
 
 h1 {
@@ -223,11 +233,16 @@ input {
 			margin-bottom: 0.1rem;
 		}
 
-		& + label:hover, &:checked + label {
+		& + label:hover {
 			@include button-hovered;
 			position: relative;
 		}
 
+		&:checked + label {
+			@include button-pressed;
+			position: relative;
+		}
+
 		&:focus + label {
 			@include button-focused;
 		}