aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.18/sass
diff options
context:
space:
mode:
Diffstat (limited to 'common/gtk-3.0/3.18/sass')
-rw-r--r--common/gtk-3.0/3.18/sass/_applications.scss55
-rw-r--r--common/gtk-3.0/3.18/sass/_colors-public.scss7
-rw-r--r--common/gtk-3.0/3.18/sass/_colors.scss72
-rw-r--r--common/gtk-3.0/3.18/sass/_common.scss275
-rw-r--r--common/gtk-3.0/3.18/sass/_drawing.scss56
-rw-r--r--common/gtk-3.0/3.18/sass/_lightdm.scss6
-rw-r--r--common/gtk-3.0/3.18/sass/_transparent_widgets.scss4
-rw-r--r--common/gtk-3.0/3.18/sass/_unity.scss2
8 files changed, 273 insertions, 204 deletions
diff --git a/common/gtk-3.0/3.18/sass/_applications.scss b/common/gtk-3.0/3.18/sass/_applications.scss
index cd3d82c..13fc8b9 100644
--- a/common/gtk-3.0/3.18/sass/_applications.scss
+++ b/common/gtk-3.0/3.18/sass/_applications.scss
@@ -57,9 +57,6 @@ SushiFontWidget {
//
// GNOME Terminal
//
-$terminal_bg: #2A2F36;
-$terminal_fg: white;
-
TerminalWindow {
.background {
background-color: transparent;
@@ -161,12 +158,34 @@ NemoWindow GtkSeparator.separator.horizontal {
}
NemoWindow .primary-toolbar NemoPathBar.linked > .button {
+ $_linked_separator_color: $header_button_border;
+
@include button(header-hover);
- &:hover { border-color: $selected_bg_color; }
+ &:hover { background-color: lighten($header_button_bg, 15%); }
&:active, &:checked { @include button(header-active); }
+ &:insensitive { color: transparentize($header_fg, 0.4); }
@extend %linked;
+
+ &:hover {
+ box-shadow: inset 1px 0 $_linked_separator_color,
+ inset -1px 0 $_linked_separator_color;
+ }
+ &:active, &:checked { box-shadow: none; }
+
+ &:first-child {
+ &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
+ }
+ &:last-child {
+ &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
+ }
+ &:only-child {
+ &:hover { box-shadow: none; }
+ &:active, &:checked { box-shadow: none; }
+ }
}
//
@@ -288,7 +307,7 @@ GbSearchBox.linked {
@include entry(header-normal);
- &:hover { @include entry(header-normal); border-color: $selected_bg_color; }
+ &:hover { @include entry(header-focus); }
&:active, &:checked { @include entry(header-focus); }
&:insensitive { @include entry(header-insensitive); }
}
@@ -296,15 +315,15 @@ GbSearchBox.linked {
> GtkMenuButton.button:last-child:dir(ltr) {
border-left-style: none;
- border-radius: 0 14.5px 14.5px 0;
- outline-radius: 0 12.5px 12.5px 0;
+ border-radius: 0 3px 3px 0;
+ outline-radius: 0 1px 1px 0;
&:hover { box-shadow: -1px 0 $selected_bg_color; }
}
> GtkMenuButton.button:first-child:dir(rtl) {
border-right-style: none;
- border-radius: 14.5px 0 0 14.5px;
- outline-radius: 12.5px 0 0 12.5px;
+ border-radius: 3px 0 0 3px;
+ outline-radius: 1px 0 0 1px;
&:hover { box-shadow: 1px 0 $selected_bg_color; }
}
@@ -446,8 +465,14 @@ EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so rese
margin: 2px;
padding: 4px;
- &:hover { background-color: lighten($selected_bg_color, 4%) }
- &:active { background-color: darken($selected_bg_color, 4%) }
+ &:hover {
+ color: $selected_fg_color;
+ background-color: lighten($selected_bg_color, 4%);
+ }
+ &:active {
+ color: $selected_fg_color;
+ background-color: darken($selected_bg_color, 4%);
+ }
.toolbar .linked &.button {
background: none;
@@ -478,6 +503,14 @@ TotemGrilo.vertical GdMainView.frame {
SynapseGuiViewDefault *:selected { background-color: $selected_bg_color; }
//
+// Transmission
+//
+.tr-workarea .undershoot,
+.tr-workarea .overshoot {
+ border-color: transparent; // Remove black border on over- and undershoot
+}
+
+//
// Fallback Mode/Budgie Panel
//
.gnome-panel-menu-bar,
diff --git a/common/gtk-3.0/3.18/sass/_colors-public.scss b/common/gtk-3.0/3.18/sass/_colors-public.scss
index 60d3cbf..accfee4 100644
--- a/common/gtk-3.0/3.18/sass/_colors-public.scss
+++ b/common/gtk-3.0/3.18/sass/_colors-public.scss
@@ -51,19 +51,12 @@ $wm_bg_unfocused: opacify($header_bg_backdrop, 1);
@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg};
@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg};
-@define-color wm_icon_close_hover_bg #{"" + $wm_icon_close_hover_bg};
-@define-color wm_icon_close_active_bg #{"" + $wm_icon_close_active_bg};
// Minimize, Maximize
-@define-color wm_button_bg #{"" + $wm_button_bg};
-@define-color wm_button_unfocused_bg #{"" + $wm_button_unfocused_bg};
@define-color wm_button_hover_bg #{"" + $wm_button_hover_bg};
@define-color wm_button_active_bg #{"" + $wm_button_active_bg};
-@define-color wm_button_border #{"" + $wm_button_border};
-@define-color wm_button_unfocused_border #{"" + $wm_button_unfocused_border};
@define-color wm_button_hover_border #{"" + $wm_button_hover_border};
-@define-color wm_button_active_border #{"" + $wm_button_active_border};
@define-color wm_icon_bg #{"" + $wm_icon_bg};
@define-color wm_icon_unfocused_bg #{"" + $wm_icon_unfocused_bg};
diff --git a/common/gtk-3.0/3.18/sass/_colors.scss b/common/gtk-3.0/3.18/sass/_colors.scss
index 9c51858..47daa0f 100644
--- a/common/gtk-3.0/3.18/sass/_colors.scss
+++ b/common/gtk-3.0/3.18/sass/_colors.scss
@@ -2,15 +2,15 @@
// it gets @if ed depending on $variant
-$base_color: if($variant =='light', #ffffff, #383C45);
+$base_color: if($variant =='light', #ffffff, #404552);
$text_color: if($variant == 'light', #5c616c, #D3DAE3);
-$bg_color: if($variant =='light', #F5F6F7, #444852);
+$bg_color: if($variant =='light', #F5F6F7, #383C4A);
$fg_color: if($variant =='light', #5c616c, #D3DAE3);
$selected_fg_color: #ffffff;
$selected_bg_color: #5294E2;
$selected_borders_color: darken($selected_bg_color, 20%);
-$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,10%));
+$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%));
$link_color: if($variant == 'light', darken($selected_bg_color,10%),
lighten($selected_bg_color,20%));
@@ -28,63 +28,67 @@ $suggested_color: #4DADD4;
$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55));
$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));
-
-$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%));
-$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%));
-
-$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%));
-$button_border: $entry_border;
-
$header_bg: red;
@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); }
@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; }
-@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343b, 0.03); }
-@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343b; }
+@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); }
+@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; }
$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%));
-$header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%));
+$header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%));
$header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%));
$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg);
-$dark_sidebar_bg: if($transparency == 'true', transparentize(#3c4049, 0.05), #3c4049);
+$dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945);
$dark_sidebar_fg: #BAC3CF;
-$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 10%));
+$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%));
$osd_fg_color: $dark_sidebar_fg;
-$osd_bg_color: darken($dark_sidebar_bg, 8%);
+$osd_bg_color: $dark_sidebar_bg;
+
+$osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6);
+$osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6);
+
+$osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6);
+$osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6);
$osd_insensitive_bg_color: darken($osd_bg_color, 3%);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%);
$osd_borders_color: transparentize(black, 0.3);
-$panel_bg: darken($osd_bg_color, 4.7%);
-$panel_fg: $osd_fg_color;
+$panel_bg: darken($dark_sidebar_bg, 4.7%);
+$panel_fg: $dark_sidebar_fg;
+
+$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%));
+$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%));
+
+$header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1));
+$header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7));
+
+$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%));
+$button_border: $entry_border;
+
+$header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1));
+$header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7));
//WM Buttons
// Close
-$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f37076, #e45e65);
-$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f79da1, #f48085);
-$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #ef4048, #e6262f);
+$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d);
+$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d);
+$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841);
-$wm_icon_close_bg: $selected_fg_color;
-$wm_icon_close_hover_bg: $selected_fg_color;
-$wm_icon_close_active_bg: $selected_fg_color;
+$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f);
// Minimize, Maximize
-$wm_button_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32);
-$wm_button_unfocused_bg: if($variant == 'light' and $darker == 'false', #f6f7f8, #2a3035);
-$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #272c32);
+$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C);
$wm_button_active_bg: $selected_bg_color;
-$wm_button_border: if($variant == 'light' and $darker == 'false', #d8dae0, #191C21);
-$wm_button_unfocused_border: if($variant == 'light' and $darker == 'false', #dddee2, #1F2328);
-$wm_button_hover_border: $selected_bg_color;
-$wm_button_active_border: $selected_bg_color;
+$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932);
-$wm_icon_bg: if($variant == 'light' and $darker == 'false', #8d93a4, #939ca8);
-$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #b8bcc7, #686f78);
-$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #70788d, #afb8c5);
+$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B);
+$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74);
+$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC);
$wm_icon_active_bg: $selected_fg_color;
diff --git a/common/gtk-3.0/3.18/sass/_common.scss b/common/gtk-3.0/3.18/sass/_common.scss
index 5b162c8..25335bd 100644
--- a/common/gtk-3.0/3.18/sass/_common.scss
+++ b/common/gtk-3.0/3.18/sass/_common.scss
@@ -398,7 +398,8 @@ $_dot_color: $selected_bg_color;
&.flat {
@include button(undecorated);
- background-color: transparentize($bg_color, 1);
+ background-color: transparentize($button_bg, 1);
+ border-color: transparentize($button_border, 1);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
@@ -415,7 +416,7 @@ $_dot_color: $selected_bg_color;
-gtk-image-effect: highlight;
}
&:active, &:checked {
- background-clip: border-box;
+ background-clip: if($variant=='light', border-box, padding-box);
@include button(active);
transition-duration: 50ms;
}
@@ -436,14 +437,14 @@ $_dot_color: $selected_bg_color;
}
// big standalone buttons like in Documents pager
&.osd {
+ color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.7);
-
- @include button(osd);
background-color: $osd_bg_color;
+ border-color: darken($osd_bg_color, 8%);
&.image-button { padding: 10px; }
- &:hover { @include button(osd-hover); background-color: $osd_bg_color; }
+ &:hover { color: $selected_bg_color; }
&:active, &:checked { @include button(osd-active); }
&:insensitive { @include button(osd-insensitive); }
}
@@ -651,14 +652,18 @@ $_dot_color: $selected_bg_color;
&:only-child > .button.flat { @extend %linked:only-child; }
}
+$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5));
+
%linked_middle {
border-radius: 0;
border-left-style: none;
border-right-style: none;
&:hover {
- box-shadow: inset 1px 0 $selected_bg_color, inset -1px 0 $selected_bg_color;
+ box-shadow: inset 1px 0 $_linked_separator_color,
+ inset -1px 0 $_linked_separator_color;
}
+ &:active, &:checked { box-shadow: none; }
&:dir(rtl) {
border-radius: 0; // needed when including %linked_middle:dir(rtl)
@@ -672,13 +677,15 @@ $_dot_color: $selected_bg_color;
border-radius: 3px 0 0 3px;
border-left-style: solid;
- &:hover { box-shadow: inset -1px 0 $selected_bg_color; }
+ &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
}
&:last-child {
border-radius: 0 3px 3px 0;
border-right-style: solid;
- &:hover { box-shadow: inset 1px 0 $selected_bg_color; }
+ &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
&:dir(rtl) { border-bottom-left-radius: 0; }
@@ -688,6 +695,7 @@ $_dot_color: $selected_bg_color;
border-style: solid;
&:hover { box-shadow: none; }
+ &:active, &:checked { box-shadow: none; }
}
}
@@ -697,7 +705,11 @@ $_dot_color: $selected_bg_color;
border-top-style: none;
border-radius: 0;
- &:hover { box-shadow: inset 0 1px $selected_bg_color, inset 0 -1px $selected_bg_color; }
+ &:hover {
+ box-shadow: inset 0 -1px $_linked_separator_color,
+ inset 0 1px $_linked_separator_color;
+ }
+ &:active, &:checked { box-shadow: none; }
}
%linked_vertical{
@@ -707,19 +719,22 @@ $_dot_color: $selected_bg_color;
border-radius: 3px 3px 0 0;
border-top-style: solid;
- &:hover { box-shadow: inset 0 -1px $selected_bg_color; }
+ &:hover { box-shadow: inset 0 -1px $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
}
&:last-child {
border-radius: 0 0 3px 3px;
border-bottom-style: solid;
- &:hover { box-shadow: inset 0 1px $selected_bg_color; }
+ &:hover { box-shadow: inset 0 1px $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
}
&:only-child {
border-radius: 3px;
border-style: solid;
&:hover { box-shadow: none; }
+ &:active, &:checked { box-shadow: none; }
}
}
@@ -737,7 +752,7 @@ $_dot_color: $selected_bg_color;
outline-offset: -1px;
border-radius: 2px;
- &:hover { background-color: mix($fg_color,$bg_color,5%); }
+ &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); }
&:active, &:selected {
@extend %selected_items;
}
@@ -794,9 +809,7 @@ $_dot_color: $selected_bg_color;
// padding-right: 6px;
&:dir(rtl) { border-style: none solid none none; }
&:first-child { color: red; }
- &:hover {
- color: $selected_bg_color;
- }
+
&:insensitive {
color: $insensitive_fg_color;
}
@@ -917,26 +930,31 @@ GtkComboBox {
&.combobox-entry .entry {
@extend %linked;
- border-right-style: none;
- &:dir(rtl) { border-left-style: none; }
+ &:dir(ltr) {
+ border-right-style: none;
+
+ &:focus { box-shadow: 1px 0 $selected_bg_color; }
+ }
+ &:dir(rtl) {
+ border-left-style: none;
+
+ &:focus { box-shadow: -1px 0 $selected_bg_color; }
+ }
}
&.combobox-entry .the-button-in-the-combobox {
@extend %linked;
- color: transparentize($fg_color, 0.4);
- background-color: $button_border;
- border-color: $button_border;
+ &:dir(ltr) {
+ box-shadow: inset 1px 0 $button_border;
- &:hover {
- background-color: lighten($button_border, 5%);
- border-color: $selected_bg_color;
- box-shadow: -1px 0 $selected_bg_color;
+ &:insensitive { box-shadow: inset 1px 0 transparentize($button_border, 0.45); }
}
+ &:dir(rtl) {
+ box-shadow: inset -1px 0 $button_border;
- &:active, &:checked { @include button(active); }
-
- &:insensitive { opacity: 0.5 }
+ &:insensitive { box-shadow: inset -1px 0 transparentize($button_border, 0.45); }
+ }
}
}
@@ -974,7 +992,7 @@ GtkComboBox {
background-color: $bg_color;
.osd &, &.osd {
padding: 7px;
- border: 1px solid transparentize(black, 0.4);
+ border: 1px solid transparentize(black, 0.5);
border-radius: 3px;
background-color: transparentize($osd_bg_color, 0.1);
}
@@ -1185,16 +1203,14 @@ GtkComboBox {
%header_widgets {
// Header-bar Entries
- > .entry,
- > * > .entry,
- > * > * > .entry,
- > * > * > * > .entry {
+ .entry {
@include entry(header-normal);
&:backdrop { opacity: 0.85; }
&:focus {
@include entry(header-focus);
+ background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
&.image { color: $selected_fg_color; }
}
@@ -1213,55 +1229,62 @@ GtkComboBox {
}
// Header-bar Buttons
- > .button,
- > * > .button,
- > * > * > .button,
- > * > * > * > .button {
+ .button {
@include button(header-normal);
&:backdrop { opacity: 0.7; }
&:hover { @include button(header-hover); }
- &:active, &:checked { @include button(header-active); }
+ &:active, &:checked {
+ @include button(header-active);
+ background-clip: if($darker=='false' and $variant=='light', border-box, padding-box);
+ }
&:insensitive { @include button(header-insensitive); }
&:insensitive:active, &:insensitive:checked { @include button(header-insensitive-active); }
}
- > .linked > .button,
- > * > .linked > .button,
- > * > * > .linked > .button,
- > * > * > * > .linked > .button { border-radius: 3px; border-style: solid}
+ .linked > .button { border-radius: 3px; border-style: solid}
+
+ .linked > .button:hover { box-shadow: none; }
- > .linked > .button:hover,
- > * > .linked > .button:hover,
- > * > * > .linked > .button:hover,
- > * > * > * > .linked > .button:hover { box-shadow: none; }
+ .linked.stack-switcher > .button,
+ .linked.path-bar > .button {
+ $_linked_separator_color: $header_button_border;
- > .linked.stack-switcher > .button,
- > * > .linked.stack-switcher > .button,
- > * > * > .linked.stack-switcher > .button,
- > * > * > * > .linked.stack-switcher > .button,
- > .linked.path-bar > .button,
- > * > .linked.path-bar > .button,
- > * > * > .linked.path-bar > .button,
- > * > * > * > .linked.path-bar > .button {
@include button(header-hover);
- &:hover { border-color: $selected_bg_color; }
+ &:hover { background-color: lighten($header_button_bg, 15%); }
&:active, &:checked { @include button(header-active); }
+ &:insensitive { color: transparentize($header_fg, 0.4); }
@extend %linked;
+
+ &:hover {
+ box-shadow: inset 1px 0 $_linked_separator_color,
+ inset -1px 0 $_linked_separator_color;
+ }
+ &:active, &:checked { box-shadow: none; }
+
+ &:first-child {
+ &:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
+ }
+ &:last-child {
+ &:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+ &:active, &:checked { box-shadow: none; }
+ }
+ &:only-child {
+ &:hover { box-shadow: none; }
+ &:active, &:checked { box-shadow: none; }
+ }
}
// Header-bar Suggested and Destructive Action buttons
@each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) {
- > .button.#{$b_type},
- > * > .button.#{$b_type},
- > * > * > .button.#{$b_type},
- > * > * > * > .button.#{$b_type} {
+ .button.#{$b_type} {
@include button(suggested_destructive, $b_color);
&.flat {
@@ -1281,84 +1304,104 @@ GtkComboBox {
}
&:insensitive { opacity: 0.75; }
}
- > .button.#{$b_type}:backdrop,
- > * > .button.#{$b_type}:backdrop,
- > * > * > .button.#{$b_type}:backdrop,
- > * > * > * > .button.#{$b_type}:backdrop {
+ .button.#{$b_type}:backdrop,
+ .button.#{$b_type}:backdrop {
opacity: 0.8;
}
}
// Header-bar Spinbuttons
- > .spinbutton,
- > * > .spinbutton,
- > * > * > .spinbutton,
- > * > * > * > .spinbutton {
+ & .spinbutton {
- &:focus .button { color: $selected_fg_color; }
+ &:focus .button {
+ color: $selected_fg_color;
+ &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; }
+ &:insensitive { color: transparentize($selected_fg_color, 0.6); }
+ }
.button {
color: $header_fg;
- &:hover { background-color: rgba(255,255,255,0.1); border-color: transparent; }
+ &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; }
&:insensitive { color: transparentize($header_fg, 0.3); }
&:active { background-color: rgba(0,0,0,0.1); }
}
}
// Header-bar ComboBoxes
- > GtkComboBox,
- > * > GtkComboBox,
- > * > * > GtkComboBox,
- > * > * > * > GtkComboBox {
+ & GtkComboBox{
&:insensitive { color: transparentize($header_fg, 0.6); }
- &.combobox-entry .the-button-in-the-combobox {
+ &.combobox-entry .button {
@include entry(header-normal);
- &:hover { @include entry(header-focus); }
+ &:hover { @include entry(header-focus); box-shadow: none; }
&:insensitive { @include entry(header-insensitive); }
}
+ &.combobox-entry .entry {
+ &:dir(ltr) {
+ &:focus { box-shadow: none; }
+ }
+ &:dir(rtl) {
+ &:focus { box-shadow: none; }
+ }
+ }
+ &.combobox-entry .button {
+
+ &:dir(ltr) {
+ box-shadow: inset 1px 0 $header_button_border;
+
+ &:insensitive { box-shadow: inset 1px 0 transparentize($header_button_border, 0.45); }
+ }
+ &:dir(rtl) {
+ box-shadow: inset -1px 0 $header_button_border;
+
+ &:insensitive { box-shadow: inset -1px 0 transparentize($header_button_border, 0.45); }
+ }
+ }
}
// Header-bar Switches
- > GtkSwitch,
- > * > GtkSwitch,
- > * > * > GtkSwitch,
- > * > * > * > GtkSwitch {
+ GtkSwitch {
&:backdrop { opacity: 0.75; }
}
- > GtkProgressBar,
- > * > GtkProgressBar,
- > * > * > GtkProgressBar,
- > * > * > * > GtkProgressBar {
+ GtkProgressBar {
- &.trough { background-color: transparentize($header_fg, 0.65); }
+ &.trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); }
&:backdrop { opacity: 0.75; }
}
// Header-bar Scale
- > .scale,
- > * > .scale,
- > * > * > .scale,
- > * > * > * > .scale {
+ .scale {
&:backdrop { opacity: 0.75; }
&.trough {
- background-image: linear-gradient(to bottom, transparentize($header_fg, 0.65));
+ $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border);
+ background-image: linear-gradient(to bottom, $_trough_bg);
- &:insensitive { background-image: linear-gradient(to bottom, transparentize($header_fg, 0.7)); }
+ &:insensitive { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); }
}
&.slider {
- background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 90%), darken($header_bg, 4%)));
+ $_slider_border: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.2), opacify($header_button_border, 0.3));
+ $_slider_bg: if($variant=='light' and $darker=='false', opacify($header_button_bg,1), lighten(opacify($header_bg,1), 10%));
- &:insensitive {
- background-image: linear-gradient(to bottom, if($darker == 'false', mix($base_color, $header_bg, 40%), darken($header_bg, 1%)));
+ background-image: linear-gradient(to bottom, $_slider_bg);
+ border-color: $_slider_border;
- @if $darker=='true' { border-color: mix($header_bg, $selected_bg_color, 60%); }
+ &:hover {
+ background-image: linear-gradient(to bottom, lighten($_slider_bg, 5%));
+ border-color: $_slider_border;
+ }
+ &:active {
+ background-image: linear-gradient(to bottom, $selected_bg_color);
+ border-color: $selected_bg_color;
+ }
+ &:insensitive {
+ background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%));
+ border-color: $_slider_border;
}
}
}
@@ -1540,7 +1583,7 @@ column-header.button.dnd { // for treeview-like derive widgets
margin: 4px;
padding: 0;
border-radius: 0;
- background-color: $base_color;
+ background-color: if($variant=='light', $base_color, $bg_color);
border: 1px solid $borders_color;
.csd & {
@@ -1588,14 +1631,12 @@ column-header.button.dnd { // for treeview-like derive widgets
* Popovers *
************/
-.popover,
-.header-bar .popover,
-.primary-toolbar .popover {
+.popover {
padding: 2px;
border: 1px solid darken($borders_color, 5%);
border-radius: 3px;
background-clip: border-box;
- background-color: $base_color;
+ background-color: if($variant=='light', $base_color, $bg_color);
box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65));
@@ -2054,30 +2095,31 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
-GtkRange-trough-border: 0;
outline-offset: -1px;
outline-radius: 2px;
- //@include _shadows(_button_shadow(normal));
&.trough { margin: 5px; }
&.fine-tune {
&.trough { border-radius: 5px; margin: 3px; }
}
&.slider {
+ $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
+
background-clip: border-box;
- background-image: linear-gradient(to bottom, $entry_bg);
- border: 1px solid $selected_bg_color;
+ background-image: linear-gradient(to bottom, $button_bg);
+ border: 1px solid $_slider_border;
border-radius: 50%;
box-shadow: none;
&:hover {
- background-image: linear-gradient(to bottom, $selected_bg_color);
- border-color: $selected_bg_color;
+ background-image: linear-gradient(to bottom, lighten($button_bg, 5%));
+ border-color: $_slider_border;
}
&:insensitive {
background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%));
- border-color: mix($selected_bg_color, $bg_color, 55%);
+ border-color: transparentize($_slider_border, 0.2);
}
&:active {
- background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%));
- border-color: darken($selected_bg_color, 10%);
+ background-image: linear-gradient(to bottom, $selected_bg_color);
+ border-color: $selected_bg_color;
}
//OSD sliders
.osd & {
@@ -2111,7 +2153,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
}
&.trough {
- $_scale_trough_bg: if($variant == 'light', $button_border, darken($base_color, 4%));
+ $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%));
border: none;
border-radius: 2.5px;
@@ -2190,7 +2232,7 @@ GtkProgressBar {
GtkProgressBar.trough {
border: none;
border-radius: 3px;
- background-color: if($variant == 'light', $button_border, darken($base_color, 4%));
+ background-color: if($variant == 'light', $button_border, darken($bg_color, 5%));
&.osd {
border-style: none;
@@ -2240,8 +2282,8 @@ GtkLevelBar.vertical {
background-color: $warning_color;
}
&.empty-fill-block {
- background-color: transparentize($fg_color,0.8);
- border-color: transparentize($fg_color,0.8);
+ background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
+ border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color);
}
}
}
@@ -2391,10 +2433,9 @@ GtkCalendar {
border-radius: 0;
}
&.button, &.button:focus {
- @extend %undecorated_button;
color: transparentize($fg_color,0.55);
- box-shadow: none;
- border: none;
+ @include button(undecorated);
+
&:hover {
color: $fg_color;
}
@@ -2796,14 +2837,14 @@ GtkVolumeButton.button { padding: 8px; }
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize(black, 0.45));
box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
- 0 4px 8px 1px if($darker == 'false', opacify($_wm_border, 0.1), opacify($_wm_border, 0.15));
+ 0 8px 8px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
/* this is used for the resize cursor area */
margin: 10px;
&:backdrop {
- box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), $_wm_border),
- 0 4px 5px 2px if($darker == 'false', $_wm_border, opacify($_wm_border, 0.15));
+ box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border),
+ 0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
}
&.tiled {
border-radius: 0;
@@ -2819,7 +2860,7 @@ GtkVolumeButton.button { padding: 8px; }
&.popup, &.menu {
border-radius: 2px;
box-shadow: 0 3px 6px if($variant == 'light', $_wm_border, transparentize($_wm_border, 0.1)),
- 0 0 0 1px if($variant == 'light', $_wm_border, darken($base_color, 10%));
+ 0 0 0 1px if($variant == 'light', $_wm_border, darken($bg_color, 10%));
}
&.tooltip {
border-radius: 2px;
diff --git a/common/gtk-3.0/3.18/sass/_drawing.scss b/common/gtk-3.0/3.18/sass/_drawing.scss
index 2cb08e1..1e54c38 100644
--- a/common/gtk-3.0/3.18/sass/_drawing.scss
+++ b/common/gtk-3.0/3.18/sass/_drawing.scss
@@ -52,17 +52,14 @@
background-image: linear-gradient(to bottom, transparentize($entry_bg, 0.45));
}
- $_header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 4%), 0.1), transparentize($base_color, 0.1));
- $_header_entry_border: if($darker == 'true' or $variant == 'dark', darken($header_bg, 10%), transparentize($header_fg, 0.7));
-
@if $t==header-normal {
//
// normal header-bar entry
//
color: $header_fg;
- border-color: $_header_entry_border;
- background-image: linear-gradient(to bottom, $_header_entry_bg);
+ border-color: $header_entry_border;
+ background-image: linear-gradient(to bottom, $header_entry_bg);
background-color: transparent;
&.image, &.image:hover { color: inherit; }
@@ -73,7 +70,7 @@
// focused header-bar entry
//
color: $selected_fg_color;
- border-color: $selected_bg_color;
+ border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent);
background-image: linear-gradient(to bottom, $selected_bg_color);
}
@@ -82,7 +79,7 @@
// insensitive header-bar entry
//
color: transparentize($header_fg, 0.45);
- background-image: linear-gradient(to bottom, transparentize($_header_entry_bg, 0.35));
+ background-image: linear-gradient(to bottom, transparentize($header_entry_bg, 0.15));
}
@else if $t==osd {
@@ -90,27 +87,28 @@
// normal osd entry
//
color: $osd_fg_color;
- border-color: transparentize(black, 0.6);
+ border-color: $osd_entry_border;
+ background-image: linear-gradient(to bottom, $osd_entry_bg);
background-color: transparent;
- background-image: linear-gradient(to bottom, transparentize(black, 0.8));
+
+ &.image, &.image:hover { color: inherit; }
}
@else if $t==osd-focus {
//
// active osd entry
//
- color: $osd_fg_color;
- border-color: $selected_bg_color;
- background-image: linear-gradient(to bottom, transparentize(black, 0.8));
+ color: $selected_fg_color;
+ border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent);
+ background-image: linear-gradient(to bottom, $selected_bg_color);
}
@else if $t==osd-insensitive {
//
// insensitive osd entry
//
- color: $osd_insensitive_fg_color;
- border-color: transparentize(black, 0.6);
- background-image: linear-gradient(to bottom, transparentize(black, 0.9));
+ color: transparentize($osd_fg_color, 0.45);
+ background-image: linear-gradient(to bottom, transparentize($osd_entry_bg, 0.15));
}
}
@@ -139,8 +137,8 @@
//
color: $fg_color;
outline-color: transparentize($fg_color, 0.7);
- border-color: $selected_bg_color;
- background-color: $button_bg;
+ border-color: $button_border;
+ background-color: lighten($button_bg, 5%);
}
@else if $t==active {
@@ -149,7 +147,8 @@
//
color: $selected_fg_color;
outline-color: transparentize($selected_fg_color, 0.7);
- border-color: $selected_bg_color;
+
+ border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent);
background-color: $selected_bg_color;
}
@@ -177,9 +176,6 @@
> GtkLabel { color: inherit; }
}
- $_header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 3%), 0.1), transparentize($button_bg, 0.1));
- $_header_button_border: if($darker == 'true' or $variant == 'dark', darken($header_bg, 8%), transparentize($header_fg, 0.7));
-
@if $t==header-normal {
//
// normal header-bar button
@@ -197,8 +193,8 @@
//
color: $header_fg;
outline-color: transparentize($header_fg, 0.7);
- border-color: $_header_button_border;
- background-color: $_header_button_bg;
+ border-color: $header_button_border;
+ background-color: $header_button_bg;
}
@else if $t==header-active {
@@ -207,7 +203,7 @@
//
color: $selected_fg_color;
outline-color: transparentize($selected_fg_color, 0.7);
- border-color: $selected_bg_color;
+ border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent);
background-color: $selected_bg_color;
}
@@ -237,8 +233,8 @@
//
color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.7);
- border-color: transparentize(black, 0.55);
- background-color: transparentize(black, 0.7);
+ border-color: $osd_button_border;
+ background-color: $osd_button_bg;
}
@else if $t==osd-hover {
@@ -247,8 +243,8 @@
//
color: $osd_fg_color;
outline-color: transparentize($osd_fg_color, 0.7);
- border-color: $selected_bg_color;
- background-color: transparentize(black, 0.7);
+ border-color: $osd_button_border;
+ background-color: opacify(lighten($osd_button_bg, 7%), 0.1);
}
@else if $t==osd-active {
@@ -266,8 +262,8 @@
// insensitive osd button
//
color: $osd_insensitive_fg_color;
- border-color: transparentize(black, 0.55);
- background-color: transparentize(black, 0.85);
+ border-color: $osd_button_border;
+ background-color: transparentize($osd_button_bg, 0.15);
}
@else if $t==suggested_destructive {
diff --git a/common/gtk-3.0/3.18/sass/_lightdm.scss b/common/gtk-3.0/3.18/sass/_lightdm.scss
index 9b2fa76..0879a5a 100644
--- a/common/gtk-3.0/3.18/sass/_lightdm.scss
+++ b/common/gtk-3.0/3.18/sass/_lightdm.scss
@@ -34,7 +34,7 @@
/* the top half of the login-window, in GtkDialog terms, the content */
#content_frame {
padding-bottom: 14px;
- background-color: if($variant == 'light', $bg_color, $base_color);
+ background-color: $bg_color;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border: solid transparentize(black, 0.9);
@@ -54,12 +54,12 @@
padding-top: 20px;
padding-bottom: 0px;
border-style: none;
- background-color: $osd_bg_color;
+ background-color: if($variant=='light', $osd_bg_color, $header_bg);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: solid transparentize(black, 0.9);
border-width: 0 1px 1px 1px;
- box-shadow: inset 0 1px darken($osd_bg_color, 10%);
+ box-shadow: inset 0 1px if($variant=="light", $dark_sidebar_border, $header_border);
}
#buttonbox_frame .button{
diff --git a/common/gtk-3.0/3.18/sass/_transparent_widgets.scss b/common/gtk-3.0/3.18/sass/_transparent_widgets.scss
index c992afe..b2e1c1e 100644
--- a/common/gtk-3.0/3.18/sass/_transparent_widgets.scss
+++ b/common/gtk-3.0/3.18/sass/_transparent_widgets.scss
@@ -263,7 +263,7 @@ GeditWindow.background.csd GeditFileBrowserView.view {
%dark_sidebar_button {
@include button(osd);
- &:hover { @include button(osd-hover) }
+ &:hover { @include button(osd-hover); }
&:active, &:checked { @include button(osd-active); }
&:insensitive { @include button(osd-insensitive); }
}
@@ -271,6 +271,6 @@ GeditWindow.background.csd GeditFileBrowserView.view {
%dark_sidebar_entry {
@include entry(osd);
- &:focus { @include entry(osd-focus) }
+ &:focus { @include entry(osd-focus); }
&:insensitive { @include entry(osd-insensitive); }
}
diff --git a/common/gtk-3.0/3.18/sass/_unity.scss b/common/gtk-3.0/3.18/sass/_unity.scss
index d88377a..89439d2 100644
--- a/common/gtk-3.0/3.18/sass/_unity.scss
+++ b/common/gtk-3.0/3.18/sass/_unity.scss
@@ -46,6 +46,8 @@ UnityPanelWidget,
background-image: linear-gradient(to bottom, opacify($panel_bg, 1));
color: lighten($panel_fg, 20%);
box-shadow: none;
+
+ &:backdrop { color: darken($panel_fg, 5%); }
}
.unity-panel.menubar.menuitem:hover,