diff options
Diffstat (limited to 'common/gtk-3.0/3.20/sass')
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_applications.scss | 609 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_colors-public.scss | 66 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_colors.scss | 96 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_common.scss | 3087 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_drawing.scss | 364 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_granite.scss | 218 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_lightdm.scss | 110 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_transparent_widgets.scss | 196 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/_unity.scss | 59 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk-dark.scss | 13 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk-darker.scss | 13 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk-solid-dark.scss | 13 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk-solid-darker.scss | 13 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk-solid.scss | 13 | ||||
| -rw-r--r-- | common/gtk-3.0/3.20/sass/gtk.scss | 13 |
15 files changed, 4883 insertions, 0 deletions
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..478dc5d --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_applications.scss @@ -0,0 +1,609 @@ +// +// Tab overrides +// +.gedit-bottom-panel-paned notebook { +//ScratchMainWindow .notebook, +//EphyNotebook.notebook, +//MidoriNotebook .notebook, +//TerminalWindow .notebook, +//PantheonTerminalPantheonTerminalWindow .notebook { + > header.top > tabs > tab:checked { box-shadow: inset 0 -1px $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; +// } +// } +//} + +// +// 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%); } +} + +.nautilus-window { + // Workaround for https://bugzilla.gnome.org/show_bug.cgi?id=724096 + + searchbar { border-top: 1px solid $borders_color; } + .searchbar-container { margin-top: -1px; } +} + +.nautilus-window notebook, +.nautilus-window notebook > stack:not(:only-child) searchbar { + background-color: $base_color; +} + +button.nautilus-circular-button.image-button { + @extend button.circular; +} + +$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 +.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 +// +.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 +// +.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 { + min-width: 22px; + min-height: 22px; + padding: 0; + + color: transparent; + background: none; + border: none; + box-shadow: none; + + image { color: inherit; } + } + + row:hover:not(:selected) button { + color: mix($bg_color, $fg_color, 35%); + + &:hover { color: lighten(red, 15%); } + &:active { color: $fg_color; } + } + + row:hover:selected button:hover { + color: lighten(red, 20%); + background: none; + border: none; + box-shadow: none; + + &:active { color: $selected_fg_color; } + } +} + +.gedit-document-panel-dragged-row { + border: 1px solid $borders_color; + background-color: darken($bg_color, 10%); + color: $fg_color; +} + +.gedit-side-panel-paned statusbar { + border-top: 1px solid $borders_color; + background-color: $bg_color; +} + +.gedit-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; +} + +.gedit-search-entry-occurrences-tag { + color: transparentize($fg_color, 0.4); + border: none; + margin: 2px; + padding: 2px; +} + +// +// 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 { + color: $selected_fg_color; + background: $selected_bg_color; + border-radius: 2px; + border-width: 0; + margin: 2px; + padding: 4px; + + &:hover { + color: $selected_fg_color; + background: lighten($selected_bg_color, 4%); + } + &:active { + color: $selected_fg_color; + background: 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; +} + +// +// 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; + border: none; + + &:hover { + border: none; + background-color: lighten($panel_bg, 10%); + } + &:active, &:checked { + color: $selected_fg_color; + border: none; + background-color: $selected_bg_color; + } + } +} + +// +// Floating Bar +// +.nautilus-window .floating-bar { + padding: 1px; + background-color: $selected_bg_color; + color: $selected_fg_color; + border-radius: 2px 2px 0 0; + + &.bottom.left { border-top-left-radius: 0; } + &.bottom.right { border-top-right-radius: 0; } + + button { + border: none; + border-radius: 0; + min-height: 0; + + @extend %selected-button; + } +} + +// 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..501c094 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_colors.scss @@ -0,0 +1,96 @@ +// 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; + +$drop_target_color: #F08437; + +//insensitive state derived colors +$insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); +$insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); + +$header_bg: red; +@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#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..23c9e14 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_common.scss @@ -0,0 +1,3087 @@ +@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, +%view { + color: $text_color; + background-color: $base_color; + + &:selected { + &, &:focus { + @extend %selected_items; + border-radius: 2px; + } + } +} + +.view, +textview { + text { + @extend %view; + + selection { &:focus, & { @extend %selected_items; }} + } +} + +iconview { @extend .view; } + +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 { + @extend %selected_items; + + outline-offset: -2px; + } + } +} + +label { + &.separator { + @extend .dim-label; + + color: $fg_color; + } + + 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; } + } +} + +.dim-label { + opacity: 0.55; +} + +assistant { + .sidebar { + background-color: $base_color; + border-top: 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: $base_color; +} + +%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: 22px; + border: 1px solid; + padding: 2px 8px; + + caret-color: currentColor; + 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 { + &, &:focus { + min-height: 0; + padding: 2px; + background-image: none; + border-color: transparent; + border-radius: 0; + } + } + + &:focus { + background-clip: border-box; + @include entry(focus); + } + + &:disabled { @include entry(insensitive); } + + selection { &:focus, & { @extend %selected_items; }} + + // error and warning style + @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%)); + + image { color: $selected_fg_color; } + + &: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; + } + } + } + + &:drop(active) { + &:focus, & { + border-color: $drop_target_color; + box-shadow: none; + } + } + + .osd & { + @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 { + 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; } + + .linked.vertical > &, + .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 +// +// 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: 22px; + min-width: 20px; + transition: $_button_transition; + border: 1px solid; + border-radius: 3px; + padding: 2px 6px; + + @include button(normal); + + separator { margin: 4px 1px; } + + &.flat { + @include button(undecorated); + // 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 { + @include button(active); + + background-clip: if($variant=='light', border-box, padding-box); + 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); + } + } + + &.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: none; + } + + // 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 { + padding: 0; + min-height: 36px; + min-width: 36px; + } + + &: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); } + } + } + .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) { + &.#{$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); } + } + } + + .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, > image { @extend %needs_attention; } + + &:active, &:checked { + > label, > 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; } + + .linked.vertical > &, + .linked.vertical > &:hover, + .linked.vertical > &:active, + .linked.vertical > &:checked { @extend %linked_vertical; } +} + +// 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 +@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true', + $e_border:$entry_border, $b_border:$button_border) { + + $_border: if($vert=='false', left, top); + + @if $entry_rules=='true' { + > entry + entry { border-#{$_border}-color: transparentize($e_border, $a); } + + > entry.error + entry, + > entry + entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); } + + > 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));} + + @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}:not(:last-child), + > entry + entry#{$e_type}:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); } + + > entry#{$e_type}:not(:only-child) { + + entry, + + button, + + 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); } + } + @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: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, because path-bars are bugged +@mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) { + + > button + button { border-left-style: none; } + + > button:hover:not(:checked):not(:active):not(:only-child) { + + &:hover { + box-shadow: inset 1px 0 $sep_color, + inset -1px 0 $sep_color; + } + &:first-child:hover { box-shadow: inset -1px 0 $sep_color; } + &:last-child:hover { box-shadow: inset 1px 0 $sep_color; } + } +} + +// 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; +} + +%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; + } +} + +%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: 24px; + padding-left: 8px; + padding-right: 8px; + outline-offset: -3px; + 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 { &, arrow { @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 { + &.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%); } + } + + @at-root %link_selected, + &: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 { + + &:drop(active) { box-shadow: none; } + + button:active { color: $selected_fg_color; } + &:disabled { color: $insensitive_fg_color; } + + &:not(.vertical) { + entry { min-width: 28px; } + + button, entry { @extend %linked; } + + &:dir(ltr) entry, + &:dir(rtl) button.up { border-radius: 3px 0 0 3px; } + + > 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); } + + > 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 { + padding-left: 4px; + padding-right: 4px; + min-width: 0; + + @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); } + + > entry:drop(active) + button { border-top-color: $drop_target_color; } + } +} + +// +// 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; + min-width: 16px; + } + + &:drop(active) button.combo { @extend button:drop(active); } + + &.linked { + button:nth-child(2) { + &:dir(ltr) { @extend %linked:last-child; } + &:dir(rtl) { @extend %linked:first-child; } + } + } + + .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), + &:dir(rtl) { @extend %linked_middle; } // specificity bump + } + + .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 > & > 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; } +} + +// +// 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 & { 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 + + &.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) { + switch, + scale, + entry, + spinbutton, + button { + margin-right: 1px; + margin-bottom: 1px; + } + } +} + +.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 + 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); + + .csd & { background-color: $header_bg_backdrop; } + } + + .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 { + min-height: 28px; + padding: 0 3px; + 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), + &:backdrop:not(headerbar) { + window > &, + window.csd > & { + padding: 0; + border: none; + background: none; + } + } + // Separator in Gnome Tweak Tool + 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;} + + ~ headerbar { border-top-left-radius: 0; } + &:first-child { border-top-right-radius: 0; } + } +} + +// Only extending headerbar avoids some problems (Gnome Documents searchbar) +headerbar { + separator.titlebutton { @extend %header_separator; } + + @extend %header_widgets; + + entry, button, separator { + margin-top: 6px; + margin-bottom: 6px; + } +} + +%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 { + + // Headerbar Entries + entry { + @include entry(header-normal); + + &:backdrop { opacity: 0.85; } + + &:focus { + @include entry(header-focus); + background-clip: if($darker=='false' and $variant=='light', border-box, padding-box); + + image { color: $selected_fg_color; } + } + &: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 + + // 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, + .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), .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; } + } + + // special case for path-bars and stack-switchers + .linked:not(.vertical):not(.path-bar).stack-switcher, + .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); } + + &, &:hover, &:active, &:checked, &:disabled { @extend %linked; } + } + + @include pathbar_linking_rules($sep_color:$header_button_border); + } + // use linking rules for entries only + .linked:not(.vertical):not(.path-bar) { + @include linking_rules( $a:0.5, + $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 + @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:not(.vertical) { + &:focus { + color: $selected_fg_color; + caret-color: $selected_fg_color; + } + button { + &,&:disabled { @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); } + } + + > 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 + combobox { + &:disabled { color: transparentize($header_fg, 0.6); } + + &.linked button { + @include entry(header-normal); + + &:hover { @include entry(header-focus); box-shadow: none; } + &:disabled { @include entry(header-insensitive); } + } + &.linked 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; } } + } + } + &.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 + 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 { + &.text-button, &.image-button, & { + padding-left: 6px; + padding-right: 6px; + } + + &.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; } + } + + &.slider-button, + &:not(.image-button):not(.text-button) { + padding-left: 1px; + padding-right: 1px; + } + + image { + padding-left: 4px; + padding-right: 4px; + } +} + +// +// 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 { + &, &: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; + } + } + + &:disabled { + color: $insensitive_fg_color; + + &:selected { + color: mix($selected_fg_color, $selected_bg_color, 40%); + } + } + + &.separator { + min-height: 2px; + color: transparentize(black, 0.9); + } + + &: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 { + -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, &.progressbar:focus { // progress bar in treeviews + color: $selected_fg_color; + border-radius: 3px; + background-image: linear-gradient(to bottom, $selected_bg_color); + + &:selected, &:selected:focus { + color: $selected_bg_color; + box-shadow: none; + background-image: linear-gradient(to bottom, $selected_fg_color); + } + } + &.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; + border-width: 0; + } + + header { + button { + $_column_header_color: mix($fg_color,$base_color,80%); + + min-height: 0; + min-width: 0; + padding: 3px 6px; + font-weight: bold; + + color: $_column_header_color; + background-color: $base_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; + } + &: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; + } + } +} + +// +// 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 { + margin: 2px 0; + background-color: $_menu_bg; + } + + menuitem { + min-height: 16px; + min-width: 40px; + padding: 4px; + 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 { + border-style: none; + background-color: transparent; + } + + &, .csd & { + &.osd, &.magnifier { @extend %osd; } + &.touch-selection { @extend .context-menu } + + &.osd { @extend %osd; } + } +} + +//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 { + padding: 0; + + &.frame { + border: 1px solid $borders_color; + + > 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 { + padding: 2px; + background-color: $bg_color; + + &.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; + + > tabs > tab { + padding: 2px 10px; + min-width: 20px; + min-height: 20px; + + outline-offset: -4px; + + border: 1px solid transparent; + border-#{$_bpos}: none; + + // tab overlap + @if $_pos==top or $_pos==bottom { margin-right: -1px; } + @else { margin-bottom: -1px; } + + // 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; } + } + } + } + // overflow arrows + &.top, &.bottom { + > 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'); + &:last-child { margin-top: 2px; } + } + > tabs > arrow.down { + -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); + &:first-child { margin-bottom: 2px; } + } + } + > 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 colors + > tabs > tab { + color: $insensitive_fg_color; + background-color: transparentize($base_color, 1); + + &:hover:not(:checked) { + color: mix($fg_color, $insensitive_fg_color, 50%); + background-color: transparentize($base_color, 0.5); + border-color: $borders_color; + box-shadow: inset 0 -1px $borders_color; + } + &:checked { + color: $fg_color; + background-color: $base_color; + border-color: $borders_color; + } + // close button + button.flat { + min-height: 22px; + min-width: 16px; + padding: 0; + color: mix($bg_color, $fg_color, 35%); + + &: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 * { + -GtkScrollbar-has-backward-stepper: false; + -GtkScrollbar-has-forward-stepper: false; + } + + $_slider_margin: 3px; + $_slider_fine_tune_margin: 4px; + + button { border: none; } + + &.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'); } + &.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); } + } + + &.overlay-indicator { + &:not(.dragging):not(.hovering) { // Overlay scrolling indicator + opacity: 0.4; + + 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; + } + + &.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, + &.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; + } + + &.vertical { + + &.fine-tune slider { + min-width: 4px; + margin: $_slider_fine_tune_margin; + } + + slider { + min-height: 42px; + min-width: 6px; + margin: $_slider_margin; + } + + trough { + &:dir(ltr) { border-left-style: solid; } + &:dir(rtl) { border-right-style: solid; } + } + } + + &.horizontal { + + &.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; } + } +} + +// +// 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}, + treeview.#{$w}#{$s} { + -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), + 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"), + 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, + treeview.#{$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: 2px 0; + outline-offset: 0; + } + + label:not(:only-child) { + &:first-child { margin-left: 4px; } + &:last-child { margin-right: 4px; } + } +} + +check, +radio { + min-width: 16px; + min-height: 16px; + margin: 0 2px; + + &:only-child, + menu menuitem & { margin: 0; } +} + +// +// GtkScale +// +scale { + $_marks_length: 3px; + $_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_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; + } + &.vertical indicator { + min-height: 1px; + min-width: $_marks_length; + } + + &.fine-tune { + padding: 3px; + + trough, fill, highlight { border-radius: 5px; } + + slider { margin: -4px; } + } + + trough, fill, highlight { + border-radius: 2.5px; + } + + 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; + 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%)); + + outline-offset: 2px; + -gtk-outline-radius: 2px; + 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: transparentize($selected_bg_color, 0.5); + } + &: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); } + } +} + +// +// 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); + } +} + +// +// Print dialog +// +printdialog { + paper { + border: 1px solid $borders_color; + background: white; + padding: 0; + } + + .dialog-action-box { margin: 12px; } +} + +// +// Frames +// +frame > border, +.frame { + margin: 0; + padding: 0; + border-radius: 0; + border: 1px solid $borders_color; + + &.flat { border-style: none; } +} + +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 { + &:not(:hover) { transition: all 150ms $ease-out-quad; } + + &:selected { + @extend %selected_items; + + button { @extend %selected-button; } + } + + &.activatable { + &.has-open-popup, + &:hover { background-color: if($variant == 'light', transparentize(black, 0.95), transparentize(white, 0.97)); } + + &:active { color: $fg_color; } + &:disabled { + color: $insensitive_fg_color; + image { color: inherit; } + } + + &:selected { + &:active { color: $selected_fg_color; } + + &.has-open-popup, + &:hover { background-color: mix(black, $selected_bg_color, 10%); } + } + } +} + +// +// 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 + + .titlebar { background-color: $header_bg; border-bottom: 1px solid darken($header_bg, 7%) } + + .dialog-action-area button { padding: 8px; min-height: 0; } + + &.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 { + border-bottom-style: none; + + @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; + } + %last_button { + border-radius: 0 0 3px 0; + border-right-style: none; + } + %first_button { + border-radius: 0 0 0 3px; + border-left-style: none; + } + %single_button { + border-radius: 0 0 3px 3px; + border-left-style: none; + border-right-style: none; + } + } +} + +// +// Filechooser +// +filechooser { + #pathbarbox { border-bottom: 1px solid transparentize($borders_color, 0.5); } +} + +filechooserbutton:drop(active) { + box-shadow: none; + border-color: transparent; +} + +// +// Sidebar +// +.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), + &.right { + border-left: 1px solid $borders_color; + border-right-style: none; + } + + list { background-color: transparent; } + + 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; + + > label { + padding-left: 6px; + padding-right: 6px; + } + &.needs-attention > label { + @extend %needs_attention; + background-size: 6px 6px, 0 0; + } + } +} + +placessidebar { + > viewport.frame { border-style: none; } + + 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: 0 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: 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 }; + } + + &.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; } + + &:drop(active):not(:disabled) { + &, label, image { color: $drop_target_color; } + + box-shadow: inset 0 1px $drop_target_color, + inset 0 -1px $drop_target_color; + + &:selected { + &, label, image { color: $selected_fg_color; } + background-color: $drop_target_color; + } + } + } +} + +// +// Placesview +// +placesview { + .server-list-button > image { + -gtk-icon-transform: rotate(0turn); + } + + .server-list-button:checked > image { + transition: 200ms $ease-out-quad; + -gtk-icon-transform: rotate(-0.5turn); + } +} + +// +// 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 { + 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; + } + } + + &.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 { + margin: 0; + padding: 0; + 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 { + margin: 0; + padding: 0; + background-repeat: repeat-x, repeat-x; + background-position: bottom, top; + } + } +} + +// +// GtkInfoBar +// +infobar { border-style: none; } + +.info, +.question, +.warning, +.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; } +} + + +// +// 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; + + label { padding: 4px; } + } + + border-radius: 2px; + box-shadow: none; + + decoration { background-color: transparent; } + + * { //Yeah this is ugly + 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; + } + } +} + +// colorscale popup +colorchooser .popover.osd { border-radius: 3px; } + +// +// Misc +// +//content view (grid/list) +.content-view { + background-color: $base_color; + + &:hover { -gtk-icon-effect: highlight; } + + rubberband { @extend rubberband; } +} + +.scale-popup { + .osd & { @extend %osd; } + + button { // +/- buttons on GtkVolumeButton popup + &:hover { + @include button(hover); + } + } +} + +// 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 { + 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: 2.5px; + box-shadow: inset 0px -2px 0px if($variant=='light', transparentize(black, 0.95), transparentize(black, 0.85)); +} + +stackswitcher button { + &.text-button { min-width: 80px; } + &.circular { min-width: 0; } +} + +// +// Dnd +// +*:drop(active):focus, +*:drop(active) { + box-shadow: inset 0 0 0 1px $drop_target_color; +} + +// +// 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)); + } + .fullscreen &, + .tiled & { + 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; + min-height: 0; + margin: 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; } + } + // Load png assets for each button + @each $k in ('close','maximize', 'minimize') { + @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') { + + &.#{$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')); } + } + } + } +} + +// catch all extend +%selected_items { + background-color: $selected_bg_color; + + @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 new file mode 100644 index 0000000..942e1fd --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_drawing.scss @@ -0,0 +1,364 @@ +// Drawing mixins + +// Entries + +@mixin entry($t) { +// +// Entries drawing function +// +// $t: entry type +// + + @if $t==normal { + // + // normal entry + // + 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; + 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; + 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; + 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 + // + label, & { color: $insensitive_fg_color; } + + border-color: transparentize($button_border, 0.45); + background-color: transparentize($button_bg, 0.45); + } + + @else if $t==insensitive-active { + // + // insensitive pushed button + // + 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; + } + + @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 + // + label, & { color: transparentize($header_fg, 0.45); } + + background-color: transparentize($header_bg, 1); + border-color: transparentize($header_bg, 1); + } + + @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..0a39e43 --- /dev/null +++ b/common/gtk-3.0/3.20/sass/_transparent_widgets.scss @@ -0,0 +1,196 @@ +//NemoWindow GtkEventBox { background-color: $bg_color; } // fixes nemo statusbar + +//NemoWindow, +.nautilus-window { + paned > separator { + 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 +filechooser, +.nautilus-window { + + &.csd.background, placessidebar list { background-color: transparent; } + + placessidebar.sidebar { + + background-color: $dark_sidebar_bg; + + row { + border: none; + color: $dark_sidebar_fg; + + .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; + } + } + } + + separator { background-color: transparent; } + + scrollbar { @extend %dark_sidebar_scrollbar } + } + + &.maximized placessidebar.sidebar { background-color: opacify($dark_sidebar_bg, 1); } + + row:not(:selected) button.sidebar-button { + color: $dark_sidebar_fg; + + &:hover { @include button(osd-hover); } + &:active { @include button(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 } + +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; } + +.gedit-document-panel { + background-color: $dark_sidebar_bg; + + .maximized & { background-color: opacify($dark_sidebar_bg, 1); } + + row { + color: $dark_sidebar_fg; + background-color: transparentize($dark_sidebar_fg, 1); + + &: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; + } + } +} + +%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'; |