From ee864708c34027a1e3b0ad6aff38c1c3b4c3463d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: adapt to changes in GTK+ 3.19.x --- common/gtk-3.0/3.20/sass/_common.scss | 3129 +++++++++++++++++++++++++++++++++ 1 file changed, 3129 insertions(+) create mode 100644 common/gtk-3.0/3.20/sass/_common.scss (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss new file mode 100644 index 0000000..a39faee --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -0,0 +1,3129 @@ +@function gtkalpha($c,$a) { + @return unquote("alpha(#{$c},#{$a})"); +} + +$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); +$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant +$darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); + +* { + background-clip: padding-box; + -GtkToolButton-icon-spacing: 4; + -GtkTextView-error-underline-color: $error_color; + + -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; + + -GtkDialog-button-spacing: 4; + -GtkDialog-action-area-border: 0; + + // We use the outline properties to signal the focus properties + outline-color: transparentize($fg_color, 0.7); + outline-style: dashed; + outline-offset: -3px; + outline-width: 1px; + -gtk-outline-radius: 2px; +} + + +// +// Base States +// +.background { + color: $fg_color; + background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work +} + +*:disabled { + -gtk-icon-effect: dim; +} + +.gtkstyle-fallback { + background-color: $bg_color; + color: $fg_color; + &:hover { + background-color: lighten($bg_color, 10%); + color: $fg_color; + } + &:active { + background-color: darken($bg_color, 10%); + color: $fg_color; + } + &:disabled { + background-color: $insensitive_bg_color; + color: $insensitive_fg_color; + } + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +.view, +textview text { + color: $text_color; + background-color: $base_color; + + &:selected, + selection, + selection:focus, + selection:hover { + @extend %selected_items; + } + &.dim-label { + color: transparentize($text_color, 0.45); + + selection, selection:focus { + color: transparentize($selected_fg_color, 0.35); + text-shadow: none; + } + } +} + +iconview { + color: $text_color; + background-color: $base_color; + + &:selected, + &:selected:focus { + border-radius: 3px; + @extend %selected_items; + } +} + +rubberband, +.rubberband { + border: 1px solid darken($selected_bg_color, 10%); + background-color: transparentize(darken($selected_bg_color, 10%), 0.8); +} + +flowbox { + rubberband { @extend rubberband } + + flowboxchild { + padding: 3px; + border-radius: 2px; + + &:selected { + outline-offset: -2px; + + @extend %selected_items + } + } +} + +label { + &.separator { + color: $fg_color; + @extend .dim-label; + } + &:selected, + selection, + selection:focus, + selection:hover { + @extend %selected_items; + } + &:disabled { + color: $insensitive_fg_color; + } +} + +.dim-label { + opacity: 0.55; +} + +assistant { + .sidebar { + background-color: $base_color; + border-top: 1px solid $borders_color; + &:dir(ltr) { border-right: 1px solid $borders_color; } + &:dir(rtl) { border-left: 1px solid $borders_color; } + } + &.csd .sidebar { border-top-style: none; } + .sidebar label { + padding: 6px 12px; + } + .sidebar label.highlight { + background-color: $selected_bg_color; + color: $selected_fg_color; + } +} + +textview { // This will get overridden by .view, needed by gedit line numbers + background-color: mix($bg_color, $base_color, 50%); +} + +%osd, .osd { + color: $osd_fg_color; + border: none; + background-color: $osd_bg_color; + background-clip: padding-box; + outline-color: transparentize($osd_fg_color, 0.7); + box-shadow: none; +} + +// +// Spinner Animations +// +@keyframes spin { + to { -gtk-icon-transform: rotate(1turn); } +} + +spinner { + background: none; + opacity: 0; // non spinning spinner makes no sense + -gtk-icon-source: -gtk-icontheme('process-working-symbolic'); + + &:checked { + opacity: 1; + animation: spin 1s linear infinite; + + &:disabled { + opacity: 0.5; + } + } +} + +// +// Text Entries +// +entry { + min-height: 26px; + border: 1px solid; + padding-left: 8px; + padding-right: 8px; + + border-radius: 3px; + transition: all 200ms $ease-out-quad; + + &.search { border-radius: 20px; } + + @include entry(normal); + + image { // icons inside the entry + color: mix($fg_color,$base_color,80%); + + &.left { padding-left: 0; padding-right: 5px; } + &.right { padding-right: 0; padding-left: 5px; } + } + + &.flat, &.flat:focus { + @include entry(normal); + padding-left: 2px; + padding-right: 2px; + border: none; + border-radius: 0; + } + + &:focus { + background-clip: border-box; + @include entry(focus); + } + + &:disabled { @include entry(insensitive); } + + selection, + selection:focus { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + + progress { + margin: 2px 12px; + border-radius: 0; + border-width: 0 0 2px; + border-color: $selected_bg_color; + border-style: solid; + background-image: none; + background-color: transparent; + box-shadow: none; + } + + @each $e_type, $e_color in (warning, $warning_color), + (error, $error_color) { + &.#{$e_type} { + color: $selected_fg_color; + border-color: if($variant=='light', $e_color, $entry_border); + background-image: linear-gradient(to bottom, mix($e_color, $base_color, 60%)); + + &:focus { + color: $selected_fg_color; + background-image: linear-gradient(to bottom, $e_color); + box-shadow: none; + } + selection, selection:focus { + background-color: $selected_fg_color; + color: $e_color; + } + } + } + + .osd & { + @include entry(osd); + &:focus { @include entry(osd-focus); } + &:disabled { @include entry(osd-insensitive); } + } +} + +// +// Buttons +// +// stuff for .needs-attention +$_dot_color: $selected_bg_color; + +@keyframes needs_attention { + from { + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.01, + to($_dot_color), + to(transparent)); + } + to { + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($selected_bg_color), + to(transparent)); + } +} + +button { + $_button_transition: all 200ms $ease-out-quad; + + min-height: 26px; + min-width: 20px; + transition: $_button_transition; + border: 1px solid; + border-radius: 3px; + padding: 0 6px; + + @include button(normal); + + separator { margin: 4px 1px; } + + &.flat { + @include button(undecorated); + 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 + // in this case the duration is increased. + transition: none; + &:hover { + transition: $_button_transition; + transition-duration: 350ms; + &:active { transition: $_button_transition; } + } + } + &:hover { + @include button(hover); + -gtk-icon-effect: highlight; + } + &:active, &:checked { + background-clip: if($variant=='light', border-box, padding-box); + @include button(active); + transition-duration: 50ms; + } + + //Webkitgtk workaround start + &:active { color: $fg_color; } + &:active:hover, &:checked { color: $selected_fg_color; } + //Webkitgtk workaround end + + &.flat:disabled { + @include button(undecorated); + } + &:disabled { + @include button(insensitive); + &:active, &:checked { + @include button(insensitive-active); + } + } + // 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%); + + &.image-button { + min-height: 48px; + min-width: 48px; + } + + &:hover { color: $selected_bg_color; } + &:active, &:checked { @include button(osd-active); } + &:disabled { @include button(osd-insensitive); } + } + + //overlay / OSD style + .osd & { + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { + background-clip: padding-box; + @include button(osd-active); + } + &:disabled { @include button(osd-insensitive); } + + &.flat { + @include button(undecorated); + box-shadow: none; + &:hover { @include button(osd-hover); } + &:disabled { + @include button(osd-insensitive); + background-image: none; + } + &:active, &:checked { @include button(osd-active); } + } + } + // Suggested and Destructive Action buttons + @each $b_type, $b_color in (suggested-action, $suggested_color), + (destructive-action, $destructive_color) { + &.#{$b_type} { + @include button(suggested_destructive, $b_color); + + &.flat { + @include button(undecorated); + color: $b_color; + outline-color: transparentize($b_color, 0.7); + } + &:hover { + @include button(suggested_destructive, lighten($b_color, 10%)); + } + &:active, &:checked { + @include button(suggested_destructive, darken($b_color, 10%)); + } + &.flat:disabled { + @include button(undecorated); + color: $insensitive_fg_color; + } + &:disabled { @include button(insensitive); } + } + } + + &.text-button { + padding-left: 16px; + padding-right: 16px; + } + + &.text-button.image-button { + // those buttons needs uneven horizontal padding, we want the icon side + // to have the image-button padding, while the text side the text-button + // one, so we're adding the missing padding to the label depending on + // its position inside the button + label:first-child { padding-left: 8px; } + label:last-child { padding-right: 8px; } + } + + .stack-switcher > & { + // to position the needs attention dot, padding is added to the button + // child, a label needs just lateral padding while an icon needs vertical + // padding added too. + + outline-offset: -3px; // needs to be set or it gets overridden by GtkRadioButton outline-offset + + > label { + padding-left: 6px; // label padding + padding-right: 6px; // + } + > image { + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + padding-bottom: 3px; + } + &.text-button { + padding-left: 10px; + padding-right: 10px; + } + &.image-button { + padding-left: 2px; + padding-right: 2px; + } + + &.needs-attention > label, + &.needs-attention > image { @extend %needs_attention; } + &.needs-attention:active > label, + &.needs-attention:active > image, + &.needs-attention:checked > label, + &.needs-attention:checked > image { + animation: none; + background-image: none; + } + } + + %needs_attention { + animation: needs_attention 150ms ease-in; + background-image: -gtk-gradient(radial, + center center, 0, + center center, 0.5, + to($_dot_color), + to(transparent)); + background-size: 6px 6px, 6px 6px; + background-repeat: no-repeat; + @if $variant == 'light' { background-position: right 3px, right 4px; } + @else { background-position: right 3px, right 2px; } + &:dir(rtl) { + @if $variant == 'light' { background-position: left 3px, left 4px; } + @else { background-position: left 3px, left 2px; } + } + } + + //inline-toolbar buttons + .inline-toolbar &, .inline-toolbar &:backdrop { + border-radius: 2px; + border-width: 1px; + @extend %linked; + } + + .linked:not(.vertical) > &, + .linked:not(.vertical) > &:hover, + .linked:not(.vertical) > &:active, + .linked:not(.vertical) > &:checked { + @extend %linked; + @extend %linked_button; + } + + .linked.vertical > &, + .linked.vertical > &:hover, + .linked.vertical > &:active, + .linked.vertical > &:checked { + @extend %linked_vertical; + @extend %linked_vertical_button; + } +} + +// all the following is for the +|- buttons on inline toolbars, that way +// should really be deprecated... +.inline-toolbar toolbutton > button { // redefining the button look is + // needed since those are flat... + @include button(normal); + &:hover { @include button(hover); } + &:active, + &:checked{ @include button(active); } + &:disabled { @include button(insensitive); } + &:disabled:active, + &:disabled:checked { @include button(insensitive-active); } +} + +// More inline toolbar buttons +toolbar.inline-toolbar toolbutton { + & > button.flat { @extend %linked_middle; } + &:first-child > button.flat { @extend %linked:first-child; } + &:last-child > button.flat { @extend %linked:last-child; } + &:only-child > button.flat { @extend %linked:only-child; } +} + +// Some crazy linking stuff + +// horizontal +.linked:not(.vertical):not(.pathbar) { + > entry { @extend %linked; } + + + > entry + entry { border-left-color: transparentize($entry_border, 0.7); } + + > entry.error + entry, + > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } + + > entry.warning + entry, + > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } + + > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} + + + > entry + entry:focus:not(:last-child), + > entry + entry:focus:last-child { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry + entry.warning:focus:not(:last-child), + > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $entry_border); } + + > entry + entry.error:focus:not(:last-child), + > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); } + + + > entry + button, + > entry + button:hover, + > entry + button:active, + > entry + button:checked, + > entry + button:disabled { border-left-style: solid; } + + + > entry:focus:not(:only-child) + entry, + > entry:focus:not(:only-child) + button, + > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry.warning:focus:not(:only-child) + entry, + > entry.warning:focus:not(:only-child) + button, + > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $entry_border); } + + > entry.error:focus:not(:only-child) + entry, + > entry.error:focus:not(:only-child) + button, + > entry.error:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $error_color, $entry_border); } + + + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: -1px 0 $button_border; } + > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } + > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } + > button:checked + entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + > entry + button:not(:checked):not(:active):hover { box-shadow: none; } +} + +// special case for path-bars +.linked:not(.vertical).path-bar { + +$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5)); + + > button:hover:not(:checked):not(:active):not(:only-child) { + + &:hover { + box-shadow: inset 1px 0 $_linked_separator_color, + inset -1px 0 $_linked_separator_color; + } + &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } + &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } + } +} + +// vertical +.linked.vertical { + > entry { @extend %linked_vertical; } + + + > entry + entry { border-top-color: transparentize($entry_border, 0.7); } + + > entry.error + entry, + > entry + entry.error { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } + + > entry.warning + entry, + > entry + entry.warning { border-top-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } + + > entry.error + entry.warning { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} + + + > entry + entry:focus:not(:last-child), + > entry + entry:focus:last-child { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry + entry.warning:focus:not(:last-child), + > entry + entry.warning:focus:last-child { border-top-color: if($variant=='light', $warning_color, $entry_border); } + + > entry + entry.error:focus:not(:last-child), + > entry + entry.error:focus:last-child { border-top-color: if($variant=='light', $error_color, $entry_border); } + + + > entry + button, + > entry + button:hover, + > entry + button:active, + > entry + button:checked, + > entry + button:disabled { border-top-style: solid; } + + + > entry:focus:not(:only-child) + entry, + > entry:focus:not(:only-child) + button, + > entry:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry.warning:focus:not(:only-child) + entry, + > entry.warning:focus:not(:only-child) + button, + > entry.warning:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $warning_color, $entry_border); } + + > entry.error:focus:not(:only-child) + entry, + > entry.error:focus:not(:only-child) + button, + > entry.error:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $error_color, $entry_border); } + + + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: 0 -1px $button_border; } + > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } + > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } + > button:checked + entry { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } + > entry + button:not(:checked):not(:active):hover { box-shadow: none; } +} + +%linked_middle { + border-radius: 0; + border-right-style: none; +} + +%linked { + @extend %linked_middle; + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + &:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-right-style: solid; + } + &:only-child { + border-radius: 3px; + border-style: solid; + } +} + +%linked_vertical_middle { + border-radius: 0; + border-bottom-style: none; +} + +%linked_vertical{ + @extend %linked_vertical_middle; + &:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + &:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-bottom-style: solid; + } + &:only-child { + border-radius: 3px; + border-style: solid; + } +} + +%linked_button { + border-left-style: none; + &:first-child { border-left-style: solid; } +} + +%linked_vertical_button { + border-top-style: none; + &:first-child { border-top-style: solid; } +} + +%undecorated_button { + border-color: transparent; + background-color: transparent; + background-image: none; + box-shadow: none; +} + +// menu buttons +menuitem.button.flat, +modelbutton.flat { + transition: none; + min-height: 22px; + padding-left: 8px; + padding-right: 8px; + outline-offset: -2px; + border-radius: 2px; + + @extend %undecorated_button; + + &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); } + &:active, &:selected { @extend %selected_items; } + &:checked { color: $fg_color; } + + // FIXME: temporary workaround + check:last-child, + radio:last-child { margin-left: 8px; } + + check:first-child, + radio:first-child { margin-right: 8px; } +} + +modelbutton.flat arrow { + &, &:hover { background: none; } + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } + &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } +} + +// +// Links +// +*:link { + color: $link_color; + &:visited { + color: $link_visited_color; + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } + } + &:hover { + color: lighten($link_color,10%); + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 90%); } + } + &:active { + color: $link_color; + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } + } + &:selected, *:selected & { + color: mix($selected_fg_color, $selected_bg_color, 80%); + } +} + +button:link, button:visited { + @extend %undecorated_button; + @extend *:link; + &:hover, &:active, &:checked { + @extend %undecorated_button; + } + > label { text-decoration-line: underline; } +} + +// +// Spinbuttons +// +spinbutton { + @extend entry; + &:not(.vertical) { + button { + background-image: none; + border: 1px solid transparentize($borders_color,0.4); + border-style: none none none solid; + color: mix($fg_color,$base_color,95%); + border-radius: 0; + box-shadow: none; + // padding-left: 6px; + // padding-right: 6px; + &:dir(rtl) { border-style: none solid none none; } + + &:disabled { + color: $insensitive_fg_color; + } + &:active { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + } + +// .osd & { +// button { +// @include button(undecorated); +// color: $osd_fg_color; +// border-style: none none none solid; +// border-color: transparentize($osd_borders_color, 0.3); +// border-radius: 0; +// box-shadow: none; +// &:dir(rtl) { border-style: none solid none none; } +// &:hover { +// @include button(undecorated); +// color: $osd_fg_color; +// border-color: transparentize(opacify($osd_borders_color, 1), 0.5); +// background-color: transparentize($osd_fg_color, 0.9); +// box-shadow: none; +// } +// &:disabled { +// @include button(undecorated); +// color: $osd_insensitive_fg_color; +// border-color: transparentize(opacify($osd_borders_color, 1), 0.5); +// box-shadow: none; +// } +// &:last-child { border-radius: 0 2px 2px 0; } +// &:dir(rtl):first-child { border-radius: 2px 0 0 2px; } +// } +// } + + &.vertical { + border-radius: 0; + padding-left: 5px; + padding-right: 5px; + button { + &:first-child { + @extend %top_button; + @include button(normal); + &:active { + @extend %top_button; + @include button(active); + } + &:hover { + @extend %top_button; + @include button(hover); + } + &:disabled { + @extend %top_button; + @include button(insensitive); + } + } + &:last-child { + @extend %bottom_button; + @include button(normal); + &:active { + @extend %bottom_button; + @include button(active); + } + &:hover { + @extend %bottom_button; + @include button(hover); + } + &:disabled { + @extend %bottom_button; + @include button(insensitive); + } + } + } + %top_button { + border-radius: 2px 2px 0 0; + border-style: solid solid none solid; + } + %bottom_button { + border-radius: 0 0 2px 2px; + border-style: none solid solid solid; + } + } + treeview & { + entry, entry:focus { + padding: 1px; + border-width: 1px 0; + border-color: $selected_bg_color; + border-radius: 0; + box-shadow: none; + } + } +} + +// +// Comboboxes +// +combobox { + + > button.combo { + padding-left: 8px; + padding-right: 8px; + } + + &:disabled { + color: $insensitive_fg_color; + } + arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + min-height: 16px; + min-width: 16px; + } + > entry.combo { + &:dir(ltr) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right-style: none; + + @if $variant=='light' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } + } + &:dir(rtl) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-style: none; + + @if $variant=='light' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } + } + } + > button.combo:not(:only-child) { + &:dir(ltr) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &:dir(rtl) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } +} + +.linked > combobox > button.combo { + // the combo is a composite widget so the way we do button linkind doesn't + // work, special case needed. See + // https://bugzilla.gnome.org/show_bug.cgi?id=733979 + &:dir(ltr), + &:dir(rtl) { @extend %linked_middle; } // specificity bump +} +.linked > combobox:first-child > button.combo { + @extend %linked:first-child; +} +.linked > combobox:last-child > button.combo { + @extend %linked:last-child; +} +.linked > combobox:only-child > button.combo { + @extend %linked:only-child; +} + +.linked.vertical > combobox > button.combo { @extend %linked_vertical_middle; } +.linked.vertical > combobox:first-child > button.combo { @extend %linked_vertical:first-child; } +.linked.vertical > combobox:last-child > button.combo { @extend %linked_vertical:last-child; } +.linked.vertical > combobox:only-child > button.combo { @extend %linked_vertical:only-child; } + +// +// Toolbars +// +toolbar { + -GtkWidget-window-dragging: true; + padding: 4px; + background-color: $bg_color; + + separator { background: none; } + &.horizontal separator { margin: 0 6px; } + &.vertical separator { margin: 6px 0; } + + .osd &, &.osd { + padding: 7px; + border: 1px solid transparentize(black, 0.5); + border-radius: 3px; + background-color: transparentize($osd_bg_color, 0.1); + } +} + +.primary-toolbar { + color: $header_fg; + background-color: opacify($header_bg, 1); + box-shadow: none; + border-width: 0 0 1px 0; + border-style: solid; + border-image: linear-gradient(to bottom, opacify($header_bg, 1), + darken($header_bg, 7%)) 1 0 1 0; //temporary hack for rhythmbox 3.1 + + //&:backdrop { background-color: opacify($header_bg_backdrop, 1); } + + separator { @extend %header_separator; } + + @extend %header_widgets; +} + +.inline-toolbar { + @extend toolbar; + background-color: darken($bg_color, 3%); + border-style: solid; + border-color: $borders_color; + border-width: 0 1px 1px; + padding: 3px; + border-radius: 0 0 3px 3px; +} + +searchbar { + background-color: $bg_color; + border-style: solid; + border-color: $borders_color; + border-width: 0 0 1px; + padding: 3px; +} + +actionbar { + padding: 6px; + border-top: 1px solid $borders_color; + background-color: darken($bg_color, 3%); +} + +// +// Headerbars +// +headerbar { + min-height: 42px; + padding: 0 5px; + + border-width: 0 0 1px; + border-style: solid; + border-radius: 0; + border-color: opacify($header_border, 1); + + color: $header_fg; + background-color: opacify($header_bg, 1); + + .csd & { // Transparent header-bars only in csd windows + background-color: $header_bg; + border-color: $header_border; + } + + &:backdrop { color: transparentize($header_fg, 0.3); } + + .title { + padding-left: 12px; + padding-right: 12px; + } + + .subtitle { + font-size: smaller; + padding-left: 12px; + padding-right: 12px; + @extend .dim-label; + } + + // Selectionmode + &.selection-mode, + &.titlebar.selection-mode { + color: $selected_fg_color; + 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); + } + + .subtitle:link { @extend *:link: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, 1); + + &.flat { + @include button(undecorated); + color: $selected_fg_color; + background-color: transparentize($selected_fg_color, 1); + } + &:hover { + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + background-color: transparentize($selected_fg_color, 0.95); + border-color: transparentize($selected_fg_color, 0.5); + } + &:active, &:checked { + color: $selection_mode_bg; + outline-color: transparentize($selection_mode_bg, 0.7); + background-color: $selected_fg_color; + border-color: $selected_fg_color; + } + &:disabled { + color: transparentize($selected_fg_color, 0.6); + background-color: transparentize($selected_fg_color, 1); + border-color: transparentize($selected_fg_color, 1); + + &:active, &:checked { + color: transparentize($selection_mode_bg, 0.6); + background-color: transparentize($selected_fg_color, 0.85); + border-color: transparentize($selected_fg_color, 0.85); + } + } + } + + .selection-menu { + box-shadow: none; + padding-left: 10px; + padding-right: 10px; + GtkArrow { -GtkArrow-arrow-scaling: 1; } + .arrow { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + } + .maximized & { background-color: opacify($selection_mode_bg, 1); } + } + + .tiled &, .tiled &:backdrop, + .maximized &, .maximized &:backdrop { + border-radius: 0; // squared corners when the window is max'd or tiled + } + + .maximized & { + background-color: opacify($header_bg, 1); + border-color: opacify($header_border, 1); + } + + &.default-decoration, + .csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows + &.default-decoration:backdrop, + .csd &.default-decoration:backdrop { + padding-top: 5px; + padding-bottom: 5px; + background-color: opacify($header_bg, 1); + border-bottom-width: 0; + + .maximized & { background-color: opacify($header_bg, 1); } + } +} + +.titlebar { + padding: 0 7px; + border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); + color: $header_fg; + background-color: opacify($header_bg, 1); + box-shadow: inset 0 1px lighten($header_bg, 3%); + + .csd & { background-color: $header_bg; } + + &:backdrop { + color: transparentize($header_fg, 0.3); + background-color: opacify($header_bg_backdrop, 1); + + .csd & { background-color: $header_bg_backdrop; } + } + + .maximized & { + background-color: opacify($header_bg, 1); + + &:backdrop, .csd &:backdrop { background-color: opacify($header_bg_backdrop, 1); } + } + + // Fixes double backgrounds on paned headerbars + &:not(headerbar) { + window > &, + window.csd > & { + padding: 0; + border: none; + background: none; + } + } + // Separator in Gnome Tweak Tool + separator { background-color: $header_border; } + +} + +// Only extending headerbar avoids some problems (Gnome Documents searchbar) +headerbar { + separator.titlebutton { @extend %header_separator; } + + @extend %header_widgets; +} + +%header_separator { + min-width: 1px; + min-height: 1px; + background: none; + border-width: 0 1px; + border-image: linear-gradient(to bottom, + transparentize($header_fg, 1) 25%, + transparentize($header_fg, 0.65) 25%, + transparentize($header_fg, 0.65) 75%, + transparentize($header_fg, 1) 75%) 0 1/0 1px stretch; + + &:backdrop { opacity: 0.6; } +} + +%header_widgets { + + entry, button, separator { + margin-top: 6px; + margin-bottom: 6px; + } + + // Headerbar Entries + entry, spinbutton { + @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; } + } + &:disabled { @include entry(header-insensitive); } + + selection:focus { + background-color: $selected_fg_color; + color: $selected_bg_color; + } + + progress { + border-color: $selected_bg_color; + background-image: none; + background-color: transparent; + } + + @each $e_type, $e_color in (warning, $warning_color), + (error, $error_color) { + &.#{$e_type} { + color: $selected_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%)); + + &:focus { + color: $selected_fg_color; + background-image: linear-gradient(to bottom, $e_color); + } + selection, selection:focus { + background-color: $selected_fg_color; + color: $e_color; + } + } + } + } + + // Headerbar Buttons + button { + + @include button(header-normal); + + &:backdrop { opacity: 0.7; } + + &:hover { @include button(header-hover); } + &:active, &:checked { + @include button(header-active); + background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); + } + &:disabled { @include button(header-insensitive); } + &:disabled:active, &:disabled:checked { @include button(header-insensitive-active); } + } + + // Linking stuff + .linked:not(.vertical):not(.path-bar) > button, + .linked:not(.vertical):not(.path-bar) > button:hover, + .linked:not(.vertical):not(.path-bar) > button:active, + .linked:not(.vertical):not(.path-bar) > button:checked, + .linked:not(.vertical):not(.path-bar) > button:disabled { + border-radius: 3px; + border-style: solid; + + } + .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active):not(:only-child), + .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active), + .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active):not(:only-child), + .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: none; } + + // special case for path-bars and stack-switchers + .linked:not(.vertical):not(.path-bar).stack-switcher > button, + .linked:not(.vertical).path-bar > button { + + @include button(header-hover); + + &:hover { background-color: lighten($header_button_bg, 15%); } + &:active, &:checked { @include button(header-active); } + &:disabled { color: transparentize($header_fg, 0.4); } + } + + .linked:not(.vertical):not(.path-bar).stack-switcher > button, + .linked:not(.vertical).path-bar > button, + .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover, + .linked:not(.vertical).path-bar > button:hover, + .linked:not(.vertical):not(.path-bar).stack-switcher > button:active, + .linked:not(.vertical).path-bar > button:active, + .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, + .linked:not(.vertical).path-bar > button:checked, + .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled, + .linked:not(.vertical).path-bar > button:disabled { + @extend %linked; + @extend %linked_button; + } + + .linked:not(.vertical).path-bar, + .linked:not(.vertical):not(.path-bar).stack-switcher { + + $_linked_separator_color: $header_button_border; + + > button:hover:not(:checked):not(:active):not(:only-child) { + + &:hover { + box-shadow: inset 1px 0 $_linked_separator_color, + inset -1px 0 $_linked_separator_color; + } + &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } + &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } + } + } + + .linked:not(.vertical):not(.pathbar) { + + > entry + entry { border-left-color: transparentize($header_entry_border, 0.5); } + + > entry.error + entry, + > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5)); } + + > entry.warning + entry, + > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($header_entry_border, 0.5)); } + + > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5));} + + + > entry + entry:focus:not(:last-child), + > entry + entry:focus:last-child { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } + + > entry + entry.warning:focus:not(:last-child), + > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } + + > entry + entry.error:focus:not(:last-child), + > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $header_entry_border); } + + + > entry:focus:not(:only-child) + entry, + > entry:focus:not(:only-child) + button, + > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } + + > entry.warning:focus:not(:only-child) + entry, + > entry.warning:focus:not(:only-child) + button, + > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } + + > entry.error:focus:not(:only-child) + entry, + > entry.error:focus:not(:only-child) + button, + > entry.error:focus:not(:only-child) + button.combo > button.combo { border-left-color: if($variant=='light', $error_color, $header_entry_border); } + + } + + // Headerbar Suggested and Destructive Action buttons + @each $b_type, $b_color in (suggested-action, $suggested_color), + (destructive-action, $destructive_color) { + button.#{$b_type} { + @include button(suggested_destructive, $b_color); + + &.flat { + @include button(undecorated); + color: $b_color; + outline-color: transparentize($b_color, 0.7); + } + &:hover { + @include button(suggested_destructive, lighten($b_color, 10%)); + } + &:active, &:checked { + @include button(suggested_destructive, darken($b_color, 10%)); + } + &.flat:disabled, + &:disabled { @include button(header-insensitive); } + } + button.#{$b_type}:backdrop, + button.#{$b_type}:backdrop { + opacity: 0.8; + } + } + + // Headerbar Spinbuttons + spinbutton { + + &:focus button { + color: $selected_fg_color; + + &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; } + &:disabled { color: transparentize($selected_fg_color, 0.6); } + } + button { + color: $header_fg; + + &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; } + &:disabled { color: transparentize($header_fg, 0.3); } + &:active { background-color: rgba(0,0,0,0.1); } + } + } + + // Headerbar ComboBoxes + combobox { + &:disabled { color: transparentize($header_fg, 0.6); } + + &.combobox-entry button { + @include entry(header-normal); + + &:hover { @include entry(header-focus); box-shadow: none; } + &:disabled { @include entry(header-insensitive); } + } + &.combobox-entry entry { + &:dir(ltr) { + border-right-style: none; + + &:focus { box-shadow: none; } + @if $variant=='light' and $darker=='false' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } + } + &:dir(rtl) { + border-left-style: none; + + &:focus { box-shadow: none; } + @if $variant=='light' and $darker=='false' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } + } + } + + } + + // Headerbar Switches + switch { + &:backdrop { opacity: 0.75; } + } + + progressbar { + trough { background-color: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); } + + &:backdrop { opacity: 0.75; } + } + + // Headerbar Scale + scale { + $_trough_bg: if($variant=='light' and $darker=='false', opacify($header_button_border, 0.05), $header_button_border); + + &:backdrop { opacity: 0.75; } + + slider { + $_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%)); + + background-image: linear-gradient(to bottom, $_slider_bg); + border-color: $_slider_border; + + &: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; + } + &:disabled { + background-image: linear-gradient(to bottom, mix($_slider_bg, $header_bg, 70%)); + border-color: $_slider_border; + } + } + trough { + background-image: linear-gradient(to bottom, $_trough_bg); + + &:disabled { background-image: linear-gradient(to bottom, if($variant=='light' and $darker=='false', transparentize($_trough_bg, 0.05), transparentize($_trough_bg, 0.1))); } + } + } +} + +// +// Pathbars +// +.path-bar button { + + &:first-child { padding-left: 10px; } + &:last-child { padding-right: 10px; } + &:only-child { + padding-left: 10px; + padding-right: 10px; + } + + // the following is for spacing the icon and the label inside the home button + label:last-child { padding-left: 4px; } + label:first-child { padding-right: 4px; } + label:only-child, label { padding-right: 0; padding-left: 0; } +} + +// +// 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; + + 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 + + rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props + + &:selected { + border-radius: 0; + border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly + + @extend %selected_items; + } + + &:disabled { + color: $insensitive_fg_color; + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + } + } + + &.separator { min-height: 2px; } + + &.dnd { + border-style: solid none; + border-width: 1px; + border-color: mix($fg_color, $selected_bg_color, 50%); + } + + &.expander { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + + color: mix($fg_color, $base_color, 50%); + + &:hover { color: $fg_color; } + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 70%); + &:hover { color: $selected_fg_color; } + } + + &:checked { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + } + + &.progressbar { // progress bar in treeviews + color: $selected_fg_color; + border-radius: 3px; + background-image: linear-gradient(to bottom, $selected_bg_color); + + &:selected { + color: $selected_bg_color; + box-shadow: none; + background-image: linear-gradient(to bottom, $selected_fg_color); + } + } + &.trough, &.trough:selected { // progress bar trough in treeviews + color: $fg_color; + background-image: linear-gradient(to bottom, $button_border); + border-radius: 3px; + border-width: 0; + } + + header { + button { + @extend %column_header_button; + $_column_header_color: mix($fg_color,$base_color,80%); + color: $_column_header_color; + background-color: $base_color; + font-weight: bold; + &:hover { + @extend %column_header_button; + color: $selected_bg_color; + box-shadow: none; + transition: none; //I shouldn't need this + } + &:active { + @extend %column_header_button; + color: $fg_color; + transition: none; //I shouldn't need this + } + &.dnd { + @extend header.button.dnd; + } + } + button:last-child, + button:last-child:hover, + button:last-child:active { //treeview-like derived widgets in Banshee and Evolution + border-right-style: none; + border-image: none; + } + } + header.button.dnd { // for treeview-like derive widgets + transition: none; + color: $selected_bg_color; + box-shadow: inset 1px 1px 0 1px $selected_bg_color, + inset -1px 0 0 1px $selected_bg_color, + inset 1px 1px $base_color, inset -1px 0 $base_color;; + &:active { @extend header.button.dnd; } + &:selected { @extend header.button.dnd; } + &:hover { @extend header.button.dnd; } + } +} + +%column_header_button { + min-height: 0; + min-width: 0; + padding: 3px 6px; + background-image: none; + border-style: none solid none none; + border-radius: 0; + border-image: linear-gradient(to bottom, + transparentize(if($variant == 'light', black, white), 1) 20%, + transparentize(if($variant == 'light', black, white), 0.89) 20%, + transparentize(if($variant == 'light', black, white), 0.89) 80%, + transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch; + + &:active, &:hover { background-color: $base_color; } + &:active:hover { color: $fg_color; } + &:disabled { + border-color: $bg_color; + background-image: none; + } +} + +// +// Menus +// +menubar, +.menubar { + -GtkWidget-window-dragging: true; + padding: 0px; + background-color: opacify($header_bg, 1); + color: $header_fg; + + &:backdrop { + color: transparentize($header_fg, 0.3); + //background-color: opacify($header_bg_backdrop, 1); + } + + & > menuitem { + padding: 6px 8px; + border: solid transparent; + border-width: 0; + + &:hover { //Seems like it :hover even with keyboard focus + background-color: $selected_bg_color; + color: $selected_fg_color; + } + &:disabled { + color: transparentize($header_fg, 0.6); + border-color: transparent; + } + } +} + +menu, +.menu { + $_menu_bg: if($variant=='light', $base_color, $bg_color); + margin: 4px; + padding: 0; + border-radius: 0; + background-color: $_menu_bg; + border: 1px solid $borders_color; + + .csd & { + padding: 4px 0px; + border-radius: 2px; + border: none; + } + + separator, + .csd & separator { + min-height: 10px; + background-color: $_menu_bg; + } + + menuitem { + padding: 4px; + min-width: 40px; + border: solid transparent; + border-width: 1px 0 1px 0; + &:hover { + color: $fg_color; + background-color: if($variant == 'light', transparentize(black, 0.96), transparentize(white, 0.95)); + border: solid if($variant == 'light', transparentize(black, 0.92), transparentize(white, 0.93)); + border-width: 1px 0 1px 0; + } + &:disabled { + color: $insensitive_fg_color; + } + + //submenu indicators + arrow { + min-height: 16px; + min-width: 16px; + + &:dir(ltr) { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + margin-left: 10px; + } + &:dir(rtl) { + -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); + margin-right: 10px; + } + } + @at-root menuitem { + accelerator { color: gtkalpha(currentColor,0.55); } + + check, radio { + min-height: 16px; + min-width: 16px; + &:dir(ltr) { margin-right: 7px; } + &:dir(rtl) { margin-left: 7px; } + } + } + } + arrow { // overflow buttons + @extend %undecorated_button; + border-style: none; + border-radius: 0; + min-width: 16px; + min-height: 16px; + + &.top { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + border-bottom: 1px solid mix($fg_color, $base_color, 10%); + } + &.bottom { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + border-top: 1px solid mix($fg_color, $base_color, 10%); + } + &:hover { background-color: mix($fg_color, $base_color, 10%); } + &:disabled { + color: transparent; + background-color: transparent; + border-color: transparent ; + } + } +} + +// +// Popovers +// +popover, +popover.background { + $_popover_bg: if($variant=='light', $base_color, $bg_color); + padding: 2px; + border-radius: 3px; + background-clip: border-box; + background-color: $_popover_bg; + + box-shadow: 0 2px 6px 1px if($variant=='light', transparentize(black, 0.93), transparentize(black, 0.65)); + + .csd &, & { border: 1px solid darken($borders_color, 5%); } + + & separator { background-color: $_popover_bg; } + label.separator { @extend label.separator; } // Noice + + > list, + > .view, + > toolbar, + &.osd > toolbar { + border-style: none; + background-color: transparent; + } + &.osd, &.magnifier { @extend %osd; } + + &.touch-selection { @extend .context-menu } +} + +//touch selection handlebars for the Popover.osd above +cursor-handle { + background-color: transparent; + background-image: none; + box-shadow: none; + border-style: none; + &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); } + &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); } +} + +// +// Notebooks and Tabs +// +notebook { + -GtkNotebook-initial-gap: 4; + -GtkNotebook-arrow-spacing: 5; + -GtkNotebook-tab-curvature: 0; + -GtkNotebook-tab-overlap: 1; + -GtkNotebook-has-tab-gap: false; + + padding: 0; + background-color: $base_color; + transition: all 200ms $ease-out-quad; + + &.frame { + border: 1px solid $borders_color; + } + header { + // tab sizing + $vpadding: 4px; + $hpadding: 15px; + + background-color: $bg_color; + + .frame & { + border: 0px solid $borders_color; + &.top { border-bottom-width: 0; } + &.bottom { border-top-width: 0; } + &.right { border-left-width: 0; } + &.left { border-right-width: 0; } + } + + $_header_border: $borders_color; + + &.top { box-shadow: inset 0 -1px $_header_border; } + &.bottom { box-shadow: inset 0 1px $_header_border; } + &.right { box-shadow: inset 1px 0 $_header_border; } + &.left { box-shadow: inset -1px 0 $_header_border; } + + @each $_pos in (top, bottom, right, left) { + &.#{$_pos} tab { + border-width: 0; + background-color: transparentize($base_color, 1); + padding: $vpadding $hpadding; + + border-#{$_pos}: 2px solid transparent; + + @if $_pos==top or $_pos==bottom { + padding-#{$_pos}: $vpadding + 2; + + &.reorderable-page { + padding-left: 12px; // for a nicer close button + padding-right: 12px; // placement + } + } + + @else if $_pos==left or $_pos==right { + padding-#{$_pos}: $hpadding + 2; // FIXME + + } + + @if $_pos==top { border-radius: 3.5px 2px 0 0; } + @else if $_pos==bottom { border-radius: 0 0 2px 3.5px; } + @else if $_pos==left { border-radius: 3.5px 0 0 3.5px; } + @else if $_pos==right { border-radius: 0 3.5px 3.5px 0; } + + &:hover { + background-color: transparentize($base_color, 0.5); + box-shadow: inset 0 1px $borders_color, + inset 0 -1px $borders_color, + inset 1px 0 $borders_color, + inset -1px 0 $borders_color; + } + + &:active, &:active:hover { + background-color: $base_color; + + @if $_pos==top { + box-shadow: inset 0 1px $borders_color, + inset 0 -1px $base_color, + inset 1px 0 $borders_color, + inset -1px 0 $borders_color; + } + @else if $_pos==bottom { + box-shadow: inset 0 -1px $base_color, + inset 0 -1px $borders_color, + inset 1px 0 $borders_color, + inset -1px 0 $borders_color; + } + @else if $_pos==left { + box-shadow: inset 0 1px $borders_color, + inset 0 -1px $borders_color, + inset 1px 0 $borders_color, + inset -1px 0 $base_color; + } + @else if $_pos==right { + box-shadow: inset 0 1px $borders_color, + inset 0 -1px $borders_color, + inset 1px 0 $base_color, + inset -1px 0 $borders_color; + } + } + } + } + + &.top, &.bottom { + & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } + & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } + } + &.left, &.right { + & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + } + & tabs arrow { + color: $insensitive_fg_color; + + &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } + &:active { color: $fg_color; } + &:disabled { color: transparentize($insensitive_fg_color,0.3); } + } + } + + tab { + label { //tab text + padding: 0 2px; // needed for a nicer focus ring + color: $insensitive_fg_color; + } + &:hover label { + // prelight tab text + color: mix($fg_color, $insensitive_fg_color, 50%); + } + &:active label { + // active tab text + color: $fg_color; + } + button { //tab close button + min-height: 18px; + min-width: 16px; + padding: 0; + color: mix($bg_color, $fg_color, 35%); + + @extend %undecorated_button; + + &:hover { + @extend %undecorated_button; + color: lighten(red, 15%); + } + &:active, &:active:hover { + @extend %undecorated_button; + color: $selected_bg_color; + } + } + } +} + +// +// Scrollbars +// +$_scrollbar_bg_color: darken($base_color, 1%); + +scrollbar { + @at-root * { + -GtkRange-slider-width: 13; + -GtkRange-trough-border: 0; + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. + // sadly can't be in '.slider' + // where it belongs + -GtkRange-stepper-spacing: 0; + -GtkRange-trough-under-steppers: 1; + } + + $_slider_margin: 3px; + $_slider_fine_tune_margin: 4px; + + button { border: none; } + + &.overlay-indicator { + &:not(.dragging):not(.hovering) { // Overlay scrolling indicator + opacity: 0.4; + + -GtkRange-slider-width: 6px; + + slider { + margin: 0; + background-color: mix($fg_color, $bg_color, 70%); + border: 1px solid if($variant == 'light', transparentize(white, 0.4), transparentize(black, 0.7)); + background-clip: padding-box; + } + + trough { + border-style: none; + background-color: transparent; + } + + // w/o the following margin tweaks the slider shrinks when hovering/dragging + &.vertical slider { + margin-top: $_slider_margin - 1px; + margin-bottom: $_slider_margin - 1px; + } + + &.horizontal slider { + margin-left: $_slider_margin - 1px; + margin-right: $_slider_margin - 1px; + } + + } + + &.dragging, + &.hovering { opacity: 0.99; } + } + + // trough coloring + trough { + background-color: $_scrollbar_bg_color; + border: 1px none $borders_color; + } + + // slider coloring + slider { + background-color: mix($fg_color, $bg_color, 40%); + + &:hover { background-color: mix($fg_color, $bg_color, 30%); } + + &:hover:active { background-color: $selected_bg_color;} + + &:disabled { + background-color: transparent; + } + } + + // sizing + slider { + border-radius: 100px; + margin: $_slider_margin; + } + + &.fine-tune slider { margin: $_slider_fine_tune_margin; } + + &.vertical { + + slider { + margin-left: 1px + $_slider_margin; + + &:dir(rtl) { + margin-left: $_slider_margin; + margin-right: 1px + $_slider_margin; + } + } + + &.fine-tune .slider { + margin-left: 1px + $_slider_fine_tune_margin; + + &:dir(rtl) { + margin-left: $_slider_fine_tune_margin; + margin-right: 1px + $_slider_fine_tune_margin; + } + } + + trough { + border-left-style: solid; + + &:dir(rtl) { + border-left-style: none; + border-right-style: solid; + } + } + } + + &.horizontal { + slider { margin-top: 1px + $_slider_margin; } + + &.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; } + + trough { border-top-style: solid; } + } +} + +// +// Switches +// +switch { + font: 1; + outline-color: transparent; + + &, slider { + background-size: 52px 24px; + background-repeat: no-repeat; + background-position: right center; + color: transparent; + border-color: transparent; + border-image: none; + border-style: none; + box-shadow: none; + + &:dir(rtl) { background-position: left center; } + } + slider { + min-width: 52px; + min-height: 24px; + } +} + +@each $k,$l in ('',''), + (':active','-active'), + (':disabled','-insensitive'), + (':active:disabled','-active-insensitive') { + + // load switch troughs from .png files in assets directory + + switch#{$k} { + background-image: -gtk-scaled(url("assets/switch#{$l}#{$asset_suffix}.png"),url("assets/switch#{$l}#{$asset_suffix}@2.png")); + } + + row:selected switch#{$k}, + infobar switch#{$k} { + background-image: -gtk-scaled(url("assets/switch#{$l}-selected.png"),url("assets/switch#{$l}-selected@2.png")); + } + + headerbar switch#{$k}, + .primary-toolbar switch#{$k} { + background-image: -gtk-scaled(url("assets/switch#{$l}-header#{$darker_asset_suffix}.png"),url("assets/switch#{$l}-header#{$darker_asset_suffix}@2.png")); + } +} + +// +// Check and Radio items * +// +@each $w,$a in ('check', 'checkbox'), + ('radio','radio') { + + //standard checks and radios + @each $s,$as in ('','-unchecked'), + (':disabled','-unchecked-insensitive'), + (':indeterminate', '-mixed'), + (':indeterminate:disabled', '-mixed-insensitive'), + (':checked', '-checked'), + (':checked:disabled','-checked-insensitive') { + #{$w}#{$s} { + -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), + url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); + } + + %osd_check_radio { + #{$w}#{$s} { + -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"), + url("assets/#{$a}#{$as}-dark@2.png")); + } + } + // the borders of checks and radios are + // too similar in luminosity to the selected background color, hence + // we need special casing. + .view #{$w}#{$s}:selected, + row:selected #{$w}#{$s}, + infobar #{$w}#{$s} { + -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"), + url("assets/#{$a}#{$as}-selected@2.png")); + } + } +} + +// Selectionmode +@each $s,$as in ('','-selectionmode'), + (':checked', '-checked-selectionmode') { + .view.content-view.check#{$s}:not(list) { + -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"), + url("assets/checkbox#{$as}#{$asset_suffix}@2.png")); + background-color: transparent; + } +} + +checkbutton, radiobutton { + // this is for a nice focus on check and radios text + &.text-button { + padding: 1px 2px 4px; + outline-offset: 0; + &:disabled, + &:disabled:active, + &:disabled:indeterminate { + // set insensitive color, which is overriden otherwise + color: $insensitive_fg_color; + } + } +} + +radiobutton radio, +checkbutton check { + min-width: 16px; + min-height: 16px; + margin: 0 2px; + &:only-child { margin: 0; } +} + +// +// GtkScale +// +scale { + -GtkScale-slider-length: 15; + -GtkRange-slider-width: 15; + -GtkRange-trough-border: 0; + outline-offset: -1px; + -gtk-outline-radius: 2px; + + marks { color: gtkalpha(currentColor, 0.7); } + + &.fine-tune { + trough, fill, highlight { + border-radius: 5px; + margin: 3px; + } + } + + trough, fill, highlight { + border-radius: 2.5px; + } + + 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, $button_bg); + border: 1px solid $_slider_border; + border-radius: 50%; + box-shadow: none; + + &:hover { + background-image: linear-gradient(to bottom, lighten($button_bg, 5%)); + border-color: $_slider_border; + } + &:disabled { + background-image: linear-gradient(to bottom, mix($entry_bg, $bg_color, 55%)); + border-color: transparentize($_slider_border, 0.2); + } + &:active { + background-image: linear-gradient(to bottom, $selected_bg_color); + border-color: $selected_bg_color; + } + //OSD sliders + .osd & { + background-image: linear-gradient(to bottom, $osd_bg_color); + border-color: $selected_bg_color; + + &:hover { background-image: linear-gradient(to bottom, $selected_bg_color); } + &:active { + background-image: linear-gradient(to bottom, darken($selected_bg_color, 10%)); + border-color: darken($selected_bg_color, 10%); + } + } + //selected list-row and infobar sliders + row:selected &, + infobar & { + background-image: linear-gradient(to bottom, $selected_fg_color); + border-color: $selected_fg_color; + + &:hover { + background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 85%)); + border-color: mix($selected_fg_color, $selected_bg_color, 85%); + } + &:active { + background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 50%)); + border-color: mix($selected_fg_color, $selected_bg_color, 50%); + } + &:disabled{ + background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); + border-color: mix($selected_fg_color, $selected_bg_color, 55%); + } + } + } + trough { + $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); + + margin: 5px; + border: none; + background-image: linear-gradient(to bottom, $_scale_trough_bg); + highlight { + background-image: linear-gradient(to bottom, $selected_bg_color); + + &:disabled { + background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 0.45)); + } + } + fill { + background: none; + background-color: red; + } + &:disabled { + background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45)); + } + + //OSD troughs + .osd & { + background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%)); + outline-color: transparentize($osd_fg_color, 0.8); + highlight { + background-image: none; + background-image: linear-gradient(to bottom, $selected_bg_color); + } + &:disabled { } + } + // troughs in selected list-rows and infobars + row:selected &, + infobar & { + background-image: linear-gradient(to bottom, transparentize(black, 0.8)); + + highlight { + background-image: linear-gradient(to bottom, $selected_fg_color); + + &:disabled { background-image: linear-gradient(to bottom, mix($selected_fg_color, $selected_bg_color, 55%)); } + } + &:disabled { background-image: linear-gradient(to bottom, transparentize(black, 0.9)); } + } + } +} + +// +// Progress bars +// +progressbar { + padding: 0; + font-size: smaller; + color: transparentize($fg_color, 0.3); + + &.osd { + min-width: 3px; + min-height: 3px; + background-color: transparent; + + trough { + border-style: none; + background-color: transparent; + box-shadow: none; + } + } + // Moving bit + progress { + background-color: $selected_bg_color; + border: none; + border-radius: 3px; + box-shadow: none; //needed for clipping + + row:selected &, + infobar & { background-color: $selected_fg_color; } + } + // Trough + trough { + border: none; + border-radius: 3px; + background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); + + row:selected &, + infobar & { background-color: transparentize(black, 0.8); } + } +} + +// FIXME +//.osd .scale.progressbar { +// background-color: $selected_bg_color; +//} + +// +// Level Bar +// +levelbar { + + block { + min-width: 32px; + min-height: 1px; + } + &.vertical block { + min-width: 1px; + min-height: 32px; + } + + trough { + border: none; + padding: 3px; + border-radius: 3px; + background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); + } + + &.horizontal.discrete block { margin: 0 1px; } + &.vertical.discrete block { margin: 1px 0; } + + block:not(.empty) { + border: 1px solid $selected_bg_color; + background-color: $selected_bg_color; + border-radius: 2px; + } + block.low { + border-color: $warning_color; + background-color: $warning_color; + } + block.high { + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + block.full { + border-color: $success_color; + background-color: $success_color; + } + block.empty { + background-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); + border-color: if($variant=='light', transparentize($fg_color,0.8), $base_color); + } +} + +// +// Frames +// +frame border, +.frame { + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid $borders_color; + &.flat { border-style: none; } + padding: 0; +} + +paper { + border: 1px solid $borders_color; + background: white; + padding: 0; +} + +scrolledwindow { + viewport.frame { // avoid double borders when viewport inside + // scrolled window + border-style: none; + } + + // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. + // This draws a box on top of the content, the size changes programmatically. + overshoot { + &.top { @include overshoot(top); } + &.bottom { @include overshoot(bottom); } + &.left { @include overshoot(left); } + &.right { @include overshoot(right); } + } + + // Overflow indication, works similarly to the overshoot, the size if fixed tho. + undershoot { + &.top { @include undershoot(top); } + &.bottom { @include undershoot(bottom); } + &.left { @include undershoot(left); } + &.right { @include undershoot(right); } + } + + junction { // the small square between two scrollbars + border-color: transparent; + // the border image is used to add the missing dot between the borders, details, details, details... + border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch; + background-color: $_scrollbar_bg_color; + + &:dir(rtl) { border-image-slice: 0 1 0 0; } + } +} + +//vbox and hbox separators +separator { + background-color: transparentize(black, 0.9); + min-width: 1px; + min-height: 1px; +} + +// +// Lists +// +list { + background-color: $base_color; + border-color: $borders_color; +} + +row { padding: 2px; } + +row.activatable { + + &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 + &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } + + &:active { color: $fg_color; } + + &:selected { + &:active { color: $selected_fg_color; } + + &.has-open-popup, + &:hover { background-color: mix(black, $selected_bg_color, 10%); } + + &:disabled { + color: transparentize($selected_fg_color, 0.3); + background-color: transparentize($selected_bg_color, 0.3); + label { color: inherit; } + } + } +} + +row:selected { + @extend %selected_items; + button { @extend %selected-button } +} + +// transition +row, row.activatable { + transition: all 150ms $ease-out-quad; + &:hover { transition: none; } +} + +// +// App Notifications +// +.app-notification { + padding: 10px; + color: $dark_sidebar_fg; + background-color: $dark_sidebar_bg; + background-clip: border-box; + border-radius: 0 0 2px 2px; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: darken($dark_sidebar_bg, 10%); + + border { border: none; } + + button { + @include button(osd); + &.flat { + @extend %undecorated_button; + border-color: transparentize($selected_bg_color, 1); + &:disabled { @extend %undecorated_button; } + } + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); background-clip: padding-box; } + &:disabled { @include button(osd-insensitive); + } + } +} + +// +// Expanders +// +expander { + arrow { + min-width: 16px; + min-height: 16px; + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } + &:hover { color: lighten($fg_color,30%); } //only lightens the arrow + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + } +} + +// +// Calendar +// +calendar { + color: $fg_color; + border: 1px solid $borders_color; + border-radius: 3px; + padding: 2px; + + &:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 1.5px; + } + &.header { + color: $fg_color; + border: none; + border-radius: 0; + } + &.button, &.button:focus { + color: transparentize($fg_color,0.55); + @include button(undecorated); + + &:hover { + color: $fg_color; + } + &:disabled { + color: $insensitive_fg_color; + background-color: transparent; + background-image: none; + } + } + &:indeterminate { color: gtkalpha(currentColor,0.55); } + &.highlight { + color: $fg_color; + } +} + +// +// Dialogs +// +messagedialog { // Message Dialog styling + -GtkDialog-button-spacing: 0; + + .titlebar { background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%) } + + .dialog-action-area button { padding: 2px; } + + &.csd { // rounded bottom border styling for csd version + &.background { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: none; + } + .dialog-action-area button { + padding: 2px; + border-radius: 0; + + @extend %middle_button; + + &:hover, &:active, &:disabled { + @extend %middle_button; + } + + &:first-child{ @extend %first_button; } + &:last-child { @extend %last_button; } + } + %middle_button { + border-right-style: none; + border-bottom-style: none; + } + %last_button { + border-bottom-right-radius: 3px; + } + %first_button { + border-left-style: none; + border-bottom-left-radius: 3px; + } + } +} + +// +// Sidebar +// +.sidebar, .sidebar .view { + border: none; + background-color: $bg_color; + + &:selected { @extend %selected_items; } + separator { @extend separator; } +} + +stacksidebar { + row { + padding: 10px 4px; + > label { + padding-left: 6px; + padding-right: 6px; + } + &.needs-attention > label { + @extend %needs_attention; + background-size: 6px 6px, 0 0; + } + } +} + +placessidebar { + + @extend scrolledwindow; + + row { + // Needs overriding of the GtkListBoxRow padding + padding: 0px; + // Using margins/padding directly in the SidebarRow + // will make the animation of the new bookmark row jump + > revealer { + padding: 8px 10px; + } + image.sidebar-icon { + &:dir(ltr) { padding-right: 8px; } + &:dir(rtl) { padding-left: 8px; } + } + label.sidebar-label { + &:dir(ltr) { padding-right: 2px; } + &:dir(rtl) { padding-left: 2px; } + } + @at-root button.sidebar-button { + min-width: 26px; + min-height: 26px; + padding: 0; + @extend button.flat; + border-radius: 100%; + -gtk-outline-radius: 100%; + &:not(:hover):not(:active) > image { opacity: 0.5 }; + } + } + + row.sidebar-placeholder-row { border: solid 1px $selected_bg_color; } + + row.sidebar-new-bookmark-row { background-color: darken($bg_color, 10%); } +} + +// +// Placesview +// +placesview { + .server-list-button > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } + + row.activatable:hover { background-color: transparent; } +} + +// +// Paned +// + +paned { + > separator { + min-width: 1px; + min-height: 1px; + -gtk-icon-source: none; + border-style: none; + background-color: transparent; + background-image: linear-gradient(to top, $borders_color); + background-size: 1px 1px; + + &:selected { background-image: linear-gradient(to top, $selected_bg_color); } + + &.wide { + margin: 0; + padding: 0; + min-width: 5px; + min-height: 5px; + background-image: linear-gradient(to top, $borders_color), linear-gradient(to top, $borders_color); + background-size: 1px 1px, 1px 1px; + } + } + + &.horizontal > separator { + background-repeat: repeat-y; + &:dir(ltr) { + margin: 0 -8px 0 0; + padding: 0 8px 0 0; + background-position: left; + } + &:dir(rtl) { + margin: 0 0 0 -8px; + padding: 0 0 0 8px; + background-position: right; + } + + &.wide { + background-repeat: repeat-y, repeat-y; + background-position: left, right; + } + } + + &.vertical > separator { + margin: 0 0 -8px 0; + padding: 0 0 8px 0; + background-repeat: repeat-x; + background-position: top; + + &.wide { + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; + } + } +} + +// +// GtkInfoBar +// +infobar { + border-style: none; + + button { @extend %selected-button } +} + +.info, +.question, +.warning, +.error, +infobar { + background-color: $selected_bg_color; + color: $selected_fg_color; +} + + +// +// Buttons on selected backgrounds +// +%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); + + &.flat { + @include button(undecorated); + color: $selected_fg_color; + background-color: transparentize($selected_fg_color, 1); + } + &: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; + } + &:disabled { + color: transparentize($selected_fg_color, 0.6); + background-color: transparentize($selected_fg_color, 1); + border-color: transparentize($selected_fg_color, 0.8); + + &:active, &:checked { + color: transparentize($selected_bg_color, 0.6); + background-color: transparentize($selected_fg_color, 0.8); + border-color: transparentize($selected_fg_color, 0.8); + } + } +} + +// +// Tooltips +// +tooltip { + &.background { + // background-color needs to be set this way otherwise it gets drawn twice + // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. + background-color: $osd_bg_color; + background-clip: padding-box; + } + + border-radius: 2px; + box-shadow: none; + + decoration { background-color: transparent; } + + * { //Yeah this is ugly + padding: 4px; + background-color: transparent; + color: $osd_fg_color; // just to be sure + } +} + +// +// Color Chooser +// +colorswatch { + // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one + // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style + // is applied to the overlay box. + + $_colorswatch-radius: 2px; + + &, &:drop(active) { border-style: none; } + + // border rounding + &.top { + border-top-left-radius: $_colorswatch-radius + 0.5px; + border-top-right-radius: $_colorswatch-radius + 0.5; + + overlay { + border-top-left-radius: $_colorswatch-radius; + border-top-right-radius: $_colorswatch-radius; + } + } + &.bottom { + border-bottom-left-radius: $_colorswatch-radius + 0.5px; + border-bottom-right-radius: $_colorswatch-radius + 0.5; + + overlay { + border-bottom-left-radius: $_colorswatch-radius; + border-bottom-right-radius: $_colorswatch-radius; + } + } + &.left, &:first-child:not(.top) { + border-top-left-radius: $_colorswatch_radius + 0.5px; + border-bottom-left-radius: $_colorswatch_radius + 0.5px; + overlay { + border-top-left-radius: $_colorswatch_radius; + border-bottom-left-radius: $_colorswatch_radius; + } + } + &.right, &:last-child:not(.bottom) { + border-top-right-radius: $_colorswatch_radius + 0.5px; + border-bottom-right-radius: $_colorswatch_radius + 0.5px; + overlay { + border-top-right-radius: $_colorswatch_radius; + border-bottom-right-radius: $_colorswatch_radius; + } + } + + &.dark overlay { + color: transparentize(white, 0.3); + &:hover { + border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); + } + } + &.light overlay { + color: transparentize(black, 0.3); + &:hover { + border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color); + } + } + + overlay { + border: 1px solid if($variant == 'light', transparentize(black, 0.85), $borders_color); + &:hover { background-color: transparentize(white, 0.8) } + } + + &:disabled { + opacity: 0.5; + overlay { + border-color: transparentize(black, 0.4); + box-shadow: none; + } + } + + &#add-color-button { + border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi + border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set + @include button(normal); + &:hover { @include button(hover); } + overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneath + } +} + +button.color { + padding: 0; + + colorswatch:first-child:last-child { + &, overlay { + margin: 4px; + border-radius: 0; + } + } +} + +// +// Misc +// +//content view (grid/list) +.content-view { + background-color: $base_color; + + &:hover { -gtk-icon-effect: highlight; } + + rubberband { @extend rubberband; } +} + +.scale-popup button { // +/- buttons on GtkVolumeButton popup + padding: 6px; + &:hover { + @include button(hover); + } +} + +button.scale { padding: 8px; } + +// Decouple the font of context menus from their entry/textview +.context-menu { font: initial; } +.monospace { font: Monospace; } + +// +// Shortcuts Help +// +button.circular, +button.circular-button { + padding: 0; + min-width: 26px; + min-height: 26px; + border-radius: 50%; + -gtk-outline-radius: 50%; + + label { padding: 0; } +} + +.keycap { + background-color: $base_color; + border: 1px solid $borders_color; + border-radius: 2px; + box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85)); + color: $fg_color; + padding: 3px 8px 3px 8px; + + border { border-style: none; } +} + +stackswitcher button { + &.text-button { min-width: 80px; } + &.circular { min-width: 0; } +} + +// +// Dnd +// +*:drop(active):focus, +*:drop(active) { + border: 1px solid black; +} + +// +// Overshoot +// +// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. +// This draws a box on top of the content, the size changes programmatically. +.overshoot { + &.top { @include overshoot(top); } + &.bottom { @include overshoot(bottom); } + &.left { @include overshoot(left); } + &.right { @include overshoot(right); } +} + +// +// Undershoot +// +// Overflow indication, works similarly to the overshoot, the size if fixed tho. +.undershoot { + &.top { @include undershoot(top); } + &.bottom { @include undershoot(bottom); } + &.left { @include undershoot(left); } + &.right { @include undershoot(right); } +} + +// +// Window Decorations +// + +decoration { + border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); + border-width: 0px; + + $_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 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 { + // the transparent shadow here is to enforce that the shadow extents don't + // change when we go to backdrop, to prevent jumping windows + box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border), + 0 8px 8px 0 transparent, + 0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); + } + .tiled & { + border-radius: 0; + } + .popup & { + box-shadow: none; + border-radius: 0; + } + &.popup { + box-shadow: none; + border-radius: 0; + } + // server-side decorations as used by mutter + &.ssd { + border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); + box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(black, 0.35), $_wm_border); + + &.maximized { border-radius: 0; } + } + .csd.popup & { + 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($bg_color, 10%)); + } + tooltip.csd & { + border-radius: 2px; + box-shadow: 0 1px 3px 1px $_wm_border; + } + messagedialog.csd & { + border-radius: 3px; + } + .solid-csd & { + border-radius: 0; + margin: 1px; + background-color: $header_bg; + box-shadow: none; + } +} + +// +// Titlebuttons +// +headerbar, +.titlebar { + + &.default-decoration button.titlebutton { // no vertical padding for ssd buttons + padding: 0 4px; // already handled by the titlebar-padding + min-width: 0; + } + + button.titlebutton { + padding: 0; + min-width: 24px; + + @include button(undecorated); + background-color: transparentize($header_bg, 1); + + &:hover { + @include button(header-hover); + } + &:active, &:checked { + @include button(header-active); + } + + &.close, &.maximize, &.minimize { + + color: transparent; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + border-width: 0; + + &:backdrop { opacity: 1; } + } + + &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png')); } + &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); } + &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); } + &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); } + + &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$darker_asset_suffix}.png'),url('assets/titlebutton-max#{$darker_asset_suffix}@2.png')); } + &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}@2.png')); } + &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-hover#{$darker_asset_suffix}@2.png')); } + &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-active#{$darker_asset_suffix}@2.png')); } + + &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$darker_asset_suffix}.png'),url('assets/titlebutton-min#{$darker_asset_suffix}@2.png')); } + &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}@2.png')); } + &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-hover#{$darker_asset_suffix}@2.png')); } + &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-active#{$darker_asset_suffix}@2.png')); } + } +} + +// catch all extend +%selected_items { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); +} -- cgit v1.2.3 From 2319f5dcc2795bf4ce90de41dc28c5831eeb77ce Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: notebook: remove deprecated style properties --- common/gtk-3.0/3.20/sass/_common.scss | 6 ------ 1 file changed, 6 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index a39faee..b85d450 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1781,12 +1781,6 @@ cursor-handle { // Notebooks and Tabs // notebook { - -GtkNotebook-initial-gap: 4; - -GtkNotebook-arrow-spacing: 5; - -GtkNotebook-tab-curvature: 0; - -GtkNotebook-tab-overlap: 1; - -GtkNotebook-has-tab-gap: false; - padding: 0; background-color: $base_color; transition: all 200ms $ease-out-quad; -- cgit v1.2.3 From e2bd5989d463c7e7c66b12d0bd7e552d8e017a6a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: update notebook styling --- common/gtk-3.0/3.20/sass/_common.scss | 144 ++++++++++++++-------------------- 1 file changed, 57 insertions(+), 87 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index b85d450..8169509 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1785,106 +1785,71 @@ notebook { background-color: $base_color; transition: all 200ms $ease-out-quad; - &.frame { - border: 1px solid $borders_color; - } + &.frame { border: 1px solid $borders_color; } + header { - // tab sizing $vpadding: 4px; $hpadding: 15px; - + padding: 2px; background-color: $bg_color; - .frame & { - border: 0px solid $borders_color; - &.top { border-bottom-width: 0; } - &.bottom { border-top-width: 0; } - &.right { border-left-width: 0; } - &.left { border-right-width: 0; } - } - $_header_border: $borders_color; - &.top { box-shadow: inset 0 -1px $_header_border; } - &.bottom { box-shadow: inset 0 1px $_header_border; } - &.right { box-shadow: inset 1px 0 $_header_border; } - &.left { box-shadow: inset -1px 0 $_header_border; } + // FIXME use borders and margins + &.top { box-shadow: inset 0 -1px $_header_border; } + &.bottom { box-shadow: inset 0 1px $_header_border; } + &.right { box-shadow: inset 1px 0 $_header_border; } + &.left { box-shadow: inset -1px 0 $_header_border; } - @each $_pos in (top, bottom, right, left) { - &.#{$_pos} tab { - border-width: 0; - background-color: transparentize($base_color, 1); - padding: $vpadding $hpadding; + @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { - border-#{$_pos}: 2px solid transparent; + &.#{$_pos} { + padding-#{$_bpos}: 0; - @if $_pos==top or $_pos==bottom { - padding-#{$_pos}: $vpadding + 2; + tab { + padding: $vpadding $hpadding; + border: 1px solid transparent; + border-#{$_bpos}: none; &.reorderable-page { padding-left: 12px; // for a nicer close button padding-right: 12px; // placement } - } - - @else if $_pos==left or $_pos==right { - padding-#{$_pos}: $hpadding + 2; // FIXME - - } - @if $_pos==top { border-radius: 3.5px 2px 0 0; } - @else if $_pos==bottom { border-radius: 0 0 2px 3.5px; } - @else if $_pos==left { border-radius: 3.5px 0 0 3.5px; } - @else if $_pos==right { border-radius: 0 3.5px 3.5px 0; } + // Tab overlap + @if $_pos==top or $_pos==bottom { margin-right: -1px; } + @else { margin-bottom: -1px; } - &:hover { - background-color: transparentize($base_color, 0.5); - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - - &:active, &:active:hover { - background-color: $base_color; - - @if $_pos==top { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $base_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - @else if $_pos==bottom { - box-shadow: inset 0 -1px $base_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - @else if $_pos==left { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $base_color; - } - @else if $_pos==right { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $base_color, - inset -1px 0 $borders_color; - } + // Tab border radius + @if $_pos==top { border-radius: 1px 1px 0 0; } + @else if $_pos==bottom { border-radius: 0 0 1px 1px; } + @else if $_pos==left { border-radius: 1px 0 0 1px; } + @else if $_pos==right { border-radius: 0 1px 1px 0; } } } } &.top, &.bottom { - & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); } - & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); } + tabs arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:last-child { margin-left: 2px; } + } + tabs arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); + &:first-child { margin-right: 2px; } + } } &.left, &.right { - & tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } - & tabs arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } + tabs arrow.up { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + &:last-child { margin-top: 2px; } + } + tabs arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + &:first-child { margin-bottom: 2px; } + } } - & tabs arrow { + tabs arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } @@ -1893,20 +1858,25 @@ notebook { } } - tab { - label { //tab text - padding: 0 2px; // needed for a nicer focus ring - color: $insensitive_fg_color; - } - &:hover label { - // prelight tab text - color: mix($fg_color, $insensitive_fg_color, 50%); + header tab { + background-color: transparentize($base_color, 1); + + label { color: $insensitive_fg_color; } + + &:hover { + background-color: transparentize($base_color, 0.5); + border-color: $borders_color; + + label { color: mix($fg_color, $insensitive_fg_color, 50%); } } - &:active label { - // active tab text - color: $fg_color; + &:active { + background-color: $base_color; + border-color: $borders_color; + + label { color: $fg_color; } } - button { //tab close button + + button { // close button min-height: 18px; min-width: 16px; padding: 0; -- cgit v1.2.3 From a4be52f1a58bf0802e061bb3e17377f30c288f71 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: cleanup --- common/gtk-3.0/3.20/sass/_common.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 8169509..a148fba 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2930,8 +2930,6 @@ button.circular-button { box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85)); color: $fg_color; padding: 3px 8px 3px 8px; - - border { border-style: none; } } stackswitcher button { -- cgit v1.2.3 From c361a65cc27b0ebab7f388517135d4201bd16bd2 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: simplify comboboxes --- common/gtk-3.0/3.20/sass/_common.scss | 69 +++++++++-------------------------- 1 file changed, 18 insertions(+), 51 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index a148fba..ae3a0a8 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -890,68 +890,35 @@ spinbutton { // combobox { - > button.combo { - padding-left: 8px; - padding-right: 8px; - } - - &:disabled { - color: $insensitive_fg_color; - } arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; min-width: 16px; } - > entry.combo { - &:dir(ltr) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right-style: none; - - @if $variant=='light' { &:focus { box-shadow: 1px 0 $selected_bg_color; } } - } - &:dir(rtl) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left-style: none; - @if $variant=='light' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } + &.linked { + button:nth-child(2) { + &:dir(ltr) { @extend %linked:last-child; } + &:dir(rtl) { @extend %linked:first-child; } } } - > button.combo:not(:only-child) { - &:dir(ltr) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - &:dir(rtl) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + + .linked > & > button.combo { + // the combobox is a composite widget so the way we do button linking doesn't + // work, special case needed. + &:dir(ltr), + &:dir(rtl) { @extend %linked_middle; } // specificity bump } -} -.linked > combobox > button.combo { - // the combo is a composite widget so the way we do button linkind doesn't - // work, special case needed. See - // https://bugzilla.gnome.org/show_bug.cgi?id=733979 - &:dir(ltr), - &:dir(rtl) { @extend %linked_middle; } // specificity bump -} -.linked > combobox:first-child > button.combo { - @extend %linked:first-child; -} -.linked > combobox:last-child > button.combo { - @extend %linked:last-child; -} -.linked > combobox:only-child > button.combo { - @extend %linked:only-child; -} + .linked:not(.vertical) > &:first-child > button.combo { @extend %linked:first-child; } + .linked:not(.vertical) > &:last-child > button.combo { @extend %linked:last-child; } + .linked:not(.vertical) > &:only-child > button.combo { @extend %linked:only-child; } -.linked.vertical > combobox > button.combo { @extend %linked_vertical_middle; } -.linked.vertical > combobox:first-child > button.combo { @extend %linked_vertical:first-child; } -.linked.vertical > combobox:last-child > button.combo { @extend %linked_vertical:last-child; } -.linked.vertical > combobox:only-child > button.combo { @extend %linked_vertical:only-child; } + .linked.vertical > & > button.combo { @extend %linked_vertical_middle; } + .linked.vertical > &:first-child > button.combo { @extend %linked_vertical:first-child; } + .linked.vertical > &:last-child > button.combo { @extend %linked_vertical:last-child; } + .linked.vertical > &:only-child > button.combo { @extend %linked_vertical:only-child; } +} // // Toolbars -- cgit v1.2.3 From 08cf21a35f496df6889499221ece676eea58c000 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: use a more specific selector --- common/gtk-3.0/3.20/sass/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index ae3a0a8..75cfc1f 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -578,7 +578,7 @@ toolbar.inline-toolbar toolbutton { > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } > button:checked + entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } - > entry + button:not(:checked):not(:active):hover { box-shadow: none; } + > entry + button:not(:checked):not(:active):not(:only-child):hover { box-shadow: none; } } // special case for path-bars -- cgit v1.2.3 From 626474399fc6c6fa2c0f1d3ed7b5b34ab5f18c1d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: fix caret color --- common/gtk-3.0/3.20/sass/_common.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 75cfc1f..c5cac11 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -200,6 +200,7 @@ entry { padding-left: 8px; padding-right: 8px; + caret-color: currentColor; border-radius: 3px; transition: all 200ms $ease-out-quad; -- cgit v1.2.3 From b96d367e4034a28378507aa3390562fa6a6c7412 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: fix combobox arrow placement --- common/gtk-3.0/3.20/sass/_common.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index c5cac11..5a430d3 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -890,7 +890,11 @@ spinbutton { // Comboboxes // combobox { - + button.combo { + min-width: 0; // otherwise the arrow placement is unsymmetric + padding-left: 8px; // + padding-right: 8px // + } arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); min-height: 16px; -- cgit v1.2.3 From 35f30835d2540d71241e24818024e785d51b90e3 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: fix checkboxes in treeviews --- common/gtk-3.0/3.20/sass/_common.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 5a430d3..9d422f0 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2052,7 +2052,8 @@ switch { (':indeterminate:disabled', '-mixed-insensitive'), (':checked', '-checked'), (':checked:disabled','-checked-insensitive') { - #{$w}#{$s} { + #{$w}#{$s}, + treeview.#{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); } @@ -2067,6 +2068,7 @@ switch { // too similar in luminosity to the selected background color, hence // we need special casing. .view #{$w}#{$s}:selected, + treeview.#{$w}#{$s}:selected, row:selected #{$w}#{$s}, infobar #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"), -- cgit v1.2.3 From f0c0620ab86cfce7d4d5ee1ba51a232c45d8735e Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: dialog fixes --- common/gtk-3.0/3.20/sass/_common.scss | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 9d422f0..c339b5b 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1138,7 +1138,6 @@ headerbar { } // Separator in Gnome Tweak Tool separator { background-color: $header_border; } - } // Only extending headerbar avoids some problems (Gnome Documents searchbar) @@ -1146,6 +1145,11 @@ headerbar { separator.titlebutton { @extend %header_separator; } @extend %header_widgets; + + entry, button, separator { + margin-top: 6px; + margin-bottom: 6px; + } } %header_separator { @@ -1164,11 +1168,6 @@ headerbar { %header_widgets { - entry, button, separator { - margin-top: 6px; - margin-bottom: 6px; - } - // Headerbar Entries entry, spinbutton { @include entry(header-normal); @@ -2508,11 +2507,10 @@ calendar { // Dialogs // messagedialog { // Message Dialog styling - -GtkDialog-button-spacing: 0; .titlebar { background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%) } - .dialog-action-area button { padding: 2px; } + .dialog-action-area button { padding: 8px; min-height: 0; } &.csd { // rounded bottom border styling for csd version &.background { @@ -2521,28 +2519,29 @@ messagedialog { // Message Dialog styling border: none; } .dialog-action-area button { - padding: 2px; - border-radius: 0; + border-bottom-style: none; @extend %middle_button; - - &:hover, &:active, &:disabled { - @extend %middle_button; - } - &:first-child{ @extend %first_button; } &:last-child { @extend %last_button; } + &:only-child { @extend %single_button; } } %middle_button { + border-radius: 0; border-right-style: none; - border-bottom-style: none; } %last_button { - border-bottom-right-radius: 3px; + border-radius: 0 0 3px 0; + border-right-style: none; } %first_button { + border-radius: 0 0 0 3px; border-left-style: none; - border-bottom-left-radius: 3px; + } + %single_button { + border-radius: 0 0 3px 3px; + border-left-style: none; + border-right-style: none; } } } -- cgit v1.2.3 From e92739266aac4acae0c5ef005980fa9e73153d8b Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: remove list background in placessidebar --- common/gtk-3.0/3.20/sass/_common.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index c339b5b..393f206 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2575,6 +2575,8 @@ placessidebar { @extend scrolledwindow; + list { background-color: transparent; } + row { // Needs overriding of the GtkListBoxRow padding padding: 0px; -- cgit v1.2.3 From 4949c613e78becb70af422e4d919aa32697a5b04 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: sync with master --- common/gtk-3.0/3.20/sass/_common.scss | 294 ++++++++++------------------------ 1 file changed, 86 insertions(+), 208 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 393f206..05b7bf9 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -271,6 +271,12 @@ entry { &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } } + + .linked:not(.vertical) > &, + .linked:not(.vertical) > &:focus { @extend %linked; } + + .linked.vertical > &, + .linked.vertical > &:focus { @extend %linked_vertical; } } // @@ -388,6 +394,9 @@ button { &:active, &:checked { @include button(osd-active); } } } + .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child), + .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) { @@ -493,7 +502,6 @@ button { .linked:not(.vertical) > &:active, .linked:not(.vertical) > &:checked { @extend %linked; - @extend %linked_button; } .linked.vertical > &, @@ -501,7 +509,6 @@ button { .linked.vertical > &:active, .linked.vertical > &:checked { @extend %linked_vertical; - @extend %linked_vertical_button; } } @@ -527,131 +534,73 @@ toolbar.inline-toolbar toolbutton { } // Some crazy linking stuff +@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', + $e_border:$entry_border, $b_border:$button_border) { -// horizontal -.linked:not(.vertical):not(.pathbar) { - > entry { @extend %linked; } - - - > entry + entry { border-left-color: transparentize($entry_border, 0.7); } - - > entry.error + entry, - > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } - - > entry.warning + entry, - > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } - - > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} + $_border: if($vert=='false', left, top); + @if $entry_rules=='true' { + > entry + entry { border-#{$_border}-color: transparentize($e_border, $a); } - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); } - + > entry.error + entry, + > entry + entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); } - > entry + button, - > entry + button:hover, - > entry + button:active, - > entry + button:checked, - > entry + button:disabled { border-left-style: solid; } + > entry.warning + entry, + > entry + entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); } + > entry.error + entry.warning { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a));} - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + @each $e_type, $e_color in ('',$selected_bg_color), + ('.warning', $warning_color), + ('.error', $error_color) { - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $entry_border); } + > entry + entry#{$e_type}:focus:not(:last-child), + > entry + entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $error_color, $entry_border); } + > entry#{$e_type}:focus:not(:only-child) { + + entry, + + button, + + combobox > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } + } + } + > button:checked + entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); } + } + @if $button_rules=='true' { + > button + button { border-#{$_border}-style: none; } + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; } - > button:hover:not(:checked):not(:active):not(:only-child), - > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: -1px 0 $button_border; } - > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } - > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } - > button:checked + entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } - > entry + button:not(:checked):not(:active):not(:only-child):hover { box-shadow: none; } + > button:first-child:hover:not(:checked):not(:active), + > button:checked + button:not(:checked):not(:active):hover, + > entry + button:not(:checked):not(:active):not(:only-child):hover { box-shadow: none; } + } } -// special case for path-bars -.linked:not(.vertical).path-bar { +// 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))) { -$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5)); + > 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 $_linked_separator_color, - inset -1px 0 $_linked_separator_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; } } - &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } - &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } - } } -// vertical -.linked.vertical { - > entry { @extend %linked_vertical; } - - - > entry + entry { border-top-color: transparentize($entry_border, 0.7); } - - > entry.error + entry, - > entry + entry.error { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); } - - > entry.warning + entry, - > entry + entry.warning { border-top-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); } - - > entry.error + entry.warning { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));} - - - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-top-color: if($variant=='light', $warning_color, $entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-top-color: if($variant=='light', $error_color, $entry_border); } - - - > entry + button, - > entry + button:hover, - > entry + button:active, - > entry + button:checked, - > entry + button:disabled { border-top-style: solid; } - - - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $warning_color, $entry_border); } - - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + combobox > button.combo { border-top-color: if($variant=='light', $error_color, $entry_border); } - - - > button:hover:not(:checked):not(:active):not(:only-child), - > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: 0 -1px $button_border; } - > button:first-child:hover:not(:checked):not(:active) { box-shadow: none; } - > button:checked + button:not(:checked):not(:active):hover { box-shadow: none; } - > button:checked + entry { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } - > entry + button:not(:checked):not(:active):hover { box-shadow: none; } +// Apply the rules defined above +.linked:not(.vertical) { + &:not(.path-bar) { @include linking_rules(); } + &.path-bar { @include pathbar_linking_rules(); } } +.linked.vertical { @include linking_rules($vert:'true'); } + %linked_middle { border-radius: 0; border-right-style: none; @@ -696,16 +645,6 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0 } } -%linked_button { - border-left-style: none; - &:first-child { border-left-style: solid; } -} - -%linked_vertical_button { - border-top-style: none; - &:first-child { border-top-style: solid; } -} - %undecorated_button { border-color: transparent; background-color: transparent; @@ -1229,6 +1168,8 @@ headerbar { } // Linking stuff + + // Reset buttons .linked:not(.vertical):not(.path-bar) > button, .linked:not(.vertical):not(.path-bar) > button:hover, .linked:not(.vertical):not(.path-bar) > button:active, @@ -1236,89 +1177,35 @@ headerbar { .linked:not(.vertical):not(.path-bar) > button:disabled { border-radius: 3px; border-style: solid; - } - .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active):not(:only-child), - .linked:not(.vertical):not(.path-bar) > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active), - .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active):not(:only-child), - .linked:not(.vertical).path-bar > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: none; } - - // special case for path-bars and stack-switchers - .linked:not(.vertical):not(.path-bar).stack-switcher > button, - .linked:not(.vertical).path-bar > button { - - @include button(header-hover); - - &:hover { background-color: lighten($header_button_bg, 15%); } - &:active, &:checked { @include button(header-active); } - &:disabled { color: transparentize($header_fg, 0.4); } - } - - .linked:not(.vertical):not(.path-bar).stack-switcher > button, - .linked:not(.vertical).path-bar > button, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:hover, - .linked:not(.vertical).path-bar > button:hover, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:active, - .linked:not(.vertical).path-bar > button:active, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:checked, - .linked:not(.vertical).path-bar > button:checked, - .linked:not(.vertical):not(.path-bar).stack-switcher > button:disabled, - .linked:not(.vertical).path-bar > button:disabled { - @extend %linked; - @extend %linked_button; + .linked:not(.vertical):not(.path-bar), .linked:not(.vertical).path-bar { + > button:hover:not(:checked):not(:active):not(:only-child), + > button:hover:not(:checked):not(:active) + button:not(:checked):not(:active) { box-shadow: none; } } - .linked:not(.vertical).path-bar, - .linked:not(.vertical):not(.path-bar).stack-switcher { + // special case for path-bars and stack-switchers + .linked:not(.vertical):not(.path-bar).stack-switcher, + .linked:not(.vertical).path-bar { - $_linked_separator_color: $header_button_border; + > button { + @include button(header-hover); - > button:hover:not(:checked):not(:active):not(:only-child) { + &:hover { background-color: lighten($header_button_bg, 15%); } + &:active, &:checked { @include button(header-active); } + &:disabled { color: transparentize($header_fg, 0.4); } - &:hover { - box-shadow: inset 1px 0 $_linked_separator_color, - inset -1px 0 $_linked_separator_color; - } - &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; } - &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; } + &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } } - } - - .linked:not(.vertical):not(.pathbar) { - - > entry + entry { border-left-color: transparentize($header_entry_border, 0.5); } - - > entry.error + entry, - > entry + entry.error { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5)); } - - > entry.warning + entry, - > entry + entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($header_entry_border, 0.5)); } - - > entry.error + entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5));} - - - > entry + entry:focus:not(:last-child), - > entry + entry:focus:last-child { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } - - > entry + entry.warning:focus:not(:last-child), - > entry + entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } - - > entry + entry.error:focus:not(:last-child), - > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $header_entry_border); } - - - > entry:focus:not(:only-child) + entry, - > entry:focus:not(:only-child) + button, - > entry:focus:not(:only-child) + combobox > button.combo { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); } - - > entry.warning:focus:not(:only-child) + entry, - > entry.warning:focus:not(:only-child) + button, - > entry.warning:focus:not(:only-child) + combobox > button.combo { border-left-color: if($variant=='light', $warning_color, $header_entry_border); } - - > entry.error:focus:not(:only-child) + entry, - > entry.error:focus:not(:only-child) + button, - > entry.error:focus:not(:only-child) + button.combo > button.combo { border-left-color: if($variant=='light', $error_color, $header_entry_border); } + @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, + $var:if($variant=='light' and $darker=='false', 'light', 'dark'), + $button_rules:'false', + $e_border:$header_entry_border, + $b_border:$header_button_border ); } // Headerbar Suggested and Destructive Action buttons @@ -3028,9 +2915,7 @@ headerbar, &:active, &:checked { @include button(header-active); } - &.close, &.maximize, &.minimize { - color: transparent; background-color: transparent; background-position: center; @@ -3039,21 +2924,14 @@ headerbar, &:backdrop { opacity: 1; } } + // Load png assets for each button + @each $k in ('close','maximize', 'minimize') { + @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { - &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png')); } - &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); } - &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); } - &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); } - - &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$darker_asset_suffix}.png'),url('assets/titlebutton-max#{$darker_asset_suffix}@2.png')); } - &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}@2.png')); } - &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-hover#{$darker_asset_suffix}@2.png')); } - &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-active#{$darker_asset_suffix}@2.png')); } - - &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$darker_asset_suffix}.png'),url('assets/titlebutton-min#{$darker_asset_suffix}@2.png')); } - &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}@2.png')); } - &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-hover#{$darker_asset_suffix}@2.png')); } - &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-active#{$darker_asset_suffix}@2.png')); } + &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'), + url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); } + } + } } } -- cgit v1.2.3 From 65500eb2c688bbdd8ec3e7f92526a6c0aad3d5cd Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: move ssd class --- common/gtk-3.0/3.20/sass/_common.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 05b7bf9..602b782 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2865,6 +2865,7 @@ decoration { border-radius: 0; } // server-side decorations as used by mutter + .ssd &, &.ssd { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(black, 0.35), $_wm_border); -- cgit v1.2.3 From 01d84120a6bd1d218f0faac6e1e069c8a180b3ad Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: column header cleanup --- common/gtk-3.0/3.20/sass/_common.scss | 41 ++++++++++++++--------------------- 1 file changed, 16 insertions(+), 25 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 602b782..bce6118 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1419,42 +1419,29 @@ treeview.view { header { button { - @extend %column_header_button; $_column_header_color: mix($fg_color,$base_color,80%); + + &, &:hover, &:active { @extend %column_header_button; } + color: $_column_header_color; background-color: $base_color; font-weight: bold; &:hover { - @extend %column_header_button; color: $selected_bg_color; - box-shadow: none; - transition: none; //I shouldn't need this } &:active { - @extend %column_header_button; color: $fg_color; - transition: none; //I shouldn't need this } &.dnd { - @extend header.button.dnd; + &, &:selected, &:hover { + transition: none; + color: $selected_bg_color; + box-shadow: inset 1px 1px 0 1px $selected_bg_color, + inset -1px 0 0 1px $selected_bg_color, + inset 1px 1px $base_color, inset -1px 0 $base_color; + } } } - button:last-child, - button:last-child:hover, - button:last-child:active { //treeview-like derived widgets in Banshee and Evolution - border-right-style: none; - border-image: none; - } - } - header.button.dnd { // for treeview-like derive widgets - transition: none; - color: $selected_bg_color; - box-shadow: inset 1px 1px 0 1px $selected_bg_color, - inset -1px 0 0 1px $selected_bg_color, - inset 1px 1px $base_color, inset -1px 0 $base_color;; - &:active { @extend header.button.dnd; } - &:selected { @extend header.button.dnd; } - &:hover { @extend header.button.dnd; } } } @@ -1466,10 +1453,10 @@ treeview.view { border-style: none solid none none; border-radius: 0; border-image: linear-gradient(to bottom, - transparentize(if($variant == 'light', black, white), 1) 20%, + $base_color 20%, transparentize(if($variant == 'light', black, white), 0.89) 20%, transparentize(if($variant == 'light', black, white), 0.89) 80%, - transparentize(if($variant == 'light', black, white), 1) 80%) 0 1 0 0 / 0 1px 0 0 stretch; + $base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch; &:active, &:hover { background-color: $base_color; } &:active:hover { color: $fg_color; } @@ -1477,6 +1464,10 @@ treeview.view { border-color: $bg_color; background-image: none; } + &:last-child { + border-right-style: none; + border-image: none; + } } // -- cgit v1.2.3 From 692792632c4570c13be069bbf1128d46042d682a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: add some padding to buttons and entries --- common/gtk-3.0/3.20/sass/_common.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index bce6118..1d819b8 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -195,10 +195,9 @@ spinner { // Text Entries // entry { - min-height: 26px; + min-height: 22px; border: 1px solid; - padding-left: 8px; - padding-right: 8px; + padding: 2px 8px; caret-color: currentColor; border-radius: 3px; @@ -305,12 +304,12 @@ $_dot_color: $selected_bg_color; button { $_button_transition: all 200ms $ease-out-quad; - min-height: 26px; + min-height: 22px; min-width: 20px; transition: $_button_transition; border: 1px solid; border-radius: 3px; - padding: 0 6px; + padding: 2px 6px; @include button(normal); -- cgit v1.2.3 From fa04300e804f53a962584f2e0c1bae79f0746a7b Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: use margins for menu separators --- common/gtk-3.0/3.20/sass/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 1d819b8..767a587 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1517,7 +1517,7 @@ menu, separator, .csd & separator { - min-height: 10px; + margin: 2px 0; background-color: $_menu_bg; } -- cgit v1.2.3 From 0412db89a17950ac0d3b1aaf497856c8c20b823e Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: update spinbuttons --- common/gtk-3.0/3.20/sass/_common.scss | 148 +++++++++------------------------- 1 file changed, 37 insertions(+), 111 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 767a587..3f6a638 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -716,111 +716,30 @@ button:link, button:visited { // Spinbuttons // spinbutton { - @extend entry; + button:active { color: $selected_fg_color; } + &:not(.vertical) { - button { - background-image: none; - border: 1px solid transparentize($borders_color,0.4); - border-style: none none none solid; - color: mix($fg_color,$base_color,95%); - border-radius: 0; - box-shadow: none; - // padding-left: 6px; - // padding-right: 6px; - &:dir(rtl) { border-style: none solid none none; } + button, entry { + padding-top: 0; + padding-bottom: 0; + min-height: 0; - &:disabled { - color: $insensitive_fg_color; - } - &:active { - background-color: $selected_bg_color; - color: $selected_fg_color; - } + @extend %linked; } - } + > button + button { border-left-style: none; } -// .osd & { -// button { -// @include button(undecorated); -// color: $osd_fg_color; -// border-style: none none none solid; -// border-color: transparentize($osd_borders_color, 0.3); -// border-radius: 0; -// box-shadow: none; -// &:dir(rtl) { border-style: none solid none none; } -// &:hover { -// @include button(undecorated); -// color: $osd_fg_color; -// border-color: transparentize(opacify($osd_borders_color, 1), 0.5); -// background-color: transparentize($osd_fg_color, 0.9); -// box-shadow: none; -// } -// &:disabled { -// @include button(undecorated); -// color: $osd_insensitive_fg_color; -// border-color: transparentize(opacify($osd_borders_color, 1), 0.5); -// box-shadow: none; -// } -// &:last-child { border-radius: 0 2px 2px 0; } -// &:dir(rtl):first-child { border-radius: 2px 0 0 2px; } -// } -// } + > button:hover:not(:active), + > button:hover + button { box-shadow: inset 1px 0 $button_border; } - &.vertical { - border-radius: 0; - padding-left: 5px; - padding-right: 5px; - button { - &:first-child { - @extend %top_button; - @include button(normal); - &:active { - @extend %top_button; - @include button(active); - } - &:hover { - @extend %top_button; - @include button(hover); - } - &:disabled { - @extend %top_button; - @include button(insensitive); - } - } - &:last-child { - @extend %bottom_button; - @include button(normal); - &:active { - @extend %bottom_button; - @include button(active); - } - &:hover { - @extend %bottom_button; - @include button(hover); - } - &:disabled { - @extend %bottom_button; - @include button(insensitive); - } - } - } - %top_button { - border-radius: 2px 2px 0 0; - border-style: solid solid none solid; - } - %bottom_button { - border-radius: 0 0 2px 2px; - border-style: none solid solid solid; - } + > button:first-child:hover:not(:active), + > entry + button:not(:active):hover { box-shadow: none; } + + > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } } - treeview & { - entry, entry:focus { - padding: 1px; - border-width: 1px 0; - border-color: $selected_bg_color; - border-radius: 0; - box-shadow: none; - } + &.vertical { + button, entry { @extend %linked_vertical; } + + > entry:focus + button { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } } } @@ -1107,7 +1026,7 @@ headerbar { %header_widgets { // Headerbar Entries - entry, spinbutton { + entry { @include entry(header-normal); &:backdrop { opacity: 0.85; } @@ -1234,21 +1153,28 @@ headerbar { } // Headerbar Spinbuttons - spinbutton { - - &:focus button { - color: $selected_fg_color; - - &:hover { background-color: transparentize($selected_fg_color, 0.9); border-color: transparent; } - &:disabled { color: transparentize($selected_fg_color, 0.6); } + spinbutton:not(.vertical) { + &:focus { + color: $selected_fg_color; + caret-color: $selected_fg_color; } button { - color: $header_fg; + &,&:disabled { @include button(header-hover); } - &:hover { background-color: transparentize($header_fg, 0.75); border-color: transparent; } - &:disabled { color: transparentize($header_fg, 0.3); } - &:active { background-color: rgba(0,0,0,0.1); } + &:hover { background-color: lighten($header_button_bg, 15%); } + &:active, &:checked { @include button(header-active); } + &:disabled { color: transparentize($header_fg, 0.4); } } + + > button + button { border-left-style: none; } + + > button:hover:not(:active), + > button:hover + button { box-shadow: inset 1px 0 $header_button_border; } + + > button:first-child:hover:not(:active), + > entry + button:not(:active):hover { box-shadow: none; } + + > entry:focus + button { border-left-color: if($variant=='light' and $darker=='false', $selected_bg_color, $header_entry_border); } } // Headerbar ComboBoxes -- cgit v1.2.3 From ad1ab4484b5f095307a6637198d97e5abccd868b Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: update headerbar comboboxes --- common/gtk-3.0/3.20/sass/_common.scss | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 3f6a638..684b81e 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1181,13 +1181,13 @@ headerbar { combobox { &:disabled { color: transparentize($header_fg, 0.6); } - &.combobox-entry button { + &.linked button { @include entry(header-normal); &:hover { @include entry(header-focus); box-shadow: none; } &:disabled { @include entry(header-insensitive); } } - &.combobox-entry entry { + &.linked entry { &:dir(ltr) { border-right-style: none; @@ -1201,7 +1201,20 @@ headerbar { @if $variant=='light' and $darker=='false' { &:focus { box-shadow: -1px 0 $selected_bg_color; } } } } - + &.linked button.combo { + &:dir(ltr) { + &, &:hover, &:active, &:checked, &:disabled { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + &:dir(rtl) { + &, &:hover, &:active, &:checked, &:disabled { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + } } // Headerbar Switches -- cgit v1.2.3 From 1d514cea1d669945510e30308d1a50f3e3789038 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: some fixes --- common/gtk-3.0/3.20/sass/_common.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 684b81e..4545492 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -737,8 +737,13 @@ spinbutton { > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } } &.vertical { - button, entry { @extend %linked_vertical; } + button, entry { + padding-left: 4px; + padding-right: 4px; + min-width: 0; + @extend %linked_vertical; + } > entry:focus + button { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } } } @@ -1359,7 +1364,7 @@ treeview.view { button { $_column_header_color: mix($fg_color,$base_color,80%); - &, &:hover, &:active { @extend %column_header_button; } + @extend %column_header_button; color: $_column_header_color; background-color: $base_color; -- cgit v1.2.3 From be715132b9747142c8bafeced7abfc4c86da93cd Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: tweak notebook styling --- common/gtk-3.0/3.20/sass/_common.scss | 91 ++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 45 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4545492..9085f90 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1577,24 +1577,25 @@ notebook { background-color: $base_color; transition: all 200ms $ease-out-quad; - &.frame { border: 1px solid $borders_color; } + &.frame { + border: 1px solid $borders_color; + + header { margin: -1px; } // ugly hack to hide the borders around the header + } header { $vpadding: 4px; $hpadding: 15px; - padding: 2px; + padding: 3px; background-color: $bg_color; - $_header_border: $borders_color; - - // FIXME use borders and margins - &.top { box-shadow: inset 0 -1px $_header_border; } - &.bottom { box-shadow: inset 0 1px $_header_border; } - &.right { box-shadow: inset 1px 0 $_header_border; } - &.left { box-shadow: inset -1px 0 $_header_border; } + &.top { box-shadow: inset 0 -1px $borders_color; } + &.bottom { box-shadow: inset 0 1px $borders_color; } + &.right { box-shadow: inset 1px 0 $borders_color; } + &.left { box-shadow: inset -1px 0 $borders_color; } @each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) { - + // sizing and borders &.#{$_pos} { padding-#{$_bpos}: 0; @@ -1603,16 +1604,16 @@ notebook { border: 1px solid transparent; border-#{$_bpos}: none; + // nicer close button placement &.reorderable-page { - padding-left: 12px; // for a nicer close button - padding-right: 12px; // placement + padding-left: 12px; + padding-right: 12px; } - - // Tab overlap + // tab overlap @if $_pos==top or $_pos==bottom { margin-right: -1px; } @else { margin-bottom: -1px; } - // Tab border radius + // tab border radius @if $_pos==top { border-radius: 1px 1px 0 0; } @else if $_pos==bottom { border-radius: 0 0 1px 1px; } @else if $_pos==left { border-radius: 1px 0 0 1px; } @@ -1620,7 +1621,7 @@ notebook { } } } - + // overflow arrows &.top, &.bottom { tabs arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); @@ -1648,41 +1649,41 @@ notebook { &:active { color: $fg_color; } &:disabled { color: transparentize($insensitive_fg_color,0.3); } } - } - - header tab { - background-color: transparentize($base_color, 1); - - label { color: $insensitive_fg_color; } - - &:hover { - background-color: transparentize($base_color, 0.5); - border-color: $borders_color; - - label { color: mix($fg_color, $insensitive_fg_color, 50%); } - } - &:active { - background-color: $base_color; - border-color: $borders_color; + // tab colors + tab { + background-color: transparentize($base_color, 1); - label { color: $fg_color; } - } + label { color: $insensitive_fg_color; } - button { // close button - min-height: 18px; - min-width: 16px; - padding: 0; - color: mix($bg_color, $fg_color, 35%); + &:hover { + background-color: transparentize($base_color, 0.5); + border-color: $borders_color; - @extend %undecorated_button; + label { color: mix($fg_color, $insensitive_fg_color, 50%); } + } + &:active { + background-color: $base_color; + border-color: $borders_color; - &:hover { - @extend %undecorated_button; - color: lighten(red, 15%); + label { color: $fg_color; } } - &:active, &:active:hover { + // close button + button { + min-height: 18px; + min-width: 16px; + padding: 0; + color: mix($bg_color, $fg_color, 35%); + @extend %undecorated_button; - color: $selected_bg_color; + + &:hover { + @extend %undecorated_button; + color: lighten(red, 15%); + } + &:active, &:active:hover { + @extend %undecorated_button; + color: $selected_bg_color; + } } } } -- cgit v1.2.3 From a3783b285f1a03c13b6f5b2d7adae1b4343fead1 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: paned headerbar fixes --- common/gtk-3.0/3.20/sass/_common.scss | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 9085f90..4be7e31 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -863,11 +863,16 @@ headerbar { background-color: opacify($header_bg, 1); .csd & { // Transparent header-bars only in csd windows + border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); background-color: $header_bg; border-color: $header_border; } - &:backdrop { color: transparentize($header_fg, 0.3); } + &:backdrop { + color: transparentize($header_fg, 0.3); + + .csd & { background-color: $header_bg_backdrop; } + } .title { padding-left: 12px; @@ -990,7 +995,8 @@ headerbar { } // Fixes double backgrounds on paned headerbars - &:not(headerbar) { + &:not(headerbar), + &:backdrop:not(headerbar) { window > &, window.csd > & { padding: 0; @@ -1002,6 +1008,17 @@ headerbar { separator { background-color: $header_border; } } +// more paned headerbar fixes (Gedit) +paned.titlebar { + separator { background-color: transparent; } + + > headerbar { + &::not(:only-child):not(:first-child):not(:last-child) { border-radius: 0;} + &:first-child { border-top-right-radius: 0; } + &:last-child { border-top-left-radius: 0; } + } +} + // Only extending headerbar avoids some problems (Gnome Documents searchbar) headerbar { separator.titlebutton { @extend %header_separator; } @@ -2444,14 +2461,11 @@ placesview { transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(-0.5turn); } - - row.activatable:hover { background-color: transparent; } } // // Paned // - paned { > separator { min-width: 1px; -- cgit v1.2.3 From 6eaefb8aa70a7711b13ec0d0211f7e20aae57170 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: cleanup --- common/gtk-3.0/3.20/sass/_common.scss | 30 ++---------------------------- 1 file changed, 2 insertions(+), 28 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4be7e31..4eb1625 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1013,7 +1013,7 @@ paned.titlebar { separator { background-color: transparent; } > headerbar { - &::not(:only-child):not(:first-child):not(:last-child) { border-radius: 0;} + &:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0;} &:first-child { border-top-right-radius: 0; } &:last-child { border-top-left-radius: 0; } } @@ -2756,29 +2756,6 @@ stackswitcher button { border: 1px solid black; } -// -// Overshoot -// -// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. -// This draws a box on top of the content, the size changes programmatically. -.overshoot { - &.top { @include overshoot(top); } - &.bottom { @include overshoot(bottom); } - &.left { @include overshoot(left); } - &.right { @include overshoot(right); } -} - -// -// Undershoot -// -// Overflow indication, works similarly to the overshoot, the size if fixed tho. -.undershoot { - &.top { @include undershoot(top); } - &.bottom { @include undershoot(bottom); } - &.left { @include undershoot(left); } - &.right { @include undershoot(right); } -} - // // Window Decorations // @@ -2805,10 +2782,7 @@ decoration { .tiled & { border-radius: 0; } - .popup & { - box-shadow: none; - border-radius: 0; - } + .popup &, &.popup { box-shadow: none; border-radius: 0; -- cgit v1.2.3 From 61e1597a65115381291866f67d30492a24840c8f Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: notebook: use child selector --- common/gtk-3.0/3.20/sass/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4eb1625..af5935f 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1600,7 +1600,7 @@ notebook { header { margin: -1px; } // ugly hack to hide the borders around the header } - header { + > header { $vpadding: 4px; $hpadding: 15px; padding: 3px; -- cgit v1.2.3 From bf1be44a2c0bc8e8079fd516e0e6519a9bc87969 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 26 Feb 2016 00:10:22 +0100 Subject: updates --- common/gtk-3.0/3.20/sass/_common.scss | 169 +++++++++++++++++++++------------- 1 file changed, 104 insertions(+), 65 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index af5935f..ee418a0 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -93,7 +93,7 @@ iconview { &:selected, &:selected:focus { - border-radius: 3px; + border-radius: 2px; @extend %selected_items; } } @@ -216,8 +216,8 @@ entry { &.flat, &.flat:focus { @include entry(normal); - padding-left: 2px; - padding-right: 2px; + min-height: 0; + padding: 2px; border: none; border-radius: 0; } @@ -236,7 +236,7 @@ entry { } progress { - margin: 2px 12px; + margin: 0 -6px; border-radius: 0; border-width: 0 0 2px; border-color: $selected_bg_color; @@ -421,6 +421,12 @@ button { } } + &.image-button { + min-width: 32px; + padding-left: 0; + padding-right: 0; + } + &.text-button { padding-left: 16px; padding-right: 16px; @@ -431,8 +437,24 @@ button { // to have the image-button padding, while the text side the text-button // one, so we're adding the missing padding to the label depending on // its position inside the button - label:first-child { padding-left: 8px; } - label:last-child { padding-right: 8px; } + padding-left: 0; + padding-right: 0; + + label { + &:first-child { + padding-left: 12px; + padding-right: 0; + } + &:last-child { + padding-left: 0; + padding-right: 12px; + } + } + + image { + padding-left: 6px; + padding-right: 6px; + } } .stack-switcher > & { @@ -716,7 +738,9 @@ button:link, button:visited { // Spinbuttons // spinbutton { + button:active { color: $selected_fg_color; } + &:disabled { color: $insensitive_fg_color; } &:not(.vertical) { button, entry { @@ -1289,8 +1313,6 @@ headerbar { // .path-bar button { - &:first-child { padding-left: 10px; } - &:last-child { padding-right: 10px; } &:only-child { padding-left: 10px; padding-right: 10px; @@ -1381,52 +1403,49 @@ treeview.view { button { $_column_header_color: mix($fg_color,$base_color,80%); - @extend %column_header_button; + min-height: 0; + min-width: 0; + padding: 3px 6px; + font-weight: bold; color: $_column_header_color; background-color: $base_color; - font-weight: bold; - &:hover { - color: $selected_bg_color; - } - &:active { - color: $fg_color; + background-image: none; + border-style: none solid none none; + border-radius: 0; + border-image: linear-gradient(to bottom, + $base_color 20%, + transparentize(if($variant == 'light', black, white), 0.89) 20%, + transparentize(if($variant == 'light', black, white), 0.89) 80%, + $base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch; + + &:hover { color: $selected_bg_color; } + &:active { color: $fg_color; } + + &:active, &:hover { background-color: $base_color; } + &:active:hover { color: $fg_color; } + + &:disabled { + border-color: $bg_color; + background-image: none; } - &.dnd { - &, &:selected, &:hover { - transition: none; - color: $selected_bg_color; - box-shadow: inset 1px 1px 0 1px $selected_bg_color, - inset -1px 0 0 1px $selected_bg_color, - inset 1px 1px $base_color, inset -1px 0 $base_color; - } + &:last-child { + border-right-style: none; + border-image: none; } } } -} - -%column_header_button { - min-height: 0; - min-width: 0; - padding: 3px 6px; - background-image: none; - border-style: none solid none none; - border-radius: 0; - border-image: linear-gradient(to bottom, - $base_color 20%, - transparentize(if($variant == 'light', black, white), 0.89) 20%, - transparentize(if($variant == 'light', black, white), 0.89) 80%, - $base_color 80%) 0 1 0 0 / 0 1px 0 0 stretch; - &:active, &:hover { background-color: $base_color; } - &:active:hover { color: $fg_color; } - &:disabled { - border-color: $bg_color; - background-image: none; - } - &:last-child { - border-right-style: none; - border-image: none; + button.dnd, + header.button.dnd { + &, &:selected, &:hover, &:active { + padding: 0 6px; + transition: none; + color: $selected_fg_color; + background-color: $selected_bg_color; + border-radius: 0; + border-style: none; + } } } @@ -2160,6 +2179,19 @@ levelbar { } } +// +// Print dialog +// +printdialog { + paper { + border: 1px solid $borders_color; + background: white; + padding: 0; + } + + .dialog-action-box { margin: 12px; } +} + // // Frames // @@ -2173,12 +2205,6 @@ frame border, padding: 0; } -paper { - border: 1px solid $borders_color; - background: white; - padding: 0; -} - scrolledwindow { viewport.frame { // avoid double borders when viewport inside // scrolled window @@ -2385,12 +2411,19 @@ messagedialog { // Message Dialog styling } } +// +// Filechooser +// +filechooser { + #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); } +} + // // Sidebar // .sidebar, .sidebar .view { border: none; - background-color: $bg_color; + background-color: lighten($bg_color, 2%); &:selected { @extend %selected_items; } separator { @extend separator; } @@ -2418,11 +2451,12 @@ placessidebar { row { // Needs overriding of the GtkListBoxRow padding + min-height: 30px; padding: 0px; // Using margins/padding directly in the SidebarRow // will make the animation of the new bookmark row jump > revealer { - padding: 8px 10px; + padding: 0 10px; } image.sidebar-icon { &:dir(ltr) { padding-right: 8px; } @@ -2433,12 +2467,15 @@ placessidebar { &:dir(rtl) { padding-left: 2px; } } @at-root button.sidebar-button { - min-width: 26px; - min-height: 26px; + min-width: 22px; + min-height: 22px; + margin-top: 2px; + margin-bottom: 2px; padding: 0; @extend button.flat; border-radius: 100%; -gtk-outline-radius: 100%; + &:not(:hover):not(:active) > image { opacity: 0.5 }; } } @@ -2708,14 +2745,11 @@ button.color { } .scale-popup button { // +/- buttons on GtkVolumeButton popup - padding: 6px; &:hover { @include button(hover); } } -button.scale { padding: 8px; } - // Decouple the font of context menus from their entry/textview .context-menu { font: initial; } .monospace { font: Monospace; } @@ -2735,12 +2769,16 @@ button.circular-button { } .keycap { + min-width: 16px; + min-height: 20px; + + padding: 3px 6px 4px 6px; + + color: $fg_color; background-color: $base_color; border: 1px solid $borders_color; - border-radius: 2px; + border-radius: 2.5px; box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85)); - color: $fg_color; - padding: 3px 8px 3px 8px; } stackswitcher button { @@ -2753,7 +2791,8 @@ stackswitcher button { // *:drop(active):focus, *:drop(active) { - border: 1px solid black; + border-color: black; + box-shadow: inset 0 0 0 1px black; } // @@ -2779,6 +2818,7 @@ decoration { 0 8px 8px 0 transparent, 0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2)); } + .fullscreen &, .tiled & { border-radius: 0; } @@ -2788,8 +2828,7 @@ decoration { border-radius: 0; } // server-side decorations as used by mutter - .ssd &, - &.ssd { + .ssd & { border-radius: if($darker=='false' and $variant=='light', 4px 4px 0 0, 3px 3px 0 0); box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(black, 0.35), $_wm_border); -- cgit v1.2.3 From 380b18e2a54962411a82367a9fe803d2fe6faadc Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Tue, 1 Mar 2016 23:26:00 +0100 Subject: use :checked for active tabs --- common/gtk-3.0/3.20/sass/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index ee418a0..9256c0b 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1697,7 +1697,7 @@ notebook { label { color: mix($fg_color, $insensitive_fg_color, 50%); } } - &:active { + &:checked { background-color: $base_color; border-color: $borders_color; -- cgit v1.2.3 From 3b607e4f5174834a66a81a7cdf7e14faed5836d6 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 2 Mar 2016 12:28:43 +0100 Subject: update scrollbar and scale styling --- common/gtk-3.0/3.20/sass/_common.scss | 114 ++++++++++++++++++++-------------- 1 file changed, 69 insertions(+), 45 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 9256c0b..0f57cdb 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1732,15 +1732,8 @@ $_scrollbar_bg_color: darken($base_color, 1%); scrollbar { @at-root * { - -GtkRange-slider-width: 13; - -GtkRange-trough-border: 0; -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; - -GtkScrollbar-min-slider-length: 42; // minimum size for the slider. - // sadly can't be in '.slider' - // where it belongs - -GtkRange-stepper-spacing: 0; - -GtkRange-trough-under-steppers: 1; } $_slider_margin: 3px; @@ -1748,12 +1741,28 @@ scrollbar { button { border: none; } + &.vertical { + button.down { + -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); + } + button.up { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + } + } + + &.horizontal { + button.down { + -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); + } + button.up { + -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); + } + } + &.overlay-indicator { &:not(.dragging):not(.hovering) { // Overlay scrolling indicator opacity: 0.4; - -GtkRange-slider-width: 6px; - slider { margin: 0; background-color: mix($fg_color, $bg_color, 70%); @@ -1766,17 +1775,17 @@ scrollbar { background-color: transparent; } - // w/o the following margin tweaks the slider shrinks when hovering/dragging &.vertical slider { + min-width: 4px; margin-top: $_slider_margin - 1px; margin-bottom: $_slider_margin - 1px; } &.horizontal slider { + min-height: 4px; margin-left: $_slider_margin - 1px; margin-right: $_slider_margin - 1px; } - } &.dragging, @@ -1808,42 +1817,37 @@ scrollbar { margin: $_slider_margin; } - &.fine-tune slider { margin: $_slider_fine_tune_margin; } - &.vertical { - slider { - margin-left: 1px + $_slider_margin; - - &:dir(rtl) { - margin-left: $_slider_margin; - margin-right: 1px + $_slider_margin; - } + &.fine-tune slider { + min-width: 4px; + margin: $_slider_fine_tune_margin; } - &.fine-tune .slider { - margin-left: 1px + $_slider_fine_tune_margin; - - &:dir(rtl) { - margin-left: $_slider_fine_tune_margin; - margin-right: 1px + $_slider_fine_tune_margin; - } + slider { + min-height: 42px; + min-width: 6px; + margin: $_slider_margin; } trough { - border-left-style: solid; - - &:dir(rtl) { - border-left-style: none; - border-right-style: solid; - } + &:dir(ltr) { border-left-style: solid; } + &:dir(rtl) { border-right-style: solid; } } } &.horizontal { - slider { margin-top: 1px + $_slider_margin; } - &.fine-tune slider { margin-top: 1px + $_slider_fine_tune_margin; } + &.fine-tune slider { + min-height: 4px; + margin: $_slider_fine_tune_margin; + } + + slider { + min-height: 6px; + min-width: 42px; + margin-top: $_slider_margin; + } trough { border-top-style: solid; } } @@ -1970,19 +1974,34 @@ checkbutton check { // GtkScale // scale { - -GtkScale-slider-length: 15; - -GtkRange-slider-width: 15; - -GtkRange-trough-border: 0; - outline-offset: -1px; - -gtk-outline-radius: 2px; + min-height: 9px; + min-width: 9px; + padding: 5px; + + marks { + color: gtkalpha(currentColor, 0.3); + + &.top { margin-bottom: -4px; } + &.bottom { margin-top: -4px; } + &.left { margin-right: -4px; } + &.right { margin-left: -4px; } + } - marks { color: gtkalpha(currentColor, 0.7); } + &.horizontal mark indicator { + min-height: 3px; + min-width: 1px; + } + &.vertical mark indicator { + min-height: 1px; + min-width: 3px; + } &.fine-tune { - trough, fill, highlight { - border-radius: 5px; - margin: 3px; - } + padding: 3px; + + trough, fill, highlight { border-radius: 5px; } + + slider { margin: -4px; } } trough, fill, highlight { @@ -1992,6 +2011,9 @@ scale { slider { $_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%)); + min-width: 15px; + min-height: 15px; + margin: -6px; background-clip: border-box; background-image: linear-gradient(to bottom, $button_bg); border: 1px solid $_slider_border; @@ -2044,6 +2066,8 @@ scale { trough { $_scale_trough_bg: if($variant == 'light', $button_border, darken($bg_color, 5%)); + outline-offset: 2px; + -gtk-outline-radius: 2px; margin: 5px; border: none; background-image: linear-gradient(to bottom, $_scale_trough_bg); -- cgit v1.2.3 From d271e75c97bc24ec3f13e27cb84760804294eb84 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 2 Mar 2016 12:41:43 +0100 Subject: fix spinbuttons --- common/gtk-3.0/3.20/sass/_common.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 0f57cdb..d901b99 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -743,19 +743,18 @@ spinbutton { &:disabled { color: $insensitive_fg_color; } &:not(.vertical) { - button, entry { - padding-top: 0; - padding-bottom: 0; - min-height: 0; + button, entry { @extend %linked; } + + &:dir(ltr) entry, + &:dir(rtl) button.up { border-radius: 3px 0 0 3px; } - @extend %linked; - } > button + button { border-left-style: none; } > button:hover:not(:active), > button:hover + button { box-shadow: inset 1px 0 $button_border; } > button:first-child:hover:not(:active), + > button.up:dir(rtl):hover:not(:active), > entry + button:not(:active):hover { box-shadow: none; } > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } @@ -768,6 +767,9 @@ spinbutton { @extend %linked_vertical; } + + button.up { border-radius: 3px 3px 0 0; } + > entry:focus + button { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } } } -- cgit v1.2.3 From c6048e47d0f653b743d09b3f812cedb8112609ea Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 2 Mar 2016 13:28:11 +0100 Subject: cleanup --- common/gtk-3.0/3.20/sass/_common.scss | 78 ++++++++++++++++------------------- 1 file changed, 35 insertions(+), 43 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index d901b99..2027c32 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -77,7 +77,7 @@ textview text { selection:hover { @extend %selected_items; } - &.dim-label { + &.dim-label { color: transparentize($text_color, 0.45); selection, selection:focus { @@ -87,6 +87,10 @@ textview text { } } +textview { // This will get overridden by .view, needed by gedit line numbers + background-color: mix($bg_color, $base_color, 50%); +} + iconview { color: $text_color; background-color: $base_color; @@ -114,7 +118,7 @@ flowbox { &:selected { outline-offset: -2px; - @extend %selected_items + @extend %selected_items; } } } @@ -146,20 +150,16 @@ assistant { &:dir(ltr) { border-right: 1px solid $borders_color; } &:dir(rtl) { border-left: 1px solid $borders_color; } } + &.csd .sidebar { border-top-style: none; } - .sidebar label { - padding: 6px 12px; - } + .sidebar label { padding: 6px 12px; } + .sidebar label.highlight { background-color: $selected_bg_color; color: $selected_fg_color; } } -textview { // This will get overridden by .view, needed by gedit line numbers - background-color: mix($bg_color, $base_color, 50%); -} - %osd, .osd { color: $osd_fg_color; border: none; @@ -433,27 +433,12 @@ button { } &.text-button.image-button { - // those buttons needs uneven horizontal padding, we want the icon side - // to have the image-button padding, while the text side the text-button - // one, so we're adding the missing padding to the label depending on - // its position inside the button - padding-left: 0; - padding-right: 0; + padding-left: 8px; + padding-right: 8px; label { - &:first-child { - padding-left: 12px; - padding-right: 0; - } - &:last-child { - padding-left: 0; - padding-right: 12px; - } - } - - image { - padding-left: 6px; - padding-right: 6px; + padding-left: 8px; + padding-right: 8px; } } @@ -728,6 +713,7 @@ modelbutton.flat arrow { button:link, button:visited { @extend %undecorated_button; @extend *:link; + &:hover, &:active, &:checked { @extend %undecorated_button; } @@ -1345,7 +1331,7 @@ treeview.view { &:selected { border-radius: 0; border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); - border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunately @extend %selected_items; } @@ -1357,7 +1343,10 @@ treeview.view { } } - &.separator { min-height: 2px; } + &.separator { + min-height: 2px; + color: transparentize(black, 0.9); + } &.dnd { border-style: solid none; @@ -1367,6 +1356,7 @@ treeview.view { &.expander { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } color: mix($fg_color, $base_color, 50%); @@ -1378,9 +1368,7 @@ treeview.view { &:hover { color: $selected_fg_color; } } - &:checked { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - } + &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } &.progressbar { // progress bar in treeviews @@ -1466,7 +1454,7 @@ menubar, //background-color: opacify($header_bg_backdrop, 1); } - & > menuitem { + > menuitem { padding: 6px 8px; border: solid transparent; border-width: 0; @@ -1504,8 +1492,9 @@ menu, } menuitem { - padding: 4px; + min-height: 16px; min-width: 40px; + padding: 4px; border: solid transparent; border-width: 1px 0 1px 0; &:hover { @@ -1592,9 +1581,11 @@ popover.background { border-style: none; background-color: transparent; } - &.osd, &.magnifier { @extend %osd; } - &.touch-selection { @extend .context-menu } + &, .csd & { + &.osd, &.magnifier { @extend %osd; } + &.touch-selection { @extend .context-menu } + } } //touch selection handlebars for the Popover.osd above @@ -1955,6 +1946,7 @@ checkbutton, radiobutton { &.text-button { padding: 1px 2px 4px; outline-offset: 0; + &:disabled, &:disabled:active, &:disabled:indeterminate { @@ -2162,7 +2154,6 @@ progressbar { // Level Bar // levelbar { - block { min-width: 32px; min-height: 1px; @@ -2277,13 +2268,12 @@ separator { list { background-color: $base_color; border-color: $borders_color; -} -row { padding: 2px; } + row { padding: 2px; } +} row.activatable { - - &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411 + &.has-open-popup, &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } &:active { color: $fg_color; } @@ -2308,7 +2298,7 @@ row:selected { } // transition -row, row.activatable { +row { transition: all 150ms $ease-out-quad; &:hover { transition: none; } } @@ -2350,6 +2340,7 @@ expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); + &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); } &:hover { color: lighten($fg_color,30%); } //only lightens the arrow &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } @@ -2458,6 +2449,7 @@ filechooser { stacksidebar { row { padding: 10px 4px; + > label { padding-left: 6px; padding-right: 6px; -- cgit v1.2.3 From 900af619c3291fcacf7b129554f5ff4da7ca713c Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 11:56:24 +0100 Subject: fix comboboxes --- common/gtk-3.0/3.20/sass/_common.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 2027c32..f404cb3 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -566,7 +566,7 @@ toolbar.inline-toolbar toolbutton { > entry#{$e_type}:focus:not(:only-child) { + entry, + button, - + combobox > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } + + combobox > box > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } } } > button:checked + entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); } @@ -782,21 +782,21 @@ combobox { } } - .linked > & > button.combo { + .linked > & > box > button.combo { // the combobox is a composite widget so the way we do button linking doesn't // work, special case needed. &:dir(ltr), &:dir(rtl) { @extend %linked_middle; } // specificity bump } - .linked:not(.vertical) > &:first-child > button.combo { @extend %linked:first-child; } - .linked:not(.vertical) > &:last-child > button.combo { @extend %linked:last-child; } - .linked:not(.vertical) > &:only-child > button.combo { @extend %linked:only-child; } + .linked:not(.vertical) > &:first-child > box > button.combo { @extend %linked:first-child; } + .linked:not(.vertical) > &:last-child > box > button.combo { @extend %linked:last-child; } + .linked:not(.vertical) > &:only-child > box > button.combo { @extend %linked:only-child; } - .linked.vertical > & > button.combo { @extend %linked_vertical_middle; } - .linked.vertical > &:first-child > button.combo { @extend %linked_vertical:first-child; } - .linked.vertical > &:last-child > button.combo { @extend %linked_vertical:last-child; } - .linked.vertical > &:only-child > button.combo { @extend %linked_vertical:only-child; } + .linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; } + .linked.vertical > &:first-child > box > button.combo { @extend %linked_vertical:first-child; } + .linked.vertical > &:last-child > box > button.combo { @extend %linked_vertical:last-child; } + .linked.vertical > &:only-child > box > button.combo { @extend %linked_vertical:only-child; } } // -- cgit v1.2.3 From 58bf6bb81bae5ff75560e03a66f634238476d618 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 12:04:24 +0100 Subject: fix scales with marks --- common/gtk-3.0/3.20/sass/_common.scss | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index f404cb3..3eac8c2 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1968,26 +1968,34 @@ checkbutton check { // GtkScale // scale { + $_marks_length: 3px; + $_marks_margin: -4px; + min-height: 9px; min-width: 9px; padding: 5px; marks { - color: gtkalpha(currentColor, 0.3); - - &.top { margin-bottom: -4px; } - &.bottom { margin-top: -4px; } - &.left { margin-right: -4px; } - &.right { margin-left: -4px; } + color: gtkalpha(currentColor, 0.4); + + @each $marks_pos, $marks_margin in (top, bottom), + (bottom, top), + (left, right), + (right, left) { + &.#{$marks_pos} { + margin-#{$marks_margin}: $_marks_margin; + margin-#{$marks_pos}: -$_marks_margin; + } + } } - &.horizontal mark indicator { - min-height: 3px; + &.horizontal indicator { + min-height: $_marks_length; min-width: 1px; } - &.vertical mark indicator { + &.vertical indicator { min-height: 1px; - min-width: 3px; + min-width: $_marks_length; } &.fine-tune { -- cgit v1.2.3 From 68f72d8b27370f91f3649bb36ccd55a04f1618e6 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 12:11:17 +0100 Subject: fix linked combos --- common/gtk-3.0/3.20/sass/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 3eac8c2..0602b21 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -782,7 +782,7 @@ combobox { } } - .linked > & > box > button.combo { + .linked:not(.vertical) > & > box > button.combo { // the combobox is a composite widget so the way we do button linking doesn't // work, special case needed. &:dir(ltr), -- cgit v1.2.3 From 865b98f659c4919b1c7b72f51ba7a31425bceceb Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 15:40:57 +0100 Subject: improve tabs --- common/gtk-3.0/3.20/sass/_common.scss | 51 +++++++++++++++++------------------ 1 file changed, 24 insertions(+), 27 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 0602b21..4c92a7d 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1603,18 +1603,19 @@ cursor-handle { // notebook { padding: 0; - background-color: $base_color; transition: all 200ms $ease-out-quad; &.frame { border: 1px solid $borders_color; - header { margin: -1px; } // ugly hack to hide the borders around the header + > header { margin: -1px; } // ugly hack to hide the borders around the header + } + + > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks + background-color: $base_color; } > header { - $vpadding: 4px; - $hpadding: 15px; padding: 3px; background-color: $bg_color; @@ -1628,16 +1629,16 @@ notebook { &.#{$_pos} { padding-#{$_bpos}: 0; - tab { - padding: $vpadding $hpadding; + > tabs > tab { + padding: 2px 10px; + min-width: 22px; + min-height: 22px; + + outline-offset: -4px; + border: 1px solid transparent; border-#{$_bpos}: none; - // nicer close button placement - &.reorderable-page { - padding-left: 12px; - padding-right: 12px; - } // tab overlap @if $_pos==top or $_pos==bottom { margin-right: -1px; } @else { margin-bottom: -1px; } @@ -1652,26 +1653,26 @@ notebook { } // overflow arrows &.top, &.bottom { - tabs arrow.up { + > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); &:last-child { margin-left: 2px; } } - tabs arrow.down { + > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); &:first-child { margin-right: 2px; } } } &.left, &.right { - tabs arrow.up { + > tabs > arrow.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); &:last-child { margin-top: 2px; } } - tabs arrow.down { + > tabs > arrow.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); &:first-child { margin-bottom: 2px; } } } - tabs arrow { + > tabs > arrow { color: $insensitive_fg_color; &:hover { color: mix($fg_color, $insensitive_fg_color, 50%); } @@ -1679,32 +1680,28 @@ notebook { &:disabled { color: transparentize($insensitive_fg_color,0.3); } } // tab colors - tab { + > tabs > tab { + color: $insensitive_fg_color; background-color: transparentize($base_color, 1); - label { color: $insensitive_fg_color; } - - &:hover { + &:hover:not(:checked) { + color: mix($fg_color, $insensitive_fg_color, 50%); background-color: transparentize($base_color, 0.5); border-color: $borders_color; - - label { color: mix($fg_color, $insensitive_fg_color, 50%); } + box-shadow: inset 0 -1px $borders_color; } &:checked { + color: $fg_color; background-color: $base_color; border-color: $borders_color; - - label { color: $fg_color; } } // close button - button { + button.flat { min-height: 18px; min-width: 16px; padding: 0; color: mix($bg_color, $fg_color, 35%); - @extend %undecorated_button; - &:hover { @extend %undecorated_button; color: lighten(red, 15%); -- cgit v1.2.3 From c0cad431d3310dc14c376fc984ec92525c8165fc Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 16:56:55 +0100 Subject: remove weird transition --- common/gtk-3.0/3.20/sass/_common.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4c92a7d..2b58758 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2513,7 +2513,6 @@ placessidebar { // placesview { .server-list-button > image { - transition: 200ms $ease-out-quad; -gtk-icon-transform: rotate(0turn); } -- cgit v1.2.3 From 0353810bd2a2ea8e1544f3be86bc9f1e7fb7d42d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 7 Mar 2016 22:25:37 +0100 Subject: fix height of window decorations --- common/gtk-3.0/3.20/sass/_common.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 2b58758..980ccfc 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -975,8 +975,8 @@ headerbar { .csd &.default-decoration, // needed under wayland, since all gtk3 windows are csd windows &.default-decoration:backdrop, .csd &.default-decoration:backdrop { - padding-top: 5px; - padding-bottom: 5px; + min-height: 28px; + padding: 0 3px; background-color: opacify($header_bg, 1); border-bottom-width: 0; @@ -2885,6 +2885,8 @@ headerbar, &.default-decoration button.titlebutton { // no vertical padding for ssd buttons padding: 0 4px; // already handled by the titlebar-padding min-width: 0; + min-height: 0; + margin: 0; } button.titlebutton { -- cgit v1.2.3 From fd3221e4cd018c3c58ed5297d7d8fb729a98e1e2 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 7 Mar 2016 22:50:11 +0100 Subject: scale updates --- common/gtk-3.0/3.20/sass/_common.scss | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 980ccfc..a889726 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1966,26 +1966,42 @@ checkbutton check { // scale { $_marks_length: 3px; - $_marks_margin: -4px; + $_marks_margin: -2px; min-height: 9px; min-width: 9px; padding: 5px; + value { color: gtkalpha(currentColor, 0.4); } + marks { color: gtkalpha(currentColor, 0.4); - @each $marks_pos, $marks_margin in (top, bottom), - (bottom, top), - (left, right), - (right, left) { - &.#{$marks_pos} { + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { margin-#{$marks_margin}: $_marks_margin; margin-#{$marks_pos}: -$_marks_margin; } } } + &.fine-tune marks { + color: gtkalpha(currentColor, 0.4); + + @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), + (bottom, bottom, top), + (top, left, right), + (bottom, right, left) { + &.#{$marks_class} { + margin-#{$marks_margin}: $_marks_margin - 2px; + margin-#{$marks_pos}: -$_marks_margin + 2px; + } + } + } + &.horizontal indicator { min-height: $_marks_length; min-width: 1px; -- cgit v1.2.3 From de5eae0ec73f87c76aa155b73fd2fe608bf75a47 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 9 Mar 2016 19:46:19 +0100 Subject: fix image color in error and warning entries --- common/gtk-3.0/3.20/sass/_common.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index a889726..987f6ea 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -253,6 +253,8 @@ entry { border-color: if($variant=='light', $e_color, $entry_border); background-image: linear-gradient(to bottom, mix($e_color, $base_color, 60%)); + image { color: $selected_fg_color; } + &:focus { color: $selected_fg_color; background-image: linear-gradient(to bottom, $e_color); -- cgit v1.2.3 From b8ddf6b047d78b404766c47115727ff2185e1815 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 9 Mar 2016 20:00:09 +0100 Subject: update pathbar buttons --- common/gtk-3.0/3.20/sass/_common.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 987f6ea..c4170db 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1302,16 +1302,22 @@ headerbar { // Pathbars // .path-bar button { + &.text-button, &.image-button, & { + padding-left: 6px; + padding-right: 6px; + } - &:only-child { - padding-left: 10px; - padding-right: 10px; + &.text-button.image-button label { padding-left: 0; padding-right: 0; } + + &.text-button.image-button, & { + label:last-child { padding-right: 10px; } + label:first-child { padding-left: 10px; } } - // the following is for spacing the icon and the label inside the home button - label:last-child { padding-left: 4px; } - label:first-child { padding-right: 4px; } - label:only-child, label { padding-right: 0; padding-left: 0; } + image { + padding-left: 4px; + padding-right: 4px; + } } // -- cgit v1.2.3 From bd69550f5e825cf56b82e0863e2bade36d29dc1c Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 9 Mar 2016 20:07:51 +0100 Subject: add border to sidebars --- common/gtk-3.0/3.20/sass/_common.scss | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index c4170db..83782c7 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -147,8 +147,6 @@ assistant { .sidebar { background-color: $base_color; border-top: 1px solid $borders_color; - &:dir(ltr) { border-right: 1px solid $borders_color; } - &:dir(rtl) { border-left: 1px solid $borders_color; } } &.csd .sidebar { border-top-style: none; } @@ -2241,7 +2239,7 @@ printdialog { // // Frames // -frame border, +frame > border, .frame { margin: 0; padding: 0; @@ -2467,15 +2465,41 @@ filechooser { // // Sidebar // -.sidebar, .sidebar .view { - border: none; +.sidebar { + border-style: none; background-color: lighten($bg_color, 2%); + @at-root %sidebar_left, + &:dir(ltr), + &.left, + &.left:dir(rtl) { + border-right: 1px solid $borders_color; + border-left-style: none; + } + + @at-root %sidebar_right, + &:dir(rtl), + &.left { + border-left: 1px solid $borders_color; + border-right-style: none; + } + &:selected { @extend %selected_items; } separator { @extend separator; } + + paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} } stacksidebar { + &.sidebar { + &:dir(ltr) list, + &.left list, + &.left:dir(rtl) list { @extend %sidebar_left; } + + &:dir(rtl) list, + &.right list { @extend %sidebar_right; } + } + row { padding: 10px 4px; -- cgit v1.2.3 From 699573a3c716ec7c6013f352f2e885a85fd75413 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 10 Mar 2016 16:22:00 +0100 Subject: tweak check, radio and modelbuttons --- common/gtk-3.0/3.20/sass/_common.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 83782c7..54e7bbb 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -662,10 +662,10 @@ toolbar.inline-toolbar toolbutton { menuitem.button.flat, modelbutton.flat { transition: none; - min-height: 22px; + min-height: 24px; padding-left: 8px; padding-right: 8px; - outline-offset: -2px; + outline-offset: -3px; border-radius: 2px; @extend %undecorated_button; @@ -1947,9 +1947,14 @@ switch { checkbutton, radiobutton { // this is for a nice focus on check and radios text &.text-button { - padding: 1px 2px 4px; + padding: 2px 0; outline-offset: 0; + label:not(:only-child) { + &:first-child { margin-left: 4px; } + &:last-child { margin-right: 4px; } + } + &:disabled, &:disabled:active, &:disabled:indeterminate { -- cgit v1.2.3 From 866ae993eb6b3009e0849c7a67c41672e3c59b9c Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 11 Mar 2016 00:02:11 +0100 Subject: update gedit style --- common/gtk-3.0/3.20/sass/_common.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 54e7bbb..8c79b17 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1026,8 +1026,9 @@ paned.titlebar { > headerbar { &:not(:only-child):not(:first-child):not(:last-child) { border-radius: 0;} + + ~ headerbar { border-top-left-radius: 0; } &:first-child { border-top-right-radius: 0; } - &:last-child { border-top-left-radius: 0; } } } -- cgit v1.2.3 From 50f38e4accf805284f02b8d2e473e75593b99faa Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:07:05 +0100 Subject: tweak tab size --- common/gtk-3.0/3.20/sass/_common.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 8c79b17..6438c03 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1623,7 +1623,7 @@ notebook { } > header { - padding: 3px; + padding: 2px; background-color: $bg_color; &.top { box-shadow: inset 0 -1px $borders_color; } @@ -1638,8 +1638,8 @@ notebook { > tabs > tab { padding: 2px 10px; - min-width: 22px; - min-height: 22px; + min-width: 20px; + min-height: 20px; outline-offset: -4px; @@ -1704,7 +1704,7 @@ notebook { } // close button button.flat { - min-height: 18px; + min-height: 22px; min-width: 16px; padding: 0; color: mix($bg_color, $fg_color, 35%); -- cgit v1.2.3 From 551520a88bd14e550b8d652c6316c7c7840b0fcd Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:10:05 +0100 Subject: fix tooltips --- common/gtk-3.0/3.20/sass/_common.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 6438c03..9026edd 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2700,6 +2700,8 @@ tooltip { // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. background-color: $osd_bg_color; background-clip: padding-box; + + label { padding: 4px; } } border-radius: 2px; @@ -2708,7 +2710,6 @@ tooltip { decoration { background-color: transparent; } * { //Yeah this is ugly - padding: 4px; background-color: transparent; color: $osd_fg_color; // just to be sure } -- cgit v1.2.3 From f8f4356aeda443852db4babb8bba46e81bf0f9f0 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:35:33 +0100 Subject: rounded corners for colorscale popover --- common/gtk-3.0/3.20/sass/_common.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 9026edd..40a0f53 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2809,6 +2809,9 @@ button.color { } } +// colorscale popup +colorchooser .popover.osd { border-radius: 3px; } + // // Misc // -- cgit v1.2.3 From 674ffa0890353fa72dae97305ca38996932fa964 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:39:18 +0100 Subject: set min-width on spinbutton entries --- common/gtk-3.0/3.20/sass/_common.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 40a0f53..d46f294 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -729,6 +729,8 @@ spinbutton { &:disabled { color: $insensitive_fg_color; } &:not(.vertical) { + entry { min-width: 28px; } + button, entry { @extend %linked; } &:dir(ltr) entry, -- cgit v1.2.3 From 770bcd460f5fec8ea3e82b6c4b9dcf0045b41427 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:44:08 +0100 Subject: less padding for slider-buttons in path-bars --- common/gtk-3.0/3.20/sass/_common.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index d46f294..b32d817 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1315,6 +1315,11 @@ headerbar { label:first-child { padding-left: 10px; } } + &.slider-button { + padding-left: 2px; + padding-right: 2px; + } + image { padding-left: 4px; padding-right: 4px; -- cgit v1.2.3 From 8b4ed4c295e9d90fde26a064942d33aab38f86a5 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 21:59:14 +0100 Subject: refactoring --- common/gtk-3.0/3.20/sass/_common.scss | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index b32d817..d041833 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -468,14 +468,16 @@ button { padding-right: 2px; } - &.needs-attention > label, - &.needs-attention > image { @extend %needs_attention; } - &.needs-attention:active > label, - &.needs-attention:active > image, - &.needs-attention:checked > label, - &.needs-attention:checked > image { - animation: none; - background-image: none; + &.needs-attention { + + > label, > image { @extend %needs_attention; } + + &:active, &:checked { + > label, > image { + animation: none; + background-image: none; + } + } } } @@ -2529,7 +2531,7 @@ stacksidebar { placessidebar { - @extend scrolledwindow; + > viewport.frame { border-style: none; } list { background-color: transparent; } -- cgit v1.2.3 From 3c187259e309e16a5071d08d36e18b209f0d372b Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 22:08:47 +0100 Subject: shrink standalone osd buttons --- common/gtk-3.0/3.20/sass/_common.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index d041833..59f4a99 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -362,8 +362,9 @@ button { border-color: darken($osd_bg_color, 8%); &.image-button { - min-height: 48px; - min-width: 48px; + padding: 0; + min-height: 36px; + min-width: 36px; } &:hover { color: $selected_bg_color; } -- cgit v1.2.3 From a5dc6aa5893b6c2041d6ff2cae87f150d70426a2 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 21 Mar 2016 22:28:01 +0100 Subject: fix wide separators --- common/gtk-3.0/3.20/sass/_common.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 59f4a99..40cbb84 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -2602,10 +2602,9 @@ paned { &:selected { background-image: linear-gradient(to top, $selected_bg_color); } &.wide { - margin: 0; - padding: 0; 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-size: 1px 1px, 1px 1px; } @@ -2625,6 +2624,8 @@ paned { } &.wide { + margin: 0; + padding: 0; background-repeat: repeat-y, repeat-y; background-position: left, right; } @@ -2637,6 +2638,8 @@ paned { background-position: top; &.wide { + margin: 0; + padding: 0; background-repeat: repeat-x, repeat-x; background-position: bottom, top; } -- cgit v1.2.3 From bb58312bdc5f94c9d63881287a21ab73ae510e98 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Tue, 22 Mar 2016 12:24:30 +0100 Subject: lots of fixes --- common/gtk-3.0/3.20/sass/_common.scss | 447 +++++++++++++++++++--------------- 1 file changed, 251 insertions(+), 196 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 40cbb84..06e7cfa 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -41,9 +41,7 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); background-color: if($transparency == 'true', transparentize($bg_color, 0.001), $bg_color); // without this headerbar transparency doesn't seem to work } -*:disabled { - -gtk-icon-effect: dim; -} +*:disabled { -gtk-icon-effect: dim; } .gtkstyle-fallback { background-color: $bg_color; @@ -67,41 +65,29 @@ $darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix); } .view, -textview text { +%view { color: $text_color; background-color: $base_color; - &:selected, - selection, - selection:focus, - selection:hover { - @extend %selected_items; - } - &.dim-label { - color: transparentize($text_color, 0.45); - - selection, selection:focus { - color: transparentize($selected_fg_color, 0.35); - text-shadow: none; + &:selected { + &, &:focus { + @extend %selected_items; + border-radius: 2px; } } } -textview { // This will get overridden by .view, needed by gedit line numbers - background-color: mix($bg_color, $base_color, 50%); -} - -iconview { - color: $text_color; - background-color: $base_color; +.view, +textview { + text { + @extend %view; - &:selected, - &:selected:focus { - border-radius: 2px; - @extend %selected_items; + selection { &:focus, & { @extend %selected_items; }} } } +iconview { @extend .view; } + rubberband, .rubberband { border: 1px solid darken($selected_bg_color, 10%); @@ -116,26 +102,32 @@ flowbox { border-radius: 2px; &:selected { - outline-offset: -2px; - @extend %selected_items; + + outline-offset: -2px; } } } label { &.separator { - color: $fg_color; @extend .dim-label; + + color: $fg_color; } - &:selected, - selection, - selection:focus, - selection:hover { - @extend %selected_items; + + row:selected &, + &:selected { @extend %nobg_selected_items; } + + selection { + color: $selected_fg_color; + background-color: $selected_bg_color; } + &:disabled { color: $insensitive_fg_color; + + selection { @extend %selected_items:disabled; } } } @@ -150,6 +142,7 @@ assistant { } &.csd .sidebar { border-top-style: none; } + .sidebar label { padding: 6px 12px; } .sidebar label.highlight { @@ -158,6 +151,10 @@ assistant { } } +textview { // This will get overridden by .view, needed by gedit line numbers + background-color: $base_color; +} + %osd, .osd { color: $osd_fg_color; border: none; @@ -212,12 +209,14 @@ entry { &.right { padding-right: 0; padding-left: 5px; } } - &.flat, &.flat:focus { - @include entry(normal); - min-height: 0; - padding: 2px; - border: none; - border-radius: 0; + &.flat { + &, &:focus { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + border-radius: 0; + } } &:focus { @@ -227,23 +226,9 @@ entry { &:disabled { @include entry(insensitive); } - selection, - selection:focus { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - progress { - margin: 0 -6px; - border-radius: 0; - border-width: 0 0 2px; - border-color: $selected_bg_color; - border-style: solid; - background-image: none; - background-color: transparent; - box-shadow: none; - } + selection { &:focus, & { @extend %selected_items; }} + // error and warning style @each $e_type, $e_color in (warning, $warning_color), (error, $error_color) { &.#{$e_type} { @@ -265,12 +250,31 @@ entry { } } + &:drop(active) { + &:focus, & { + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + } + .osd & { @include entry(osd); &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } } + progress { + margin: 0 -6px; + border-radius: 0; + border-width: 0 0 2px; + border-color: $selected_bg_color; + border-style: solid; + background-image: none; + background-color: transparent; + box-shadow: none; + } + + // linked entries .linked:not(.vertical) > &, .linked:not(.vertical) > &:focus { @extend %linked; } @@ -278,6 +282,16 @@ entry { .linked.vertical > &:focus { @extend %linked_vertical; } } +treeview entry { + &.flat, & { + border-radius: 0; + background-image: none; + background-color: $base_color; + + &:focus { border-color: $selected_bg_color; } + } +} + // // Buttons // @@ -317,26 +331,29 @@ button { &.flat { @include button(undecorated); - 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 // in this case the duration is increased. transition: none; + &:hover { transition: $_button_transition; transition-duration: 350ms; + &:active { transition: $_button_transition; } } } + &:hover { @include button(hover); -gtk-icon-effect: highlight; } + &:active, &:checked { - background-clip: if($variant=='light', border-box, padding-box); @include button(active); + + background-clip: if($variant=='light', border-box, padding-box); transition-duration: 50ms; } @@ -345,15 +362,43 @@ button { &:active:hover, &:checked { color: $selected_fg_color; } //Webkitgtk workaround end - &.flat:disabled { - @include button(undecorated); - } + &.flat:disabled { @include button(undecorated); } + &:disabled { @include button(insensitive); + &:active, &:checked { @include button(insensitive-active); } } + + &.image-button { + min-width: 32px; + padding-left: 0; + padding-right: 0; + } + + &.text-button { + padding-left: 16px; + padding-right: 16px; + } + + &.text-button.image-button { + padding-left: 8px; + padding-right: 8px; + + label { + padding-left: 8px; + padding-right: 8px; + } + } + + &:drop(active) { + color: $drop_target_color; + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; + } + // big standalone buttons like in Documents pager &.osd { color: $osd_fg_color; @@ -422,27 +467,6 @@ button { } } - &.image-button { - min-width: 32px; - padding-left: 0; - padding-right: 0; - } - - &.text-button { - padding-left: 16px; - padding-right: 16px; - } - - &.text-button.image-button { - padding-left: 8px; - padding-right: 8px; - - label { - padding-left: 8px; - padding-right: 8px; - } - } - .stack-switcher > & { // to position the needs attention dot, padding is added to the button // child, a label needs just lateral padding while an icon needs vertical @@ -509,16 +533,12 @@ button { .linked:not(.vertical) > &, .linked:not(.vertical) > &:hover, .linked:not(.vertical) > &:active, - .linked:not(.vertical) > &:checked { - @extend %linked; - } + .linked:not(.vertical) > &:checked { @extend %linked; } .linked.vertical > &, .linked.vertical > &:hover, .linked.vertical > &:active, - .linked.vertical > &:checked { - @extend %linked_vertical; - } + .linked.vertical > &:checked { @extend %linked_vertical; } } // all the following is for the +|- buttons on inline toolbars, that way @@ -686,7 +706,8 @@ modelbutton.flat { } modelbutton.flat arrow { - &, &:hover { background: none; } + & { background: none; } + &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } @@ -696,6 +717,7 @@ modelbutton.flat arrow { // *:link { color: $link_color; + &:visited { color: $link_visited_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); } @@ -708,9 +730,10 @@ modelbutton.flat arrow { color: $link_color; *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } - &:selected, *:selected & { - color: mix($selected_fg_color, $selected_bg_color, 80%); - } + + @at-root %link_selected, + &:selected, + *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); } } button:link, button:visited { @@ -780,6 +803,8 @@ combobox { min-width: 16px; } + &:drop(active) button.combo { @extend button:drop(active); } + &.linked { button:nth-child(2) { &:dir(ltr) { @extend %linked:last-child; } @@ -816,11 +841,29 @@ toolbar { &.horizontal separator { margin: 0 6px; } &.vertical separator { margin: 6px 0; } - .osd &, &.osd { + .osd & { background-color: transparent; } + + &.osd { padding: 7px; border: 1px solid transparentize(black, 0.5); border-radius: 3px; background-color: transparentize($osd_bg_color, 0.1); + + &.left, + &.right, + &.top, + &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars + } + + &:not(.inline-toolbar):not(.osd) { + switch, + scale, + entry, + spinbutton, + button { + margin-right: 1px; + margin-bottom: 1px; + } } } @@ -1319,8 +1362,8 @@ headerbar { } &.slider-button { - padding-left: 2px; - padding-right: 2px; + padding-left: 1px; + padding-right: 1px; } image { @@ -1333,7 +1376,6 @@ headerbar { // Tree Views // treeview.view { - -GtkTreeView-grid-line-width: 1; -GtkTreeView-grid-line-pattern: ''; -GtkTreeView-tree-line-width: 1; @@ -1346,15 +1388,18 @@ treeview.view { rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props &:selected { - border-radius: 0; - border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); - border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunately + &, &:focus { + border-radius: 0; + border-left-color: mix($selected_fg_color, $selected_bg_color, 50%); + border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunately - @extend %selected_items; + @extend %selected_items; + } } &:disabled { color: $insensitive_fg_color; + &:selected { color: mix($selected_fg_color, $selected_bg_color, 40%); } @@ -1365,10 +1410,13 @@ treeview.view { color: transparentize(black, 0.9); } - &.dnd { + &:drop(active) { border-style: solid none; border-width: 1px; border-color: mix($fg_color, $selected_bg_color, 50%); + + &.after { border-top-style: none; } + &.before { border-bottom-style: none; } } &.expander { @@ -1593,8 +1641,7 @@ popover.background { > list, > .view, - > toolbar, - &.osd > toolbar { + > toolbar { border-style: none; background-color: transparent; } @@ -1602,6 +1649,8 @@ popover.background { &, .csd & { &.osd, &.magnifier { @extend %osd; } &.touch-selection { @extend .context-menu } + + &.osd { @extend %osd; } } } @@ -1620,7 +1669,6 @@ cursor-handle { // notebook { padding: 0; - transition: all 200ms $ease-out-quad; &.frame { border: 1px solid $borders_color; @@ -1748,22 +1796,14 @@ scrollbar { button { border: none; } - &.vertical { - button.down { - -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); - } - button.up { - -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); - } + &.vertical button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } + &.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); } } - &.horizontal { - button.down { - -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); - } - button.up { - -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); - } + &.horizontal button { + &.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); } + &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } } &.overlay-indicator { @@ -1908,7 +1948,7 @@ switch { } // -// Check and Radio items * +// Check and Radio items // @each $w,$a in ('check', 'checkbox'), ('radio','radio') { @@ -1958,29 +1998,24 @@ switch { checkbutton, radiobutton { // this is for a nice focus on check and radios text &.text-button { - padding: 2px 0; - outline-offset: 0; + padding: 2px 0; + outline-offset: 0; + } label:not(:only-child) { &:first-child { margin-left: 4px; } &:last-child { margin-right: 4px; } } - - &:disabled, - &:disabled:active, - &:disabled:indeterminate { - // set insensitive color, which is overriden otherwise - color: $insensitive_fg_color; - } - } } -radiobutton radio, -checkbutton check { +check, +radio { min-width: 16px; min-height: 16px; margin: 0 2px; - &:only-child { margin: 0; } + + &:only-child, + menu menuitem & { margin: 0; } } // @@ -2117,7 +2152,7 @@ scale { } fill { background: none; - background-color: red; + background-color: transparentize($selected_bg_color, 0.5); } &:disabled { background-image: linear-gradient(to bottom, transparentize($_scale_trough_bg, 0.45)); @@ -2127,6 +2162,7 @@ scale { .osd & { background-image: linear-gradient(to bottom, lighten($osd_bg_color, 7%)); outline-color: transparentize($osd_fg_color, 0.8); + highlight { background-image: none; background-image: linear-gradient(to bottom, $selected_bg_color); @@ -2188,11 +2224,6 @@ progressbar { } } -// FIXME -//.osd .scale.progressbar { -// background-color: $selected_bg_color; -//} - // // Level Bar // @@ -2261,13 +2292,12 @@ frame > border, padding: 0; border-radius: 0; border: 1px solid $borders_color; + &.flat { border-style: none; } - padding: 0; } scrolledwindow { - viewport.frame { // avoid double borders when viewport inside - // scrolled window + viewport.frame { // avoid double borders when viewport inside scrolled window border-style: none; } @@ -2315,35 +2345,32 @@ list { row { padding: 2px; } } -row.activatable { - &.has-open-popup, - &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } - - &:active { color: $fg_color; } +row { + &:not(:hover) { transition: all 150ms $ease-out-quad; } &:selected { - &:active { color: $selected_fg_color; } + @extend %selected_items; + button { @extend %selected-button; } + } + + &.activatable { &.has-open-popup, - &:hover { background-color: mix(black, $selected_bg_color, 10%); } + &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } + &:active { color: $fg_color; } &:disabled { - color: transparentize($selected_fg_color, 0.3); - background-color: transparentize($selected_bg_color, 0.3); - label { color: inherit; } + color: $insensitive_fg_color; + image { color: inherit; } } - } -} -row:selected { - @extend %selected_items; - button { @extend %selected-button } -} + &:selected { + &:active { color: $selected_fg_color; } -// transition -row { - transition: all 150ms $ease-out-quad; - &:hover { transition: none; } + &.has-open-popup, + &:hover { background-color: mix(black, $selected_bg_color, 10%); } + } + } } // @@ -2354,10 +2381,10 @@ row { color: $dark_sidebar_fg; background-color: $dark_sidebar_bg; background-clip: border-box; - border-radius: 0 0 2px 2px; - border-width: 0 1px 1px 1px; - border-style: solid; - border-color: darken($dark_sidebar_bg, 10%); + border-radius: 0 0 2px 2px; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: darken($dark_sidebar_bg, 10%); border { border: none; } @@ -2423,9 +2450,7 @@ calendar { } } &:indeterminate { color: gtkalpha(currentColor,0.55); } - &.highlight { - color: $fg_color; - } + &.highlight { color: $fg_color; } } // @@ -2478,6 +2503,11 @@ filechooser { #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); } } +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; +} + // // Sidebar // @@ -2495,13 +2525,12 @@ filechooser { @at-root %sidebar_right, &:dir(rtl), - &.left { + &.right { border-left: 1px solid $borders_color; border-right-style: none; } - &:selected { @extend %selected_items; } - separator { @extend separator; } + list { background-color: transparent; } paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }} } @@ -2531,11 +2560,8 @@ stacksidebar { } placessidebar { - > viewport.frame { border-style: none; } - list { background-color: transparent; } - row { // Needs overriding of the GtkListBoxRow padding min-height: 30px; @@ -2565,11 +2591,27 @@ placessidebar { &:not(:hover):not(:active) > image { opacity: 0.5 }; } - } - row.sidebar-placeholder-row { border: solid 1px $selected_bg_color; } + &.sidebar-placeholder-row { + padding: 0 8px; + min-height: 2px; + background-image: linear-gradient(to top, $drop_target_color); + background-clip: content-box; + } + + &.sidebar-new-bookmark-row { color: $selected_bg_color; } - row.sidebar-new-bookmark-row { background-color: darken($bg_color, 10%); } + &:drop(active):not(:disabled) { + color: $drop_target_color; + box-shadow: inset 0 1px $drop_target_color, + inset 0 -1px $drop_target_color; + + &:selected { + color: $selected_fg_color; + background-color: $drop_target_color; + } + } + } } // @@ -2649,19 +2691,25 @@ paned { // // GtkInfoBar // -infobar { - border-style: none; - - button { @extend %selected-button } -} +infobar { border-style: none; } .info, .question, .warning, -.error, -infobar { +.error { background-color: $selected_bg_color; color: $selected_fg_color; + + button { @extend %selected-button } + + label:selected { + &:focus, &:hover, & { + color: $selected_bg_color; + background-color: $selected_fg_color; + } + } + + *:link { @extend %link_selected; } } @@ -2837,9 +2885,13 @@ colorchooser .popover.osd { border-radius: 3px; } rubberband { @extend rubberband; } } -.scale-popup button { // +/- buttons on GtkVolumeButton popup - &:hover { - @include button(hover); +.scale-popup { + .osd & { @extend %osd; } + + button { // +/- buttons on GtkVolumeButton popup + &:hover { + @include button(hover); + } } } @@ -2884,8 +2936,8 @@ stackswitcher button { // *:drop(active):focus, *:drop(active) { - border-color: black; - box-shadow: inset 0 0 0 1px black; + border-color: $drop_target_color; + box-shadow: inset 0 0 0 1px $drop_target_color; } // @@ -2915,8 +2967,7 @@ decoration { .tiled & { border-radius: 0; } - .popup &, - &.popup { + .popup & { box-shadow: none; border-radius: 0; } @@ -2995,8 +3046,12 @@ headerbar, // catch all extend %selected_items { - background-image: none; background-color: $selected_bg_color; - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); + + @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%); } + } } -- cgit v1.2.3 From 1eb462a994ce62b3843742d0315cb2d6650b07c0 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Tue, 22 Mar 2016 13:03:08 +0100 Subject: dnd updates --- common/gtk-3.0/3.20/sass/_common.scss | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 06e7cfa..4e406d7 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -253,7 +253,7 @@ entry { &:drop(active) { &:focus, & { border-color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; + box-shadow: none; } } @@ -396,7 +396,7 @@ button { &:drop(active) { color: $drop_target_color; border-color: $drop_target_color; - box-shadow: inset 0 0 0 1px $drop_target_color; + box-shadow: none; } // big standalone buttons like in Documents pager @@ -579,14 +579,15 @@ toolbar.inline-toolbar toolbutton { > entry.error + entry.warning { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a));} - @each $e_type, $e_color in ('',$selected_bg_color), - ('.warning', $warning_color), - ('.error', $error_color) { + @each $e_type, $e_color in (':focus',$selected_bg_color), + (':drop(active)', $drop_target_color), + ('.warning:focus', $warning_color), + ('.error:focus', $error_color) { - > entry + entry#{$e_type}:focus:not(:last-child), - > entry + entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } + > entry + entry#{$e_type}:not(:last-child), + > entry + entry#{$e_type}:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } - > entry#{$e_type}:focus:not(:only-child) { + > entry#{$e_type}:not(:only-child) { + entry, + button, + combobox > box > button.combo { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } @@ -751,6 +752,8 @@ button:link, button:visited { // spinbutton { + &:drop(active) { box-shadow: none; } + button:active { color: $selected_fg_color; } &:disabled { color: $insensitive_fg_color; } @@ -772,6 +775,8 @@ spinbutton { > entry + button:not(:active):hover { box-shadow: none; } > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry:drop(active) + button { border-left-color: $drop_target_color; } } &.vertical { button, entry { @@ -785,6 +790,8 @@ spinbutton { button.up { border-radius: 3px 3px 0 0; } > entry:focus + button { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); } + + > entry:drop(active) + button { border-top-color: $drop_target_color; } } } @@ -2936,7 +2943,6 @@ stackswitcher button { // *:drop(active):focus, *:drop(active) { - border-color: $drop_target_color; box-shadow: inset 0 0 0 1px $drop_target_color; } -- cgit v1.2.3 From c796620e8ab8744e9ce08eccc796b1e9a1c9d97f Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 15:07:19 +0100 Subject: fixes --- common/gtk-3.0/3.20/sass/_common.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 4e406d7..ac425ad 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -1368,7 +1368,8 @@ headerbar { label:first-child { padding-left: 10px; } } - &.slider-button { + &.slider-button, + &:not(.image-button):not(.text-button) { padding-left: 1px; padding-right: 1px; } @@ -2609,12 +2610,13 @@ placessidebar { &.sidebar-new-bookmark-row { color: $selected_bg_color; } &:drop(active):not(:disabled) { - color: $drop_target_color; + &, label, image { color: $drop_target_color; } + box-shadow: inset 0 1px $drop_target_color, inset 0 -1px $drop_target_color; &:selected { - color: $selected_fg_color; + &, label, image { color: $selected_fg_color; } background-color: $drop_target_color; } } -- cgit v1.2.3 From 8eaefcf4d9c3725c32a4123bf5764a4995b2cd5d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 21:46:35 +0100 Subject: more fixes --- common/gtk-3.0/3.20/sass/_common.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index ac425ad..98d8bf5 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -695,7 +695,7 @@ modelbutton.flat { @extend %undecorated_button; &:hover { background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%)); } - &:active, &:selected { @extend %selected_items; } + &:active, &:selected { &, arrow { @extend %selected_items; } } &:checked { color: $fg_color; } // FIXME: temporary workaround @@ -707,8 +707,6 @@ modelbutton.flat { } modelbutton.flat arrow { - & { background: none; } - &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); } &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); } } @@ -1444,18 +1442,18 @@ treeview.view { &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); } } - &.progressbar { // progress bar in treeviews + &.progressbar, &.progressbar:focus { // progress bar in treeviews color: $selected_fg_color; border-radius: 3px; background-image: linear-gradient(to bottom, $selected_bg_color); - &:selected { + &:selected, &:selected:focus { color: $selected_bg_color; box-shadow: none; background-image: linear-gradient(to bottom, $selected_fg_color); } } - &.trough, &.trough:selected { // progress bar trough in treeviews + &.trough, &.trough:selected, &.trough:selected:focus { // progress bar trough in treeviews color: $fg_color; background-image: linear-gradient(to bottom, $button_border); border-radius: 3px; -- cgit v1.2.3 From 66c0cc14d61a5af2cca59af533cd8b08733a75a4 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 22:58:42 +0100 Subject: fix attached osd toolbars --- common/gtk-3.0/3.20/sass/_common.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 98d8bf5..21327e5 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -858,6 +858,11 @@ toolbar { &.right, &.top, &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars + + &.top { border-width: 0 0 1px 0; } + &.bottom { border-width: 1px 0 0 0; } + &.left { border-width: 0 1px 0 0; } + &.right { border-width: 0 0 0 1px; } } &:not(.inline-toolbar):not(.osd) { -- cgit v1.2.3 From 2de83c04f6e519abff9e889f59ee9b3411382d16 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 23:41:38 +0100 Subject: more osd fixes --- common/gtk-3.0/3.20/sass/_common.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'common/gtk-3.0/3.20/sass/_common.scss') diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss index 21327e5..23c9e14 100644 --- a/common/gtk-3.0/3.20/sass/_common.scss +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -261,6 +261,13 @@ entry { @include entry(osd); &:focus { @include entry(osd-focus); } &:disabled { @include entry(osd-insensitive); } + + selection { + &:focus, & { + color: $selected_bg_color; + background-color: $selected_fg_color; + } + } } progress { @@ -775,6 +782,17 @@ spinbutton { > entry:focus + button { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); } > entry:drop(active) + button { border-left-color: $drop_target_color; } + + .osd & { + > button:hover:not(:active), + > button:hover + button { box-shadow: inset 1px 0 $osd_button_border; } + + > button:first-child:hover:not(:active), + > button.up:dir(rtl):hover:not(:active), + > entry + button:not(:active):hover { box-shadow: none; } + + > entry:focus + button { border-left-color: $osd_button_border; } + } } &.vertical { button, entry { @@ -1977,6 +1995,7 @@ switch { url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); } + .osd, %osd_check_radio { #{$w}#{$s} { -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-dark.png"), -- cgit v1.2.3