blob: 03ab6dd055652541a63336e063cf44fce982d88e [file] [log] [blame]
// /******************
// * Budgie-Desktop *
// ******************/
// specific ripple-effect for IconTaskList
@keyframes budgie_ripple_effect {
0% {
background-image: radial-gradient(
circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0.25) 0%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0.12));
}
66% {
background-image: radial-gradient(
circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0.25) 100%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0.12));
}
100% {
background-image: radial-gradient(
circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0) 100%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0.12));
}
}
// specific transition
$budgie_transition: opacity 0.2s $slope_medium,
background-color 0.4s $slope_slow,
background-image 0.4s $slope_slow,
box-shadow 0.2s $slope_slow;
// main container
.budgie-container { background-color: transparent; }
.budgie-panel {
// solid-mode
// always use dark-color of dark variant
background-color: $panel_bg_color;
color: $inverted_fg_color;
font-weight: 700;
transition: $budgie_transition;
// used to indicate unread notifications
.alert { color: $suggested_color; }
// transparent-mode
&.transparent {
background-color: transparent;
color: $inverted_fg_color;
transition: $budgie_transition;
// draw shadows by default
// FIXME: NaTray puts widgets as "widgets",
// so we can not render icons-shadows anyhow...
image { -gtk-icon-shadow: $z-depth-1; }
label { text-shadow: $z-depth-1; }
}
}
@each $along_side, $opp_side in (top, bottom),
(bottom, top),
(left, right),
(right, left) {
// panel shadow styling
.#{$along_side} .shadow-block {
background-color: transparent;
background-image: linear-gradient(to #{$opp_side},
gtkopacity(#000000, 0.23),
gtkopacity(#000000, 0.08),
transparent);
}
}
// wnck tasklist styling
.budgie-panel button#tasklist-button {
border: none;
background-image: radial-gradient(circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0) 100%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0));
background-color: transparent;
box-shadow: none; // unset standard wnck styling
transition: $budgie_transition;
image {
min-width: 0;
min-height: $icon_size * 1.5;
.left &,
.right & {
min-width: $icon_size * 1.5;
min-height: 0;
}
}
label,
image { opacity: 0.87; }
&:hover,
&:active,
&:checked {
box-shadow: none;
label,
image { opacity: 1.0; }
}
&:active {
transition: $budgie_transition,
background-image 0s;
animation: budgie_ripple_effect 0.3s $slope_slow forwards;
}
}
// icon tasklist styling
%icon_tasklist_droptarget,
box.pinned { // drop-target
&:drop(active) {
border: none;
border-radius: 0;
background-color: gtkopacity($drop_target_color, 0.2);
box-shadow: inset 0 0 0 1px $drop_target_color;
}
}
.budgie-panel {
@at-root %budgie_icon_tasklist_button,
button.flat.launcher {
min-width: $icon_size;
min-height: $icon_size;
padding: 0;
border-radius: 0;
background-image: radial-gradient(circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0) 100%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0));
background-position: center center;
transition: $budgie_transition;
> image {
opacity: 0.87;
transition: opacity 0.2s $slope_medium,
background-image 0s;
}
&:hover {
-gtk-icon-effect: highlight;
> image { opacity: 1.0; }
}
&:active {
transition: $budgie_transition,
background-image 0s;
animation: budgie_ripple_effect 0.3s $slope_slow forwards;
> image { opacity: 1.0; }
}
&:checked {
background-color: transparent;
&:hover { -gtk-icon-effect: highlight; }
> image { opacity: 1.0; }
}
}
@at-root %running_budgie_icon_tasklist_button,
.unpinned button.flat.launcher,
.pinned button.flat.launcher.running {
&:hover { -gtk-icon-effect: highlight; }
> image {
background-repeat: no-repeat;
transition: opacity 0.2s $slope_medium,
background-image 0s;
opacity: 1.0;
}
&:hover,
&:active,
&:checked {
> image { background-image: none; }
}
}
}
// draw underscores and dots
@each $position, $_line, $_dot in (top, 0 3px, 6px 3px),
(bottom, 0 -3px, 6px 3px),
(left, 3px 0, 3px 6px),
(right, -3px 0, 3px 6px) {
.#{$position} .budgie-panel {
button#tasklist-button,
button.flat.launcher {
&:hover {
box-shadow: inset #{$_line} gtkopacity($inverted_fg_color, 0.4);
}
&:active,
&:checked {
box-shadow: inset #{$_line} $selected_bg_color;
}
}
.unpinned button.flat.launcher,
.pinned button.flat.launcher.running {
> image {
background-image: image($selected_bg_color);
background-size: #{$_dot};
background-position: #{$position} center;
}
&:hover,
&:active,
&:checked {
box-shadow: inset #{$_line} $selected_bg_color;
}
}
}
}
// upcoming icon tasklist
widget.icon-tasklist {
> box:drop(active) { // drop-target
@extend %icon_tasklist_droptarget;
}
}
box:not(.unpinned):not(.pinned) > revealer > button.flat.launcher {
transition: opacity 0.2s $slope_medium,
background-color 0.4s $slope_slow,
background-image 0.4s $slope_slow,
box-shadow 0s $slope_slow; // exclude box-shadows
&:hover,
&:checked,
&.running { box-shadow: none; } // unset before drawing indicators
&:active {
box-shadow: none;
transition: opacity 0.2s $slope_medium,
background-color 0.4s $slope_slow,
background-image 0s $slope_slow,
box-shadow 0s $slope_slow;
}
}
@each $position, $_line in (top, 0 3px),
(bottom, 0 -3px),
(left, 3px 0),
(right, -3px 0) {
.#{$position} {
box:not(.unpinned):not(.pinned) > revealer > button.flat.launcher {
&:not(:checked):hover {
box-shadow: inset #{$_line} gtkopacity($inverted_fg_color, 0.4);
&.running {
box-shadow: inset #{$_line} $selected_bg_color;
}
}
}
}
}
// end region
.end-region > widget > widget {
> box.horizontal { // 'Stats Indicator'
> widget > widget > image { // 'bluetooth'
&:dir(ltr) { margin: 0 2px 0 -1px; }
&:dir(rtl) { margin: 0 -1px 0 2px; }
}
> widget.sound-applet > widget > image { // 'sound'
min-width: $icon_size + 2px;
margin: 0;
}
> widget > widget > box.horizontal > image,
box.battery-icon.horizontal > image { // 'battery'
min-width: $icon_size + 6px;
}
}
box.battery-icon { // 'percent label'
&.horizontal > label.percent-label {
&:dir(ltr) { margin: 0 -6px 0 3px; }
&:dir(rtl) { margin: 0 3px 0 -6px; }
}
&.vertical > label.percent-label {
font-size: 75%;
&:dir(ltr) { margin-right: -2px; }
&:dir(rtl) { margin-left: -2px; }
}
}
> image { // 'Notification' and 'User Indicator'
min-width: $icon_size + 4px;
}
// > widget > box { // NaTray box container
// 'mobile_helper_get_status_pixbuf' calls 22px * 22px * 8bit/ch
// pixbuf area for icons.
// FXIME: introduces these allocations
// * 22 x 18 @ > 36px hrz
// * 22 x 16 @ < 37px hrz
// * 18 x 24 @ > 36px vrt
// * 16 x 24 @ < 37px vrt
// &.horizontal { margin: -(22px - $icon_size) / 2 -1px; }
// &.vertical { margin: 0 -(22px - $icon_size) / 2; }
// }
}
// budgie specific popover widgets
window.budgie-popover:not(.csd) {
&.background {
@extend %popover;
background-clip: border-box;
// FIXME: we can't expose depth-3
box-shadow: $z-depth-2;
}
> frame.container {
margin: 0 -1px -1px; // remove gap
&,
> border {
border-style: none; // hide container borders
background-color: $secondary_base_color;
}
}
}
// main menu styling
.budgie-panel {
button.flat.budgie-menu-launcher {
min-width: $icon_size;
min-height: $icon_size;
padding: 0;
border: 0 none transparent;
border-radius: 0;
background-image: radial-gradient(circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0.4) 50%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0.5));
background-repeat: no-repeat;
background-position: center center;
background-size: 0% 0%; // hide ripples in normal state
background-color: transparent;
color: $inverted_fg_color;
font-weight: 700; // enforce bold weight
transition: background-image 0s,
background-size 0s;
&:hover {
background-color: transparent;
color: $selected_fg_color;
}
&:checked {
background-image: radial-gradient(circle farthest-corner at center,
gtkopacity($inverted_fg_color, 0) 50%,
transparent 0%),
image(gtkopacity($inverted_fg_color, 0));
background-size: 100% * 2 100% * 2;
background-color: transparent;
color: $selected_fg_color;
transition: background-image 0.4s $slope_slow,
background-size 0.4s $slope_medium;
}
}
}
.budgie-menu {
background-color: $secondary_base_color;
&.background {
border-style: solid none none; // remove side/bottom borders
.container {
padding: 2px 0 0; // remove side/bottom padding
.bottom & { padding: 2px 0 2px; } // revive bottom padding
}
}
scrolledwindow,
list,
row,
scrollbar { // reset styling
min-width: 0;
min-height: 0;
border: none;
background: none;
box-shadow: none;
}
row.activatable { // reset background
padding: 0;
background-image: none;
background-color: $secondary_base_color;
color: $secondary_fg_color;
transition-duration: 0s;
// FIXME: enlarge vertical spacing with padding of icons
image { padding: rem(8px) 0; }
&:hover,
&:selected {
background-image: none;
background-color: $secondary_base_color;
// child button node has hover state already
color: $secondary_fg_color;
transition-duration: 0s;
}
button.flat {
border-radius: 0; // remove roundness
-gtk-outline-radius: 0;
> box > label { // tweak base-line
padding-bottom: rem(1.3px, $sw: 1.0);
}
}
}
.categories { // left-paned elements of GtkPopover
background-color: $secondary_dark_color;
&:dir(ltr) { border-right: 1px solid $borders_color; }
&:dir(rtl) { border-left: 1px solid $borders_color; }
.bottom & { border-bottom: 1px solid $borders_color; }
button.flat.radio.category-button {
border-radius: 0; // remove roundness
&:not(:active) { transition-duration: 0.1s; } // use list-transition
&:checked {
background-image: none;
background-color: transparent;
color: $selected_bg_color;
&:hover {
background-color: $track_color;
color: $selected_bg_color;
}
&:disabled {
color: gtkopacity($selected_bg_color, 0.4);
label { color: inherit; }
}
}
> box > label { // tweak vertical spacing and font weight
padding: rem(5.3px, $sw: 1.0) 0 rem(6.7px, $sw: 1.0);
font-weight: 500;
}
}
}
}
// user-indicator styling
.user-menu {
background-color: $secondary_base_color;
frame.container { padding: (6px + 2px) 6px 6px; }
list,
row { // reset styling
border: none;
background: none;
box-shadow: none;
}
row {
&.activatable {
&, .indicator-item { // stop weird and unhandled ripple-effect
&:active,
&:selected { animation: none; }
}
background-image: none;
background-color: $secondary_base_color;
color: $secondary_fg_color;
transition-duration: 0s;
.indicator-item {
label,
image { color: $secondary_fg_color; }
}
// FIXME: enlarge vertical spacing with padding of icons
image { padding: rem(5.3px) 0 rem(6.7px); }
// use asymmetrical separators
separator.horizontal {
min-width: 1px;
min-height: 1px;
&:dir(ltr) { border-left: $icon_size * 2 solid transparent; }
&:dir(rtl) { border-right: $icon_size * 2 solid transparent; }
}
&:hover,
&:selected {
background-image: none;
background-color: $secondary_base_color;
color: $secondary_fg_color;
transition-duration: 0s;
.indicator-item {
label,
image { color: $secondary_fg_color; }
&:hover,
&:active,
&:checked {
label,
image { color: $fg_color; }
}
}
}
}
}
// top-row (user-name and avatar)
> frame.container > box.vertical row.activatable:first-child {
margin-bottom: rem(10.7px); // fix truncated drop-shadow
outline-offset: 0;
outline-width: 0;
.indicator-item {
background-image: image($borders_color);
background-repeat: no-repeat;
background-size: 38px auto; // non-scaling unit
background-color: $suggested_color;
box-shadow: $z-depth-1,
inset 0 1px $highlight_color;
transition-timing-function: $slope_medium;
transition-property: box-shadow;
transition-duration: 0.2s;
&:dir(ltr) { // mask avatar's background
padding-left: 7px; // non-scaling unit
background-position: left center;
}
&:dir(rtl) {
padding-right: 7px;
background-position: right center;
}
label {
color: $secondary_selected_fg_color;
&:dir(ltr) { padding-left: rem(8px); }
&:dir(rtl) { padding-right: rem(8px); }
}
image {
color: $secondary_selected_fg_color;
&:first-child { // avatar image
min-width: 24px;
min-height: 20px;
padding-top: rem(6.7px);
opacity: 0.9;
}
}
&:hover {
box-shadow: $z-depth-2,
inset 0 1px $highlight_color;
transition-timing-function: $slope_medium;
transition-property: box-shadow;
transition-duration: 0.2s;
label { color: $selected_fg_color; }
image {
color: $selected_fg_color;
&:first-child { opacity: 1.0; }
}
}
label { font-weight: 700; }
}
}
}
// raven styling
$raven_box_spacing: 4px;
$switcher_width: 127px;
$switcher_height: $widget_size - if($ref_weight < 1.0, 10.7px, 5.3px);
%raven_switcher_radio_button {
min-height: rem($switcher_height, $sw: 1.0);
padding-top: 0;
padding-bottom: 0;
outline-style: none; // unset outlines
&:not(:hover):not(:active):not(:checked) { color: $tertiary_fg_color; }
// show underlines for :checked only
&:not(:checked) { border-image: none; }
label { padding-bottom: rem(1.3px); }
}
.raven-frame { // hide frame
> border { border: none 0 transparent; }
}
.raven {
padding: 0;
border: none;
color: $secondary_fg_color;
background-color: $secondary_dark_color;
.raven-header {
color: $tertiary_fg_color;
font-weight: 500;
&.top {
border-bottom: 1px solid $borders_color;
background-color: transparent;
stackswitcher.linked {
// hide embedded top/bottom-gap
margin: -$raven_box_spacing 0;
button.text-button.radio { // switcher buttons
@extend %raven_switcher_radio_button;
min-width: rem($switcher_width, $sw: 1.0);
}
}
}
}
scrolledwindow > .frame { // stacking raised-grid
// reserve L/R shadow region
// FIXME: Do not set any L/R margins and borders
padding: 0 $raven_box_spacing;
transition-duration: 0s;
> box.vertical > box.vertical {
margin: $raven_box_spacing 0; // do not set L/R margins
border-radius: 2px;
background-color: $base_color;
// draw side edges via opaque box-shadows
box-shadow: inset 0 1px $menu_highlight_color,
inset 1px 0 $solid_light_borders_color,
inset -1px 0 $solid_light_borders_color,
$z-depth-1;
transition-duration: 0s;
}
.raven-header {
margin-top: -$raven_box_spacing * 2; // unset parent margin
border-radius: 2px 2px 0 0;
}
.raven-background {
margin-bottom: -$raven_box_spacing * 2; // unset parent margin
border-radius: 0 0 2px 2px;
}
> box.vertical > box.vertical:last-child {
// FIXME: we can't crop album-art images horizontally with any borders,
// paddings, and margins. And parent GtkBox does not sync to the size
// of album-art dynamically while transitioning images. so set specific
// depth-0 OSD materials for MPRIS.
border-radius: 0; // unset raised materials
background-color: transparent;
box-shadow: none;
.raven-header,
.raven-background {
border-radius: 0;
background-color: gtkopacity($inverted_dark_color, 0.9);
color: $inverted_tertiary_fg_color;
}
button.flat.expander-button {
color: $inverted_tertiary_fg_color;
&:hover,
&:active { color: $inverted_fg_color; }
}
}
// audio app/device switcher
box.audio-widget stackswitcher.linked {
padding: 0 $raven_box_spacing; // limit child horizontal spacing
> button.text-button.radio {
@extend %raven_switcher_radio_button;
}
}
}
.powerstrip {
background-color: $panel_bg_color;
box-shadow: none;
button.flat.image-button {
min-width: rem($switcher_width, $sw: 1.0) * 2 / 3;
min-height: rem($switcher_height + 1px, $sw: 1.0);
margin: -($raven_box_spacing + 1px); // vertically gapless placement
padding: 0;
color: $inverted_fg_color;
&:hover,
&:active,
&:checked { color: $selected_fg_color; }
}
}
button.flat.expander-button { // expander arrow buttons
min-width: $icon_size;
min-height: $icon_size;
padding: rem(8px);
border-radius: 100px;
-gtk-outline-radius: 100px;
color: $tertiary_fg_color;
&:hover,
&:active { color: $fg_color; }
&:dir(ltr) { margin-right: rem(2.7px); }
&:dir(rtl) { margin-left: rem(2.7px); }
}
button.flat.image-button.primary-control { // close button in MPRIS
min-width: $icon_size;
min-height: $icon_size;
padding: rem(8px);
color: gtkopacity($destructive_color, 0.87);
&:hover,
&:active,
&:checked { color: $destructive_color; }
&:disabled { color: gtkopacity($destructive_color, 0.4); }
}
calendar {
border: none;
background-color: transparent;
}
// notification list
box.vertical > stack > box.vertical {
> .raven-header {
margin-top: -$raven_box_spacing; // reduce top margin
border-bottom: 1px solid $borders_color;
}
> .raven-background > viewport.frame {
padding: 0; // reset padding for full-width list node
list { background-color: transparent; }
> list > row.activatable {
padding-bottom: 4px;
border-bottom: 1px solid $borders_color;
background-color: transparent;
&:selected {
background-color: gtkopacity($selected_bg_color, 0.25);
&:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
&:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }
> grid > *, // legacy
> box.vertical * {
color: $fg_color;
opacity: 1.0;
}
}
> box.vertical > box.horizontal > button.image-button { // 'dismiss'
// left-most image size = 32px?
margin-top: if($ref_weight < 1.0,
calc((32px - 16px - (0.42rem - 0.1rem) * 2) / 2),
calc((32px - 16px - (0.6rem - 0.1rem) * 2) / 2));
margin-bottom: if($ref_weight < 1.0,
calc((32px - 16px - (0.42rem - 0.1rem) * 2) / 2),
calc((32px - 16px - (0.6rem - 0.1rem) * 2) / 2));
&:dir(ltr) { margin-right: rem(2.7px + 4px); }
&:dir(rtl) { margin-left: rem(2.7px + 4px); }
}
// sub-list rows grouping
list {
border-radius: 2px;
border: 1px solid $borders_color;
> row.activatable {
border-bottom: 1px solid $borders_color;
&:last-child { border-bottom: none; }
&:dir(ltr) { padding: 2px rem(2.7px) 2px 8px; }
&:dir(rtl) { padding: 2px 8px 2px rem(2.7px); }
&:selected {
background-color: gtkopacity($selected_bg_color, 0.25);
}
// title labels
box.horizontal > label:first-child { font-weight: 700; }
}
}
}
}
}
.raven-mpris { // MPRIS overlaid widget
border: none;
color: $inverted_fg_color;
background-color: gtkopacity($inverted_dark_color, 0.9);
button.image-button {
margin: 0 rem(5.3px) $raven_box_spacing * 2;
padding: rem(8px);
color: $inverted_secondary_accent_label_color;
&:hover,
&:active { color: $inverted_accent_label_color; }
&:disabled { color: gtkopacity($inverted_accent_label_color, 0.4); }
}
}
}
// some specific scale styling
box.audio-widget,
window.sound-popover.background {
scale.horizontal {
// reduce height of scale node
padding-top: 0;
padding-bottom: 0;
&.marks-after { // overdrive-mode scale
mark {
// hide label for vertically centered troughs
label { font-size: 0; }
indicator { // bold 100% gain mark with desctructive colour
min-width: 1px + 1px;
background-color: $destructive_color;
color: transparent; // draw actual colour with background instead
}
}
}
}
}
// clock-applet styling
widget.budgie-clock-applet > widget > box > label {
font-size: 100%;
&:first-child {
&:dir(ltr) { margin-left: 3px - 1px; }
&:dir(rtl) { margin-right: 3px - 1px; }
}
&:last-child {
&:dir(ltr) { margin-right: 3px + 2px; }
&:dir(rtl) { margin-left: 3px + 2px; }
}
.top &,
.bottom & {
&:only-child {
&:dir(ltr) {
margin-left: 3px - 1px;
margin-right: 3px - 2px;
}
&:dir(rtl) {
margin-left: 3px - 2px;
margin-right: 3px - 1px;
}
}
}
.left &,
.right & {
font-size: 80%;
&:first-child {
margin-top: 3px + 2px;
margin-bottom: 0;
}
&:last-child {
margin-top: 0;
margin-bottom: 3px + 1px;
// specificity bump
&:only-child { margin-top: 3px + 2px; }
}
}
}
// popover of sound-indicator styling
window.sound-popover.background box.horizontal {
> button.flat.image-button { // horizontal layout
min-width: rem($widget_size - 6.7px, $sw: 1.0);
min-height: rem($widget_size - 6.7px, $sw: 1.0);
margin: 0;
padding: 0;
&:first-child { // '-' button
&:hover {
background: none;
color: $error_color;
animation: volume_hover 0.2s linear forwards;
}
}
&:last-child { // '+' button
&:hover {
background: none;
color: $success_color;
animation: volume_hover 0.2s linear forwards;
}
}
}
}
// night-light-indicator styling
.night-light-indicator {
frame.container { padding: (6px + 2px) 6px 6px; }
.view-header {
label {
@extend %dim_label;
font-size: 15px;
font-weight: 400;
&:dir(ltr) { padding-left: 4px; }
&:dir(ltr) { padding-right: 4px; }
}
}
box.vertical > button.flat.display-settings-button {
@extend %transition; // revive transitions
border-radius: 0;
border: none;
background-color: transparent;
color: $secondary_accent_label_color;
font-weight: 700;
&:hover {
@extend %transition; // revive transitions
background-color: transparent;
color: $accent_label_color;
}
&:active {
background-color: transparent;
color: $accent_label_color;
}
label { padding: rem(5.3px) 0 rem(6.7px); }
}
}
// places-indicator styling
.places-menu {
&.background {
.container { padding: (6px + 2px) 6px 6px; }
}
box.places-section-header {
padding: 0;
> button.flat:not(.image-button) { // an actual child
padding: rem(5.3px) rem(5.3px);
border-radius: 0;
-gtk-outline-radius: 0;
&:not(:active) {
transition: opacity 0.2s $slope_medium,
border-color 0.2s $slope_medium,
background-color 0.2s $slope_slow,
background-image 0.2s $slope_slow,
box-shadow 0.2s $slope_slow;
}
box.horizontal {
> label {
margin-bottom: rem(1.3px, $sw: 1.0);
padding-bottom: rem(4px);
font-weight: 700;
}
> image {
&:first-child {
color: $accent_color;
&:dir(ltr) { margin-left: 4px; }
&:dir(rtl) { margin-right: 4px; }
}
&:not(:first-child) { // 'arrow'
// same margins with 'eject' button
&:dir(ltr) { margin-right: rem(5.3px); }
&:dir(rtl) { margin-left: rem(5.3px); }
}
}
}
}
button.image-button {
margin: rem(2.7px) rem(5.3px) rem(4px);
&:not(:active) {
transition: opacity 0.2s $slope_medium,
border-color 0.2s $slope_medium,
background-color 0.2s $slope_slow,
background-image 0.2s $slope_slow,
box-shadow 0.2s $slope_slow;
}
}
}
.alternative-label { // 'always expanded' option
font-size: 15px; // same size with 'Local volumes' label?
font-weight: 400;
&:dir(ltr) { padding: 0 0 3px 3px; }
&:dir(rtl) { padding: 0 3px 3px 0; }
}
box.vertical > revealer {
> list { // drop-down list
border: 1px solid $borders_color;
background-color: $secondary_dark_color;
box-shadow: if($variant == light, $inline-shadow-light,
$inline-shadow-dark);
&.always-expand { // 'always expanded' option
// unset revealer elevations
border: none;
background-color: transparent;
box-shadow: none;
}
}
}
list {
background-color: transparent;
> row.activatable {
transition: none;
&:hover,
&:active {
color: $fg_color;
background-image: none;
button.text-button.name-button { // = 'toolbutton > button'
&,
&:hover,
&:active {
color: $fg_color;
background-color: transparent;
transition: none;
animation: none;
}
&:active { animation: flat_ripple_effect 0.2s $slope_slow forwards; }
}
}
button.image-button { // revive button transitions
&:not(:active) {
transition: opacity 0.2s $slope_medium,
border-color 0.2s $slope_medium,
background-color 0.2s $slope_slow,
background-image 0.2s $slope_slow,
box-shadow 0.2s $slope_slow;
}
}
button.text-button.name-button {
> box.horizontal { // adjust spacing
> image { margin: rem(5.3px) 0; }
> label { padding: rem(5.3px) 0 rem(6.7px); }
}
}
button.image-button.unmount-button {
&:not(.text-button) { // specificity bump for overriding our default
// 'eject' button spacing
margin: rem(1.3px) rem(5.3px);
padding: rem(4px);
}
}
}
label.dim-label {
font-size: 90%;
font-weight: 700;
}
}
box.unlock-area {
border-width: 1px 0 1px;
border-style: solid none solid;
border-color: $borders_color;
background-color: $secondary_dark_color;
box-shadow: if($variant == light, $inline-shadow-light,
$inline-shadow-dark);
entry { // where is the combo node?
min-height: $icon_size;
min-width: $icon_size;
margin: rem(1.3px) rem(5.3px);
padding: rem(4px);
}
button {
min-height: $icon_size;
min-width: $icon_size;
margin: rem(1.3px) rem(5.3px);
padding: rem(4px);
border-radius: 2px; // revert to square button
-gtk-outline-radius: 2px;
}
}
}
// keyboard indicator applet
.top,
.bottom {
widget.keyboard-indicator > widget > box.horizontal {
> widget > image {
margin-top: rem(-0.7px, $sw: 1.0);
&:dir(ltr) { padding: 1.3px 0 0 3px; }
&:dir(rtl) { padding: 1.3px 3px 0 0; }
}
> stack > widget.keyboard-label > label {
margin-top: rem(-0.7px, $sw: 1.0);
&:dir(ltr) { padding: 1.3px 3px rem(1.3px, $sw: 1.0) 0; }
&:dir(rtl) { padding: 1.3px 0 rem(1.3px, $sw: 1.0) 3px; }
}
}
}
// separator applet
.budgie-panel > box > widget > separator {
background-color: $panel_separator_color;
}
// workspace-switcher applet
widget > box.workspace-switcher {
// main container
> box.workspace-layout {
widget.workspace-item {
background-image: image(gtkopacity($inverted_fg_color, 0.4));
background-repeat: no-repeat;
transition-duration: 0s; // for underline-indicators
&.current-workspace { background-image: image($selected_bg_color); }
@each $position, $_size in (top, calc(100% - 4px) 3px),
(bottom, calc(100% - 4px) 3px),
(left, 3px calc(100% - 4px)),
(right, 3px calc(100% - 4px)) {
.#{$position} & {
background-position: #{$position} center;
background-size: #{$_size};
}
}
button.workspace-icon-button {
min-width: $icon_size;
min-height: $icon_size;
padding: 4px;
border-radius: 2px;
transition: $budgie_transition;
> image { opacity: 0.54; }
&:hover,
&:active {
-gtk-icon-effect: highlight;
> image { opacity: 0.87; }
}
}
// counter
label.workspace-more-label {
font-weight: 700;
opacity: 0.54;
}
&.current-workspace {
button.workspace-icon-button {
> image { opacity: 1.0; }
&:hover,
&:active { -gtk-icon-effect: highlight; }
}
label.workspace-more-label { opacity: 1.0; }
}
}
}
// 'plus' button
button.image-button.workspace-add-button { // expanded?
@extend %button_flat_normal;
min-width: $icon_size;
min-height: $icon_size;
padding: 4px;
border-radius: 0;
color: $inverted_secondary_accent_label_color;
background-color: transparent;
&:hover {
@extend %button_flat_hover;
background-color: transparent;
color: $inverted_accent_label_color;
}
&:active {
@extend %button_flat_active;
background-color: transparent;
color: $inverted_accent_label_color;
}
&:disabled { @include button(flat-insensitive); }
}
}
window.budgie-popover.workspace-popover {
$max_children_per_line: 4;
$requested_width: 150px;
box.workspace-popover-button-box {
> button.flat { // 'Rename' and 'Remove'
min-width: $requested_width;
padding: rem(5.3px) rem(8px + 5.3px) rem(6.7px);
border-radius: 0;
-gtk-outline-radius: 0;
font-weight: 500;
&:first-child { // draw an arrow
&:dir(ltr) {
border-image:-gtk-icontheme("pan-end-symbolic")
0 13.3 0 0 / 0 13.3px 0 0;
}
&:dir(rtl) {
border-image:-gtk-icontheme("pan-end-symbolic-rtl")
0 0 0 13.3 / 0 0 0 13.3px;
}
}
}
// hide unneeded separators
> separator.horizontal {
min-height: 0;
margin: 0;
background-color: transparent;
}
}
flowboxchild { // apps icon grid
button.flat:not(:active) {
transition-property: opacity,
border-color,
border-image,
background-color,
background-image,
box-shadow,
icon-shadow;
transition-timing-function: $slope_slow;
transition-duration: 0.2s;
}
image {
padding: ($requested_width - $icon_size * ($max_children_per_line + 1))
/ ($max_children_per_line * 2)
0;
}
}
}
// show-desktop applet
.budgie-panel > box > widget > button.flat {
// specificity bump to prevent conflicts
&:not(.raven-trigger):not(.budgie-menu-launcher) {
min-width: $icon_size;
min-height: $icon_size;
border-radius: 0;
color: $inverted_tertiary_fg_color; // dim normal state
transition: $budgie_transition;
&:hover {
background-image: image(transparent);
background-color: transparent;
color: $selected_fg_color;
}
&:active {
color: $selected_fg_color;
transition: $budgie_transition,
background-image 0s;
animation: budgie_ripple_effect 0.3s $slope_slow forwards;
}
&:checked {
background-image: image(transparent);
background-color: transparent;
color: $selected_bg_color;
}
}
}
// notifications
%budgie_notification_window,
.budgie-notification-window,
.budgie-osd-window {
border-radius: 2px;
background-color: transparent;
// draw actual backgrounds
.drop-shadow { background-color: gtkopacity($inverted_dark_color, 0.9); }
}
%budgie_notification,
.budgie-notification,
.budgie-osd {
// always use dark-variant
color: $inverted_fg_color;
background-color: transparent;
.notification-title {
color: $inverted_secondary_fg_color;
font-size: 110%;
font-weight: 500;
}
.notification-body {
color: $inverted_fg_color;
font-size: 90%;
font-weight: 400;
}
.budgie-osd-text {
color: $inverted_fg_color;
font-size: 110%;
}
progressbar { // mimic level-bar
min-height: 4px;
padding: 2px;
border-radius: 2px;
background-color: $inverted_dark_color;
box-shadow: $z-depth-1;
trough {
color: $inverted_fg_color;
background-color: $outline_track_color;
}
progress { background-color: $success_color; }
}
}
.budgie-notification,
.budgie-osd,
.budgie-session-dialog,
.budgie-polkit-dialog,
.drop-shadow {
button,
.linked > button { // OSD-style buttons
border-image: none; // hide underlines
color: $inverted_secondary_accent_label_color;
&:hover,
&:active,
&:checked { color: $inverted_accent_label_color; }
&:disabled { color: gtkopacity($inverted_accent_label_color, 0.4); }
}
}
// alt-tab apps switcher styling
$child_margin: 2px;
window.budgie-switcher-window {
border-radius: 2px;
background-color: transparent;
// draw actual backgrounds and shadows
.drop-shadow {
margin: 16px 24px 32px; // reserve area for shadows
border-radius: 2px;
background-color: gtkopacity($inverted_dark_color, 0.9);
box-shadow: $z-depth-4; // raise to level-4
label.budgie-switcher-title { // bottom label for app titles
// prepare for tall and dense fonts
min-height: 13.3px * 2; // use non-scaling unit
color: $inverted_fg_color;
font-weight: 500;
&:dir(ltr) { padding: 0 0 0 ($child_margin * 2); }
&:dir(rtl) { padding: 0 ($child_margin * 2) 0 0; }
}
}
flowboxchild { // icon-tiles
margin: $child_margin;
border-radius: 2px;
-gtk-outline-radius: 2px;
color: $inverted_secondary_accent_label_color;
background-color: transparent;
&:hover,
&:active {
background-color: gtkopacity($accent_color, 0.12);
color: $inverted_accent_label_color;
}
&:selected { // use the same values with Gnome-Shell
background-color: gtkopacity($accent_color, 0.25);
color: $inverted_accent_label_color;
-gtk-icon-effect: highlight;
&:disabled {
background-color: gtkopacity($inverted_fg_color, 0.12);
-gtk-icon-effect: dim;
&, label { color: $insensitive_inverted_fg_color; }
}
}
}
}
// an internal of the parent switcher-window
.budgie-switcher {
}
// run-dialog styling
.background.csd.budgie-run-dialog {
border-radius: 2px;
border: none;
background-color: gtkopacity($inverted_dark_color, 0.9);
scrolledwindow {
border-image: none; // remove underline indicator
background-color: transparent;
list {
background-color: transparent;
row.activatable {
background-color: transparent;
color: $inverted_secondary_fg_color;
transition: none;
.dim-label {
color: $inverted_secondary_fg_color;
opacity: 1.0;
}
&:hover,
&:active {
color: $inverted_fg_color;
.dim-label {
color: $inverted_fg_color;
opacity: 1.0;
}
}
}
}
}
box > box {
entry {
min-height: rem($widget_size, $sw: 1.0);
min-width: $icon_size * 25;
color: $inverted_fg_color;
caret-color: $inverted_fg_color;
font-size: 110%;
&:focus {
color: $selected_fg_color;
caret-color: $selected_fg_color;
}
&:disabled { color: $insensitive_inverted_fg_color; }
image {
&:not(:hover):not(:active) { color: $inverted_fg_color; }
&:active { color: $selected_bg_color; }
&:disabled { color: $insensitive_inverted_fg_color; }
}
}
}
scrollbar {
border: none;
background: none;
slider {
background-color: gtkopacity($inverted_tertiary_fg_color, 0.55);
&:hover {
background-color: gtkopacity($inverted_secondary_fg_color, 0.55);
}
&:active { background-color: $inverted_fg_color; }
&:disabled { opacity: 0.4; }
}
}
}
// session-dialog and polkit-dialog styling
.budgie-session-dialog,
.budgie-polkit-dialog {
border-radius: 2px;
border-width: 0;
// Always use dark-color of dark variant
background-color: gtkopacity($inverted_dark_color, 0.9);
color: $inverted_fg_color;
font-weight: 700;
decoration { // composite with drop-shadows
border-radius: 2px;
box-shadow: $z-depth-4;
&:backdrop {
box-shadow: $z-depth-2-backdrop;
transition: none;
}
}
buttonbox.linked > button {
padding: rem(9.3px) rem(13.3px) rem(10.7px);
border: 2px solid transparent;
border-radius: 0;
&:first-child {
border-radius: 0 0 0 2px;
border-right-width: 0;
}
&:last-child {
border-radius: 0 0 2px 0;
border-left-width: 0;
}
}
}
// polkit-dialog specific styling
.budgie-polkit-dialog {
entry {
&, &:focus {
color: $inverted_fg_color;
caret-color: $inverted_fg_color;
}
&:disabled { color: $insensitive_inverted_fg_color; }
}
.message { color: $inverted_secondary_fg_color; }
.failure {
color: $error_color;
font-weight: 700;
}
}
// raven-controller applet
button.flat.raven-trigger {
min-width: $icon_size;
min-height: $icon_size;
padding: 0;
border-radius: 0;
color: $inverted_fg_color;
transition: $budgie_transition;
&:hover,
&:checked {
background-image: image(transparent);
background-color: transparent;
color: $selected_fg_color;
}
&:active {
color: $selected_fg_color;
transition: $budgie_transition,
background-image 0s;
animation: budgie_ripple_effect 0.3s $slope_slow forwards;
}
image { margin: 0 3px; } // add internal spacing
.left &,
.right & {
image { margin: 3px 0; } // add internal spacing
}
}
// misc settings
.drop-shadow {
background-color: transparent;
background-image: none;
box-shadow: $z-depth-2;
}
// settings-window
window.background.budgie-settings-window.csd {
> box.horizontal > scrolledwindow > viewport.frame { // left-pane
&:dir(ltr) { border-right: 1px solid $borders_color; }
&:dir(rtl) { border-left: 1px solid $borders_color; }
}
box.settings-page.vertical { // right-pane
// reserve the margin for raised widget's drop-shadows
box.settings-frame.vertical > grid.horizontal { margin-bottom: 6px; }
// hide double-borders
buttonbox.inline-toolbar { border-style: none none solid; }
frame > box.vertical > overlay { // inline header
> label.dim-label { // title
font-size: 110%;
font-weight: 500;
}
> button.popup.suggested-action.toggle { // 'plus' button
@extend %gnome-software_round_button;
margin: 8px; // prevent truncated drop-shadow
}
}
frame > box.vertical > list > row {
&:dir(ltr) { padding-right: 12px; }
&:dir(rtl) { padding-left: 12px; }
button.desutructive-action.round-button {
@extend %gnome-software_round_button;
}
}
}
}
// pixel-saver(?) applet
.budgie-panel box.titlebar {
border-radius: 0;
background: unset;
> widget > label { color: $inverted_fg_color; } // titles
> button.image-button.titlebutton {
min-width: $icon_size;
min-height: $icon_size;
padding: 0;
background: none;
color: $inverted_fg_color;
image {
border-radius: 100px;
background-size: $icon_size $icon_size;
background-position: center center;
background-repeat: no-repeat;
transition-duration: 0s;
}
&:hover,
&:active {
background: none;
color: $selected_fg_color;
animation: none;
image { -gtk-icon-shadow: none; }
}
&.close {
&:hover image { background-image: image($destructive_color); }
&:active image { background-image: image($selected_bg_color); }
}
&:not(.close) {
&:hover image {
background-image: image(gtkopacity($selected_fg_color, 0.12));
}
&:active image {
background-image: image(gtkopacity($selected_fg_color, 0.25));
}
}
// hide unneeded button images when Raven widget was shown
&:disabled image { opacity: 0; }
}
&.horizontal { // spacing
padding: 0 3px;
> widget > label {
&:dir(ltr) { padding-right: 3px; }
&:dir(rtl) { padding-left: 3px; }
}
> button.image-button.titlebutton { padding: 0 3px; }
}
}
// /*******************
// * Lightdm-Greeter *
// *******************/
%greeter_panel_window {
background-image: image($panel_bg_color);
color: $inverted_fg_color;
box-shadow: none;
font-weight: 700;
text-shadow: none;
&, &.background,
> * > * { background-color: transparent; } // FIXME: ugly wildcard
// avoid translucent top-bar
&.osd { opacity: 1.0; } // >= 2.0.5
}
%greeter_panel_menubar {
background-color: transparent;
color: $inverted_fg_color;
&:hover {
color: $selected_fg_color;
box-shadow: inset 0 2px $selected_bg_color;
label,
image { color: $selected_fg_color; }
}
}
%greeter_panel_menubar_menuitem {
// flip underline-indicator vertically
padding: rem(5.3px, $sw: 1.0) 0 rem(6.7px, $sw: 1.0);
background-color: transparent;
&:hover { box-shadow: inset 0 2px $selected_bg_color; }
}
%greeter_panel_menu_menuitem {
padding: rem(5.3px) rem(8px) rem(6.7px);
font-weight: 400;
text-shadow: none;
&, label { color: $secondary_fg_color; }
&:hover,
&:hover label { color: $fg_color; }
&:disabled,
&:disabled label { color: $insensitive_fg_color; }
}
%greeter_entry {
// prevent junmping when showing CapsLock warning
min-height: rem($widget_size);
padding: 0 if($ref_weight < 1.0, 4px / 2, 8px / 2);
font-family: monospace;
&,
&:focus {
color: $inverted_fg_color;
caret-color: $inverted_fg_color;
}
&:disabled { color: $insensitive_inverted_fg_color; }
}
%non_csd_menu {
margin: unset;
padding: 1px;
border-radius: 0;
border-width: 1px;
border-style: solid;
border-color: $menu_highlight_color
$solid_light_borders_color
$solid_light_borders_color;
background-clip: border-box;
}
// gtk-greeter
.lightdm-gtk-greeter {
// top-panel styling
#panel_window {
@extend %greeter_panel_window;
menubar {
@extend %greeter_panel_menubar;
label,
image {
padding: 0 rem(6.7px, $sw: 1.0);
color: $inverted_fg_color;
}
> menuitem { @extend %greeter_panel_menubar_menuitem; }
menu menuitem { @extend %greeter_panel_menu_menuitem; }
}
}
// main container
#login_window,
#restart_dialog,
#shutdown_dialog {
padding: 0;
border-style: solid;
border-width: 11px;
// no need to be variant-specific, share the same asset instead
border-image: -gtk-scaled(url("assets/osd-shadow.png"),
url("assets/osd-shadow@2.png"))
11 / 11px stretch;
background-color: gtkopacity($inverted_dark_color, 0.9);
color: $inverted_fg_color;
box-shadow: none;
button {
padding: rem(9.3px, $sw: 1.0)
rem(13.3px, $sw: 1.0)
rem(10.7px, $sw: 1.0);
color: $inverted_secondary_fg_color;
&:hover,
&:active { color: $inverted_fg_color; }
&:disabled { color: $insensitive_inverted_fg_color; }
}
}
@each $node_id_1, $node_id_2, $_color in
('#login_window', '#login_button', $suggested_color),
('#restart_dialog', '#restart_button', $destructive_color),
('#shutdown_dialog', '#shutdown_button', $destructive_color) {
#{$node_id_1} button#{$node_id_2} {
background-color: #{$_color};
color: $secondary_selected_fg_color;
&:hover {
@extend %button_hover;
background-color: #{$_color};
color: $selected_fg_color;
}
&:active {
@extend %button_active;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:checked {
background-color: mix($selected_fg_color, $_color, 20%);
}
&:disabled {
@include button(insensitive, transparent,
$insensitive_inverted_fg_color);
}
}
}
#login_window {
button.combo {
min-height: rem($widget_size);
padding: 0 if($ref_weight < 1.0, 4px, 8px);
border-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to($outline_track_color),
to(transparent))
0 0 1 / 0 0 1px;
color: $inverted_fg_color;
font-weight: 500;
&:hover,
&:active {
border-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to($selected_bg_color),
to(transparent))
0 0 2 / 0 0 2px;
color: $selected_fg_color;
}
&:disabled,
&:checked:disabled {
border-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to($outline_track_color),
to(transparent))
0 0 1 / 0 0 1px;
color: $insensitive_inverted_fg_color;
}
}
entry { @extend %greeter_entry; }
infobar.error { // notification revealer
margin: 0 4px; // prevent unwanted overflow
border: none;
background-color: transparent;
color: $error_color;
font-weight: 700;
font-size: 110%;
transition: none; // transition causes visual glitches
}
}
#content_frame { padding-bottom: 14px; }
#buttonbox_frame {
padding-top: 8px; // reserve gap between infobar and buttonbox
}
// non-CSD context menus
window.background.popup > menu { @extend %non_csd_menu; }
}
// slick-greeter
$greeter_panel_height: 32px; // pixmap height
$greeter_panel_shadow: 11px; // pixmap shadow region
window.background.lightdm {
// top-panel
menubar { // broken
@extend %greeter_panel_menubar;
padding-top: ($greeter_panel_height - $greeter_panel_shadow - $icon_size)
/ 2;
font-weight: 700;
text-shadow: none;
> menuitem {
@extend %greeter_panel_menubar_menuitem;
padding: 0 rem(6.7px, $sw: 1.0);
label,
image { color: $inverted_fg_color; }
&:hover { box-shadow: inset 0 2px $selected_bg_color; }
label { margin: 0 2px rem(1.3px, $sw: 1.0); }
}
}
window.background.popup > menu {
@extend %non_csd_menu;
menuitem { @extend %greeter_panel_menu_menuitem; }
}
button {
&:not(.option-button):not(.toggle-button) {
padding: rem(6.7px, $sw: 1.0);
border-radius: 100px;
-gtk-outline-radius: 100px;
}
&.flat.option-button { // session logo button
padding: rem(6.7px, $sw: 1.0);
border-radius: 100px;
-gtk-outline-radius: 100px;
color: $inverted_fg_color;
image { opacity: 0.87; }
&:hover,
&:active {
color: $selected_fg_color;
image { opacity: 1.0; }
}
}
&, // back arrow
&.toggle-button { // session list rows
@extend %button_flat_normal;
padding: rem(10px) rem(13.3px);
border-radius: 0;
-gtk-outline-radius: 0;
background-color: transparent;
color: $inverted_fg_color;
font-size: 110%;
font-weight: 500;
label { padding-bottom: rem(1.3px, $sw: 1.0); }
image { opacity: 0.87; }
&:hover,
&:active,
&.selected {
image { opacity: 1.0; }
}
&:hover {
@extend %button_flat_hover;
background-color: transparent;
color: $selected_fg_color;
}
&:active {
@extend %button_flat_active;
background-color: transparent;
color: $selected_fg_color;
}
}
&.toggle-button.selected { // selected row
@extend %button_flat_normal;
background-image: image($selected_bg_color);
&, &:hover {
color: $selected_fg_color;
image { opacity: 1.0; }
}
}
}
entry,
.lightdm-combo entry { @extend %greeter_entry; }
entry:active { // for spinner
-gtk-icon-source: -gtk-icontheme('process-working-symbolic');
animation: spinner 1s linear infinite;
}
.lightdm-combo {
border-radius: 0;
background-color: transparent;
}
}
// /********
// * Nemo *
// ********/
.nemo-desktop.nemo-canvas-item {
@extend .nautilus-desktop.nautilus-canvas-item;
}
.nemo {
&-canvas-item { @extend .nautilus-canvas-item; }
&-list-dim-label { @extend .nautilus-list-dim-label; }
}
.nemo-window {
// workaround for invisible text in rename entry (Eeleditable.entry)
.nemo-window-pane scrolledwindow widget > widget.entry {
&, &:focus {
transition: none;
&:selected { // FIXME: selection node doesn't work?
@extend %selected_items;
}
}
}
infobar.error { // Administrative privileges
label {
font-size: 110%;
font-weight: 700;
}
}
// main tool-bar styling
grid > box > box > toolbar.primary-toolbar {
// draw bottom border and shadows
border-bottom: 1px solid $borders_color;
box-shadow: if($variant == light, $toolbar-shadow-light,
$toolbar-shadow-dark);
}
// tweak notebook colour
grid > paned > box > paned > box > notebook {
&, > stack:not(:only-child) {
background-color: $base_color;
}
}
// remove double-border
grid.vertical > paned.horizontal > box.vertical {
> scrolledwindow.frame {
border-width: 0;
}
}
// force using flat-style on bottom bar
grid.vertical > widget {
background-color: $secondary_dark_color;
box-shadow: if($variant=='light', $inline-shadow-light,
$inline-shadow-dark);
> box { padding: rem(2.7px); }
> box > button.image-button {
@extend %button_flat_normal;
min-width: rem(13.3px);
min-height: rem(29.3px);
border-radius: 2px;
-gtk-outline-radius: 2px;
padding: 0 rem(10px) 0;
border-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.001,
to($outline_track_color),
to(transparent))
0 0 0 / 0 0 0px;
background-color: transparent;
color: $secondary_fg_color;
&:hover {
@extend %button_flat_hover;
border-image: none;
background-color: transparent;
color: $fg_color;
}
&:checked {
@extend %button_flat_checked;
border-image: -gtk-gradient(radial,
center bottom, 0,
center bottom, 0.5,
to($selected_bg_color),
to(transparent))
0 0 2 / 0 0 2px;
background-color: transparent;
color: $fg_color;
&:disabled {
@extend %button_flat_checked_disabled;
border-image: none;
background-color: transparent;
color: $insensitive_fg_color;
}
}
&:disabled {
@extend %button_flat_disabled;
border-image: none;
background-color: transparent;
color: $insensitive_secondary_fg_color;
}
}
box > separator.vertical { // remove separator
min-width: 0;
color: transparent;
background-color: transparent;
}
}
}
// /************
// * Lollypop *
// ************/
// header grid?
paned.horizontal > paned.horizontal stack grid.vertical > grid.horizontal {
button.image-button {
&, &.toggle {
border-radius: 2px;
-gtk-outline-radius: 2px;
}
}
}
// playlists styling
row.trackrow {
&, &playing {
// lollypop can not understand outer marigns
button.image-button:not(.text-button),
.track-menu-button { // back to square button
&, &.toggle { // back to square button
margin: 0;
border-radius: 2px;
-gtk-outline-radius: 2px;
}
}
}
}
// Track menu GtkPopover
// parent container of GtkWidgets 'Ratings' and 'Heart'
grid.popover-rating-loved-grid {
// tweak bottom margin
margin-bottom: if($ref_weight < 1.0, calc(12px + 0.35rem),
calc(12px + 0.5rem));
}
// /***************************
// * Cinnamon-Control-Center *
// ***************************/
window.background:not(.csd) > box.vertical {
> stack > scrolledwindow > viewport,
> scrolledwindow > viewport {
iconview {
&, &.view {
background-color: transparent;
&:selected {
@extend %selected_items;
label { color: $selected_fg_color; }
}
}
}
box.vertical > toolbar {
border: none;
background-color: $bg_color;
box-shadow: none;
*:not(button) > label {
padding: rem(5.3px, $sw: 1.0);
color: $tertiary_fg_color;
}
}
box.vertical > list {
&, > row {
background-image: none;
background-color: $base_color;
transition-duration: 0s;
}
> row {
&:hover,
&:active { // unset hover/active effects
background-image: none;
background-color: transparent;
transition-duration: 0s;
animation: none;
}
&:selected { // use -image instead for >= 3.6.x
background-image: image($selected_bg_color);
color: $selected_fg_color;
}
}
}
}
}
// add extra vertical margins for weird switch node allocation
widget box.horizontal > widget + box.horizontal {
switch { margin: rem(5.3px) 0; }
}
// /************************
// * Cinnamon-Screensaver *
// ************************/
.csstage {
.unlockbox {
color: $inverted_fg_color;
font-size: 110%;
font-weight: 400;
}
.clock { color: $inverted_fg_color; }
.toppanel {
border: none;
color: $inverted_fg_color;
background-color: transparent;
}
@each $_class, $_radius in (audio, 0 0 2px 0),
(info, 0 0 0 2px) {
.#{$_class}panel { // OSDs placed at top-left/right corners
border: none;
border-radius: #{$_radius};
background-color: gtkopacity($inverted_dark_color, 0.9);
box-shadow: $z-depth-1;
}
}
.notificationwidget,
.powerwidget {
padding: 6px;
color: $inverted_fg_color;
background-color: transparent;
font-size: 100%;
font-weight: 500;
}
.auth-message {
color: $error_color;
font-size: 90%;
font-weight: 700;
}
.caps-message {
color: $warning_color;
font-size: 90%;
font-weight: 700;
}
.framedimage { // avatar?
border-radius: 2px;
border: none;
background-color: gtkopacity($inverted_fg_color, 0.12);
}
.passwordentry {
@include entry(flat-normal, $c: $inverted_fg_color);
border-radius: 0;
caret-color: inherit;
font-family: monospace;
&:focus {
@include entry(flat-focus, $c: $inverted_fg_color);
caret-color: inherit;
}
&:disabled { @include entry(flat-insensitive, $c: $inverted_fg_color); }
&:backdrop { // for alt-text keyboard layout?
color: $selected_bg_color;
}
image.left {
margin-right: 8px;
color: inherit;
}
}
.transparentbutton { // = 'unlock'/'switch-user' button
border: none;
background-color: transparent;
color: $inverted_secondary_accent_label_color;
&:hover {
background-color: $track_color;
color: $inverted_accent_label_color;
}
&:active,
&:checked { color: $inverted_accent_label_color; }
&:disabled {
color: gtkopacity($inverted_fg_color, 0.4);
&:checked {
color: gtkopacity($inverted_accent_label_color, 0.4);
}
}
}
.volumeslider {
min-height: 24px;
min-width: 100px;
padding: 3px 0px;
background-color: gtkopacity($inverted_fg_color, 0.2);
color: $success_color;
&:disabled { background-color: gtkopacity($success_color, 0.2); }
}
.trackname {
font-size: 90%;
color: $inverted_secondary_fg_color;
background-image: none;
background-color: transparent;
}
.albumartist {
font-size: 80%;
color: $inverted_tertiary_fg_color;
background-image: none;
background-color: transparent;
}
viewport {
&,
&.frame {
border-style: none;
background-color: transparent;
background-image: none;
}
}
}
// /*********
// * XFce4 *
// *********/
.XfceHeading {
border: 0 none transparent;
background-color: $bg_color;
color: $fg_color;
}
.xfce4-panel {
background-color: $panel_bg_color;
color: $inverted_fg_color;
font-weight: 700;
text-shadow: none;
-gtk-icon-shadow: none;
&, // unset borders
frame > border { border: 0 none transparent; }
&#XfcePanelWindow { // main panel container >= 4.13.3?
// FIXME: unneeded 1px borders are reserved by its code itself
border: 1px solid $panel_bg_color;
&, &.marching-ants { transition: none; } // unset transitions
}
button:not(:selected) { all: unset; } // unset all styling first
button {
background-color: transparent;
color: $inverted_fg_color;
font-weight: 700;
&:hover:not(:active):not(:checked) {
color: $selected_fg_color;
box-shadow: inset 0 -2px $outline_track_color;
}
&:checked {
color: $selected_fg_color;
box-shadow: inset 0 -2px $selected_bg_color;
}
&:active {
background-color: gtkopacity($inverted_fg_color, 0.12);
color: $selected_fg_color;
box-shadow: inset 0 -2px $selected_bg_color;
}
&#launcher-arrow { // launcher applet
// FIXME: quite weird pseudo-classe transitions, especially :hover
// state can't be cleared properly ( -> an upstream issue)
&, + button.toggle {
&:hover { box-shadow: none; } // hide indicators
}
+ button.toggle:checked { // 'arrow' toggle button
color: $selected_bg_color;
box-shadow: none;
}
}
&#xfce4-notification-plugin {
padding: 0 1px; // for 4.12.2
}
}
menu {
font-weight: 400; // for enforcing regular weight
text-shadow: none;
-gtk-icon-effect: none;
}
widget.tasklist > button.toggle { font-weight: 400; }
}
XfdesktopIconView.view {
border-radius: 2px;
background: transparent;
color: $selected_fg_color;
text-shadow: $z-depth-1-label; // non-sense for me
&:active {
background-color: $selected_bg_color;
text-shadow: none;
}
.rubberband { @extend rubberband; }
}
window#whiskermenu-window {
background-color: $secondary_base_color;
// no CSD class even if the sw compositor was enabled.
> frame > border {
border-radius: 0;
border-top-color: $menu_highlight_color;
}
// why wasn't .popup class implemented in this window node? :/
> decoration { box-shadow: $z-depth-3; }
stack > box > box.horizontal:first-child { // ugly resize-grip
widget { color: $outline_track_color; }
}
scrolledwindow {
> viewport button.radio {
&:not(:disabled) {
border-radius: 0;
background-image: none;
animation: none;
transition: none;
}
&:hover { background-color: $track_color; }
&:checked {
background-color: gtkopacity($selected_bg_color, 0.12);
color: $selected_bg_color;
}
}
treeview.view {
&:selected:hover {
background-color: transparent;
color: $fg_color;
}
}
}
}
// /**********
// * Thunar *
// **********/
window.thunar {
toolbar#location-toolbar {
border-bottom: 1px solid $borders_color;
// FIXME: need to unset for weird allocation height
entry { min-height: 0; }
}
notebook {
// hide unneeded border
stack > scrolledwindow.frame.standard-view { border-top-width: 0; }
// an allocation height of label node affects to close button's
// image height (it's quite weird).
header.top tab.reorderable-page > box > label { min-height: 0; }
}
}
// /**************
// * FeedReader *
// **************/
window.background > paned.titlebar > headerbar.titlebar {
button.flat {
// FIXME: when developer will use .image-button class?
&:not(.titlebutton):not(.image-button):not(.text-button):not(.toggle) {
min-width: $icon_size - 2px;
min-height: $icon_size - 2px;
margin: rem(5.3px + 2px) 0;
padding: 0 rem(($widget_size - $icon_size - 2px) / 2);
}
}
}
// left-paned haederbar
paned.headerbar_pane.titlebar > headerbar.header_right.titlebar {
> box.linked.raised > button.toggle { // should be .text-button
// back to square buttons
border-radius: 2px;
-gtk-outline-radius: 2px;
}
}
// article-list
overlay.article-list > stack {
> scrolledwindow > viewport.frame > list {
background-color: $bg_color;
> row.activatable {
&:hover { background-color: $track_color; }
&:selected {
&,
&:focus {
background-color: gtkopacity($selected_bg_color, 0.25);
&:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
&:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }
label {
&,
&.headline-read,
&.preview { color: $fg_color; }
}
}
}
}
}
}
revealer > widget > headerbar.imageOverlay.titlebar {
> box > button.close.titlebutton { // non-CSD inline-headerbar
min-width: $icon_size * 1.5;
min-height: $icon_size * 1.5;
padding: if($ref_weight < 1.0,
rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
rem(($widget_size - $icon_size * 1.5) / 2));
}
}
// /************
// * Synaptic *
// ************/
window > box.vertical > box.horizontal {
> toolbar {
background-color: transparent;
box-shadow: none;
toolitem > box {
label,
entry {
min-height: rem(13.3px);
padding-top: rem(1.3px);
padding-bottom: rem(1.3px);
font-size: 90%;
}
> label { color: $insensitive_fg_color; }
}
}
> widget { background-color: transparent; }
}
// /**********************
// * Eclipse/SWT (neon) *
// **********************/
window.background:not(.solid-csd) > box.vertical {
> scrolledwindow widget > toolbar {
box-shadow: none; // remove inline-shadows
button { // hard-coded crazy zero-padding
min-height: if($ref_weight < 1.0, $icon_size * 1.5, $icon_size * 1.75);
min-width: if($ref_weight < 1.0, $icon_size * 1.5, $icon_size * 1.75);
margin: 2px 0;
border-radius: 2px;
-gtk-outline-radius: 2px;
}
separator { margin: 2px 0; }
}
> scrolledwindow > widget > widget {
border-width: 0 0 1px;
border-style: none none solid;
border-color: transparent transparent $solid_light_borders_color;
}
scrolledwindow widget > widget > entry,
scrolledwindow widget > widget > combobox entry {
// min-height is hard-coded
padding-top: 0;
padding-bottom: 0;
}
widget > frame > widget > widget > scrolledwindow > textview {
// override hard-coded crazy rgb(0,0,0)
text { background-image: image($base_color); }
}
scrolledwindow widget > widget {
> checkbutton check,
> radiobutton radio { // disable ripple animations
&:hover,
&:active,
&:hover:checked,
&:hover:indeterminate { animation: none; }
}
}
}
// /*******************
// * Firefox Quantum *
// *******************/
%_html_button_spacing {
min-width: unset; // do not set min-width/height
min-height: unset;
padding: if($ref_weight < 1.0, 4px 8px 5px, 7px 11px 8px);
}
%_html_entry_spacing {
min-width: if($ref_weight < 1.0, 24px, 24px + 4px);
min-height: if($ref_weight < 1.0, 24px, 24px + 4px);
padding: if($ref_weight < 1.0, 0 4px, 0 7px);
}
%browser_csd_titlebutton {
// define global titlebutton class sizing
margin: 0; // unset margins
padding: 0;
background-position: center center;
background-repeat: no-repeat;
color: transparent; // hide stock icons
@each $_class, $_suffix1 in ('close', '-close'),
('minimize', '-minimize'),
('maximize', '-maximize') {
@each $_pseudo, $_suffix2 in ('', ''),
(':hover', '-active'),
(':active', '-active'),
(':backdrop', '-backdrop') {
&.#{$_class}#{$_pseudo} {
background-image:
-gtk-scaled(
url("assets/window#{$_suffix1}#{$_suffix2}.png"),
url("assets/window#{$_suffix1}#{$_suffix2}@2.png"));
}
}
}
&.close {
&:hover { background-color: $destructive_color; }
&:active { background-color: $selected_bg_color; }
&:backdrop:hover {
background-color: gtkopacity($destructive_color, 0.4);
}
}
&:not(.close) {
&:hover { background-color: gtkopacity($inverted_fg_color, 0.12); }
&:active { background-color: gtkopacity($inverted_fg_color, 0.25); }
&:backdrop:hover {
background-color: gtkopacity($inverted_fg_color, 0.12 * 0.4);
}
}
}
%browser_maxd_csd_titlebutton {
@each $_pseudo, $_suffix2 in ('', ''),
(':hover', '-active'),
(':active', '-active'),
(':backdrop', '-backdrop') {
&#{$_pseudo} {
background-image:
-gtk-scaled(url("assets/window-unmaximize#{$_suffix2}.png"),
url("assets/window-unmaximize#{$_suffix2}@2.png"));
}
}
}
#MozillaGtkWidget.background {
headerbar.titlebar { // >= nightly 60.0a1(2018-02-02)
// FIXME: no backdrop state, no maximized state, bullshit...
padding: 0 if($ref_weight < 1.0, (28px - $icon_size * 1.25) / 2,
(28px - $icon_size * 1.5) / 2);
&.default-decoration button.titlebutton {
@extend %browser_csd_titlebutton;
min-width: if($ref_weight < 1.0, $icon_size * 1.25,
$icon_size * 1.5);
min-height: if($ref_weight < 1.0, $icon_size * 1.25,
$icon_size * 1.5);
}
}
> window.background > menu { // context-menus
border: unset; // hide ugly double borders
background-color: $secondary_base_color;
// revert to standard separators
> separator {
padding: if($ref_weight < 1.0, 2px, 3px) // non-scalable units
0
if($ref_weight < 1.0, 3px, 4px);
border-top: // use opaque
if($ref_weight < 1.0, 2px, 3px) solid $secondary_base_color;
border-bottom:
if($ref_weight < 1.0, 3px, 4px) solid $secondary_base_color;
background-color: $solid_light_borders_color;
}
> menuitem > radio:checked {
-gtk-icon-source: -gtk-scaled(
url("assets/radio-checked#{$asset_suffix}.png"),
url("assets/radio-checked#{$asset_suffix}@2.png"));
}
}
> widget {
// 'PageInfo' window's ViewGroup > radio?
> radiobutton,
> checkbutton {
&:focus { outline-width: 0; } // hide outlines
}
border { border-color: $solid_light_borders_color; }
separator { background-color: $solid_light_borders_color; }
> scrolledwindow > textview text {
&:selected { @extend %selected_items; }
}
> button {
&, &.combo {
> button { // enforce fallback buttons inside the HTML pages
@extend %button_fallback_normal;
&:hover { @extend %button_fallback_hover; }
&:active,
&:checked { @extend %button_fallback_active; }
&:disabled { @extend %button_fallback_insensitive; }
&:checked:disabled {
@extend %button_fallback_checked_insensitive;
}
}
}
&.combo, // generic button and combo spacing
& { @extend %_html_button_spacing; }
// toolbar combo buttons in 'downloads' sub-window
&:not(.combo) > button { @extend %_html_button_spacing; }
}
> entry {
@extend %_html_entry_spacing;
// enforce fallback entries inside the HTML pages
@extend %entry_fallback_normal;
border-radius: 2px;
&:focus { @extend %entry_fallback_focus; }
&:disabled { @extend %entry_fallback_insensitive; }
}
> check,
> radio { // unset all
min-width: $icon_size;
min-height: $icon_size;
margin: 0;
padding: 0;
transition: none;
}
}
}
// /*************
// * Wireshark *
// *************/
window.background {
> box.vertical > toolbar:not(.primary-toolbar).horizontal {
border-bottom: 1px solid $borders_color;
box-shadow: none; // hide fake-shadows
}
paned > notebook > stack > scrolledwindow.frame > widget.view {
// transition causes missing 'selected-items'
background-image: none;
transition: none;
animation: none;
}
}
// /**************
// * Mate-Panel *
// **************/
// Most parts are themed in Gnome-panel section
PanelToplevel.background { @extend %gnome_panel_toplevel; }
#PanelWidget,
#PanelPlug,
#PanelApplet {
@extend %gnome_panel_applet;
background-color: $panel_bg_color; // >= 1.18.6
}
PanelSeparator {
border-width: 0;
background: none;
background-image: none;
color: $panel_separator_color;
}
@each $layout, $size, $dir in (horizontal, 7px 14px, right),
(vertical, 14px 7px, bottom) {
// a grip
PanelToplevel.#{$layout} MatePanelAppletFrameDBus {
background-image: linear-gradient(to #{$dir},
transparent 2px,
$panel_separator_color 2px,
$panel_separator_color 3px,
transparent 3px,
transparent 4px,
$panel_separator_color 4px,
$panel_separator_color 5px,
transparent 5px,
transparent 7px);
background-repeat: no-repeat;
background-size: #{$size};
@if $layout == horizontal {
&:dir(ltr) { background-position: left center; }
&:dir(rtl) { background-position: right center; }
}
@else if $layout == vertical { background-position: center top; }
}
}
// 'hide' arrow buttons
PanelToplevel.mate-panel-menu-bar > grid.horizontal > button {
@extend %button_flat_normal;
min-height: 4px;
min-width: 4px;
padding: 0;
border-radius: 0;
border-style: solid;
border-color: $panel_separator_color;
-gtk-outline-radius: 0;
background-color: transparent;
color: $inverted_fg_color;
&:hover {
@extend %button_flat_hover;
background-color: transparent;
color: $selected_fg_color;
}
&:active {
@extend %button_flat_active;
background-color: transparent;
color: $selected_fg_color;
}
&:disabled {
@extend %button_flat_disabled;
color: $insensitive_inverted_fg_color;
}
&:checked {
@extend %button_flat_checked;
background-color: transparent;
color: $selected_fg_color;
}
> image {
padding: 0 rem(4px, $sw: 1.0);
}
&:first-child {
&:dir(ltr) { border-width: 0 1px 0 0; }
&:dir(rtl) { border-width: 0 0 0 1px; }
}
&:not(:first-child) {
&:dir(ltr) { border-width: 0 0 0 1px; }
&:dir(rtl) { border-width: 0 1px 0 0; }
}
}
.mate-panel-menu-bar {
menubar,
#PanelApplet-window-menu-applet-button {
@extend %gnome_panel_menubar;
> menuitem { @extend %gnome_panel_menuitem; }
}
#clock-applet-button label {
// embed padding into label node directly (x 1.5)
padding: 0 rem(4px * 1.5, $sw: 1.0);
}
}
.mate-panel-menu-bar.vertical { // vertical layout
menubar,
#PanelApplet-window-menu-applet-button {
> menuitem {
padding: rem(4px, $sw: 1.0) 0;
&:hover { box-shadow: inset 2px 0 $selected_bg_color; }
}
}
#tasklist-button,
#clock-applet-button,
#showdesktop-button {
&:hover { box-shadow: inset 2px 0 $outline_track_color; }
&:checked,
&:hover:checked { box-shadow: inset 2px 0 $selected_bg_color; }
}
#clock-applet-button label { padding: rem(4px * 1.5, $sw: 1.0) 0; }
}
// Brisk-Menu applet
.mate-panel-menu-bar button.flat.toggle {
&.brisk-button {
padding: 0 rem(4px, $sw: 1.0);
border-radius: 0;
-gtk-outline-radius: 0;
background-image: none;
background-color: transparent;
color: $inverted_fg_color;
font-weight: 700;
&:hover {
background-image: none;
color: $selected_fg_color;
box-shadow: inset 0 -2px $outline_track_color;
}
&:active { animation: none; }
&:checked {
background-image: none;
color: $selected_fg_color;
box-shadow: inset 0 -2px $selected_bg_color;
}
}
// vertical panel mode?
&.brisk-button-vertical {
padding: 0;
&:hover { box-shadow: inset 2px 0 $outline_track_color; }
&:checked { box-shadow: inset 2px 0 $selected_bg_color; }
}
}
.brisk-menu {
border-top: 1px solid $menu_highlight_color;
entry { margin: rem(4px); } // search-entry
box.horizontal scrolledwindow { // right-pane
&:dir(ltr) { margin: rem(4px) rem(4px) rem(4px) 0; }
&:dir(rtl) { margin: rem(4px) 0 rem(4px) rem(4px); }
}
.categories-list { // left-pane
&:dir(ltr) { margin: rem(4px) 0 rem(4px) rem(4px); }
&:dir(rtl) { margin: rem(4px) rem(4px) rem(4px) 0; }
button.flat {
padding-top: unset;
padding-bottom: unset;
border-radius: 0; // remove roundness
-gtk-outline-radius: 0;
font-weight: 500;
transition-duration: 0.1s; // shorter duration
// almost covers :hover pseudo-class
&:checked {
background-color: transparent;
color: $selected_bg_color;
}
image { padding: rem(8px) 0; }
// for finer base-lines
label { padding-bottom: rem(0.7px); }
}
}
// hide separator above session-buttons
box.vertical > box.horizontal > box.vertical > separator.horizontal {
min-height: 0;
background-color: transparent;
}
.apps-list, // legacy
list.content-view.view { // right-pane
background-color: $base_color;
row.activatable {
padding: 0;
background-image: none;
transition-duration: 0s;
> button.flat {