From 80b733b78ca0aa5cd81a51115edfff6be58552b1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 16 Sep 2023 15:01:29 +0300 Subject: [PATCH] Showcase cosmetics --- assets/styles/layout/_core.scss | 2 +- assets/styles/layout/_doc.scss | 21 ++-- assets/styles/layout/_sidebar.scss | 131 ++++++++++++---------- layouts/AppMenuItem.vue | 2 +- nuxt.config.js | 4 + public/themes/lara-dark-blue/theme.css | 14 +-- public/themes/lara-dark-indigo/theme.css | 14 +-- public/themes/lara-dark-purple/theme.css | 14 +-- public/themes/lara-dark-teal/theme.css | 14 +-- public/themes/lara-light-blue/theme.css | 14 +-- public/themes/lara-light-indigo/theme.css | 14 +-- public/themes/lara-light-purple/theme.css | 14 +-- public/themes/lara-light-teal/theme.css | 14 +-- 13 files changed, 148 insertions(+), 124 deletions(-) diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss index ba0147d94..e253a7a93 100644 --- a/assets/styles/layout/_core.scss +++ b/assets/styles/layout/_core.scss @@ -88,7 +88,7 @@ input[type="number"] { user-select: none; } -.px-link:focus { +.px-link:focus-visible { outline: 0 none; outline-offset: 0; box-shadow: var(--focus-ring); diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index f1f3b17ba..3b086bccc 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -17,19 +17,19 @@ padding: 1rem 2rem; min-width: 12rem; text-align: center; - color: var(--text-color-secondary); + color: var(--surface-700); font-size: 1.125rem; letter-spacing: 2px; cursor: pointer; margin: 0; - transition: all 0.3s; + transition: all 0.2s; border-bottom: 1px solid transparent; border-top-right-radius: var(--border-round); border-top-left-radius: var(--border-round); white-space: nowrap; &:hover { - border-bottom-color: var(--text-color); + border-bottom-color: var(--surface-500); } &:focus { @@ -159,6 +159,11 @@ .navbar-item-content { border-left: 1px solid var(--surface-border); padding-left: .25rem; + transition: all .2s; + + &:hover { + border-left-color: var(--surface-500); + } } } @@ -168,14 +173,17 @@ .px-link { padding: 0.25rem 1rem 0.25rem 1rem; - color: var(--text-color); + color: var(--surface-800); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; + transition: all .2s; + } - &:hover { - color: var(--primary-color); + &:hover { + .px-link { + color: var(--surface-900); } } } @@ -185,7 +193,6 @@ border-color: var(--primary-color); .px-link { - font-weight: 700; color: var(--primary-color); } } diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index e635c2486..315f39f9a 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -28,11 +28,8 @@ margin: 0; padding: 0; - li { - margin-bottom: .25rem; - } - > li { + margin-bottom: .25rem; > button, > a { display: flex; @@ -41,12 +38,7 @@ padding: .5rem; color: var(--surface-900); font-weight: 600; - transition: box-shadow .2s; - border-radius: var(--border-radius); - - &:hover { - background-color: var(--surface-hover); - } + transition: all .2s; .menu-icon { width: 2rem; @@ -57,81 +49,102 @@ display: inline-flex; align-items: center; justify-content: center; + transition: all .2s; i { color: var(--surface-700); + transition: all .2s; } } .menu-toggle-icon { - color: var(--surface-600); + color: var(--surface-700); margin-left: auto; } + + &:hover { + .menu-icon { + i { + color: var(--surface-900); + } + } + + .menu-toggle-icon { + color: var(--surface-900); + } + } + + &.router-link-active { + color: var(--primary-color); + + > .menu-icon { + i { + color: var(--primary-color); + } + } + } } > div { - > ol { + ol { margin: 0 0 0 1.5rem; - padding: .25rem 0 0 .5rem; - border-left: 1px solid var(--surface-border); + padding: .25rem 0; + list-style: none; - > li { - > ol { - margin-bottom: 1.5rem; + li { + a { + color: var(--surface-700); + border-left: 1px solid var(--surface-border); + transition: all .2s; + font-weight: 400; + display: flex; + padding: .5rem .5rem .5rem 1rem; + color: var(--surface-700); + transition: all .2s; + + &:focus-visible { + outline: 0 none; + box-shadow: inset var(--focus-ring); + } + + &:hover { + color: var(--surface-900); + border-left-color: var(--surface-500); + } + + &.router-link-active { + color: var(--primary-color); + border-left-color: var(--primary-color); + } + } + + ol { + margin: 0; + padding: 0; + } + + + + &:has(.menu-child-category) { + margin-top: 1rem; + } + + &:has(.menu-child-category):first-child { + margin-top: 0rem; } } } } } - a.router-link-active { - background-color: var(--highlight-bg); - color: var(--highlight-text-color); - - &:hover { - background-color: var(--highlight-bg); - color: var(--highlight-text-color); - } - - > .menu-icon { - i { - color: var(--highlight-text-color); - } - } - } - .menu-child-category { display: flex; - padding: .5rem .5rem .5rem 1rem; + padding: .5rem .5rem .5rem 0; font-size: .875rem; - font-weight: 700; + font-weight: 600; letter-spacing: 1px; color: var(--surface-900); - border-bottom: 1px solid var(--surface-border); margin-bottom: .25rem; } - - ol { - list-style: none; - margin: 0; - padding: 0; - - a { - display: flex; - padding: .5rem .5rem .5rem 1rem; - color: var(--surface-900); - border-radius: var(--border-radius); - transition: box-shadow .2s; - - &:focus { - outline: 0 none; - box-shadow: inset var(--focus-ring); - } - - &:hover { - background-color: var(--surface-hover); - } - } - } } } \ No newline at end of file diff --git a/layouts/AppMenuItem.vue b/layouts/AppMenuItem.vue index 819cf66b7..48dc1ee11 100644 --- a/layouts/AppMenuItem.vue +++ b/layouts/AppMenuItem.vue @@ -24,7 +24,7 @@ {{ menuitem.name }} -
+
diff --git a/nuxt.config.js b/nuxt.config.js index 88a55db7e..d845e949a 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -42,6 +42,10 @@ export default defineNuxtConfig({ rel: 'stylesheet', href: baseUrl + 'themes/lara-light-blue/theme.css' }, + { + rel: 'stylesheet', + href: 'https://fonts.cdnfonts.com/css/dm-sans' + }, { rel: 'icon', href: baseUrl + 'favicon.ico' } ], script: [ diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index 8e98855de..c9cf1ae9c 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:rgba(255, 255, 255, 0.6); --primary-color:#93C5FD; --primary-color-text:#1c2127; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #040d19; --surface-50: #1d2530; --surface-100: #363d47; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index 924df24e6..546970861 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:rgba(255, 255, 255, 0.6); --primary-color:#A5B4FC; --primary-color-text:#1c2127; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #040d19; --surface-50: #1d2530; --surface-100: #363d47; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index fcd62e01f..9375e42b2 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:rgba(255, 255, 255, 0.6); --primary-color:#C4B5FD; --primary-color-text:#1c2127; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #040d19; --surface-50: #1d2530; --surface-100: #363d47; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index e71fe5df0..8ff5d0642 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:rgba(255, 255, 255, 0.6); --primary-color:#5EEAD4; --primary-color-text:#1c2127; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #040d19; --surface-50: #1d2530; --surface-100: #363d47; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.87); background: #040d19; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index 1a35f9778..aac0fe4bd 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:#6c757d; --primary-color:#3B82F6; --primary-color-text:#ffffff; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #ffffff; --surface-50: #FAFAFA; --surface-100: #F5F5F5; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; background: #ffffff; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 23c71812c..1c7836714 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:#6c757d; --primary-color:#6366F1; --primary-color-text:#ffffff; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #ffffff; --surface-50: #FAFAFA; --surface-100: #F5F5F5; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; background: #ffffff; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index f8fd751b7..2e5d2cbe6 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:#6c757d; --primary-color:#8B5CF6; --primary-color-text:#ffffff; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #ffffff; --surface-50: #FAFAFA; --surface-100: #F5F5F5; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; background: #ffffff; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label { diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index 2f7c25dc8..cf6612e9f 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -9,7 +9,7 @@ --text-color-secondary:#6c757d; --primary-color:#14B8A6; --primary-color-text:#ffffff; - --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + --font-family:'DM Sans', sans-serif; --surface-0: #ffffff; --surface-50: #FAFAFA; --surface-100: #F5F5F5; @@ -52,7 +52,7 @@ } .p-component { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: normal; } @@ -85,7 +85,7 @@ .p-link { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; border-radius: 6px; } .p-link:focus { @@ -265,7 +265,7 @@ padding: 0.375rem 0; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -722,7 +722,7 @@ padding: 0.375rem 0; } .p-chips .p-chips-multiple-container .p-chips-input-token input { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; padding: 0; @@ -1087,7 +1087,7 @@ } .p-inputtext { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #495057; background: #ffffff; @@ -5894,7 +5894,7 @@ } .p-terminal .p-terminal-input { font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'DM Sans', sans-serif; } .p-button-label {