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

Added the ability to scale a popover. (#443)

Browse Source 
* Added the ability to scale a popover.

* Removed redundant code
This commit is contained in:
Jas Singh
2024-11-05 20:59:29 -08:00
committed by GitHub
parent b88644833d
commit 6250c2b3be
7 changed files with 714 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
options.ts
View File

@@ -383,6 +383,7 @@ const options = mkOptions(OPTIONS, {
feinttext: opt(colors.surface0), feinttext: opt(colors.surface0),
label: opt(colors.lavender), label: opt(colors.lavender),
popover: { popover: {
scaling: opt(100),
text: opt(colors.lavender), text: opt(colors.lavender),
background: opt(secondary_colors.mantle), background: opt(secondary_colors.mantle),
border: opt(secondary_colors.mantle), border: opt(secondary_colors.mantle),

75
scss/main.scss
View File

@@ -1,54 +1,55 @@
* { * {
all: unset; all: unset;
font-family: $font-name; font-family: $font-name;
font-size: $font-size; font-size: $font-size;
font-weight: $font-weight; font-weight: $font-weight;
} }
//general //general
@import "style/colors"; @import 'style/colors';
@import "style/common/common.scss"; @import 'style/common/common.scss';
@import "style/common/floating-widget.scss"; @import 'style/common/floating-widget.scss';
@import "style/common/widget-button.scss"; @import 'style/common/widget-button.scss';
@import 'style/common/popover_menu.scss';
//general styles //general styles
@import "style/common/general"; @import 'style/common/general';
//modules - bar //modules - bar
@import "style/bar/bar"; @import 'style/bar/bar';
@import "style/bar/menu"; @import 'style/bar/menu';
@import "style/bar/audio"; @import 'style/bar/audio';
@import "style/bar/media"; @import 'style/bar/media';
@import "style/bar/network"; @import 'style/bar/network';
@import "style/bar/bluetooth"; @import 'style/bar/bluetooth';
@import "style/bar/clock"; @import 'style/bar/clock';
@import "style/bar/workspace"; @import 'style/bar/workspace';
@import "style/bar/window_title"; @import 'style/bar/window_title';
@import "style/bar/systray"; @import 'style/bar/systray';
@import "style/bar/notifications"; @import 'style/bar/notifications';
@import "style/bar/power"; @import 'style/bar/power';
@import "style/bar/battery"; @import 'style/bar/battery';
//modules - menus //modules - menus
@import "style/menus/menu"; @import 'style/menus/menu';
@import "style/menus/power"; @import 'style/menus/power';
@import "style/menus/powerdropdown"; @import 'style/menus/powerdropdown';
@import "style/menus/audiomenu"; @import 'style/menus/audiomenu';
@import "style/menus/network"; @import 'style/menus/network';
@import "style/menus/bluetooth"; @import 'style/menus/bluetooth';
@import "style/menus/media"; @import 'style/menus/media';
@import "style/menus/notifications"; @import 'style/menus/notifications';
@import "style/menus/calendar"; @import 'style/menus/calendar';
@import "style/menus/energy"; @import 'style/menus/energy';
@import "style/menus/dashboard"; @import 'style/menus/dashboard';
//notifications //notifications
@import "style/notifications/popups"; @import 'style/notifications/popups';
//osd //osd
@import "style/osd/index"; @import 'style/osd/index';
//settings dialog //settings dialog
@import "style/settings/dialog"; @import 'style/settings/dialog';
@import "style/customModules/style"; @import 'style/customModules/style';

262
scss/style/common/common.scss
View File

@@ -1,234 +1,240 @@
@import "../colors"; @import '../colors';
menu { menu {
margin: 6px; margin: 6px;
padding: 6px; padding: 6px;
background-color: $primary_bg; background-color: $primary_bg;
background-clip: border-box; background-clip: border-box;
border-radius: 12px; border-radius: 12px;
border: 1px solid $secondary_bg; border: 1px solid $secondary_bg;
menuitem { menuitem {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
min-height: 20px; min-height: 20px;
min-width: 40px; min-width: 40px;
padding: 4px 8px; padding: 4px 8px;
color: #FFFFFF; color: #ffffff;
font: initial; font: initial;
text-shadow: none; text-shadow: none;
border-radius: 6px;
&:hover,
&:active {
background-color: $secondary_bg;
}
&:disabled {
color: $secondary_bg;
}
arrow {
min-height: 16px;
min-width: 16px;
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 8px;
}
}
separator {
min-height: 1px;
margin: 4px 0;
background-color: $secondary_bg;
}
}
menu > arrow {
min-height: 16px;
min-width: 16px;
padding: 4px;
color: $secondary_bg;
}
menu > arrow.top {
margin-top: 0;
border-radius: 6px; border-radius: 6px;
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
&:hover,
&:active {
background-color: $secondary_bg;
}
&:disabled {
color: $secondary_bg;
}
arrow {
min-height: 16px;
min-width: 16px;
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
margin-left: 8px;
}
}
separator {
min-height: 1px;
margin: 4px 0;
background-color: $secondary_bg
}
} }
menu>arrow { menu > arrow.bottom {
min-height: 16px; margin-top: 8px;
min-width: 16px; margin-bottom: -12px;
padding: 4px; border-radius: 6px;
color: $secondary_bg; -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
menu>arrow.top {
margin-top: 0;
border-radius: 6px;
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}
menu>arrow.bottom {
margin-top: 8px;
margin-bottom: -12px;
border-radius: 6px;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
} }
check, check,
radio { radio {
min-height: 15px; min-height: 15px;
min-width: 15px; min-width: 15px;
margin: 4px; margin: 4px;
padding: 0; padding: 0;
color: transparent; color: transparent;
background-color: $secondary_bg; background-color: $secondary_bg;
transition: all 75ms cubic-bezier(0, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0, 0, 0.2, 1); transition:
all 75ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
} }
radio { radio {
border-radius: 9999px; border-radius: 9999px;
} }
check { check {
border-radius: 4px; border-radius: 4px;
} }
check:hover, check:hover,
radio:hover { radio:hover {
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8); box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
background-color: $primary_bg; background-color: $primary_bg;
} }
check:active, check:active,
radio:active { radio:active {
box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8); box-shadow: 0 0 0 4px transparentize($primary_bg, 0.8);
background-color: $primary_bg; background-color: $primary_bg;
} }
check:checked, check:checked,
check:indeterminate, check:indeterminate,
radio:checked, radio:checked,
radio:indeterminate { radio:indeterminate {
color: $primary_bg; color: $primary_bg;
background-color: $primary_fg; background-color: $primary_fg;
} }
check:checked:hover, check:checked:hover,
check:indeterminate:hover, check:indeterminate:hover,
radio:checked:hover, radio:checked:hover,
radio:indeterminate:hover { radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8); box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
background-color: $primary_fg; background-color: $primary_fg;
} }
check:checked:active, check:checked:active,
check:indeterminate:active, check:indeterminate:active,
radio:checked:active, radio:checked:active,
radio:indeterminate:active { radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8); box-shadow: 0 0 0 4px transparentize($primary_fg, 0.8);
background-color: $primary_fg; background-color: $primary_fg;
} }
switch { switch {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1); transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
margin: 4px 0; margin: 4px 0;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
background-color: $secondary_bg; background-color: $secondary_bg;
background-clip: padding-box; background-clip: padding-box;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
} }
switch:checked { switch:checked {
background-color: $primary_fg; background-color: $primary_fg;
} }
switch:disabled { switch:disabled {
opacity: 0.5; opacity: 0.5;
} }
switch slider { switch slider {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1); transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
min-width: 18px; min-width: 18px;
min-height: 18px; min-height: 18px;
margin: 3px; margin: 3px;
border-radius: 9999px; border-radius: 9999px;
outline: none; outline: none;
background-color: $default_fg; background-color: $default_fg;
border: none; border: none;
color: transparent; color: transparent;
} }
scale { scale {
min-height: 2px; min-height: 2px;
min-width: 2px; min-width: 2px;
} }
scale.horizontal { scale.horizontal {
padding: 17px 12px; padding: 17px 12px;
} }
scale.vertical { scale.vertical {
padding: 12px 17px; padding: 12px 17px;
} }
scale slider { scale slider {
min-height: 18px; min-height: 18px;
min-width: 18px; min-width: 18px;
margin: -8px; margin: -8px;
} }
scale trough { scale trough {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
outline: none; outline: none;
background-color: $secondary_bg; background-color: $secondary_bg;
} }
scale highlight { scale highlight {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
background-color: $primary_fg; background-color: $primary_fg;
} }
scale highlight:disabled { scale highlight:disabled {
background-color: #1e1e2e; background-color: #1e1e2e;
} }
scale fill { scale fill {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1); transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1);
} }
scale fill:disabled { scale fill:disabled {
background-color: transparent; background-color: transparent;
} }
scale slider { scale slider {
transition: all 75ms cubic-bezier(0, 0, 0.2, 1); transition: all 75ms cubic-bezier(0, 0, 0.2, 1);
border-radius: 9999px; border-radius: 9999px;
color: $primary_fg; color: $primary_fg;
background-color: $primary_bg; background-color: $primary_bg;
box-shadow: inset 0 0 0 2px $primary_fg; box-shadow: inset 0 0 0 2px $primary_fg;
} }
scale slider:hover { scale slider:hover {
box-shadow: inset 0 0 0 2px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9); box-shadow:
inset 0 0 0 2px $primary_fg,
0 0 0 8px transparentize($primary_fg, 0.9);
} }
scale slider:active { scale slider:active {
box-shadow: inset 0 0 0 4px $primary_fg, 0 0 0 8px transparentize($primary_fg, 0.9); box-shadow:
inset 0 0 0 4px $primary_fg,
0 0 0 8px transparentize($primary_fg, 0.9);
} }
tooltip { tooltip {
box-shadow: none; box-shadow: none;
} }
separator { separator {
min-width: 1px; min-width: 1px;
min-height: 1px; min-height: 1px;
background-color: $secondary_bg; background-color: $secondary_bg;
} }
@keyframes spin { @keyframes spin {
to { to {
-gtk-icon-transform: rotate(1turn); -gtk-icon-transform: rotate(1turn);
} }
} }
spinner { spinner {
background: none; background: none;
opacity: 0; opacity: 0;
-gtk-icon-source: -gtk-icontheme("process-working-symbolic"); -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
} }
spinner:checked { spinner:checked {
opacity: 1; opacity: 1;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }

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

@@ -22,34 +22,6 @@
font-size: 1.2em; font-size: 1.2em;
} }
window.popup {
opacity: $bar-menus-opacity * 0.01;
menuitem {
label {
color: $bar-menus-popover-text;
}
&:hover {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
}
menu {
border-color: $bar-menus-popover-border;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em;
}
arrow {
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
}
tooltip { tooltip {
* { * {
all: unset; all: unset;

114
scss/style/common/popover_menu.scss Normal file
View File

@@ -0,0 +1,114 @@
@import '../colors';
$popoverScaling: $bar-menus-popover-scaling * 0.01;
window.popup {
opacity: $bar-menus-opacity * $popoverScaling;
menu {
border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-popover-border);
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
}
menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 0.3em * $popoverScaling 0.3em * $popoverScaling;
label {
font-size: 1.2rem * $popoverScaling;
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
&:hover,
&:active {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.6);
}
&:disabled {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
arrow {
min-height: 1.2em * $popoverScaling;
min-width: 1.2em * $popoverScaling;
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 0.5em * $popoverScaling;
color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text);
}
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em * $popoverScaling;
}
arrow.top {
margin-top: 0;
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}
arrow.bottom {
margin-top: 0.5em * $popoverScaling;
margin-bottom: -0.6em * $popoverScaling;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
check,
radio {
min-height: 0.8em * $popoverScaling;
min-width: 0.8em * $popoverScaling;
margin-right: 0.5em * $popoverScaling;
padding: 0;
color: transparent;
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
transition:
all 100ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}
radio {
border-radius: 9999px;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check {
border-radius: $bar-buttons-radius;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:hover,
radio:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:active,
radio:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked:hover,
check:indeterminate:hover,
radio:checked:hover,
radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:checked:active,
check:indeterminate:active,
radio:checked:active,
radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
}

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

@@ -1,407 +1,486 @@
window.settings-dialog { window.settings-dialog {
opacity: $bar-menus-opacity * 0.01; opacity: $bar-menus-opacity * 0.01;
background-color: $bar-menus-cards; background-color: $bar-menus-cards;
color: $bar-menus-text; color: $bar-menus-text;
$widget-bg: $bar-menus-cards; $widget-bg: $bar-menus-cards;
$border: none; $border: none;
$fg: $bar-menus-text; $fg: $bar-menus-text;
.settings-dialog-box {
min-width: 75em;
}
.header {
background-color: transparentize($bar-menus-background, 0.1);
border-bottom-left-radius: $bar-menus-border-radius * 0.5;
border-bottom-right-radius: $bar-menus-border-radius * 0.5;
padding: $padding;
button {
font-weight: bold;
.settings-dialog-box {
min-width: 75em;
} }
button.close { .header {
color: $bar-menus-iconbuttons-passive; background-color: transparentize($bar-menus-background, 0.1);
border-bottom-left-radius: $bar-menus-border-radius * 0.5;
border-bottom-right-radius: $bar-menus-border-radius * 0.5;
padding: $padding;
image { button {
font-size: 2em; font-weight: bold;
} }
&:hover { button.close {
color: $bar-menus-buttons-active; color: $bar-menus-iconbuttons-passive;
}
image {
font-size: 2em;
}
&:hover {
color: $bar-menus-buttons-active;
}
}
button.reset {
color: $bar-menus-iconbuttons-passive;
padding: $padding * 0.5;
image {
font-size: 1.25em;
}
&:hover {
color: $bar-menus-buttons-active;
}
}
} }
button.reset { .page {
color: $bar-menus-iconbuttons-passive; .page-content {
padding: $padding*.5; padding: $padding * 2;
padding-top: 0;
image { }
font-size: 1.25em;
}
&:hover {
color: $bar-menus-buttons-active;
}
}
}
.page {
.page-content {
padding: $padding*2;
padding-top: 0;
}
}
.group {
.group-title {
color: $bar-menus-text;
margin-bottom: $spacing*.5;
} }
.group-reset { .group {
margin: $spacing * .5; .group-title {
padding: $padding * .5; color: $bar-menus-text;
margin-bottom: $spacing * 0.5;
}
&:disabled { .group-reset {
color: transparent; margin: $spacing * 0.5;
} padding: $padding * 0.5;
&:disabled {
color: transparent;
}
}
&:not(:first-child) {
margin-top: $spacing;
}
} }
&:not(:first-child) { .row {
margin-top: $spacing;
}
}
.row {
background-color: $widget-bg;
padding: $padding;
border: $border;
border-top: none;
&:first-child {
border-radius: $radius $radius 0em 0em;
border: $border;
}
&:last-child {
border-radius: 0em 0em $radius $radius;
}
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, .4)
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg; background-color: $widget-bg;
padding: $padding;
border: $border; border: $border;
padding: 0em $padding; border-top: none;
border-radius: $radius 0em 0em $radius;
}
button { &:first-child {
border-radius: 0em; border-radius: $radius $radius 0em 0em;
} border: $border;
}
button:last-child { &:last-child {
border-radius: 0em $radius $radius 0em; border-radius: 0em 0em $radius $radius;
} }
&:first-child:last-child {
border-radius: $radius;
border: $border;
}
button.reset {
margin-left: $spacing;
}
label.id,
label.note {
color: transparentize($fg, 0.4);
}
entry,
button {
padding: $padding;
}
spinbutton {
entry {
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
.enum-setter {
label {
background-color: $widget-bg;
border: $border;
padding: 0em $padding;
border-radius: $radius 0em 0em $radius;
}
button {
border-radius: 0em;
}
button:last-child {
border-radius: 0em $radius $radius 0em;
}
}
&.wallpaper {
button {
margin-top: $spacing * 0.5;
}
.preview {
border-radius: $radius;
}
}
} }
&.wallpaper {
button {
margin-top: $spacing * .5;
}
.preview {
border-radius: $radius;
}
}
}
} }
.option-item { .option-item {
margin: 0em 2em; margin: 0em 2em;
margin-bottom: 1em; margin-bottom: 1em;
.reset { .reset {
color: $bar-menus-iconbuttons-passive; color: $bar-menus-iconbuttons-passive;
}
.options-label {
color: $bar-menus-text;
}
.options-sublabel {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
.options-sublabel-link {
label {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
} }
&:hover label { .options-label {
color: $bar-menus-listitems-active; color: $bar-menus-text;
}
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
} }
padding: 0.35em 0.35em; .options-sublabel {
background: transparentize($bar-menus-background, 0.6); font-size: 0.75em;
margin-right: 1em; margin-top: 0.2em;
} color: $bar-menus-dimtext;
}
.options-sublabel-link {
label {
font-size: 0.75em;
margin-top: 0.2em;
color: $bar-menus-dimtext;
}
&:hover label {
color: $bar-menus-listitems-active;
}
}
.inputter-container {
border-radius: $bar-menus-border-radius * 0.5;
:first-child {
border-radius: $bar-menus-border-radius * 0.5;
}
padding: 0.35em 0.35em;
background: transparentize($bar-menus-background, 0.6);
margin-right: 1em;
}
} }
.options-header { .options-header {
margin: 1em 1em; margin: 1em 1em;
.label-name { .label-name {
color: $bar-menus-label; color: $bar-menus-label;
font-size: 0.9em; font-size: 0.9em;
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
.pager-button { .pager-button {
color: transparentize($bar-menus-text, 0.4); color: transparentize($bar-menus-text, 0.4);
margin: 0.5em 0.75em; margin: 0.5em 0.75em;
&.category label { &.category label {
font-size: 1.4em; font-size: 1.4em;
}
&:hover {
label {
text-decoration: underline;
color: $bar-menus-text;
}
}
&.active {
label {
text-decoration: underline;
color: $bar-menus-text;
}
}
}
.bar-theme-page {
min-height: 40em;
}
.settings-menu-stack {
background: $red;
}
.paged-container {
.reset-options {
color: $bar-menus-text;
image:disabled {
color: $bar-menus-buttons-disabled;
} }
&:hover { &:hover {
image { label {
color: transparentize($bar-menus-text, 0.5); text-decoration: underline;
} color: $bar-menus-text;
} }
}
scrollbar {
margin-right: 0.2em;
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-background;
slider {
min-width: 0.6em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
}
}
selection {
background: $bar-menus-label;
color: $bar-menus-cards;
}
switch {
font-size: 10px;
&:checked {
background: $bar-menus-switch-enabled;
} }
slider { &.active {
background-color: $bar-menus-switch-puck; label {
text-decoration: underline;
color: $bar-menus-text;
}
}
}
.bar-theme-page {
min-height: 40em;
}
.settings-menu-stack {
background: $red;
}
.paged-container {
.reset-options {
color: $bar-menus-text;
image:disabled {
color: $bar-menus-buttons-disabled;
}
&:hover {
image {
color: transparentize($bar-menus-text, 0.5);
}
}
} }
&:active { scrollbar {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled); margin-right: 0.2em;
} min-width: 0.6em;
} border-radius: $bar-menus-border-radius;
background: $bar-menus-background;
entry { slider {
min-width: 15em; min-width: 0.6em;
} border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
}
}
selection {
background: $bar-menus-label;
color: $bar-menus-cards;
}
switch {
font-size: 10px;
&:checked {
background: $bar-menus-switch-enabled;
}
slider {
background-color: $bar-menus-switch-puck;
}
&:active {
background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
}
}
entry {
min-width: 15em;
}
} }
dialog { dialog {
background: $bar-menus-cards;
color: $bar-menus-text;
:selected {
background: transparentize($bar-menus-label, 0.2);
color: transparentize($bar-menus-cards, 0.2);
}
headerbar {
border-bottom: 0.075em solid $bar-menus-border-color;
background: $bar-menus-cards; background: $bar-menus-cards;
padding: 0.5em; color: $bar-menus-text;
font-size: 1.5em;
button { :selected {
color: $bar-menus-buttons-text; background: transparentize($bar-menus-label, 0.2);
min-width: 4.5em; color: transparentize($bar-menus-cards, 0.2);
min-height: 2.5em;
border-radius: $bar-menus-border-radius;
background: $bar-menus-buttons-default;
&:hover {
background: transparentize($bar-menus-buttons-default, 0.5);
}
}
}
viewport {
border-right: .25em solid $bar-menus-border-color;
list {
row {
padding: 0em 1.5em;
&:hover {
background: $bar-menus-buttons-default;
color: $bar-menus-buttons-text;
}
label {
margin: 0.5em 0.5em;
font-size: 0.85em;
}
}
} }
} headerbar {
border-bottom: 0.075em solid $bar-menus-border-color;
background: $bar-menus-cards;
padding: 0.5em;
font-size: 1.5em;
stack { button {
.horizontal .path-bar { color: $bar-menus-buttons-text;
button { min-width: 4.5em;
background: $bar-menus-iconbuttons-active; min-height: 2.5em;
min-width: 3em; border-radius: $bar-menus-border-radius;
min-height: 2em; background: $bar-menus-buttons-default;
border-radius: $bar-menus-border-radius * 0.5;
&:disabled { &:hover {
background: $bar-menus-buttons-disabled; background: transparentize($bar-menus-buttons-default, 0.5);
}
} }
&:hover {
background: transparentize($bar-menus-buttons-active, 0.5);
}
label {
margin: 0em 0.25em;
color: $bar-menus-buttons-text
}
image {
margin: 0em 0.5em;
color: $bar-menus-buttons-text
}
margin: 0.25em;
}
} }
}
treeview header button { viewport {
padding: 0.25em; border-right: 0.25em solid $bar-menus-border-color;
border: .15em solid $bar-menus-border-color;
}
headerbar { list {
color: $bar-menus-label; row {
} padding: 0em 1.5em;
&:hover {
background: $bar-menus-buttons-default;
color: $bar-menus-buttons-text;
}
label {
margin: 0.5em 0.5em;
font-size: 0.85em;
}
}
}
}
stack {
.horizontal .path-bar {
button {
background: $bar-menus-iconbuttons-active;
min-width: 3em;
min-height: 2em;
border-radius: $bar-menus-border-radius * 0.5;
&:disabled {
background: $bar-menus-buttons-disabled;
}
&:hover {
background: transparentize($bar-menus-buttons-active, 0.5);
}
label {
margin: 0em 0.25em;
color: $bar-menus-buttons-text;
}
image {
margin: 0em 0.5em;
color: $bar-menus-buttons-text;
}
margin: 0.25em;
}
}
}
treeview header button {
padding: 0.25em;
border: 0.15em solid $bar-menus-border-color;
}
headerbar {
color: $bar-menus-label;
}
popover {
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
border-radius: $bar-buttons-radius;
modelbutton {
margin-bottom: 0.5em;
}
modelbutton:hover label {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
modelbutton:disabled label {
color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.5);
}
separator {
margin: 0.5em 0em;
}
}
separator {
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-popover-text), 0.7);
min-height: 0.075em * $popoverScaling;
}
check,
radio {
min-height: 0.8em * $popoverScaling;
min-width: 0.8em * $popoverScaling;
margin-right: 0.5em * $popoverScaling;
padding: 0;
color: transparent;
background-color: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-popover-background);
transition:
all 100ms cubic-bezier(0, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.2, 1);
}
radio {
border-radius: 9999px;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check {
border-radius: $bar-buttons-radius;
border-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:hover,
radio:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:active,
radio:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked,
check:indeterminate,
radio:checked,
radio:indeterminate {
color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
background-color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text);
}
check:checked:hover,
check:indeterminate:hover,
radio:checked:hover,
radio:indeterminate:hover {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
check:checked:active,
check:indeterminate:active,
radio:checked:active,
radio:indeterminate:active {
box-shadow: 0 0 0 4px transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.8);
background-color: transparentize(if($bar-menus-monochrome, $bar-menus-label, $bar-menus-popover-text), 0.4);
}
} }
.unsaved-icon { .unsaved-icon {
margin-right: 1em; margin-right: 1em;
font-size: 1em; font-size: 1em;
color: $yellow; color: $yellow;
} }
.options-import, .options-import,
.options-export { .options-export {
border-radius: $bar-menus-border-radius * 0.5; border-radius: $bar-menus-border-radius * 0.5;
color: $bar-menus-buttons-text; color: $bar-menus-buttons-text;
padding: 0.35em 0.35em; padding: 0.35em 0.35em;
background: $bar-menus-buttons-default; background: $bar-menus-buttons-default;
margin-right: 1em; margin-right: 1em;
margin-left: 0.5em; margin-left: 0.5em;
&:hover { &:hover {
background: transparentize($bar-menus-buttons-default, 0.8); background: transparentize($bar-menus-buttons-default, 0.8);
} }
} }
.options-import { .options-import {
margin-right: 0em; margin-right: 0em;
} }

9
widget/settings/pages/config/general/index.ts
View File

@@ -196,6 +196,15 @@ export const BarGeneral = (): Scrollable<Child, Attribute> => {
max: 100, max: 100,
increment: 5, increment: 5,
}), }),
Option({
opt: options.theme.bar.menus.popover.scaling,
title: 'Popovers',
subtitle: 'Ex: Right click menu of system tray items.',
type: 'number',
min: 1,
max: 100,
increment: 5,
}),
], ],
}), }),
}); });