Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs darkmode (#1230)

Browse Source
This commit is contained in:
Mike Sawka 2024-11-07 14:58:23 -08:00 committed by GitHub
parent d5cadbd41f
commit 92eca20b5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/src/components/kbd.css
View File

@ -23,24 +23,27 @@ kbd {
border-radius: 4px;
border: 1px solid #ccc;
padding: 2px 6px;
font-size: 0.8em; /* Base font size */
font-size: 0.8em;
font-family: "JetBrains Mono", monospace;
display: inline-flex;
justify-content: center;
align-items: center;
height: 24px; /* Consistent height */
line-height: 24px; /* Consistent line height */
.bold {
font-weight: bold;
}
height: 24px;
line-height: 24px;
.spaced {
letter-spacing: 0.1em;
letter-spacing: 0.2em;
}
}
.kbd-group kbd.symbol {
font-size: 0.8em; /* Slightly larger font size for symbols */
line-height: 24px; /* Same line height as base to keep alignment */
font-size: 0.8em;
line-height: 24px;
}
/* Docusaurus Dark Mode */
html[data-theme="dark"] kbd {
background-color: #333; /* Dark background */
color: #fff; /* Light text */
border: 1px solid #666;
}

25
docs/src/components/platformcontext.css
View File

@ -21,10 +21,29 @@
}
.pill-option.active {
background-color: #0073e6; /* Highlight color for active option */
color: #fff; /* White text on active side */
background-color: #0073e6;
color: #fff;
}
.pill-option:not(.active):hover {
background-color: #e0e0e0; /* Slight hover effect on inactive side */
background-color: #e0e0e0;
}
/* Docusaurus Dark Mode */
html[data-theme="dark"] .pill-toggle {
border: 1px solid #555;
background-color: #333;
}
html[data-theme="dark"] .pill-option {
color: #ccc;
}
html[data-theme="dark"] .pill-option.active {
background-color: #005bb5; /* Darker blue for active state */
color: #fff;
}
html[data-theme="dark"] .pill-option:not(.active):hover {
background-color: #444; /* Darker hover effect */
}