syntaxbullet/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce new Sidebar and ControlPanel components, and update styling for TUI Segment, Slider, Toggle, and Button components.

Browse Source
This commit is contained in:
syntaxbullet
2026-02-10 11:23:16 +01:00
parent 28bde53707
commit bb4ca0610d
8 changed files with 760 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/TuiSegment.astro
View File

@@ -47,33 +47,37 @@ const {
.tui-segment {
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
font-size: 11px;
user-select: none;
}
.tui-segment-label {
min-width: 3ch;
font-weight: bold;
font-weight: 700;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.4);
opacity: 0.7;
}
.tui-segment-options {
display: flex;
border: 1px solid rgba(255, 103, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
border-radius: 2px;
overflow: hidden;
}
.tui-segment-option {
background: none;
background: transparent;
border: none;
border-right: 1px solid rgba(255, 103, 0, 0.2);
color: var(--text-color);
border-right: 1px solid rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
font-family: inherit;
font-size: inherit;
padding: 2px 8px;
padding: 4px 10px;
cursor: pointer;
opacity: 0.5;
transition: all 0.15s;
transition: all 0.2s;
min-width: 3ch;
text-align: center;
}
@@ -83,24 +87,24 @@ const {
}
.tui-segment-option:hover {
opacity: 0.8;
background: rgba(255, 103, 0, 0.1);
color: #fff;
background: rgba(255, 255, 255, 0.05);
}
.tui-segment-option.active {
background: var(--text-color);
color: #000;
opacity: 1;
font-weight: bold;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-weight: 600;
}
/* Hover the whole group */
.tui-segment:hover .tui-segment-label {
opacity: 1;
color: rgba(255, 255, 255, 0.8);
}
.tui-segment:hover .tui-segment-options {
border-color: var(--text-color);
border-color: rgba(255, 255, 255, 0.2);
}
</style>