Skip to content

Commit

Permalink
Fixed Budgie panel applet spacing issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinceliuice
vinceliuice committed Feb 28, 2023
1 parent 8404d90 commit 0282492
Show file tree
Hide file tree
Showing 4 changed files with 268 additions and 49 deletions.
80 changes: 70 additions & 10 deletions src/_sass/gtk/apps/_budgie.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,8 +542,8 @@ window.budgie-popover:not(.csd) {
@extend %budgie_panel_button;
}

&.horizontal button { padding: 0 4px; }
&.vertical button { padding: 4px 0; }
&.horizontal button { padding: 0 6px; }
&.vertical button { padding: 6px 0; }

separator { background-color: rgba($panel_fg, 0.12); }

Expand Down Expand Up @@ -587,6 +587,35 @@ window.budgie-popover:not(.csd) {
&:disabled { color: rgba($panel_fg, 0.5); }
}
}

// Add padding for panel indicators icons
> box > widget > widget {
> image, // normal
> stack > image, // Screenshot
> box > image { // Places
margin-left: 6px;
margin-right: 6px;
}

> box { // keyboard Layout
> widget > image { margin-left: 6px; }
> stack > widget > label { margin-right: 6px; }
}

> box > widget > widget > image { // Status
margin-left: 2px;
margin-right: 2px;
}
}

// Time label
.budgie-clock-applet,
.budgie-calendar-applet {
> widget > box {
padding-left: 3px;
padding-right: 3px;
}
}
}

