22d7b3a2be
- Replace GitHub/Forgejo text links with SVG icons - Add luminous hover effects on navbar icons - Add local search plugin with FR/EN support
108 lines
2.8 KiB
CSS
108 lines
2.8 KiB
CSS
:root {
|
|
--ifm-color-primary: #2e8555;
|
|
--ifm-color-primary-dark: #29784c;
|
|
--ifm-color-primary-darker: #277148;
|
|
--ifm-color-primary-darkest: #205d3b;
|
|
--ifm-color-primary-light: #33925d;
|
|
--ifm-color-primary-lighter: #359962;
|
|
--ifm-color-primary-lightest: #3cad6e;
|
|
--ifm-code-font-size: 95%;
|
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--ifm-color-primary: #25c2a0;
|
|
--ifm-color-primary-dark: #21af90;
|
|
--ifm-color-primary-darker: #1fa588;
|
|
--ifm-color-primary-darkest: #1a8870;
|
|
--ifm-color-primary-light: #29d5b0;
|
|
--ifm-color-primary-lighter: #32d8b4;
|
|
--ifm-color-primary-lightest: #4fddbf;
|
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
Navbar Icon Links (GitHub & Forgejo)
|
|
============================================ */
|
|
|
|
.header-github-link::before,
|
|
.header-forgejo-link::before {
|
|
content: '';
|
|
display: flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
transition: opacity 0.2s ease, filter 0.2s ease;
|
|
}
|
|
|
|
/* GitHub icon */
|
|
.header-github-link::before {
|
|
background-image: url('/img/github-mark.svg');
|
|
}
|
|
|
|
/* Forgejo icon */
|
|
.header-forgejo-link::before {
|
|
background-image: url('/img/forgejo-logo.svg');
|
|
}
|
|
|
|
/* Hide the default link text (if any) */
|
|
.header-github-link > span,
|
|
.header-forgejo-link > span {
|
|
display: none;
|
|
}
|
|
|
|
/* Light theme: invert colors for dark icons to be visible */
|
|
[data-theme='light'] .header-github-link::before {
|
|
filter: none;
|
|
}
|
|
|
|
/* Dark theme: invert the GitHub icon for visibility */
|
|
[data-theme='dark'] .header-github-link::before {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* ============================================
|
|
Luminous Glow Hover Effect
|
|
============================================ */
|
|
|
|
.header-github-link:hover::before,
|
|
.header-forgejo-link:hover::before {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* GitHub hover glow effect */
|
|
.header-github-link:hover::before {
|
|
filter: drop-shadow(0 0 6px rgba(36, 41, 47, 0.6));
|
|
}
|
|
|
|
[data-theme='dark'] .header-github-link:hover::before {
|
|
filter: invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
|
|
}
|
|
|
|
/* Forgejo hover glow effect - orange/red theme colors */
|
|
.header-forgejo-link:hover::before {
|
|
filter: drop-shadow(0 0 6px rgba(255, 102, 0, 0.7));
|
|
}
|
|
|
|
[data-theme='dark'] .header-forgejo-link:hover::before {
|
|
filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.8));
|
|
}
|
|
|
|
/* ============================================
|
|
Search Bar Styling
|
|
============================================ */
|
|
|
|
/* Ensure search bar fits nicely in navbar */
|
|
.navbar__search {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.navbar__search-input {
|
|
transition: width 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.navbar__search-input:focus {
|
|
box-shadow: 0 0 8px var(--ifm-color-primary);
|
|
}
|