niri-dynamic-workspaces 0.7.0

window {
    background-color: transparent;
}

.backdrop {
    background-color: alpha(@window_bg_color, 0.85);
}

.popup-container {
    background-color: transparent;
}

/* --- Static workspaces (row above keyboard) --- */

.static-workspaces {
    margin-bottom: var(--key-margin);
}

/* --- Keyboard keys --- */

.keyboard {
    margin: var(--key-margin) 0;
}

.keyboard-key {
    background-color: @card_bg_color;
    color: @card_fg_color;
    border: 1px solid alpha(@card_fg_color, 0.15);
    border-radius: var(--key-radius);
    padding: var(--key-pad-v) var(--key-pad-h);
    transition: 200ms ease;
}

.keyboard-key:hover {
    border-color: alpha(@card_fg_color, 0.3);
}

.keyboard-key.active {
    background-color: @accent_bg_color;
    color: @accent_fg_color;
    border: 2px solid @accent_color;
}

.keyboard-key.urgent {
    background-color: @warning_bg_color;
    color: @warning_fg_color;
    border: 2px solid @warning_color;
}

.keyboard-key.disabled {
    opacity: 0.40;
}

.key-char {
    font-weight: bold;
    font-size: var(--font-char);
}

.key-name {
    font-size: var(--font-name);
    opacity: 0.7;
}

.key-apps {
    font-size: var(--font-detail);
    opacity: 0.5;
    font-style: italic;
}

.key-status {
    font-size: var(--font-detail);
    opacity: 0.5;
}

/* --- Mode tabs (bottom bar) --- */

.mode-tabs {
    background-color: @card_bg_color;
    border: 1px solid alpha(@card_fg_color, 0.15);
    margin-top: var(--section-gap);
    border-radius: var(--tab-radius);
    padding: var(--key-pad-v);
}

.mode-tab {
    font-weight: bold;
    font-size: var(--font-tab);
    padding: var(--key-pad-v) var(--tab-pad-h);
    border-radius: var(--tab-radius);
    color: alpha(@card_fg_color, 0.5);
}

.mode-tab.active.switch,
.mode-tab.active.move-window {
    background-color: alpha(@accent_color, 0.15);
    color: @accent_color;
}

.mode-tab.active.delete {
    background-color: alpha(@error_color, 0.15);
    color: @error_color;
}

/* --- Hints & errors --- */

.hint-footer {
    margin-top: var(--section-gap);
}

.hint-footer-item {
    font-size: var(--font-footer);
    color: @card_fg_color;
    opacity: 0.5;
}

.error-message {
    font-size: var(--font-footer);
    margin-top: var(--key-margin);
    color: @error_color;
}

/* --- Template picker --- */

.template-picker {
    padding: var(--section-gap);
}

.template-title {
    font-size: var(--font-char);
    font-weight: bold;
    margin-bottom: var(--section-gap);
}

.template-list {
    margin-bottom: var(--section-gap);
}

.template-option {
    background-color: @card_bg_color;
    color: @card_fg_color;
    border: 2px solid alpha(@card_fg_color, 0.15);
    border-radius: var(--key-radius);
    padding: var(--key-pad-v) var(--key-pad-h);
    min-width: 250px;
    transition: 200ms ease;
}

.template-option:hover {
    border-color: alpha(@card_fg_color, 0.3);
}

.template-option.selected {
    background-color: @accent_bg_color;
    color: @accent_fg_color;
    border-color: @accent_color;
}

.template-key {
    background-color: alpha(@card_fg_color, 0.1);
    border-radius: var(--key-radius);
    font-weight: bold;
    font-size: var(--font-char);
    padding: var(--key-pad-v) var(--key-pad-h);
    min-width: var(--font-char);
}

.template-option.selected .template-key {
    background-color: alpha(@accent_fg_color, 0.15);
}

.template-name {
    font-weight: bold;
    font-size: var(--font-name);
}

.template-programs {
    font-size: var(--font-detail);
    font-style: italic;
    opacity: 0.5;
}

/* --- Variable input form --- */

.variable-title {
    font-size: var(--font-char);
    font-weight: bold;
    margin-bottom: var(--key-margin);
}

.variable-form {
    margin-top: var(--key-margin);
    margin-bottom: var(--key-margin);
}

.variable-row {
    background-color: @card_bg_color;
    color: @card_fg_color;
    border: 1px solid alpha(@card_fg_color, 0.15);
    border-radius: var(--key-radius);
    padding: var(--key-pad-v) var(--key-pad-h);
}

.variable-label {
    font-size: var(--font-name);
    font-weight: bold;
    opacity: 0.7;
    margin-bottom: var(--key-pad-v);
}

.variable-entry {
    font-size: var(--font-name);
}

/* --- Fuzzy select (enum variables) --- */

.fuzzy-list {
    margin-top: var(--key-pad-v);
}

.fuzzy-option {
    font-size: var(--font-name);
    padding: var(--key-pad-v) var(--key-pad-h);
    border-radius: var(--key-radius);
    transition: 150ms ease;
}

.fuzzy-option.selected {
    background-color: alpha(@accent_color, 0.15);
    color: @accent_color;
}