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

Implement framework for custom modules and out of the box custom modules as well. (#213)

Browse Source 
* Create declarative module scaffolding

* Added ram module (WIP)

* Updates to options, styling and more.

* Added function for styling custom modules.

* Added utility functions and cleaned up code

* Type and fn name updates.

* Update module utils to handle absent values.

* Added icon color in style2 that was missing.

* Linted utils.ts

* Add CPU module and update RAM module to use /proc/meminfo.

* Added disk storage module.

* Consolidate code

* Added netstat module and removed elements from systray default ignore list.

* Added keyboard layout module.

* Fix hook types and move module to customModules directory

* Added updates modules.

* Spacing updates

* Added weather module.

* Added power menu and power module in bar. Increased update default interval to 6 ours.

* Updated styling of bar buttons, made power menu label toggleable, etc.

* Consolidate code and add dynamic tooltips based on data being used.

* Make default custom mogules matugen compatible

* Update base theme

* Fix custom module background coloring

* Remove testing opacity.

* Update themes to account for new modules

* Update nix stuff for libgtop (Need someone to test this)

* Update nix

* Update fractions to multiplications

* Move styling in style directory

* Implement a polling framework for variables that can dynamically adjust polling intervals.

* Netstat module updates when interface name is changed.

* Readme update
This commit is contained in:
Jas Singh
2024-09-02 21:10:59 -07:00
committed by GitHub
parent 4f009b9978
commit 4cdda38604
107 changed files with 6444 additions and 1482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
scss/main.scss
View File

@@ -32,6 +32,7 @@
//modules - menus
@import "style/menus/menu";
@import "style/menus/power";
@import "style/menus/powerdropdown";
@import "style/menus/audiomenu";
@import "style/menus/network";
@import "style/menus/bluetooth";
@@ -49,3 +50,5 @@
//settings dialog
@import "style/settings/dialog";
@import "style/customModules/style";

2
scss/style/bar/audio.scss
View File

@@ -13,7 +13,7 @@
.bar-button-icon.volume {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-volume-spacing;

14
scss/style/bar/bar.scss
View File

@@ -1,6 +1,6 @@
.bar {
* {
font-size: $font-size * $bar-scaling/100;
font-size: $font-size * $bar-scaling * 0.01;
}
.bar-panel-container {
@@ -12,24 +12,24 @@
.bar-panel {
$bar-opacity-ratio: $bar-opacity / 100;
$bar-opacity-ratio: $bar-opacity * 0.01;
$transparency-value: 1 - $bar-opacity-ratio;
background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
border-radius: if($bar-floating, $bar-border_radius, 0em);
}
}
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity / 100;
$bar-button-background-opacity-ratio: $bar-buttons-background_opacity * 0.01;
$transparency-value: 1 - $bar-button-background-opacity-ratio;
$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity / 100;
$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity * 0.01;
$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
.bar_item_box_visible {
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
opacity: $bar-buttons-opacity * 0.01;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
&.style3 {
@@ -180,6 +180,10 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value);
color: $bar-buttons-clock-icon_background;
}
.bar-button-icon {
opacity: 0.5;
}
}
}
}

2
scss/style/bar/battery.scss
View File

