diff options
Diffstat (limited to 'common/gtk-3.0/3.20/sass')
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_applications.scss | 182 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_colors.scss | 65 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_common.scss | 217 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_drawing.scss | 44 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_granite.scss | 10 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_lightdm.scss | 14 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 8 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_unity.scss | 16 |
8 files changed, 369 insertions, 187 deletions
diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index b1a81b4..7f1012d 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -7,9 +7,10 @@ terminal-window notebook { } // -// GNOME Terminal +// GNOME Terminal, MATE Terminal // -terminal-window { +terminal-window, +.mate-terminal { notebook { > header.top { @@ -35,7 +36,7 @@ terminal-window { } .nautilus-desktop.nautilus-canvas-item { - color: $selected_fg_color; + color: white; text-shadow: 1px 1px transparentize(black, 0.4); &:active { color: $fg_color; } @@ -104,6 +105,21 @@ $disk_space_free: darken($bg_color, 3%); animation-iteration-count: 3; } +// Batch renaming dialog +.conflict-row.activatable { + &, &:active { + color: $error_fg_color; + background-color: $error_color; + } + + &:hover { background-color: lighten($error_color, 10%); } + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + } +} + // // Nemo // @@ -250,8 +266,27 @@ $disk_space_free: darken($bg_color, 3%); } // +// Pluma +// + +.pluma-window statusbar frame > border { border: none; } + +.pluma-window notebook > stack scrolledwindow { border-width: 0 0 1px 0; } + +#pluma-status-combo-button { + min-height: 0; + padding: 0; + + border-top: none; + border-bottom: none; + border-radius: 0; +} + +// // Gnome Builder // +// TODO: Merge this with the upstream stylesheet + .gb-search-entry-occurrences-tag { background: none; } workbench.csd > stack.titlebar:not(headerbar) { @@ -286,6 +321,8 @@ pillbox { color: $selected_fg_color; background-color: $selected_bg_color; border-radius: 3px; + + &:disabled label { color: transparentize($selected_fg_color, 0.5) } } docktabstrip { @@ -332,6 +369,63 @@ dockoverlayedge { } } +popover.messagepopover { + &.background { padding: 0; } + + .popover-content-area { margin: 16px; } + .popover-action-area { + margin: 8px; + + button:not(:first-child):not(:last-child) { margin: 0 4px; } + } +} + +popover.popover-selector { + padding: 0; + + list { + row { padding: 5px 0; } + row image { margin-left: 3px; margin-right: 10px; } + } +} + +entry.search.preferences-search { + border: none; + border-right: 1px solid $borders_color; + border-bottom: 1px solid $borders_color; + border-radius: 0; +} + +preferences stacksidebar.sidebar { + list { background-image: _solid($base_color); } + + list separator { background-color: transparent; } +} + +devhelppanel entry:focus, +symboltreepanel entry:focus { + border-color: $borders_color +} + +button.run-arrow-button { + min-width: 12px; +} + +omnibar.linked > entry:not(:only-child) { border-style: solid; border-radius: 3px; margin-left: 1px; margin-right: 1px; } + +gstyleslidein { + #scale_box, + #strings_controls, + #palette_controls, + #components_controls { + button.toggle:checked { color: $fg_color; } + } +} + +configurationview { + entry.flat { background: none; } + list { border-width: 0; } +} // // Epiphany @@ -416,12 +510,82 @@ button.documents-favorite:active:hover { } // +// Gnome Flashback +// +#gf-bubble, +#gf-osd-window, +#gf-input-source-popup, +#gf-candidate-popup { + &, &.solid { + color: lighten($osd_fg_color, 7%); + background-color: $osd_bg_color; + border: 1px solid darken($osd_bg_color, 8%); + border-radius: 2px; + } + + levelbar { + block { + &.low, &.high, &.full { + background-color: $selected_bg_color; + border-color: $selected_bg_color; + } + &.empty { background-color: darken($osd_bg_color, 5%); } + } + trough { background: none; } + } + + // FIXME still needs button styling +} + +#gf-input-source { + min-height: 32px; + min-width: 40px; + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + border-radius: 2px; + } +} + +gf-candidate-box { + label { padding: 3px; } + + &:hover, + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + border-radius: 2px; + } +} + +// +// Mate OSD Window +// +MsdOsdWindow.background.osd { + border-radius: 2px; + border: 1px solid darken($osd_bg_color, 8%); + + .progressbar { + background-color: $selected_bg_color; + border: none; + border-color: red; + border-radius: 5px; + } + .trough { + background-color: darken($osd_bg_color, 5%); + border: none; + border-radius: 5px; + } +} + +// // Mate/Gnome Flashback Panel // -.gnome-panel-menu-bar, -.mate-panel-menu-bar { +.mate-panel-menu-bar, +panel-toplevel.background { - &, menubar { background-color: $panel_bg; } + &, menubar { background-color: opacify($panel_bg, 1); } menubar, #PanelApplet label, @@ -479,7 +643,7 @@ button.documents-favorite:active:hover { } &:checked { - color: $selected_fg_color; + color: white; background-color: transparentize(black, 0.75); box-shadow: inset 0 -2px $selected_bg_color; } @@ -499,6 +663,8 @@ button.documents-favorite:active:hover { color: $selected_fg_color; border: none; background-color: $selected_bg_color; + + label, image { color: inherit; } } } @@ -572,7 +738,7 @@ button.documents-favorite:active:hover { border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - background-image: linear-gradient(to bottom, white); + background-image: _solid(white); background-color: transparent; .title, .label { diff --git a/common/gtk-3.0/3.20/sass/_colors.scss b/common/gtk-3.0/3.20/sass/_colors.scss index 1da5bcf..8d3a5f2 100644 --- a/common/gtk-3.0/3.20/sass/_colors.scss +++ b/common/gtk-3.0/3.20/sass/_colors.scss @@ -2,13 +2,13 @@ // it gets @if ed depending on $variant -$base_color: if($variant =='light', #fdf6e3, #073642); -$text_color: if($variant == 'light', #5c616c, #657b83); -$bg_color: if($variant =='light', #F5F6F7, #002b36); -$fg_color: if($variant =='light', #5c616c, #657b83); +$base_color: if($variant =='light', #ffffff, #404552); +$text_color: if($variant == 'light', #5c616c, #D3DAE3); +$bg_color: if($variant =='light', #F5F6F7, #383C4A); +$fg_color: if($variant =='light', #5c616c, #D3DAE3); -$selected_fg_color: #fdf6e3; -$selected_bg_color: #268bd2; +$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,6%)); @@ -18,33 +18,38 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); -$warning_color: #cb4b16; -$error_color: #dc322f; -$success_color: #859900; -$destructive_color: #dc322f; -$suggested_color: #2aa198; - -$drop_target_color: #b58900; +$selection_mode_fg: $selected_fg_color; +$warning_color: #F27835; +$error_color: #FC4138; +$warning_fg_color: white; +$error_fg_color: white; +$success_color: #73d216; +$destructive_color: #F04A50; +$suggested_color: #4DADD4; +$destructive_fg_color: white; +$suggested_fg_color: white; + +$drop_target_color: #F08437; //insensitive state derived colors $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%)); $header_bg: red; -@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#eee8d5, 0.05); } -@if $transparency=='false' and $variant=='light' { $header_bg: #eee8d5; } -@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#002b36, 0.03); } -@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #002b36; } +@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(#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' 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(#657b83, 0.2), 10%), $header_fg); +$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); -$dark_sidebar_bg: if($transparency == 'true', transparentize(#073642, 0.05), #073642); -$dark_sidebar_fg: #657b83; +$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, 5%)); $osd_fg_color: $dark_sidebar_fg; @@ -64,7 +69,7 @@ $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', #657b83, darken($borders_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)); @@ -78,19 +83,19 @@ $header_button_border: if($darker == 'true' or $variant == 'dark', transparentiz //WM Buttons // Close -$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #dc322f); -$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #cb4b16); -$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #dc322f); +$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: if($variant == 'light' and $darker == 'false',#F8F8F9 , #002b36); +$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); // Minimize, Maximize -$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #657b83); +$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); $wm_button_active_bg: $selected_bg_color; -$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #002b36); +$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); -$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #93a1a1); -$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #657b83); -$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #93a1a1); +$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.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4f36e35..8b0ec66 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -15,9 +15,6 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); -GtkScrolledWindow-scrollbar-spacing: 0; -GtkToolItemGroup-expander-size: 11; - -GtkTreeView-expander-size: 11; - - -GtkTreeView-horizontal-separator: 4; -GtkWidget-text-handle-width: 20; -GtkWidget-text-handle-height: 20; @@ -26,7 +23,7 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); -GtkDialog-action-area-border: 0; // We use the outline properties to signal the focus properties - outline-color: transparentize($fg_color, 0.7); + outline-color: gtkalpha(currentColor, 0.3); outline-style: dashed; outline-offset: -3px; outline-width: 1px; @@ -163,7 +160,6 @@ textview { // This will get overridden by .view, needed by gedit line numbers border: none; background-color: $osd_bg_color; background-clip: padding-box; - outline-color: transparentize($osd_fg_color, 0.7); box-shadow: none; } @@ -232,24 +228,24 @@ entry { selection { &:focus, & { @extend %selected_items; }} // error and warning style - @each $e_type, $e_color in (warning, $warning_color), - (error, $error_color), - // entry.search-missing for Gnome-Builder - (search-missing, $error_color) { + @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), + (error, $error_color, $error_fg_color), + // entry.search-missing for Gnome-Builder + (search-missing, $error_color, $error_fg_color) { &.#{$e_type} { - color: $selected_fg_color; + color: $e_fg_color; border-color: if($variant=='light', $e_color, $entry_border); - background-image: linear-gradient(to bottom, mix($e_color, $base_color, 60%)); + background-color: mix($e_color, $base_color, 60%); - image { color: $selected_fg_color; } + image { color: $e_fg_color; } &:focus { - color: $selected_fg_color; - background-image: linear-gradient(to bottom, $e_color); + color: $e_fg_color; + background-color: $e_color; box-shadow: none; } selection, selection:focus { - background-color: $selected_fg_color; + background-color: $e_fg_color; color: $e_color; } } @@ -366,6 +362,8 @@ button { background-clip: if($variant=='light', border-box, padding-box); transition-duration: 50ms; + + &:not(:disabled) label:disabled { color: inherit; opacity: 0.6; } } //Webkitgtk workaround start @@ -425,7 +423,6 @@ button { // big standalone buttons like in Documents pager &.osd { color: $osd_fg_color; - outline-color: transparentize($osd_fg_color, 0.7); background-color: $osd_bg_color; border-color: darken($osd_bg_color, 8%); @@ -466,21 +463,20 @@ button { .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; } // Suggested and Destructive Action buttons - @each $b_type, $b_color in (suggested-action, $suggested_color), - (destructive-action, $destructive_color) { + @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), + (destructive-action, $destructive_color, $destructive_fg_color) { &.#{$b_type} { - @include button(suggested_destructive, $b_color); + @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; - outline-color: transparentize($b_color, 0.7); } &:hover { - @include button(suggested_destructive, lighten($b_color, 10%)); + @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { - @include button(suggested_destructive, darken($b_color, 10%)); + @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:disabled { @include button(undecorated); @@ -546,6 +542,10 @@ button { } } + // hide separators + &.font, + &.file { separator { background-color: transparent; }} + //inline-toolbar buttons .inline-toolbar &, .inline-toolbar &:backdrop { border-radius: 2px; @@ -628,29 +628,40 @@ toolbar.inline-toolbar toolbutton { > #{$_uncolored_button}:hover:not(:only-child), > #{$_uncolored_button}:hover + #{$_uncolored_button} { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; } - > #{$_uncolored_button}:first-child:hover, + > #{$_uncolored_button}:disabled:not(:only-child), + > #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) transparentize($b_border, 0.5); } + > button:active + #{$_uncolored_button}:hover, > button:checked + #{$_uncolored_button}:hover, > button.suggested-action + #{$_uncolored_button}:hover, > button.destructive-action + #{$_uncolored_button}:hover, - > entry + #{$_uncolored_button}:hover:not(:only-child) { box-shadow: none; } + > entry + #{$_uncolored_button}:hover:not(:only-child), + + > #{$_uncolored_button}:first-child:disabled, + > #{$_uncolored_button}:disabled + #{$_uncolored_button}:disabled, + > #{$_uncolored_button}:first-child:hover, + > button:active + #{$_uncolored_button}:disabled, + > button:checked + #{$_uncolored_button}:disabled, + > button.suggested-action + #{$_uncolored_button}:disabled, + > button.destructive-action + #{$_uncolored_button}:disabled, + > entry + #{$_uncolored_button}:disabled:not(:only-child), { box-shadow: none; } } } // special case, because path-bars are bugged @mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) { - > button + button { border-left-style: none; } + > button + button { border-left-style: none; } - > button:hover:not(:checked):not(:active):not(:only-child) { + > button:hover:not(:checked):not(:active):not(:only-child) { - &:hover { - box-shadow: inset 1px 0 $sep_color, - inset -1px 0 $sep_color; - } - &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } - &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } + &:hover { + box-shadow: inset 1px 0 $sep_color, + inset -1px 0 $sep_color; } + &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } + &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } + } } // Apply the rules defined above @@ -798,6 +809,9 @@ spinbutton { > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $button_border; } + > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover), + > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 transparentize($button_border, 0.5); } + > button:first-child:hover:not(:active), > button.up:dir(rtl):hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } @@ -913,7 +927,7 @@ toolbar { } } -.primary-toolbar { +.primary-toolbar:not(.libreoffice-toolbar) { // LO messes up the toolbar styling, so exclude LO toolbars color: $header_fg; background-color: opacify($header_bg, 1); box-shadow: none; @@ -1000,14 +1014,14 @@ headerbar, // Selectionmode &.selection-mode { - color: $selected_fg_color; + color: $selection_mode_fg; background-color: $selection_mode_bg; border-color: darken($selection_mode_bg, 4%); box-shadow: none; &:backdrop { background-color: $selection_mode_bg; - color: transparentize($selected_fg_color, 0.4); + color: transparentize($selection_mode_fg, 0.4); } .subtitle:link { @extend *:link:selected; } @@ -1096,7 +1110,7 @@ headerbar { } } - > separator { background-image: linear-gradient(to top, $header_border); } + > separator { background-image: _solid($header_border); } @extend %titlebar; } @@ -1142,19 +1156,19 @@ headerbar { background-color: transparent; } - @each $e_type, $e_color in (warning, $warning_color), - (error, $error_color) { + @each $e_type, $e_color, $e_fg_color in (warning, $warning_color, $warning_fg_color), + (error, $error_color, $error_fg_color) { &.#{$e_type} { - color: $selected_fg_color; + color: $e_fg_color; border-color: if($darker=='false' and $variant=='light', $e_color, $header_entry_border); - background-image: linear-gradient(to bottom, mix($e_color, $header_bg, 60%)); + background-color: mix($e_color, $header_bg, 60%); &:focus { - color: $selected_fg_color; - background-image: linear-gradient(to bottom, $e_color); + color: $e_fg_color; + background-color: $e_color; } selection, selection:focus { - background-color: $selected_fg_color; + background-color: $e_fg_color; color: $e_color; } } @@ -1181,8 +1195,8 @@ headerbar { &, &.flat { @include button(undecorated); - color: $selected_fg_color; - background-color: transparentize($selected_fg_color, 1); + color: $selection_mode_fg; + background-color: transparentize($selection_mode_fg, 1); } &:hover { @extend %normal_selected_button; } &:active, &:checked { @extend %selected-button:active; } @@ -1212,7 +1226,9 @@ headerbar { $_uncolored_button: 'button:not(:checked):not(:active):not(.suggested-action):not(.destructive-action)'; > #{$_uncolored_button}:hover:not(:only-child), - > #{$_uncolored_button}:hover + #{$_uncolored_button} { box-shadow: none; } + > #{$_uncolored_button}:hover + #{$_uncolored_button}, + > #{$_uncolored_button}:disabled:not(:only-child), + > #{$_uncolored_button}:disabled + #{$_uncolored_button}:not(:hover) { box-shadow: none; } } // special case for path-bars and stack-switchers @@ -1228,9 +1244,9 @@ headerbar { &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } } - @include pathbar_linking_rules($sep_color:$header_button_border); } + // use linking rules for entries only .linked:not(.vertical):not(.path-bar) { @include linking_rules( $a:0.5, @@ -1241,21 +1257,20 @@ headerbar { } // Headerbar Suggested and Destructive Action buttons - @each $b_type, $b_color in (suggested-action, $suggested_color), - (destructive-action, $destructive_color) { + @each $b_type, $b_color, $b_fg in (suggested-action, $suggested_color, $suggested_fg_color), + (destructive-action, $destructive_color, $destructive_fg_color) { button.#{$b_type} { - @include button(suggested_destructive, $b_color); + @include button(suggested_destructive, $b_color, $b_fg); &.flat { @include button(undecorated); color: $b_color; - outline-color: transparentize($b_color, 0.7); } &:hover { - @include button(suggested_destructive, lighten($b_color, 10%)); + @include button(suggested_destructive, lighten($b_color, 10%), $b_fg); } &:active, &:checked { - @include button(suggested_destructive, darken($b_color, 10%)); + @include button(suggested_destructive, darken($b_color, 10%), $b_fg); } &.flat:disabled, &:disabled { @include button(header-insensitive); } @@ -1285,6 +1300,9 @@ headerbar { > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $header_button_border; } + > button:disabled + button:not(:disabled):not(:active):not(:checked):not(:hover), + > button:not(:disabled):not(:active):not(:checked):not(:hover) + button:disabled { box-shadow: inset 1px 0 $header_button_border; } + > button:first-child:hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } @@ -1409,11 +1427,14 @@ headerbar { // Tree Views // treeview.view { - -GtkTreeView-grid-line-width: 1; - -GtkTreeView-grid-line-pattern: ''; - -GtkTreeView-tree-line-width: 1; - -GtkTreeView-tree-line-pattern: ''; - -GtkTreeView-expander-size: 16; + @at-root * { + -GtkTreeView-horizontal-separator: 4; + -GtkTreeView-grid-line-width: 1; + -GtkTreeView-grid-line-pattern: ''; + -GtkTreeView-tree-line-width: 1; + -GtkTreeView-tree-line-pattern: ''; + -GtkTreeView-expander-size: 16; + } border-left-color: transparentize($fg_color, 0.85); // this is actually the tree lines color, border-top-color: transparentize(black, 0.9); // while this is the grid lines color, better then nothing @@ -1474,19 +1495,26 @@ treeview.view { &.progressbar, &.progressbar:focus { // progress bar in treeviews color: $selected_fg_color; border-radius: 3px; - background-image: linear-gradient(to bottom, $selected_bg_color); + background-color: $selected_bg_color; &:selected, &:selected:focus { color: $selected_bg_color; box-shadow: none; - background-image: linear-gradient(to bottom, $selected_fg_color); + background-color: $selected_fg_color; } } - &.trough, &.trough:selected, &.trough:selected:focus { // progress bar trough in treeviews + &.trough { // progress bar trough in treeviews color: $fg_color; - background-image: linear-gradient(to bottom, $button_border); + background-color: $button_border; border-radius: 3px; border-width: 0; + + &:selected, &:selected:focus { + color: $selected_fg_color; + background-color: transparentize(black, 0.8); + border-radius: 3px; + border-width: 0; + } } header { @@ -1937,7 +1965,7 @@ scrollbar { // Switches // switch { - font: 1; + font-size: 1px; min-width: 52px; min-height: 24px; @@ -2509,28 +2537,25 @@ calendar { padding: 2px; &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; + @extend %selected_items; border-radius: 1.5px; } + &.header { color: $fg_color; border: none; - border-radius: 0; } - &.button, &.button:focus { + + &.button { + @extend %undecorated_button; + color: transparentize($fg_color,0.55); - @include button(undecorated); - &:hover { - color: $fg_color; - } - &:disabled { - color: $insensitive_fg_color; - background-color: transparent; - background-image: none; - } + &:hover { color: $fg_color; } + + &:disabled { color: $insensitive_fg_color; } } + &:indeterminate { color: gtkalpha(currentColor,0.55); } &.highlight { color: $fg_color; } } @@ -2681,7 +2706,7 @@ placessidebar { &.sidebar-placeholder-row { padding: 0 8px; min-height: 2px; - background-image: linear-gradient(to top, $drop_target_color); + background-image: _solid($drop_target_color); background-clip: content-box; } @@ -2731,16 +2756,16 @@ paned { -gtk-icon-source: none; border-style: none; background-color: transparent; - background-image: linear-gradient(to top, $borders_color); + background-image: _solid($borders_color); background-size: 1px 1px; - &:selected { background-image: linear-gradient(to top, $selected_bg_color); } + &:selected { background-image: _solid($selected_bg_color); } &.wide { min-width: 5px; min-height: 5px; background-color: $bg_color; - background-image: linear-gradient(to top, $borders_color), linear-gradient(to top, $borders_color); + background-image: _solid($borders_color), _solid($borders_color); background-size: 1px 1px, 1px 1px; } } @@ -2784,28 +2809,28 @@ paned { // // GtkInfoBar // -infobar { border-style: none; } +infobar { + border-style: none; -.info, -.question, -.warning, -.error { - background-color: $selected_bg_color; - color: $selected_fg_color; + &.info, + &.question, + &.warning, + &.error { + background-color: $selected_bg_color; + color: $selected_fg_color; + caret-color: currentColor; - button { @extend %selected-button } + button { @extend %selected-button } - label:selected { - &:focus, &:hover, & { + selection { color: $selected_bg_color; background-color: $selected_fg_color; } - } - *:link { @extend %link_selected; } + *:link { @extend %link_selected; } + } } - // // Buttons on selected backgrounds // @@ -2813,7 +2838,6 @@ infobar { border-style: none; } @at-root %normal_selected_button, & { color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 1); border-color: transparentize($selected_fg_color, 0.5); } @@ -2829,13 +2853,11 @@ infobar { border-style: none; } } &:hover { color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); background-color: transparentize($selected_fg_color, 0.8); border-color: transparentize($selected_fg_color, 0.2); } &:active, &:active:hover, &:checked { color: $selected_bg_color; - outline-color: transparentize($selected_bg_color, 0.7); background-color: $selected_fg_color; border-color: $selected_fg_color; } @@ -2997,7 +3019,7 @@ colorchooser .popover.osd { border-radius: 3px; } // Decouple the font of context menus from their entry/textview .context-menu { font: initial; } -.monospace { font: Monospace; } +.monospace { font-family: Monospace; } // // Shortcuts Help @@ -3151,7 +3173,6 @@ headerbar, @at-root %nobg_selected_items, & { color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); } } diff --git a/common/gtk-3.0/3.20/sass/_drawing.scss b/common/gtk-3.0/3.20/sass/_drawing.scss index 942e1fd..120a158 100644 --- a/common/gtk-3.0/3.20/sass/_drawing.scss +++ b/common/gtk-3.0/3.20/sass/_drawing.scss @@ -1,5 +1,10 @@ // Drawing mixins +// Solid color image +@function _solid($c) { + @return linear-gradient(to bottom, $c, $c); +} + // Entries @mixin entry($t) { @@ -16,7 +21,6 @@ color: $text_color; border-color: $entry_border; background-color: $entry_bg; - background-image: linear-gradient(to bottom, $entry_bg); } @if $t==focus { @@ -26,7 +30,6 @@ color: $text_color; border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $entry_bg; - background-image: linear-gradient(to bottom, $entry_bg); @if $variant == 'dark' { box-shadow: inset 1px 0 $selected_bg_color, @@ -43,7 +46,6 @@ color: $insensitive_fg_color; border-color: transparentize($entry_border, 0.45); background-color: transparentize($entry_bg, 0.45); - background-image: linear-gradient(to bottom, transparentize($entry_bg, 0.45)); } @if $t==header-normal { @@ -53,8 +55,7 @@ color: $header_fg; border-color: $header_entry_border; - background-image: linear-gradient(to bottom, $header_entry_bg); - background-color: transparent; + background-color: $header_entry_bg; image, image:hover { color: inherit; } } @@ -65,7 +66,7 @@ // 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); + background-color: $selected_bg_color; } @if $t==header-insensitive { @@ -73,7 +74,8 @@ // insensitive header-bar entry // color: transparentize($header_fg, 0.45); - background-image: linear-gradient(to bottom, transparentize($header_entry_bg, 0.15)); + border-color: $header_entry_border; + background-color: transparentize($header_entry_bg, 0.15); } @else if $t==osd { @@ -82,8 +84,7 @@ // color: $osd_fg_color; border-color: $osd_entry_border; - background-image: linear-gradient(to bottom, $osd_entry_bg); - background-color: transparent; + background-color: $osd_entry_bg; image, image:hover { color: inherit; } } @@ -94,7 +95,7 @@ // color: $selected_fg_color; border-color: $osd_entry_border; - background-image: linear-gradient(to bottom, $selected_bg_color); + background-color: $selected_bg_color; } @else if $t==osd-insensitive { @@ -102,25 +103,24 @@ // insensitive osd entry // color: transparentize($osd_fg_color, 0.45); - background-image: linear-gradient(to bottom, transparentize($osd_entry_bg, 0.15)); + background-color: transparentize($osd_entry_bg, 0.15); } } // Buttons -@mixin button($t, $actionb_color:red) { +@mixin button($t, $actionb_bg:red, $actionb_fg: green) { // // Button drawing function // // $t: button type, -// $actionb_color: used for destructive and suggested action buttons +// $actionb_bg, $actionb_fg: used for destructive and suggested action buttons @if $t==normal { // // normal button // color: $fg_color; - outline-color: transparentize($fg_color, 0.7); border-color: $button_border; background-color: $button_bg; } @@ -130,7 +130,6 @@ // hovered button // color: $fg_color; - outline-color: transparentize($fg_color, 0.7); border-color: $button_border; background-color: lighten($button_bg, 5%); } @@ -140,8 +139,6 @@ // pushed button // color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $selected_bg_color; } @@ -173,7 +170,6 @@ // normal header-bar button // color: $header_fg; - outline-color: transparentize($header_fg, 0.7); outline-offset: -3px; background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); @@ -184,7 +180,6 @@ // hovered header-bar button // color: $header_fg; - outline-color: transparentize($header_fg, 0.7); border-color: $header_button_border; background-color: $header_button_bg; } @@ -194,7 +189,6 @@ // pushed header-bar button // color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-color: $selected_bg_color; } @@ -223,7 +217,6 @@ // normal osd button // color: $osd_fg_color; - outline-color: transparentize($osd_fg_color, 0.7); border-color: $osd_button_border; background-color: $osd_button_bg; } @@ -233,7 +226,6 @@ // active osd button // color: $osd_fg_color; - outline-color: transparentize($osd_fg_color, 0.7); border-color: $osd_button_border; background-color: opacify(lighten($osd_button_bg, 7%), 0.1); } @@ -243,7 +235,6 @@ // active osd button // color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); border-color: $osd_button_border; background-color: $selected_bg_color; } @@ -263,10 +254,9 @@ // background-clip: border-box; - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - background-color: $actionb_color; - border-color: $actionb_color; + color: $actionb_fg; + background-color: $actionb_bg; + border-color: $actionb_bg; } @else if $t==undecorated { diff --git a/common/gtk-3.0/3.20/sass/_granite.scss b/common/gtk-3.0/3.20/sass/_granite.scss index a491d31..a564d55 100644 --- a/common/gtk-3.0/3.20/sass/_granite.scss +++ b/common/gtk-3.0/3.20/sass/_granite.scss @@ -151,7 +151,7 @@ GraniteWidgetsWelcome { GraniteWidgetsWelcome label { color: mix($fg_color, $bg_color, 50%); - font: open sans 11; + font-size: 11px; text-shadow: none; } @@ -182,7 +182,7 @@ GraniteWidgetsPopOver { } .popover_bg { - background-image: linear-gradient(to bottom, $base_color); + background-image: _solid($base_color); border: 1px solid transparentize(black, 0.7); } @@ -199,9 +199,9 @@ GraniteWidgetsXsEntry entry { padding: 4px; } // // Text Styles // -.h1 { font: open sans 24px; } -.h2 { font: open sans light 18px; } -.h3 { font: open sans 11px; } +.h1 { font-size: 24px; } +.h2 { font-size: 18px; } +.h3 { font-size: 11px; } .h4, .category-label { color: mix($bg_color, $text_color, 30%); diff --git a/common/gtk-3.0/3.20/sass/_lightdm.scss b/common/gtk-3.0/3.20/sass/_lightdm.scss index e5e5530..0b91ff2 100644 --- a/common/gtk-3.0/3.20/sass/_lightdm.scss +++ b/common/gtk-3.0/3.20/sass/_lightdm.scss @@ -2,7 +2,7 @@ #panel_window { background-color: $panel_bg; color: $panel_fg; - font: bold; + font-weight: bold; box-shadow: inset 0 -1px darken($panel_bg, 7%); // the menubars/menus of the panel, i.e. indicators @@ -10,7 +10,7 @@ menubar > menuitem { background-color: transparent; color: $panel_fg; - font: bold; + font-weight: bold; } menubar menuitem:disabled { @@ -18,14 +18,14 @@ label { color: inherit; } } - menubar menu > menuitem { font: normal; } + menubar menu > menuitem { font-weight: normal; } } // the login window #login_window, #shutdown_dialog, #restart_dialog { - font: normal; + font-weight: normal; border-style: none; background-color: transparent; color: $fg_color; @@ -72,9 +72,9 @@ #login_window #user_combobox { color: $fg_color; - font: 13px; + font-size: 13px; - menu { font: normal; } + menu { font-weight: normal; } } // the user's avatar box @@ -102,5 +102,5 @@ // the warning, in case a wrong password is entered or something else goes wrong according to PAM #greeter_infobar { border-bottom-width: 0; - font: bold; + font-weight: bold; } diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index f6966a5..2b59744 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -3,7 +3,7 @@ //.nemo-window, .nautilus-window { paned > separator { - background-image: linear-gradient(to top, $dark_sidebar_border); + background-image: _solid($dark_sidebar_border); @if $variant=='light' { &:dir(ltr) { margin-left: -1px; } @@ -12,7 +12,7 @@ } } -filechooser paned > separator { background-image: linear-gradient(to top, $dark_sidebar_border); } +filechooser paned > separator { background-image: _solid($dark_sidebar_border); } // Dark transparent sidebars filechooser, @@ -145,8 +145,8 @@ filechooser { // Gedit .gedit-bottom-panel-paned { background-color: $base_color; } -.gedit-side-panel-paned > separator { background-image: linear-gradient(to top, $dark_sidebar_border); } -.gedit-bottom-panel-paned > separator { background-image: linear-gradient(to top, $borders_color); } +.gedit-side-panel-paned > separator { background-image: _solid($dark_sidebar_border); } +.gedit-bottom-panel-paned > separator { background-image: _solid($borders_color); } .gedit-document-panel { background-color: $dark_sidebar_bg; diff --git a/common/gtk-3.0/3.20/sass/_unity.scss b/common/gtk-3.0/3.20/sass/_unity.scss index 53ab2d7..cb18aec 100644 --- a/common/gtk-3.0/3.20/sass/_unity.scss +++ b/common/gtk-3.0/3.20/sass/_unity.scss @@ -17,34 +17,34 @@ UnityDecoration { -UnityDecoration-title-fade: 35px; -UnityDecoration-title-alignment: 0.0; - &.top { + .top { border: 1px solid if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9)); border-bottom-width: 0; border-radius: 4px 4px 0 0; padding: 1px 6px 0 6px; - background-image: linear-gradient(to bottom, opacify($header_bg, 1)); + background-image: _solid(opacify($header_bg, 1)); color: $header_fg; // The foreground color will be used to paint the text box-shadow: inset 0 1px lighten($header_bg, 3%); &:backdrop { border-bottom-width: 0; - //background-image: linear-gradient(to bottom, opacify($header_bg_backdrop, 1)); + //background-image: _solid(opacify($header_bg_backdrop, 1)); color: transparentize($header_fg, 0.3); } } - &.left, &.right, &.bottom, - &.left:backdrop, &.right:backdrop, &.bottom:backdrop { + .left, .right, .bottom, + .left:backdrop, .right:backdrop, .bottom:backdrop { background-color: transparent; - background-image: linear-gradient(to bottom, if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9))); + background-image: _solid(if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9))); } } // Panel Style UnityPanelWidget, .unity-panel { - background-image: linear-gradient(to bottom, #002b36); + background-image: _solid(#2f343f); color: lighten($panel_fg, 20%); box-shadow: none; @@ -55,7 +55,7 @@ UnityPanelWidget, .unity-panel.menubar .menuitem *:hover { border-radius: 0; color: $selected_fg_color; - background-image: linear-gradient(to bottom, $selected_bg_color); + background-image: _solid($selected_bg_color); border-bottom: none; } |