diff --git a/src/theme/3.18/sass/_main.scss b/src/theme/3.18/sass/_main.scss index d6c4b13..7906808 100644 --- a/src/theme/3.18/sass/_main.scss +++ b/src/theme/3.18/sass/_main.scss @@ -1,844 +1,904 @@ @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $roundness: 3px; $border_width: if($variant == 'default', 1px, 2px); $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left)); $asset_suffix: if($variant == 'default', '', '-hc'); // Used to reset all style properties set by the gtk theme %reset_style, GtkPopover GtkListBox, GtkPopover GtkListBoxRow { background: none; border: none; box-shadow: none; text-shadow: none; icon-shadow: none; opacity: 1; } +%reset_style, + GtkMenuBar { + GtkMenuItem { + padding: 4px 8px; + border: solid transparent; + border-width: 0; + } + + GtkMenuItem:hover { + background-color: $selected_bg_color; + color: $fg_color; + } + + GtkMenuItem:insensitive { + color: rgba(207, 218, 231, 0.2); + border-color: transparent; + } + + GtkMenuItem GtkLabel { + background: none; + color: $fg_color; + } + } + // Container for both the "panel" area and the shadow. Wise to keep // this transparent.. .budgie-container { background-color: transparent; } %widgets { * { padding: 0; outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 1px; outline-radius: 2px; @extend %reset_style; } .dim-label { opacity: 0.55; } .label:insensitive { color: transparentize($fg_color, 0.65); } .separator { color: rgba(0,0,0,0.25); } .cell { color: $fg_color; } GtkLabel, GtkImage { color: inherit; } // used to indicate unread notifications .alert { color: $alert_color; } // Entries .entry { padding: 4px 8px; border: $border_width solid; border-radius: $roundness; @include entry(normal); &:focus { @include entry(focus); } &:insensitive { @include entry(insensitive); } &:selected, &:selected:focus { color: $selected_fg_color; background-color: $selected_bg_color; } } // Buttons .button { background-clip: padding-box; padding: 4px 8px; border: $border_width solid; border-radius: $roundness; @include button(normal); &.flat:not(:hover):not(:active):not(:checked) { &, &:insensitive { @include button(flat); } } &:hover { @include button(hover); } &:active, &:checked { @include button(active); } &:insensitive { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } // Destructive and Sugggested action buttons @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal, $b_color, $selected_fg_color); &:hover { @include button(hover, $b_color, $selected_fg_color); } &:active, &:checked { @include button(active, $active_bg:darken($b_color, 10%)); } &:insensitive { opacity: 0.5; } } } &.text-button { padding: 4px 12px; } &.image-button { padding: 4px; } } // Linked Widgets .linked { > .entry, > .button { @extend %linked; } // linked square buttons look weird .button.image-button { padding: 4px 7px; } } %linked_middle { border-radius: 0; border-right-style: none; } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: $roundness; border-bottom-left-radius: $roundness; } &:last-child { border-top-right-radius: $roundness; border-bottom-right-radius: $roundness; border-right-style: solid; } &:only-child { border-radius: $roundness; border-style: solid; } } // ComboBoxes GtkComboBox.combobox-entry { .entry { &:dir(ltr) { border-top-right-radius: 0; border-bottom-right-radius: 0; } &:dir(rtl) { border-top-left-radius: 0; border-bottom-left-radius: 0; } } .button { &:dir(ltr) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: none; } &:dir(rtl) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: none; } } } // Spinbuttons .spinbutton { border-radius: $roundness; .button { border-color: transparentize($button_border, 0.3); border-style: none none none solid; border-radius: 0; &:dir(rtl) { border-style: none solid none none; } } } // Progressbars GtkProgressBar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.3); &.progressbar { background-color: $selected_bg_color; border: none; border-radius: 3px; } &.trough { border: none; border-radius: 3px; background-color: $trough_bg; } } // Scale .scale { -GtkScale-slider-length: 16; -GtkRange-slider-width: 16; -GtkRange-trough-border: 0; outline-offset: -1px; outline-radius: 2px; outline-color: transparentize($fg_color, 0.7); color: gtkalpha(currentColor, 0.7); &:insensitive { opacity: 0.4; } &.slider { border-radius: 50%; @if $variant == 'default' { background-image: -gtk-scaled(url("../assets/scale-slider.png"),url("../assets/scale-slider@2.png")); } @else { background-color: $selected_bg_color; } &:hover { background: $selected_bg_color; } } &.trough { margin: 5px; background-color: $trough_bg; border-radius: 2.5px; &.highlight { background-color: $selected_bg_color; } } } // Check and Radio Items @each $w,$a in ('check', 'checkbox'), ('radio','radio') { .#{$w} { color: $fg_color; -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}.png"),url("../assets/#{$a}@2.png")), -gtk-icontheme('#{$a}-symbolic')); &:checked, &:active { -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}-active.png"),url("../assets/#{$a}-active@2.png")), -gtk-icontheme('#{$a}-checked-symbolic')); } &:insensitive { color: transparentize($fg_color, 0.65); } &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); } } } // Switches GtkSwitch { font: 1; -GtkSwitch-slider-width: 45; -GtkSwitch-slider-height: 19; outline-color: transparent; &:insensitive { opacity: 0.4; } &.trough, &.slider { color: transparent; background-size: 45px 19px; background-repeat: no-repeat; background-position: right center; &:dir(rtl) { background-position: left center; } } &.trough { background-image: -gtk-scaled(url("../assets/switch#{$asset_suffix}.png"),url("../assets/switch#{$asset_suffix}@2.png")); &:active { background-image: -gtk-scaled(url("../assets/switch-active#{$asset_suffix}.png"),url("../assets/switch-active#{$asset_suffix}@2.png")); } } } // Scrollbars .scrollbar { -GtkRange-slider-width: 13; -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-min-slider-length: 42; -GtkRange-stepper-spacing: 0; -GtkRange-trough-under-steppers: 1; $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; .button { border: none; } &.overlay-indicator { &:not(.dragging):not(.hovering) { opacity: if($variant == 'default', 0.4, 1); -GtkRange-slider-width: 6px; .slider { margin: $_slider_margin - 1px 0; background-color: $scrollbar_bg; border: 1px solid $scrollbar_border; background-clip: padding-box; } .trough { border-style: none; background-color: transparent; } } &.dragging, &.hovering { opacity: 0.99; } } .slider { border-radius: 100px; margin: $_slider_margin; background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.5, 0)); &:hover { background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.3, 0)); } &:prelight:active { background-color: $selected_bg_color;} &:insensitive { background-color: transparent; } } &.fine-tune .slider { margin: $_slider_fine_tune_margin; } .trough { background-color: if($variant == 'default', transparentize(black, 0.6), $trough_bg); } } // Lists .list { color: $fg_color; } .list-row.activatable { padding: 3px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:insensitive { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); .label { color: inherit; } } } } @at-root %menu { .menu { .cell { color: inherit; } margin: 4px; padding: 0; border-radius: 0; background-color: $raven_bg; .menuitem { padding: 5px; color: $fg_color; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:insensitive { color: transparentize($fg_color, 0.65); } &.separator { color: transparentize($raven_bg, 1); } } &.button { border: none; &:hover { background-color: $selected_bg_color; } &:insensitive { color: transparentize($fg_color, 0.65); background-color: transparent; } } } .window-frame.csd.popup { box-shadow: 0 3px 6px transparentize(black, 0.55), 0 0 0 1px transparentize(black, 0.55); } } // Calendar GtkCalendar.raven-calendar { padding: 3px; color: $fg_color; &:inconsistent { color: gtkalpha(currentColor,0.3); } @if $variant=='default' { &:selected { color: $selected_bg_color; } } @else { &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } &.header { color: $fg_color; border: none; border-radius: 0; } &.button, &.button:focus { color: gtkalpha(currentColor,0.5); background-color: transparent; &:hover { color: $fg_color; background-color: transparent; } } } } // Budgie Menu .budgie-menu { padding: 0; .button:hover { -gtk-image-effect: none; } GtkSearchEntry.entry:not(:selected) { @extend %reset_style; padding: 8px 5px; border-bottom: 1px solid #{"@borders"}; border-radius: 0; font-size: 120%; &.image { color: currentColor; &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } .categories { border-width: 0; &:dir(ltr) { border-right: 1px solid #{"@borders"}; } &:dir(rtl) { border-left: 1px solid #{"@borders"}; } } .category-button { @extend %reset_style; padding: 8px; border-radius: 0; &:hover { background-color: #{"mix(@theme_base_color, @theme_fg_color, 0.1);"} } &:active, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:checked:insensitive { opacity: 0.5; GtkLabel { color: inherit; } } } .undershoot, .overshoot { background: none; } } // Menu Button .budgie-menu-launcher.button { padding: 0 2px; } // User Menu .user-menu { padding: 10px; .content-box GtkSeparator { color: #{"alpha(@theme_fg_color, 0.15)"}; } } // Places Menu .places-menu { padding: 0; .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-section-header { padding: 5px; border-bottom: 1px solid $raven_expander_border; box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"}; } .places-list { background: transparentize($fg_color, 0.96); border-bottom: 1px solid $raven_expander_border; } GtkListBox, GtkListBoxRow { padding: 0; margin: 0; } .unlock-area { border-top: 1px solid transparentize($raven_expander_border, 0.1); border-bottom: 1px solid transparentize($raven_expander_border, 0.1); } .unlock-area .entry { border-radius: 0; border: 0; } .unlock-area .button { border-radius: 0; border: 0; border-left: 1px solid transparentize($raven_expander_border, 0.1); } } // Raven Trigger .raven-trigger.button { padding-left: 2px; padding-right: 2px; } // Night Light indicator .night-light-indicator { padding: 0px; .view-header { font-size: 14px; padding: 10px; border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35)"}; box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04)"}; } .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04);"}; } } // Panel .budgie-panel { @extend %widgets; color: $fg_color; background-color: $panel_bg; background-image: none; box-shadow: none; border: none; .button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; padding-top: 0; padding-bottom: 0; .top & { padding-top: 1px; border-bottom: 1px solid transparentize($panel_bg, 1); } .bottom & { padding-bottom: 1px; border-top: 1px solid transparentize($panel_bg, 1); } } .separator { color: transparentize($fg_color, 0.85) } // End Section needs to be fancy @if $variant == 'default' { .end-region { background-color: rgba(0,0,0,0.2); &:dir(ltr) { border-left: 1px solid rgba(0,0,0,0.2); } &:dir(rtl) { border-right: 1px solid rgba(0,0,0,0.2); } } } } // Tasklist .budgie-panel WnckTasklist .button, .budgie-panel WnckTasklist .button:backdrop { border-radius: 0; @if $variant == 'default' { &:not(:hover):not(:active):not(:checked) { color: gtkalpha(currentColor, 0.5); } background: none; background-clip: padding-box; border: none; @extend %underscores; } } // Icon Tasklist .budgie-panel { .launcher { transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition padding: 0; background-clip: padding-box; } .unpinned .launcher, .pinned .launcher.running { @extend %underscores; } .pinned .launcher:not(.running):hover { background-color: transparentize(black, 0.8); box-shadow: inset 1px 0 transparentize(black, 0.8), inset -1px 0 transparentize(black, 0.8); } } %underscores { &:hover, &:active, &:checked { background-color: transparentize(black, 0.8); box-shadow: inset 1px 0 transparentize(black, 0.8), inset -1px 0 transparentize(black, 0.8); } @each $pos, $b_pos in $pos_list { .#{$pos} & { padding-#{$b_pos}: 2px; border-#{$pos}: 2px solid transparentize($panel_bg,1); @at-root { .#{$pos} .budgie-panel .unpinned .launcher, .#{$pos} .budgie-panel .pinned .launcher.running { border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5); } } &:hover { border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5); } &:active, &:checked { border-#{$pos}: 2px solid $selected_bg_color; } } } } @each $pos, $b_pos in $pos_list { // Panel borders .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; } // Raven borders .#{$pos} .raven-frame { padding: 0; background: none; border: none; border-#{$b_pos}: $border_width solid $raven_border; } // Shadows .#{$pos} .shadow-block { background-color: transparent; background-image: linear-gradient(to $b_pos, $panel_shadow, transparent); } } // Raven .raven { @extend %widgets; @extend %menu; color: $fg_color; background-color: $raven_bg; transition: 170ms ease-out; .raven-header { color: $fg_color; border: solid $raven_expander_border; border-width: 1px 0; background-color: $raven_expander_bg; &.top { border-top-style: none; } &.bottom { border-bottom-style: none; } } @if $variant=='default' { .expander-button { color: gtkalpha(currentColor, 0.5); } } .raven-background { color: $fg_color; background-color: $raven_background_bg; border-bottom: 1px solid $raven_background_border; &.middle { border-bottom-style: none; } // applet background between two headers } .powerstrip .button { padding: 10px; } .option-subtitle { font-size: smaller; } } // MPRIS Applet .raven-mpris { color: $mpris_overlay_fg; background-color: $mpris_overlay_bg; border: solid $mpris_overlay_border; border-width: 1px 0; .button.image-button { padding: 8px; } } // Notifications .budgie-notification-window { background: none; border-radius: 1px; } .budgie-notification { &.background { border-radius: 1px; } .notification-title { font-size: 110%; color: $fg_color; } .notification-body { color: transparentize($fg_color, 0.3); } } // On Screen Display in Budgie .budgie-osd-window { @extend .budgie-notification-window; } // Internal part of the OSD .budgie-osd { @extend .budgie-notification; } // Alt+tab switcher in Budgie .budgie-switcher-window { @extend .budgie-notification-window; // Lists GtkFlowBox { padding: 0px; margin: 0px; color: $fg_color; } GtkFlowBoxChild { padding: 3px; margin: 0px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:insensitive { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); .label { color: inherit; } } } } } // Internal part of the Switcher .budgie-switcher { @extend .budgie-notification; } .drop-shadow { @extend %widgets; color: $fg_color; background-color: $panel_bg; box-shadow: 0 2px 4px 0 $panel_shadow, 0 0 0 1px $panel_border; border-radius: 1px; } // Session Dialog .budgie-session-dialog { &.background { @extend .drop-shadow; } .dialog-title { font-size: 120%; } .linked.horizontal > .button { border-bottom: none; border-radius: 0; padding: 8px; &:first-child { border-left: none; border-radius: 0; } &:last-child { border-right: none; border-radius: 0; } } } // PolKit Dialog .budgie-polkit-dialog { @extend .budgie-session-dialog; @extend %menu; .message { color: transparentize($fg_color, 0.3); } .failure { color: $alert_color; } } // Run Dialog .budgie-run-dialog.background { @extend .drop-shadow; GtkSearchEntry.entry, GtkSearchEntry.entry:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; &.image { color: currentColor; &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } .list .list-row:selected .dim-label { opacity: 1; } GtkScrolledWindow { border-top: 1px solid darken($entry_border, 5%); } .undershoot, .overshoot { border: none; } } + +// Budgie styled Gtk Menus +.budgie-menubar { + GtkMenu { + margin: 4px; + padding: 5px; + border-radius: 0; + background-color: $panel_bg; + menuitem:hover { + background-color: $selected_bg_color; + color: $fg_color; + } + } + + GtkArrow { + border:none; + + &.top { + -gtk-icon-source:-gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); + } + + &.bottom { + -gtk-icon-source:-gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid mix($fg_color, $raven_bg, 10%); + } + } + + GtkMenuItem { + GtkMenuAccelerator { + color: transparentize($fg_color, 0.65); + } + + } +} + diff --git a/src/theme/3.20/sass/_main.scss b/src/theme/3.20/sass/_main.scss index bfbb04a..38532a6 100644 --- a/src/theme/3.20/sass/_main.scss +++ b/src/theme/3.20/sass/_main.scss @@ -1,896 +1,961 @@ @function gtkalpha($c,$a) { @return unquote("alpha(#{$c},#{$a})"); } $roundness: 3px; $border_width: if($variant == 'default', 1px, 2px); $pos_list: ((top, bottom),(bottom,top),(left,right),(right,left)); $asset_suffix: if($variant == 'default', '', '-hc'); // Used to reset all style properties set by the gtk theme %reset_style, popover list, popover row { background: none; border: none; box-shadow: none; text-shadow: none; -gtk-icon-shadow: none; opacity: 1; min-width: 0; min-height: 0; } +%reset_style, + menubar { + menuitem { + padding: 4px 8px; + border: solid transparent; + border-width: 0; + } + + menuitem:hover { + background-color: $selected_bg_color; + color: $fg_color; + } + + menuitem:disabled { + color: rgba(207, 218, 231, 0.2); + border-color: transparent; + } + + menuitem label { + background: none; + color: $fg_color; + } + } + // Container for both the "panel" area and the shadow. Wise to keep // this transparent.. .budgie-container { background-color: transparent; } %widgets { * { padding: 0; outline-color: transparentize($fg_color, 0.7); outline-style: dashed; outline-offset: -3px; outline-width: 1px; -gtk-outline-radius: 2px; margin: 0; @extend %reset_style; } .dim-label { opacity: 0.55; } label:disabled { color: transparentize($fg_color, 0.65); } label, image { color: inherit; } separator { background-color: rgba(0,0,0,0.25); min-width: 1px; min-height: 1px; } // used to indicate unread notifications .alert { color: $alert_color; } // Entries entry { padding: 4px 8px; border: $border_width solid; border-radius: $roundness; caret-color: $fg_color; @include entry(normal); image { color: $fg_color; &.left { padding-left: 0; padding-right: 3px; } &.right { padding-right: 0; padding-left: 3px; } } &:focus { @include entry(focus); } &:disabled { @include entry(insensitive); } selection, selection:focus { color: $selected_fg_color; background-color: $selected_bg_color; } } // Buttons button { background-clip: padding-box; padding: 4px 8px; border: $border_width solid; border-radius: $roundness; @include button(normal); separator { margin: 4px 1px; } &.flat:not(:hover):not(:active):not(:checked) { &, &:disabled { @include button(flat); } } &:hover { @include button(hover); } &:active, &:checked { @include button(active); } &:disabled { @include button(insensitive); &:active, &:checked { @include button(insensitive-active); } } // Destructive and Sugggested action buttons @each $b_type, $b_color in (suggested-action, $suggested_color), (destructive-action, $destructive_color) { &.#{$b_type} { @include button(normal, $b_color, $selected_fg_color); &:hover { @include button(hover, $b_color, $selected_fg_color); } &:active, &:checked { @include button(active, $active_bg:darken($b_color, 10%)); } &:disabled { opacity: 0.5; } } } &.text-button { padding: 4px 12px; } &.image-button { padding: 4px; } } stackswitcher button.text-button { min-width: 70px; } // Linked Widgets .linked { > entry, > button { @extend %linked; } // linked square buttons look weird button.image-button { padding: 4px 7px; } } %linked_middle { border-radius: 0; border-right-style: none; } %linked { @extend %linked_middle; &:first-child { border-top-left-radius: $roundness; border-bottom-left-radius: $roundness; } &:last-child { border-top-right-radius: $roundness; border-bottom-right-radius: $roundness; border-right-style: solid; } &:only-child { border-radius: $roundness; border-style: solid; } } // ComboBoxes combobox { arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } &.linked { button:nth-child(2) { &:dir(ltr) { @extend %linked:last-child; } &:dir(rtl) { @extend %linked:first-child; } } } } // Spinbuttons spinbutton { color: $fg_color; caret-color: currentColor; &:not(.vertical) { button, entry { @extend %linked; } } &:dir(ltr) entry, &:dir(rtl) button.up { border-radius: $roundness 0 0 $roundness; } } // Progressbars progressbar { padding: 0; font-size: smaller; color: transparentize($fg_color, 0.3); progress { background-color: $selected_bg_color; border: none; border-radius: 3px; } trough { border: none; border-radius: 3px; background-color: $trough_bg; } } // Scale scale { min-height: 10px; min-width: 10px; padding: 5px; value, marks { color: gtkalpha(currentColor, 0.7); } &:disabled { opacity: 0.4; } // slider sizing @if $variant == 'default' { slider { min-width: 6px; min-height: 6px; margin: 0; } &:hover slider { min-width: 14px; min-height: 14px; margin: -4px; } } @else { slider { min-width: 16px; min-height: 16px; margin: -6px; } } slider { border-radius: 50%; background-color: $selected_bg_color; } trough { outline-offset: 2px; -gtk-outline-radius: 2px; margin: 5px; background-color: $trough_bg; border-radius: 2.5px; highlight { border-radius: 2.5px; background-color: $selected_bg_color; } } } // Check and Radio Items @each $w,$a in ('check', 'checkbox'), ('radio','radio') { #{$w} { color: $fg_color; -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}.png"),url("../assets/#{$a}@2.png")), -gtk-icontheme('#{$a}-symbolic')); &:checked, &:active { -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}-active.png"),url("../assets/#{$a}-active@2.png")), -gtk-icontheme('#{$a}-checked-symbolic')); } &:disabled { color: transparentize($fg_color, 0.65); } &:indeterminate { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); } } } radiobutton radio, checkbutton check { min-width: 16px; min-height: 16px; margin: 0 2px; &:only-child { margin: 0; } } // Switches switch { font-size: 1px; outline-color: transparent; slider { min-width: 45px; min-height: 19px; } &, slider { color: transparent; background-size: 45px 19px; background-repeat: no-repeat; background-position: right center; &:dir(rtl) { background-position: left center; } } background-image: -gtk-scaled(url("../assets/switch#{$asset_suffix}.png"),url("../assets/switch#{$asset_suffix}@2.png")); &:checked { background-image: -gtk-scaled(url("../assets/switch-active#{$asset_suffix}.png"),url("../assets/switch-active#{$asset_suffix}@2.png")); } &:disabled { opacity: 0.4; } } // Scrollbars scrollbar { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; $_slider_margin: 3px; $_slider_fine_tune_margin: 4px; button { border: none; } &.overlay-indicator { &:not(.dragging):not(.hovering) { opacity: if($variant == 'default', 0.4, 1); slider { margin: 0; background-color: $scrollbar_bg; border: 1px solid $scrollbar_border; background-clip: padding-box; } trough { border-style: none; background-color: transparent; } // sizing &.vertical slider { min-width: 4px; margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } } &.dragging, &.hovering { opacity: 0.99; } } slider { border-radius: 100px; margin: $_slider_margin; background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.5, 0)); &:hover { background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.3, 0)); } &:hover:active { background-color: $selected_bg_color;} &:disabled { background-color: transparent; } } trough { background-color: if($variant == 'default', transparentize(black, 0.6), $trough_bg); } // sizing &.vertical { &.fine-tune slider { min-width: 4px; margin: $_slider_fine_tune_margin; } slider { min-height: 42px; min-width: 6px; margin: $_slider_margin; } } } // Lists list { color: $fg_color; } row.activatable { padding: 3px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:disabled { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); label { color: inherit; } } } } @at-root %menu { .menu, menu { margin: 4px; padding: 0; border-radius: 0; background-color: $raven_bg; menuitem { padding: 5px; color: $fg_color; &:hover { color: $selected_fg_color; background-color: $selected_bg_color; } &:disabled { color: transparentize($fg_color, 0.65); } separator { background-color: transparentize($raven_bg, 1); } } arrow { border: none; min-width: 16px; min-height: 16px; &.top { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); } &.bottom { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); border-top: 1px solid mix($fg_color, $raven_bg, 10%); } &:hover { background-color: $selected_bg_color; } &:disabled { color: transparentize($fg_color, 0.65); background-color: transparent; } } } .csd.popup decoration { box-shadow: 0 3px 6px transparentize(black, 0.55), 0 0 0 1px transparentize(black, 0.55); } } // Calendar calendar.raven-calendar { padding: 3px; color: $fg_color; &:indeterminate { color: gtkalpha(currentColor,0.3); } @if $variant=='default' { &:selected { color: $selected_bg_color; } } @else { &:selected { color: $selected_fg_color; background-color: $selected_bg_color; } } &.header { color: $fg_color; border: none; border-radius: 0; } &.button, &.button:focus { color: gtkalpha(currentColor,0.5); background-color: transparent; &:hover { color: $fg_color; background-color: transparent; } } } } // Budgie Menu .budgie-menu { padding : 0; button:hover { -gtk-icon-effect: none; } entry.search { @extend %reset_style; padding: 8px 5px; border-bottom: 1px solid #{"@borders"}; border-radius: 0; font-size: 120%; image { color: currentColor; &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } .categories { border-width: 0; &:dir(ltr) { border-right: 1px solid #{"@borders"}; } &:dir(rtl) { border-left: 1px solid #{"@borders"}; } } .category-button { @extend %reset_style; padding: 8px; border-radius: 0; &:hover { background-color: #{"mix(@theme_base_color, @theme_fg_color, 0.1);"} } &:active, &:checked { color: $selected_fg_color; background-color: $selected_bg_color; } &:checked:disabled { opacity: 0.5; label { color: inherit; } } } button:not(.category-button) { padding-top: 5px; padding-bottom: 5px; } undershoot, overshoot { background: none; } } // Menu Button button.budgie-menu-launcher { padding: 0 2px; } // User Menu .user-menu { padding: 10px; .content-box separator { background-color: #{"alpha(@theme_fg_color, 0.15)"}; } } // Raven Trigger button.raven-trigger { padding-left: 2px; padding-right: 2px; } // Places Menu .places-menu { padding: 0; .message-bar { border-top-left-radius: 3px; border-top-right-radius: 3px; } .name-button { border: 0; border-radius: 0; padding: 4px 6px; } .unmount-button { padding: 4px 4px; border: 0; border-radius: 0; } .places-section-header { padding: 5px; border-bottom: 1px solid $raven_expander_border; box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"}; } .places-list { background: transparentize($fg_color, 0.96); border-bottom: 1px solid $raven_expander_border; } list, row { padding: 0; margin: 0; } .unlock-area { border-top: 1px solid transparentize($raven_expander_border, 0.1); border-bottom: 1px solid transparentize($raven_expander_border, 0.1); } .unlock-area entry { border-radius: 0; border: 0; } .unlock-area button { border-radius: 0; border: 0; border-left: 1px solid transparentize($raven_expander_border, 0.1); } } // Night Light indicator .night-light-indicator { padding: 0px; .view-header { font-size: 14px; padding: 10px; border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04);"}; } .display-settings-button { border-top-left-radius: 0px; border-top-right-radius: 0px; border: none; padding: 3px; border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35);"}; box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04);"}; } } // Panel .budgie-panel { @extend %widgets; color: $fg_color; background-color: $panel_bg; background-image: none; box-shadow: none; border: none; button { border-top-width: 0; border-bottom-width: 0; border-radius: 0; } separator { background-color: transparentize($fg_color, 0.85) } // End Section needs to be fancy @if $variant == 'default' { .end-region { background-color: rgba(0,0,0,0.2); &:dir(ltr) { border-left: 1px solid rgba(0,0,0,0.2); } &:dir(rtl) { border-right: 1px solid rgba(0,0,0,0.2); } } } } // Tasklist .budgie-panel #tasklist-button, .budgie-panel #tasklist-button:backdrop { border-radius: 0; outline-color: transparent; @if $variant == 'default' { &:not(:hover):not(:active):not(:checked) { color: gtkalpha(currentColor, 0.5); } background: none; background-clip: padding-box; border: none; @extend %underscores; } &:drop(active) { box-shadow: inset 0 0 0 1px $selected_bg_color; } } // Icon Tasklist .budgie-panel { button.flat.launcher { @extend %reset_style; outline-color: transparent; transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); border-color: transparentize($panel_bg,1); // fixes the transition border-radius: 0; padding: 0; background-clip: padding-box; } .unpinned button.flat.launcher, .pinned button.flat.launcher.running { @extend %underscores; } .pinned button.flat.launcher:not(.running):hover { background-color: transparentize(black, 0.8); box-shadow: inset 1px 0 transparentize(black, 0.8), inset -1px 0 transparentize(black, 0.8); } } %underscores { &:hover, &:active, &:checked { background-color: transparentize(black, 0.8); box-shadow: inset 1px 0 transparentize(black, 0.8), inset -1px 0 transparentize(black, 0.8); } @each $pos, $b_pos in $pos_list { .#{$pos} & { padding-#{$b_pos}: 2px; border-#{$pos}: 2px solid transparentize($panel_bg,1); @at-root { .#{$pos} .budgie-panel .unpinned button.flat.launcher, .#{$pos} .budgie-panel .pinned button.flat.launcher.running { border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5); } } &:hover { border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5); } &:active, &:checked { border-#{$pos}: 2px solid $selected_bg_color; } } } } @each $pos, $b_pos in $pos_list { // Panel borders .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; } // Raven borders .#{$pos} .raven-frame { padding: 0; background: none; border { border: none; border-#{$b_pos}: $border_width solid $raven_border; } } // Shadows .#{$pos} .shadow-block { background-color: transparent; background-image: linear-gradient(to $b_pos, $panel_shadow, transparent); } } // Raven .raven { @extend %widgets; @extend %menu; color: $fg_color; background-color: $raven_bg; transition: 170ms ease-out; .raven-header { min-height: 32px; color: $fg_color; border: solid $raven_expander_border; border-width: 1px 0; background-color: $raven_expander_bg; &.top { border-top-style: none; } &.bottom { border-bottom-style: none; } } @if $variant=='default' { .expander-button { color: gtkalpha(currentColor, 0.5); } } .raven-background { color: $fg_color; background-color: $raven_background_bg; border-bottom: 1px solid $raven_background_border; &.middle { border-bottom-style: none; } // applet background between two headers } .powerstrip button { padding: 10px; } .option-subtitle { font-size: smaller; } } // MPRIS Applet .raven-mpris { color: $mpris_overlay_fg; background-color: $mpris_overlay_bg; border: solid $mpris_overlay_border; border-width: 1px 0; button.image-button { padding: 8px; } } // Notifications .budgie-notification-window { background: none; border-radius: 1px; } .budgie-notification { &.background { border-radius: 1px; } .notification-title { font-size: 110%; color: $fg_color; } .notification-body { color: transparentize($fg_color, 0.3); } } .drop-shadow { @extend %widgets; color: $fg_color; background-color: $panel_bg; box-shadow: 0 2px 4px 0 $panel_shadow, 0 0 0 1px $panel_border; border-radius: 1px; } // On Screen Display in Budgie .budgie-osd-window { @extend .budgie-notification-window; } // Internal part of the OSD .budgie-osd { @extend .budgie-notification; } // Alt+tab switcher in Budgie .budgie-switcher-window { @extend .budgie-notification-window; // Flowbox flowbox { color: $fg_color; } flowboxchild { padding: 3px; color: $fg_color; &:hover { background-color: $button_bg; } &:active { color: $fg_color; } &:selected { color: $selected_fg_color; background-color: $selected_bg_color; &:active { color: $selected_fg_color; } &:hover { background-color: mix(black, $selected_bg_color, 10%); } &:disabled { color: transparentize($selected_fg_color, 0.3); background-color: transparentize($selected_bg_color, 0.3); label { color: inherit; } } } } } // Internal part of the Switcher .budgie-switcher { @extend .budgie-notification; } // Session Dialog .budgie-session-dialog { color: $fg_color; background-color: $panel_bg; @extend %widgets; .dialog-title { font-size: 120%; } decoration { border-radius: 1px; box-shadow: 0 2px 4px 0 $panel_shadow, 0 0 0 1px $panel_border; } .linked.horizontal > button { padding: 8px; border-bottom: none; border-radius: 0; &:first-child { border-left: none; border-radius: 0; } &:last-child { border-right: none; border-radius: 0; } } } // PolKit Dialog .budgie-polkit-dialog { @extend .budgie-session-dialog; @extend %menu; .message { color: transparentize($fg_color, 0.3); } .failure { color: $alert_color; } } // Run Dialog .budgie-run-dialog { @extend .budgie-session-dialog; entry.search, entry.search:focus { font-size: 120%; padding: 8px 5px; border: none; box-shadow: none; image { &:dir(ltr) { padding-left: 8px; padding-right: 12px; } &:dir(rtl) { padding-left: 12px; padding-right: 8px; } } } list row:selected .dim-label { opacity: 1; } scrolledwindow { border-top: 1px solid darken($entry_border, 5%); } } + +// Budgie styled Gtk Menus +.budgie-menubar { + menu { + margin: 4px; + padding: 5px; + border-radius: 0; + background-color: $panel_bg; + menuitem:hover { + background-color: $selected_bg_color; + color: $fg_color; + } + } + + arrow { + border:none; + min-width:16px; + min-height:16px; + + &.top { + -gtk-icon-source:-gtk-icontheme("pan-up-symbolic"); + border-bottom: 1px solid mix($fg_color, $raven_bg, 10%); + } + + &.bottom { + -gtk-icon-source:-gtk-icontheme("pan-down-symbolic"); + border-top: 1px solid mix($fg_color, $raven_bg, 10%); + } + } + + menuitem { + accelerator { + color: transparentize($fg_color, 0.65); + } + + check, radio { + min-height: 16px; + min-width: 16px; + } + } +}