@@ -11,7 +11,7 @@
.bar-button-icon.battery {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-battery-spacing;

2
scss/style/bar/bluetooth.scss
View File

@@ -23,7 +23,7 @@
.bar-button-icon.bluetooth {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-bluetooth-spacing;

2
scss/style/bar/clock.scss
View File

@@ -12,7 +12,7 @@
.bar-button-icon.clock {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;

2
scss/style/bar/media.scss
View File

@@ -12,7 +12,7 @@
.bar-button-icon.media {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;

16
scss/style/bar/menu.scss
View File

@@ -3,6 +3,22 @@
font-size: 1.3em;
}
.bar_item_box_visible.style2.dashboard {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
.bar-menu_label {
color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
}
&:hover {
background: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-icon);
.bar-menu_label {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-background);
}
}
}
.style2 .bar-menu_label {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

2
scss/style/bar/network.scss
View File

@@ -11,7 +11,7 @@
.bar-button-icon.network {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-network-spacing;

2
scss/style/bar/notifications.scss
View File

@@ -13,7 +13,7 @@
.bar-button-icon.notifications {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-notifications-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-notifications-spacing;

2
scss/style/bar/window_title.scss
View File

@@ -11,7 +11,7 @@
.bar-button-icon.windowtitle {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
background: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-windowtitle-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-windowtitle-spacing;

6
scss/style/common/general.scss
View File

@@ -23,7 +23,7 @@
}
window.popup {
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
menuitem {
label {
@@ -56,13 +56,13 @@ tooltip {
all: unset;
}
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
font-size: 1.1em;
>*>* {
padding: 0.6em;
border-radius: $bar-menus-border-radius/2;
border-radius: $bar-menus-border-radius * 0.5;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-tooltip-text);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-tooltip-background);
}

255
scss/style/customModules/style.scss Normal file
View File

@@ -0,0 +1,255 @@
/*
* #################################
* # Default Styling #
* #################################
*/
.bar-button-label {
margin-left: 0.5em;
color: $text;
}
.module-icon {
font-size: 1em;
}
.style2 {
.bar-button-icon {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: 0.5em;
background: $text;
color: $bar-background;
}
.bar-button-label {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: 0.5em;
margin-left: 0em;
}
}
/*
* #################################
* # Styling Function #
* #################################
*/
@mixin styleModule($class, $textColor, $iconColor, $iconBackground, $labelBackground, $spacing, $fontSize: 1em) {
.bar_item_box_visible {
&.#{$class} {
background: $labelBackground;
&.style2 {
background: transparent;
}
&:hover {
opacity: 0.5;
}
}
}
.module-label.#{$class} {
color: if($bar-buttons-monochrome, $bar-buttons-text, $textColor);
margin-left: $spacing;
border-radius: $bar-buttons-radius;
}
.module-icon.#{$class} {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $iconColor);
font-size: if($fontSize, $fontSize, 1em);
}
.style2 {
.module-icon.#{$class} {
background: if($bar-buttons-monochrome, $bar-buttons-icon, $iconBackground);
padding-right: $spacing;
color: if($bar-buttons-monochrome, $bar-buttons-background, $iconColor);
}
.module-label.#{$class} {
background: $labelBackground;
padding-left: $spacing * 1.5;
margin-left: 0em;
border-top-left-radius: 0em;
border-bottom-left-radius: 0em;
}
}
}
/*
* #################################
* # Ram Module Styling #
* #################################
*/
@include styleModule( //
// class name
'ram',
// label color
$bar-buttons-modules-ram-text,
// icon color
$bar-buttons-modules-ram-icon,
// icon background if split style is used
$bar-buttons-modules-ram-icon_background,
// label background
$bar-buttons-modules-ram-background,
// inner spacing
$bar-buttons-modules-ram-spacing //
);
/*
* #################################
* # Cpu Module Styling #
* #################################
*/
@include styleModule( //
// class name
'cpu',
// label color
$bar-buttons-modules-cpu-text,
// icon color
$bar-buttons-modules-cpu-icon,
// icon background if split style is used
$bar-buttons-modules-cpu-icon_background,
// label background
$bar-buttons-modules-cpu-background,
// inner spacing
$bar-buttons-modules-cpu-spacing,
// custom font size
1.05em //
);
/*
* #################################
* # Storage Module Styling #
* #################################
*/
@include styleModule( //
// class name
'storage',
// label color
$bar-buttons-modules-storage-text,
// icon color
$bar-buttons-modules-storage-icon,
// icon background if split style is used
$bar-buttons-modules-storage-icon_background,
// label background
$bar-buttons-modules-storage-background,
// inner spacing
$bar-buttons-modules-storage-spacing,
// custom font size
1.3em //
);
/*
* #################################
* # Netstat Module Styling #
* #################################
*/
@include styleModule( //
// class name
'netstat',
// label color
$bar-buttons-modules-netstat-text,
// icon color
$bar-buttons-modules-netstat-icon,
// icon background if split style is used
$bar-buttons-modules-netstat-icon_background,
// label background
$bar-buttons-modules-netstat-background,
// inner spacing
$bar-buttons-modules-netstat-spacing,
// custom font size
1.2em //
);
/*
* #################################
* # KB Layout Module Styling #
* #################################
*/
@include styleModule( //
// class name
'kblayout',
// label color
$bar-buttons-modules-kbLayout-text,
// icon color
$bar-buttons-modules-kbLayout-icon,
// icon background if split style is used
$bar-buttons-modules-kbLayout-icon_background,
// label background
$bar-buttons-modules-kbLayout-background,
// inner spacing
$bar-buttons-modules-kbLayout-spacing,
// custom font size
1.2em //
);
/*
* #################################
* # Updates Module Styling #
* #################################
*/
@include styleModule( //
// class name
'updates',
// label color
$bar-buttons-modules-updates-text,
// icon color
$bar-buttons-modules-updates-icon,
// icon background if split style is used
$bar-buttons-modules-updates-icon_background,
// label background
$bar-buttons-modules-updates-background,
// inner spacing
$bar-buttons-modules-updates-spacing,
// custom font size
1.2em //
);
/*
* #################################
* # Weather Module Styling #
* #################################
*/
@include styleModule( //
// class name
'weather-custom',
// label color
$bar-buttons-modules-weather-text,
// icon color
$bar-buttons-modules-weather-icon,
// icon background if split style is used
$bar-buttons-modules-weather-icon_background,
// label background
$bar-buttons-modules-weather-background,
// inner spacing
$bar-buttons-modules-weather-spacing,
// custom font size
1.2em //
);
/*
* #################################
* # Power Module Styling #
* #################################
*/
@include styleModule( //
// class name
'powermodule',
// label color
$red,
// icon color
$bar-buttons-modules-power-icon,
// icon background if split style is used
$bar-buttons-modules-power-icon_background,
// label background
$bar-buttons-modules-power-background,
// inner spacing
$bar-buttons-modules-power-spacing,
// custom font size
1.3em //
);

