diff --git a/Paper/gtk-3.18/apps/_budgie.scss b/Paper/gtk-3.18/apps/_budgie.scss index 075d16c..8d1fd34 100644 --- a/Paper/gtk-3.18/apps/_budgie.scss +++ b/Paper/gtk-3.18/apps/_budgie.scss @@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc'); // Budgie .budgie-container { - border: none; - box-shadow: none; - background: transparent; - font-size: 100%; - transition: 170ms ease-out; + background-image: none; + background-color: transparent; + + &:backdrop { + background-image: none; + background-color: transparent; + } } // Budgie Menu @@ -145,7 +147,6 @@ $asset_suffix: if($variant == 'default', '', '-hc'); .raven { color: $fg_color; background-color: transparentize($bg_color, 0.02); - transition: 170ms ease-out; .raven-header { font: bold; @@ -160,9 +161,6 @@ $asset_suffix: if($variant == 'default', '', '-hc'); &.top { border-top-style: none; } &.bottom { border-bottom-style: none; } - >.button { - font:normal; - } } @if $variant=='default' { @@ -170,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc'); } .raven-background { - background:transparent; + background-color: $base_color; border-bottom: 1px solid $borders_color; box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9); &.middle { border-bottom-style: none; } // applet background between two headers + } + .raven-calendar { + border:none; + padding: 2px; + border-bottom:1px solid $borders_color; + } + + .powerstrip { background-color: transparent; border: none; @@ -192,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc'); font-size: 100%; &:hover { - background: transparentize(black,0.9); - border: 1px solid transparentize(black,0.8); box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8); transition: 170ms ease all; } + + &:active { + box-shadow: 0 1px transparentize(white,0.9); + transition: 170ms ease all; + } } .option-subtitle { @@ -219,13 +228,16 @@ $asset_suffix: if($variant == 'default', '', '-hc'); // Notifications .budgie-notification-window { - border-radius: 1px; + border:none; + border-top: 1px solid transparentize(white,0.9); + border-radius: 4px; + background-color: $bg_color; + box-shadow: 0 2px 2px 0 $shadow_color; } .budgie-notification { + &.background { - background-color: white; - border-radius: 4px; } .notification-title { @@ -233,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc'); color: $fg_color; } - .notification-body { color: transparentize($budgie_panel_fg_color, 0.3); } + .notification-body { + border:none; + color: transparentize($budgie_panel_fg_color, 0.3); + } } .drop-shadow { diff --git a/Paper/gtk-3.18/gtk-dark.css b/Paper/gtk-3.18/gtk-dark.css index c79b24f..382e672 100644 --- a/Paper/gtk-3.18/gtk-dark.css +++ b/Paper/gtk-3.18/gtk-dark.css @@ -4236,36 +4236,33 @@ GtkSwitch { outline-offset: -4px; transition: all 200ms ease-in; border: none; - border-radius: 14px; + border-radius: 16px; color: transparent; - background-color: transparent; + background-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); } GtkSwitch:insensitive { - background-color: rgba(0, 0, 0, 0.1); } - GtkSwitch:backdrop { - background-color: #37474f; - transition: 200ms ease-out; } - GtkSwitch:backdrop:insensitive { - background-color: #3d4f57; } + background-color: rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); } GtkSwitch:active, GtkSwitch:checked { background-color: #449ac2; } GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop { background-color: #57a4c8; } - GtkSwitch:active:backdrop .slider:backdrop, - GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop, - GtkSwitch:checked:backdrop slider:backdrop { - box-shadow: none; - background-color: rgba(55, 71, 79, 0.9); - border: none; } GtkSwitch .slider { - padding: 2px; - border-radius: 50%; + border: none; + padding: 3px; + border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - background-color: #2d3940; - box-shadow: none; } + background-color: #455a64; + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } + GtkSwitch .slider:active { + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } GtkSwitch .slider:backdrop { - box-shadow: none; } + background-color: #475d67; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); } GtkSwitch .slider:insensitive { + background-color: #3b4c55; + border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: none; } GtkSwitch .trough:active, GtkSwitch .trough:checked { background-color: #449ac2; } @@ -4923,11 +4920,11 @@ treeview.view header button:active { border-right: 2px solid #449ac2; } .budgie-container { - border: none; - box-shadow: none; - background: transparent; - font-size: 100%; - transition: 170ms ease-out; } + background-image: none; + background-color: transparent; } + .budgie-container:backdrop { + background-image: none; + background-color: transparent; } .budgie-menu GtkSearchEntry.entry:not(:selected) { border: none; @@ -5009,8 +5006,7 @@ treeview.view header button:active { .raven { color: #cfd8dc; - background-color: rgba(55, 71, 79, 0.98); - transition: 170ms ease-out; } + background-color: rgba(55, 71, 79, 0.98); } .raven .raven-header { font: bold; text-shadow: 0 1px rgba(0, 0, 0, 0.2); @@ -5024,14 +5020,16 @@ treeview.view header button:active { border-top-style: none; } .raven .raven-header.bottom { border-bottom-style: none; } - .raven .raven-header > .button { - font: normal; } .raven .raven-background { - background: transparent; + background-color: #455a64; border-bottom: 1px solid #222c31; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); } .raven .raven-background.middle { border-bottom-style: none; } + .raven .raven-calendar { + border: none; + padding: 2px; + border-bottom: 1px solid #222c31; } .raven .powerstrip { background-color: transparent; border: none; @@ -5044,10 +5042,11 @@ treeview.view header button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.1); font-size: 100%; } .raven .powerstrip .button:hover { - background: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2); transition: 170ms ease all; } + .raven .powerstrip .button:active { + box-shadow: 0 1px rgba(255, 255, 255, 0.1); + transition: 170ms ease all; } .raven .option-subtitle { font-size: smaller; } @@ -5063,15 +5062,17 @@ treeview.view header button:active { padding: 8px; } .budgie-notification-window { - border-radius: 1px; } + border: none; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + background-color: #37474f; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); } -.budgie-notification.background { - background-color: white; - border-radius: 4px; } .budgie-notification .notification-title { font-size: 110%; color: #cfd8dc; } .budgie-notification .notification-body { + border: none; color: rgba(207, 216, 220, 0.7); } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog { diff --git a/Paper/gtk-3.18/gtk.css b/Paper/gtk-3.18/gtk.css index f203c72..f41ca0c 100644 --- a/Paper/gtk-3.18/gtk.css +++ b/Paper/gtk-3.18/gtk.css @@ -4245,36 +4245,33 @@ GtkSwitch { outline-offset: -4px; transition: all 200ms ease-in; border: none; - border-radius: 14px; + border-radius: 16px; color: transparent; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0px 1px rgba(255, 255, 255, 0.3); } GtkSwitch:insensitive { - background-color: rgba(0, 0, 0, 0.1); } - GtkSwitch:backdrop { - background-color: #f7f7f7; - transition: 200ms ease-out; } - GtkSwitch:backdrop:insensitive { - background-color: #fafafa; } + background-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); } GtkSwitch:active, GtkSwitch:checked { background-color: #347D9F; } GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop { background-color: #3a8cb2; } - GtkSwitch:active:backdrop .slider:backdrop, - GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop, - GtkSwitch:checked:backdrop slider:backdrop { - box-shadow: none; - background-color: rgba(247, 247, 247, 0.9); - border: none; } GtkSwitch .slider { - padding: 2px; - border-radius: 50%; + border: none; + padding: 3px; + border-radius: 12px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); - background-color: #f7f7f7; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); } + background-color: #ffffff; + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } + GtkSwitch .slider:active { + background-color: white; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); } GtkSwitch .slider:backdrop { - box-shadow: none; } + background-color: #fcfcfc; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); } GtkSwitch .slider:insensitive { + background-color: #f2f2f2; + border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: none; } GtkSwitch .trough:active, GtkSwitch .trough:checked { background-color: #347D9F; } @@ -4938,11 +4935,11 @@ treeview.view header button:active { border-right: 2px solid #347D9F; } .budgie-container { - border: none; - box-shadow: none; - background: transparent; - font-size: 100%; - transition: 170ms ease-out; } + background-image: none; + background-color: transparent; } + .budgie-container:backdrop { + background-image: none; + background-color: transparent; } .budgie-menu GtkSearchEntry.entry:not(:selected) { border: none; @@ -5024,8 +5021,7 @@ treeview.view header button:active { .raven { color: #444; - background-color: rgba(247, 247, 247, 0.98); - transition: 170ms ease-out; } + background-color: rgba(247, 247, 247, 0.98); } .raven .raven-header { font: bold; text-shadow: 0 1px rgba(0, 0, 0, 0.2); @@ -5039,14 +5035,16 @@ treeview.view header button:active { border-top-style: none; } .raven .raven-header.bottom { border-bottom-style: none; } - .raven .raven-header > .button { - font: normal; } .raven .raven-background { - background: transparent; + background-color: #ffffff; border-bottom: 1px solid #d1d1d1; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); } .raven .raven-background.middle { border-bottom-style: none; } + .raven .raven-calendar { + border: none; + padding: 2px; + border-bottom: 1px solid #d1d1d1; } .raven .powerstrip { background-color: transparent; border: none; @@ -5059,10 +5057,11 @@ treeview.view header button:active { box-shadow: 0 1px rgba(255, 255, 255, 0.1); font-size: 100%; } .raven .powerstrip .button:hover { - background: rgba(0, 0, 0, 0.1); - border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2); transition: 170ms ease all; } + .raven .powerstrip .button:active { + box-shadow: 0 1px rgba(255, 255, 255, 0.1); + transition: 170ms ease all; } .raven .option-subtitle { font-size: smaller; } @@ -5078,15 +5077,17 @@ treeview.view header button:active { padding: 8px; } .budgie-notification-window { - border-radius: 1px; } + border: none; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 4px; + background-color: #f7f7f7; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); } -.budgie-notification.background { - background-color: white; - border-radius: 4px; } .budgie-notification .notification-title { font-size: 110%; color: #444; } .budgie-notification .notification-body { + border: none; color: rgba(207, 216, 220, 0.7); } .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog { diff --git a/Paper/gtk-3.18/widgets/_switches.scss b/Paper/gtk-3.18/widgets/_switches.scss index 3c926d9..6d0791d 100644 --- a/Paper/gtk-3.18/widgets/_switches.scss +++ b/Paper/gtk-3.18/widgets/_switches.scss @@ -11,61 +11,52 @@ GtkSwitch { transition: all 200ms ease-in; border: none; - border-radius: 14px; + border-radius: 16px; color: transparent; - background-color: if($variant == 'light', transparentize(black, 0.9), transparent); + background-color: if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.8)); box-shadow: if($variant == 'light', (inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight), 0 0 0 1px transparentize(black, 0.7)); &:insensitive { background-color: transparentize(black, 0.9); + box-shadow: if($variant == 'light', inset 0 0 0 1px transparentize(black, 0.9), 0 0 0 1px transparentize(black, 0.8)); } - &:backdrop { - background-color: $backdrop_bg_color; - transition: $backdrop_transition; - - &:insensitive { background-color: $insensitive_bg_color; } - } - - &:active, &:checked { background-color: $selected_bg_color; &:backdrop { background-color: $backdrop_selected_bg_color; - - .slider, - slider { - &:backdrop { - box-shadow:none; - background-color:transparentize($bg_color, 0.1); - border:none; - } - } } } // Handle .slider { - padding:2px; - border-radius: 50%; + border:none; + padding:3px; + border-radius: 12px; transition: $button_transition; - background-color: if($variant == 'light', $bg_color, darken($bg_color, 5%)); + background-color: $base_color; - box-shadow: if($variant == 'light', ( - 0 2px 2px transparentize(black, 0.8), - 0 1px 2px transparentize(black, 0.8) - ),( - none - )); + box-shadow: inset 0 1px 0 0 transparentize(white,0.9), + 0 2px 2px 0 transparentize(black, 0.8), + 0 1px 2px 0 transparentize(black, 0.8); + + &:active { + background-color: white; + box-shadow: 0 2px 2px 0 transparentize(black, 0.8), + 0 1px 2px 0 transparentize(black, 0.8); + } &:backdrop { - box-shadow:none; + background-color: $backdrop_base_color; + box-shadow: 0 1px 2px 0 transparentize(black, 0.9); } &:insensitive { + background-color: $insensitive_base_color; + border: 1px solid transparentize(black, 0.8); box-shadow:none; } } diff --git a/Paper/gtk-3.20/apps/_budgie.scss b/Paper/gtk-3.20/apps/_budgie.scss index ad9996c..8d1fd34 100644 --- a/Paper/gtk-3.20/apps/_budgie.scss +++ b/Paper/gtk-3.20/apps/_budgie.scss @@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc'); // Budgie .budgie-container { - border: none; - box-shadow: none; - background: transparent; - font-size: 100%; - transition: 170ms ease-out; + background-image: none; + background-color: transparent; + + &:backdrop { + background-image: none; + background-color: transparent; + } } // Budgie Menu @@ -145,23 +147,20 @@ $asset_suffix: if($variant == 'default', '', '-hc'); .raven { color: $fg_color; background-color: transparentize($bg_color, 0.02); - transition: 170ms ease-out; .raven-header { font: bold; text-shadow: 0 1px $shadow_color; + icon-shadow: 0 1px $shadow_color; background-color: $bg_color; color: $fg_color; - border-top: 1px solid $borders_color; - border-bottom: 1px solid $borders_color; + border: solid $borders_color; + border-width: 1px 0 1px 0; box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9); &.top { border-top-style: none; } &.bottom { border-bottom-style: none; } - >.button { - font:normal; - } } @if $variant=='default' { @@ -169,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc'); } .raven-background { - background-color: transparentize($bg_color, 0.02); + background-color: $base_color; border-bottom: 1px solid $borders_color; box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9); &.middle { border-bottom-style: none; } // applet background between two headers + } + .raven-calendar { + border:none; + padding: 2px; + border-bottom:1px solid $borders_color; + } + + .powerstrip { background-color: transparent; border: none; @@ -191,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc'); font-size: 100%; &:hover { - background: transparentize(black,0.9); - border: 1px solid transparentize(black,0.8); box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8); transition: 170ms ease all; } + + &:active { + box-shadow: 0 1px transparentize(white,0.9); + transition: 170ms ease all; + } } .option-subtitle { @@ -205,23 +215,29 @@ $asset_suffix: if($variant == 'default', '', '-hc'); // MPRIS Applet .raven-mpris { + text-shadow: 0 1px $shadow_color; + icon-shadow: 0 1px $shadow_color; color: $budgie_panel_fg_color; background-color: transparentize($budgie_panel_bg_color, 0.2); border: solid transparentize(black, 0.8); border-width: 1px 0; + box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9); .button.image-button { padding: 8px; } } // Notifications .budgie-notification-window { - border-radius: 1px; + border:none; + border-top: 1px solid transparentize(white,0.9); + border-radius: 4px; + background-color: $bg_color; + box-shadow: 0 2px 2px 0 $shadow_color; } .budgie-notification { + &.background { - background-color: white; - border-radius: 4px; } .notification-title { @@ -229,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc'); color: $fg_color; } - .notification-body { color: transparentize($budgie_panel_fg_color, 0.3); } + .notification-body { + border:none; + color: transparentize($budgie_panel_fg_color, 0.3); + } } .drop-shadow {