RaveosHyperland update

2 files changed, 173 insertions, 15 deletions

diff --git a/raveos-hyprland-theme/PKGBUILD b/raveos-hyprland-theme/PKGBUILD
index 900ef5c..a558fd6 100644
--- a/raveos-hyprland-theme/PKGBUILD
+++ b/raveos-hyprland-theme/PKGBUILD
@@ -1,6 +1,6 @@
 pkgname=raveos-hyprland-theme
 pkgver=0.0.0
-pkgrel=34
+pkgrel=35
 pkgdesc="RaveOS Hyprland theme payload and installer (includes DankMaterialShell)"
 arch=('any')
 url="https://raveos.local"
diff --git a/raveos-hyprland-theme/theme-data/hyprshell/styles.css b/raveos-hyprland-theme/theme-data/hyprshell/styles.css
index 861bf1f..1a2e645 100644
--- a/raveos-hyprland-theme/theme-data/hyprshell/styles.css
+++ b/raveos-hyprland-theme/theme-data/hyprshell/styles.css
@@ -1,56 +1,214 @@
+/* please add layerrules to hyprland config:
+
+layerrule = blur, hyprshell_overview
+layerrule = ignorezero, hyprshell_overview
+layerrule = blur, hyprshell_switch
+layerrule = ignorezero, hyprshell_switch
+layerrule = blur, hyprshell_launcher
+layerrule = ignorezero, hyprshell_launcher
+*/
+
 :root {
-    --border-color: rgba(90, 90, 120, 0.4);
-    --border-color-active: rgba(102, 226, 36, 0.7);
+    --border-color: rgba(255, 255, 255, 0.12);
+    --border-color-active: rgba(46, 204, 113, 0.55);
 
-    --bg-color: rgba(20, 20, 20, 0.5);
-    --bg-color-hover: rgba(40, 40, 50, 1);
+    --bg-color: rgba(11, 61, 46, 0.12);
+    --bg-color-hover: rgba(46, 204, 113, 0.18);
 
     --border-radius: 12px;
-    --border-size: 3px;
+    --border-size: 1px;
     --border-style: solid;
 
-    --text-color: rgba(245, 245, 245, 1);
+    --text-color: rgba(245, 255, 248, 0.95);
 
-    --window-padding: 3px;
+    --window-padding: 10px;
+    --bg-window-color: rgba(6, 20, 15, 0.75);
 }
 
-.window {
+:root {
+    --box-shadow-color: rgba(255, 255, 255, 0.05);
+    --box-shadow-color-hover: rgba(46, 204, 113, 0.25);
 }
 
+.client-image {
+    margin: 15px;
+    -gtk-icon-transform: scale(1.2);
+}
 
 .monitor {
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.12);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 0 15px rgba(46, 204, 113, 0.03),
+        0 8px 12px 0 rgba(0, 0, 0, 0.5);
+    background-color: var(--bg-window-color);
+    border-radius: var(--border-radius);
+    padding: 30px;
 }
 
 .workspace {
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.08);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.15),
+        inset 0 0 12px var(--box-shadow-color);
+    border-radius: calc(var(--border-radius) - 2px);
+    margin: 6px;
+    padding: 8px;
+    background-color: rgba(46, 204, 113, 0.1);
+}
+
+.workspace.active {
+    border-color: var(--border-color-active);
+    animation: pulse-glow 1.5s infinite ease-in-out;
 }
 
 .client {
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.06);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        inset 0 0 10px var(--box-shadow-color);
+    border-radius: calc(var(--border-radius) - 4px);
+    margin: 20px;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.02);
 }
 
-.client-image {
+.client.active {
+    border-color: var(--border-color-active);
+    animation: pulse-glow-client 1.5s infinite ease-in-out;
 }
 
+.client:hover {
+    border-color: rgba(46, 204, 113, 0.6);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.25),
+        inset 0 0 15px rgba(46, 204, 113, 0.15);
+    background-color: rgba(46, 204, 113, 0.12);
+}
 
 .launcher {
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.12);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 0 20px var(--box-shadow-color),
+        0 8px 32px 0 rgba(0, 0, 0, 0.5);
+    background-color: var(--bg-window-color);
+    border-radius: var(--border-radius);
+    padding: 14px;
 }
 
 .launcher-input {
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        inset 0 0 6px var(--box-shadow-color);
+    background-color: rgba(6, 20, 15, 0.35);
 }
 
-.launcher-results {
+.launcher-input:focus-within {
+    outline: none;
+    border-color: var(--border-color-active);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset 0 0 8px var(--box-shadow-color-hover),
+        0 0 8px rgba(46, 204, 113, 0.35);
 }
 
 .launcher-item {
+    padding: 0 8px;
+    border-radius: 10px;
+    box-shadow: inset 0 0 8px var(--box-shadow-color);
+    border: var(--border-size) var(--border-style) transparent;
 }
 
-.launcher-exec {
+.launcher-plugin-inner {
+    background: unset;
 }
 
-.launcher-key {
+.launcher-item:hover {
+    border-color: rgba(46, 204, 113, 0.4);
+    box-shadow: inset 0 0 10px var(--box-shadow-color-hover);
+    background-color: rgba(46, 204, 113, 0.08);
 }
 
-.launcher-plugins {
+.launcher-plugin {
+    padding: 4px;
+    border-radius: 12px;
+    box-shadow: inset 0 0 12px var(--box-shadow-color);
+    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.08);
 }
 
-.launcher-plugin {
+.launcher-item-inner {
+    background: unset;
+}
+
+.launcher-plugin:hover {
+    border-color: var(--border-color-active);
+    box-shadow: inset 0 0 12px var(--box-shadow-color-hover);
+}
+
+@keyframes background-moving {
+    0% {
+        background: linear-gradient(
+            90deg,
+            rgba(46, 204, 113, 0.25) 0%,
+            transparent 0%
+        );
+    }
+    100% {
+        background: linear-gradient(
+            90deg,
+            rgba(46, 204, 113, 0.25) 100%,
+            transparent 100%
+        );
+    }
+}
+
+@keyframes pulse-glow {
+    0% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.2),
+            inset 0 0 15px rgba(46, 204, 113, 0.12),
+            0 0 10px rgba(46, 204, 113, 0.2);
+        background-color: rgba(46, 204, 113, 0.05);
+    }
+    50% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.35),
+            inset 0 0 25px rgba(46, 204, 113, 0.25),
+            0 0 20px rgba(46, 204, 113, 0.5);
+        background-color: rgba(46, 204, 113, 0.08);
+    }
+    100% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.2),
+            inset 0 0 15px rgba(46, 204, 113, 0.12),
+            0 0 10px rgba(46, 204, 113, 0.2);
+        background-color: rgba(46, 204, 113, 0.05);
+    }
+}
+
+@keyframes pulse-glow-client {
+    0% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.15),
+            inset 0 0 10px rgba(46, 204, 113, 0.1),
+            0 0 8px rgba(46, 204, 113, 0.15);
+        background-color: rgba(46, 204, 113, 0.03);
+    }
+    50% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.25),
+            inset 0 0 15px rgba(46, 204, 113, 0.25),
+            0 0 14px rgba(46, 204, 113, 0.35);
+        background-color: rgba(46, 204, 113, 0.06);
+    }
+    100% {
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.15),
+            inset 0 0 10px rgba(46, 204, 113, 0.1),
+            0 0 8px rgba(46, 204, 113, 0.15);
+        background-color: rgba(46, 204, 113, 0.03);
+    }
 }