diff --git a/src/themes/Kali/sass/gtk3-dark.scss b/src/themes/Kali/sass/gtk3-dark.scss index a812df95..b0d17452 100644 --- a/src/themes/Kali/sass/gtk3-dark.scss +++ b/src/themes/Kali/sass/gtk3-dark.scss @@ -13,4 +13,5 @@ $high-contrast:'false'; @import 'gtk3/upstream/libhandy/Adwaita-base'; @import 'gtk3/_common-tweaks'; @import 'gtk3/_applications'; +@import 'gtk3/_budgie'; @import 'gtk3/upstream/_colors-public'; diff --git a/src/themes/Kali/sass/gtk3.scss b/src/themes/Kali/sass/gtk3.scss index b755b1f6..0f11407e 100644 --- a/src/themes/Kali/sass/gtk3.scss +++ b/src/themes/Kali/sass/gtk3.scss @@ -13,4 +13,5 @@ $high-contrast:'false'; @import 'gtk3/upstream/libhandy/Adwaita-base'; @import 'gtk3/_common-tweaks'; @import 'gtk3/_applications'; +@import 'gtk3/_budgie'; @import 'gtk3/upstream/_colors-public'; diff --git a/src/themes/Kali/sass/gtk3/_budgie.scss b/src/themes/Kali/sass/gtk3/_budgie.scss new file mode 100644 index 00000000..6c47dd80 --- /dev/null +++ b/src/themes/Kali/sass/gtk3/_budgie.scss @@ -0,0 +1,607 @@ + +.budgie-container { background-color: transparent; } + +$menuitem_size: 28px; +$medium_size: 32px; +$large_size: 44px; +$container_padding: 6px; +$z-depth-2: rgba(0, 0, 0, 0.28); +$z-depth-4: rgba(0, 0, 0, 0.34); + +*:drop(active):focus, +*:drop(active) { + box-shadow: inset 0 0 0 1px $selected_bg_color +} + +.budgie-panel { + // solid-mode + // always use dark-color of dark variant + background-color: $_dark_base_color; + color: white; + font-weight: normal; + + image { -gtk-icon-shadow: 0 1px 2px rgba(0, 0, 0, .5); } + + label { text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } + + // used to indicate unread notifications + .alert { color: $suggested_bg_color; } + + &:backdrop { + color: white; + background-color: transparentize($_dark_base_color, 0.2); + } + + // transparent-mode + &.transparent { + background-color: transparentize($_dark_base_color, 0.2); + color: white; + + } + + button { + min-height: 16px; + min-width: 16px; + padding: 0; + border-radius: 0; + } + + &.horizontal button { padding: 0 4px; } + + &.vertical button { padding: 4px 0; } + + separator { background-color: transparentize($fg_color, 0.6); } + + &.vertical #tasklist-button { min-height: 32px; } + + .end-region { + background-color: rgba(0,0,0,0.3); + border-radius: 0px; + separator { background-color: transparentize(white, 0.85); } + label { + font-weight: 700; + color: white; + } + } +} + +.budgie-panel { + button.flat.launcher { + padding: 0; + border-radius: 0; + border: none; + background-image: radial-gradient(circle farthest-corner at center, + gtkalpha($fg_color, 0) 100%, + transparent 0%), + image(gtkalpha($fg_color, 0)); + background-position: center center; + + > image { + opacity: 0.87; + } + + &:hover { + -gtk-icon-effect: highlight; + + > image { opacity: 1.0; } + } + &:active { + > image { opacity: 1.0; } + } + &:checked { + background-color: transparent; + &:hover { -gtk-icon-effect: highlight; } + + > image { opacity: 1.0; } + } + } + + .unpinned button.flat.launcher, + .pinned button.flat.launcher.running { + &:hover { -gtk-icon-effect: highlight; } + + > image { + background-size: 2px 2px; + background-repeat: no-repeat; + opacity: 1.0; + } + + &:hover, + &:active, + &:checked { + > image { background-image: none; } + } + } +} + +// draw underscores and dots +@each $position, $_line in (top, 0 2px), + (bottom, 0 -2px), + (left, 2px 0), + (right, -2px 0) { + .#{$position} .budgie-panel { + button#tasklist-button, + button.flat.launcher { + &:hover { + box-shadow: inset #{$_line} gtkalpha($fg_color, 0.4); + background-color: transparentize($fg_color, 0.6); + border: none; + } + &: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-position: #{$position} center; + } + + &:hover, + &:active, + &:checked { + box-shadow: inset #{$_line} $selected_bg_color; + } + } + } +} + +@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}, + gtkalpha(#000000, 0.23), + gtkalpha(#000000, 0.08), + transparent); + } +} + +// budgie specific popover widgets +.budgie-popover { + border-style: none; + border-width: 1px; + border-color: $z-depth-2; + border-radius: 6px; + box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28); + background-color: $bg_color; + + .container { padding: 2px; } + + border { border: none; } + + list { background-color: transparent; } + + row { + padding: 0; + + &:hover { box-shadow: none; } + } + + &:not(.budgie-menu) button.flat:not(.image-button) { + min-height: $menuitem_size; + padding: 0 8px; + color: $fg_color; + font-weight: normal; + + &:disabled { color: $insensitive_fg_color; } + } + + &.budgie-menu { + .container { padding: 0; } + } + + &.user-menu { + .container { padding: 8px; } + + separator { margin: 4px 0; } + } + + &.sound-popover { + separator { margin: 3px 0; } + } + + &.night-light-indicator { + .container { padding: 8px; } + } + + &.places-menu { + .container { padding: 8px; } + + .places-list:not(.always-expand) { + margin-top: 4px; + padding-top: 4px; + border-top: 1px solid $borders_color; + } + + // I guess this really should be hard-coded as well as other dim-labels. + .alternative-label { + padding: 3px; + font-size: 15px; + } + } + + &.workspace-popover { + .container { padding: 2px 8px 8px; } + + separator { margin: 4px 0; } + + flowboxchild { padding: 0; } + } +} + +// main menu styling +.workspace-switcher { + .workspace-layout { + border: 0 solid $panel_bg; + + .top &, + .bottom & { + &:dir(ltr) { border-left-width: 1px; } + + &:dir(rtl) { border-right-width: 1px; } + } + + .left &, + .right & { border-top-width: 1px; } + } + + .workspace-item, + .workspace-add-button { + border: 0 solid darken($panel_bg, 5%); + + .top &, + .bottom & { + &:dir(ltr) { border-right-width: 1px; } + + &:dir(rtl) { border-left-width: 1px; } + } + + .left &, + .right & { border-bottom-width: 1px; } + } + + .workspace-item { + + &.current-workspace { background-color: darken($panel_bg, 5%); } + } + + .workspace-add-button { + &:hover { box-shadow: none; } + + &:active { background-image: none; } + + &:active image { margin: 1px 0 -1px; } + } + + .workspace-icon-button { + .budgie-panel & { // to overwrite the .budgie-panel button style below + min-height: 24px; + min-width: 24px; + padding: 0; + border-radius: 6px; + } + } +} + +// Budgie Menu +.budgie-menu { + &.background { + padding: 0; + background-color: $base_color; + } + + scrollbar, + entry.search { background-color: transparent; } + + entry.search { + border-style: none; + border-bottom: 1px solid $borders_color; + border-radius: 999px; + box-shadow: none; + font-size: 120%; + padding-top: 6px; + padding-bottom: 6px; + } + + button { + min-height: 32px; + padding: 0 8px; + border-radius: 0; + color: $fg_color; + font-weight: normal; + } + + row { + padding: 0; + + &:hover { box-shadow: none; } + } +} + +// Menu Button +button.budgie-menu-launcher { + // padding: 0 2px; + color: white; + border: none; + + &:hover { + background-color: transparentize($fg_color, 0.6); + border: none; + } +} + +// User Menu +popover.background.user-menu { + padding: 8px; + + .content-box { background-color: transparent; } + + separator { margin: 4px 0; } + + row { + padding: 0; + box-shadow: none; + background-image: none; + } +} + +// Raven Trigger +button.raven-trigger { + color: white; + border: none; + + &:hover { + background-color: transparentize($fg_color, 0.6); + border: none; + } +} + +// Places Menu +popover.background.places-menu { + padding: 8px; + + // FIXME: untested + .message-bar { + // margin-bottom: 4px; + } + + .name-button.text-button { + // padding: 4px 8px; + padding-left: 8px; + padding-right: 8px; + + image { + &:dir(ltr) { margin-right: 8px - 5px; } + &:dir(rtl) { margin-left: 8px - 5px; } + } + } + + // FIXME: untested + .unmount-button { + // padding: ($medium_size - 24px) / 2; + } + + .places-section-header > image { + &:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; } + &:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; } + } + + .places-list { + margin-top: 4px; + padding-top: 4px; + border-top: 1px solid $borders_color; + background-color: transparent; + } + + row { + padding: 0; + box-shadow: none; + background-image: none; + } + + // FIXME: untested + .unlock-area { + entry { + } + + button { + } + } +} + +frame.raven-frame > border { + border-style: none; + box-shadow: none; +} + +// Raven +.raven { + background-color: $bg_color; + color: $fg_color; + padding: $container_padding 0 0 0; + border: none; + + .raven-header { + min-height: $medium_size; + padding: 3px; + + &.top { + padding: 2px 0; + background-color: $bg_color; + color: $fg_color; + + stackswitcher button { + margin: -$container_padding 0; + min-height: $medium_size; + } + + } + + &.bottom { border-top: 1px solid $borders_color; } + } + + viewport.frame .raven-header { margin-top: -8px; } + + .raven-background { + border-style: solid none; + border-width: 1px; + border-color: $borders_color; + background-color: $base_color; + + // &.middle { border-bottom-style: none; } // applet background between two headers + + } + + scrolledwindow.raven-background { border-bottom-style: none; } + + .powerstrip button { + margin: 2px 0 1px; + padding: ($large_size - 24px) / 2; + } + + .option-subtitle { font-size: smaller; } +} + +// Calendar +calendar.raven-calendar { + // padding: 3px; + border-style: none; + background-color: transparent; + + &:selected { + border-radius: 6px; + background-color: $bg_color; + } +} + +// MPRIS Applet +.raven-mpris { + background-color: rgba($bg_color, 0.8); + color: $fg_color; + + label { min-height: 24px; } + +} + +// Notifications +.budgie-notification-window { + background-color: transparent; + color: $osd_fg_color; + border-radius: 6px; + // draw actual backgrounds + .drop-shadow { background-color: $osd_bg_color; } +} + +.budgie-notification { + .notification-title { font-size: 110%; color: $osd_fg_color; } + .notification-body { @extend .dim-label; color: $osd_fg_color; } + background-color: $osd_bg_color; + color: $osd_fg_color; +} + +// On Screen Display in Budgie +.budgie-osd-window { + @extend .budgie-notification-window; +} + +// Internal part of the OSD +.budgie-osd { + @extend .budgie-notification; + .budgie-osd-text { font-size: 120%; } +} + +// Alt+tab switcher in Budgie +.budgie-switcher-window { + @extend .budgie-notification; + + .drop-shadow { + margin: 8px 8px 16px; // reserve area for shadows + border-radius: 6px; + background-color: $osd_bg_color; + box-shadow: $z-depth-2; + label.budgie-switcher-title { + color: $osd_fg_color; + &:dir(ltr) { padding: 0 0 0 6px; } + &:dir(rtl) { padding: 0 6px 0 0; } + } + } +} + +// Internal part of the Switcher +.budgie-switcher { + @extend .budgie-notification; +} + +.drop-shadow { + margin: 5px 9px; + padding: 3px; + border-radius: 2px; + box-shadow: none; + background-color: $bg_color; + + //.linked > button { border-radius: 2px; } +} + +%budgie_dialog { + border-radius: 6px; + background-color: $bg_color; + + //decoration { border-radius: 2px; } +} + +// Session Dialog +.budgie-session-dialog { + @extend %budgie_dialog; + + label:not(:last-child), + .dialog-title { font-size: 120%; } + + .linked.horizontal > button { + padding: 8px 16px; + border-top: 1px solid $borders_color; + border-radius: 6px; + + &:first-child { border-bottom-left-radius: 2px; } + + &:last-child { border-bottom-right-radius: 2px; } + } +} + +// PolKit Dialog +.budgie-polkit-dialog { + @extend %budgie_dialog; + + .message { color: $fg_color; } + + .failure { color: $destructive_color; } +} + +// Run Dialog +.budgie-run-dialog { + @extend %budgie_dialog; + + background-color: $base_color; + border-style: none; + + entry.search { + font-size: 120%; + box-shadow: none; + background-color: transparent; + border-style: none; + border-bottom: 1px solid $borders_color; + border-radius: 0; + padding-top: 6px; + padding-bottom: 6px; + } + + list .dim-label { opacity: 1; } + + scrolledwindow { border-top: 1px solid $borders_color; } +}