feat: add initial eww config

2026-04-03 12:31:56 +04:00
parent 127d720db2
commit 3169f5a670
7 changed files with 793 additions and 0 deletions
@@ -0,0 +1,248 @@
+// ==============
+//   переменные
+// ==============
+
+// цветовая палитра
+$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;
+    &.alert { 
+        border-color: $red; 
+        border-width: 0.75px;
+        .slide-wrapper { border-color: $red; }
+    }
+}
+
+.stat-group { 
+    .icon.alert, 
+    .stat-label.alert { color: $red; } 
+}
+
+// управление звуком
+.volume-pill {
+    @extend .capsule;
+    
+    .icon { margin-right: 14px; }
+
+    &.muted {
+        border-color: #444;
+        .icon, .stat-label { color: $muted-gray; }
+        scale slider { background-color: $muted-gray; }
+        scale trough highlight { background-color: #444; }
+    }
+}
+
+.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; }
+}