From 62a59b64f51f4501128d581f218846556edea996 Mon Sep 17 00:00:00 2001 From: David Haz Date: Tue, 15 Jul 2025 12:21:04 +0300 Subject: [PATCH] update colors for better contrast --- src/components/code/CliInstallation.vue | 12 +++---- src/components/common/PropTable.vue | 10 +++--- src/components/common/RefreshButton.vue | 8 ++--- src/components/common/TabbedLayout.vue | 4 +-- src/css/base.css | 2 +- src/css/category.css | 43 +++++++++++++------------ src/css/sidebar.css | 6 ++-- src/utils/utils.ts | 2 +- 8 files changed, 44 insertions(+), 43 deletions(-) diff --git a/src/components/code/CliInstallation.vue b/src/components/code/CliInstallation.vue index b830c21..1596fe4 100644 --- a/src/components/code/CliInstallation.vue +++ b/src/components/code/CliInstallation.vue @@ -124,7 +124,7 @@ const { command } = defineProps<{ .code-block { border-radius: 15px; overflow: hidden; - border: 1px solid #142216; + border: 1px solid #333; } :deep(.p-accordionpanel) { @@ -133,19 +133,19 @@ const { command } = defineProps<{ :deep(.p-accordion-header) { background: #0b0b0b !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; border-radius: 20px !important; } :deep(.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader) { background: #0b0b0b !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; border-radius: 15px 15px 0 0; border-bottom: none !important; } :deep(.p-accordionpanel:not(.p-disabled) > .p-accordionheader) { - border: 1px solid #142216 !important; + border: 1px solid #333 !important; border-radius: 15px; background: #0b0b0b !important; } @@ -171,14 +171,14 @@ const { command } = defineProps<{ :deep(.p-accordion-content) { background: #0b0b0b !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; border-top: none; border-radius: 0 0 15px 15px; } :deep(.p-accordioncontent-content) { background: #0b0b0b !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; border-radius: 0 0 15px 15px; border-top: none !important; } diff --git a/src/components/common/PropTable.vue b/src/components/common/PropTable.vue index f81f9a0..5690cf1 100644 --- a/src/components/common/PropTable.vue +++ b/src/components/common/PropTable.vue @@ -92,14 +92,14 @@ defineProps<{ :deep(.p-datatable-header) { background: #111; - border: 1px solid #142216; + border: 1px solid #333; border-bottom: none; } :deep(.p-datatable-thead > tr > th) { background: #111; - border-right: 1px solid #142216; - border-bottom: 1px solid #142216; + border-right: 1px solid #333; + border-bottom: 1px solid #333; color: #fff; font-weight: 600; text-transform: capitalize; @@ -114,8 +114,8 @@ defineProps<{ :deep(.p-datatable-tbody > tr > td) { background: #0b0b0b; - border-right: 1px solid #142216; - border-bottom: 1px solid #142216; + border-right: 1px solid #333; + border-bottom: 1px solid #333; color: #fff; padding: 1rem; font-size: 14px; diff --git a/src/components/common/RefreshButton.vue b/src/components/common/RefreshButton.vue index 81ee92f..f8b5b2a 100644 --- a/src/components/common/RefreshButton.vue +++ b/src/components/common/RefreshButton.vue @@ -18,8 +18,8 @@ defineEmits<{ top: 0.75rem; right: 0.75rem; z-index: 2; - background-color: #111; - border: 1px solid #142216; + background-color: #0b0b0b; + border: 1px solid #333; color: white; border-radius: 12px; padding: 0.5rem; @@ -29,11 +29,11 @@ defineEmits<{ .refresh-button:hover { background-color: #222 !important; color: #fff !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; outline: 1px solid transparent !important; } .refresh-button:active { - background-color: #142216; + background-color: #0b0b0b; } diff --git a/src/components/common/TabbedLayout.vue b/src/components/common/TabbedLayout.vue index 0cfcca0..cb13205 100644 --- a/src/components/common/TabbedLayout.vue +++ b/src/components/common/TabbedLayout.vue @@ -125,8 +125,8 @@ import ContributionSection from './ContributionSection.vue'; } :deep(.p-tab[aria-selected='true'] .tab-header) { - background: #333333; - color: #a7ef9e; + background: #222; + color: #27FF64; } :deep(.p-tabpanels) { diff --git a/src/css/base.css b/src/css/base.css index f01c03a..0f13f5d 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -29,7 +29,7 @@ body { aspect-ratio: 1; font-weight: 500; border-radius: 0.75rem; - border: 1px solid #142216; + border: 1px solid #333; width: 50px; position: fixed; right: 2.3em; diff --git a/src/css/category.css b/src/css/category.css index 7adb575..4e96bc7 100644 --- a/src/css/category.css +++ b/src/css/category.css @@ -90,7 +90,7 @@ position: relative; width: 100%; background: #0b0b0b; - border: 1px solid #142216; + border: 1px solid #333; padding: 1em; margin-top: 1.4rem; border-radius: 20px; @@ -107,7 +107,7 @@ } div:has(> .props-table) { - border: 1px solid #142216; + border: 1px solid #333; border-radius: 20px; } @@ -127,7 +127,7 @@ div:has(> .props-table) { .star-border-demo .inner-content { padding: 1em 3em; background-color: #0b0b0b !important; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; } .custom-bounceCards { @@ -204,7 +204,7 @@ div:has(> .props-table) { align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; - border: 1px solid #142216; + border: 1px solid #333; border-radius: 10px; font-size: 14px; height: 36px; @@ -214,7 +214,7 @@ div:has(> .props-table) { } .tab-header:hover { - background: #142216; + background: #222; } .code-example { @@ -233,7 +233,7 @@ div:has(> .props-table) { .code-wrapper { position: relative; overflow: hidden; - border: 1px solid #142216; + border: 1px solid #333; border-radius: 15px; } @@ -268,7 +268,7 @@ div:has(> .props-table) { font-size: 14px; font-weight: 500; background-color: #0b0b0b; - border: 1px solid #142216; + border: 1px solid #333; color: white; cursor: pointer; z-index: 2; @@ -291,7 +291,7 @@ div:has(> .props-table) { font-style: italic; padding: 2rem; background: #0b0b0b; - border: 1px solid #142216; + border: 1px solid #333; border-radius: 15px; } @@ -344,7 +344,7 @@ div:has(> .props-table) { font-size: 0.75rem; background: #333333; border-radius: 10px; - border: 1px solid #142216; + border: 1px solid #333; color: #fff; height: 2.5rem; padding: 0 1rem; @@ -353,7 +353,7 @@ div:has(> .props-table) { } .contribute-button:hover { - background: #142216; + background: #222; } .contribute-separator { @@ -364,7 +364,7 @@ div:has(> .props-table) { .contribute-container { background: #0b0b0b; - border: 1px solid #142216; + border: 1px solid #333; border-radius: 20px; padding: 46px; margin-top: 1.4rem; @@ -376,7 +376,7 @@ div:has(> .props-table) { .contribute-button { background-color: #0b0b0b !important; - border: 1px solid #142216; + border: 1px solid #333; transition: 0.5s ease; } @@ -385,7 +385,7 @@ div:has(> .props-table) { } .contribute-button:hover { - background-color: #142216 !important; + background-color: #222 !important; } .demo-details { @@ -395,14 +395,15 @@ div:has(> .props-table) { gap: 0.3em; } -.demo-details span { - background-color: #111; - border: 1px solid #142216; +.dependency-tag { + background-color: #0b0b0b; + border: 1px solid #333; white-space: nowrap; - color: #a7ef9e; - border-radius: 10px; + color: #27FF64; + border-radius: 50px; font-size: 0.8rem; - padding: 0.5em 1em; + font-weight: 400; + padding: .6em 1.2em; transition: 0.3s ease; user-select: none; } @@ -424,7 +425,7 @@ div:has(> .props-table) { margin: 2em auto 2em; width: 100%; height: 1px; - background: linear-gradient(to right, transparent, #142216, transparent); + background: linear-gradient(to right, transparent, #333, transparent); } .cli-divider::before { @@ -509,7 +510,7 @@ div:has(> .props-table) { .custom-spotlight-card { user-select: none; - border: 1px solid #142216 !important; + border: 1px solid #333 !important; width: 350px; height: 300px; } diff --git a/src/css/sidebar.css b/src/css/sidebar.css index 82b3ea5..4652984 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -55,7 +55,7 @@ } .sidebar::-webkit-scrollbar-thumb:hover { - background: #142216; + background: #222; } .sidebar-logo { @@ -353,7 +353,7 @@ padding: 0 0.5rem 0 0.75rem; border-radius: 50px; background: #0b0b0b; - border: 1px solid #142216; + border: 1px solid #333; font-weight: 600; cursor: text; user-select: none; @@ -366,7 +366,7 @@ } .search-icon { - color: #142216; + color: #333; font-size: 16px; } diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 6cef582..d3c59a8 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -40,7 +40,7 @@ export const customToastStyles = { message: { style: { borderRadius: '10px', - border: '1px solid #142216', + border: '1px solid #333', backgroundColor: '#0b0b0b' } },