diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json index f34eeb429..277a1b428 100644 --- a/dashboard/package-lock.json +++ b/dashboard/package-lock.json @@ -7,6 +7,8 @@ "": { "dependencies": { "@eslint/js": "^9.17.0", + "@fontsource/arimo": "^5.1.1", + "@fontsource/dm-sans": "^5.1.1", "@fontsource/inter": "^5.1.1", "@fontsource/noto-sans": "^5.1.1", "@fortawesome/fontawesome-free": "^6.7.2", @@ -633,6 +635,18 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/arimo": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@fontsource/arimo/-/arimo-5.1.1.tgz", + "integrity": "sha512-D0pn+VveLnBhVllkb17KQCeDrN6VSyv0xD3mxAJbd9/nvQfRDQwYWm9Ct1TRXnA9DgQ//7KXXEptWWGP11DqlA==", + "license": "Apache-2.0" + }, + "node_modules/@fontsource/dm-sans": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.1.tgz", + "integrity": "sha512-xApcrecLZkQMM6bl7U+Eokg8Y4LeYMiR+cQUTUNx4Adun5ZpiIlPB9+JEXg/k1gFea/72nmn30AekCBA+HhUCA==", + "license": "OFL-1.1" + }, "node_modules/@fontsource/inter": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.1.tgz", @@ -3327,6 +3341,16 @@ "levn": "^0.4.1" } }, + "@fontsource/arimo": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@fontsource/arimo/-/arimo-5.1.1.tgz", + "integrity": "sha512-D0pn+VveLnBhVllkb17KQCeDrN6VSyv0xD3mxAJbd9/nvQfRDQwYWm9Ct1TRXnA9DgQ//7KXXEptWWGP11DqlA==" + }, + "@fontsource/dm-sans": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.1.tgz", + "integrity": "sha512-xApcrecLZkQMM6bl7U+Eokg8Y4LeYMiR+cQUTUNx4Adun5ZpiIlPB9+JEXg/k1gFea/72nmn30AekCBA+HhUCA==" + }, "@fontsource/inter": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.1.1.tgz", diff --git a/dashboard/package.json b/dashboard/package.json index ad3f5db2f..febeb0989 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -8,6 +8,8 @@ "type": "module", "dependencies": { "@eslint/js": "^9.17.0", + "@fontsource/arimo": "^5.1.1", + "@fontsource/dm-sans": "^5.1.1", "@fontsource/inter": "^5.1.1", "@fontsource/noto-sans": "^5.1.1", "@fortawesome/fontawesome-free": "^6.7.2", diff --git a/dashboard/src/modules.js b/dashboard/src/modules.js index f9fbe2cec..87082adf1 100644 --- a/dashboard/src/modules.js +++ b/dashboard/src/modules.js @@ -4,6 +4,8 @@ window.cloudronApiOrigin = import.meta.env.VITE_API_ORIGIN || ''; import '@fortawesome/fontawesome-free/css/all.min.css'; import '@fontsource/noto-sans'; +import '@fontsource/dm-sans'; +import '@fontsource/arimo'; import '@fontsource/inter'; import 'bootstrap-sass'; import Chart from 'chart.js/auto'; diff --git a/dashboard/src/theme.scss b/dashboard/src/theme.scss index 57bfec867..034cd863b 100644 --- a/dashboard/src/theme.scss +++ b/dashboard/src/theme.scss @@ -10,8 +10,8 @@ $brand-warning: #f0ad4e !default; $brand-danger: #ff4c4c !default; $body-bg: #f4f4f4; -$font-family-sans-serif: "Inter", "Noto Sans", Helvetica, Arial, sans-serif; -$font-family-heading: "Inter Light", "Noto Sans Light", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "Arimo", "DM Sans", "Noto Sans", Helvetica, Arial, sans-serif; +$font-family-heading: "Arimo", "DM Sans", "Noto Sans", Helvetica, Arial, sans-serif; $navbar-default-link-color: $brand-primary !default; $navbar-default-link-hover-color: #62bdfc !default; @@ -68,6 +68,9 @@ html { --card-background: #15181f; --navbar-background: #11161f; --body-background: #0b0e14; + --pankow-dialog-background-color: var(--navbar-background); + --pankow-color-background: var(--navbar-background); + --pankow-text-color: white; } } @@ -434,6 +437,12 @@ html, body { .nav-sidebar-list { overflow: auto; padding-top: 20px; + scrollbar-color: transparent transparent; + scrollbar-width: thin; +} + +.nav-sidebar-list:hover { + scrollbar-color: var(--color-neutral-border) transparent; } .nav-sidebar-item { @@ -2443,7 +2452,8 @@ tag-input { // ---------------------------- @media (prefers-color-scheme: dark) { - $textColor: #959595; + // $textColor: #959595; + $textColor: #ccc; $backgroundLight: #2b2b2e; $backgroundDark: #1c1c1c;