fix(systray): use dracula css for systray menus
This commit is contained in:
parent
aebf9772ee
commit
ffa798f586
4 changed files with 57 additions and 77 deletions
|
@ -28,37 +28,41 @@ export const SysTray = Revealer({
|
||||||
}]],
|
}]],
|
||||||
child: Box({
|
child: Box({
|
||||||
children: [
|
children: [
|
||||||
Widget({
|
Box({
|
||||||
type: Gtk.MenuBar,
|
|
||||||
className: 'sys-tray',
|
className: 'sys-tray',
|
||||||
properties: [
|
children: [
|
||||||
['items', new Map()],
|
Widget({
|
||||||
['onAdded', (box, id) => {
|
type: Gtk.MenuBar,
|
||||||
const item = SystemTray.getItem(id);
|
properties: [
|
||||||
if (box._items.has(id) || !item)
|
['items', new Map()],
|
||||||
return;
|
['onAdded', (box, id) => {
|
||||||
|
const item = SystemTray.getItem(id);
|
||||||
|
if (box._items.has(id) || !item)
|
||||||
|
return;
|
||||||
|
|
||||||
const widget = SysTrayItem(item);
|
const widget = SysTrayItem(item);
|
||||||
box._items.set(id, widget);
|
box._items.set(id, widget);
|
||||||
box.add(widget);
|
box.add(widget);
|
||||||
box.show_all();
|
box.show_all();
|
||||||
widget.child.revealChild = true;
|
widget.child.revealChild = true;
|
||||||
}],
|
}],
|
||||||
|
|
||||||
['onRemoved', (box, id) => {
|
['onRemoved', (box, id) => {
|
||||||
if (!box._items.has(id))
|
if (!box._items.has(id))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
box._items.get(id).child.revealChild = false;
|
box._items.get(id).child.revealChild = false;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
box._items.get(id).destroy();
|
box._items.get(id).destroy();
|
||||||
box._items.delete(id);
|
box._items.delete(id);
|
||||||
}, 400);
|
}, 400);
|
||||||
}],
|
}],
|
||||||
],
|
],
|
||||||
connections: [
|
connections: [
|
||||||
[SystemTray, (box, id) => box._onAdded(box, id), 'added'],
|
[SystemTray, (box, id) => box._onAdded(box, id), 'added'],
|
||||||
[SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
|
[SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
|
||||||
|
],
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
Separator(12),
|
Separator(12),
|
||||||
|
|
|
@ -1,4 +1,9 @@
|
||||||
* {
|
window,
|
||||||
|
button,
|
||||||
|
eventbox,
|
||||||
|
box,
|
||||||
|
progressbar,
|
||||||
|
trough {
|
||||||
all: unset;
|
all: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,45 +1,25 @@
|
||||||
.sys-tray {
|
.sys-tray {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
color: #CBA6F7;
|
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
border: 2px solid $bgSecondary;
|
border: 2px solid $bgSecondary;
|
||||||
transition: background-color 0.5s ease-in-out,
|
transition: background-color 0.5s ease-in-out,
|
||||||
border 0.5s ease-in-out;
|
border 0.5s ease-in-out;
|
||||||
|
|
||||||
.tray-item {
|
.tray-item {
|
||||||
all: unset;
|
image { color: #CBA6F7; }
|
||||||
padding: 0px 2px 0px 2px;
|
padding: 0px 2px 0px 2px;
|
||||||
font-size: 25px;
|
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transition: background-color 0.5s ease-in-out,
|
transition: all 0.5s ease-in-out;
|
||||||
border 0.5s ease-in-out;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(127, 132, 156, 0.4);
|
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
transition: background-color 0.5s ease-in-out,
|
transition: all 0.5s ease-in-out;
|
||||||
border 0.5s ease-in-out;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
menu {
|
* {
|
||||||
background: $bgfull;
|
font-size: 25px;
|
||||||
padding-top: 5px;
|
border-radius: 10px;
|
||||||
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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,9 @@
|
||||||
* {
|
window,
|
||||||
|
button,
|
||||||
|
eventbox,
|
||||||
|
box,
|
||||||
|
progressbar,
|
||||||
|
trough {
|
||||||
all: unset; }
|
all: unset; }
|
||||||
|
|
||||||
.powermenu {
|
.powermenu {
|
||||||
|
@ -144,35 +149,21 @@ tooltip {
|
||||||
.sys-tray {
|
.sys-tray {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background-color: rgba(40, 42, 54, 0.8);
|
background-color: rgba(40, 42, 54, 0.8);
|
||||||
color: #CBA6F7;
|
|
||||||
border-radius: 80px;
|
border-radius: 80px;
|
||||||
border: 2px solid rgba(56, 44, 74, 0.8);
|
border: 2px solid rgba(56, 44, 74, 0.8);
|
||||||
transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
|
transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
|
||||||
.sys-tray .tray-item {
|
.sys-tray .tray-item {
|
||||||
all: unset;
|
|
||||||
padding: 0px 2px 0px 2px;
|
padding: 0px 2px 0px 2px;
|
||||||
font-size: 25px;
|
|
||||||
border-radius: 100%;
|
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 {
|
.sys-tray .tray-item:hover {
|
||||||
background: rgba(127, 132, 156, 0.4);
|
|
||||||
border-radius: 100%;
|
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 menu {
|
.sys-tray .tray-item * {
|
||||||
background: #282a36;
|
font-size: 25px;
|
||||||
padding-top: 5px;
|
border-radius: 10px; }
|
||||||
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"); }
|
|
||||||
.sys-tray menuitem:not(.tray-item) {
|
.sys-tray menuitem:not(.tray-item) {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
transition: all 0.2s ease-in-out; }
|
transition: all 0.2s ease-in-out; }
|
||||||
|
|
Loading…
Reference in a new issue