diff --git a/sciezka.css b/sciezka.css index 35e9c50..07cf786 100644 --- a/sciezka.css +++ b/sciezka.css @@ -149,6 +149,148 @@ body { cursor: default; } +/* Config button */ +#config-btn { + flex-shrink: 0; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: none; + border-radius: 0; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + transition: color 0.12s; +} + +#config-btn:hover { + color: var(--text); +} + +#config-btn.active { + color: var(--accent); +} + +/* Config panel */ +#config-panel { + padding: 12px 16px; +} + +.config-section { + margin-bottom: 14px; +} + +.config-section:last-child { + margin-bottom: 0; +} + +.config-label { + font-size: 11px; + font-weight: 600; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 8px; +} + +.config-hint { + font-weight: 400; + text-transform: none; + letter-spacing: 0; + color: var(--text-secondary); +} + +.config-method-row { + display: flex; + gap: 4px; +} + +.config-method-btn { + flex: 1; + padding: 6px 0; + border: 1px solid var(--border); + border-radius: 0; + background: transparent; + color: var(--text-dim); + font-size: 12px; + font-family: inherit; + cursor: pointer; + transition: background 0.12s, color 0.12s; +} + +.config-method-btn:hover { + background: var(--hover); + color: var(--text); +} + +.config-method-btn.active { + background: var(--accent); + color: #fff; + border-color: var(--accent); +} + +.config-order-list { + display: flex; + flex-direction: column; + gap: 2px; +} + +.config-order-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px 10px; + background: var(--bg-alt); + border: 1px solid var(--border); + cursor: grab; + transition: background 0.08s; +} + +.config-order-row:active { + cursor: grabbing; +} + +.config-order-row.dragging { + opacity: 0.5; +} + +.config-order-label { + font-size: 13px; + color: var(--text); +} + +.config-arrows { + display: flex; + gap: 2px; +} + +.config-arrow-btn { + width: 22px; + height: 22px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--border); + border-radius: 0; + background: transparent; + color: var(--text-secondary); + font-size: 10px; + cursor: pointer; + transition: background 0.08s; +} + +.config-arrow-btn:hover:not(:disabled) { + background: var(--hover); + color: var(--text); +} + +.config-arrow-btn:disabled { + opacity: 0.3; + cursor: default; +} + /* Mode bar */ #mode-bar { display: flex; diff --git a/sciezka.html b/sciezka.html index 06bcd92..e5f4bbb 100644 --- a/sciezka.html +++ b/sciezka.html @@ -12,9 +12,15 @@ fuzzy +
+