LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish all theming options

Browse Source
This commit is contained in:
Jas Singh
2024-07-20 00:32:54 -07:00
parent c67b264a66
commit 29abe55008
7 changed files with 194 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
modules/menus/dashboard/directories/index.js
View File

@@ -17,7 +17,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
hpack: "start", hpack: "start",
expand: true, expand: true,
class_name: "directory-link downloads", class_name: "directory-link left top",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/Downloads`).catch( Utils.execAsync(`dolphin ${homeDir}/Downloads`).catch(
@@ -32,7 +32,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
expand: true, expand: true,
hpack: "start", hpack: "start",
class_name: "directory-link videos", class_name: "directory-link left middle",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/Videos`).catch( Utils.execAsync(`dolphin ${homeDir}/Videos`).catch(
@@ -47,7 +47,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
expand: true, expand: true,
hpack: "start", hpack: "start",
class_name: "directory-link projects", class_name: "directory-link left bottom",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/Projects`).catch( Utils.execAsync(`dolphin ${homeDir}/Projects`).catch(
@@ -69,7 +69,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
hpack: "start", hpack: "start",
expand: true, expand: true,
class_name: "directory-link documents", class_name: "directory-link right top",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/Documents`).catch( Utils.execAsync(`dolphin ${homeDir}/Documents`).catch(
@@ -84,7 +84,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
expand: true, expand: true,
hpack: "start", hpack: "start",
class_name: "directory-link pictures", class_name: "directory-link right middle",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/Pictures`).catch( Utils.execAsync(`dolphin ${homeDir}/Pictures`).catch(
@@ -99,7 +99,7 @@ const Directories = () => {
Widget.Button({ Widget.Button({
expand: true, expand: true,
hpack: "start", hpack: "start",
class_name: "directory-link home", class_name: "directory-link right bottom",
on_primary_click: () => { on_primary_click: () => {
App.closeWindow("dashboardmenu"); App.closeWindow("dashboardmenu");
Utils.execAsync(`dolphin ${homeDir}/`).catch( Utils.execAsync(`dolphin ${homeDir}/`).catch(

102
options.ts
View File

@@ -37,17 +37,21 @@ const options = mkOptions(OPTIONS, {
autotheme: opt(false), autotheme: opt(false),
theme: { theme: {
notification: { notification: {
background: opt(colors.base), background: opt(colors.mantle),
actions: { actions: {
background: opt(colors.surface0), background: opt(colors.surface0),
hover: opt(colors.surface1), hover: opt(colors.surface1),
text: opt(colors.mantle), text: opt(colors.mantle),
}, },
label: opt(colors.lavender), label: opt(colors.lavender),
date: opt(colors.overlay1), border: opt(colors.surface0),
time: opt(colors.overlay1),
text: opt(colors.text), text: opt(colors.text),
labelicon: opt(colors.lavender), labelicon: opt(colors.lavender),
close: opt(colors.red) close_button: {
background: opt(colors.red),
label: opt(colors.crust)
}
}, },
bar: { bar: {
transparent: opt(false), transparent: opt(false),
@@ -134,6 +138,7 @@ const options = mkOptions(OPTIONS, {
border: opt(colors.surface0), border: opt(colors.surface0),
text: opt(colors.text), text: opt(colors.text),
dimtext: opt(colors.surface2), dimtext: opt(colors.surface2),
feinttext: opt(colors.surface0),
label: opt(colors.lavender), label: opt(colors.lavender),
listitems: { listitems: {
passive: opt(colors.text), passive: opt(colors.text),
@@ -150,6 +155,8 @@ const options = mkOptions(OPTIONS, {
}, },
buttons: { buttons: {
default: opt(colors.lavender), default: opt(colors.lavender),
active: opt(colors.pink),
disabled: opt(colors.surface2),
text: opt(colors.crust) text: opt(colors.crust)
}, },
iconbuttons: { iconbuttons: {
@@ -166,7 +173,10 @@ const options = mkOptions(OPTIONS, {
occupied: opt(colors.flamingo), occupied: opt(colors.flamingo),
active: opt(colors.pink), active: opt(colors.pink),
}, },
progressbar: opt(colors.lavender), progressbar: {
foreground: opt(colors.lavender),
background: opt(colors.surface1),
},
slider: { slider: {
primary: opt(colors.lavender), primary: opt(colors.lavender),
background: opt(colors.surface2), background: opt(colors.surface2),
@@ -184,39 +194,14 @@ const options = mkOptions(OPTIONS, {
}, },
menu: { menu: {
media: { media: {
song: opt(colors.base2), song: opt(colors.lavender),
artist: opt(colors.base2), artist: opt(colors.teal),
album: opt(colors.base2), album: opt(colors.pink),
buttons: { buttons: {
inactive: { inactive: opt(colors.surface2),
background: opt(colors.surface2), enabled: opt(colors.teal),
text: opt(colors.crust)
},
shuffle: {
background: opt(colors.lavender), background: opt(colors.lavender),
active: opt(colors.pink), text: opt(colors.crust),
text: opt(colors.crust)
},
previous: {
background: opt(colors.lavender),
text: opt(colors.crust)
},
playpause: {
background: opt(colors.lavender),
text: opt(colors.crust)
},
next: {
background: opt(colors.lavender),
text: opt(colors.crust)
},
loop: {
background: opt(colors.lavender),
active: opt(colors.pink),
text: opt(colors.crust)
}
}, },
slider: { slider: {
primary: opt(colors.pink), primary: opt(colors.pink),
@@ -438,44 +423,13 @@ const options = mkOptions(OPTIONS, {
deny: opt(colors.red), deny: opt(colors.red),
} }
}, },
shortcuts_left: { shortcuts: {
shortcut1: {
background: opt(colors.lavender), background: opt(colors.lavender),
text: opt(colors.crust), text: opt(colors.crust),
}, recording: opt(colors.green)
shortcut2: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
shortcut3: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
shortcut4: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
},
shortcuts_right: {
shortcut1: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
shortcut2: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
shortcut3: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
shortcut4: {
background: opt(colors.lavender),
text: opt(colors.crust),
},
}, },
controls: { controls: {
disabled: (colors.surface2), disabled: opt(colors.surface2),
wifi: { wifi: {
background: opt(colors.mauve), background: opt(colors.mauve),
text: opt(colors.crust), text: opt(colors.crust),
@@ -522,6 +476,7 @@ const options = mkOptions(OPTIONS, {
} }
}, },
monitors: { monitors: {
bar_background: opt(colors.surface1),
cpu: { cpu: {
icon: opt(colors.maroon), icon: opt(colors.maroon),
bar: opt(colors.maroon), bar: opt(colors.maroon),
@@ -542,22 +497,21 @@ const options = mkOptions(OPTIONS, {
bar: opt(colors.pink), bar: opt(colors.pink),
label: opt(colors.pink), label: opt(colors.pink),
}, },
} },
}, },
notifications: { notifications: {
label: opt(colors.lavender),
no_notifications_label: opt(colors.surface0),
background: opt(colors.mantle), background: opt(colors.mantle),
card: opt(colors.base), card: opt(colors.base),
border: opt(colors.surface0), border: opt(colors.surface0),
switch_divider: opt(colors.surface1), switch_divider: opt(colors.surface1),
clear: opt(colors.red),
switch: { switch: {
enabled: opt(colors.lavender), enabled: opt(colors.lavender),
disabled: opt(colors.surface0), disabled: opt(colors.surface0),
puck: opt(colors.overlay0) puck: opt(colors.overlay0)
}, },
clear: {
background: opt(colors.red),
font: opt(colors.crust)
}
}, },
} }
} }

133
scss/style/menus/dashboard.scss
View File

@@ -3,8 +3,8 @@
.dashboard-content-items { .dashboard-content-items {
margin-left: 0.50em; margin-left: 0.50em;
min-width: 28.5em; min-width: 28.5em;
background: $crust; background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-dashboard-background);
border: 0.13em solid $surface0; border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-dashboard-border-color);
border-radius: 0.7em; border-radius: 0.7em;
button { button {
@@ -12,7 +12,7 @@
} }
.dashboard-card { .dashboard-card {
background: $base; background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-card-color);
margin: 1.3em; margin: 1.3em;
border-radius: 0.4em; border-radius: 0.4em;
padding: 1.5em; padding: 1.5em;
@@ -26,7 +26,7 @@
} }
.profile-name { .profile-name {
font-size: 1.5em; font-size: 1.5em;
color: $pink; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-profile-name);
margin-top: 0.75em; margin-top: 0.75em;
} }
} }
@@ -49,20 +49,31 @@
} }
&.shutdown { &.shutdown {
background: $red; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown);
} }
&.restart { &.restart {
background: $peach; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart);
} }
&.lock { &.lock {
background: $green; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout);
} }
&.sleep { &.sleep {
background: $sky; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep);
} }
&:hover { &:hover {
background: $mauve; &.shutdown {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-shutdown), 0.5);
}
&.restart {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-restart), 0.5);
}
&.lock {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-logout), 0.5);
}
&.sleep {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-sleep), 0.5);
}
} }
} }
@@ -97,8 +108,8 @@
} }
button { button {
background: $lavender; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background);
color: $base; color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
min-height: 3em; min-height: 3em;
&.discord { &.discord {
@@ -112,15 +123,15 @@
} }
&.record.active { &.record.active {
background: $green; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-recording);
&:hover { &:hover {
background: $red; background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-recording), 0.5);
} }
} }
&:hover { &:hover {
background: $pink; background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-shortcuts-background), 0.5);
} }
} }
} }
@@ -133,12 +144,11 @@
} }
button { button {
background: $red;
padding: 0em; padding: 0em;
min-height: 3em; min-height: 3em;
label { label {
color: $base; color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
font-size: 1.6em; font-size: 1.6em;
} }
@@ -147,54 +157,51 @@
} }
&.wifi { &.wifi {
background: $mauve; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background);
} }
&.bluetooth { &.bluetooth {
background: $sky; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background);
} }
&.notifications { &.notifications {
background: $yellow; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background);
} }
&.playback { &.playback {
background: $maroon; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background);
} }
&.input { &.input {
background: $pink; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background);
} }
&.wifi:hover { &.wifi:hover {
background: transparentize($mauve, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize($sky, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize($yellow, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
} }
&.playback:hover { &.playback:hover {
background: transparentize($maroon, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
} }
&.input:hover { &.input:hover {
background: transparentize($pink, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
}
&:hover {
background: $surface1;
} }
&.disabled { &.disabled {
background: $surface2; background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-dashboard-controls-disabled);
&.wifi:hover { &.wifi:hover {
background: transparentize($mauve, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-wifi-background), 0.5);
} }
&.bluetooth:hover { &.bluetooth:hover {
background: transparentize($sky, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-bluetooth-background), 0.5);
} }
&.notifications:hover { &.notifications:hover {
background: transparentize($yellow, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-notifications-background), 0.5);
} }
&.playback:hover { &.playback:hover {
background: transparentize($maroon, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-volume-background), 0.5);
} }
&.input:hover { &.input:hover {
background: transparentize($pink, 0.7); background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-controls-input-background), 0.5);
} }
} }
} }
@@ -220,23 +227,23 @@
font-size: 1.3em; font-size: 1.3em;
} }
&.documents { &.right.top {
color: $teal; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-top-color);
} }
&.downloads { &.right.middle {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-middle-color);
} }
&.home { &.right.bottom {
color: $lavender; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-right-bottom-color);
} }
&.pictures { &.left.top {
color: $mauve; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-top-color);
} }
&.videos { &.left.middle {
color: $yellow; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-middle-color);
} }
&.projects { &.left.bottom {
color: $maroon; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-directories-left-bottom-color);
} }
&:hover { &:hover {
@@ -255,16 +262,16 @@
} }
&.cpu label{ &.cpu label{
color: $maroon; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
} }
&.ram label{ &.ram label{
color: $yellow; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
} }
&.gpu label{ &.gpu label{
color: $green; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
} }
&.storage label{ &.storage label{
color: $pink; color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
} }
.stats-bar { .stats-bar {
@@ -280,7 +287,7 @@
border-radius: 0.4em; border-radius: 0.4em;
&.empty { &.empty {
background: $surface1; background: if($bar-menus-monochrome, $bar-menus-progressbar-background, $bar-menus-menu-dashboard-monitors-bar_background);
} }
&.filled { &.filled {
@@ -290,19 +297,19 @@
} }
&.cpu .stats-bar block.filled { &.cpu .stats-bar block.filled {
background: $maroon; background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-cpu-bar);
} }
&.ram .stats-bar block.filled { &.ram .stats-bar block.filled {
background: $yellow; background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-ram-bar);
} }
&.gpu .stats-bar block.filled { &.gpu .stats-bar block.filled {
background: $green; background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-gpu-bar);
} }
&.storage .stats-bar block.filled { &.storage .stats-bar block.filled {
background: $pink; background: if($bar-menus-monochrome, $bar-menus-progressbar-foreground, $bar-menus-menu-dashboard-monitors-disk-bar);
} }
} }
@@ -310,19 +317,19 @@
margin-bottom: 0.75em; margin-bottom: 0.75em;
font-size: 0.9em; font-size: 0.9em;
&.cpu { &.cpu {
color: $maroon; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
} }
&.ram { &.ram {
color: $yellow; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
} }
&.gpu { &.gpu {
color: $green; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
} }
&.storage { &.storage {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
} }
} }
} }
@@ -330,9 +337,5 @@
.dropdown.recording { .dropdown.recording {
color: red; color: red;
background-color: $crust; background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-background, $bar-menus-dropdownmenu-background);
menuitem {
}
} }

28
scss/style/menus/media.scss
View File

@@ -32,17 +32,17 @@
} }
.media-indicator-current-song-name-label { .media-indicator-current-song-name-label {
color: $lavender; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-song);
font-size: 1.35em; font-size: 1.35em;
} }
.media-indicator-current-song-author-label { .media-indicator-current-song-author-label {
color: $teal; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-artist);
font-size: 1em; font-size: 1em;
} }
.media-indicator-current-song-album-label { .media-indicator-current-song-album-label {
color: $pink; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-media-album);
font-size: 1em; font-size: 1em;
} }
@@ -56,25 +56,29 @@
} }
.media-indicator-control-button { .media-indicator-control-button {
background: $lavender; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
color: $crust; color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-media-buttons-text);
min-height: 1.8em; min-height: 1.8em;
min-width: 2.5em; min-width: 2.5em;
border-radius: 0.2rem; border-radius: 0.2rem;
&.disabled { &.disabled {
background: $surface2; background: if($bar-menus-monochrome, $bar-menus-buttons-disabled, $bar-menus-menu-media-buttons-inactive);
} }
&.enabled { &.enabled {
background: $lavender; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background);
&:hover { &:hover {
background: $pink; background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-background), 0.5);
} }
&.active { &.active {
background: $green; background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled);
&:hover {
background: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-media-buttons-enabled), 0.5);
}
} }
} }
@@ -89,20 +93,20 @@
margin-bottom: 1em; margin-bottom: 1em;
trough { trough {
background: $surface2; background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-media-slider-background);
border-radius: 0.2em; border-radius: 0.2em;
highlight, highlight,
progress { progress {
border-radius: 0.2em; border-radius: 0.2em;
min-height: .85em; min-height: .85em;
background: $pink; background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
} }
} }
&:hover { &:hover {
trough { trough {
background: $surface1; background: transparentize(if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-media-slider-backgroundhover), 0.3);
} }
} }
} }

49
scss/style/menus/notifications.scss
View File

@@ -1,11 +1,12 @@
@import "../colors"; @import "../colors";
@import '../../variables';
.notification-card-container.menu { .notification-card-container.menu {
margin: 0em; margin: 0em;
min-width: 30.5em; min-width: 30.5em;
min-height: 48em; min-height: 48em;
background: $crust; background: $crust;
border: 0.13em solid $surface0; border: 0.13em solid $notification-border;
border-radius: 0.7em; border-radius: 0.7em;
margin-right: 0.45em; margin-right: 0.45em;
@@ -20,7 +21,7 @@
} }
.notification-menu-controls { .notification-menu-controls {
background: $base; background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card);
margin: 1em 1em; margin: 1em 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-radius: 0.4em; border-radius: 0.4em;
@@ -28,9 +29,9 @@
} }
.notification-card.menu { .notification-card.menu {
background: $base; background: $notification-background;
min-width: 26.2em; min-width: 26.2em;
border: 0.15em solid $base; border: 0.15em solid $notification-border;
border-radius: 0em; border-radius: 0em;
border-bottom-left-radius: 0.4em; border-bottom-left-radius: 0.4em;
border-top-left-radius: 0.4em; border-top-left-radius: 0.4em;
@@ -49,18 +50,38 @@
.menu-label.notifications { .menu-label.notifications {
margin: 0em; margin: 0em;
color: $lavender; color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
} }
.menu-separator.notification-controls { .menu-separator.notification-controls {
min-width: 0.1em; min-width: 0.1em;
background-color: $surface0; background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-divider, $bar-menus-menu-notifications-switch_divider);
margin: 0em 1em; margin: 0em 1em;
} }
.menu-switch.notifications:checked { .menu-switch.notifications {
background-color: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
&:checked { &:checked {
background: $lavender; background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
}
slider {
background-color: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
}
&:hover {
trough {
background: if($bar-menus-monochrome, $bar-menus-switch-disabled, $bar-menus-menu-notifications-switch-disabled);
}
slider {
background: if($bar-menus-monochrome, $bar-menus-switch-puck, $bar-menus-menu-notifications-switch-puck);
}
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-notifications-switch-enabled);
} }
} }
@@ -68,12 +89,12 @@
margin-right: 0.3em; margin-right: 0.3em;
&:hover label { &:hover label {
color: $maroon; color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear), 0.5);
} }
} }
.clear-notifications-label { .clear-notifications-label {
color: $red; color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-notifications-clear);
font-size: 1.5em; font-size: 1.5em;
} }
} }
@@ -82,7 +103,7 @@
margin-bottom: 8em; margin-bottom: 8em;
label { label {
color: $surface0; color: if($bar-menus-monochrome, $bar-menus-feinttext, $bar-menus-menu-notifications-no_notifications_label);
} }
.bell { .bell {
@@ -94,8 +115,8 @@
} }
.close-notification-button.menu { .close-notification-button.menu {
background: $red; background: $notification-close_button-background;
color: $crust; color: $notification-close_button-label;
min-width: 2.1em; min-width: 2.1em;
border-radius: 0rem 0.35em 0.35em 0em; border-radius: 0rem 0.35em 0.35em 0em;
@@ -104,6 +125,6 @@
} }
&:hover { &:hover {
background: $maroon; background: transparentize($notification-close_button-background ,0.5);
} }
} }

22
scss/style/notifications/popups.scss
View File

@@ -4,10 +4,10 @@
} }
.notification-card { .notification-card {
color: $text; color: $notification-text;
background: $mantle; background: $notification-background;
margin-right: 0.45em; margin-right: 0.45em;
border: 0.15em solid transparentize($surface0, 0.5); border: 0.15em solid transparentize($notification-border, 0.5);
min-width: 26em; min-width: 26em;
min-height: 6rem; min-height: 6rem;
border-radius: 0.6em; border-radius: 0.6em;
@@ -66,8 +66,8 @@
} }
.notification-action-buttons { .notification-action-buttons {
color: $lavender; color: $notification-actions-text;
background: $surface0; background: $notification-actions-background;
min-width: 4em; min-width: 4em;
min-height: 1.65em; min-height: 1.65em;
border-radius: 0.2em; border-radius: 0.2em;
@@ -77,12 +77,12 @@
} }
&:hover { &:hover {
background: $surface1; background: $notification-actions-hover;
} }
} }
.notification-icon { .notification-icon {
color: $lavender; color: $notification-labelicon;
margin-bottom: 0.4em; margin-bottom: 0.4em;
min-width: 1em; min-width: 1em;
min-height: 1em; min-height: 1em;
@@ -91,12 +91,12 @@
.notification-time { .notification-time {
font-size: 0.85em; font-size: 0.85em;
color: $overlay1; color: $notification-time;
} }
.close-notification-button { .close-notification-button {
background: $red; background: $notification-close_button-background;
color: $crust; color: $notification-close_button-label;
min-width: 2.1em; min-width: 2.1em;
border-radius: 0rem 0.35em 0.35em 0em; border-radius: 0rem 0.35em 0.35em 0em;
@@ -105,6 +105,6 @@
} }
&:hover { &:hover {
background: $maroon; background: transparentize($notification-close_button-background, 0.5);
} }
} }

66
scss/variables.scss
View File

@@ -1,12 +1,14 @@
$notification-background: #1e1e2e; $notification-background: #181825;
$notification-actions-background: #313244; $notification-actions-background: #313244;
$notification-actions-hover: #45475a; $notification-actions-hover: #45475a;
$notification-actions-text: #181825; $notification-actions-text: #181825;
$notification-label: #b4befe; $notification-label: #b4befe;
$notification-date: #7f849c; $notification-border: #313244;
$notification-time: #7f849c;
$notification-text: #cdd6f4; $notification-text: #cdd6f4;
$notification-labelicon: #b4befe; $notification-labelicon: #b4befe;
$notification-close: #f38ba8; $notification-close_button-background: #f38ba8;
$notification-close_button-label: #11111b;
$bar-transparent: false; $bar-transparent: false;
$bar-background: #11111b; $bar-background: #11111b;
$bar-buttons-monochrome: false; $bar-buttons-monochrome: false;
@@ -58,12 +60,13 @@ $bar-buttons-clock-icon: #f5c2e7;
$bar-buttons-notifications-background: #242438; $bar-buttons-notifications-background: #242438;
$bar-buttons-notifications-hover: #45475a; $bar-buttons-notifications-hover: #45475a;
$bar-buttons-notifications-icon: #b4befe; $bar-buttons-notifications-icon: #b4befe;
$bar-menus-monochrome: true; $bar-menus-monochrome: false;
$bar-menus-background: #11111b; $bar-menus-background: #11111b;
$bar-menus-cards: #1e1e2e; $bar-menus-cards: #1e1e2e;
$bar-menus-border: #313244; $bar-menus-border: #313244;
$bar-menus-text: #cdd6f4; $bar-menus-text: #cdd6f4;
$bar-menus-dimtext: #585b70; $bar-menus-dimtext: #585b70;
$bar-menus-feinttext: #313244;
$bar-menus-label: #b4befe; $bar-menus-label: #b4befe;
$bar-menus-listitems-passive: #cdd6f4; $bar-menus-listitems-passive: #cdd6f4;
$bar-menus-listitems-active: #b4befe; $bar-menus-listitems-active: #b4befe;
@@ -73,6 +76,8 @@ $bar-menus-switch-enabled: #b4befe;
$bar-menus-switch-disabled: #313244; $bar-menus-switch-disabled: #313244;
$bar-menus-switch-puck: #6c7086; $bar-menus-switch-puck: #6c7086;
$bar-menus-buttons-default: #b4befe; $bar-menus-buttons-default: #b4befe;
$bar-menus-buttons-active: #f5c2e7;
$bar-menus-buttons-disabled: #585b70;
$bar-menus-buttons-text: #11111b; $bar-menus-buttons-text: #11111b;
$bar-menus-iconbuttons-passive: #cdd6f4; $bar-menus-iconbuttons-passive: #cdd6f4;
$bar-menus-iconbuttons-active: #b4befe; $bar-menus-iconbuttons-active: #b4befe;
@@ -82,7 +87,8 @@ $bar-menus-workspaces-background: #242438;
$bar-menus-workspaces-available: #89dceb; $bar-menus-workspaces-available: #89dceb;
$bar-menus-workspaces-occupied: #f2cdcd; $bar-menus-workspaces-occupied: #f2cdcd;
$bar-menus-workspaces-active: #f5c2e7; $bar-menus-workspaces-active: #f5c2e7;
$bar-menus-progressbar: #b4befe; $bar-menus-progressbar-foreground: #b4befe;
$bar-menus-progressbar-background: #45475a;
$bar-menus-slider-primary: #b4befe; $bar-menus-slider-primary: #b4befe;
$bar-menus-slider-background: #585b70; $bar-menus-slider-background: #585b70;
$bar-menus-slider-backgroundhover: #45475a; $bar-menus-slider-backgroundhover: #45475a;
@@ -92,23 +98,13 @@ $bar-menus-dropdownmenu-text: #cdd6f4;
$bar-menus-dropdownmenu-divider: #1e1e2e; $bar-menus-dropdownmenu-divider: #1e1e2e;
$bar-menus-tooltip-background: #11111b; $bar-menus-tooltip-background: #11111b;
$bar-menus-tooltip-text: #cdd6f4; $bar-menus-tooltip-text: #cdd6f4;
$bar-menus-menu-media-song: #242438; $bar-menus-menu-media-song: #b4befe;
$bar-menus-menu-media-artist: #242438; $bar-menus-menu-media-artist: #94e2d5;
$bar-menus-menu-media-album: #242438; $bar-menus-menu-media-album: #f5c2e7;
$bar-menus-menu-media-buttons-inactive-background: #585b70; $bar-menus-menu-media-buttons-inactive: #585b70;
$bar-menus-menu-media-buttons-inactive-text: #11111b; $bar-menus-menu-media-buttons-enabled: #94e2d5;
$bar-menus-menu-media-buttons-shuffle-background: #b4befe; $bar-menus-menu-media-buttons-background: #b4befe;
$bar-menus-menu-media-buttons-shuffle-active: #f5c2e7; $bar-menus-menu-media-buttons-text: #11111b;
$bar-menus-menu-media-buttons-shuffle-text: #11111b;
$bar-menus-menu-media-buttons-previous-background: #b4befe;
$bar-menus-menu-media-buttons-previous-text: #11111b;
$bar-menus-menu-media-buttons-playpause-background: #b4befe;
$bar-menus-menu-media-buttons-playpause-text: #11111b;
$bar-menus-menu-media-buttons-next-background: #b4befe;
$bar-menus-menu-media-buttons-next-text: #11111b;
$bar-menus-menu-media-buttons-loop-background: #b4befe;
$bar-menus-menu-media-buttons-loop-active: #f5c2e7;
$bar-menus-menu-media-buttons-loop-text: #11111b;
$bar-menus-menu-media-slider-primary: #f5c2e7; $bar-menus-menu-media-slider-primary: #f5c2e7;
$bar-menus-menu-media-slider-background: #585b70; $bar-menus-menu-media-slider-background: #585b70;
$bar-menus-menu-media-slider-backgroundhover: #45475a; $bar-menus-menu-media-slider-backgroundhover: #45475a;
@@ -217,22 +213,10 @@ $bar-menus-menu-dashboard-powermenu-confirmation-label: #a6e3a1;
$bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4; $bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4;
$bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1; $bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1;
$bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8; $bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8;
$bar-menus-menu-dashboard-shortcuts_left-shortcut1-background: #b4befe; $bar-menus-menu-dashboard-shortcuts-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_left-shortcut1-text: #11111b; $bar-menus-menu-dashboard-shortcuts-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_left-shortcut2-background: #b4befe; $bar-menus-menu-dashboard-shortcuts-recording: #a6e3a1;
$bar-menus-menu-dashboard-shortcuts_left-shortcut2-text: #11111b; $bar-menus-menu-dashboard-controls-disabled: #585b70;
$bar-menus-menu-dashboard-shortcuts_left-shortcut3-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_left-shortcut3-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_left-shortcut4-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_left-shortcut4-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_right-shortcut1-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_right-shortcut1-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_right-shortcut2-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_right-shortcut2-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_right-shortcut3-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_right-shortcut3-text: #11111b;
$bar-menus-menu-dashboard-shortcuts_right-shortcut4-background: #b4befe;
$bar-menus-menu-dashboard-shortcuts_right-shortcut4-text: #11111b;
$bar-menus-menu-dashboard-controls-wifi-background: #cba6f7; $bar-menus-menu-dashboard-controls-wifi-background: #cba6f7;
$bar-menus-menu-dashboard-controls-wifi-text: #11111b; $bar-menus-menu-dashboard-controls-wifi-text: #11111b;
$bar-menus-menu-dashboard-controls-bluetooth-background: #89dceb; $bar-menus-menu-dashboard-controls-bluetooth-background: #89dceb;
@@ -249,6 +233,7 @@ $bar-menus-menu-dashboard-directories-left-bottom-color: #eba0ac;
$bar-menus-menu-dashboard-directories-right-top-color: #94e2d5; $bar-menus-menu-dashboard-directories-right-top-color: #94e2d5;
$bar-menus-menu-dashboard-directories-right-middle-color: #cba6f7; $bar-menus-menu-dashboard-directories-right-middle-color: #cba6f7;
$bar-menus-menu-dashboard-directories-right-bottom-color: #b4befe; $bar-menus-menu-dashboard-directories-right-bottom-color: #b4befe;
$bar-menus-menu-dashboard-monitors-bar_background: #45475a;
$bar-menus-menu-dashboard-monitors-cpu-icon: #eba0ac; $bar-menus-menu-dashboard-monitors-cpu-icon: #eba0ac;
$bar-menus-menu-dashboard-monitors-cpu-bar: #eba0ac; $bar-menus-menu-dashboard-monitors-cpu-bar: #eba0ac;
$bar-menus-menu-dashboard-monitors-cpu-label: #eba0ac; $bar-menus-menu-dashboard-monitors-cpu-label: #eba0ac;
@@ -261,12 +246,13 @@ $bar-menus-menu-dashboard-monitors-gpu-label: #a6e3a1;
$bar-menus-menu-dashboard-monitors-disk-icon: #f5c2e7; $bar-menus-menu-dashboard-monitors-disk-icon: #f5c2e7;
$bar-menus-menu-dashboard-monitors-disk-bar: #f5c2e7; $bar-menus-menu-dashboard-monitors-disk-bar: #f5c2e7;
$bar-menus-menu-dashboard-monitors-disk-label: #f5c2e7; $bar-menus-menu-dashboard-monitors-disk-label: #f5c2e7;
$bar-menus-menu-notifications-label: #b4befe;
$bar-menus-menu-notifications-no_notifications_label: #313244;
$bar-menus-menu-notifications-background: #181825; $bar-menus-menu-notifications-background: #181825;
$bar-menus-menu-notifications-card: #1e1e2e; $bar-menus-menu-notifications-card: #1e1e2e;
$bar-menus-menu-notifications-border: #313244; $bar-menus-menu-notifications-border: #313244;
$bar-menus-menu-notifications-switch_divider: #45475a; $bar-menus-menu-notifications-switch_divider: #45475a;
$bar-menus-menu-notifications-clear: #f38ba8;
$bar-menus-menu-notifications-switch-enabled: #b4befe; $bar-menus-menu-notifications-switch-enabled: #b4befe;
$bar-menus-menu-notifications-switch-disabled: #313244; $bar-menus-menu-notifications-switch-disabled: #313244;
$bar-menus-menu-notifications-switch-puck: #6c7086; $bar-menus-menu-notifications-switch-puck: #6c7086;
$bar-menus-menu-notifications-clear-background: #f38ba8;
$bar-menus-menu-notifications-clear-font: #11111b;