atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-08 16:09:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

update colors for better contrast

Browse Source
This commit is contained in:
David Haz
2025-07-15 12:21:04 +03:00
parent 114d544102
commit 62a59b64f5
8 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/code/CliInstallation.vue
View File

@@ -124,7 +124,7 @@ const { command } = defineProps<{
.code-block { .code-block {
border-radius: 15px; border-radius: 15px;
overflow: hidden; overflow: hidden;
border: 1px solid #142216; border: 1px solid #333;
} }
:deep(.p-accordionpanel) { :deep(.p-accordionpanel) {
@@ -133,19 +133,19 @@ const { command } = defineProps<{
:deep(.p-accordion-header) { :deep(.p-accordion-header) {
background: #0b0b0b !important; background: #0b0b0b !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
border-radius: 20px !important; border-radius: 20px !important;
} }
:deep(.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader) { :deep(.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader) {
background: #0b0b0b !important; background: #0b0b0b !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
border-bottom: none !important; border-bottom: none !important;
} }
:deep(.p-accordionpanel:not(.p-disabled) > .p-accordionheader) { :deep(.p-accordionpanel:not(.p-disabled) > .p-accordionheader) {
border: 1px solid #142216 !important; border: 1px solid #333 !important;
border-radius: 15px; border-radius: 15px;
background: #0b0b0b !important; background: #0b0b0b !important;
} }
@@ -171,14 +171,14 @@ const { command } = defineProps<{
:deep(.p-accordion-content) { :deep(.p-accordion-content) {
background: #0b0b0b !important; background: #0b0b0b !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
border-top: none; border-top: none;
border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;
} }
:deep(.p-accordioncontent-content) { :deep(.p-accordioncontent-content) {
background: #0b0b0b !important; background: #0b0b0b !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;
border-top: none !important; border-top: none !important;
} }

10
src/components/common/PropTable.vue
View File

@@ -92,14 +92,14 @@ defineProps<{
:deep(.p-datatable-header) { :deep(.p-datatable-header) {
background: #111; background: #111;
border: 1px solid #142216; border: 1px solid #333;
border-bottom: none; border-bottom: none;
} }
:deep(.p-datatable-thead > tr > th) { :deep(.p-datatable-thead > tr > th) {
background: #111; background: #111;
border-right: 1px solid #142216; border-right: 1px solid #333;
border-bottom: 1px solid #142216; border-bottom: 1px solid #333;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
@@ -114,8 +114,8 @@ defineProps<{
:deep(.p-datatable-tbody > tr > td) { :deep(.p-datatable-tbody > tr > td) {
background: #0b0b0b; background: #0b0b0b;
border-right: 1px solid #142216; border-right: 1px solid #333;
border-bottom: 1px solid #142216; border-bottom: 1px solid #333;
color: #fff; color: #fff;
padding: 1rem; padding: 1rem;
font-size: 14px; font-size: 14px;

8
src/components/common/RefreshButton.vue
View File

@@ -18,8 +18,8 @@ defineEmits<{
top: 0.75rem; top: 0.75rem;
right: 0.75rem; right: 0.75rem;
z-index: 2; z-index: 2;
background-color: #111; background-color: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
color: white; color: white;
border-radius: 12px; border-radius: 12px;
padding: 0.5rem; padding: 0.5rem;
@@ -29,11 +29,11 @@ defineEmits<{
.refresh-button:hover { .refresh-button:hover {
background-color: #222 !important; background-color: #222 !important;
color: #fff !important; color: #fff !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
outline: 1px solid transparent !important; outline: 1px solid transparent !important;
} }
.refresh-button:active { .refresh-button:active {
background-color: #142216; background-color: #0b0b0b;
} }
</style> </style>

4
src/components/common/TabbedLayout.vue
View File

@@ -125,8 +125,8 @@ import ContributionSection from './ContributionSection.vue';
} }
:deep(.p-tab[aria-selected='true'] .tab-header) { :deep(.p-tab[aria-selected='true'] .tab-header) {
background: #333333; background: #222;
color: #a7ef9e; color: #27FF64;
} }
:deep(.p-tabpanels) { :deep(.p-tabpanels) {

2
src/css/base.css
View File

@@ -29,7 +29,7 @@ body {
aspect-ratio: 1; aspect-ratio: 1;
font-weight: 500; font-weight: 500;
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid #142216; border: 1px solid #333;
width: 50px; width: 50px;
position: fixed; position: fixed;
right: 2.3em; right: 2.3em;

43
src/css/category.css
View File

@@ -90,7 +90,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
background: #0b0b0b; background: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
padding: 1em; padding: 1em;
margin-top: 1.4rem; margin-top: 1.4rem;
border-radius: 20px; border-radius: 20px;
@@ -107,7 +107,7 @@
} }
div:has(> .props-table) { div:has(> .props-table) {
border: 1px solid #142216; border: 1px solid #333;
border-radius: 20px; border-radius: 20px;
} }
@@ -127,7 +127,7 @@ div:has(> .props-table) {
.star-border-demo .inner-content { .star-border-demo .inner-content {
padding: 1em 3em; padding: 1em 3em;
background-color: #0b0b0b !important; background-color: #0b0b0b !important;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
} }
.custom-bounceCards { .custom-bounceCards {
@@ -204,7 +204,7 @@ div:has(> .props-table) {
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: 1px solid #142216; border: 1px solid #333;
border-radius: 10px; border-radius: 10px;
font-size: 14px; font-size: 14px;
height: 36px; height: 36px;
@@ -214,7 +214,7 @@ div:has(> .props-table) {
} }
.tab-header:hover { .tab-header:hover {
background: #142216; background: #222;
} }
.code-example { .code-example {
@@ -233,7 +233,7 @@ div:has(> .props-table) {
.code-wrapper { .code-wrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid #142216; border: 1px solid #333;
border-radius: 15px; border-radius: 15px;
} }
@@ -268,7 +268,7 @@ div:has(> .props-table) {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
background-color: #0b0b0b; background-color: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
color: white; color: white;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
@@ -291,7 +291,7 @@ div:has(> .props-table) {
font-style: italic; font-style: italic;
padding: 2rem; padding: 2rem;
background: #0b0b0b; background: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
border-radius: 15px; border-radius: 15px;
} }
@@ -344,7 +344,7 @@ div:has(> .props-table) {
font-size: 0.75rem; font-size: 0.75rem;
background: #333333; background: #333333;
border-radius: 10px; border-radius: 10px;
border: 1px solid #142216; border: 1px solid #333;
color: #fff; color: #fff;
height: 2.5rem; height: 2.5rem;
padding: 0 1rem; padding: 0 1rem;
@@ -353,7 +353,7 @@ div:has(> .props-table) {
} }
.contribute-button:hover { .contribute-button:hover {
background: #142216; background: #222;
} }
.contribute-separator { .contribute-separator {
@@ -364,7 +364,7 @@ div:has(> .props-table) {
.contribute-container { .contribute-container {
background: #0b0b0b; background: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
border-radius: 20px; border-radius: 20px;
padding: 46px; padding: 46px;
margin-top: 1.4rem; margin-top: 1.4rem;
@@ -376,7 +376,7 @@ div:has(> .props-table) {
.contribute-button { .contribute-button {
background-color: #0b0b0b !important; background-color: #0b0b0b !important;
border: 1px solid #142216; border: 1px solid #333;
transition: 0.5s ease; transition: 0.5s ease;
} }
@@ -385,7 +385,7 @@ div:has(> .props-table) {
} }
.contribute-button:hover { .contribute-button:hover {
background-color: #142216 !important; background-color: #222 !important;
} }
.demo-details { .demo-details {
@@ -395,14 +395,15 @@ div:has(> .props-table) {
gap: 0.3em; gap: 0.3em;
} }
.demo-details span { .dependency-tag {
background-color: #111; background-color: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
white-space: nowrap; white-space: nowrap;
color: #a7ef9e; color: #27FF64;
border-radius: 10px; border-radius: 50px;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.5em 1em; font-weight: 400;
padding: .6em 1.2em;
transition: 0.3s ease; transition: 0.3s ease;
user-select: none; user-select: none;
} }
@@ -424,7 +425,7 @@ div:has(> .props-table) {
margin: 2em auto 2em; margin: 2em auto 2em;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: linear-gradient(to right, transparent, #142216, transparent); background: linear-gradient(to right, transparent, #333, transparent);
} }
.cli-divider::before { .cli-divider::before {
@@ -509,7 +510,7 @@ div:has(> .props-table) {
.custom-spotlight-card { .custom-spotlight-card {
user-select: none; user-select: none;
border: 1px solid #142216 !important; border: 1px solid #333 !important;
width: 350px; width: 350px;
height: 300px; height: 300px;
} }

6
src/css/sidebar.css
View File

@@ -55,7 +55,7 @@
} }
.sidebar::-webkit-scrollbar-thumb:hover { .sidebar::-webkit-scrollbar-thumb:hover {
background: #142216; background: #222;
} }
.sidebar-logo { .sidebar-logo {
@@ -353,7 +353,7 @@
padding: 0 0.5rem 0 0.75rem; padding: 0 0.5rem 0 0.75rem;
border-radius: 50px; border-radius: 50px;
background: #0b0b0b; background: #0b0b0b;
border: 1px solid #142216; border: 1px solid #333;
font-weight: 600; font-weight: 600;
cursor: text; cursor: text;
user-select: none; user-select: none;
@@ -366,7 +366,7 @@
} }
.search-icon { .search-icon {
color: #142216; color: #333;
font-size: 16px; font-size: 16px;
} }

2
src/utils/utils.ts
View File

@@ -40,7 +40,7 @@ export const customToastStyles = {
message: { message: {
style: { style: {
borderRadius: '10px', borderRadius: '10px',
border: '1px solid #142216', border: '1px solid #333',
backgroundColor: '#0b0b0b' backgroundColor: '#0b0b0b'
} }
}, },