| // /****************** |
| // * 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-filter: brightness(1.2); |
| |
| > 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-filter: brightness(1.2); } |
| |
| > image { opacity: 1.0; } |
| } |
| } |
| |
| @at-root %running_budgie_icon_tasklist_button, |
| .unpinned button.flat.launcher, |
| .pinned button.flat.launcher.running { |
| &:hover { -gtk-icon-filter: brightness(1.2); } |
| |
| > 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; |
| } |
| } |
| |
| // 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 |
| |
| .bottom & { padding: 2px 0 2px; } // revive bottom padding |
| |
| &, |
| > 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.budgie-container & { 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 { // stop weird and unhandled ripple-effect |
| &, .indicator-item { |
| &: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 |
| |
| .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 |
| popover.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-filter: brightness(1.2); |
| |
| > 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-filter: brightness(1.2); } |
| } |
| |
| 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-filter: brightness(1.2); |
| &:disabled { |
| background-color: gtkopacity($inverted_fg_color, 0.12); |
| -gtk-icon-filter: opacity(0.5); |
| |
| &, 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: radial-gradient(circle farthest-corner at center, |
| $outline_track_color 100%, |
| transparent) |
| 0 0 1 / 0 0 1px; |
| color: $inverted_fg_color; |
| font-weight: 500; |
| &:hover, |
| &:active { |
| border-image: radial-gradient(circle farthest-corner at center, |
| $selected_bg_color 100%, |
| transparent) |
| 0 0 2 / 0 0 2px; |
| color: $selected_fg_color; |
| } |
| &:disabled, |
| &:checked:disabled { |
| border-image: radial-gradient(circle farthest-corner at center, |
| $outline_track_color 100%, |
| 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 { |
| &, > box > 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: radial-gradient(circle farthest-corner at center, |
| $outline_track_color 0%, |
| 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: radial-gradient(circle farthest-corner at center, |
| $selected_bg_color 100%, |
| 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; } |
| |
| ࿎PanelWindow { // 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; |
| } |
| } |
| |
| ﳤ-notification-plugin { |
| padding: 0 1px; // for 4.12.2 |
| } |
| } |
| |
| menu { |
| font-weight: 400; // for enforcing regular weight |
| text-shadow: none; |
| -gtk-icon-filter: 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 widget, |
| &:last-child > widget:last-child { // ugly resize-grip |
| 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 > box > 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; |
| } |
| |
| list.content-view.view { // right-pane |
| background-color: $base_color; |
| |
| row.activatable { |
| padding: 0; |
| background-image: none; |
| transition-duration: 0s; |
| |
| > button.flat { |
| padding-top: unset; |
| padding-bottom: unset; |
| border-radius: 0; // remove roundness |
| -gtk-outline-radius: 0; |
| font-weight: 400; |
| transition-duration: 0s; // needs quicker response |
| |
| // set vertical padding with icon's padding |
| > box.horizontal > image { padding: rem(5.3px) 0; } |
| } |
| } |
| } |
| } |
| |
| .mate-panel-applet-slider { |
| background-color: transparent; |
