From ffa798f586b64b92277eef3fedc769680ae77eb1 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Wed, 4 Oct 2023 13:35:20 -0400 Subject: [PATCH] fix(systray): use dracula css for systray menus --- config/ags/js/bar/systray.js | 58 +++++++++++++++------------- config/ags/scss/main.scss | 7 +++- config/ags/scss/widgets/systray.scss | 34 ++++------------ config/ags/style.css | 35 +++++++---------- 4 files changed, 57 insertions(+), 77 deletions(-) diff --git a/config/ags/js/bar/systray.js b/config/ags/js/bar/systray.js index b540d68d..b31c3dbb 100644 --- a/config/ags/js/bar/systray.js +++ b/config/ags/js/bar/systray.js @@ -28,37 +28,41 @@ export const SysTray = Revealer({ }]], child: Box({ children: [ - Widget({ - type: Gtk.MenuBar, + Box({ className: 'sys-tray', - properties: [ - ['items', new Map()], - ['onAdded', (box, id) => { - const item = SystemTray.getItem(id); - if (box._items.has(id) || !item) - return; + children: [ + Widget({ + type: Gtk.MenuBar, + properties: [ + ['items', new Map()], + ['onAdded', (box, id) => { + const item = SystemTray.getItem(id); + if (box._items.has(id) || !item) + return; - const widget = SysTrayItem(item); - box._items.set(id, widget); - box.add(widget); - box.show_all(); - widget.child.revealChild = true; - }], + const widget = SysTrayItem(item); + box._items.set(id, widget); + box.add(widget); + box.show_all(); + widget.child.revealChild = true; + }], - ['onRemoved', (box, id) => { - if (!box._items.has(id)) - return; + ['onRemoved', (box, id) => { + if (!box._items.has(id)) + return; - box._items.get(id).child.revealChild = false; - setTimeout(() => { - box._items.get(id).destroy(); - box._items.delete(id); - }, 400); - }], - ], - connections: [ - [SystemTray, (box, id) => box._onAdded(box, id), 'added'], - [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'], + box._items.get(id).child.revealChild = false; + setTimeout(() => { + box._items.get(id).destroy(); + box._items.delete(id); + }, 400); + }], + ], + connections: [ + [SystemTray, (box, id) => box._onAdded(box, id), 'added'], + [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'], + ], + }), ], }), Separator(12), diff --git a/config/ags/scss/main.scss b/config/ags/scss/main.scss index 457431e8..1f531079 100644 --- a/config/ags/scss/main.scss +++ b/config/ags/scss/main.scss @@ -1,4 +1,9 @@ -* { +window, +button, +eventbox, +box, +progressbar, +trough { all: unset; } diff --git a/config/ags/scss/widgets/systray.scss b/config/ags/scss/widgets/systray.scss index 83405815..1f11e24b 100644 --- a/config/ags/scss/widgets/systray.scss +++ b/config/ags/scss/widgets/systray.scss @@ -1,45 +1,25 @@ .sys-tray { padding: 5px; background-color: $bg; - color: #CBA6F7; border-radius: 80px; border: 2px solid $bgSecondary; transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; .tray-item { - all: unset; + image { color: #CBA6F7; } padding: 0px 2px 0px 2px; - font-size: 25px; border-radius: 100%; - transition: background-color 0.5s ease-in-out, - border 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + &:hover { - background: rgba(127, 132, 156, 0.4); border-radius: 100%; - transition: background-color 0.5s ease-in-out, - border 0.5s ease-in-out; + transition: all 0.5s ease-in-out; } - } - menu { - background: $bgfull; - padding-top: 5px; - padding-bottom: 5px; - border: 2px solid #1b1b1b; - border-radius: 10px; - - check { - color: white; - margin-left: 2px; - margin-right: 5px; - min-height: 20px; - min-width: 20px; - -gtk-icon-source: -gtk-icontheme('checkbox-symbolic'); - - &:checked { - -gtk-icon-source: -gtk-icontheme('checkbox-checked-symbolic'); - } + * { + font-size: 25px; + border-radius: 10px; } } diff --git a/config/ags/style.css b/config/ags/style.css index 3a9f4382..48ba1582 100644 --- a/config/ags/style.css +++ b/config/ags/style.css @@ -1,4 +1,9 @@ -* { +window, +button, +eventbox, +box, +progressbar, +trough { all: unset; } .powermenu { @@ -144,35 +149,21 @@ tooltip { .sys-tray { padding: 5px; background-color: rgba(40, 42, 54, 0.8); - color: #CBA6F7; border-radius: 80px; border: 2px solid rgba(56, 44, 74, 0.8); transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } .sys-tray .tray-item { - all: unset; padding: 0px 2px 0px 2px; - font-size: 25px; border-radius: 100%; - transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } + transition: all 0.5s ease-in-out; } + .sys-tray .tray-item image { + color: #CBA6F7; } .sys-tray .tray-item:hover { - background: rgba(127, 132, 156, 0.4); border-radius: 100%; - transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; } - .sys-tray menu { - background: #282a36; - padding-top: 5px; - padding-bottom: 5px; - border: 2px solid #1b1b1b; - border-radius: 10px; } - .sys-tray menu check { - color: white; - margin-left: 2px; - margin-right: 5px; - min-height: 20px; - min-width: 20px; - -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); } - .sys-tray menu check:checked { - -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); } + transition: all 0.5s ease-in-out; } + .sys-tray .tray-item * { + font-size: 25px; + border-radius: 10px; } .sys-tray menuitem:not(.tray-item) { padding: 5px; transition: all 0.2s ease-in-out; }