6
scss/style/menus/audiomenu.scss
View File

@@ -1,17 +1,17 @@
.menu-items-container.audio {
min-width: 18em * $bar-menus-menu-volume-scaling/100;
min-width: 18em * $bar-menus-menu-volume-scaling * 0.01;
@import "./menu.scss";
* {
font-size: $font-size * $bar-menus-menu-volume-scaling/100;
font-size: $font-size * $bar-menus-menu-volume-scaling * 0.01;
}
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
.menu-items {
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
}
.menu-dropdown-label.audio {

10
scss/style/menus/bluetooth.scss
View File

@@ -1,5 +1,5 @@
.menu-items-container.bluetooth * {
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
}
@import "./menu.scss";
@@ -7,13 +7,13 @@
.menu-items.bluetooth {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling/100;
opacity: $bar-menus-opacity * 0.01;
font-size: $font-size * $bar-menus-menu-bluetooth-scaling * 0.01;
}
.menu-items-container.bluetooth {
min-width: 18em * $bar-menus-menu-bluetooth-scaling/100;
min-width: 18em * $bar-menus-menu-bluetooth-scaling * 0.01;
font-size: 1.3em;
@@ -36,7 +36,7 @@
.menu-items-section {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-bluetooth-card-color);
min-height: 20em * $bar-menus-menu-bluetooth-scaling/100;
min-height: 20em * $bar-menus-menu-bluetooth-scaling * 0.01;
font-size: 1em;
}

4
scss/style/menus/calendar.scss
View File

@@ -1,5 +1,5 @@
.calendar-menu-content * {
font-size: $font-size * $bar-menus-menu-clock-scaling/100;
font-size: $font-size * $bar-menus-menu-clock-scaling * 0.01;
}
.calendar-content-container {
@@ -10,7 +10,7 @@
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
border-radius: $bar-menus-border-radius;
margin-right: 0.5em;
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
}
.calendar-menu-item-container {

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

@@ -1,5 +1,5 @@
.dashboard-menu-content * {
font-size: $font-size * $bar-menus-menu-dashboard-scaling/100;
font-size: $font-size * $bar-menus-menu-dashboard-scaling * 0.01;
}
.dashboard-content-items {
@@ -8,7 +8,7 @@
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
border-radius: $bar-menus-border-radius;
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
button {
border-radius: 0.4em;

8
scss/style/menus/energy.scss
View File

@@ -1,18 +1,18 @@
.menu-items-container.energy * {
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
}
.menu-items.energy {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-battery-scaling/100;
opacity: $bar-menus-opacity * 0.01;
font-size: $font-size * $bar-menus-menu-battery-scaling * 0.01;
}
@import "./menu.scss";
.menu-items-container.energy {
min-width: 18em * $bar-menus-menu-battery-scaling/100;
min-width: 18em * $bar-menus-menu-battery-scaling * 0.01;
.menu-label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);

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

@@ -1,17 +1,17 @@
.menu-items.media {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
}
.menu-items-container.media {
* {
font-size: $font-size * $bar-menus-menu-media-scaling/100;
font-size: $font-size * $bar-menus-menu-media-scaling * 0.01;
}
min-width: 23em * $bar-menus-menu-media-scaling/100;
min-height: 10em * $bar-menus-menu-media-scaling/100;
min-width: 23em * $bar-menus-menu-media-scaling * 0.01;
min-height: 10em * $bar-menus-menu-media-scaling * 0.01;
.menu-section-container {
margin: 1em 0em;

8
scss/style/menus/network.scss
View File

@@ -1,5 +1,5 @@
.menu-items-container.network * {
font-size: $font-size * $bar-menus-menu-network-scaling/100;
font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
}
@import "./menu.scss";
@@ -7,12 +7,12 @@
.menu-items.network {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
opacity: $bar-menus-opacity/100;
font-size: $font-size * $bar-menus-menu-network-scaling/100;
opacity: $bar-menus-opacity * 0.01;
font-size: $font-size * $bar-menus-menu-network-scaling * 0.01;
}
.menu-items-container.network {
min-width: 18em * $bar-menus-menu-network-scaling/100;
min-width: 18em * $bar-menus-menu-network-scaling * 0.01;
font-size: 1.3em;
.menu-items-section {

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

@@ -1,16 +1,16 @@
.notification-menu-content * {
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
}
.notification-card-container.menu {
margin: 0em;
min-width: 30.6em * $bar-menus-menu-notifications-scaling/100;
min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling/100;
min-width: 30.6em * $bar-menus-menu-notifications-scaling * 0.01;
min-height: $bar-menus-menu-notifications-height * $bar-menus-menu-notifications-scaling * 0.01;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
border-radius: $bar-menus-border-radius;
margin-right: 0.45em;
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
.window-content.notificationsmenu-window {
margin-right: 0.50em;
@@ -32,8 +32,8 @@
.notification-card.menu {
background: $notification-background;
min-width: 26.2em * $bar-menus-menu-notifications-scaling/100;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
min-width: 26.2em * $bar-menus-menu-notifications-scaling * 0.01;
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
border: 0.15em solid $notification-border;
border-radius: 0em;
border-bottom-left-radius: $notification-border_radius;
@@ -55,7 +55,7 @@
.menu-label.notifications {
margin: 0em;
font-size: $font-size * $bar-menus-menu-notifications-scaling/100;
font-size: $font-size * $bar-menus-menu-notifications-scaling * 0.01;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-notifications-label);
}
@@ -126,11 +126,11 @@
}
.bell {
font-size: 10em * $bar-menus-menu-notifications-scaling/100;
font-size: 10em * $bar-menus-menu-notifications-scaling * 0.01;
}
.message {
font-size: 1.5em * $bar-menus-menu-notifications-scaling/100;
font-size: 1.5em * $bar-menus-menu-notifications-scaling * 0.01;
}
}

8
scss/style/menus/power.scss
View File

@@ -8,7 +8,7 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
* {
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling/100;
font-size: $font-size * $bar-menus-menu-dashboard-confirmation_scaling * 0.01;
}
@include floating-widget;
@@ -17,11 +17,11 @@ window#verification .verification {
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
.verification-content {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
border-radius: $bar-menus-border-radius/2;
border-radius: $bar-menus-border-radius * 0.5;
padding: 1em;
}
@@ -46,7 +46,7 @@ window#verification .verification {
background: $bar-menus-buttons-default;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border-radius: $bar-menus-border-radius/2;
border-radius: $bar-menus-border-radius * 0.5;
opacity: 1;
transition: border-color 0.2s ease-in-out;
transition: opacity .3s ease-in-out;

136
scss/style/menus/powerdropdown.scss Normal file
View File

@@ -0,0 +1,136 @@
.menu-items-container.power-dropdown * {
font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
}
@import "./menu.scss";
.menu-items.power-dropdown {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-power-background-color);
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-power-border-color);
opacity: $bar-menus-opacity * 0.01;
font-size: $font-size * $bar-menus-menu-power-scaling * 0.01;
}
.menu-items-container.power-dropdown {
&.reboot {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
}
&.logout {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
}
&.sleep {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
}
min-height: 3.5em * $bar-menus-menu-power-scaling * 0.01;
font-size: 1.3em;
margin: 1em;
.menu-items-section {
padding-bottom: 1.5em;
}
.power-menu-button {
border-radius: $bar-menus-border-radius * 0.6;
// This doubles the border-radius so it doesn't show up as
// an artifact behind the button as that has a radius as well
border-top-left-radius: $bar-menus-border-radius * 2;
border-bottom-left-radius: $bar-menus-border-radius * 2;
&.no-label {
// This doubles the border-radius so it doesn't show up as
// an artifact behind the button as that has a radius as well
border-top-right-radius: $bar-menus-border-radius * 2;
border-bottom-right-radius: $bar-menus-border-radius * 2;
}
&:hover {
opacity: 0.4;
}
&:not(:last-child) {
margin-bottom: 1.5em;
}
.power-button-label {
font-size: 1.1em;
}
&.shutdown {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-shutdown-background);
}
&.reboot {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-restart-background);
}
&.logout {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-logout-background);
}
&.sleep {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-power-buttons-sleep-background);
}
.show-label {
padding-right: 1em;
}
.no-label {
border-top-right-radius: $bar-menus-border-radius * 0.35;
border-bottom-right-radius: $bar-menus-border-radius * 0.35;
}
.shutdown-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-text);
}
.reboot-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-text);
}
.logout-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-text);
}
.sleep-label {
color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-text);
}
}
label {
margin-left: 1em;
}
image {
min-width: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
min-height: 3.75rem * $bar-menus-menu-power-scaling * 0.01;
background: $red;
border-top-left-radius: $bar-menus-border-radius * 0.35;
border-bottom-left-radius: $bar-menus-border-radius * 0.35;
font-size: 1.75em;
&.shutdown-icon {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-shutdown-icon_background);
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-shutdown-icon);
}
&.reboot-icon {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-restart-icon_background);
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-restart-icon);
}
&.logout-icon {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-logout-icon_background);
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-logout-icon);
}
&.sleep-icon {
background: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-power-buttons-sleep-icon_background);
color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-power-buttons-sleep-icon);
}
}
}

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

