feat: Introduce new Sidebar and ControlPanel components, and update styling for TUI Segment, Slider, Toggle, and Button components.
This commit is contained in:
syntaxbullet
411
src/components/ControlPanel.astro
Normal file
411
src/components/ControlPanel.astro
Normal file
@@ -0,0 +1,411 @@
|
||||
---
|
||||
import TuiSlider from "./TuiSlider.astro";
|
||||
import TuiSegment from "./TuiSegment.astro";
|
||||
import TuiToggle from "./TuiToggle.astro";
|
||||
import TuiButton from "./TuiButton.astro";
|
||||
---
|
||||
|
||||
<footer id="tui-controls" class="control-panel">
|
||||
<div class="control-panel-content">
|
||||
<!-- Sliders Section -->
|
||||
<div class="panel-section sliders-section">
|
||||
<div class="section-header">ADJUSTMENTS</div>
|
||||
<div class="sliders-grid">
|
||||
<TuiSlider
|
||||
id="exposure"
|
||||
label="EXP"
|
||||
min={0}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={1.0}
|
||||
title="Exposure / Brightness"
|
||||
description="Adjusts the overall brightness level of the input image before processing."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="contrast"
|
||||
label="CON"
|
||||
min={0}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={1.0}
|
||||
title="Contrast"
|
||||
description="Increases or decreases the difference between light and dark areas."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="saturation"
|
||||
label="SAT"
|
||||
min={0}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={1.2}
|
||||
title="Saturation"
|
||||
description="Controls color intensity. Higher values make colors more vibrant in Color Mode."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="gamma"
|
||||
label="GAM"
|
||||
min={0}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={1.0}
|
||||
title="Gamma Correction"
|
||||
description="Non-linear brightness adjustment. useful for correcting washed-out or too dark images."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="overlayStrength"
|
||||
label="OVL"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={0.3}
|
||||
title="Overlay Blend Strength"
|
||||
description="Blends the original image over the ASCII output. 0 is pure ASCII, 1 is original image."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="resolution"
|
||||
label="RES"
|
||||
min={0.1}
|
||||
max={2}
|
||||
step={0.01}
|
||||
value={1.0}
|
||||
title="Resolution Scale"
|
||||
description="Adjusts the density of characters. Higher values give more detail but may reduce performance."
|
||||
/>
|
||||
<TuiSlider
|
||||
id="dither"
|
||||
label="DTH"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={0}
|
||||
title="Dither Strength"
|
||||
description="Applies ordered dithering to simulate shading. Useful for low-contrast areas."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-divider-v"></div>
|
||||
|
||||
<!-- Toggles & Segments Section -->
|
||||
<div class="panel-section effects-section">
|
||||
<div class="sub-section">
|
||||
<div class="section-header">EFFECTS</div>
|
||||
<div class="toggles-row">
|
||||
<TuiToggle
|
||||
id="toggle-color"
|
||||
label="CLR"
|
||||
title="Color Output (HTML)"
|
||||
description="Toggles between monochrome text and colored HTML spans."
|
||||
/>
|
||||
|
||||
<TuiToggle
|
||||
id="toggle-denoise"
|
||||
label="DNZ"
|
||||
title="Denoise Pre-processing"
|
||||
description="Applies a bilateral filter to reduce image noise while preserving edges."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-section">
|
||||
<div class="section-header">OUTPUT</div>
|
||||
<div class="segments-col">
|
||||
<TuiSegment
|
||||
id="segment-invert"
|
||||
label="INV"
|
||||
options={["AUTO", "ON", "OFF"]}
|
||||
value="AUTO"
|
||||
title="Invert Colors"
|
||||
description="Inverts brightness mapping. AUTO detects dark/light mode."
|
||||
/>
|
||||
<TuiSegment
|
||||
id="segment-edge"
|
||||
label="EDG"
|
||||
options={["OFF", "SPL", "SOB", "CNY"]}
|
||||
value="OFF"
|
||||
title="Edge Detection Mode"
|
||||
description="Algorithm used to detect edges. SPL: Simple, SOB: Sobel, CNY: Canny."
|
||||
/>
|
||||
<TuiSegment
|
||||
id="segment-charset"
|
||||
label="SET"
|
||||
options={["STD", "EXT", "BLK", "MIN", "DOT", "SHP"]}
|
||||
value="STD"
|
||||
title="Character Set"
|
||||
description="The set of characters used for mapping brightness levels."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-divider-v"></div>
|
||||
|
||||
<!-- Right Column: Actions & Export -->
|
||||
<div class="panel-section actions-section">
|
||||
<div class="sub-section">
|
||||
<div class="section-header">ACTIONS</div>
|
||||
<div class="actions-grid">
|
||||
<TuiButton
|
||||
id="btn-reset"
|
||||
label="RESET"
|
||||
shortcut="R"
|
||||
title="Reset to Auto-detected Settings"
|
||||
description="Resets all sliders and toggles to their default values."
|
||||
/>
|
||||
|
||||
<TuiButton
|
||||
id="btn-next"
|
||||
label="NEXT"
|
||||
shortcut="N"
|
||||
variant="primary"
|
||||
title="Load Next Image"
|
||||
description="Discards current image and loads a new one from the queue."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="queue-display"
|
||||
data-tooltip-title="Buffered Images"
|
||||
data-tooltip-desc="Number of images pre-loaded in background queue."
|
||||
>
|
||||
<span class="queue-label">Q:</span>
|
||||
<span id="val-queue" class="queue-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-divider-h"></div>
|
||||
|
||||
<div class="sub-section">
|
||||
<div class="section-header">IMPORT / EXPORT</div>
|
||||
<div class="actions-grid">
|
||||
<!-- Hidden File Input -->
|
||||
<input
|
||||
type="file"
|
||||
id="file-upload"
|
||||
accept="image/*"
|
||||
style="display: none;"
|
||||
/>
|
||||
<TuiButton
|
||||
id="btn-import"
|
||||
label="IMP"
|
||||
title="Import Image"
|
||||
description="Upload your own image from your device."
|
||||
/>
|
||||
<TuiButton
|
||||
id="btn-save-png"
|
||||
label="PNG"
|
||||
title="Save as Image"
|
||||
description="Download high-res PNG capture of the current view."
|
||||
/>
|
||||
<TuiButton
|
||||
id="btn-copy-text"
|
||||
label="TXT"
|
||||
title="Save as Text"
|
||||
description="Download raw ASCII text file."
|
||||
/>
|
||||
<TuiButton
|
||||
id="btn-copy-html"
|
||||
label="HTML"
|
||||
title="Save as HTML"
|
||||
description="Download colored HTML file."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard shortcuts hint -->
|
||||
<div class="shortcuts-hint">
|
||||
<span><kbd>N</kbd> Next</span>
|
||||
<span><kbd>R</kbd> Reset</span>
|
||||
<span><kbd>I</kbd> Invert</span>
|
||||
<span><kbd>C</kbd> Color</span>
|
||||
<span><kbd>D</kbd> Dither</span>
|
||||
<span><kbd>E</kbd> Edges</span>
|
||||
<span><kbd>S</kbd> Charset</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
/* Main Container matching Sidebar visual style */
|
||||
.control-panel {
|
||||
flex-shrink: 0;
|
||||
background: #000; /* Matching Sidebar */
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 2rem 3rem; /* Matching Sidebar padding style */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
z-index: 20;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); /* Inverted shadow */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-panel-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
flex-wrap: nowrap; /* Prevent wrapping on large screens */
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.panel-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.sliders-section {
|
||||
flex: 2;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.effects-section {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.actions-section {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Sub-sections */
|
||||
.sub-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
.section-header {
|
||||
font-size: 0.75rem; /* Matched to sidebar subtitle size approx */
|
||||
font-weight: 700;
|
||||
opacity: 0.5;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: var(--font-mono);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Grids & Rows */
|
||||
.sliders-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 1rem 1.5rem; /* More airy gap */
|
||||
}
|
||||
|
||||
.toggles-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.segments-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Dividers */
|
||||
.panel-divider-v {
|
||||
width: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
align-self: stretch;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
.panel-divider-h {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Queue Display */
|
||||
.queue-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
height: 32px; /* Match button height */
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.queue-value {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Shortcuts Hint */
|
||||
.shortcuts-hint {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.7rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
font-family: var(--font-mono);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.shortcuts-hint span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.shortcuts-hint kbd {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.control-panel {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.control-panel-content {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.panel-divider-v {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sliders-section,
|
||||
.effects-section,
|
||||
.actions-section {
|
||||
flex: 1 1 100%; /* Stack on smaller screens */
|
||||
}
|
||||
|
||||
.sliders-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
242
src/components/Sidebar.astro
Normal file
242
src/components/Sidebar.astro
Normal file
@@ -0,0 +1,242 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-content">
|
||||
<div class="brand-group">
|
||||
<a href="/" class="brand-link">
|
||||
<h1 class="brand-title">SYNTAXBULLET</h1>
|
||||
</a>
|
||||
<div class="brand-subtitle">
|
||||
FULL STACK ENGINEER
|
||||
<span class="muted">//</span>
|
||||
CREATIVE TECHNOLOGIST
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="brand-bio">
|
||||
Crafting high-performance digital experiences at the intersection of
|
||||
code, art, and artificial intelligence.
|
||||
</p>
|
||||
|
||||
<div class="sidebar-actions">
|
||||
<a href="/projects" class="sidebar-link">
|
||||
<span class="icon">⚡</span> PROJECTS
|
||||
</a>
|
||||
<a href="/blog" class="sidebar-link">
|
||||
<span class="icon">📝</span> BLOG
|
||||
</a>
|
||||
<a href="mailto:contact@syntaxbullet.me" class="sidebar-link">
|
||||
<span class="icon">✉️</span> CONTACT
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-social">
|
||||
<a
|
||||
href="https://github.com/syntaxbullet"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path
|
||||
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
|
||||
></path><path d="M9 18c-4.51 2-5-2.64-5-2.64"></path></svg
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="https://linkedin.com/in/syntaxbullet"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path
|
||||
d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
|
||||
></path><rect width="4" height="12" x="2" y="9"
|
||||
></rect><circle cx="4" cy="4" r="2"></circle></svg
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/syntaxbullet"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Twitter"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
><path
|
||||
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
|
||||
></path></svg
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.sidebar {
|
||||
width: 25%;
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: #000;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 4rem 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.brand-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
color: #fff;
|
||||
word-break: break-word; /* Prevent overflow */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.brand-bio {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.sidebar-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-decoration: none;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
padding: 4px 0;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
color: var(--text-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.sidebar-link .icon {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-social {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.sidebar-social a {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar-social a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 3rem 0; /* Increased padding */
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 1rem 3rem; /* Increased horizontal padding */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand-subtitle,
|
||||
.sidebar-actions {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -33,67 +33,70 @@ const {
|
||||
.tui-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 103, 0, 0.4);
|
||||
color: var(--text-color);
|
||||
gap: 6px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
transition: all 0.15s;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tui-button:hover {
|
||||
opacity: 1;
|
||||
border-color: var(--text-color);
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tui-button:active {
|
||||
background: rgba(255, 103, 0, 0.2);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.tui-button--primary {
|
||||
border-color: var(--text-color);
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tui-button--primary:hover {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.tui-button--subtle {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tui-button--subtle:hover {
|
||||
border-color: rgba(255, 103, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-button-shortcut {
|
||||
font-size: 9px;
|
||||
opacity: 0.6;
|
||||
padding: 0 3px;
|
||||
border: 1px solid currentColor;
|
||||
line-height: 1.2;
|
||||
border-radius: 2px;
|
||||
opacity: 0.5;
|
||||
padding: 1px 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tui-button:hover .tui-button-shortcut {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-button--primary:hover .tui-button-shortcut {
|
||||
border-color: #000;
|
||||
opacity: 0.8;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.tui-button-label {
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -63,15 +63,19 @@ const segments = 12;
|
||||
.tui-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
user-select: none;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.tui-slider-label {
|
||||
min-width: 3ch;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
font-weight: 700;
|
||||
opacity: 0.5;
|
||||
font-family: var(--font-mono);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.tui-slider-track-wrapper {
|
||||
@@ -89,22 +93,24 @@ const segments = 12;
|
||||
|
||||
.tui-slider-track {
|
||||
display: flex;
|
||||
letter-spacing: -1px;
|
||||
font-family: monospace;
|
||||
letter-spacing: 2px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.tui-slider-segment {
|
||||
transition: color 0.1s;
|
||||
color: rgba(255, 103, 0, 0.25);
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tui-slider-segment.filled {
|
||||
color: var(--text-color);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.tui-slider-segment.thumb {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 4px var(--text-color);
|
||||
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
.tui-slider-input {
|
||||
@@ -120,23 +126,26 @@ const segments = 12;
|
||||
}
|
||||
|
||||
.tui-slider-value {
|
||||
min-width: 3ch;
|
||||
min-width: 4ch;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
opacity: 0.9;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
font-family: var(--font-mono);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.tui-slider:hover .tui-slider-label {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment {
|
||||
color: rgba(255, 103, 0, 0.4);
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment.filled {
|
||||
color: var(--text-color);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment.thumb {
|
||||
|
||||
@@ -32,35 +32,36 @@ const {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 103, 0, 0.3);
|
||||
color: var(--text-color);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s;
|
||||
transition: all 0.2s;
|
||||
user-select: none;
|
||||
min-width: 3ch;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tui-toggle:hover {
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.tui-toggle.active {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
border-color: var(--text-color);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.tui-toggle-label {
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user