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

WIP - Refactor media menu

Browse Source
This commit is contained in:
Jas Singh
2024-07-10 00:46:24 -07:00
parent 81ecf205be
commit 6cda814d9b
14 changed files with 358 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
modules/menus/dashboard/controls/index.js
View File

@@ -11,6 +11,7 @@ const Controls = () => {
expand: true,
children: [
Widget.Button({
tooltip_text: "Toggle Wifi",
expand: true,
setup: (self) => {
self.hook(network, () => {
@@ -27,6 +28,7 @@ const Controls = () => {
}),
}),
Widget.Button({
tooltip_text: "Toggle Bluetooth",
expand: true,
class_name: bluetooth
.bind("enabled")
@@ -39,6 +41,7 @@ const Controls = () => {
}),
}),
Widget.Button({
tooltip_text: "Toggle Notifications",
expand: true,
class_name: notifications
.bind("dnd")
@@ -51,6 +54,7 @@ const Controls = () => {
}),
}),
Widget.Button({
tooltip_text: "Toggle Mute (Playback)",
expand: true,
on_primary_click: () =>
(audio.speaker.is_muted = !audio.speaker.is_muted),
@@ -68,6 +72,7 @@ const Controls = () => {
}),
}),
Widget.Button({
tooltip_text: "Toggle Mute (Microphone)",
expand: true,
on_primary_click: () =>
(audio.microphone.is_muted = !audio.microphone.is_muted),

8
modules/menus/dashboard/shortcuts/index.js
View File

@@ -80,6 +80,7 @@ const Shortcuts = () => {
hexpand: true,
children: [
Widget.Button({
tooltip_text: "Microsoft Edge",
class_name: "dashboard-button edge top-button",
on_primary_click: () => handleClick("microsoft-edge-stable"),
child: Widget.Label({
@@ -88,6 +89,7 @@ const Shortcuts = () => {
}),
}),
Widget.Button({
tooltip_text: "Spotify",
class_name: "dashboard-button spotify",
on_primary_click: () => handleClick("spotify-launcher"),
child: Widget.Label({
@@ -102,6 +104,7 @@ const Shortcuts = () => {
hexpand: true,
children: [
Widget.Button({
tooltip_text: "Discord",
class_name: "dashboard-button discord top-button",
on_primary_click: () => handleClick("discord"),
child: Widget.Label({
@@ -110,6 +113,7 @@ const Shortcuts = () => {
}),
}),
Widget.Button({
tooltip_text: "Search Apps",
class_name: "dashboard-button search",
on_primary_click: () => handleClick("rofi -show drun"),
child: Widget.Label({
@@ -131,6 +135,7 @@ const Shortcuts = () => {
hexpand: true,
children: [
Widget.Button({
tooltip_text: "Color Picker",
class_name: "dashboard-button colorpicker top-button",
on_primary_click: () => handleClick("hyprpicker -a"),
child: Widget.Label({
@@ -139,6 +144,7 @@ const Shortcuts = () => {
}),
}),
Widget.Button({
tooltip_text: "Hyprland Settings",
class_name: "dashboard-button settings",
on_primary_click: () =>
handleClick(
@@ -156,6 +162,7 @@ const Shortcuts = () => {
hexpand: true,
children: [
Widget.Button({
tooltip_text: "Screenshot",
class_name: "dashboard-button snapshot top-button",
on_primary_click: () => {
App.closeWindow("dashboardmenu");
@@ -169,6 +176,7 @@ const Shortcuts = () => {
}),
}),
Widget.Button({
tooltip_text: "Record Screen",
class_name: isRecording
.bind("value")
.as((v) => `dashboard-button record ${v ? "active" : ""}`),

16
modules/menus/media/components/albumcover.js
View File

@@ -1,16 +0,0 @@
const AlbumCover = (curPlayer) => {
if (
typeof curPlayer.track_cover_url === "string" &&
curPlayer.track_cover_url.length > 0
) {
return Widget.Box({
vexpand: false,
vpack: "center",
class_name: "media-indicator-current-album-cover",
css: `background-image: url("${curPlayer.track_cover_url}")`,
});
}
return Widget.Box();
};
export { AlbumCover };

56
modules/menus/media/components/bar.js
View File

@@ -1,4 +1,26 @@
const Bar = (curPlayer) => {
const media = await Service.import("mpris");
const Bar = (getPlayerInfo) => {
media.connect("changed", () => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
const isPlaying = media.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
curPlayer.value = media.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
});
return Widget.Box({
class_name: "media-indicator-current-progress-bar",
hexpand: true,
@@ -11,34 +33,34 @@ const Bar = (curPlayer) => {
class_name: "menu-slider media progress",
draw_value: false,
on_change: ({ value }) => {
return (curPlayer.position = value * curPlayer.length);
const foundPlayer = getPlayerInfo(media);
return (foundPlayer.position = value * foundPlayer.length);
},
setup: (self) => {
const update = () => {
if (
typeof curPlayer.position === "number" &&
curPlayer.position > 0 &&
typeof curPlayer.length === "number" &&
curPlayer.length > 0
) {
const value = curPlayer.position / curPlayer.length;
const foundPlayer = getPlayerInfo(media);
if (foundPlayer !== undefined) {
const value = foundPlayer.position / foundPlayer.length;
self.value = value > 0 ? value : 0;
} else {
self.value = 0;
}
};
self.hook(curPlayer, update);
self.hook(curPlayer, update, "position");
self.hook(media, update);
self.poll(1000, update);
function updateTooltip() {
const curHour = Math.floor(curPlayer.position / 3600);
const curMin = Math.floor((curPlayer.position % 3600) / 60);
const curSec = Math.floor(curPlayer.position % 60);
const foundPlayer = getPlayerInfo(media);
if (foundPlayer === undefined) {
return self.tooltip_text = '0:0'
}
const curHour = Math.floor(foundPlayer.position / 3600);
const curMin = Math.floor((foundPlayer.position % 3600) / 60);
const curSec = Math.floor(foundPlayer.position % 60);
if (
typeof curPlayer.position === "number" &&
curPlayer.position >= 0
typeof foundPlayer.position === "number" &&
foundPlayer.position >= 0
) {
// WARN: These nested ternaries are absolutely disgusting lol
self.tooltip_text = `${
@@ -51,7 +73,7 @@ const Bar = (curPlayer) => {
}
}
self.poll(1000, updateTooltip);
self.hook(curPlayer, updateTooltip);
self.hook(media, updateTooltip);
},
}),
}),

63
modules/menus/media/components/controls.js vendored
View File

@@ -1,6 +1,31 @@
import icons from "../../../icons/index.js";
const media = await Service.import("mpris");
const Controls = (curPlayer) => {
const Controls = () => {
const curPlayer = Variable(media.players[0]);
media.connect("changed", () => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
const isPlaying = media.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
curPlayer.value = media.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
});
if (curPlayer.value === undefined) {
return Widget.Box();
}
const isLoopActive = (player) => {
return player["loop-status"] !== null &&
["track", "playlist"].includes(player["loop-status"].toLowerCase())
@@ -28,25 +53,25 @@ const Controls = (curPlayer) => {
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.shuffle_status !== null
? curPlayer.shuffle_status
curPlayer.value.shuffle_status !== null
? curPlayer.value.shuffle_status
? "Shuffling"
: "Not Shuffling"
: null,
hasTooltip: true,
on_primary_click: () => curPlayer.shuffle(),
class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer)} ${curPlayer.shuffle_status !== null ? "enabled" : "disabled"}`,
on_primary_click: () => curPlayer.value.shuffle(),
class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer.value)} ${curPlayer.value.shuffle_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.shuffle["enabled"]),
}),
],
}),
Widget.Box({
class_name: `media-indicator-control prev ${curPlayer.can_go_prev}`,
class_name: `media-indicator-control prev ${curPlayer.value.can_go_prev}`,
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.previous(),
class_name: `media-indicator-control-button prev ${curPlayer.can_go_prev ? "enabled" : "disabled"}`,
on_primary_click: () => curPlayer.value.previous(),
class_name: `media-indicator-control-button prev ${curPlayer.value.can_go_prev ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.prev),
}),
],
@@ -56,10 +81,10 @@ const Controls = (curPlayer) => {
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.playPause(),
class_name: `media-indicator-control-button play ${curPlayer.can_play ? "enabled" : "disabled"}`,
on_primary_click: () => curPlayer.value.playPause(),
class_name: `media-indicator-control-button play ${curPlayer.value.can_play ? "enabled" : "disabled"}`,
child: Widget.Icon(
icons.mpris[curPlayer.play_back_status.toLowerCase()],
icons.mpris[curPlayer.value.play_back_status.toLowerCase()],
),
}),
],
@@ -69,8 +94,8 @@ const Controls = (curPlayer) => {
children: [
Widget.Button({
hpack: "center",
on_primary_click: () => curPlayer.next(),
class_name: `media-indicator-control-button next ${curPlayer.can_go_next ? "enabled" : "disabled"}`,
on_primary_click: () => curPlayer.value.next(),
class_name: `media-indicator-control-button next ${curPlayer.value.can_go_next ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.next),
}),
],
@@ -81,16 +106,16 @@ const Controls = (curPlayer) => {
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.loop_status !== null
? `Looping: ${curPlayer.loop_status}`
curPlayer.value.loop_status !== null
? `Looping: ${curPlayer.value.loop_status}`
: null,
hasTooltip: true,
on_primary_click: () => curPlayer.loop(),
class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer)} ${curPlayer.loop_status !== null ? "enabled" : "disabled"}`,
on_primary_click: () => curPlayer.value.loop(),
class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer.value)} ${curPlayer.value.loop_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(
curPlayer.loop_status === null
curPlayer.value.loop_status === null
? icons.mpris.loop["none"]
: icons.mpris.loop[curPlayer.loop_status?.toLowerCase()],
: icons.mpris.loop[curPlayer.value.loop_status?.toLowerCase()],
),
}),
],

52
modules/menus/media/components/mediainfo.js
View File

@@ -1,4 +1,28 @@
const MediaInfo = (curPlayer) => {
const media = await Service.import("mpris");
const MediaInfo = () => {
const curPlayer = Variable(media.players[0]);
media.connect("changed", () => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
const isPlaying = media.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
curPlayer.value = media.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
console.log('changed');
});
return Widget.Box({
class_name: "media-indicator-current-media-info",
hpack: "center",
@@ -11,10 +35,15 @@ const MediaInfo = (curPlayer) => {
children: [
Widget.Label({
truncate: "end",
max_width_chars: 21,
max_width_chars: 35,
wrap: true,
class_name: "media-indicator-current-song-name-label",
label: curPlayer["track-title"],
setup: (self) => {
self.hook(curPlayer, () => {
console.log('did change')
return (self.label = curPlayer.value["track-title"]);
});
},
}),
],
}),
@@ -25,9 +54,14 @@ const MediaInfo = (curPlayer) => {
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
max_width_chars: 35,
class_name: "media-indicator-current-song-author-label",
label: curPlayer["track-artists"].join(", "),
setup: (self) => {
self.hook(curPlayer, () => {
console.log(JSON.stringify(curPlayer, null, 2));
return (self.label = curPlayer.value["track-title"]);
});
},
}),
],
}),
@@ -38,9 +72,13 @@ const MediaInfo = (curPlayer) => {
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
max_width_chars: 40,
class_name: "media-indicator-current-song-album-label",
label: curPlayer["track-album"],
setup: (self) => {
self.hook(curPlayer, () => {
return (self.label = curPlayer.value["track-album"]);
});
},
}),
],
}),

343
modules/menus/media/index.bkup.js
View File

@@ -1,343 +0,0 @@
const media = await Service.import("mpris");
import DropdownMenu from "../DropdownMenu.js";
import icons from "../../icons/index.js";
media.cacheCoverArt = false;
export default () => {
const activePlayer = Variable(media.players[0]);
media.connect("changed", (value) => {
const statusOrder = {
Playing: 1,
Paused: 2,
Stopped: 3,
};
if (value.players.length === 0) {
activePlayer.value = media.players[0];
return;
}
const isPlaying = value.players.find(
(p) => p["play-back-status"] === "Playing",
);
if (isPlaying) {
activePlayer.value = value.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
}
});
const isLoopActive = (player) => {
return player["loop-status"] !== null &&
["track", "playlist"].includes(player["loop-status"].toLowerCase())
? "active"
: "";
};
const isShuffleActive = (player) => {
return player["shuffle-status"] !== null && player["shuffle-status"]
? "active"
: "";
};
return DropdownMenu({
name: "mediamenu",
transition: "crossfade",
fixed: true,
minWidth: 550,
child: Widget.Box({
class_name: "media-indicator-container",
vertical: true,
hexpand: true,
vexpand: true,
child: Widget.Box({
class_name: "media-indicator-items",
vexpand: true,
hexpand: true,
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-player-info",
vpack: "center",
hexpand: true,
setup: (self) => {
self.hook(activePlayer, () => {
self.hook(media, () => {
const curPlayer = activePlayer.value;
const albumCover = (player) => {
if (
typeof player.track_cover_url === "string" &&
player.track_cover_url.length > 0
) {
return [
Widget.Box({
vexpand: false,
vpack: "center",
class_name: "media-indicator-current-album-cover",
css: `background-image: url("${curPlayer.track_cover_url}")`,
}),
];
}
return [];
};
if (curPlayer && curPlayer.play_back_status !== "Stopped") {
return (self.children = [
...albumCover(curPlayer),
Widget.Box({
class_name: "media-indicator-right-section",
hpack: "center",
hexpand: true,
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-media-info",
hpack: "center",
hexpand: true,
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-song-name",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
max_width_chars: 21,
wrap: true,
class_name:
"media-indicator-current-song-name-label",
label: curPlayer["track-title"],
}),
],
}),
Widget.Box({
class_name:
"media-indicator-current-song-author",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
class_name:
"media-indicator-current-song-author-label",
label:
curPlayer["track-artists"].join(", "),
}),
],
}),
Widget.Box({
class_name:
"media-indicator-current-song-album",
hpack: "center",
children: [
Widget.Label({
truncate: "end",
wrap: true,
max_width_chars: 25,
class_name:
"media-indicator-current-song-album-label",
label: curPlayer["track-album"],
}),
],
}),
],
}),
Widget.Box({
class_name:
"media-indicator-current-player-controls",
vertical: true,
children: [
Widget.Box({
class_name: "media-indicator-current-controls",
hpack: "center",
children: [
Widget.Box({
class_name:
"media-indicator-control shuffle",
children: [
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.shuffle_status !== null
? curPlayer.shuffle_status
? "Shuffling"
: "Not Shuffling"
: null,
hasTooltip: true,
on_primary_click: () =>
curPlayer.shuffle(),
class_name: `media-indicator-control-button shuffle ${isShuffleActive(curPlayer)} ${curPlayer.shuffle_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(
icons.mpris.shuffle["enabled"],
),
}),
],
}),
Widget.Box({
class_name: `media-indicator-control prev ${curPlayer.can_go_prev}`,
children: [
Widget.Button({
hpack: "center",
on_primary_click: () =>
curPlayer.previous(),
class_name: `media-indicator-control-button prev ${curPlayer.can_go_prev ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.prev),
}),
],
}),
Widget.Box({
class_name: "media-indicator-control play",
children: [
Widget.Button({
hpack: "center",
on_primary_click: () =>
curPlayer.playPause(),
class_name: `media-indicator-control-button play ${curPlayer.can_play ? "enabled" : "disabled"}`,
child: Widget.Icon(
icons.mpris[
curPlayer.play_back_status.toLowerCase()
],
),
}),
],
}),
Widget.Box({
class_name: `media-indicator-control next`,
children: [
Widget.Button({
hpack: "center",
on_primary_click: () =>
curPlayer.next(),
class_name: `media-indicator-control-button next ${curPlayer.can_go_next ? "enabled" : "disabled"}`,
child: Widget.Icon(icons.mpris.next),
}),
],
}),
Widget.Box({
class_name: "media-indicator-control loop",
children: [
Widget.Button({
hpack: "center",
tooltip_text:
curPlayer.loop_status !== null
? `Looping: ${curPlayer.loop_status}`
: null,
hasTooltip: true,
on_primary_click: () =>
curPlayer.loop(),
class_name: `media-indicator-control-button loop ${isLoopActive(curPlayer)} ${curPlayer.loop_status !== null ? "enabled" : "disabled"}`,
child: Widget.Icon(
curPlayer.loop_status === null
? icons.mpris.loop["none"]
: icons.mpris.loop[
curPlayer.loop_status?.toLowerCase()
],
),
}),
],
}),
],
}),
],
}),
Widget.Box({
class_name: "media-indicator-current-progress-bar",
hexpand: true,
children: [
Widget.Box({
hexpand: true,
child: Widget.Slider({
hexpand: true,
tooltip_text: "yoyo",
class_name: "menu-slider media progress",
draw_value: false,
on_change: ({ value }) =>
(curPlayer.position =
value * curPlayer.length),
visible: curPlayer
.bind("length")
.as((l) => l > 0),
setup: (self) => {
const update = () => {
if (
typeof curPlayer.position ===
"number" &&
curPlayer.position > 0
) {
const value =
curPlayer.position / curPlayer.length;
self.value = value > 0 ? value : 0;
}
return 0;
};
self.hook(curPlayer, update);
self.hook(curPlayer, update, "position");
self.poll(1000, update);
function updateTooltip() {
const curHour = Math.floor(
curPlayer.position / 3600,
);
const curMin = Math.floor(
(curPlayer.position % 3600) / 60,
);
const curSec = Math.floor(
curPlayer.position % 60,
);
if (
typeof curPlayer.position ===
"number" &&
curPlayer.position >= 0
) {
// WARN: These nested ternaries are absolutely disgusting lol
self.tooltip_text = `${
curHour > 0
? (curHour < 10
? "0" + curHour
: curHour) + ":"
: ""
}${curMin < 10 ? "0" + curMin : curMin}:${curSec < 10 ? "0" + curSec : curSec}`;
} else {
self.tooltip_text = `00:00`;
}
}
self.poll(1000, updateTooltip);
self.hook(curPlayer, updateTooltip);
},
}),
}),
],
}),
],
}),
]);
}
return (self.children = [
Widget.Box({
class_name: "media-indicator-none",
hpack: "center",
vpack: "center",
expand: true,
child: Widget.Label({
class_name: "media-indicator-none-label dim",
label: "No Media Is Currently Playing",
}),
}),
]);
});
});
},
}),
],
}),
}),
});
};

83
modules/menus/media/media.js
View File

@@ -1,21 +1,12 @@
const media = await Service.import("mpris");
import { AlbumCover } from "./components/albumcover.js";
import { MediaInfo } from "./components/mediainfo.js";
import { Controls } from "./components/controls.js";
import { Bar } from "./components/bar.js";
const Media = () => {
return Widget.Box({
class_name: "menu-section-container",
children: [
Widget.Box({
class_name: "menu-items-section",
vertical: false,
child: Widget.Box({
class_name: "menu-content",
setup: (self) => {
let curPlayer = media.players[0];
self.hook(media, () => {
const curPlayer = Variable("");
media.connect("changed", () => {
const statusOrder = {
Playing: 1,
Paused: 2,
@@ -27,46 +18,58 @@ const Media = () => {
);
if (isPlaying) {
curPlayer = media.players.sort(
curPlayer.value = media.players.sort(
(a, b) =>
statusOrder[a["play-back-status"]] -
statusOrder[b["play-back-status"]],
)[0];
)[0].name;
}
});
const getPlayerInfo = (plyr) => {
return plyr.players.find(p => p.name === curPlayer.value)
}
if (
media.players.length &&
curPlayer &&
curPlayer.play_back_status !== "Stopped"
) {
return (self.children = [
AlbumCover(curPlayer),
return Widget.Box({
class_name: "menu-section-container",
children: [
Widget.Box({
class_name: "menu-items-section",
vertical: false,
child: Widget.Box({
class_name: "menu-content",
children: [
Widget.Box({
class_name: "media-content",
child: Widget.Box({
class_name: "media-indicator-right-section",
hpack: "fill",
hexpand: true,
vertical: true,
children: [
MediaInfo(curPlayer),
Controls(curPlayer),
Bar(curPlayer),
children: [MediaInfo(), Controls(), Bar(getPlayerInfo)],
}),
}),
],
}),
]);
}
setup: (self) => {
self.hook(media, () => {
self.css = `background-image: linear-gradient(
rgba(30, 30, 46, 0.85),
rgba(30, 30, 46, 0.9),
#1e1e2e 40em), url("${getPlayerInfo(media).track_cover_url}");
`;
return (self.children = [
Widget.Box({
class_name: "media-indicator-none",
hpack: "center",
hexpand: true,
vpack: "center",
child: Widget.Label({
class_name: "media-indicator-none-label dim",
label: "No Media Is Currently Playing",
}),
}),
]);
// return (self.children = [
// Widget.Box({
// class_name: "media-indicator-none",
// hpack: "center",
// hexpand: true,
// vpack: "center",
// child: Widget.Label({
// class_name: "media-indicator-none-label dim",
// label: "No Media Is Currently Playing",
// }),
// }),
// ]);
});
},
}),

10
modules/menus/power/verification.js
View File

@@ -7,6 +7,9 @@ export default () =>
transition: "crossfade",
child: Widget.Box({
class_name: "verification",
child: Widget.Box({
class_name: "verification-content",
expand: true,
vertical: true,
children: [
Widget.Box({
@@ -15,11 +18,13 @@ export default () =>
children: [
Widget.Label({
class_name: "title",
label: powermenu.bind("title").as(t => t.toUpperCase()),
label: powermenu.bind("title").as((t) => t.toUpperCase()),
}),
Widget.Label({
class_name: "desc",
label: powermenu.bind("title").as(p => `Are you sure you want to ${p.toLowerCase()}?`),
label: powermenu
.bind("title")
.as((p) => `Are you sure you want to ${p.toLowerCase()}?`),
}),
],
}),
@@ -43,4 +48,5 @@ export default () =>
}),
],
}),
}),
});

27
scss/menus/dashboard.scss
View File

@@ -147,25 +147,40 @@
&.input {
background: $pink;
}
&.wifi:hover {
background: transparentize($mauve, 0.7);
}
&.bluetooth:hover {
background: transparentize($sky, 0.7);
}
&.notifications:hover {
background: transparentize($yellow, 0.7);
}
&.playback:hover {
background: transparentize($maroon, 0.7);
}
&.input:hover {
background: transparentize($pink, 0.7);
}
&:hover {
background: $surface2;
background: $surface1;
}
&.disabled {
background: $surface2;
&.wifi:hover {
background: $mauve;
background: transparentize($mauve, 0.7);
}
&.bluetooth:hover {
background: $sky;
background: transparentize($sky, 0.7);
}
&.notifications:hover {
background: $yellow;
background: transparentize($yellow, 0.7);
}
&.playback:hover {
background: $maroon;
background: transparentize($maroon, 0.7);
}
&.input:hover {
background: $pink;
background: transparentize($pink, 0.7);
}
}
}

23
scss/menus/media.scss
View File

@@ -8,22 +8,19 @@
margin: 1.3em 0em;
}
.media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
.menu-items-section {
border-radius: 0.4em;
padding: 0em;
}
.media-indicator-current-album-cover {
border-radius: 0.25em;
min-width: 9.5em;
min-height: 9.5em;
background-size: contain;
background-repeat: no-repeat;
.menu-content {
border-radius: 0.4em;
background-size: cover;
background-position: center;
}
.media-indicator-right-section {
margin-left: 2em;
.media-content {
margin: 1em;
}
.media-indicator-current-song-name {
@@ -66,7 +63,7 @@
border-radius: 0.2rem;
&.disabled {
background: $surface0;
background: $surface2;
}
&.enabled {
@@ -91,7 +88,7 @@
margin-top: 1rem;
trough {
background: $surface0;
background: $surface2;
border-radius: 0.3rem;
highlight,

48
scss/menus/power.scss
View File

@@ -10,11 +10,18 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
@include floating-widget;
background: $crust;
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
.verification-content {
background: $base;
border-radius: 0.4em;
padding: 1em;
}
.text-box {
margin-bottom: 0.3em;
@@ -33,45 +40,50 @@ window#verification .verification {
}
.verification-button {
background: $crust;
background: $base;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border: 0.15em solid;
border-color: $crust;
border-radius: 0.3em;
opacity: 1;
transition: border-color 0.2s ease-in-out;
transition: opacity .3s ease-in-out;
&:hover {
&.bar-verification_yes {
border-color: $green;
transition: border-color 0.2s ease-in-out;
background-color: $green;
}
&.bar-verification_no {
border-color: $red;
transition: border-color 0.2s ease-in-out;
background-color: $red;
}
&:hover {
&.bar-verification_yes {
background: $lavender;
transition: background-color 0.2s ease-in-out;
}
&.bar-verification_no {
background: $lavender;
transition: background-color 0.2s ease-in-out;
}
}
&:focus {
&.bar-verification_yes{
border-color: $green;
transition: border-color 0.2s ease-in-out;
background: $lavender;
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
border-color: $red;
transition: border-color 0.2s ease-in-out;
background: $lavender;
transition: background 0.2s ease-in-out;
}
}
&:active {
&.bar-verification_yes {
border-color: rgba($green, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgb($lavender, 0.4);
transition: background 0.2s ease-in-out;
}
&.bar-verification_no {
border-color: rgba($red, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgb($lavender, 0.4);
transition: background 0.2s ease-in-out;
}
image {
@@ -85,10 +97,10 @@ window#verification .verification {
}
}
.bar-verification_no label {
color: $red;
color: $mantle;
}
.bar-verification_yes label {
color: $green;
color: $mantle;
}
}

94
style.css
View File

@@ -678,11 +678,17 @@ window#verification .verification {
color: #9278b6;
border-radius: 0.5rem;
padding: 1.5rem;
background: #11111b;
padding: 0.84em;
min-width: 20em;
min-height: 6em;
font-size: 1.3em;
}
window#verification .verification .verification-content {
background: #1e1e2e;
border-radius: 0.4em;
padding: 1em;
}
window#verification .verification .text-box {
margin-bottom: 0.3em;
}
@@ -698,39 +704,43 @@ window#verification .verification .text-box .desc {
padding: 1em 3em;
}
window#verification .verification .verification-button {
background: #11111b;
background: #1e1e2e;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border: 0.15em solid;
border-color: #11111b;
border-radius: 0.3em;
opacity: 1;
transition: border-color 0.2s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
window#verification .verification .verification-button.bar-verification_yes {
background-color: #a6e3a1;
}
window#verification .verification .verification-button.bar-verification_no {
background-color: #f38ba8;
}
window#verification .verification .verification-button:hover.bar-verification_yes {
border-color: #a6e3a1;
transition: border-color 0.2s ease-in-out;
background: #b4befe;
transition: background-color 0.2s ease-in-out;
}
window#verification .verification .verification-button:hover.bar-verification_no {
border-color: #f38ba8;
transition: border-color 0.2s ease-in-out;
background: #b4befe;
transition: background-color 0.2s ease-in-out;
}
window#verification .verification .verification-button:focus.bar-verification_yes {
border-color: #a6e3a1;
transition: border-color 0.2s ease-in-out;
background: #b4befe;
transition: background 0.2s ease-in-out;
}
window#verification .verification .verification-button:focus.bar-verification_no {
border-color: #f38ba8;
transition: border-color 0.2s ease-in-out;
background: #b4befe;
transition: background 0.2s ease-in-out;
}
window#verification .verification .verification-button:active.bar-verification_yes {
border-color: rgba(166, 227, 161, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgba(180, 190, 254, 0.4);
transition: background 0.2s ease-in-out;
}
window#verification .verification .verification-button:active.bar-verification_no {
border-color: rgba(243, 139, 168, 0.4);
transition: border-color 0.2s ease-in-out;
background: rgba(180, 190, 254, 0.4);
transition: background 0.2s ease-in-out;
}
window#verification .verification .verification-button:active image {
opacity: 0.3;
@@ -741,10 +751,10 @@ window#verification .verification .verification-button:active label {
transition: opacity 0.3s ease-in-out;
}
window#verification .verification .bar-verification_no label {
color: #f38ba8;
color: #181825;
}
window#verification .verification .bar-verification_yes label {
color: #a6e3a1;
color: #181825;
}
window#powermenu .powermenu {
@@ -992,20 +1002,17 @@ window#powermenu .powermenu.box {
.menu-items-container.media .menu-section-container {
margin: 1.3em 0em;
}
.menu-items-container.media .media-indicator-items {
margin: 1rem;
margin-bottom: 1.3rem;
.menu-items-container.media .menu-items-section {
border-radius: 0.4em;
padding: 0em;
}
.menu-items-container.media .media-indicator-current-album-cover {
border-radius: 0.25em;
min-width: 9.5em;
min-height: 9.5em;
background-size: contain;
background-repeat: no-repeat;
.menu-items-container.media .menu-content {
border-radius: 0.4em;
background-size: cover;
background-position: center;
}
.menu-items-container.media .media-indicator-right-section {
margin-left: 2em;
.menu-items-container.media .media-content {
margin: 1em;
}
.menu-items-container.media .media-indicator-current-song-name {
margin-bottom: 0.75rem;
@@ -1040,7 +1047,7 @@ window#powermenu .powermenu.box {
border-radius: 0.2rem;
}
.menu-items-container.media .media-indicator-control-button.disabled {
background: #313244;
background: #585b70;
}
.menu-items-container.media .media-indicator-control-button.enabled {
background: #b4befe;
@@ -1058,7 +1065,7 @@ window#powermenu .powermenu.box {
margin-top: 1rem;
}
.menu-items-container.media .menu-slider.media.progress trough {
background: #313244;
background: #585b70;
border-radius: 0.3rem;
}
.menu-items-container.media .menu-slider.media.progress trough highlight,
@@ -1434,26 +1441,41 @@ window#powermenu .powermenu.box {
.dashboard-content-items .controls-container button.input {
background: #f5c2e7;
}
.dashboard-content-items .controls-container button.wifi:hover {
background: rgba(203, 166, 247, 0.3);
}
.dashboard-content-items .controls-container button.bluetooth:hover {
background: rgba(137, 220, 235, 0.3);
}
.dashboard-content-items .controls-container button.notifications:hover {
background: rgba(249, 226, 175, 0.3);
}
.dashboard-content-items .controls-container button.playback:hover {
background: rgba(235, 160, 172, 0.3);
}
.dashboard-content-items .controls-container button.input:hover {
background: rgba(245, 194, 231, 0.3);
}
.dashboard-content-items .controls-container button:hover {
background: #585b70;
background: #45475a;
}
.dashboard-content-items .controls-container button.disabled {
background: #585b70;
}
.dashboard-content-items .controls-container button.disabled.wifi:hover {
background: #cba6f7;
background: rgba(203, 166, 247, 0.3);
}
.dashboard-content-items .controls-container button.disabled.bluetooth:hover {
background: #89dceb;
background: rgba(137, 220, 235, 0.3);
}
.dashboard-content-items .controls-container button.disabled.notifications:hover {
background: #f9e2af;
background: rgba(249, 226, 175, 0.3);
}
.dashboard-content-items .controls-container button.disabled.playback:hover {
background: #eba0ac;
background: rgba(235, 160, 172, 0.3);
}
.dashboard-content-items .controls-container button.disabled.input:hover {
background: #f5c2e7;
background: rgba(245, 194, 231, 0.3);
}
.dashboard-content-items .stats-container {
margin-top: 0em;

2
style.css.map
View File

File diff suppressed because one or more lines are too long