116 lines
3.7 KiB
CSS
116 lines
3.7 KiB
CSS
/**
|
|
* VitePress Custom Theme CSS
|
|
* Applying brand color #652ed9 and its variants
|
|
*/
|
|
|
|
:root {
|
|
/* Brand color #652ed9 */
|
|
--vp-c-brand-1: #652ed9;
|
|
--vp-c-brand-2: #804aea;
|
|
--vp-c-brand-3: #9b6ff8;
|
|
--vp-c-brand-soft: rgba(101, 46, 217, 0.16);
|
|
|
|
/* Hover states */
|
|
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
|
--vp-button-brand-hover-text: var(--vp-c-white);
|
|
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
|
|
|
/* Focus states */
|
|
--vp-custom-block-brand-border: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.dark {
|
|
/* Slightly adjusted variants for dark mode, keeping the primary brand color consistent */
|
|
--vp-c-brand-1: #8a57f3;
|
|
--vp-c-brand-2: #7a42ec;
|
|
--vp-c-brand-3: #652ed9;
|
|
--vp-c-brand-soft: rgba(101, 46, 217, 0.25);
|
|
}
|
|
|
|
/* Sesuaikan ukuran logo di navbar */
|
|
/* .VPNavBar .logo {
|
|
height: 32px;
|
|
}
|
|
|
|
.VPNavBar .VPNavBarTitle{
|
|
|
|
} */
|
|
|
|
/* ==========================================================================
|
|
OPTIMASI NAVBAR TITLE & LOGO (ELEGANT ALIGNMENT)
|
|
========================================================================== */
|
|
.VPNavBar .VPNavBarTitle {
|
|
display: flex;
|
|
align-items: center; /* Memastikan logo & teks sejajar sempurna secara vertikal */
|
|
gap: 12px; /* Spasi yang lebih longgar dan elegan antara logo & teks */
|
|
padding: 0 16px; /* Memberikan ruang napas di dalam kontainer title */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ELEGANT HARMONIOUS GRADIENT (Subtle Mode-Aware)
|
|
========================================================================== */
|
|
.VPNavBar .VPNavBarTitle .title {
|
|
/* LIGHT MODE: Gradien dari warna Brand gelap ke warna Brand terang */
|
|
/* Kita hindari hitam pekat, gunakan ungu yang lebih dalam */
|
|
background: linear-gradient(135deg, #4b23a6 0%, var(--vp-c-brand-1) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* DARK MODE: Gradien dari ungu sangat muda ke warna Brand */
|
|
.dark .VPNavBar .VPNavBarTitle .title {
|
|
/* Kita kurangi dominasi putih dengan menggunakan ungu yang sangat terang */
|
|
background: linear-gradient(135deg, #c5a8ff 30%, var(--vp-c-brand-1) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
/* Glow diperhalus agar tidak terlalu menyilaukan */
|
|
filter: drop-shadow(0 0 8px rgba(101, 46, 217, 0.2));
|
|
}
|
|
|
|
/* Hover effect yang lebih kalem */
|
|
.VPNavBar .VPNavBarTitle .title:hover {
|
|
filter: drop-shadow(0 0 12px rgba(101, 46, 217, 0.4));
|
|
}
|
|
|
|
.VPNavBar .logo {
|
|
height: 28px; /* Menyeimbangkan ukuran logo dengan tinggi teks */
|
|
width: 28px;
|
|
margin-right: 0; /* Margin sudah digantikan oleh 'gap' pada parent */
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ADJUSTING SEARCH BAR POSITION & SPACING
|
|
========================================================================== */
|
|
|
|
/* Menggeser Search agar lebih dekat ke Logo */
|
|
.VPNavBarSearch {
|
|
margin-left: 0px;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Memperbaiki tampilan tombol Search agar lebih kompak */
|
|
.VPNavBarSearch .DocSearch-Button {
|
|
border-radius: 8px;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* Kustomisasi warna background & border (Light Mode) */
|
|
:not(.dark) .VPNavBarSearch .DocSearch-Button {
|
|
background-color: #f3f4f6;
|
|
border-color: #e5e7eb; /* Border abu-abu tipis untuk light mode */
|
|
}
|
|
|
|
/* Kustomisasi warna background & border (Dark Mode) */
|
|
.dark .VPNavBarSearch .DocSearch-Button {
|
|
background-color: var(--vp-c-bg-soft);
|
|
border-color: #374151; /* Border gelap yang elegan untuk dark mode */
|
|
}
|
|
|
|
/* Opsional: Jika ingin Search tetap di tengah namun punya batasan */
|
|
@media (min-width: 768px) {
|
|
.VPNavBar .VPNavBarSearch {
|
|
flex-grow: 0;
|
|
}
|
|
} |