atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07: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

2
src/css/base.css
View File

@@ -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;

43
src/css/category.css
View File

@@ -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;
}

6
src/css/sidebar.css
View File

@@ -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;
}