dotfiles-hypr/eww/eww.scss

// ==============
//   переменные
// ==============

// цветовая палитра
$surface0:    #363a4f; 
$text:        #cad3f5; 
$lavender:    #a8afe1;
$red:         #ed8796;
$yellow:      #f9e2af; 
$blue:        #89b4fa;
$pink:        #e3a1d2;
$muted-gray:  #666666;
$bg-dark:     #1e2030;

// геометрия
$r:           12px; // радиус скругления
$h:           30px; // высота элементов
$win-margin:  6px;  // отступ бара от краев экрана

// капсулы
$capsule-margin-x:  8px;
$capsule-padding-x: 12px;
$border-idle:       0.3px;
$border-active:     1px;

// тайминги
$t-fast:      300ms;
$t-norm:      400ms;
$t-slow:      600ms;
$ease-oil:    cubic-bezier(0.16, 1, 0.3, 1);

// =================
//   базовые стили
// =================

* { 
    font-family: "Inter", "FiraCode Nerd Font"; 
    font-size: 14px; 
    all: unset; // сбрасываем дефолтные стили gtk
}

window { 
    background-color: transparent; 
}

.bar-inner { 
    margin: $win-margin; 
    padding: 0; 

    // сброс отступов для крайних элементов
    > box:first-child .capsule:first-child { margin-left: 0; }
    > box:last-child  .capsule:last-child  { margin-right: 0; }
}

// общий стиль для всех таблеток на баре
.capsule {
    background-color: rgba($surface0, 0.7);
    color: $text;
    margin: 0 $capsule-margin-x;
    padding: 0 $capsule-padding-x;
    border-radius: $r;
    min-height: $h;
    border: $border-idle solid $lavender;
    transition: all $t-fast ease-in-out;

    &.active { 
        background-color: rgba($surface0, 0.9);
        border: $border-active solid $lavender; 
        transition: all $t-slow ease-in-out; 
    }
}

// =========================
//   меню/поповеры/тутлипы
// =========================

menu, 
.menu,
popover,
tooltip {
    background-color: rgba($bg-dark, 0.9);
    border: 1px solid rgba($lavender, 0.5);
    border-radius: $r;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); 
    color: $text;
}

menuitem,
.menu-item {
    padding: 6px 14px;
    border-radius: $r - 4px;
    color: $text;
    background-color: transparent;
    transition: all 0.2s ease;

    &:hover,
    &:focus {
        background-color: rgba($lavender, 0.2); 
        color: $lavender;
    }
}

separator {
    background-color: rgba($lavender, 0.15);
    margin: 4px 8px;
    min-height: 1px;
}

// ===========
//   виджеты
// ===========

// воркспейсы
.workspaces-rail {
    @extend .capsule;
    
    padding: 0;
    transition: all $t-norm $ease-oil;
}

.ws-pill {
    color: $text;
    background-color: transparent;
    border-radius: $r - 2px;
    min-height: $h;
    padding: 0 4px;
    transition: background-color $t-norm $ease-oil, color 0.3s ease;

    &.active  { background-color: rgba($lavender, 0.2); }
    &.focused { background-color: rgba($lavender, 0.8); color: $surface0; }
    &.urgent  { animation: pulse-lavender 4s infinite ease-in-out; }
}

.ws-id { margin-left: 4px; }
.ws-icons-box { margin: 0 8px 0 4px; }

// раскладка
.kb-pill {
    @extend .capsule;

    margin-right: 0;
    
    .kb-label { transition: color $t-norm ease-in-out; }

    &.caps-on {
        border-color: $yellow;
        box-shadow: inset 0 0 0 1px rgba($yellow, 0.3);
        .kb-label { color: $yellow; }
    }

    &.num-on {
        border-color: $blue;
        box-shadow: inset 0 0 0 1px rgba($blue, 0.3);
        .kb-label { color: $blue; }
    }

    &.caps-on.num-on {
        border-color: $pink;
        .kb-label { color: $pink; }
    }
}

// статистика
.stats-pill {
    padding: 0 6px;

    .slide-wrapper { transition: all $t-fast ease-in-out; }

    &.alert { 
        border-color: $red; 
        border-width: 0.75px;
        .slide-wrapper {
            border-color: $red;
            transition: all $t-slow ease-in-out;
        }
    }
}

.stat-group { 
    .icon.alert, 
    .stat-label.alert { color: $red; } 
}

// управление звуком
.volume-pill {
    @extend .capsule;
    
    .icon, .stat-label { transition: color $t-norm ease-in-out; }
    .icon { margin-right: 14px; }
    .slide-wrapper { transition: all $t-fast ease-in-out; }

    &.muted {
        border-color: #444;
        .icon, .stat-label { color: $muted-gray; }

        scale slider { 
            background-color: $muted-gray; 
            transition: background-color $t-norm ease-in-out;
        }

        scale trough highlight { 
            background-color: #444; 
            transition: background-color $t-norm ease-in-out;
        }

        .slide-wrapper {
            border-color: #444;
            transition: all $t-slow ease-in-out;
        }
    }
}

.vol-bar { min-width: 120px; margin: 0 6px; }

// трей
.tray-capsule {
    @extend .capsule;
    
    padding: 0 10px;
    margin-right: 0;

    image { margin: 0 2px; opacity: 0.8; }
}

// часы
.time-pill {
    .icon { margin-right: 8px; }
}

// ================
//   элементы gtk
// ================

// ползунки
scale trough { 
    background-color: $bg-dark; 
    border-radius: $r; 
    min-height: 6px; 

    highlight { 
        background-color: $lavender; 
        border-radius: $r; 
    }
}

scale slider { 
    margin: -6px 0;
    background-color: $text; 
    min-height: 12px; 
    min-width: 12px; 
    border-radius: 6px; 
}

// разделитель внутри пилюль
.slide-wrapper { 
    margin-left: 10px; 
    padding-left: 10px; 
    border-left: 0.7px solid $lavender; 
}

// ============
//   анимации
// ============

@keyframes pulse-lavender {
    0%   { background-color: rgba($lavender, 0);   color: $text; }
    50%  { background-color: rgba($lavender, 0.2); color: lighten($text, 10%); }
    100% { background-color: rgba($lavender, 0);   color: $text; }
}