fix dark mode styles (#668)

frontend/main.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import 'femtocrank/style.css'
+import 'femtocrank/dark.css'
 import './style.css'
 
 import 'iconify-icon'

frontend/package-lock.json

@@ -16,8 +16,8 @@
 				"@vitejs/plugin-vue": "^6.0.1",
 				"@xterm/addon-fit": "^0.10.0",
 				"@xterm/xterm": "^5.5.0",
-				"iconify-icon": "^3.0.1",
+				"iconify-icon": "^3.0.2",
-				"picocrank": "^1.6.2",
+				"picocrank": "^1.6.4",
 				"unplugin-vue-components": "^30.0.0",
 				"vite": "^7.1.12",
 				"vue-router": "^4.6.3"
@@ -1643,9 +1643,9 @@
 			}
 		},
 		"node_modules/femtocrank": {
-			"version": "2.4.3",
+			"version": "2.4.4",
-			"resolved": "https://registry.npmjs.org/femtocrank/-/femtocrank-2.4.3.tgz",
+			"resolved": "https://registry.npmjs.org/femtocrank/-/femtocrank-2.4.4.tgz",
-			"integrity": "sha512-rBuvg5NmG5YzfsHSCIwiNTO3RQlFdDLggLTvNw4u+vUkcRIU0OEFZpG2zyADEofXM9Ntsxzbn8jTf3i5iPwRgw==",
+			"integrity": "sha512-MG0s8QPivocTXCElfqvLCW0m9uRGlCauoyRr3obEu8mz7/s1LsUs46b29Xdn4DQpdu3eagWYj6rkuVqEO6g4TQ==",
 			"license": "AGPL-3.0"
 		},
 		"node_modules/fill-range": {
@@ -1784,9 +1784,9 @@
 			}
 		},
 		"node_modules/iconify-icon": {
-			"version": "3.0.1",
+			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.2.tgz",
-			"integrity": "sha512-M3/kH3C+e/ufhmQuOSYSb1Ri1ImJ+ZEQYcVRMKnlSc8Nrdoy+iY9YvFnplX8t/3aCRuo5wN4RVPtCSHGnbt8dg==",
+			"integrity": "sha512-DYPAumiUeUeT/GHT8x2wrAVKn1FqZJqFH0Y5pBefapWRreV1BBvqBVMb0020YQ2njmbR59r/IathL2d2OrDrxA==",
 			"license": "MIT",
 			"dependencies": {
 				"@iconify/types": "^2.0.0"
@@ -2362,15 +2362,15 @@
 			"license": "ISC"
 		},
 		"node_modules/picocrank": {
-			"version": "1.6.2",
+			"version": "1.6.4",
-			"resolved": "https://registry.npmjs.org/picocrank/-/picocrank-1.6.2.tgz",
+			"resolved": "https://registry.npmjs.org/picocrank/-/picocrank-1.6.4.tgz",
-			"integrity": "sha512-8adBUA8/iDwAP+RjM3Jr/UdXH/Dd0VbqtlxJYfAAL20T8tp+spjrtTMduYT7QIRx7jrxRyFHIV8G5q1B50u35g==",
+			"integrity": "sha512-zD1wnkoUDAXZOUs9zKqS4rqz9mljeqFwM7QWx4ykXJsmH6iOLAIKh2AVlxa384oeXJXIWM9VLiySEnhQZmQmjA==",
 			"license": "ISC",
 			"dependencies": {
 				"@hugeicons/core-free-icons": "^1.0.16",
 				"@hugeicons/vue": "^1.0.3",
 				"@vitejs/plugin-vue": "^6.0.1",
-				"femtocrank": "^2.4.3",
+				"femtocrank": "^2.4.4",
 				"unplugin-vue-components": "^29.0.0",
 				"vite": "^7.1.3",
 				"vue": "^3.5.19",

frontend/package.json

@@ -29,8 +29,8 @@
 		"@vitejs/plugin-vue": "^6.0.1",
 		"@xterm/addon-fit": "^0.10.0",
 		"@xterm/xterm": "^5.5.0",
-		"iconify-icon": "^3.0.1",
+		"iconify-icon": "^3.0.2",
-		"picocrank": "^1.6.2",
+		"picocrank": "^1.6.4",
 		"unplugin-vue-components": "^30.0.0",
 		"vite": "^7.1.12",
 		"vue-router": "^4.6.3"

frontend/resources/vue/ActionButton.vue

@@ -293,4 +293,20 @@ watch(
 	top: 0;
 }
 
+@media (prefers-color-scheme: dark) {
+	.action-button button {
+		background: #111;
+		border-color: #000;
+		box-shadow: 0 0 6px #000;
+		color: #fff;
+	}
+
+	.action-button button:hover:not(:disabled) {
+		background: #222;
+		border-color: #000;
+		box-shadow: 0 0 6px #444;
+		color: #fff;
+	}
+}
+
 </style>

frontend/resources/vue/App.vue

@@ -35,9 +35,8 @@
 
             <footer title="footer" v-if="showFooter && !initError">
                 <p>
-                    <img title="application icon" src="../../OliveTinLogo.png" alt="OliveTin logo" height="1em"
+                    <img title="application icon" :src="logoUrl" alt="OliveTin logo" style="height: 1em;" class="logo" />
-                        class="logo" />
+                    OliveTin {{ currentVersion }}
-                    OliveTin 3000!
                 </p>
                 <p>
                     <span>
@@ -49,8 +48,6 @@
                             GitHub</a>
                     </span>
 
-                    <span>{{ currentVersion }}</span>
-
                     <span>{{ serverConnection }}</span>
                 </p>
                 <p>

frontend/resources/vue/views/LogsListView.vue

@@ -161,7 +161,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background: #fff;
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 0.5rem;
@@ -183,7 +182,6 @@ onMounted(() => {
 }
 
 .input-with-icons button:hover:not(:disabled) {
-  background: #f5f5f5;
 }
 
 .input-with-icons button:disabled {

frontend/style.css

@@ -21,34 +21,10 @@ main {
 	padding-top: 4em;
 }
 
-action-button {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-action-button > button {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	justify-content: center;
-	font-weight: normal;
-	font-size: 0.85em;
-	box-shadow: 0 0 .6em #aaa;
-}
-
-action-button > button .icon {
-	font-size: 3em;
-}
-
 dialog {
 	border-radius: 1em;
 }
 
-footer span {
-	margin-right: 1em;
-}
-
 legend {
 	font-weight: bold;
 	text-align: center;
@@ -92,14 +68,6 @@ div.buttons button svg {
 	vertical-align: middle;
 }
 
-footer {
-	font-size: small;
-}
-
-th {
-	background-color: #fff;
-}
-
 section.small {
 	border-radius: .4em;
 }