budgie desktop styling #16

common/gtk-3.0/3.20/sass/_budgie.scss

@@ -0,0 +1,608 @@
+// main container
+.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: $panel_bg;
+  color: white;
+  font-weight: normal;
+
+  // used to indicate unread notifications
+  .alert { color: $suggested_color; }
+  
+  &:backdrop {
+      color: white;
+      background-color: $panel_bg;
+  }
+
+  // transparent-mode
+  &.transparent {
+    background-color: gtkopacity($panel_bg, 0.4);
+    color: white;
+
+  }
+
+  button {
+    @extend 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: gtkopacity($fg_color, 0.4); }
+
+  &.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: gtkopacity($fg_color, 0.4);
+        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: 1px;
+  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 $bg_color;
+
+    .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 $bg_color;
+
+    .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: $bg_color; }
+  }
+
+  .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: 2px;
+    }
+  }
+}
+
+// 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: 1px;
+    box-shadow: none;
+    font-size: 120%;
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+
+  button {
+    @extend row.activatable;
+
+    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: $base_bg_color;
+  border: none;
+  
+  &:hover {
+      background-color: gtkopacity($fg_color, 0.4);
+      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: gtkopacity($fg_color, 0.4);
+      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: 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: 2px;
+    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: 2px;
+  // 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: 2px;
+    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: 2px;
+  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: 0;
+
+    &: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: 1px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+
+  list .dim-label { opacity: 1; }
+
+  scrolledwindow { border-top: 1px solid $borders_color; }
+}

common/gtk-3.0/3.20/sass/_colors.scss

@@ -1,10 +1,14 @@
 // When color definition differs for dark and light variant,
 // it gets @if ed depending on $variant
 
+@function gtkopacity($c, $a) {
+  @return scale-color($c, $alpha: percentage(-1 + $a));
+}
 
 $base_color: if($variant =='light', #ffffff, #404552);
+$base_bg_color: #F5F6F7;
 $text_color: if($variant == 'light', #5c616c, #D3DAE3);
-$bg_color: if($variant =='light', #F5F6F7, #383C4A);
+$bg_color: if($variant =='light', $base_bg_color, #383C4A);
 $fg_color: if($variant =='light', #5c616c, #D3DAE3);
 
 $selected_fg_color: #ffffff;

common/gtk-3.0/3.20/sass/gtk-dark.scss

@@ -11,3 +11,4 @@ $transparency: 'true';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';

common/gtk-3.0/3.20/sass/gtk-darker.scss

@@ -11,3 +11,4 @@ $transparency: 'true';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';

common/gtk-3.0/3.20/sass/gtk-solid-dark.scss

@@ -11,3 +11,4 @@ $transparency: 'false';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';

common/gtk-3.0/3.20/sass/gtk-solid-darker.scss

@@ -11,3 +11,4 @@ $transparency: 'false';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';

common/gtk-3.0/3.20/sass/gtk-solid.scss

@@ -11,3 +11,4 @@ $transparency: 'false';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';

common/gtk-3.0/3.20/sass/gtk.scss

@@ -11,3 +11,4 @@ $transparency: 'true';
 @import 'lightdm';
 @import 'transparent_widgets';
 @import 'colors-public';
+@import 'budgie';