%underscores {
Expand Down Expand Up @@ -885,7 +914,7 @@ button.raven-trigger {
// MPRIS Applet
.raven-mpris {
background-color: rgba(black, 0.5);
color: $selected_fg_color;
color: white;

label { min-height: 24px; }

Expand All @@ -896,14 +925,45 @@ button.raven-trigger {
}
}

image.raven-mpris {
background-color: $borders_color;
color: $sec_fg_color;
border-radius: 3px;
}
.mpris-widget {
.raven-header {
background-color: rgba(black, 0.75);
color: white;

.raven-mpris-controls > button {
padding: $cont_padding;
button.image-button {
border: none;
@extend %budgie_panel_button_flat;
}
}

.raven-background {
background-color: rgba(black, 0.65);
color: white;
border: none;

image.raven-mpris {
background-color: rgba(white, 0.1);
color: rgba(white, 0.65);
border-radius: 3px;
}

.raven-mpris-controls {
background-color: rgba(black, 0.35);
border-radius: $circular_radius;
margin-top: 3px;
padding: 3px;

> button {
padding: $cont_padding;
border: none;
@extend %budgie_panel_button_flat;

&:not(:first-child):not(:last-child):not(:hover):not(:active) {
background-color: rgba(white, 0.06);
}
}
}
}
}
}

Expand Down
79 changes: 66 additions & 13 deletions src/gtk/theme-3.0/gtk-Dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7803,32 +7803,32 @@ MsdOsdWindow.background.osd .progressbar {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.raven .raven-mpris button.image-button {
.raven .mpris-widget .raven-background .raven-mpris-controls > button, .raven .mpris-widget .raven-header button.image-button, .raven .raven-mpris button.image-button {
color: #D3DAE3;
background: none;
}

.raven .raven-mpris button.image-button:hover {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:hover, .raven .mpris-widget .raven-header button.image-button:hover, .raven .raven-mpris button.image-button:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.15);
}

.raven .raven-mpris button.image-button:disabled {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:disabled, .raven .mpris-widget .raven-header button.image-button:disabled, .raven .raven-mpris button.image-button:disabled {
color: rgba(211, 218, 227, 0.5);
background: none;
}

.raven .raven-mpris button.image-button:active {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:active, .raven .mpris-widget .raven-header button.image-button:active, .raven .raven-mpris button.image-button:active {
background-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}

.raven .raven-mpris button.image-button:checked {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked, .raven .mpris-widget .raven-header button.image-button:checked, .raven .raven-mpris button.image-button:checked {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}

.raven .raven-mpris button.image-button:checked:disabled {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked:disabled, .raven .mpris-widget .raven-header button.image-button:checked:disabled, .raven .raven-mpris button.image-button:checked:disabled {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
}
Expand Down Expand Up @@ -8371,11 +8371,11 @@ window.budgie-popover:not(.csd) > frame.container > border {
}

.budgie-panel.horizontal button {
padding: 0 4px;
padding: 0 6px;
}

.budgie-panel.vertical button {
padding: 4px 0;
padding: 6px 0;
}

.budgie-panel separator {
Expand Down Expand Up @@ -8430,6 +8430,32 @@ window.budgie-popover:not(.csd) > frame.container > border {
color: rgba(211, 218, 227, 0.5);
}

.budgie-panel > box > widget > widget > image,
.budgie-panel > box > widget > widget > stack > image,
.budgie-panel > box > widget > widget > box > image {
margin-left: 6px;
margin-right: 6px;
}

.budgie-panel > box > widget > widget > box > widget > image {
margin-left: 6px;
}

.budgie-panel > box > widget > widget > box > stack > widget > label {
margin-right: 6px;
}

.budgie-panel > box > widget > widget > box > widget > widget > image {
margin-left: 2px;
margin-right: 2px;
}

.budgie-panel .budgie-clock-applet > widget > box,
.budgie-panel .budgie-calendar-applet > widget > box {
padding-left: 3px;
padding-right: 3px;
}

.top window#ValaPanel.background button.flat.-panel-button, window#ValaPanel.background .top button.flat.-panel-button,
.top window#ValaPanel.background button#tasklist-button.toggle.flat,
window#ValaPanel.background .top button#tasklist-button.toggle.flat,
Expand Down Expand Up @@ -8782,7 +8808,7 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch

.raven .raven-mpris {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
color: white;
}

.raven .raven-mpris label {
Expand All @@ -8794,14 +8820,41 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
border: none;
}

.raven image.raven-mpris {
background-color: rgba(255, 255, 255, 0.12);
color: rgba(230, 235, 239, 0.6);
.raven .mpris-widget .raven-header {
background-color: rgba(0, 0, 0, 0.75);
color: white;
}

.raven .mpris-widget .raven-header button.image-button {
border: none;
}

.raven .mpris-widget .raven-background {
background-color: rgba(0, 0, 0, 0.65);
color: white;
border: none;
}

.raven .mpris-widget .raven-background image.raven-mpris {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
border-radius: 3px;
}

.raven .raven-mpris-controls > button {
.raven .mpris-widget .raven-background .raven-mpris-controls {
background-color: rgba(0, 0, 0, 0.35);
border-radius: 9999px;
margin-top: 3px;
padding: 3px;
}

.raven .mpris-widget .raven-background .raven-mpris-controls > button {
padding: 6px;
border: none;
}

.raven .mpris-widget .raven-background .raven-mpris-controls > button:not(:first-child):not(:last-child):not(:hover):not(:active) {
background-color: rgba(255, 255, 255, 0.06);
}

calendar.raven-calendar {
Expand Down
79 changes: 66 additions & 13 deletions src/gtk/theme-3.0/gtk-Light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7781,32 +7781,32 @@ MsdOsdWindow.background.osd .progressbar {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.raven .raven-mpris button.image-button {
.raven .mpris-widget .raven-background .raven-mpris-controls > button, .raven .mpris-widget .raven-header button.image-button, .raven .raven-mpris button.image-button {
color: #D3DAE3;
background: none;
}

.raven .raven-mpris button.image-button:hover {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:hover, .raven .mpris-widget .raven-header button.image-button:hover, .raven .raven-mpris button.image-button:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.15);
}

.raven .raven-mpris button.image-button:disabled {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:disabled, .raven .mpris-widget .raven-header button.image-button:disabled, .raven .raven-mpris button.image-button:disabled {
color: rgba(211, 218, 227, 0.5);
background: none;
}

.raven .raven-mpris button.image-button:active {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:active, .raven .mpris-widget .raven-header button.image-button:active, .raven .raven-mpris button.image-button:active {
background-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}

.raven .raven-mpris button.image-button:checked {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked, .raven .mpris-widget .raven-header button.image-button:checked, .raven .raven-mpris button.image-button:checked {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}

.raven .raven-mpris button.image-button:checked:disabled {
.raven .mpris-widget .raven-background .raven-mpris-controls > button:checked:disabled, .raven .mpris-widget .raven-header button.image-button:checked:disabled, .raven .raven-mpris button.image-button:checked:disabled {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
}
Expand Down Expand Up @@ -8349,11 +8349,11 @@ window.budgie-popover:not(.csd) > frame.container > border {
}

.budgie-panel.horizontal button {
padding: 0 4px;
padding: 0 6px;
}

.budgie-panel.vertical button {
padding: 4px 0;
padding: 6px 0;
}

.budgie-panel separator {
Expand Down Expand Up @@ -8408,6 +8408,32 @@ window.budgie-popover:not(.csd) > frame.container > border {
color: rgba(211, 218, 227, 0.5);
}

.budgie-panel > box > widget > widget > image,
.budgie-panel > box > widget > widget > stack > image,
.budgie-panel > box > widget > widget > box > image {
margin-left: 6px;
margin-right: 6px;
}

.budgie-panel > box > widget > widget > box > widget > image {
margin-left: 6px;
}

.budgie-panel > box > widget > widget > box > stack > widget > label {
margin-right: 6px;
}

.budgie-panel > box > widget > widget > box > widget > widget > image {
margin-left: 2px;
margin-right: 2px;
}

.budgie-panel .budgie-clock-applet > widget > box,
.budgie-panel .budgie-calendar-applet > widget > box {
padding-left: 3px;
padding-right: 3px;
}

.top window#ValaPanel.background button.flat.-panel-button, window#ValaPanel.background .top button.flat.-panel-button,
.top window#ValaPanel.background button#tasklist-button.toggle.flat,
window#ValaPanel.background .top button#tasklist-button.toggle.flat,
Expand Down Expand Up @@ -8760,7 +8786,7 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch

.raven .raven-mpris {
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
color: white;
}

.raven .raven-mpris label {
Expand All @@ -8772,14 +8798,41 @@ button.raven-trigger:hover, button.raven-trigger:active, button.raven-trigger:ch
border: none;
}

.raven image.raven-mpris {
background-color: rgba(0, 0, 0, 0.12);
color: rgba(70, 72, 83, 0.6);
.raven .mpris-widget .raven-header {
background-color: rgba(0, 0, 0, 0.75);
color: white;
}

.raven .mpris-widget .raven-header button.image-button {
border: none;
}

.raven .mpris-widget .raven-background {
background-color: rgba(0, 0, 0, 0.65);
color: white;
border: none;
}

.raven .mpris-widget .raven-background image.raven-mpris {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.65);
border-radius: 3px;
}

.raven .raven-mpris-controls > button {
.raven .mpris-widget .raven-background .raven-mpris-controls {
background-color: rgba(0, 0, 0, 0.35);
border-radius: 9999px;
margin-top: 3px;
padding: 3px;
}

.raven .mpris-widget .raven-background .raven-mpris-controls > button {
padding: 6px;
border: none;
}

.raven .mpris-widget .raven-background .raven-mpris-controls > button:not(:first-child):not(:last-child):not(:hover):not(:active) {
background-color: rgba(255, 255, 255, 0.06);
}

calendar.raven-calendar {
Expand Down
Loading

0 comments on commit 0282492

Please sign in to comment.