@@ -6,12 +6,12 @@
min-width: 26em;
min-height: 6rem;
border-radius: $notification-border_radius;
opacity: $notification-opacity/100;
opacity: $notification-opacity * 0.01;
}
.notification-card-container {
* {
font-size: $font-size * $notification-scaling/100;
font-size: $font-size * $notification-scaling * 0.01;
}
padding: 1px;

6
scss/style/osd/index.scss
View File

@@ -1,11 +1,11 @@
.indicator {
* {
font-size: $font-size * $osd-scaling/100;
font-size: $font-size * $osd-scaling * 0.01;
}
.osd-container {
margin: $osd-margins;
opacity: $osd-opacity/100;
opacity: $osd-opacity * 0.01;
}
.osd-label-container {
@@ -52,7 +52,7 @@
}
block {
border-radius: $osd-radius/2;
border-radius: $osd-radius * 0.5;
&.empty {
background: $osd-bar_empty_color;

8
scss/style/settings/dialog.scss
View File

@@ -1,5 +1,5 @@
window.settings-dialog {
opacity: $bar-menus-opacity/100;
opacity: $bar-menus-opacity * 0.01;
background-color: $bar-menus-cards;
color: $bar-menus-text;
@@ -13,8 +13,8 @@ window.settings-dialog {
.header {
background-color: transparentize($bar-menus-background, 0.1);
border-bottom-left-radius: $bar-menus-border-radius/2;
border-bottom-right-radius: $bar-menus-border-radius/2;
border-bottom-left-radius: $bar-menus-border-radius * 0.5;
border-bottom-right-radius: $bar-menus-border-radius * 0.5;
padding: $padding;
button {
@@ -347,7 +347,7 @@ dialog {
background: $bar-menus-iconbuttons-active;
min-width: 3em;
min-height: 2em;
border-radius: $bar-menus-border-radius / 2;
border-radius: $bar-menus-border-radius * 0.5;
&:disabled {
background: $bar-menus-buttons-disabled;