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/_applications.scss | 782 +++++ common/gtk-3.0/3.20/sass/_colors-public.scss | 66 + common/gtk-3.0/3.20/sass/_colors.scss | 94 + common/gtk-3.0/3.20/sass/_common.scss | 3129 ++++++++++++++++++++ common/gtk-3.0/3.20/sass/_drawing.scss | 384 +++ common/gtk-3.0/3.20/sass/_granite.scss | 218 ++ common/gtk-3.0/3.20/sass/_lightdm.scss | 110 + common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 276 ++ common/gtk-3.0/3.20/sass/_unity.scss | 59 + common/gtk-3.0/3.20/sass/gtk-dark.scss | 13 + common/gtk-3.0/3.20/sass/gtk-darker.scss | 13 + common/gtk-3.0/3.20/sass/gtk-solid-dark.scss | 13 + common/gtk-3.0/3.20/sass/gtk-solid-darker.scss | 13 + common/gtk-3.0/3.20/sass/gtk-solid.scss | 13 + common/gtk-3.0/3.20/sass/gtk.scss | 13 + 15 files changed, 5196 insertions(+) create mode 100644 common/gtk-3.0/3.20/sass/_applications.scss create mode 100644 common/gtk-3.0/3.20/sass/_colors-public.scss create mode 100644 common/gtk-3.0/3.20/sass/_colors.scss create mode 100644 common/gtk-3.0/3.20/sass/_common.scss create mode 100644 common/gtk-3.0/3.20/sass/_drawing.scss create mode 100644 common/gtk-3.0/3.20/sass/_granite.scss create mode 100644 common/gtk-3.0/3.20/sass/_lightdm.scss create mode 100644 common/gtk-3.0/3.20/sass/_transparent_widgets.scss create mode 100644 common/gtk-3.0/3.20/sass/_unity.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk-dark.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk-darker.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk-solid-dark.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk-solid-darker.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk-solid.scss create mode 100644 common/gtk-3.0/3.20/sass/gtk.scss (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss new file mode 100644 index 0000000..9d31307 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -0,0 +1,782 @@ +// +// Tab overrides +// +GeditNotebook.notebook, +ScratchMainWindow .notebook, +EphyNotebook.notebook, +MidoriNotebook .notebook, +TerminalWindow .notebook, +PantheonTerminalPantheonTerminalWindow .notebook { + + header.top tab { + &:active { + box-shadow: inset 0 1px $borders_color, + inset 0 -1px $borders_color, + inset 1px 0 $borders_color, + inset -1px 0 $borders_color; + } + } +} + +TerminalWindow .notebook, +PantheonTerminalPantheonTerminalWindow .notebook { + + &.header.top { + box-shadow: inset 0 1px opacify($header_border, 1), + inset 0 -1px $borders_color; + + tab { + padding-top: 7px; + border-top-width: 3px; + } + } +} + +// +// Evolution +// +// needed for webkit/GtkStyle/Evolution compatibility +GtkHTML { + background-color: $base_color; + color: $text_color; + + &:active { + color: $selected_fg_color; + background-color: $selected_bg_color; + } +} + +// +// Sushi +// +// used by gnome-font-viewer and sushi +SushiFontWidget { + padding: 6px 12px; +} + +// +// GNOME Terminal +// +TerminalWindow { + .background { + background-color: transparent; + } + + scrollbar { + &.vertical slider { margin-left: 3px; } + + trough { border-width: 0; } + } + + .notebook { + tab button { + color: mix($bg_color, $fg_color, 35%); + + &:hover { + color: $fg_color; + border-color: $button_border; + background-color: $button_bg; + } + } + tab:active, tab:hover { + button { + @extend %undecorated_button; + &:hover { color: lighten(red, 15%); @extend %undecorated_button;} + &:active { color: $selected_bg_color; @extend %undecorated_button;} + } + } + } +} + +// +// Nautilus +// +.nautilus-canvas-item { + border-radius: 2px; +} + +.nautilus-desktop.nautilus-canvas-item { + color: $selected_fg_color; + text-shadow: 1px 1px transparentize(black, 0.4); + + &:active { color: $fg_color; } + &:selected { color: $selected_fg_color; } +} + +.nautilus-canvas-item.dim-label, +.nautilus-list-dim-label { + color: mix($fg_color, $bg_color, 50%); + + &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } +} + +NautilusQueryEditor searchbar { + padding: 5px; + box-shadow: none; + background-color: $base_color; +} + +button.nautilus-circular-button.image-button { + border-radius: 50%; + -gtk-outline-radius: 50%; + padding: 8px; +} + +$disk_space_unknown: transparentize($fg_color, 0.5); +$disk_space_used: transparentize($selected_bg_color, 0.2); +$disk_space_free: darken($bg_color, 3%); + +.disk-space-display { + border-style: solid; + border-width: 1px; + + &.unknown { + background-color: $disk_space_unknown; + border-color: darken($disk_space_unknown, 10%); + } + &.used { + background-color: $disk_space_used; + border-color: darken($disk_space_used, 10%); + } + &.free { + background-color: $disk_space_free; + border-color: darken($disk_space_free, 10%); + } +} + +// View +NautilusListView .view { border-bottom: 1px solid $borders_color; } + +// +// Nemo +// +.nemo-desktop.nemo-canvas-item { @extend .nautilus-desktop.nautilus-canvas-item; } + +NemoWindow { + + EelEditableLabel { transition: none; } // Workaround for invisible text in rename entry + + .sidebar .frame { border-width: 0; } + + separator.horizontal { color: $borders_color; } + + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.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); } + } + + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button, + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:hover, + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:active, + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:checked, + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:disabled { + @extend %linked; + @extend %linked_button; + } + + .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) { + + $_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; } + } + } +} + +// +// Gedit +// +.gedit-headerbar-paned { color: $header_border; } + +.open-document-selector-treeview.view { + padding: 3px 6px 3px 6px; + border-color: $base_color; // disable borders, making them transparent doesn't work for some reason + + &:hover { + background-color: transparentize(black, 0.95); + + &:selected { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + } +} + +.open-document-selector-name-label { + color: $fg_color; +} + +.open-document-selector-path-label { + color: mix($fg_color, $base_color, 50%); + font-size: smaller; + + &:selected { color: transparentize($selected_fg_color, 0.1); } +} + +.gedit-document-panel { + + row button { + color: transparent; + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; + padding: 4px; + & image { color: inherit; } + } + .prelight-row button { + color: mix($bg_color, $fg_color, 35%); + } + row button:hover, + .prelight-row button:hover { + color: lighten(red, 15%); + } + .prelight-row:selected button:hover { + color: lighten(red, 20%); + background-image: none; + background-color: transparent; + border: none; + box-shadow: none; + &:active { color: $selected_fg_color; } + } + .prelight-row button:active { + color: $fg_color; + } +} + +.gedit-document-panel-dragged-row { + border: 1px solid $borders_color; + background-color: darken($bg_color, 10%); + color: $fg_color; +} + +//.gedit-document-panel-placeholder-row { +//} + +GeditStatusbar { + border-top: 1px solid $borders_color; + background-color: $bg_color; +} + +GeditStatusMenuButton.button.flat, +GeditStatusMenuButton:hover.button.flat, +GeditStatusMenuButton:checked.button.flat { + border-bottom-style: none; + border-radius: 0; +} + + +GeditViewFrame .gedit-search-slider { @extend %search_slider } + +GeditFileBrowserWidget toolbar { + border-bottom: 1px solid $borders_color; +} + +.gedit-search-entry-occurrences-tag { + color: transparentize($fg_color, 0.4); + border: none; + margin: 2px; + padding: 2px; +} + +%search_slider { + background-color: lighten($bg_color, 2%); + padding: 6px; + border-color: $borders_color; + border-radius: 0 0 2px 2px; + border-width: 0 1px 1px 1px; + border-style: solid; +} + +// +// Gnome Builder +// +GbWorkbench .floating-bar { color: $fg_color; } + +GbSearchBox.linked:not(.vertical) { + + > button.popup:last-child:dir(ltr), + > button.popup:first-child:dir(rtl) { + padding: 0 10px; + + @include entry(header-normal); + + &:hover { @include entry(header-focus); } + &:active, &:checked { @include entry(header-focus); } + &:disabled { @include entry(header-insensitive); } + } + + > button.popup:last-child:dir(ltr), + > button.popup:last-child:dir(ltr):hover, + > button.popup:last-child:dir(ltr):active, + > button.popup:last-child:dir(ltr):checked { + border-left-style: none; + border-radius: 0 3px 3px 0; + -gtk-outline-radius: 0 1px 1px 0; + } + + > button.popup:last-child:dir(rtl), + > button.popup:last-child:dir(rtl):hover, + > button.popup:last-child:dir(rtl):active, + > button.popup:last-child:dir(rtl):checked { + border-right-style: none; + border-radius: 3px 0 0 3px; + -gtk-outline-radius: 1px 0 0 1px; + } +} + +// Preference page language style +GbPreferencesPageLanguage { + entry { border-radius: 3px 3px 0 0; } + .frame { border-top-width: 0 } +} + +// Editor tweak widget +GbEditorTweakWidget { + .linked.vertical > entry { border-bottom-style: solid; } + scrolledwindow { border-top: none; } +} + +// View stack styling +GbViewStack box.header.notebook { + border-bottom: 1px solid $borders_color; +} + +GbViewStack.focused box.header.notebook, +#project_sidebar_header.focused { + background-color: $base_color; +} + +GbEditorWorkspace > paned > box > box.header.notebook { + border-bottom: 1px solid $borders_color; +} + +GbNewProjectDialog button.file.linked-on-right button { + border-radius: 3px 0 0 3px; +} + +// Workspace pane header styling +GbWorkspacePane box.header.notebook { + border-bottom: 1px solid $borders_color; +} + +GbWorkspacePane:not(.focused) box.header.notebook { + background-color: $bg_color; +} + +// Adjust devehlp and symbol panel styling +DhSidebar entry.search, +SymbolTree entry.search { + border-left: none; + border-right: none; + border-top: none; + border-radius: 0px; +} + +// Command Bar styling +entry.gb-command-bar-entry.flat, +entry.gb-command-bar-entry.flat:focus { + font-family: Monospace; + color: $osd_fg_color; + background-image: none; + background-color: opacify($osd_bg_color, 1); + padding: 6px 6px 6px 6px; + border: none; + + &:selected, + &:selected:focus { + @extend %selected_items; + } +} + +GbTerminalView { + background-color: $base_color; + color: $fg_color; +} + +GbSourceStyleSchemeWidget GtkSourceView { + font-family: Monospace; +} + +scrolledwindow.gb-linked-scroller { + border-top: none; +} + +// Disable various animatinos that are enabled by default and really annoying +// to the overall flow of Builder. +GbSearchDisplayGroup list row +GbDocumentStack button { + transition: none; +} + +GbViewStack box.header.notebook, +GbEditorWorkspace > paned > box > box.header.notebook { + border-bottom: 1px solid $borders_color; +} + +GbViewStack.focused box.header.notebook { + background-color: $base_color; + + button.dim-label { opacity: 1; } +} + +// +// Epiphany +// +EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so reset it + color: $fg_color; +} + +// +// Gnome Documents +// +button.documents-load-more { + border-width: 1px 0 0; + border-radius: 0; +} + +.documents-icon-bg { + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 2px; +} + +.documents-collection-icon { + background-color: transparentize($fg_color, 0.7); + border-radius: 2px; +} + +button.documents-favorite:active, +button.documents-favorite:active:hover { + color: lighten($selected_bg_color, 20%); +} + +.documents-entry-tag { + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 2px; + border-width: 0; + margin: 2px; + padding: 4px; + + &:hover { + color: $selected_fg_color; + background-color: lighten($selected_bg_color, 4%); + } + &:active { + color: $selected_fg_color; + background-color: darken($selected_bg_color, 4%); + } + + toolbar .linked & button { + background: none; + border: none; + box-shadow: none; + -gtk-icon-shadow: none; + + &:hover { color: transparentize($selected_fg_color, 0.3) } + } +} + +.content-view.document-page { + border-style: solid; + border-width: 3px 3px 6px 4px; + border-image: url("assets/thumbnail-frame.png") 3 3 6 4; +} + +// +// Totem +// +TotemGrilo.vertical GdMainView.frame { + border-width: 0; +} + +// +// Synapse +// +SynapseGuiSelectionContainer *:selected, +SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } + +// +// Transmission +// +.tr-workarea undershoot, +.tr-workarea overshoot { + border-color: transparent; // Remove black border on over- and undershoot +} + +// +// Fallback Mode/Budgie Panel +// +.gnome-panel-menu-bar, +PanelApplet > menubar, +PanelToplevel, +PanelWidget, +PanelAppletFrame, +PanelApplet { + color: $panel_fg; + background-image: linear-gradient(to bottom, $panel_bg); +} + +PanelApplet button, PanelApplet button:backdrop { + padding: 4px; + border: 2px solid transparent; + border-radius: 0; + background-image: none; + background-color: transparent; + color: $panel_fg; +} + +PanelApplet button:hover { + color: lighten($panel_fg, 10%); + background-color: transparentize(black, 0.83); + border-color: transparentize(black, 0.83); +} + +PanelApplet button:active, PanelApplet button:active:backdrop, +PanelApplet button:checked, PanelApplet button:checked:backdrop { + background-clip: padding-box; + color: $selected_fg_color; + background-color: transparentize(black, 0.75); + border-radius: 0; + border-color: transparentize(black, 0.75); + box-shadow: inset 0 -2px $selected_bg_color; +} + +PanelApplet:hover { + color: $selected_fg_color; +} + +PanelApplet:active, +PanelApplet:hover:active { + color: $selected_bg_color; +} + +WnckPager { + color: mix($panel_fg, black, 50%); + &:selected { color: $selected_bg_color } +} + +NaTrayApplet { + -NaTrayApplet-icon-padding: 12; + -NaTrayApplet-icon-size: 16; +} + +ClockBox { + color: $panel_fg; +} + +// Xfce Panel +.xfce4-panel.panel { + background-color: $panel_bg; + + button.flat { + color: $panel_fg; + background-color: transparentize($panel_bg, 1); + border-radius: 0; + + &:hover { + border: none; + background-color: lighten($panel_bg, 10%); + } + &:active, &:checked { + color: $selected_bg_color; + border: none; + background-color: darken($panel_bg, 7%); + } + } +} + +// +// Floating Bar +// +.floating-bar { + background-color: $selected_bg_color; + color: $selected_fg_color; + + &.top { border-radius: 0 0 2px 2px; } + &.right { border-radius: 2px 0 0 2px; } + &.bottom { border-radius: 2px 2px 0 0; } + &.left { border-radius: 0 2px 2px 0; } + + button { + background-color: transparent; + box-shadow: none; + border: none; + } +} + +// Elementary Apps + +// +// Birdie +// +BirdieWidgetsTweetList * { + background-image: none; + background-color: transparent; +} + +// +// Marlin / Pantheon Files +// +MarlinViewWindow { + + *:selected, *:selected:focus { + color: $selected_fg_color; + background-color: $selected_bg_color; + outline-color: transparent; + } + GtkIconView.view:selected { + &, &:focus, &:hover, &:focus:hover { background-color: transparent; } + } + FMListView, FMColumnView { outline-color: transparent; } +} + +.marlin-pathbar.pathbar { + border-radius: 3px; + padding-left: 4px; + padding-right: 4px; + + @include entry(header-normal); + + &:focus { @include entry(header-focus) } + + &:disabled { @include entry(header-insensitive) } + + &:active, &:checked { + color: $selected_bg_color; + } +} + +// +// Gala +// +.gala-notification { + border: 1px solid rgba(0, 0, 0, 0.35); + border-radius: 3px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-image: linear-gradient(to bottom, white); + background-color: transparent; + + .title, .label { + color: #5c616c; + } +} + +// +// Wingpanel +// +.panel { + background-color: transparent; + color: white; + font-weight: bold; + text-shadow: 0 1px 2px transparentize(black, 0.4); + -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.4); + + &-shadow { + background-image: none; + background-color: transparent; + } + .menu { + box-shadow: none; + + .menuitem { + font-weight: normal; + text-shadow: none; + -gtk-icon-shadow: none; + } + + .window-frame.menu.csd, + .window-frame.popup.csd { + box-shadow: 0 0 0 1px transparentize(black, 0.8), + 0 10px 20px transparentize(black, 0.81), + 0 6px 6px transparentize(black, 0.77); + } + } + .menubar > .menuitem { + padding: 3px 6px; + &:hover { background-color: transparent; } + } + .window-frame.menu.csd, + .window-frame.popup.csd { box-shadow: none; } +} + +.composited-indicator { + background-color: transparent; + color: white; + text-shadow: 0 1px 2px transparentize(black, 0.4); + -gtk-icon-shadow: 0 1px 2px transparentize(black, 0.4); + + > GtkWidget > GtkWidget:first-child { padding: 0 2px; } + + .menuitem:active, .menuitem:hover { + border-style: none; + background-image: none; + box-shadow: none; + } + > .popup > .menu { + padding-top: 8px; + padding-bottom: 8px; + } +} + +.panel-app-button > GtkWidget > GtkWidget:first-child { + padding: 0 2px 0 4px; +} + +.panel .menu .spinner, +.menu .spinner { opacity: 1 } // Fixes sound indicator buttons + +// +// Wingpanel Popover +// +WingpanelWidgetsIndicatorPopover.popover { + padding: 0; + + text-shadow: none; + -gtk-icon-shadow: none; + + menuitem { + padding: 5px; + outline-color: transparent; + text-shadow: none; + -gtk-icon-shadow: none; + border: solid transparent; + border-width: 1px 0; + + label, image { padding: 0 3px; } + + &:hover, &:active { + 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; + } + *:disabled { color: $insensitive_fg_color; } + } +} + +// +// Pantheon Terminal +// +PantheonTerminalPantheonTerminalWindow.background { + background-color: transparent; +} + +// +// Switchboard +// +SwitchboardCategoryView .view:selected, +SwitchboardCategoryView .view:selected:focus { + color: $fg_color; +} diff --git a/common/gtk-3.0/3.20/sass/_colors-public.scss b/common/gtk-3.0/3.20/sass/_colors-public.scss new file mode 100644 index 0000000..8807853 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_colors-public.scss @@ -0,0 +1,66 @@ +//apps rely on some named colors to be exported + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using "" + $var +@define-color theme_fg_color #{"" + $fg_color}; +@define-color theme_text_color #{"" + $text_color}; +@define-color theme_bg_color #{"" + $bg_color}; +@define-color theme_base_color #{"" + $base_color}; +@define-color theme_selected_bg_color #{"" + $selected_bg_color}; +@define-color theme_selected_fg_color #{"" + $selected_fg_color}; +@define-color fg_color #{"" + $fg_color}; +@define-color text_color #{"" + $text_color}; +@define-color bg_color #{"" + $bg_color}; +@define-color base_color #{"" + $base_color}; +@define-color selected_bg_color #{"" + $selected_bg_color}; +@define-color selected_fg_color #{"" + $selected_fg_color}; +@define-color insensitive_bg_color #{"" + $insensitive_bg_color}; +@define-color insensitive_fg_color gtkalpha(#{"" + opacify($insensitive_fg_color, 1)}, 0.5); +@define-color insensitive_base_color #{"" + $base_color}; +@define-color theme_unfocused_fg_color #{"" + $fg_color}; +@define-color theme_unfocused_text_color #{"" + $text_color}; +@define-color theme_unfocused_bg_color #{"" + $bg_color}; +@define-color theme_unfocused_base_color #{"" + $base_color}; +@define-color borders #{"" + $borders_color}; +@define-color unfocused_borders #{"" + $borders_color}; + +@define-color warning_color #{"" + $warning_color}; +@define-color error_color #{"" + $error_color}; +@define-color success_color #{"" + $success_color}; +@define-color placeholder_text_color #A8A8A8; + +@define-color content_view_bg #{"" + $base_color}; + +//WM +$wm_highlight: lighten(opacify($header_bg, 1), 3%); +$wm_bg_unfocused: opacify($header_bg_backdrop, 1); + +@define-color wm_title gtkalpha(#{"" + opacify($header_fg, 1)}, 0.8); +@define-color wm_unfocused_title gtkalpha(#{"" + opacify($header_fg, 1)}, 0.5); + +@define-color wm_bg #{"" + opacify($header_bg, 1)}; +@define-color wm_bg_unfocused #{"" + $wm_bg_unfocused}; + +@define-color wm_highlight #{"" + $wm_highlight}; +@define-color wm_shadow gtkalpha(#{black}, 0.35); + +//WM Buttons + +// Close +@define-color wm_button_close_bg #{"" + $wm_button_close_bg}; +@define-color wm_button_close_hover_bg #{"" + $wm_button_close_hover_bg}; +@define-color wm_button_close_active_bg #{"" + $wm_button_close_active_bg}; + +@define-color wm_icon_close_bg #{"" + $wm_icon_close_bg}; + +// Minimize, Maximize +@define-color wm_button_hover_bg #{"" + $wm_button_hover_bg}; +@define-color wm_button_active_bg #{"" + $wm_button_active_bg}; + +@define-color wm_button_hover_border #{"" + $wm_button_hover_border}; + +@define-color wm_icon_bg #{"" + $wm_icon_bg}; +@define-color wm_icon_unfocused_bg #{"" + $wm_icon_unfocused_bg}; +@define-color wm_icon_hover_bg #{"" + $wm_icon_hover_bg}; +@define-color wm_icon_active_bg #{"" + $wm_icon_active_bg}; + diff --git a/common/gtk-3.0/3.20/sass/_colors.scss b/common/gtk-3.0/3.20/sass/_colors.scss new file mode 100644 index 0000000..47daa0f --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_colors.scss @@ -0,0 +1,94 @@ +// When color definition differs for dark and light variant, +// it gets @if ed depending on $variant + + +$base_color: if($variant =='light', #ffffff, #404552); +$text_color: if($variant == 'light', #5c616c, #D3DAE3); +$bg_color: if($variant =='light', #F5F6F7, #383C4A); +$fg_color: if($variant =='light', #5c616c, #D3DAE3); + +$selected_fg_color: #ffffff; +$selected_bg_color: #5294E2; +$selected_borders_color: darken($selected_bg_color, 20%); +$borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); + +$link_color: if($variant == 'light', darken($selected_bg_color,10%), + lighten($selected_bg_color,20%)); +$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), + lighten($selected_bg_color,10%)); + +$selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); +$warning_color: #F27835; +$error_color: #FC4138; +$success_color: #73d216; +$destructive_color: #F04A50; +$suggested_color: #4DADD4; + +//insensitive state derived colors +$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); +$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); + +$header_bg: red; +@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } +@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } +@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } +@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } + +$header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); + +$header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); + +$header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); +$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); + +$dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); +$dark_sidebar_fg: #BAC3CF; +$dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); + +$osd_fg_color: $dark_sidebar_fg; +$osd_bg_color: $dark_sidebar_bg; + +$osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_button_border: transparentize(darken($osd_bg_color, 12%), 0.6); + +$osd_entry_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); +$osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); + +$osd_insensitive_bg_color: darken($osd_bg_color, 3%); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); +$osd_borders_color: transparentize(black, 0.3); + +$panel_bg: darken($dark_sidebar_bg, 4.7%); +$panel_fg: $dark_sidebar_fg; + +$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); +$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); + +$header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); +$header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); + +$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); +$button_border: $entry_border; + +$header_button_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($button_bg, 0.1)); +$header_button_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); + +//WM Buttons + +// Close +$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); +$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); +$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); + +$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); + +// Minimize, Maximize +$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); +$wm_button_active_bg: $selected_bg_color; + +$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); + +$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); +$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); +$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); +$wm_icon_active_bg: $selected_fg_color; diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss 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); +} diff --git a/common/gtk-3.0/3.20/sass/_drawing.scss b/common/gtk-3.0/3.20/sass/_drawing.scss new file mode 100644 index 0000000..bc4a8e2 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_drawing.scss @@ -0,0 +1,384 @@ +// Drawing mixins + +// generic drawing of more complex things + +@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { +// +// Helper function to stack up to 4 box-shadows; +// + + @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } + @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } + @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } + @else { box-shadow: $shadow1; } +} + +// Entries + +@mixin entry($t) { +// +// Entries drawing function +// +// $t: entry type +// + + @if $t==normal { + // + // normal entry + // + color: $text_color; + caret-color: $text_color; + border-color: $entry_border; + background-color: $entry_bg; + background-image: linear-gradient(to bottom, $entry_bg); + } + + @if $t==focus { + // + // focused entry + // + color: $text_color; + caret-color: $text_color; + border-color: if($variant=='light', $selected_bg_color, $button_border); + background-color: $entry_bg; + background-image: linear-gradient(to bottom, $entry_bg); + + @if $variant == 'dark' { + box-shadow: inset 1px 0 $selected_bg_color, + inset -1px 0 $selected_bg_color, + inset 0 1px $selected_bg_color, + inset 0 -1px $selected_bg_color; + } + } + + @if $t==insensitive { + // + // insensitive entry + // + color: $insensitive_fg_color; + border-color: transparentize($entry_border, 0.45); + background-color: transparentize($entry_bg, 0.45); + background-image: linear-gradient(to bottom, transparentize($entry_bg, 0.45)); + } + + @if $t==header-normal { + // + // normal header-bar entry + // + + color: $header_fg; + caret-color: $header_fg; + border-color: $header_entry_border; + background-image: linear-gradient(to bottom, $header_entry_bg); + background-color: transparent; + + image, image:hover { color: inherit; } + } + + @if $t==header-focus { + // + // focused header-bar entry + // + color: $selected_fg_color; + caret-color: $selected_fg_color; + border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); + background-image: linear-gradient(to bottom, $selected_bg_color); + } + + @if $t==header-insensitive { + // + // insensitive header-bar entry + // + color: transparentize($header_fg, 0.45); + background-image: linear-gradient(to bottom, transparentize($header_entry_bg, 0.15)); + } + + @else if $t==osd { + // + // normal osd entry + // + color: $osd_fg_color; + border-color: $osd_entry_border; + background-image: linear-gradient(to bottom, $osd_entry_bg); + background-color: transparent; + + image, image:hover { color: inherit; } + } + + @else if $t==osd-focus { + // + // active osd entry + // + color: $selected_fg_color; + border-color: $osd_entry_border; + background-image: linear-gradient(to bottom, $selected_bg_color); + } + + @else if $t==osd-insensitive { + // + // insensitive osd entry + // + color: transparentize($osd_fg_color, 0.45); + background-image: linear-gradient(to bottom, transparentize($osd_entry_bg, 0.15)); + } +} + +// Buttons + +@mixin button($t, $actionb_color:red) { +// +// Button drawing function +// +// $t: button type, +// $actionb_color: used for destructive and suggested action buttons + + @if $t==normal { + // + // normal button + // + color: $fg_color; + outline-color: transparentize($fg_color, 0.7); + border-color: $button_border; + background-color: $button_bg; + } + + @else if $t==hover { + // + // hovered button + // + color: $fg_color; + outline-color: transparentize($fg_color, 0.7); + border-color: $button_border; + background-color: lighten($button_bg, 5%); + } + + @else if $t==active { + // + // pushed button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + + border-color: if($variant=='light', $selected_bg_color, $button_border); + background-color: $selected_bg_color; + } + + @else if $t==insensitive { + // + // insensitive button + // + color: $insensitive_fg_color; + border-color: transparentize($button_border, 0.45); + background-color: transparentize($button_bg, 0.45); + + > label { color: inherit; } + } + + @else if $t==insensitive-active { + // + // insensitive pushed button + // + color: transparentize($selected_fg_color, 0.2); + border-color: transparentize($selected_bg_color, 0.25); + background-color: transparentize($selected_bg_color, 0.25); + + opacity: 0.6; + + > label { color: inherit; } + } + + @if $t==header-normal { + // + // normal header-bar button + // + color: $header_fg; + outline-color: transparentize($header_fg, 0.7); + outline-offset: -3px; + background-color: transparentize($header_bg, 1); + border-color: transparentize($header_bg, 1); + } + + @else if $t==header-hover { + // + // hovered header-bar button + // + color: $header_fg; + outline-color: transparentize($header_fg, 0.7); + border-color: $header_button_border; + background-color: $header_button_bg; + } + + @else if $t==header-active { + // + // pushed header-bar button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); + background-color: $selected_bg_color; + } + + @else if $t==header-insensitive { + // + // insensitive header-bar button + // + color: transparentize($header_fg, 0.45); + background-color: transparentize($header_bg, 1); + border-color: transparentize($header_bg, 1); + + > label { color: inherit; } + } + + @else if $t==header-insensitive-active { + // + // header-bar insensitive pushed button + // + color: transparentize($selected_fg_color, 0.25); + border-color: transparentize($selected_bg_color, 0.35); + background-color: transparentize($selected_bg_color, 0.35); + } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + outline-color: transparentize($osd_fg_color, 0.7); + border-color: $osd_button_border; + background-color: $osd_button_bg; + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $osd_fg_color; + outline-color: transparentize($osd_fg_color, 0.7); + border-color: $osd_button_border; + background-color: opacify(lighten($osd_button_bg, 7%), 0.1); + } + + @else if $t==osd-active { + // + // active osd button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + border-color: $osd_button_border; + background-color: $selected_bg_color; + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border-color: $osd_button_border; + background-color: transparentize($osd_button_bg, 0.15); + } + + @else if $t==suggested_destructive { + // + // suggested or destructive action buttons + // + background-clip: border-box; + + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + background-color: $actionb_color; + border-color: $actionb_color; + } + + @else if $t==undecorated { + // + // reset + // + border-color: transparent; + background-color: transparent; + background-image: none; + } +} + +// +// Overshoot +// +@mixin overshoot($p, $c:$selected_bg_color) { +// $p: position +// $c: base color +// +// possible $p values: +// top, bottom, right, left +// + + $_big_gradient_length: 60%; + + $_position: center top; + $_big_gradient_size: 100% $_big_gradient_length; + + @if $p==bottom { + $_position: center bottom; + } + + @else if $p==right { + $_position: right center; + $_big_gradient_size: $_big_gradient_length 100%; + } + + @else if $p==left { + $_position: left center; + $_big_gradient_size: $_big_gradient_length 100%; + } + + background-image: -gtk-gradient(radial, + $_position, 0, + $_position, 0.6, + from(transparentize($c, 0.8)), + to(transparentize($c, 1))); + + background-size: $_big_gradient_size; + background-repeat: no-repeat; + background-position: $_position; + + background-color: transparent; // reset some properties to be sure to not inherit them somehow + border: none; // + box-shadow: none; // +} + +// +// Undershoot +// +@mixin undershoot($p) { +// $p: position +// +// possible $p values: +// top, bottom, right, left +// + + $_undershoot_color_dark: transparentize(black, 0.8); + $_undershoot_color_light: transparentize(white, 0.8); + + $_gradient_dir: left; + $_dash_bg_size: 10px 1px; + $_gradient_repeat: repeat-x; + $_bg_pos: center $p; + + background-color: transparent; // shouldn't be needed, but better to be sure; + + @if ($p == left) or ($p == right) { + $_gradient_dir: top; + $_dash_bg_size: 1px 10px; + $_gradient_repeat: repeat-y; + $_bg_pos: $p center; + } + + background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%); + + padding-#{$p}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; + border: none; +} diff --git a/common/gtk-3.0/3.20/sass/_granite.scss b/common/gtk-3.0/3.20/sass/_granite.scss new file mode 100644 index 0000000..a491d31 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_granite.scss @@ -0,0 +1,218 @@ +// Granite Widgets + +// +// Overlay Bar +// +.overlay-bar { + background-color: $selected_bg_color; + border-color: $selected_bg_color; + border-radius: 2px; + padding: 3px 6px; + margin: 3px; + + label { color: $selected_fg_color; } +} + +// +// Thin Pane Separator +// +GraniteWidgetsThinPaned { + background-color: transparent; + background-image: none; + margin: 0; + border-left: 1px solid $borders_color; + border-right: 1px solid $borders_color; + +} + +// avoid borders when a viewport is +// packed into a Static Notebook, or Popover +GraniteWidgetsPopOver .frame, +GraniteWidgetsStaticNotebook .frame { + border: none; +} + +// +// Help Button +// +.help_button { + border-radius: 100px; + padding: 3px 9px; +} + +// +// Secondary Toolbars +// +toolbar.secondary-toolbar { + padding: 3px; + border-bottom: 1px solid $borders_color; + + button { padding: 0 3px 0 3px; } +} + +// +// Bottom Toolbars +// +toolbar.bottom-toolbar { + padding: 5px; + border-width: 1px 0 0 0; + border-style: solid; + border-color: $borders_color; + background-color: $bg_color; + + button { padding: 2px 3px 2px 3px; } +} + +// +// Sidebar & Source List +// +.source-list { + -GtkTreeView-horizontal-separator: 1px; + -GtkTreeView-vertical-separator: 6px; +} + +.source-list, +.source-list.view { + background-color: $bg_color; + color: $fg_color; + -gtk-icon-style: regular; +} + +.source-list.category-expander { + color: transparent; +} + +.source-list.view:hover { + background-color: lighten($bg_color, 5%); +} + +.source-list.view:selected, +.source-list.view:hover:selected, +.source-list.view:selected:focus, +.source-list.category-expander:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; +} + +.source-list scrollbar, +.source-list junction { + border-image: none; + border-color: transparent; + background-color: $bg_color; + background-image: none; +} + +.source-list.badge, +.source-list.badge:hover, +.source-list.badge:selected, +.source-list.badge:selected:focus, +.source-list.badge:hover:selected { + background-image: none; + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 10px; + padding: 0 6px; + margin: 0 3px; + border-width: 0; +} + +.source-list.badge:selected, +.source-list.badge:selected:focus, +.source-list.badge:hover:selected { + background-color: $selected_fg_color; + color: $selected_bg_color; +} + +// +// Expander +// +.source-list.category-expander { + color: $fg_color; + -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); + -GtkTreeView-expander-size: 16; +} + +.source-list.category-expander, +.source-list.category-expander:backdrop { + color: transparent; + border: none; +} + +.source-list.category-expander:checked { + -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); +} + +// +// Welcome +// +GraniteWidgetsWelcome { + background-color: $base_color; +} + +GraniteWidgetsWelcome label { + color: mix($fg_color, $bg_color, 50%); + font: open sans 11; + text-shadow: none; +} + +GraniteWidgetsWelcome .h1, +GraniteWidgetsWelcome .h3 { + color: transparentize($fg_color, 0.2); +} + +// +// Help Button +// +.help_button { + border-radius: 0; +} + +// +// Popover +// +GraniteWidgetsPopOver { + -GraniteWidgetsPopOver-arrow-width: 21; + -GraniteWidgetsPopOver-arrow-height: 10; + -GraniteWidgetsPopOver-border-radius: 2px; + -GraniteWidgetsPopOver-border-width: 1; + -GraniteWidgetsPopOver-shadow-size: 12; + + border: 1px solid transparentize(black, 0.7); + margin: 0; +} + +.popover_bg { + background-image: linear-gradient(to bottom, $base_color); + border: 1px solid transparentize(black, 0.7); +} + +GraniteWidgetsPopOver .sidebar.view, +GraniteWidgetsPopOver * { + background-color: transparent; +} + +// +// Xs Entry +// +GraniteWidgetsXsEntry entry { padding: 4px; } + +// +// Text Styles +// +.h1 { font: open sans 24px; } +.h2 { font: open sans light 18px; } +.h3 { font: open sans 11px; } +.h4, +.category-label { + color: mix($bg_color, $text_color, 30%); + font-weight: 600; +} + +.h4 { + padding-bottom: 6px; + padding-top: 6px; +} + +GtkListBox .h4{ + padding-left: 6px; +} diff --git a/common/gtk-3.0/3.20/sass/_lightdm.scss b/common/gtk-3.0/3.20/sass/_lightdm.scss new file mode 100644 index 0000000..527dc99 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_lightdm.scss @@ -0,0 +1,110 @@ +// the panel widget at the top +#panel_window { + background-color: $panel_bg; + color: $panel_fg; + font: bold; + box-shadow: inset 0 -1px darken($panel_bg, 7%); + + // the menubars/menus of the panel, i.e. indicators + .menubar, + .menubar > .menuitem { + background-color: transparent; + color: $panel_fg; + font: bold; + } + + .menubar .menuitem:disabled { + color: transparentize($panel_fg, 0.5); + + label { color: inherit; } + } + .menubar .menu .menuitem { font: normal; } +} + +// the login window +#login_window, +#shutdown_dialog, +#restart_dialog { + font: normal; + border-style: none; + background-color: transparent; + color: $fg_color; +} + +// the top half of the login-window, in GtkDialog terms, the content +#content_frame { + padding-bottom: 14px; + background-color: $bg_color; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border: solid transparentize(black, 0.9); + border-width: 1px 1px 0 1px; +} + +#content_frame button { + @include button(normal); + + &:hover { @include button(hover); } + &:active, &:checked { @include button(active); } + &:disabled { @include button(insensitive); } +} + +// the lower half of the login-window, in GtkDialog terms the buttonbox or action area +#buttonbox_frame { + padding-top: 20px; + padding-bottom: 0px; + border-style: none; + background-color: if($variant=='light', $osd_bg_color, $header_bg); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: solid transparentize(black, 0.9); + border-width: 0 1px 1px 1px; + box-shadow: inset 0 1px if($variant=="light", $dark_sidebar_border, $header_border); +} + +#buttonbox_frame button{ + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } + &:disabled { @include button(osd-insensitive); } +} + +#login_window #user_combobox { + color: $fg_color; + font: 13px; + + .menu { font: normal; } + .arrow {} +} + +// the user's avatar box +#user_image { + padding: 3px; + border-radius: 2px; +} + +// the border around the user's avatar box +#user_image_border {} + +// the shutdown button +#shutdown_button.button { + @include button(suggested_destructive, $destructive_color); + + &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); } +} + +// the restart button +#restart_button.button { + @include button(suggested_destructive, $suggested_color); + + &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); } +} + +// the warning, in case a wrong password is entered or something else goes wrong according to PAM +#greeter_infobar { + border-bottom-width: 0; + font: bold; +} diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss new file mode 100644 index 0000000..3083f38 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -0,0 +1,276 @@ +.titlebar separator { + color: $header_border; //fixes separator in gnome-tweak-tool +} + +NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar + +GtkFileChooserDialog *, +NautilusWindow *, +NemoWindow { + //-GtkPaned-handle-size: 0; +} + +@if $variant==dark { + GtkFileChooserDialog, + NautilusWindow , + NemoWindow { + .sidebar { border-right: 1px solid $dark_sidebar_border; } + + .sidebar:dir(rtl) { border-left: 1px solid $dark_sidebar_border; } + } +} + +// Dark transparent sidebars +GtkFileChooserDialog, +NautilusWindow { + + &.csd.background, placessidebar list { background-color: transparent; } + + placessidebar.sidebar { + background-color: $dark_sidebar_bg; + + row.sidebar-placeholder-row { border: 1px solid $selected_bg_color; } + + row.sidebar-new-bookmark-row { background-color: lighten($dark_sidebar_bg, 10%); } + + row.activatable { + border: none; + color: $dark_sidebar_fg; + + .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } + + &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } + + &:selected, &:selected:hover, &:active:hover { + @extend %selected_items; + .sidebar-icon { color: inherit; } + } + } + + separator { color: transparent; } + + scrollbar { @extend %dark_sidebar_scrollbar } + } + + &.maximized placessidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } + + .sidebar-button.button { + color: $dark_sidebar_fg; + + &:hover { @include button(osd-hover); } + &:active { @include button(osd-active); } + + &:not(:hover):not(:active) > image { opacity: 0.5 }; + } +} + + +NemoWindow, +MarlinViewWindow { + + &.csd.background, + .source-list, .source-list.view, .source-list.view:hover { background-color: transparent; } + + .sidebar, .source-list.sidebar.view { + background-color: $dark_sidebar_bg; + + .view, row { + background-color: transparent; + color: $dark_sidebar_fg; + + &.cell:selected { + background-color: $selected_bg_color; + color: $selected_fg_color; + } + } + + &.frame { + color: $dark_sidebar_fg; + } + + separator { color: transparent; } + + scrollbar { @extend %dark_sidebar_scrollbar } + } + &.maximized .sidebar { background-color: opacify($dark_sidebar_bg, 1); } + +} + +NemoWindow.background > GtkGrid > paned > separator, +MarlinViewWindow.background > GtkBox > paned > separator { background-color: $dark_sidebar_border } + +// Fix Nautilus transparency issues +NautilusWindow NautilusWindowSlot { background-color: $base_color; } +NautilusDesktopWindow NautilusWindowSlot { background-color: transparent; } + +GtkFileChooserDialog { + + &.background.csd, &.background { background-color: $dark_sidebar_bg } + scrolledwindow.sidebar { background-color: transparent } + + // Yeah, this is ugly, but prevents a transparent background in the image preview box + paned > .vertical > .horizontal { background-color: $bg_color; } + + // fix for non gnome environments + .dialog-action-box { background-color: $bg_color } + + .dialog-vbox > .frame { + color: $dark_sidebar_fg; + border-color: transparent; + } + GtkFileChooserWidget > actionbar > revealer > .action-bar.frame { + background-color: transparent; + border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); + } + + GtkFileChooserWidget > actionbar > revealer > .action-bar.frame, + .dialog-vbox > .frame { + + button { @extend %dark_sidebar_button; } + entry { @extend %dark_sidebar_entry; } + + @extend %osd_check_radio; + + label, combobox { color: $dark_sidebar_fg; } + } +} + +// +// Paned Headerbars +// +FeedReaderreaderUI.background.csd, +GeditWindow.background.csd { + + > .titlebar .pane-separator, + &.maximized > .titlebar .pane-separator, + > .titlebar .pane-separator:backdrop, + &.maximized > .titlebar .pane-separator:backdrop { background-color: $header_border; } + + > .titlebar > headerbar.titlebar { + background-color: $header_bg; + + &:backdrop { background-color: $header_bg_backdrop; } + } + + &.maximized > .titlebar > headerbar.titlebar { + background-color: opacify($header_bg, 1); + + &:backdrop { background-color: opacify($header_bg_backdrop, 1); } + } +} + +FeedReaderreaderUI.background.csd > FeedReaderreaderHeaderbar.titlebar, +GeditWindow.background.csd > .titlebar { + background-color: transparent; +} + +// Gedit +GeditWindow.background { + &.csd { background-color: transparent; } + + .gedit-side-panel-paned .pane-separator { background-color: $dark_sidebar_border; } + .gedit-bottom-panel-paned .pane-separator { background-color: $borders_color; } +} + +.gedit-bottom-panel-paned { background-color: $base_color; } + +.gedit-document-panel { + background-color: $dark_sidebar_bg; + + .maximized & { background-color: opacify($dark_sidebar_bg, 1); } + + row { color: $dark_sidebar_fg; } + + row { + background-color: transparentize($dark_sidebar_fg, 1); + border: solid transparentize($dark_sidebar_fg, 1); + border-width: 3px 2px 3px 2px; + } + row:hover { + border: solid transparentize($dark_sidebar_fg, 0.85); + border-width: 3px 2px 3px 2px; + background-color: transparentize($dark_sidebar_fg, 0.85); + } + row:active { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: solid $selected_bg_color; + border-width: 3px 2px 3px 2px; + + button { color: $selected_fg_color; } + } + row:selected, row:selected:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + border: solid $selected_bg_color; + border-width: 3px 2px 3px 2px; + } + .prelight-row button:active { + color: $dark_sidebar_fg; + } +} + +GeditFileBrowserWidget { + background-color: $dark_sidebar_bg; + + .maximized & { background-color: opacify($dark_sidebar_bg, 1); } + + scrollbar { @extend %dark_sidebar_scrollbar; } + + .horizontal { + background-color: transparent; + border-color: darken($dark_sidebar_bg, 7%); + + button { @extend %dark_sidebar_button; } + combobox { color: $dark_sidebar_fg; } + } +} + +GeditWindow.background.csd GeditFileBrowserView.view { + + background-color: transparent; + color: $dark_sidebar_fg; + + &.expander { + color: $dark_sidebar_fg; + &:hover { color: $selected_bg_color; } + } +} + +%dark_sidebar_button { + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } + &:disabled { @include button(osd-insensitive); } +} + +%dark_sidebar_entry { + @include entry(osd); + + &:focus { @include entry(osd-focus); } + &:disabled { @include entry(osd-insensitive); } +} + +%dark_sidebar_scrollbar { + + &.overlay-indicator:not(.dragging):not(.hovering) slider { + background-color: lighten($dark_sidebar_fg, 15%); + border: 1px solid transparentize(black, 0.7); + } + slider { + background-color: transparentize(lighten($dark_sidebar_fg, 15%), 0.3); + + &:hover { background-color: lighten($dark_sidebar_fg, 20%); } + + &:hover:active { background-color: $selected_bg_color; } + + &:disabled { + background-color: transparent; + } + } + trough { + background-color: transparentize(black, 0.8); + border: none; + } +} diff --git a/common/gtk-3.0/3.20/sass/_unity.scss b/common/gtk-3.0/3.20/sass/_unity.scss new file mode 100644 index 0000000..00fec8f --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_unity.scss @@ -0,0 +1,59 @@ +// Decorations +UnityDecoration { + -UnityDecoration-extents: 28px 1 1 1; + -UnityDecoration-input-extents: 10px; + + -UnityDecoration-shadow-offset-x: 0px; + -UnityDecoration-shadow-offset-y: 3px; + -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.2); + -UnityDecoration-active-shadow-radius: 12px; + -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.07); + -UnityDecoration-inactive-shadow-radius: 7px; + + -UnityDecoration-glow-size: 10px; + -UnityDecoration-glow-color: $selected_bg_color; + + -UnityDecoration-title-indent: 10px; + -UnityDecoration-title-fade: 35px; + -UnityDecoration-title-alignment: 0.0; + + &.top { + border: 1px solid if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9)); + border-bottom-width: 0; + border-radius: 4px 4px 0 0; + padding: 1px 6px 0 6px; + + background-image: linear-gradient(to bottom, opacify($header_bg, 1)); + color: $header_fg; // The foreground color will be used to paint the text + + box-shadow: inset 0 1px lighten($header_bg, 3%); + + &:backdrop { + border-bottom-width: 0; + //background-image: linear-gradient(to bottom, opacify($header_bg_backdrop, 1)); + color: transparentize($header_fg, 0.3); + } + } + &.left, &.right, &.bottom, + &.left:backdrop, &.right:backdrop, &.bottom:backdrop { + background-image: linear-gradient(to bottom, if($darker=='true' or $variant == 'dark', darken($header_bg, 7%), transparentize(black, 0.9))); + } +} + +// Panel Style +UnityPanelWidget, +.unity-panel { + background-image: linear-gradient(to bottom, opacify($panel_bg, 1)); + color: lighten($panel_fg, 20%); + box-shadow: none; + + &:backdrop { color: lighten($panel_fg, 1%); } +} + +.unity-panel.menubar.menuitem:hover, +.unity-panel.menubar .menuitem *:hover { + border-radius: 0; + color: $selected_fg_color; + background-image: linear-gradient(to bottom, $selected_bg_color); + border-bottom: none; +} diff --git a/common/gtk-3.0/3.20/sass/gtk-dark.scss b/common/gtk-3.0/3.20/sass/gtk-dark.scss new file mode 100644 index 0000000..529ee3d --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk-dark.scss @@ -0,0 +1,13 @@ +$variant: 'dark'; +$darker: 'false'; +$transparency: 'true'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-darker.scss b/common/gtk-3.0/3.20/sass/gtk-darker.scss new file mode 100644 index 0000000..34b8f81 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk-darker.scss @@ -0,0 +1,13 @@ +$variant: 'light'; +$darker: 'true'; +$transparency: 'true'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss new file mode 100644 index 0000000..959d8b1 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss @@ -0,0 +1,13 @@ +$variant: 'dark'; +$darker: 'false'; +$transparency: 'false'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss new file mode 100644 index 0000000..45b7dbe --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss @@ -0,0 +1,13 @@ +$variant: 'light'; +$darker: 'true'; +$transparency: 'false'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid.scss b/common/gtk-3.0/3.20/sass/gtk-solid.scss new file mode 100644 index 0000000..28ff2b6 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk-solid.scss @@ -0,0 +1,13 @@ +$variant: 'light'; +$darker: 'false'; +$transparency: 'false'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk.scss b/common/gtk-3.0/3.20/sass/gtk.scss new file mode 100644 index 0000000..9bb0348 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/gtk.scss @@ -0,0 +1,13 @@ +$variant: 'light'; +$darker: 'false'; +$transparency: 'true'; + +@import 'colors'; +@import 'drawing'; +@import 'common'; +@import 'applications'; +@import 'unity'; +@import 'granite'; +@import 'lightdm'; +@import 'transparent_widgets'; +@import 'colors-public'; -- 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') 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') 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') 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') 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') 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 + common/gtk-3.0/3.20/sass/_drawing.scss | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') 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; diff --git a/common/gtk-3.0/3.20/sass/_drawing.scss b/common/gtk-3.0/3.20/sass/_drawing.scss index bc4a8e2..8ccaea3 100644 --- a/common/gtk-3.0/3.20/sass/_drawing.scss +++ b/common/gtk-3.0/3.20/sass/_drawing.scss @@ -27,7 +27,6 @@ // normal entry // color: $text_color; - caret-color: $text_color; border-color: $entry_border; background-color: $entry_bg; background-image: linear-gradient(to bottom, $entry_bg); @@ -38,7 +37,6 @@ // focused entry // color: $text_color; - caret-color: $text_color; border-color: if($variant=='light', $selected_bg_color, $button_border); background-color: $entry_bg; background-image: linear-gradient(to bottom, $entry_bg); @@ -67,7 +65,6 @@ // color: $header_fg; - caret-color: $header_fg; border-color: $header_entry_border; background-image: linear-gradient(to bottom, $header_entry_bg); background-color: transparent; @@ -80,7 +77,6 @@ // focused header-bar entry // color: $selected_fg_color; - caret-color: $selected_fg_color; border-color: if($darker=='false' and $variant=='light', $selected_bg_color, transparent); background-image: linear-gradient(to bottom, $selected_bg_color); } -- 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') 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') 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') 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') 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') 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') 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') 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') 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') 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 aad1b2411b0364291a05fc7fd289cd96a3f9ee76 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: disable broken stuff for now --- common/gtk-3.0/3.20/sass/gtk-dark.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-darker.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid-dark.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid-darker.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk.scss | 8 ++++---- 6 files changed, 24 insertions(+), 24 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/gtk-dark.scss b/common/gtk-3.0/3.20/sass/gtk-dark.scss index 529ee3d..ad6b6ce 100644 --- a/common/gtk-3.0/3.20/sass/gtk-dark.scss +++ b/common/gtk-3.0/3.20/sass/gtk-dark.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-darker.scss b/common/gtk-3.0/3.20/sass/gtk-darker.scss index 34b8f81..e8ecec5 100644 --- a/common/gtk-3.0/3.20/sass/gtk-darker.scss +++ b/common/gtk-3.0/3.20/sass/gtk-darker.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss index 959d8b1..bb9c9e8 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss index 45b7dbe..59be1ea 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid.scss b/common/gtk-3.0/3.20/sass/gtk-solid.scss index 28ff2b6..f261d50 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk.scss b/common/gtk-3.0/3.20/sass/gtk.scss index 9bb0348..90172e0 100644 --- a/common/gtk-3.0/3.20/sass/gtk.scss +++ b/common/gtk-3.0/3.20/sass/gtk.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -@import 'applications'; -@import 'unity'; -@import 'granite'; +//@import 'applications'; +//@import 'unity'; +//@import 'granite'; @import 'lightdm'; -@import 'transparent_widgets'; +//@import 'transparent_widgets'; @import 'colors-public'; -- 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') 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') 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') 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') 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') 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 ca3c5b5fda72884a2936f25ccee07a79b70d7f88 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: Revert "disable broken stuff for now" This reverts commit 5a860002c72960038d4adb62b9035cd471604f5f. --- common/gtk-3.0/3.20/sass/gtk-dark.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-darker.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid-dark.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid-darker.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk-solid.scss | 8 ++++---- common/gtk-3.0/3.20/sass/gtk.scss | 8 ++++---- 6 files changed, 24 insertions(+), 24 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/gtk-dark.scss b/common/gtk-3.0/3.20/sass/gtk-dark.scss index ad6b6ce..529ee3d 100644 --- a/common/gtk-3.0/3.20/sass/gtk-dark.scss +++ b/common/gtk-3.0/3.20/sass/gtk-dark.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-darker.scss b/common/gtk-3.0/3.20/sass/gtk-darker.scss index e8ecec5..34b8f81 100644 --- a/common/gtk-3.0/3.20/sass/gtk-darker.scss +++ b/common/gtk-3.0/3.20/sass/gtk-darker.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss index bb9c9e8..959d8b1 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid-dark.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss index 59be1ea..45b7dbe 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid-darker.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk-solid.scss b/common/gtk-3.0/3.20/sass/gtk-solid.scss index f261d50..28ff2b6 100644 --- a/common/gtk-3.0/3.20/sass/gtk-solid.scss +++ b/common/gtk-3.0/3.20/sass/gtk-solid.scss @@ -5,9 +5,9 @@ $transparency: 'false'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; diff --git a/common/gtk-3.0/3.20/sass/gtk.scss b/common/gtk-3.0/3.20/sass/gtk.scss index 90172e0..9bb0348 100644 --- a/common/gtk-3.0/3.20/sass/gtk.scss +++ b/common/gtk-3.0/3.20/sass/gtk.scss @@ -5,9 +5,9 @@ $transparency: 'true'; @import 'colors'; @import 'drawing'; @import 'common'; -//@import 'applications'; -//@import 'unity'; -//@import 'granite'; +@import 'applications'; +@import 'unity'; +@import 'granite'; @import 'lightdm'; -//@import 'transparent_widgets'; +@import 'transparent_widgets'; @import 'colors-public'; -- cgit v1.2.3 From 75b37adf83773c02e0954fc4f9a532e0c73273dd Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 19 Feb 2016 11:06:17 +0100 Subject: re-enable some application styling --- common/gtk-3.0/3.20/sass/_applications.scss | 484 ++++++++++----------- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 255 +++++------ 2 files changed, 352 insertions(+), 387 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 9d31307..6872d60 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -1,92 +1,92 @@ // // Tab overrides // -GeditNotebook.notebook, -ScratchMainWindow .notebook, -EphyNotebook.notebook, -MidoriNotebook .notebook, -TerminalWindow .notebook, -PantheonTerminalPantheonTerminalWindow .notebook { - - header.top tab { - &:active { - box-shadow: inset 0 1px $borders_color, - inset 0 -1px $borders_color, - inset 1px 0 $borders_color, - inset -1px 0 $borders_color; - } - } -} - -TerminalWindow .notebook, -PantheonTerminalPantheonTerminalWindow .notebook { +//GeditNotebook.notebook, +//ScratchMainWindow .notebook, +//EphyNotebook.notebook, +//MidoriNotebook .notebook, +//TerminalWindow .notebook, +//PantheonTerminalPantheonTerminalWindow .notebook { +// +// header.top tab { +// &:active { +// box-shadow: inset 0 1px $borders_color, +// inset 0 -1px $borders_color, +// inset 1px 0 $borders_color, +// inset -1px 0 $borders_color; +// } +// } +//} - &.header.top { - box-shadow: inset 0 1px opacify($header_border, 1), - inset 0 -1px $borders_color; +//TerminalWindow .notebook, +//PantheonTerminalPantheonTerminalWindow .notebook { - tab { - padding-top: 7px; - border-top-width: 3px; - } - } -} +// &.header.top { +// box-shadow: inset 0 1px opacify($header_border, 1), +// inset 0 -1px $borders_color; +// +// tab { +// padding-top: 7px; +// border-top-width: 3px; +// } +// } +//} // // Evolution // // needed for webkit/GtkStyle/Evolution compatibility -GtkHTML { - background-color: $base_color; - color: $text_color; - - &:active { - color: $selected_fg_color; - background-color: $selected_bg_color; - } -} +//GtkHTML { +// background-color: $base_color; +// color: $text_color; +// +// &:active { +// color: $selected_fg_color; +// background-color: $selected_bg_color; +// } +//} // // Sushi // // used by gnome-font-viewer and sushi -SushiFontWidget { - padding: 6px 12px; -} +//SushiFontWidget { +// padding: 6px 12px; +//} // // GNOME Terminal // -TerminalWindow { - .background { - background-color: transparent; - } - - scrollbar { - &.vertical slider { margin-left: 3px; } - - trough { border-width: 0; } - } - - .notebook { - tab button { - color: mix($bg_color, $fg_color, 35%); - - &:hover { - color: $fg_color; - border-color: $button_border; - background-color: $button_bg; - } - } - tab:active, tab:hover { - button { - @extend %undecorated_button; - &:hover { color: lighten(red, 15%); @extend %undecorated_button;} - &:active { color: $selected_bg_color; @extend %undecorated_button;} - } - } - } -} +//TerminalWindow { +// .background { +// background-color: transparent; +// } +// +// scrollbar { +// &.vertical slider { margin-left: 3px; } +// +// trough { border-width: 0; } +// } +// +// .notebook { +// tab button { +// color: mix($bg_color, $fg_color, 35%); +// +// &:hover { +// color: $fg_color; +// border-color: $button_border; +// background-color: $button_bg; +// } +// } +// tab:active, tab:hover { +// button { +// @extend %undecorated_button; +// &:hover { color: lighten(red, 15%); @extend %undecorated_button;} +// &:active { color: $selected_bg_color; @extend %undecorated_button;} +// } +// } +// } +//} // // Nautilus @@ -110,10 +110,11 @@ TerminalWindow { &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } } -NautilusQueryEditor searchbar { +.nautilus-window .search-bar { padding: 5px; box-shadow: none; background-color: $base_color; + border-bottom: 1px solid $borders_color; } button.nautilus-circular-button.image-button { @@ -145,59 +146,59 @@ $disk_space_free: darken($bg_color, 3%); } // View -NautilusListView .view { border-bottom: 1px solid $borders_color; } +.nautilus-list-view .view { border-bottom: 1px solid $borders_color; } // // Nemo // .nemo-desktop.nemo-canvas-item { @extend .nautilus-desktop.nautilus-canvas-item; } -NemoWindow { - - EelEditableLabel { transition: none; } // Workaround for invisible text in rename entry - - .sidebar .frame { border-width: 0; } - - separator.horizontal { color: $borders_color; } - - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.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); } - } - - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button, - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:hover, - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:active, - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:checked, - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:disabled { - @extend %linked; - @extend %linked_button; - } - - .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) { - - $_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; } - } - } -} +//NemoWindow { +// +// EelEditableLabel { transition: none; } // Workaround for invisible text in rename entry +// +// .sidebar .frame { border-width: 0; } +// +// separator.horizontal { color: $borders_color; } +// +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.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); } +// } +// +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button, +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:hover, +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:active, +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:checked, +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) > button:disabled { +// @extend %linked; +// @extend %linked_button; +// } +// +// .primary-toolbar NemoPathBar.linked:not(.vertical):not(.path-bar) { +// +// $_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; } +// } +// } +//} // // Gedit // -.gedit-headerbar-paned { color: $header_border; } +//.gedit-headerbar-paned { color: $header_border; } .open-document-selector-treeview.view { padding: 3px 6px 3px 6px; @@ -264,24 +265,23 @@ NemoWindow { //.gedit-document-panel-placeholder-row { //} -GeditStatusbar { - border-top: 1px solid $borders_color; - background-color: $bg_color; -} - -GeditStatusMenuButton.button.flat, -GeditStatusMenuButton:hover.button.flat, -GeditStatusMenuButton:checked.button.flat { - border-bottom-style: none; - border-radius: 0; -} - +//GeditStatusbar { +// border-top: 1px solid $borders_color; +// background-color: $bg_color; +//} +// +//GeditStatusMenuButton.button.flat, +//GeditStatusMenuButton:hover.button.flat, +//GeditStatusMenuButton:checked.button.flat { +// border-bottom-style: none; +// border-radius: 0; +//} -GeditViewFrame .gedit-search-slider { @extend %search_slider } +.gedit-search-slider { @extend %search_slider } -GeditFileBrowserWidget toolbar { - border-bottom: 1px solid $borders_color; -} +//GeditFileBrowserWidget toolbar { +// border-bottom: 1px solid $borders_color; +//} .gedit-search-entry-occurrences-tag { color: transparentize($fg_color, 0.4); @@ -434,9 +434,9 @@ GbViewStack.focused box.header.notebook { // // Epiphany // -EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so reset it - color: $fg_color; -} +//EphyWindow .floating-bar { // Epiphany overrides the floating-bar style, so reset it +// color: $fg_color; +//} // // Gnome Documents @@ -498,15 +498,15 @@ button.documents-favorite:active:hover { // // Totem // -TotemGrilo.vertical GdMainView.frame { - border-width: 0; -} +//TotemGrilo.vertical GdMainView.frame { +// border-width: 0; +//} // // Synapse // -SynapseGuiSelectionContainer *:selected, -SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } +//SynapseGuiSelectionContainer *:selected, +//SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } // // Transmission @@ -519,63 +519,63 @@ SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } // // Fallback Mode/Budgie Panel // -.gnome-panel-menu-bar, -PanelApplet > menubar, -PanelToplevel, -PanelWidget, -PanelAppletFrame, -PanelApplet { - color: $panel_fg; - background-image: linear-gradient(to bottom, $panel_bg); -} - -PanelApplet button, PanelApplet button:backdrop { - padding: 4px; - border: 2px solid transparent; - border-radius: 0; - background-image: none; - background-color: transparent; - color: $panel_fg; -} - -PanelApplet button:hover { - color: lighten($panel_fg, 10%); - background-color: transparentize(black, 0.83); - border-color: transparentize(black, 0.83); -} - -PanelApplet button:active, PanelApplet button:active:backdrop, -PanelApplet button:checked, PanelApplet button:checked:backdrop { - background-clip: padding-box; - color: $selected_fg_color; - background-color: transparentize(black, 0.75); - border-radius: 0; - border-color: transparentize(black, 0.75); - box-shadow: inset 0 -2px $selected_bg_color; -} - -PanelApplet:hover { - color: $selected_fg_color; -} - -PanelApplet:active, -PanelApplet:hover:active { - color: $selected_bg_color; -} - -WnckPager { - color: mix($panel_fg, black, 50%); - &:selected { color: $selected_bg_color } -} - -NaTrayApplet { - -NaTrayApplet-icon-padding: 12; - -NaTrayApplet-icon-size: 16; -} - -ClockBox { - color: $panel_fg; -} +//.gnome-panel-menu-bar, +//PanelApplet > menubar, +//PanelToplevel, +//PanelWidget, +//PanelAppletFrame, +//PanelApplet { +// color: $panel_fg; +// background-image: linear-gradient(to bottom, $panel_bg); +//} +// +//PanelApplet button, PanelApplet button:backdrop { +// padding: 4px; +// border: 2px solid transparent; +// border-radius: 0; +// background-image: none; +// background-color: transparent; +// color: $panel_fg; +//} +// +//PanelApplet button:hover { +// color: lighten($panel_fg, 10%); +// background-color: transparentize(black, 0.83); +// border-color: transparentize(black, 0.83); +//} +// +//PanelApplet button:active, PanelApplet button:active:backdrop, +//PanelApplet button:checked, PanelApplet button:checked:backdrop { +// background-clip: padding-box; +// color: $selected_fg_color; +// background-color: transparentize(black, 0.75); +// border-radius: 0; +// border-color: transparentize(black, 0.75); +// box-shadow: inset 0 -2px $selected_bg_color; +//} +// +//PanelApplet:hover { +// color: $selected_fg_color; +//} +// +//PanelApplet:active, +//PanelApplet:hover:active { +// color: $selected_bg_color; +//} +// +//WnckPager { +// color: mix($panel_fg, black, 50%); +// &:selected { color: $selected_bg_color } +//} +// +//NaTrayApplet { +// -NaTrayApplet-icon-padding: 12; +// -NaTrayApplet-icon-size: 16; +//} +// +//ClockBox { +// color: $panel_fg; +//} // Xfce Panel .xfce4-panel.panel { @@ -622,26 +622,26 @@ ClockBox { // // Birdie // -BirdieWidgetsTweetList * { - background-image: none; - background-color: transparent; -} +//BirdieWidgetsTweetList * { +// background-image: none; +// background-color: transparent; +//} // // Marlin / Pantheon Files // -MarlinViewWindow { - - *:selected, *:selected:focus { - color: $selected_fg_color; - background-color: $selected_bg_color; - outline-color: transparent; - } - GtkIconView.view:selected { - &, &:focus, &:hover, &:focus:hover { background-color: transparent; } - } - FMListView, FMColumnView { outline-color: transparent; } -} +//MarlinViewWindow { +// +// *:selected, *:selected:focus { +// color: $selected_fg_color; +// background-color: $selected_bg_color; +// outline-color: transparent; +// } +// GtkIconView.view:selected { +// &, &:focus, &:hover, &:focus:hover { background-color: transparent; } +// } +// FMListView, FMColumnView { outline-color: transparent; } +//} .marlin-pathbar.pathbar { border-radius: 3px; @@ -741,42 +741,42 @@ MarlinViewWindow { // // Wingpanel Popover // -WingpanelWidgetsIndicatorPopover.popover { - padding: 0; - - text-shadow: none; - -gtk-icon-shadow: none; - - menuitem { - padding: 5px; - outline-color: transparent; - text-shadow: none; - -gtk-icon-shadow: none; - border: solid transparent; - border-width: 1px 0; - - label, image { padding: 0 3px; } - - &:hover, &:active { - 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; - } - *:disabled { color: $insensitive_fg_color; } - } -} +//WingpanelWidgetsIndicatorPopover.popover { +// padding: 0; +// +// text-shadow: none; +// -gtk-icon-shadow: none; +// +// menuitem { +// padding: 5px; +// outline-color: transparent; +// text-shadow: none; +// -gtk-icon-shadow: none; +// border: solid transparent; +// border-width: 1px 0; +// +// label, image { padding: 0 3px; } +// +// &:hover, &:active { +// 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; +// } +// *:disabled { color: $insensitive_fg_color; } +// } +//} // // Pantheon Terminal // -PantheonTerminalPantheonTerminalWindow.background { - background-color: transparent; -} +//PantheonTerminalPantheonTerminalWindow.background { +// background-color: transparent; +//} // // Switchboard // -SwitchboardCategoryView .view:selected, -SwitchboardCategoryView .view:selected:focus { - color: $fg_color; -} +//SwitchboardCategoryView .view:selected, +//SwitchboardCategoryView .view:selected:focus { +// color: $fg_color; +//} diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 3083f38..3734c75 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -1,32 +1,27 @@ -.titlebar separator { - color: $header_border; //fixes separator in gnome-tweak-tool -} - -NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar - -GtkFileChooserDialog *, -NautilusWindow *, -NemoWindow { - //-GtkPaned-handle-size: 0; -} - -@if $variant==dark { - GtkFileChooserDialog, - NautilusWindow , - NemoWindow { - .sidebar { border-right: 1px solid $dark_sidebar_border; } +//NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar - .sidebar:dir(rtl) { border-left: 1px solid $dark_sidebar_border; } - } +//GtkFileChooserDialog, +//NemoWindow, +.nautilus-window { + paned > separator { background: $dark_sidebar_bg; } } // Dark transparent sidebars -GtkFileChooserDialog, -NautilusWindow { +//GtkFileChooserDialog, +.nautilus-window { &.csd.background, placessidebar list { background-color: transparent; } placessidebar.sidebar { + + &:dir(ltr) { margin-right: -1px; } + &:dir(rtl) { margin-left: -1px; } + + @if $variant=='dark' { + &:dir(ltr) { border-right: 1px solid $dark_sidebar_border; } + &:dir(rtl) { border-left: 1px solid $dark_sidebar_border; } + } + background-color: $dark_sidebar_bg; row.sidebar-placeholder-row { border: 1px solid $selected_bg_color; } @@ -47,7 +42,7 @@ NautilusWindow { } } - separator { color: transparent; } + separator { background-color: transparent; } scrollbar { @extend %dark_sidebar_scrollbar } } @@ -65,112 +60,82 @@ NautilusWindow { } -NemoWindow, -MarlinViewWindow { - - &.csd.background, - .source-list, .source-list.view, .source-list.view:hover { background-color: transparent; } - - .sidebar, .source-list.sidebar.view { - background-color: $dark_sidebar_bg; - - .view, row { - background-color: transparent; - color: $dark_sidebar_fg; - - &.cell:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - } - - &.frame { - color: $dark_sidebar_fg; - } - - separator { color: transparent; } - - scrollbar { @extend %dark_sidebar_scrollbar } - } - &.maximized .sidebar { background-color: opacify($dark_sidebar_bg, 1); } - -} +//NemoWindow, +//MarlinViewWindow { +// +// &.csd.background, +// .source-list, .source-list.view, .source-list.view:hover { background-color: transparent; } +// +// .sidebar, .source-list.sidebar.view { +// background-color: $dark_sidebar_bg; +// +// .view, row { +// background-color: transparent; +// color: $dark_sidebar_fg; +// +// &.cell:selected { +// background-color: $selected_bg_color; +// color: $selected_fg_color; +// } +// } +// +// &.frame { +// color: $dark_sidebar_fg; +// } +// +// separator { color: transparent; } +// +// scrollbar { @extend %dark_sidebar_scrollbar } +// } +// &.maximized .sidebar { background-color: opacify($dark_sidebar_bg, 1); } +// +//} -NemoWindow.background > GtkGrid > paned > separator, -MarlinViewWindow.background > GtkBox > paned > separator { background-color: $dark_sidebar_border } +//NemoWindow.background > GtkGrid > paned > separator, +//MarlinViewWindow.background > GtkBox > paned > separator { background-color: $dark_sidebar_border } // Fix Nautilus transparency issues -NautilusWindow NautilusWindowSlot { background-color: $base_color; } -NautilusDesktopWindow NautilusWindowSlot { background-color: transparent; } - -GtkFileChooserDialog { - - &.background.csd, &.background { background-color: $dark_sidebar_bg } - scrolledwindow.sidebar { background-color: transparent } - - // Yeah, this is ugly, but prevents a transparent background in the image preview box - paned > .vertical > .horizontal { background-color: $bg_color; } - - // fix for non gnome environments - .dialog-action-box { background-color: $bg_color } - - .dialog-vbox > .frame { - color: $dark_sidebar_fg; - border-color: transparent; - } - GtkFileChooserWidget > actionbar > revealer > .action-bar.frame { - background-color: transparent; - border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); - } - - GtkFileChooserWidget > actionbar > revealer > .action-bar.frame, - .dialog-vbox > .frame { - - button { @extend %dark_sidebar_button; } - entry { @extend %dark_sidebar_entry; } - - @extend %osd_check_radio; - - label, combobox { color: $dark_sidebar_fg; } - } -} +//.nautilus-window NautilusWindowSlot { background-color: $base_color; } +//GtkFileChooserDialog { // -// Paned Headerbars +// &.background.csd, &.background { background-color: $dark_sidebar_bg } +// scrolledwindow.sidebar { background-color: transparent } // -FeedReaderreaderUI.background.csd, -GeditWindow.background.csd { - - > .titlebar .pane-separator, - &.maximized > .titlebar .pane-separator, - > .titlebar .pane-separator:backdrop, - &.maximized > .titlebar .pane-separator:backdrop { background-color: $header_border; } - - > .titlebar > headerbar.titlebar { - background-color: $header_bg; - - &:backdrop { background-color: $header_bg_backdrop; } - } - - &.maximized > .titlebar > headerbar.titlebar { - background-color: opacify($header_bg, 1); - - &:backdrop { background-color: opacify($header_bg_backdrop, 1); } - } -} - -FeedReaderreaderUI.background.csd > FeedReaderreaderHeaderbar.titlebar, -GeditWindow.background.csd > .titlebar { - background-color: transparent; -} +// // Yeah, this is ugly, but prevents a transparent background in the image preview box +// paned > .vertical > .horizontal { background-color: $bg_color; } +// +// // fix for non gnome environments +// .dialog-action-box { background-color: $bg_color } +// +// .dialog-vbox > .frame { +// color: $dark_sidebar_fg; +// border-color: transparent; +// } +// GtkFileChooserWidget > actionbar > revealer > .action-bar.frame { +// background-color: transparent; +// border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); +// } +// +// GtkFileChooserWidget > actionbar > revealer > .action-bar.frame, +// .dialog-vbox > .frame { +// +// button { @extend %dark_sidebar_button; } +// entry { @extend %dark_sidebar_entry; } +// +// @extend %osd_check_radio; +// +// label, combobox { color: $dark_sidebar_fg; } +// } +//} // Gedit -GeditWindow.background { - &.csd { background-color: transparent; } - - .gedit-side-panel-paned .pane-separator { background-color: $dark_sidebar_border; } - .gedit-bottom-panel-paned .pane-separator { background-color: $borders_color; } -} +//GeditWindow.background { +// &.csd { background-color: transparent; } +// +// .gedit-side-panel-paned .pane-separator { background-color: $dark_sidebar_border; } +// .gedit-bottom-panel-paned .pane-separator { background-color: $borders_color; } +//} .gedit-bottom-panel-paned { background-color: $base_color; } @@ -210,32 +175,32 @@ GeditWindow.background { } } -GeditFileBrowserWidget { - background-color: $dark_sidebar_bg; - - .maximized & { background-color: opacify($dark_sidebar_bg, 1); } - - scrollbar { @extend %dark_sidebar_scrollbar; } - - .horizontal { - background-color: transparent; - border-color: darken($dark_sidebar_bg, 7%); - - button { @extend %dark_sidebar_button; } - combobox { color: $dark_sidebar_fg; } - } -} - -GeditWindow.background.csd GeditFileBrowserView.view { - - background-color: transparent; - color: $dark_sidebar_fg; +//GeditFileBrowserWidget { +// background-color: $dark_sidebar_bg; +// +// .maximized & { background-color: opacify($dark_sidebar_bg, 1); } +// +// scrollbar { @extend %dark_sidebar_scrollbar; } +// +// .horizontal { +// background-color: transparent; +// border-color: darken($dark_sidebar_bg, 7%); +// +// button { @extend %dark_sidebar_button; } +// combobox { color: $dark_sidebar_fg; } +// } +//} - &.expander { - color: $dark_sidebar_fg; - &:hover { color: $selected_bg_color; } - } -} +//GeditWindow.background.csd GeditFileBrowserView.view { +// +// background-color: transparent; +// color: $dark_sidebar_fg; +// +// &.expander { +// color: $dark_sidebar_fg; +// &:hover { color: $selected_bg_color; } +// } +//} %dark_sidebar_button { @include button(osd); -- 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') 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') 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 +++++++++++++-------- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 25 +-- 2 files changed, 118 insertions(+), 76 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') 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); diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 3734c75..ed3f0db 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -3,7 +3,12 @@ //GtkFileChooserDialog, //NemoWindow, .nautilus-window { - paned > separator { background: $dark_sidebar_bg; } + paned > separator { + background: $dark_sidebar_border; + + &:dir(ltr) { margin-left: -1px; } + &:dir(rtl) { margin-right: -1px; } + } } // Dark transparent sidebars @@ -14,14 +19,6 @@ placessidebar.sidebar { - &:dir(ltr) { margin-right: -1px; } - &:dir(rtl) { margin-left: -1px; } - - @if $variant=='dark' { - &:dir(ltr) { border-right: 1px solid $dark_sidebar_border; } - &:dir(rtl) { border-left: 1px solid $dark_sidebar_border; } - } - background-color: $dark_sidebar_bg; row.sidebar-placeholder-row { border: 1px solid $selected_bg_color; } @@ -49,14 +46,20 @@ &.maximized placessidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } - .sidebar-button.button { + button.sidebar-button { color: $dark_sidebar_fg; &:hover { @include button(osd-hover); } - &:active { @include button(osd-active); } + &:active { @include button(active); } &:not(:hover):not(:active) > image { opacity: 0.5 }; } + + searchbar { + // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 + border-color: transparent; + box-shadow: inset 0 -1px $borders_color; + } } -- 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') 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') 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') 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') 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') 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') 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') 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/_applications.scss | 4 +++ common/gtk-3.0/3.20/sass/_common.scss | 51 ++++++++++++++--------------- 2 files changed, 28 insertions(+), 27 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 6872d60..f47a285 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -117,6 +117,10 @@ border-bottom: 1px solid $borders_color; } +.nautilus-window notebook { + background-color: $base_color; +} + button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; 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 acdba71700a71a7042cab93f8a0649086b34ea40 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 3 Mar 2016 16:55:05 +0100 Subject: tweak nautilus searchbar --- common/gtk-3.0/3.20/sass/_applications.scss | 11 +++++++---- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 6 ------ 2 files changed, 7 insertions(+), 10 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index f47a285..8fcb0a7 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -110,11 +110,14 @@ &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } } -.nautilus-window .search-bar { - padding: 5px; - box-shadow: none; +.nautilus-window searchbar { + // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 + border-color: transparent; + box-shadow: inset 0 -1px $borders_color; +} + +.nautilus-window notebook > stack:not(:only-child) searchbar { background-color: $base_color; - border-bottom: 1px solid $borders_color; } .nautilus-window notebook { diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index ed3f0db..26238af 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -54,12 +54,6 @@ &:not(:hover):not(:active) > image { opacity: 0.5 }; } - - searchbar { - // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 - border-color: transparent; - box-shadow: inset 0 -1px $borders_color; - } } -- 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') 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') 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') 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 0c833c9a23993c69d2700723694e0781b0ac26b3 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Tue, 8 Mar 2016 12:18:14 +0100 Subject: cleanup --- common/gtk-3.0/3.20/sass/_applications.scss | 208 ++------------------- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 10 - 2 files changed, 12 insertions(+), 206 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 8fcb0a7..01315ce 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -32,28 +32,6 @@ // } //} -// -// Evolution -// -// needed for webkit/GtkStyle/Evolution compatibility -//GtkHTML { -// background-color: $base_color; -// color: $text_color; -// -// &:active { -// color: $selected_fg_color; -// background-color: $selected_bg_color; -// } -//} - -// -// Sushi -// -// used by gnome-font-viewer and sushi -//SushiFontWidget { -// padding: 6px 12px; -//} - // // GNOME Terminal // @@ -116,14 +94,11 @@ box-shadow: inset 0 -1px $borders_color; } +.nautilus-window notebook, .nautilus-window notebook > stack:not(:only-child) searchbar { background-color: $base_color; } -.nautilus-window notebook { - background-color: $base_color; -} - button.nautilus-circular-button.image-button { border-radius: 50%; -gtk-outline-radius: 50%; @@ -205,8 +180,6 @@ $disk_space_free: darken($bg_color, 3%); // // Gedit // -//.gedit-headerbar-paned { color: $header_border; } - .open-document-selector-treeview.view { padding: 3px 6px 3px 6px; border-color: $base_color; // disable borders, making them transparent doesn't work for some reason @@ -269,35 +242,12 @@ $disk_space_free: darken($bg_color, 3%); color: $fg_color; } -//.gedit-document-panel-placeholder-row { -//} - -//GeditStatusbar { -// border-top: 1px solid $borders_color; -// background-color: $bg_color; -//} -// -//GeditStatusMenuButton.button.flat, -//GeditStatusMenuButton:hover.button.flat, -//GeditStatusMenuButton:checked.button.flat { -// border-bottom-style: none; -// border-radius: 0; -//} - -.gedit-search-slider { @extend %search_slider } - -//GeditFileBrowserWidget toolbar { -// border-bottom: 1px solid $borders_color; -//} - -.gedit-search-entry-occurrences-tag { - color: transparentize($fg_color, 0.4); - border: none; - margin: 2px; - padding: 2px; +.gedit-side-panel-paned statusbar { + border-top: 1px solid $borders_color; + background-color: $bg_color; } -%search_slider { +.gedit-search-slider { background-color: lighten($bg_color, 2%); padding: 6px; border-color: $borders_color; @@ -306,137 +256,16 @@ $disk_space_free: darken($bg_color, 3%); border-style: solid; } -// -// Gnome Builder -// -GbWorkbench .floating-bar { color: $fg_color; } - -GbSearchBox.linked:not(.vertical) { - - > button.popup:last-child:dir(ltr), - > button.popup:first-child:dir(rtl) { - padding: 0 10px; - - @include entry(header-normal); - - &:hover { @include entry(header-focus); } - &:active, &:checked { @include entry(header-focus); } - &:disabled { @include entry(header-insensitive); } - } - - > button.popup:last-child:dir(ltr), - > button.popup:last-child:dir(ltr):hover, - > button.popup:last-child:dir(ltr):active, - > button.popup:last-child:dir(ltr):checked { - border-left-style: none; - border-radius: 0 3px 3px 0; - -gtk-outline-radius: 0 1px 1px 0; - } - - > button.popup:last-child:dir(rtl), - > button.popup:last-child:dir(rtl):hover, - > button.popup:last-child:dir(rtl):active, - > button.popup:last-child:dir(rtl):checked { - border-right-style: none; - border-radius: 3px 0 0 3px; - -gtk-outline-radius: 1px 0 0 1px; - } -} - -// Preference page language style -GbPreferencesPageLanguage { - entry { border-radius: 3px 3px 0 0; } - .frame { border-top-width: 0 } -} - -// Editor tweak widget -GbEditorTweakWidget { - .linked.vertical > entry { border-bottom-style: solid; } - scrolledwindow { border-top: none; } -} - -// View stack styling -GbViewStack box.header.notebook { - border-bottom: 1px solid $borders_color; -} - -GbViewStack.focused box.header.notebook, -#project_sidebar_header.focused { - background-color: $base_color; -} - -GbEditorWorkspace > paned > box > box.header.notebook { - border-bottom: 1px solid $borders_color; -} - -GbNewProjectDialog button.file.linked-on-right button { - border-radius: 3px 0 0 3px; -} - -// Workspace pane header styling -GbWorkspacePane box.header.notebook { - border-bottom: 1px solid $borders_color; -} - -GbWorkspacePane:not(.focused) box.header.notebook { - background-color: $bg_color; -} - -// Adjust devehlp and symbol panel styling -DhSidebar entry.search, -SymbolTree entry.search { - border-left: none; - border-right: none; - border-top: none; - border-radius: 0px; -} - -// Command Bar styling -entry.gb-command-bar-entry.flat, -entry.gb-command-bar-entry.flat:focus { - font-family: Monospace; - color: $osd_fg_color; - background-image: none; - background-color: opacify($osd_bg_color, 1); - padding: 6px 6px 6px 6px; +.gedit-search-entry-occurrences-tag { + color: transparentize($fg_color, 0.4); border: none; - - &:selected, - &:selected:focus { - @extend %selected_items; - } -} - -GbTerminalView { - background-color: $base_color; - color: $fg_color; -} - -GbSourceStyleSchemeWidget GtkSourceView { - font-family: Monospace; -} - -scrolledwindow.gb-linked-scroller { - border-top: none; -} - -// Disable various animatinos that are enabled by default and really annoying -// to the overall flow of Builder. -GbSearchDisplayGroup list row -GbDocumentStack button { - transition: none; -} - -GbViewStack box.header.notebook, -GbEditorWorkspace > paned > box > box.header.notebook { - border-bottom: 1px solid $borders_color; + margin: 2px; + padding: 2px; } -GbViewStack.focused box.header.notebook { - background-color: $base_color; - - button.dim-label { opacity: 1; } -} +//GeditFileBrowserWidget toolbar { +// border-bottom: 1px solid $borders_color; +//} // // Epiphany @@ -502,19 +331,6 @@ button.documents-favorite:active:hover { border-image: url("assets/thumbnail-frame.png") 3 3 6 4; } -// -// Totem -// -//TotemGrilo.vertical GdMainView.frame { -// border-width: 0; -//} - -// -// Synapse -// -//SynapseGuiSelectionContainer *:selected, -//SynapseGuiViewVirgilio *:selected { background-color: $selected_bg_color; } - // // Transmission // diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 26238af..0a0dfab 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -91,9 +91,6 @@ //NemoWindow.background > GtkGrid > paned > separator, //MarlinViewWindow.background > GtkBox > paned > separator { background-color: $dark_sidebar_border } -// Fix Nautilus transparency issues -//.nautilus-window NautilusWindowSlot { background-color: $base_color; } - //GtkFileChooserDialog { // // &.background.csd, &.background { background-color: $dark_sidebar_bg } @@ -127,13 +124,6 @@ //} // Gedit -//GeditWindow.background { -// &.csd { background-color: transparent; } -// -// .gedit-side-panel-paned .pane-separator { background-color: $dark_sidebar_border; } -// .gedit-bottom-panel-paned .pane-separator { background-color: $borders_color; } -//} - .gedit-bottom-panel-paned { background-color: $base_color; } .gedit-document-panel { -- 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') 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 f056240b29e2b45af72663af2c203bf9b88bcec4 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 9 Mar 2016 19:53:13 +0100 Subject: fix nautilus searchbar --- common/gtk-3.0/3.20/sass/_applications.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 01315ce..90c29e0 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -88,10 +88,11 @@ &:selected, &:selected:focus { color: mix($selected_fg_color, $selected_bg_color, 80%); } } -.nautilus-window searchbar { +.nautilus-window { // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 - border-color: transparent; - box-shadow: inset 0 -1px $borders_color; + + searchbar { border-top: 1px solid $borders_color; } + .searchbar-container { margin-top: -1px; } } .nautilus-window notebook, -- 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') 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') 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') 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 8aabfd1921bafc5f5f7fa1b7a8e3d42bedd8ab20 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 10 Mar 2016 16:28:57 +0100 Subject: fix floating bars --- common/gtk-3.0/3.20/sass/_applications.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 90c29e0..09efc45 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -426,18 +426,20 @@ button.documents-favorite:active:hover { // Floating Bar // .floating-bar { + padding: 1px; background-color: $selected_bg_color; color: $selected_fg_color; + border-radius: 2px 2px 0 0; - &.top { border-radius: 0 0 2px 2px; } - &.right { border-radius: 2px 0 0 2px; } - &.bottom { border-radius: 2px 2px 0 0; } - &.left { border-radius: 0 2px 2px 0; } + &.bottom.left { border-top-left-radius: 0; } + &.bottom.right { border-top-right-radius: 0; } button { - background-color: transparent; - box-shadow: none; border: none; + border-radius: 0; + min-height: 0; + + @extend %selected-button; } } -- cgit v1.2.3 From 5065726712ddb82c7bc3e862fb4fb3a3eb16ef43 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 10 Mar 2016 16:35:27 +0100 Subject: fix nautilus/documents entry tag --- common/gtk-3.0/3.20/sass/_applications.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 09efc45..f5819b0 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -300,8 +300,8 @@ button.documents-favorite:active:hover { } .documents-entry-tag { - background-color: $selected_bg_color; color: $selected_fg_color; + background: $selected_bg_color; border-radius: 2px; border-width: 0; margin: 2px; @@ -309,11 +309,11 @@ button.documents-favorite:active:hover { &:hover { color: $selected_fg_color; - background-color: lighten($selected_bg_color, 4%); + background: lighten($selected_bg_color, 4%); } &:active { color: $selected_fg_color; - background-color: darken($selected_bg_color, 4%); + background: darken($selected_bg_color, 4%); } toolbar .linked & button { -- cgit v1.2.3 From c5e9156df500fd123e4964a2495c2f6d95996a4f Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Thu, 10 Mar 2016 17:05:42 +0100 Subject: more nautilus fixes --- common/gtk-3.0/3.20/sass/_applications.scss | 17 ++++++++++++++--- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index f5819b0..5cc7d76 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -101,9 +101,7 @@ } button.nautilus-circular-button.image-button { - border-radius: 50%; - -gtk-outline-radius: 50%; - padding: 8px; + @extend button.circular; } $disk_space_unknown: transparentize($fg_color, 0.5); @@ -131,6 +129,19 @@ $disk_space_free: darken($bg_color, 3%); // View .nautilus-list-view .view { border-bottom: 1px solid $borders_color; } +@keyframes needs_attention_keyframes { + 0% { @include button(header-hover); } + 100% { @include button(header-active) } +} + +.nautilus-operations-button-needs-attention { + animation: needs_attention_keyframes 2s ease-in-out; +} +.nautilus-operations-button-needs-attention-multiple { + animation: needs_attention_keyframes 3s ease-in-out; + animation-iteration-count: 3; +} + // // Nemo // diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 0a0dfab..1e8177c 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -46,7 +46,7 @@ &.maximized placessidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } - button.sidebar-button { + row:not(:selected) button.sidebar-button { color: $dark_sidebar_fg; &:hover { @include button(osd-hover); } -- 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/_applications.scss | 49 ++++++--------- common/gtk-3.0/3.20/sass/_common.scss | 3 +- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 69 ++++++---------------- 3 files changed, 38 insertions(+), 83 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index 5cc7d76..b180637 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -1,22 +1,14 @@ // // Tab overrides // -//GeditNotebook.notebook, +.gedit-bottom-panel-paned notebook { //ScratchMainWindow .notebook, //EphyNotebook.notebook, //MidoriNotebook .notebook, //TerminalWindow .notebook, //PantheonTerminalPantheonTerminalWindow .notebook { -// -// header.top tab { -// &:active { -// box-shadow: inset 0 1px $borders_color, -// inset 0 -1px $borders_color, -// inset 1px 0 $borders_color, -// inset -1px 0 $borders_color; -// } -// } -//} + > header.top > tabs > tab:checked { box-shadow: inset 0 -1px $borders_color; } +} //TerminalWindow .notebook, //PantheonTerminalPantheonTerminalWindow .notebook { @@ -220,32 +212,33 @@ $disk_space_free: darken($bg_color, 3%); .gedit-document-panel { row button { + min-width: 22px; + min-height: 22px; + padding: 0; + color: transparent; - background-image: none; - background-color: transparent; + background: none; border: none; box-shadow: none; - padding: 4px; - & image { color: inherit; } + + image { color: inherit; } } - .prelight-row button { + + row:hover:not(:selected) button { color: mix($bg_color, $fg_color, 35%); + + &:hover { color: lighten(red, 15%); } + &:active { color: $fg_color; } } - row button:hover, - .prelight-row button:hover { - color: lighten(red, 15%); - } - .prelight-row:selected button:hover { + + row:hover:selected button:hover { color: lighten(red, 20%); - background-image: none; - background-color: transparent; + background: none; border: none; box-shadow: none; + &:active { color: $selected_fg_color; } } - .prelight-row button:active { - color: $fg_color; - } } .gedit-document-panel-dragged-row { @@ -275,10 +268,6 @@ $disk_space_free: darken($bg_color, 3%); padding: 2px; } -//GeditFileBrowserWidget toolbar { -// border-bottom: 1px solid $borders_color; -//} - // // Epiphany // 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; } } } diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 1e8177c..42d08a4 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -131,64 +131,29 @@ .maximized & { background-color: opacify($dark_sidebar_bg, 1); } - row { color: $dark_sidebar_fg; } - row { + color: $dark_sidebar_fg; background-color: transparentize($dark_sidebar_fg, 1); - border: solid transparentize($dark_sidebar_fg, 1); - border-width: 3px 2px 3px 2px; - } - row:hover { - border: solid transparentize($dark_sidebar_fg, 0.85); - border-width: 3px 2px 3px 2px; - background-color: transparentize($dark_sidebar_fg, 0.85); - } - row:active { - color: $selected_fg_color; - background-color: $selected_bg_color; - border: solid $selected_bg_color; - border-width: 3px 2px 3px 2px; - button { color: $selected_fg_color; } - } - row:selected, row:selected:hover { - color: $selected_fg_color; - background-color: $selected_bg_color; - border: solid $selected_bg_color; - border-width: 3px 2px 3px 2px; - } - .prelight-row button:active { - color: $dark_sidebar_fg; + &:hover { + background-color: transparentize($dark_sidebar_fg, 0.85); + } + &:active { + color: $selected_fg_color; + background-color: $selected_bg_color; + + button { color: $selected_fg_color; } + } + &:selected, &:selected:hover { + color: $selected_fg_color; + background-color: $selected_bg_color; + } + &:hover:not(:selected) button:active { + color: $dark_sidebar_fg; + } } } -//GeditFileBrowserWidget { -// background-color: $dark_sidebar_bg; -// -// .maximized & { background-color: opacify($dark_sidebar_bg, 1); } -// -// scrollbar { @extend %dark_sidebar_scrollbar; } -// -// .horizontal { -// background-color: transparent; -// border-color: darken($dark_sidebar_bg, 7%); -// -// button { @extend %dark_sidebar_button; } -// combobox { color: $dark_sidebar_fg; } -// } -//} - -//GeditWindow.background.csd GeditFileBrowserView.view { -// -// background-color: transparent; -// color: $dark_sidebar_fg; -// -// &.expander { -// color: $dark_sidebar_fg; -// &:hover { color: $selected_bg_color; } -// } -//} - %dark_sidebar_button { @include button(osd); -- cgit v1.2.3 From c73bd06f590e6d249de9f79aa8e1d8d36bb6f115 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Fri, 11 Mar 2016 12:11:31 +0100 Subject: fix a thing --- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 42d08a4..3390c96 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -31,6 +31,7 @@ .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } + &.has-open-popup, &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } &:selected, &:selected:hover, &:active:hover { -- 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') 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') 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') 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') 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') 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') 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') 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') 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/_colors.scss | 2 + common/gtk-3.0/3.20/sass/_common.scss | 447 ++++++++++++--------- common/gtk-3.0/3.20/sass/_drawing.scss | 28 +- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 16 +- 4 files changed, 269 insertions(+), 224 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_colors.scss b/common/gtk-3.0/3.20/sass/_colors.scss index 47daa0f..6ff238a 100644 --- a/common/gtk-3.0/3.20/sass/_colors.scss +++ b/common/gtk-3.0/3.20/sass/_colors.scss @@ -24,6 +24,8 @@ $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; +$drop_target_color: #4e9a06; + //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); 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%); } + } } diff --git a/common/gtk-3.0/3.20/sass/_drawing.scss b/common/gtk-3.0/3.20/sass/_drawing.scss index 8ccaea3..942e1fd 100644 --- a/common/gtk-3.0/3.20/sass/_drawing.scss +++ b/common/gtk-3.0/3.20/sass/_drawing.scss @@ -1,18 +1,5 @@ // Drawing mixins -// generic drawing of more complex things - -@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { -// -// Helper function to stack up to 4 box-shadows; -// - - @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } - @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } - @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } - @else { box-shadow: $shadow1; } -} - // Entries @mixin entry($t) { @@ -163,24 +150,22 @@ // // insensitive button // - color: $insensitive_fg_color; + label, & { color: $insensitive_fg_color; } + border-color: transparentize($button_border, 0.45); background-color: transparentize($button_bg, 0.45); - - > label { color: inherit; } } @else if $t==insensitive-active { // // insensitive pushed button // - color: transparentize($selected_fg_color, 0.2); + label, & { color: transparentize($selected_fg_color, 0.2); } + border-color: transparentize($selected_bg_color, 0.25); background-color: transparentize($selected_bg_color, 0.25); opacity: 0.6; - - > label { color: inherit; } } @if $t==header-normal { @@ -218,11 +203,10 @@ // // insensitive header-bar button // - color: transparentize($header_fg, 0.45); + label, & { color: transparentize($header_fg, 0.45); } + background-color: transparentize($header_bg, 1); border-color: transparentize($header_bg, 1); - - > label { color: inherit; } } @else if $t==header-insensitive-active { diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 3390c96..5dd29cf 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -21,22 +21,26 @@ background-color: $dark_sidebar_bg; - row.sidebar-placeholder-row { border: 1px solid $selected_bg_color; } - - row.sidebar-new-bookmark-row { background-color: lighten($dark_sidebar_bg, 10%); } + row.sidebar-new-bookmark-row { + &, image { color: $selected_bg_color; } + } - row.activatable { + row { border: none; color: $dark_sidebar_fg; - .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } + &:not(:selected):not(:disabled):not(:active):not(.sidebar-new-bookmark-row) { + .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } + } &.has-open-popup, &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } + &:disabled { + &, label, image { color: transparentize($dark_sidebar_fg, 0.6); } + } &:selected, &:selected:hover, &:active:hover { @extend %selected_items; - .sidebar-icon { color: inherit; } } } -- 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') 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 ++++--- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 27 ++++++++++++++++------ 2 files changed, 25 insertions(+), 10 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') 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; } } diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 5dd29cf..11722bf 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -21,26 +21,39 @@ background-color: $dark_sidebar_bg; - row.sidebar-new-bookmark-row { - &, image { color: $selected_bg_color; } - } - row { border: none; color: $dark_sidebar_fg; - &:not(:selected):not(:disabled):not(:active):not(.sidebar-new-bookmark-row) { - .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } - } + .sidebar-icon { color: transparentize($dark_sidebar_fg, 0.4); } &.has-open-popup, &:hover { background-color: transparentize($dark_sidebar_fg, 0.85); } + &:disabled { &, label, image { color: transparentize($dark_sidebar_fg, 0.6); } } + &:selected.has-open-popup, &:selected, &:selected:hover, &:active:hover { @extend %selected_items; + + .sidebar-icon { color: inherit; } + } + + &.sidebar-new-bookmark-row { + color: $selected_bg_color; + + .sidebar-icon { color: inherit; } + } + + &:drop(active):not(:disabled) { + &, label, .sidebar-icon { color: $drop_target_color; } + + &:selected { + &, label, .sidebar-icon { 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') 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 5e982902a32c81844aefdb45d736a2f93db74d50 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 21:52:27 +0100 Subject: change drop target color --- common/gtk-3.0/3.20/sass/_colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_colors.scss b/common/gtk-3.0/3.20/sass/_colors.scss index 6ff238a..501c094 100644 --- a/common/gtk-3.0/3.20/sass/_colors.scss +++ b/common/gtk-3.0/3.20/sass/_colors.scss @@ -24,7 +24,7 @@ $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; -$drop_target_color: #4e9a06; +$drop_target_color: #F08437; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); -- cgit v1.2.3 From 73dabfebd980f9fa8417e7072a3ad4394a62666a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 22:13:21 +0100 Subject: bring back dark sidebars in filechooser dialog --- common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 53 ++++++++-------------- 1 file changed, 19 insertions(+), 34 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss index 11722bf..0a39e43 100644 --- a/common/gtk-3.0/3.20/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -1,18 +1,19 @@ //NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar -//GtkFileChooserDialog, //NemoWindow, .nautilus-window { paned > separator { - background: $dark_sidebar_border; + background-image: linear-gradient(to top, $dark_sidebar_border); &:dir(ltr) { margin-left: -1px; } &:dir(rtl) { margin-right: -1px; } } } +filechooser paned > separator { background-image: linear-gradient(to top, $dark_sidebar_border); } + // Dark transparent sidebars -//GtkFileChooserDialog, +filechooser, .nautilus-window { &.csd.background, placessidebar list { background-color: transparent; } @@ -109,37 +110,21 @@ //NemoWindow.background > GtkGrid > paned > separator, //MarlinViewWindow.background > GtkBox > paned > separator { background-color: $dark_sidebar_border } -//GtkFileChooserDialog { -// -// &.background.csd, &.background { background-color: $dark_sidebar_bg } -// scrolledwindow.sidebar { background-color: transparent } -// -// // Yeah, this is ugly, but prevents a transparent background in the image preview box -// paned > .vertical > .horizontal { background-color: $bg_color; } -// -// // fix for non gnome environments -// .dialog-action-box { background-color: $bg_color } -// -// .dialog-vbox > .frame { -// color: $dark_sidebar_fg; -// border-color: transparent; -// } -// GtkFileChooserWidget > actionbar > revealer > .action-bar.frame { -// background-color: transparent; -// border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); -// } -// -// GtkFileChooserWidget > actionbar > revealer > .action-bar.frame, -// .dialog-vbox > .frame { -// -// button { @extend %dark_sidebar_button; } -// entry { @extend %dark_sidebar_entry; } -// -// @extend %osd_check_radio; -// -// label, combobox { color: $dark_sidebar_fg; } -// } -//} +filechooser { + + actionbar { + color: $dark_sidebar_fg; + background-color: $dark_sidebar_bg; + border-color: if($variant =='light', darken($dark_sidebar_bg, 7%), darken($dark_sidebar_bg, 15%)); + + button { @extend %dark_sidebar_button; } + entry { @extend %dark_sidebar_entry; } + + @extend %osd_check_radio; + + label, combobox { color: $dark_sidebar_fg; } + } +} // Gedit .gedit-bottom-panel-paned { background-color: $base_color; } -- cgit v1.2.3 From 77ac8008b1351898fe0b6ce6f212cf6f4d2fe54a Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 22:30:47 +0100 Subject: fix xfce panel buttons --- common/gtk-3.0/3.20/sass/_applications.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index b180637..a7a749d 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -409,15 +409,16 @@ button.documents-favorite:active:hover { color: $panel_fg; background-color: transparentize($panel_bg, 1); border-radius: 0; + border: none; &:hover { border: none; background-color: lighten($panel_bg, 10%); } &:active, &:checked { - color: $selected_bg_color; + color: $selected_fg_color; border: none; - background-color: darken($panel_bg, 7%); + background-color: $selected_bg_color; } } } -- cgit v1.2.3 From 8b229509cffad261c1c8895f1225652de2bf21e6 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 23 Mar 2016 22:36:02 +0100 Subject: fix floating bar in epiphany --- common/gtk-3.0/3.20/sass/_applications.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'common/gtk-3.0/3.20/sass') diff --git a/common/gtk-3.0/3.20/sass/_applications.scss b/common/gtk-3.0/3.20/sass/_applications.scss index a7a749d..478dc5d 100644 --- a/common/gtk-3.0/3.20/sass/_applications.scss +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -426,7 +426,7 @@ button.documents-favorite:active:hover { // // Floating Bar // -.floating-bar { +.nautilus-window .floating-bar { padding: 1px; background-color: $selected_bg_color; color: $selected_fg_color; -- 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') 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') 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