Add support (beta) for gtk 3.20.

pull/313/head
Dustin Falgout 2016-04-08 23:30:09 -05:00
parent 20a91a61f9
commit 36ceea5cf9
46 changed files with 8562 additions and 0 deletions

View File

@ -4,15 +4,20 @@ GLIB_COMPILE_RESOURCES=glib-compile-resources
RES_DIR=gtk-3.0
SCSS_DIR=$(RES_DIR)/scss
DIST_DIR=$(RES_DIR)/dist
RES_DIR320=gtk-3.20
SCSS_DIR320=$(RES_DIR320)/scss
DIST_DIR320=$(RES_DIR320)/dist
INSTALL_DIR=$(DESTDIR)/usr/share/themes/Numix
all: clean gresource
css:
$(SASS) --update $(SASSFLAGS) $(SCSS_DIR):$(DIST_DIR)
$(SASS) --update $(SASSFLAGS) $(SCSS_DIR320):$(DIST_DIR320)
gresource: css
$(GLIB_COMPILE_RESOURCES) --sourcedir=$(RES_DIR) $(RES_DIR)/gtk.gresource.xml
$(GLIB_COMPILE_RESOURCES) --sourcedir=$(RES_DIR320) $(RES_DIR320)/gtk.gresource.xml
watch: clean
while true; do \
@ -23,6 +28,8 @@ watch: clean
clean:
rm -rf $(DIST_DIR)
rm -f $(RES_DIR)/gtk.gresource
rm -rf $(DIST_DIR320)
rm -f $(RES_DIR320)/gtk.gresource
install: all
install -d -m755 $(INSTALL_DIR)

1
gtk-3.20/assets 120000
View File

@ -0,0 +1 @@
../gtk-3.0/assets

View File

@ -0,0 +1 @@
@import url("resource:///org/numixproject/gtk-3.20/dist/gtk-dark.css");

View File

@ -0,0 +1,67 @@
/*******************
* check and radio *
*******************/
/* draw regular check and radio items using our assets */
.check {
-gtk-icon-source: url("assets/checkbox-unchecked-dark.svg");
}
.check:insensitive {
-gtk-icon-source: url("assets/checkbox-unchecked-insensitive-dark.svg");
}
.check:checked {
-gtk-icon-source: url("assets/checkbox-checked-dark.svg");
}
.check:checked:insensitive {
-gtk-icon-source: url("assets/checkbox-checked-insensitive-dark.svg");
}
.check:inconsistent {
-gtk-icon-source: url("assets/checkbox-mixed-dark.svg");
}
.check:inconsistent:insensitive {
-gtk-icon-source: url("assets/checkbox-mixed-insensitive-dark.svg");
}
.radio {
-gtk-icon-source: url("assets/radio-unselected-dark.svg");
}
.radio:insensitive {
-gtk-icon-source: url("assets/radio-unselected-insensitive-dark.svg");
}
.radio:checked {
-gtk-icon-source: url("assets/radio-selected-dark.svg");
}
.radio:checked:insensitive {
-gtk-icon-source: url("assets/radio-selected-insensitive-dark.svg");
}
.radio:inconsistent {
-gtk-icon-source: url("assets/radio-mixed-dark.svg");
}
.radio:inconsistent:insensitive {
-gtk-icon-source: url("assets/radio-mixed-insensitive-dark.svg");
}
.menuitem.check {
-gtk-icon-source: none;
}
.menuitem.radio {
-gtk-icon-source: none;
}
GtkIconView.content-view.cell.check {
-gtk-icon-source: url("assets/grid-selection-unchecked-dark.svg");
}
GtkIconView.content-view.cell.check:active {
-gtk-icon-source: url("assets/grid-selection-checked-dark.svg");
}

View File

@ -0,0 +1,154 @@
/*******************
* check and radio *
*******************/
/* draw regular check and radio items using our assets */
.check {
-gtk-icon-source: url("assets/checkbox-unchecked.svg");
}
.check:insensitive {
-gtk-icon-source: url("assets/checkbox-unchecked-insensitive.svg");
}
.check:checked {
-gtk-icon-source: url("assets/checkbox-checked.svg");
}
.check:checked:insensitive {
-gtk-icon-source: url("assets/checkbox-checked-insensitive.svg");
}
.check:inconsistent {
-gtk-icon-source: url("assets/checkbox-mixed.svg");
}
.check:inconsistent:insensitive {
-gtk-icon-source: url("assets/checkbox-mixed-insensitive.svg");
}
.radio {
-gtk-icon-source: url("assets/radio-unselected.svg");
}
.radio:insensitive {
-gtk-icon-source: url("assets/radio-unselected-insensitive.svg");
}
.radio:checked {
-gtk-icon-source: url("assets/radio-selected.svg");
}
.radio:checked:insensitive {
-gtk-icon-source: url("assets/radio-selected-insensitive.svg");
}
.radio:inconsistent {
-gtk-icon-source: url("assets/radio-mixed.svg");
}
.radio:inconsistent:insensitive {
-gtk-icon-source: url("assets/radio-mixed-insensitive.svg");
}
.menuitem.check {
-gtk-icon-source: none;
}
.menuitem.check:active,
.menuitem.check:checked {
-gtk-icon-source: url("assets/menuitem-checkbox-checked.svg");
}
.menuitem.check:active:hover,
.menuitem.check:checked:hover {
-gtk-icon-source: url("assets/menuitem-checkbox-checked-hover.svg");
}
.menuitem.check:active:insensitive,
.menuitem.check:checked:insensitive {
-gtk-icon-source: url("assets/menuitem-checkbox-checked-insensitive.svg");
}
.menuitem.check:inconsistent:hover,
.menuitem.radio:inconsistent:hover {
-gtk-icon-source: url("assets/menuitem-checkbox-mixed-hover.svg");
}
.menuitem.check:inconsistent,
.menuitem.radio:inconsistent {
-gtk-icon-source: url("assets/menuitem-checkbox-mixed.svg");
}
.menuitem.check:inconsistent:insensitive,
.menuitem.radio:inconsistent:insensitive {
-gtk-icon-source: url("assets/menuitem-checkbox-mixed-insensitive.svg");
}
.menuitem.radio {
-gtk-icon-source: none;
}
.menuitem.radio:active,
.menuitem.radio:checked {
-gtk-icon-source: url("assets/menuitem-radio-checked.svg");
}
.menuitem.radio:active:hover,
.menuitem.radio:checked:hover {
-gtk-icon-source: url("assets/menuitem-radio-checked-hover.svg");
}
.menuitem.radio:active:insensitive,
.menuitem.radio:checked:insensitive {
-gtk-icon-source: url("assets/menuitem-radio-checked-insensitive.svg");
}
GtkIconView.content-view.cell.check {
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
}
GtkIconView.content-view.cell.check:active {
-gtk-icon-source: url("assets/grid-selection-checked.svg");
}
/******************
* pane separator *
******************/
.pane-separator,
.pane-separator.horizontal {
background-image: linear-gradient(to bottom,
shade(@theme_bg_color, 0.8) 0%,
shade(@theme_bg_color, 0.8) 20%,
transparent 20%,
transparent 45%,
shade(@theme_bg_color, 0.8) 45%,
shade(@theme_bg_color, 0.8) 55%,
transparent 55%,
transparent 80%,
shade(@theme_bg_color, 0.8) 80%,
shade(@theme_bg_color, 0.8)
);
background-size: 4px 10px;
background-repeat: no-repeat;
background-position: center center;
}
.pane-separator.vertical {
background-image: linear-gradient(to right,
shade(@theme_bg_color, 0.8) 0%,
shade(@theme_bg_color, 0.8) 20%,
transparent 20%,
transparent 45%,
shade(@theme_bg_color, 0.8) 45%,
shade(@theme_bg_color, 0.8) 55%,
transparent 55%,
transparent 80%,
shade(@theme_bg_color, 0.8) 80%,
shade(@theme_bg_color, 0.8)
);
background-size: 10px 4px;
background-repeat: no-repeat;
background-position: center center;
}

File diff suppressed because it is too large Load Diff

1
gtk-3.20/gtk.css 100755
View File

@ -0,0 +1 @@
@import url("resource:///org/numixproject/gtk-3.20/dist/gtk.css");

View File

@ -0,0 +1,44 @@
<?xml version='1.0' encoding='UTF-8'?>
<gresources>
<gresource prefix='/org/numixproject/gtk-3.20'>
<file preprocess='to-pixdata'>assets/checkbox-checked-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-checked-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-checked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/checkbox-checked.png</file>
<file preprocess='to-pixdata'>assets/checkbox-mixed-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-mixed-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-mixed-insensitive.png</file>
<file preprocess='to-pixdata'>assets/checkbox-mixed.png</file>
<file preprocess='to-pixdata'>assets/checkbox-unchecked-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-unchecked-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/checkbox-unchecked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/checkbox-unchecked.png</file>
<file preprocess='to-pixdata'>assets/grid-selection-checked-dark.png</file>
<file preprocess='to-pixdata'>assets/grid-selection-checked.png</file>
<file preprocess='to-pixdata'>assets/grid-selection-unchecked-dark.png</file>
<file preprocess='to-pixdata'>assets/grid-selection-unchecked.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-checked-hover.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-checked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-checked.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-mixed-hover.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-mixed-insensitive.png</file>
<file preprocess='to-pixdata'>assets/menuitem-checkbox-mixed.png</file>
<file preprocess='to-pixdata'>assets/menuitem-radio-checked-hover.png</file>
<file preprocess='to-pixdata'>assets/menuitem-radio-checked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/menuitem-radio-checked.png</file>
<file preprocess='to-pixdata'>assets/radio-checked-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-checked-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-checked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/radio-checked.png</file>
<file preprocess='to-pixdata'>assets/radio-mixed-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-mixed-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-mixed-insensitive.png</file>
<file preprocess='to-pixdata'>assets/radio-mixed.png</file>
<file preprocess='to-pixdata'>assets/radio-unchecked-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-unchecked-insensitive-dark.png</file>
<file preprocess='to-pixdata'>assets/radio-unchecked-insensitive.png</file>
<file preprocess='to-pixdata'>assets/radio-unchecked.png</file>
<file>dist/gtk.css</file>
<file>dist/gtk-dark.css</file>
</gresource>
</gresources>

View File

@ -0,0 +1,73 @@
@import "global";
/* dark color scheme */
@define-color dark_bg_color #{"" + $dark_bg_color};
@define-color dark_fg_color #{"" + $dark_fg_color};
/* colormap actually used by the theme, to be overridden in other css files */
@define-color theme_bg_color #{"" + $bg_color};
@define-color theme_fg_color #{"" + $fg_color};
@define-color theme_base_color #{"" + $base_color};
@define-color theme_text_color #{"" + $text_color};
@define-color theme_selected_bg_color #{"" + $selected_bg_color};
@define-color theme_selected_fg_color #{"" + $selected_fg_color};
@define-color theme_tooltip_bg_color #{"" + $tooltip_bg_color};
@define-color theme_tooltip_fg_color #{"" + $tooltip_fg_color};
/* shadow effects */
@define-color light_shadow #{"" + $light_shadow};
@define-color dark_shadow #{"" + $dark_shadow};
/* misc colors used by gtk+ */
@define-color info_fg_color #{"" + $info_fg_color};
@define-color info_bg_color #{"" + $info_bg_color};
@define-color warning_fg_color #{"" + $warning_fg_color};
@define-color warning_bg_color #{"" + $warning_bg_color};
@define-color question_fg_color #{"" + $question_fg_color};
@define-color question_bg_color #{"" + $question_bg_color};
@define-color error_fg_color #{"" + $error_fg_color};
@define-color error_bg_color #{"" + $error_bg_color};
@define-color link_color #{"" + $link_color};
@define-color success_color #{"" + $success_color};
@define-color warning_color #{"" + $warning_color};
@define-color error_color #{"" + $error_color};
/* widget colors */
@define-color titlebar_bg_color @dark_bg_color;
@define-color titlebar_fg_color @dark_fg_color;
@define-color menubar_bg_color @dark_bg_color;
@define-color menubar_fg_color @dark_fg_color;
@define-color toolbar_bg_color @theme_bg_color;
@define-color toolbar_fg_color @theme_fg_color;
@define-color menu_bg_color @dark_bg_color;
@define-color menu_fg_color @dark_fg_color;
@define-color panel_bg_color @dark_bg_color;
@define-color panel_fg_color @dark_fg_color;
@define-color borders #{"" + $borders_color};
@define-color unfocused_borders #{"" + $backdrop_borders_color};
@define-color insensitive_bg_color #{"" + $insensitive_bg_color};
@define-color insensitive_fg_color #{"" + $insensitive_fg_color};
/* osd */
@define-color osd_base #{"" + $osd_base};
@define-color osd_bg #{"" + $osd_bg};
@define-color osd_fg #{"" + $osd_fg};
/* lightdm greeter colors */
@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
/* window manager colors */
@define-color wm_bg #{"" + $wm_bg};
@define-color wm_border_focused #{"" + $wm_border_focused};
@define-color wm_border_unfocused #{"" + $wm_border_unfocused};
@define-color wm_title_focused #{"" + $wm_title_focused};
@define-color wm_title_unfocused #{"" + $wm_title_unfocused};
@define-color wm_icons_focused #{"" + $wm_icons_focused};
@define-color wm_icons_focused_prelight #{"" + $wm_icons_focused_prelight};
@define-color wm_icons_focused_pressed #{"" + $wm_icons_unfocused_pressed};
@define-color wm_icons_unfocused #{"" + $wm_icons_unfocused};
@define-color wm_icons_unfocused_prelight #{"" + $wm_icons_unfocused_prelight};
@define-color wm_icons_unfocused_pressed #{"" + $wm_icons_unfocused_pressed};

View File

@ -0,0 +1,79 @@
$modules: () !default;
@mixin exports($name) {
@if (not index($modules, $name)) {
$modules: append($modules, $name) !global;
@content;
}
}
@function alpha($color, $amount) {
@if type-of($color) == "color" {
@return fade-out($color, (1 - $amount));
} @else {
@return unquote("alpha(#{$color},#{$amount})");
}
}
@function shade($color, $amount) {
@if type-of($color) == "color" {
@if ($amount > 1) {
@return lighten($color, ($amount - 1) * lightness($color))
} @else {
@return darken($color, (1 - $amount) * lightness($color))
}
} @else {
@return unquote("shade(#{$color},#{$amount})");
}
}
@function mix($color1, $color2, $amount) {
@return unquote("mix(#{$color1},#{$color2},#{$amount})");
}
@function border_normal($color) {
@return shade($color, $contrast);
}
@function border_focus($color) {
@return shade($color, ($contrast - .05));
}
@function border_active($color) {
@return shade($color, ($contrast - .1));
}
@function border_insensitive($color) {
@return shade($color, ($contrast + .05));
}
@mixin linear-gradient($color, $direction: to bottom) {
@if $gradient == 0 {
background-color: $color;
background-image: none;
} @else {
$amount: $gradient / 2;
background-color: $color;
background-image: linear-gradient($direction,
shade($color, (1 + $amount)),
shade($color, (1 - $amount))
);
}
}
@mixin border($color) {
border-color: border_normal($color);
&:focus, &:hover { border-color: border_focus($color); }
&:active, &:active:hover,
&:active:focus, &:active:hover:focus,
&:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus { border-color: border_active($color); }
&:disabled { border-color: border_insensitive($color); }
&:active:disabled, &:checked:disabled { border-color: border_normal($color); }
}

View File

@ -0,0 +1,111 @@
@import "functions";
// default color scheme
$bg_color: if($variant == "dark", #444, #eee);
$fg_color: if($variant == "dark", #ddd, #555);
$base_color: if($variant == "dark", #333, #fff);
$text_color: if($variant == "dark", #eee, #333);
$selected_bg_color: #f0544c;
$selected_fg_color: #fff;
$tooltip_bg_color: #444;
$tooltip_fg_color: #eee;
$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%));
$borders_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 12%));
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
// dark colors
$dark_bg_color: #444;
$dark_fg_color: #eee;
// shadows
$dark_shadow: #000;
$light_shadow: #fff;
// white and black
$black: #000;
$white: #fff;
$button_border: shade($base_color, .9);
$entry_border: alpha($dark_shadow, .06);
$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4));
$scrollbar_slider_color: shade($bg_color, .5);
$scrollbar_slider_hover_color: shade($bg_color, .3);
$scrollbar_slider_active_color: if($variant == 'light', darken($selected_bg_color, 5%), lighten($selected_bg_color, 10%));
// misc colors used by gtk+
$info_fg_color: #fff;
$info_bg_color: #03a9f4;
$warning_fg_color: #fff;
$warning_bg_color: #ef6c00;
$question_fg_color: #fff;
$question_bg_color: #673ab7;
$error_fg_color: #fff;
$error_bg_color: #f44336;
$link_color: #3f51b5;
$success_color: #4caf50;
$warning_color: #ef6c00;
$error_color: #f44336;
$toolbar_bg_color: $bg_color;
$toolbar_fg_color: $fg_color;
$titlebar_bg_color: $dark_bg_color;
$titlebar_fg_color: $dark_fg_color;
$menu_bg_color: $dark_bg_color;
$menu_fg_color: $dark_fg_color;
$menubar_bg_color: $dark_bg_color;
$menubar_fg_color: $dark_fg_color;
$panel_bg_color: $dark_bg_color;
$panel_fg_color: $dark_fg_color;
$osd_base: $dark_bg_color;
$osd_fg: $dark_fg_color;
$osd_bg: alpha($osd_base, 0.8);
$lightdm_bg_color: $dark_bg_color;
$lightdm_fg_color: $dark_fg_color;
$wm_bg: $titlebar_bg_color;
$wm_border_focused: transparent;
$wm_border_unfocused: transparent;
$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4);
$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
$wm_icons_focused_prelight: $selected_bg_color;
$wm_icons_focused_pressed: shade($selected_bg_color, .8);
$wm_icons_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4);
$wm_icons_unfocused_prelight: $selected_bg_color;
$wm_icons_unfocused_pressed: shade($selected_bg_color, .8);
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
// widget styles
$roundness: 2px;
$spacing: 5px;
$gradient: 0;
$contrast: .8;

View File

@ -0,0 +1,37 @@
@import "functions";
@import "global";
@import "colors";
@import "widgets/base";
@import "widgets/button";
@import "widgets/entry";
@import "widgets/actionbar";
@import "widgets/calendar";
@import "widgets/choosers";
@import "widgets/grid";
@import "widgets/infobar";
@import "widgets/menu";
@import "widgets/misc";
@import "widgets/notebook";
@import "widgets/osd";
@import "widgets/overshoot";
@import "widgets/progress";
@import "widgets/scrollbar";
@import "widgets/sidebar";
@import "widgets/spinner";
@import "widgets/toggle";
@import "widgets/toolbar";
@import "widgets/view";
@import "widgets/window";
@import "apps/unity-greeter";
@import "apps/gedit";
@import "apps/nautilus";
@import "apps/nemo";
@import "apps/panel";
@import "apps/synaptic";
@import "apps/xfce";
@import "apps/unity";
@import "apps/lightdm";
@import "apps/gnome-terminal";

View File

@ -0,0 +1,132 @@
/*********
! Gedit *
**********/
@include exports("gedit") {
GeditWindow .pane-separator {
border-width: 0 1px 0 0;
border-style: solid;
&, &:hover {
border-color: shade($bg_color, ($contrast + .1));
background-color: $bg_color;
}
}
.gedit-document-panel {
background-color: $bg_color;
color: mix($fg_color, $bg_color, .1);
list row {
padding: $spacing;
button {
padding: 1px;
border-radius: $roundness;
border-style: solid;
border-color: transparent;
border-width: 1px;
background-color: transparent;
background-image: none;
color: transparent;
-gtk-icon-shadow: none;
}
}
.prelight-row button {
border-color: alpha($black, .1);
color: alpha($white, .8);
&:active {
border-color: alpha($black, .2);
background-color: alpha($black, .08);
color: $white;
}
}
list row, .prelight-row {
button:hover {
border-color: alpha($black, .1);
color: $white;
}
}
}
.gedit-document-panel-group-row {
&, &:hover {
border-top: 1px solid shade($bg_color, ($contrast + .1));
background-color: $bg_color;
}
}
.gedit-document-panel-document-row {
&:hover { background-color: shade($bg_color, 1.05); }
&:selected {
&, &:hover { @extend %selected; }
}
}
.gedit-document-panel-dragged-row {
border: 1px solid alpha($black, .1);
background-color: alpha($black, .5);
color: $white;
}
.gedit-document-panel-placeholder-row {
border: 0;
background-color: alpha($black, .08);
transition: all 200ms ease-in;
}
statusbar { border-top: 1px solid border_normal($bg_color); }
statusbar GeditSmallButton, GeditStatusMenuButton {
text-shadow: none;
button {
border-style: solid;
border-width: 0 1px;
border-color: transparent;
border-radius: 0;
padding: 1px 6px 2px 4px;
&:hover, &:active, &:active:hover { border-color: border_normal($bg_color); }
&:active {
background-color: shade($bg_color, .95);
color: $fg_color;
}
}
}
GeditViewFrame .gedit-search-slider {
padding: $spacing;
border-radius: 0 0 $roundness $roundness;
border-width: 0 1px 1px;
border-style: solid;
border-color: border_normal($base_color);
background-color: $base_color;
.not-found {
background-color: $error_bg_color;
background-image: none;
color: $error_fg_color;
&:selected { @extend %selected; }
}
}
GeditFileBrowserWidget .toolbar {
padding: $spacing / 2;
border-top: 0;
background-color: $bg_color;
background-image: none;
}
.gedit-search-entry-occurrences-tag {
margin: $spacing / 2;
padding: $spacing / 2;
color: mix($text_color, $base_color, .5);
}
}

View File

@ -0,0 +1,57 @@
/**********************
! Genome Terminal *
***********************/
@include exports("gnome-terminal") {
//noinspection ScssLintInspection,ScssLintInspection
VteTerminal {
background-color: $osd_base;
color: $osd_fg;
}
TerminalWindow {
.scrollbars-junction {
background-color: $osd_base;
}
scrollbar {
trough {
background-color: $osd_base;
}
button {
color: shade($osd_base, 0.6);
&:active {
color: shade($osd_base, 0.6);
&:hover {
color: shade($osd_base, 0.6);
}
}
}
& slider {
border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21);
background-color: mix($osd_base, $osd_fg, 0.21);
&:hover {
border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
background-color: mix($osd_base, $osd_fg, 0.31);
}
&.vertical {
&:hover {
border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
background-color: mix($osd_base, $osd_fg, 0.31);
}
&:active {
border-color: shade($selected_bg_color, 0.9);
background-color: $selected_bg_color;
}
}
&:active {
border-color: shade($selected_bg_color, 0.9);
background-color: $selected_bg_color;
}
}
}
GtkNotebook.notebook {
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}
}
}

View File

@ -0,0 +1,193 @@
/***********************
! LightDM GTK Greeter *
***********************/
@include exports("lightdm") {
#panel_window {
background-color: transparent;
background-image: none;
color: $white;
font: bold;
text-shadow: 0 1px alpha($black, .5);
-gtk-icon-shadow: 0 1px alpha($black, .5);
.menubar {
&, > .menuitem {
background-color: transparent;
background-image: none;
color: $white;
font: bold;
text-shadow: 0 1px alpha($black, .5);
-gtk-icon-shadow: 0 1px alpha($black, .5);
*:hover { color: $white; }
&:hover {
border-style: none;
background-color: alpha($white, .2);
background-image: none;
color: $white;
}
&:disabled { color: alpha($white, .7); }
.menu {
border-radius: 1px;
.menuitem {
font: normal;
text-shadow: none;
}
}
}
}
}
#content_frame { padding-bottom: 14px; }
#login_window, #shutdown_dialog, #restart_dialog {
border-style: none;
border-radius: $roundness;
background-color: $lightdm_bg_color;
color: $lightdm_fg_color;
/* draw border using box-shadow */
box-shadow: inset 1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21),
inset -1px 0 mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21),
inset 0 1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21),
inset 0 -1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21);
.button {
padding: 3px 15px;
border-width: 1px;
border-radius: $roundness;
border-style: solid;
border-color: shade($lightdm_bg_color, .8);
background-color: shade($lightdm_bg_color, 1.08);
background-image: none;
color: $lightdm_fg_color;
transition: all 150ms ease-out;
&.default, &:focus, &:active:focus {
border-color: shade($selected_bg_color, .8);
background-color: shade($selected_bg_color, 1.08);
background-image: none;
color: $selected_fg_color;
&:hover {
border-color: shade($selected_bg_color, .7);
background-color: $selected_bg_color;
}
}
}
}
#login_window {
.menu { border-radius: 1px; }
GtkComboBox .button {
&, &:hover, &:active, &:active:hover,
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus {
padding: 0;
background: none;
border-style: none;
box-shadow: none;
}
}
.entry {
padding: 3px 5px;
border-width: 1px;
border-style: solid;
border-color: shade($lightdm_bg_color, .8);
border-radius: $roundness;
background-color: shade($lightdm_bg_color, .9);
background-image: none;
color: $lightdm_fg_color;
box-shadow: none;
transition: all 150ms ease-out;
&:focus, &:hover {
border-color: shade($lightdm_bg_color, .7);
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
inset 0 1px alpha($dark_shadow, .12),
inset -1px 0 alpha($dark_shadow, .1),
inset 0 -1px alpha($dark_shadow, .05);
}
}
}
#user_combobox {
color: $lightdm_fg_color;
font: 18px;
.menu { font: normal; }
.arrow { color: mix($lightdm_fg_color, $lightdm_bg_color, .5); }
}
#user_image {
padding: 3px;
border-radius: $roundness;
/* draw border using box-shadow */
box-shadow: inset 1px 0 shade($lightdm_bg_color, .7),
inset -1px 0 shade($lightdm_bg_color, .7),
inset 0 1px shade($lightdm_bg_color, .7),
inset 0 -1px shade($lightdm_bg_color, .7);
}
#user_image_border {
border-radius: $roundness;
background-color: shade($lightdm_bg_color, .9);
background-image: none;
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
}
#buttonbox_frame {
padding-top: 10px;
padding-bottom: 0;
border-style: none;
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
background-color: transparent;
background-image: none;
box-shadow: none;
}
/* shutdown button */
#shutdown_button {
border-color: shade($error_bg_color, .8);
background-color: shade($error_bg_color, 1.08);
background-image: none;
color: $error_fg_color;
&:hover, &:active, &:active:hover {
border-color: shade($error_bg_color, .7);
background-color: $error_bg_color;
}
}
/* restart button */
#restart_button {
border-color: shade($warning_bg_color, .8);
background-color: shade($warning_bg_color, 1.08);
background-image: none;
color: $warning_fg_color;
&:hover, &:active, &:active:hover {
border-color: shade($warning_bg_color, .7);
background-color: $warning_bg_color;
}
}
/* password warning */
#greeter_infobar { font: bold; }
}

View File

@ -0,0 +1,70 @@
/************
! Nautilus *
*************/
@include exports("nautilus") {
.nautilus-desktop * {
color: $white;
text-shadow: 1px 1px $black;
&:active { color: $fg_color; }
&:selected { color: $selected_fg_color; }
&:active, &:hover, &:selected { text-shadow: none; }
}
.nautilus-window {
toolbar {
border-width: 0 0 1px;
border-style: solid;
border-color: border_normal($toolbar_bg_color);
}
.sidebar {
border: none;
frame { border: 0; }
}
paned {
border-width: 0 1px 0 0;
border-style: solid;
&, &:hover {
border-color: shade($bg_color, ($contrast + .1));
background-color: $bg_color;
}
}
notebook {
border: none;
frame { border: 0; }
}
}
NautilusQueryEditor {
toolbar {
padding-top: $spacing - 1px;
padding-bottom: $spacing - 2px;
border-width: 1px 0 0;
border-style: solid;
border-color: $toolbar_bg_color;
background-color: shade($toolbar_bg_color, .9);
&:nth-child(2) { border-color: border_normal($toolbar_bg_color); }
&.search-bar {
border-top-width: 0;
border-bottom-width: 0;
}
&, &.search-bar {
&:last-child, &:only-child {
border-bottom-width: 1px;
border-bottom-color: border_normal($toolbar_bg_color);
}
}
}
}
}

View File

@ -0,0 +1,153 @@
/********
! Nemo *
*********/
@include exports("nemo") {
.nemo-desktop, .nemo-desktop * {
color: $white;
text-shadow: 1px 1px $black;
background: transparent;
border: none;
&:active {
color: $fg_color;
}
&:selected {
color: $selected_fg_color;
}
&:active, &:hover, &:selected {
text-shadow: none;
}
}
.nemo-pathbar {
@include button($toolbar_bg_color, $toolbar_fg_color);
-NemoPathbarButton-border-radius: $roundness;
}
.nemo-window {
toolbar {
border-width: 0 0 1px;
border-style: solid;
border-color: border_normal($toolbar_bg_color);
}
> grid widget:last-child {
border-top-style: solid;
border-top-color: border_normal($toolbar_bg_color);
border-top-width: 1px;
}
menubar menuitem {
margin: 0px;
}
.sidebar .view {
-NemoPlacesTreeView-disk-full-bg-color: shade($toolbar_bg_color, .8);
-NemoPlacesTreeView-disk-full-fg-color: $selected_bg_color;
-NemoPlacesTreeView-disk-full-bar-width: 2px;
-NemoPlacesTreeView-disk-full-bar-radius: 1px;
-NemoPlacesTreeView-disk-full-bottom-padding: 0px;
-NemoPlacesTreeView-disk-full-max-length: 75px;
&:selected {
-NemoPlacesTreeView-disk-full-bg-color: $selected_fg_color;
-NemoPlacesTreeView-disk-full-fg-color: shade($selected_bg_color, 1.2);
}
}
.sidebar frame {
border: 0;
}
statusbar {
border: none;
}
.sidebar image {
padding-left: $spacing;
padding-right: $spacing;
}
paned {
border-width: 0 1px 0 0;
border-style: solid;
&, &:hover {
border-color: shade($bg_color, ($contrast + .1));
background-color: $bg_color;
}
}
notebook {
border-width: 0;
tabs {
border: 0;
}
}
toolbar {
button {
@include button($bg_color, $fg_color);
}
button.linked, .linked .button {
@include linked_button($bg_color);
}
combobox button {
padding: $spacing - 1px;
&.text-button {
padding: $spacing;
}
&.image-button {
padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing;
}
}
separator, separator:disabled {
color: shade($bg_color, ($contrast + .1));
border-color: currentColor;
-GtkWidget-window-dragging: true;
}
&.primary-toolbar button {
padding: 5px 8px;
}
}
}
NemoQueryEditor {
toolbar {
padding-top: $spacing - 3px;
padding-bottom: $spacing - 4px;
border-width: 1px 0 0;
border-style: solid;
border-color: $toolbar_bg_color;
background-color: shade($toolbar_bg_color, .9);
&:nth-child(2) {
border-color: border_normal($toolbar_bg_color);
}
&.search-bar {
border-top-width: 0;
border-bottom-width: 0;
}
&, &.search-bar {
&:last-child, &:only-child {
border-bottom-width: 1px;
border-bottom-color: border_normal($toolbar_bg_color);
}
}
}
}
}

View File

@ -0,0 +1,80 @@
/***********************
! Fallback mode panel *
************************/
@include exports("panel") {
%panel {
@include linear-gradient($panel_bg_color);
color: $panel_fg_color;
}
%panelbutton {
border-width: 0 1px;
border-radius: 0;
border-color: transparent;
background-color: transparent;
background-image: none;
color: $panel_fg_color;
&:hover, &:hover {
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, .11));
border-color: mix($panel_bg_color, $panel_fg_color, .11);
color: shade($panel_fg_color, 1.08);
}
&:active, &:checked {
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, .21), to top);
border-color: mix($panel_bg_color, $panel_fg_color, .21);
color: shade($panel_fg_color, 1.08);
&:hover {
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, .31), to top);
border-color: mix($panel_bg_color, $panel_fg_color, .31);
}
}
}
PanelWidget, PanelApplet, PanelToplevel {
@extend %panel;
padding: 0;
}
PanelApplet {
border: 0;
.button {
@extend %panelbutton;
-GtkButton-inner-border: 2;
}
}
PanelSeparator {
@extend %panel;
border: 0;
}
PanelApplet > GtkMenuBar.menubar, PanelMenuBar.menubar, .gnome-panel-menu-bar {
&.menuitem {
@extend %panel;
border: 0;
-PanelMenuBar-icon-visible: true;
}
}
PanelAppletFrame {
@extend %panel;
border: 0;
}
WnckPager, WnckTasklist { @extend %panel; }
}

View File

@ -0,0 +1,15 @@
/************
! Synaptic *
*************/
@include exports("synaptic") {
GtkWindow > GtkVBox > .dock {
&, > GtkHBox > GtkToolbar {
@include linear-gradient($toolbar-bg-color);
padding: $spacing;
border: 0;
color: $toolbar_fg_color;
}
}
}

View File

@ -0,0 +1,116 @@
/***********************
! Unity Greeter *
***********************/
@include exports("unity-greeter") {
.lightdm.menu {
background-image: none;
background-color: fade-out($black, .4);
border-color: fade-out($white, .8);
border-radius: 4px;
padding: 1px;
color: $white;
}
.lightdm-combo .menu {
background-color: shade($dark_bg_color, 1.08);
border-radius: 0;
padding: 0;
color: $white;
}
.lightdm.menu .menuitem *,
.lightdm.menu .menuitem.check:active,
.lightdm.menu .menuitem.radio:active {
color: $white;
}
.lightdm.menubar *,
.lightdm.menubar .menuitem {
padding: 2px;
}
.lightdm-combo.combobox-entry .button,
.lightdm-combo .cell,
.lightdm-combo .button,
.lightdm-combo .entry,
.lightdm.button{
background-image: none;
background-color: fade-out($black, .7);
border-color: fade-out($white, .1);
border-radius: 5px;
padding: 5px;
color: $white;
}
.lightdm.button:hover {
background-image: none;
background-color: fade-out($white, .7);
border-color: fade-out($white, .4);
border-radius: 5px;
padding: 5px;
color: $white;
text-shadow: none;
}
.lightdm.button:active,
.lightdm.button:active:focus,
.lightdm.button:focus,
.lightdm.entry {
background-image: none;
background-color: fade-out($black, .7);
border-color: fade-out($white, .4);
border-radius: 5px;
padding: 7px;
color: $white;
text-shadow: none;
}
.lightdm.entry:hover,
.lightdm.entry:active,
.lightdm.entry:active:focus {
background-image: none;
border-image: none;
}
.lightdm.entry:focus {
border-color: fade-out($white, .4);
border-width: 1px;
border-style: solid;
color: $white;
}
.lightdm.entry:selected {
background-color: fade-out($white, .8);
}
@keyframes dashentry_spinner {
to { -gtk-icon-transform: rotate(1turn); }
}
.lightdm.entry:active {
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
animation: dashentry_spinner 1s infinite linear;
}
.lightdm.option-button {
padding: 5px;
background: none;
border: 0;
}
.lightdm.toggle-button {
background: none;
border-width: 0;
}
.lightdm.toggle-button.selected:hover {
background-color: fade-out($white, .7);
border-color: fade-out($white, .7);
border-width: 1px;
}
.lightdm.toggle-button.selected {
background-color: fade-out($black, .7);
border-color: fade-out($white, .7);
border-width: 1px;
}
}

View File

@ -0,0 +1,70 @@
@import "panel";
/****************
! Unity styles *
*****************/
@include exports("unity") {
UnityDecoration {
-UnityDecoration-extents: 28px 1px 1px 1px;
-UnityDecoration-input-extents: 10px;
-UnityDecoration-shadow-offset-x: 1px;
-UnityDecoration-shadow-offset-y: 1px;
-UnityDecoration-active-shadow-color: rgba(0, 0, 0, .7);
-UnityDecoration-active-shadow-radius: 8px;
-UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, .5);
-UnityDecoration-inactive-shadow-radius: 5px;
-UnityDecoration-glow-size: 10px;
-UnityDecoration-glow-color: $selected_bg_color;
-UnityDecoration-title-indent: 10px;
-UnityDecoration-title-fade: 35px;
-UnityDecoration-title-alignment: 0;
&.top {
border: 1px solid $wm_border_focused;
border-bottom: 0;
border-radius: 2px 2px 0 0;
padding: 1px ($spacing * 2) 0;
background-color: $titlebar_bg_color;
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
text-shadow: none;
&:backdrop {
border: 1px solid $wm_border_unfocused;
color: mix($titlebar_fg_color, $titlebar_bg_color, .4);
}
}
&.left, &.right, &.bottom {
background-color: $wm_border_focused;
&:backdrop { background-color: $wm_border_unfocused; }
}
}
UnityPanelWidget, .unity-panel {
@extend %panel;
border: 0;
}
.unity-panel {
&.menuitem, .menuitem {
border-width: 0 1px;
color: $panel_fg_color;
&:hover, *:hover {
border-color: mix($panel_bg_color, $panel_fg_color, .21);
background-color: mix($panel_bg_color, $panel_fg_color, .21);
background-image: none;
color: shade($panel_fg_color, 1.08);
}
}
}
SheetStyleDialog.unity-force-quit { background-color: $bg_color; }
}

View File

@ -0,0 +1,26 @@
@import "panel";
/***************
! Xfce styles *
****************/
@include exports("xfce") {
XfceHeading {
margin: 0;
padding: 0;
border: 0;
background-image: none;
background-color: $base_color;
color: $text_color;
}
.xfce4-panel {
@extend %panel;
font: normal;
.button { @extend %panelbutton; }
.menu { -gtk-icon-effect: none; }
}
}

View File

@ -0,0 +1,3 @@
$variant: "dark";
@import "widgets";

View File

@ -0,0 +1,3 @@
$variant: "light";
@import "widgets";

View File

@ -0,0 +1,113 @@
@import "button";
@import "toolbar";
/**************
! Action-bar *
***************/
@include exports("actionbar") {
actionbar {
@include linear-gradient($bg_color);
padding: $spacing;
border-width: 1px 0 0;
border-style: solid;
border-color: border_normal($bg_color);
color: $fg_color;
.button {
&.text-button { padding: $spacing - 1px; }
&.image-button { padding: $spacing + 1px; }
}
.title {
font: bold;
padding: 0 ($spacing * 2);
}
.subtitle {
font: smaller;
padding: 0 ($spacing * 2);
}
> revealer > box {
padding: 6px;
border-top: 1px solid $borders_color;
&:backdrop { border-color: $backdrop_borders_color; }
}
}
}
/***************
! Search bars *
****************/
@include exports("searchbar") {
.search-bar {
@include linear-gradient(shade($bg_color, .98));
border-width: 0 0 1px;
border-style: solid;
border-color: border_normal($bg_color);
color: $fg_color;
.button.close-button { padding: $spacing; }
}
}
/******************
! Action buttons *
*******************/
@include exports("actionbuttons") {
$types: (
suggested: $success_color,
destructive: $error-color
);
@each $type, $color in $types {
.#{$type}-action.button {
@include button($color, $selected_fg_color);
}
}
}
/******************
* selection mode *
******************/
@include exports("selectionmode") {
.selection-mode {
&.header-bar, &.toolbar {
@include toolbar($selected_bg_color, $selected_fg_color);
.button {
@include button($selected_bg_color, $selected_fg_color);
&.suggested-action { @extend .suggested-action.button; }
}
.selection-menu.button {
border: 0;
background-color: transparent;
background-image: none;
color: shade($selected_bg_color, $contrast);
&:hover { color: shade($selected_bg_color, ($contrast - .1)); }
&:active { color: shade($selected_bg_color, ($contrast - .05)); }
}
.dim-label {
&, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); }
}
}
&.toolbar { padding: $spacing; }
}
}

View File

@ -0,0 +1,137 @@
/**************
! GTK settings
***************/
* {
-GtkStatusbar-shadow-type: none;
-GtkWindow-resize-grip-height: 0;
-GtkWindow-resize-grip-width: 0;
-WnckTasklist-fade-overlay-rect: 0;
outline-color: alpha($selected_bg_color, .5);
outline-style: dashed;
outline-width: 1px;
outline-offset: -1px;
-gtk-outline-radius: $roundness;
}
/*************
! Base states
*************/
%selected {
&, &:focus {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
* {
/* hyperlinks */
-GtkIMHtml-hyperlink-color: $link_color;
&:selected { @extend %selected; }
&:disabled,
&:disabled:disabled { color: mix($fg_color, $bg_color, .5); }
&:disabled, &:disabled { -gtk-icon-effect: dim; }
&:hover { -gtk-icon-effect: highlight; }
&:link, &:visited { color: $link_color; }
}
.background {
background-color: $bg_color;
color: $fg_color;
&:backdrop {
text-shadow: none;
-gtk-icon-shadow: none;
}
&.csd { background-color: $bg_color; }
}
.gtkstyle-fallback {
background-color: alpha($bg_color, .5);
color: $fg_color;
&:hover {
background-color: shade($bg_color, 1.1);
color: $fg_color;
}
&:active {
background-color: shade($bg_color, .9);
color: $fg_color;
}
&:disabled {
background-color: shade(shade($bg_color, .95), 1.05);
color: mix($fg_color, $bg_color, .5);
}
&:selected { @extend %selected; }
}
image, label, box, grid {
&, &:disabled { background-color: transparent; }
}
label {
&.separator {
@extend .dim-label;
color: $fg_color;
&:backdrop { color: $backdrop_fg_color; }
}
row:selected &,
&:selected { @extend %nobg_selected_items; }
selection {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:disabled {
color: $insensitive_fg_color;
selection { @extend %selected_items:disabled; }
&:backdrop { color: $backdrop_insensitive_color; }
}
&:backdrop {
color: $backdrop_fg_color;
selection { @extend %selected_items:backdrop; }
}
}
.dim-label {
opacity: 0.55;
text-shadow: none;
}
assistant {
.sidebar {
background-color: $base_color;
border-top: 1px solid $borders_color;
&:backdrop {
background-color: $backdrop_base_color;
border-color: $backdrop_borders_color;
}
}
&.csd .sidebar { border-top-style: none; }
.sidebar label { padding: 6px 12px; }
.sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
}

View File

@ -0,0 +1,320 @@
/*********
! Buttons
**********/
@include exports("button_extends") {
%button {
padding: $spacing ($spacing + 2px);
border-width: 1px;
border-style: solid;
border-radius: $roundness;
transition: 150ms ease;
outline-color: transparent;
}
%linked_middle {
border-radius: 0;
border-left-style: none;
border-right-style: solid;
&:dir(rtl) {
border-radius: 0; // needed when including %linked_middle:dir(rtl)
border-right-style: none;
border-left-style: solid;
}
}
%linked_button {
border-width: 1px;
border-style: solid;
border-radius: 0;
border-right-style: none;
border-left-style: none;
&:first-child {
border-width: 1px;
border-radius: $roundness;
border-left-style: solid;
border-right-style: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:dir(rtl) {
border-left-style: none;
border-right-style: solid;
}
}
&:last-child {
border-width: 1px;
border-radius: $roundness;
border-left-style: none;
border-right-style: solid;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:dir(rtl) {
border-left-style: solid;
border-right-style: none;
}
}
&:only-child, &:first-child:only-child {
border-width: 1px;
border-style: solid;
border-radius: $roundness;
}
}
}
@mixin linked_button($bg) {
$border_strength: if(lightness($bg) > 50, 0, .1);
$shadow_strength: if(lightness($bg) > 50, 0, .1);
@extend %linked_button;
box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)),
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
&:focus, &:hover {
box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)),
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
}
&:active, &:active:hover,
&:active:focus, &:active:hover:focus,
&:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus {
box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
inset 0 1px alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05);
}
&:disabled { box-shadow: inset -1px 0 shade($bg, .8); }
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
&:disabled:last-child, &:disabled:only-child,
&:active:disabled:last-child, &:active:disabled:only-child,
&:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; }
&:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
&:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus {
box-shadow: inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06);
}
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
&:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06);
}
}
@mixin button($bg, $fg) {
$border_strength: if(lightness($bg) > 50, 0, .1);
$shadow_strength: if(lightness($bg) > 50, 0, .1);
$button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);
@extend %button;
@include linear-gradient($button_bg);
@include border(rgba(0, 0, 0, .12 + $border_strength));
color: $fg;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
&.flat {
border-color: alpha($button_bg, 0);
background-color: alpha($button_bg, 0);
background-image: none;
box-shadow: none;
}
&, &.flat {
&:focus, &:hover {
@include linear-gradient(shade($button_bg, 1.2));
@include border(rgba(0, 0, 0, .2 + $border_strength));
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
}
&:checked {
@include linear-gradient(shade($button_bg, .7), to top);
color: $white;
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
inset 0 1px alpha($dark_shadow, .07),
inset -1px 0 alpha($dark_shadow, .06),
inset 0 -1px alpha($dark_shadow, .05);
&:focus, &:hover {
@include linear-gradient(shade($button_bg, .65), to top);
color: $white;
}
}
&:focus, &:hover { color: $fg; }
&:active:disabled, &:checked:disabled {
@include linear-gradient(shade($button_bg, .9));
color: $fg;
box-shadow: none;
}
&:disabled:disabled {
@if (lightness($button_bg) > 50) {
@include linear-gradient(shade($button_bg, .95));
} @else {
@include linear-gradient(alpha($button_bg, .3));
}
color: mix($bg, $fg, .5);
box-shadow: none;
}
}
&.separator, .separator {
border: 1px solid currentColor;
color: shade($bg, ($contrast + .1));
&:disabled { color: shade($button_bg, .85); }
}
}
@include exports("button") {
%close_button {
border: 1px solid transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
&:focus, &:hover {
border: 1px solid alpha($black, .3);
background-color: alpha($white, .2);
background-image: none;
box-shadow: none;
}
&:active, &:checked, &:active:hover, &:checked:hover {
border: 1px solid alpha($black, .3);
background-color: alpha($black, .1);
background-image: none;
box-shadow: none;
}
}
button {
min-height: 22px;
min-width: 24px;
@include button(shade($bg_color, 1.2), $fg_color);
&.link, .link & { @include linked_button(shade($bg_color, 1.2)); }
spinbutton & {
color: mix($text_color, $base_color, .4);
padding: $spacing ($spacing * 2);
border: 0;
border-radius: 0;
border-style: none;
background-color: transparent;
background-image: none;
box-shadow: inset 1px 0 shade($base_color, .9);
&:disabled {
color: mix($text_color, $base_color, .7);
box-shadow: inset 1px 0 shade($base_color, .85);
}
&:active, &:checked, &:hover { color: $text_color; }
&:first-child {
border-radius: $roundness 0 0 $roundness;
box-shadow: none;
}
&:last-child { border-radius: 0 $roundness $roundness 0; }
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
}
spinbutton.vertical & {
border: 1px solid shade($bg_color, .8);
border-radius: $roundness;
background-color: shade($bg_color, 1.08);
background-image: none;
color: $fg_color;
box-shadow: none;
&:hover {
border-color: shade($bg_color, .7);
background-color: shade($bg_color, 1.1);
background-image: none;
}
&:active, &:checked {
border-color: shade($bg_color, .8);
background-color: shade($bg_color, .95);
background-image: none;
}
&:active:hover, &:checked:hover {
border-color: shade($bg_color, .7);
}
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
&:disabled {
border-color: shade($bg_color, .85);
background-color: shade($bg_color, .9);
background-image: none;
}
&:first-child {
border-width: 1px;
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&:last-child {
border-width: 1px;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
spinbutton.vertical entry {
border-width: 1px;
border-style: solid;
border-radius: 0;
}
}
}
/******************
! ComboBoxes *
*******************/
@include exports("combobox") {
combobox {
box button, box entry {
@extend %linked_button;
padding: ($spacing - 2px) ($spacing + 1px);
}
box > button {
// the combo is a composite widget so the way we do button linked doesn't
// work, special case needed. See
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
&:dir(ltr) { @extend %linked_middle; }
// specificity bump
&:dir(rtl) { @extend %linked_middle:dir(rtl); }
}
&:first-child > button { @extend %linked_button:first-child; }
&:last-child > button { @extend %linked_button:last-child; }
&:only-child > button { @extend %linked_button:only-child; }
}
}

View File

@ -0,0 +1,29 @@
/**********
! Calendar
***********/
@include exports("calendar") {
calendar {
padding: $spacing;
outline-offset: -1px;
&:indeterminate { color: mix($fg_color, $bg_color, .5); }
&.view, &.highlight, &.header, &.button {
&, &:focus, &:hover, &:disabled {
border: 0;
background-color: transparent;
background-image: none;
}
}
&.highlight { color: $selected_bg_color; }
}
/* gnome-calendar */
.calendar-view {
background-color: $base_color;
color: $text_color;
}
}

View File

@ -0,0 +1,124 @@
/***************
! Color chooser
****************/
@include exports("colorchooser") {
colorswatch {
&, &:selected {
border: 1px solid alpha($black, .1);
border-radius: $roundness - 1px;
background-color: transparent;
background-clip: border-box;
&:hover { border-color: alpha($black, .3); }
}
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
&.left, &:first-child {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
&.right, &:last-child {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&:only-child { border-radius: $roundness; }
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
}
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
coloreditor & {
border-radius: $roundness;
&.color-dark:hover, &.color-light:hover {
background-image: none;
border-color: alpha($black, .3);
}
}
}
GtkColorChooserWidget #add-color-button {
background-clip: padding-box;
border-color: alpha($black, .1);
background-color: shade($bg_color, .95);
color: $fg_color;
&:hover {
border-color: alpha($black, .3);
background-color: shade($bg_color, .9);
color: $fg_color;
}
}
.color-active-badge {
&, &:selected {
border-width: 2px;
border-style: solid;
background-color: transparent;
}
&.color-light {
&, &:hover {
border-color: alpha($black, .3);
color: alpha($black, .3);
}
}
&.color-dark {
&, &:hover {
border-color: alpha($white, .3);
color: alpha($white, .3);
}
}
}
GtkColorButton.button { padding: $spacing; }
}
/***********************
! Font and file choosers
************************/
@include exports("miscchoosers") {
GtkFontButton, filechooserbutton {
.separator {
/* always disable separators */
-GtkWidget-horizontal-separator: 0;
-GtkWidget-vertical-separator: 0;
}
label:last-child { color: alpha(currentColor, .7); }
image:last-child { color: alpha(currentColor, .7); }
}
filechooser {
.pane-separator {
&, &:hover {
border-width: 0 1px 0 0;
border-style: solid;
border-color: currentColor;
background-color: $bg_color;
color: shade($bg_color, ($contrast + .1));
}
}
/* for fallback when header bar not used */
.dialog-action-box {
border-width: 1px 0 0;
border-style: solid;
border-color: shade($bg_color, .7);
}
}
}

View File

@ -0,0 +1,84 @@
/*********
! Entry *
**********/
%linked_entry {
border-width: 1px;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
&:first-child {
border-width: 1px;
border-radius: $roundness;
border-right-width: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:last-child {
border-width: 1px;
border-radius: $roundness;
border-left-width: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&:only-child {
border-width: 1px;
border-radius: $roundness;
}
}
%entry {
padding: ($spacing - 1px) $spacing;
border-width: 1px;
border-style: solid;
border-radius: $roundness;
transition: border 150ms ease;
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
inset -1px 0 alpha($dark_shadow, .06);
&:focus, &:hover, &:active { transition: none; }
&:selected, &:selected:focus {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:disabled { box-shadow: none; }
& progressbar {
@include linear-gradient($selected_bg_color);
border-width: 0;
border-radius: $roundness;
color: $selected_fg_color;
}
&.image.left { padding-right: $spacing; }
}
@mixin entry($bg, $fg) {
@extend %entry;
@include linear-gradient($bg, to top);
@include border($bg);
color: $fg;
&:focus, &:active { border-color: $selected_bg_color; }
&:disabled {
@include linear-gradient(shade($bg, .9), to top);
color: mix($bg, $fg, .5);
}
}
@include exports("entry") {
entry {
@include entry($base_color, $text_color);
&.linked, .linked & { @extend %linked_entry; }
}
}

View File

@ -0,0 +1,48 @@
/******************
! Grid and flowbox
*******************/
@include exports("grid") {
list {
background-color: shade($bg_color, .97);
color: $fg_color;
row {
&, &.button {
border: 0;
border-radius: 0;
padding: $spacing;
background-image: none;
background-color: alpha($bg_color, 0);
box-shadow: none;
&:hover {
background-image: none;
background-color: shade($bg_color, 1.02);
}
&:selected {
&, &:hover, &:focus {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
}
}
}
.grid-child {
&, flowBox & {
padding: $spacing;
border-radius: $roundness;
&:selected {
@extend %selected;
outline-offset: -2px;
}
}
}
}

View File

@ -0,0 +1,38 @@
@import "button";
/*********
! Infobar
**********/
@include exports("infobar") {
infobar {
border: 0;
$types: (
info: ($info_fg_color, $info_bg_color),
warning: ($warning_fg_color, $warning_bg_color),
question: ($question_fg_color, $question_bg_color),
error: ($error_fg_color, $error_bg_color),
);
@each $type, $colors in $types {
$fg_color: nth($colors, 1);
$bg_color: nth($colors, 2);
&.#{$type} {
@include linear-gradient($bg_color);
border: 1px solid shade($bg_color, .8);
color: $fg_color;
button {
@include button($bg_color, $fg_color);
&.close { @extend %close_button; }
}
}
}
}
}

View File

@ -0,0 +1,273 @@
@import "entry";
/*********
! Menubar
**********/
@include exports("menubar") {
.menubar, menubar {
-GtkWidget-window-dragging: true;
border: 0;
background-color: $menubar_bg_color;
background-image: none;
color: $menubar_fg_color;
&.menuitem, .menuitem, menuitem {
padding: $spacing ($spacing * 2);
border: 1px solid transparent;
background-color: transparent;
background-image: none;
color: $menu_fg_color;
&:hover {
border-color: mix($menu_bg_color, $menu_fg_color, .21);
background-color: mix($menu_bg_color, $menu_fg_color, .21);
background-image: none;
color: shade($menu_fg_color, 1.08);
}
*:hover { color: shade($menu_fg_color, 1.08); }
}
}
}
/******
! Menu
*******/
@include exports("menu") {
* {
padding: 0;
}
combobox {
&.menu, .menu, menu {
background-color: $menu_bg_color;
margin: $spacing;
}
}
#toolbar-popup, menu {
padding: 0;
border-radius: 0;
border: 0;
background-color: $menu_bg_color;
color: $menu_fg_color;
&:checked { background-color: $selected_bg_color; }
button {
&, &:hover, &:active, &:active *:disabled, &:disabled {
border-width: 0;
background-color: transparent;
background-image: none;
}
}
}
menuitem window decoration {
box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.context-menu { font: initial; }
.menuitem, menuitem {
&, menu & {
margin: $spacing;
padding: $spacing 8px;
border: 0;
border-radius: 0;
background-color: transparent;
background-image: none;
-GtkMenuItem-arrow-scaling: .5;
menu &:last-child {
padding-bottom: 8px;
}
menu &:first-child {
padding-top: 8px;
}
&:active, &:hover {
border: 0;
background-color: $selected_bg_color;
background-image: none;
color: $selected_fg_color;
}
*:active, *:hover { color: $selected_fg_color; }
&:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
}
&.check, &.radio {
&, &:focus, &:hover, &:disabled { background-image: none; }
&, &:focus, &:hover, &:active, &:disabled {
border-style: none;
background-color: transparent;
}
}
&.separator {
padding: 0;
border-style: none;
color: shade($menu_bg_color, ($contrast + .1));
}
&.button, &.button.flat {
&, &:focus, &:active, &:disabled, &:active:disabled {
background-color: transparent;
background-image: none;
border: 0;
box-shadow: none;
color: currentColor;
}
&:hover, &:focus:hover, &:active:hover, &:selected {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
calendar {
&:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); }
.button {
border-style: none;
background-color: transparent;
background-image: none;
}
}
.accelerator {
color: alpha($menu_fg_color, .6);
&:hover { color: alpha($selected_fg_color, .8); }
&:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
}
entry { @include entry($menu_bg_color, $menu_fg_color); }
}
}
%undecorated_button {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
}
/*********
! Popover
**********/
@include exports("popover") {
popover {
@include border($menu_bg_color);
margin: 10px;
padding: $spacing;
border-radius: $roundness;
border-width: 1px;
border-style: solid;
background-clip: border-box;
background-color: $menu_bg_color;
background-image: none;
color: $menu_fg_color;
box-shadow: 0 3px 6px alpha($black, .16);
&.background {
background-image: none;
background-color: $menu_bg_color;
color: $menu_fg_color;
}
&:backdrop { box-shadow: none; }
.osd & {
box-shadow: 0 2px 7px 3px alpha($black, .5);
> toolbar button {
border-radius: 0;
border-width: 0;
background-color: transparent;
background-image: none;
}
}
view, .view, list {
background-color: transparent;
background-image: none;
color: $menu_fg_color;
}
.list-row, list row {
&, & .button {
background-color: transparent;
background-image: none;
color: $menu_fg_color;
&:focus, &:hover, &:active {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
}
frame {
border-color: border_normal($menu_bg_color);
border-radius: $roundness;
}
entry { @include entry($menu_bg_color, $menu_fg_color); }
button { @include button($menu_bg_color, $menu_fg_color); }
> list, > view, > toolbar { background-color: transparent; }
separator {
border: 0;
background-color: transparent;
color: alpha($menu_bg_color, .5);
font-size: 80%;
font-weight: bold;
}
}
modelbutton {
padding: $spacing ($spacing + 2px);
border: none;
transition: 150ms ease;
outline-color: transparent;
&, &:backdrop, &.flat, &.flat:backdrop {
//@extend %undecorated_button;
&:hover { background-color: $selected_bg_color; color: $selected_fg_color }
&: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; }
&.flat arrow {
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
}
}
}
}

View File

@ -0,0 +1,253 @@
/***************
! Dimmed label *
****************/
@include exports("dimlabel") {
.dim-label {
opacity: .5;
text-shadow: none;
}
}
/***********
! Tooltip *
************/
@include exports("tooltip") {
.tooltip {
&.background {
@include linear-gradient($tooltip_bg_color);
border: 0;
border-radius: $roundness;
color: $tooltip_fg_color;
}
* {
background-color: transparent;
color: inherit;
}
}
}
/***********
! Dialogs *
************/
@include exports("dialogs") {
messagedialog, .message-dialog, .prompt {
-GtkDialog-content-area-border: 0;
-GtkDialog-action-area-border: $spacing;
-GtkDialog-button-spacing: 0;
margin: 0;
padding: 0;
}
}
/*********************
! App notifications *
**********************/
@include exports("notifications") {
.app-notification {
&, &.frame {
border-style: solid;
border-color: border_normal($osd_bg);
border-width: 0 1px 1px;
border-radius: 0 0 $roundness $roundness;
padding: $spacing * 2;
background-color: $osd_bg;
background-image: none;
color: $osd_fg;
.button { @include button($osd_bg, $osd_fg); }
}
}
}
/*************
! Expanders *
**************/
@include exports("expander") {
expander {
padding: $spacing;
outline-offset: 1px;
min-width: 8px;
}
.expander {
color: alpha(currentColor, .7);
border: alpha(currentColor, .7);
&:hover {
color: alpha(currentColor, .8);
border-color: alpha(currentColor, .8);
}
&:active {
color: alpha(currentColor, .9);
border-color: alpha(currentColor, .9);
}
}
}
/*******************
! Symbolic images *
********************/
@include exports("symbolicimage") {
.image {
color: alpha(currentColor, .5);
&:hover { color: alpha(currentColor, .9); }
&:selected, &:selected:hover { color: $selected_fg_color; }
}
}
/****************
! Floating bar *
*****************/
@include exports("floatingbar") {
.floating-bar {
@include linear-gradient($bg_color);
border: 1px solid border_normal($bg_color);
border-radius: $roundness;
color: $fg_color;
&.top {
border-top-width: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&.right {
border-right-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&.bottom {
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&.left {
border-left-width: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.button {
-GtkButton-inner-border: 0;
border: 0;
background-color: transparent;
background-image: none;
}
}
}
/*************************
! Touch text selections *
**************************/
@include exports("touchbubble") {
GtkBubbleWindow {
border-radius: $roundness;
background-clip: border-box;
&.osd.background { background-color: $osd_bg; }
.toolbar { background-color: transparent; }
}
}
/***************
! Font-viewer *
****************/
@include exports("fontviewer") {
SushiFontWidget {
padding: $spacing ($spacing * 2);
}
}
/*************
! Gucharmap *
**************/
@include exports("charmap") {
GucharmapChartable {
background-color: $base_color;
color: $text_color;
&:focus, &:hover, &:active, &:selected { @extend %selected; }
}
}
/*************
! Evolution *
**************/
@include exports("evolution") {
EPreviewPane .entry {
background-color: $base_color;
color: $text_color;
}
}
/*******************
! Gnome Bluetooth *
********************/
@include exports("gnome-bluetooth") {
entry.entry.pin-entry {
font: regular 50;
padding-left: 25px;
padding-right: 25px;
}
label.pin-label { font: regular 50; }
}
/*******************
! Selected Items *
********************/
@include exports("selected_items") {
%selected_items {
background-color: $selected_bg_color;
@at-root %nobg_selected_items, & {
color: $selected_fg_color;
@if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
&:backdrop {
color: $backdrop_selected_fg_color;
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
}
}
}
}

View File

@ -0,0 +1,125 @@
@import "button";
/**********
! Notebook
***********/
@include exports("notebook") {
notebook {
padding: 0;
border-width: 1px 0 0;
border-style: solid;
border-color: border_normal($base_color);
border-radius: 0;
background-color: $base_color;
background-image: none;
background-clip: border-box;
color: $text_color;
&.frame { border-width: 1px; }
> header {
margin: 0;
border-width: 0;
background-color: shade($base_color, .9);
&.frame {
border-color: border_normal($base_color);
&.top { border-width: 1px 1px 0; }
&.right { border-width: 1px 1px 1px 0; }
&.bottom { border-width: 0 1px 1px; }
&.left { border-width: 1px 0 1px 1px; }
}
tabs arrow {
margin: 5px;
}
}
viewport {
border-width: 0;
background-color: $base_color;
color: $text_color;
}
tab {
padding: ($spacing + 1px) ($spacing * 2);
border: 1px solid transparent;
background-color: transparent;
background-image: none;
&:hover {
background-color: shade($base_color, .95);
border-color: shade($base_color, .8);
}
&:active {
background-color: $base_color;
background-image: none;
border-color: shade($base_color, .85);
}
&.top {
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
&.right {
border-left-width: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&.bottom {
border-top-width: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&.left {
border-right-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
label { color: mix($text_color, $base_color, .3); }
/* close button styling */
button { @extend %close_button; }
}
.prelight-page {
&, label { color: mix($text_color, $base_color, .15); }
}
.active-page {
&, label { color: $text_color; }
}
.reorderable-page {
&:hover {
background-color: shade($base_color, .85);
border-left: 0;
border-right: 0;
/* using box shadows instead of borders due to slanted edges */
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
}
&:active {
background-color: shade($base_color, .9);
border-left: 0;
border-right: 0;
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
}
}
}
}

View File

@ -0,0 +1,131 @@
@import "button";
/*******
! OSD *
********/
@include exports("osd") {
overlay.osd { background-color: transparent; }
osd {
&.background {
background-color: alpha($osd_bg, .8);
color: $osd_fg;
}
frame {
background-clip: border-box;
background-origin: border-box;
}
button { @include button($osd_bg, $osd_fg); }
toolbar {
-GtkToolbar-button-relief: normal;
padding: $spacing;
border: 1px solid border_normal($osd_bg);
border-radius: $roundness;
background-color: $osd_bg;
background-image: none;
color: $osd_fg;
separator { color: shade($osd_bg, ($contrast + .1)); }
}
/* used by gnome-settings-daemon's media-keys OSD */
trough { background-color: shade($osd_bg, .8); }
progressbar { background-color: $osd_fg; }
scale {
slider {
@include linear-gradient(shade($osd_bg, 1.08));
@include border($osd_bg);
&:disabled { @include linear-gradient(shade($osd_bg, .9)); }
}
trough {
border-color: shade($osd_bg, .8);
background-color: shade($osd_bg, 1.08);
background-image: none;
&.highlight {
border-color: $selected_bg_color;
background-color: $selected_bg_color;
background-image: none;
}
&:disabled, &.highlight:disabled {
border-color: shade($osd_bg, .85);
background-color: shade($osd_bg, .9);
background-image: none;
}
}
}
&.view, .view, view { background-color: $osd_bg; }
scrollbar {
trough { background-color: $osd_bg; }
slider {
border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .21);
border-radius: 0;
background-color: mix($osd_bg, $osd_fg, .21);
&:hover {
border-color: mix(shade($osd_bg, .87), $osd_fg, .31);
background-color: mix($osd_bg, $osd_fg, .31);
}
&:active {
border-color: shade($selected_bg_color, .9);
background-color: $selected_bg_color;
}
}
}
iconview.cell {
&:selected, &:selected:focus {
background-color: transparent;
border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .21);
border-radius: $roundness;
outline-color: transparent;
}
}
/* used by Documents */
.page-thumbnail {
border: 1px solid shade($osd_bg, .9);
/* when there's no pixbuf yet */
background-color: $osd_bg;
}
}
.osd progressBar, progressBar.osd {
-GtkProgressBar-xspacing: 0;
-GtkProgressBar-yspacing: 2px;
-GtkProgressBar-min-horizontal-bar-height: 2px;
padding: 0;
&.trough {
padding: 0;
border-style: none;
border-radius: 0;
background-image: none;
background-color: transparent;
}
&.progressbar {
border-style: none;
border-radius: 0;
background-color: $selected_bg_color;
background-image: none;
}
}
}

View File

@ -0,0 +1,119 @@
@mixin overshoot($position, $type: normal, $color: $selected_bg_color) {
$_small_gradient_length: 5%;
$_big_gradient_length: 100%;
$_position: center top;
$_small_gradient_size: 100% $_small_gradient_length;
$_big_gradient_size: 100% $_big_gradient_length;
@if $position == bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
} @else if $position == right {
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
} @else if $position == left {
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $color;
$_big_gradient_color: $color;
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, .5,
to(alpha($_small_gradient_color, .35)),
to(alpha($_small_gradient_color, .25)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, .6,
from(alpha($_big_gradient_color, .2)),
to(alpha($_big_gradient_color, 0)));
@if $type == normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
} @else if $type == backdrop {
background-image: $_small_gradient;
background-size: $_small_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
background-color: transparent; // reset some properties to be sure to not inherit them somehow
border: 0;
box-shadow: none;
}
@mixin undershoot($position) {
$_undershoot_color_dark: alpha($black, .2);
$_undershoot_color_light: alpha($white, .2);
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;
$_gradient_repeat: repeat-x;
$_bg_pos: center $position;
background-color: transparent; // shouldn't be needed, but better to be sure;
@if ($position == left) or ($position == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_gradient_repeat: repeat-y;
$_bg_pos: $position center;
}
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
$_undershoot_color_light 50%,
$_undershoot_color_dark 50%);
padding-#{$position}: 1px;
background-size: $_dash_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
}
// 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);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
// 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); }
}

View File

@ -0,0 +1,322 @@
/*****************
! Progress bars *
******************/
@include exports("progressbar") {
progressbar {
padding: 0;
border-radius: $roundness;
font-size: smaller;
color: alpha($fg_color, .6);
min-width: 6px;
min-height: 6px;
&.osd {
min-height: 4px;
}
trough {
border: 1px solid alpha(border_normal($bg_color), .5);
background-color: shade($bg_color, 1.08);
background-image: none;
}
}
progressbar progress {
@include linear-gradient($selected_bg_color);
border-radius: 0;
box-shadow: none;
&.left {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
&.right {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&.left.right { box-shadow: none; }
&.vertical {
@include linear-gradient($selected_bg_color, to right);
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
}
}
}
levelbar {
min-width: 34px;
min-height: 3px;
&.vertical {
min-width: 3px;
min-height: 34px;
}
}
levelbar {
trough {
@include linear-gradient(shade($bg_color, 1.08), to top);
border: 1px solid alpha(border_normal($bg_color), .5);
border-radius: $roundness;
}
&.discrete {
&.horizontal { margin-right: 1px; }
&.vertical { margin-bottom: 1px; }
}
block.filled {
@include linear-gradient($selected_bg_color);
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators
border-color: transparent;
border-radius: 0;
&.level-high {
background-color: $success_color;
border-color: transparent;
}
&.level-low {
background-color: $warning_color;
border-color: transparent;
}
&.empty-fill-block {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
}
}
scale {
$_marks_length: 3px;
$_marks_distance: 1px;
$button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$button_transition: all 200ms $ease-out-quad;
min-height: 10px;
min-width: 10px;
&.horizontal {
padding: 6px 0;
trough { padding: 0 7px; }
highlight, fill { margin: 0 -7px; }
}
&.vertical {
padding: 0 6px;
trough { padding: 7px 0; }
highlight, fill { margin: -7px 0; }
}
// The slider is inside the trough, negative margin to make it bigger
slider {
min-height: 15px;
min-width: 15px;
margin: -6px;
}
// Click-and-hold the slider to activate
&.fine-tune {
&.horizontal {
padding-top: 4px;
padding-bottom: 4px;
min-height: 15px;
}
&.vertical {
padding-left: 4px;
padding-right: 4px;
min-width: 15px;
}
// Make the trough grow in fine-tune mode
slider { margin: -4px; }
fill,
highlight,
trough {
border-radius: 5px;
-gtk-outline-radius: 7px;
}
}
// Trough
trough {
$_scale_trough_bg: if($variant == 'light', shade($toolbar_bg_color, .8), darken($bg_color, 5%));
outline-offset: 2px;
-gtk-outline-radius: 4.5px;
border-radius: 2.5px;
background-color: $_scale_trough_bg;
&:disabled { background-color: transparentize($_scale_trough_bg, 0.45); }
//OSD troughs
.osd & {
background-color: lighten($osd_bg, 7%);
highlight {
background-color: $selected_bg_color;
}
}
// Troughs in selected list-rows and infobars
row:selected &,
infobar & {
background-color: transparentize(black, 0.8);
highlight {
background-color: $selected_fg_color;
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
}
&:disabled { background-color: transparentize(black, 0.9); }
}
}
// The colored part of trough
highlight {
border-radius: 2.5px;
background-color: $selected_bg_color;
&:disabled { background-color: transparentize($selected_bg_color, 0.45); }
}
// this is another differently styled part of the trough, the most relevant use case is for example
// in media player to indicate how much video stream as been cached
fill {
border-radius: 2.5px;
background-color: transparentize($selected_bg_color, 0.5);
&:disabled { background-color: transparent; }
}
slider {
$_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
background-color: $button_bg;
border: 1px solid $_slider_border;
border-radius: 100%;
transition: $button_transition;
transition-property: background, border;
&:hover { background-color: lighten($button_bg, 5%); }
&:active {
background-clip: border-box;
background-color: $selected_bg_color;
border-color: $selected_bg_color;
}
&:disabled {
background-color: mix($fg_color, $bg_color, 55%);
border-color: transparentize($_slider_border, 0.2);
}
// Selected list-row and infobar sliders
row:selected &,
infobar & {
background-clip: border-box;
background-color: $selected_fg_color;
border-color: $selected_fg_color;
&:hover {
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
}
&:active {
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
}
&:disabled{
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
}
}
// OSD sliders
.osd & {
background-clip: border-box;
background-color: $selected_bg_color;
border-color: $selected_bg_color;
&:hover {
background-color: lighten($selected_bg_color, 10%);
border-color: lighten($selected_bg_color, 10%)
}
&:active {
background-color: darken($selected_bg_color, 10%);
border-color: darken($selected_bg_color, 10%);
}
}
}
value { color: alpha(currentColor, 0.4); }
marks {
color: alpha(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_distance;
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
}
}
}
&.fine-tune marks {
@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_distance - 1px);
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
}
}
}
&.horizontal {
indicator {
min-height: $_marks_length;
min-width: 1px;
}
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
}
&.vertical {
indicator {
min-height: 1px;
min-width: $_marks_length;
}
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
}
}
}

View File

@ -0,0 +1,164 @@
/***********
! Scrollbar
************/
@include exports("scrollbar") {
scrollbar {
$_slider_min_length: 20px;
// disable steppers
@at-root * {
-GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;
}
background-color: $scrollbar_bg_color;
transition: 300ms ease-out;
// scrollbar border
&.top { border-bottom: 1px solid $borders_color; }
&.bottom { border-top: 1px solid $borders_color; }
&.left { border-right: 1px solid $borders_color; }
&.right { border-left: 1px solid $borders_color; }
&:backdrop {
background-color: $backdrop_scrollbar_bg_color;
border-color: $backdrop_borders_color;
transition: 400ms ease-in;
}
// slider
slider {
min-width: 7px;
min-height: 7px;
margin: -1px;
border: 4px solid transparent;
border-radius: 2px;
background-clip: padding-box;
background-color: $scrollbar_slider_color;
&:hover { background-color: $scrollbar_slider_hover_color; }
&:hover:active { background-color: $scrollbar_slider_active_color; }
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
&:disabled { background-color: transparent; }
}
&.fine-tune {
slider {
min-width: 7px;
min-height: 7px;
}
&.horizontal slider { border-width: 1px; }
&.vertical slider { border-width: 1px; }
}
&.overlay-indicator {
&:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
background-color: transparent;
slider {
margin: 0;
min-width: 5px;
min-height: 5px;
background-color: $fg_color;
border: 1px solid if($variant == 'light', white, black);
}
button {
min-width: 5px;
min-height: 5px;
background-color: $fg_color;
background-clip: padding-box;
border-radius: 2px;
border: 1px solid if($variant == 'light', white, black);
-gtk-icon-source: none;
}
&.horizontal {
slider {
margin: 0 2px;
min-width: $_slider_min_length;
}
button {
margin: 1px 2px;
min-width: 5px;
}
}
&.vertical {
slider {
margin: 2px 0;
min-height: $_slider_min_length;
}
button {
margin: 2px 1px;
min-height: 5px;
}
}
}
&.dragging,
&.hovering { opacity: 0.8; }
}
&.horizontal slider { min-width: $_slider_min_length; }
&.vertical slider { min-height: $_slider_min_length; }
// button styling
button {
padding: 0;
min-width: 7px;
min-height: 7px;
border-style: none;
border-radius: 2px;
transition-property: min-height, min-width, color;
color: $scrollbar_slider_color;
&:hover {
color: $scrollbar_slider_hover_color;
}
&:active, &:checked {
color: $scrollbar_slider_active_color;
}
&:backdrop {
color: $backdrop_scrollbar_slider_color;
}
}
// button icons
&.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'); }
}
}
}
treeview ~ scrollbar.vertical {
border-top: 1px solid $borders_color;
margin-top: -1px;
}
}

View File

@ -0,0 +1,117 @@
/*********
! Sidebar
**********/
@include exports("sidebar") {
.sidebar {
&, &.view, .view, view, scrolledwindow {
background-color: $bg_color;
color: mix($fg_color, $bg_color, .1);
&.separator, separator {
&, &:hover, &:focus {
border-width: 1px;
border-style: solid;
border-color: shade($bg_color, .9);
color: shade($bg_color, .9);
}
}
}
row, .view row, view row {
&:selected {
&, &:hover, &:focus {
border: 0;
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:hover {
border: 0;
background-image: none;
background-color: shade($selected_bg_color, 1.05);
color: $selected_fg_color;
}
}
&:hover {
border: 0;
background-image: none;
background-color: shade($bg_color, 1.05);
}
}
.sidebar-label {
padding-left: $spacing;
padding-right: $spacing;
}
.frame, frame { border-width: 0; }
.sidebar-icon {
padding-left: $spacing * 2;
padding-right: $spacing * 2;
}
assistant & {
padding: $spacing;
border-width: 0 1px 0 0;
border-style: solid;
border-right-color: border_normal($bg_color);
border-radius: 0;
background-color: $bg_color;
color: mix($fg_color, $bg_color, .1);
&:dir(ltr) { border-width: 0 1px 0 0; }
&:dir(rtl) { border-width: 0 0 0 1px; }
label {
padding: $spacing ($spacing * 2);
&.highlight { background-color: mix($bg_color, $fg_color, .8); }
}
&.csd .sidebar { border-top-style: none; }
.highlight { font: bold; }
}
}
}
/******
! Paned
*******/
@include exports("paned") {
paned {
-GtkPaned-handle-size: 1;
-gtk-icon-source: none;
margin: 0 $spacing;
}
paned:dir(rtl) {
margin-right: 0;
margin-left: $spacing;
}
paned .pane-separator { background-color: shade($bg_color, .9); }
paned.wide {
-GtkPaned-handle-size: 4;
margin: 0;
}
paned.wide .pane-separator {
background-color: transparent;
border-style: none solid;
border-color: shade($bg_color, .9);
border-width: 1px;
}
paned.wide.vertical .pane-separator { border-style: solid none; }
}

View File

@ -0,0 +1,24 @@
/*******************
! Spinner animation
********************/
@include exports("spinner") {
@keyframes spin {
to { -gtk-icon-transform: rotate(1turn); }
}
.spinner {
background-image: none;
background-color: $selected_bg_color;
opacity: 0; // non spinning spinner makes no sense
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
&:active {
opacity: 1;
animation: spin 1s linear infinite;
&:disabled { opacity: .5; }
}
}
}

View File

@ -0,0 +1,116 @@
/***********************
! Check and Radio items
************************/
$suffix: if($variant == "dark", "-dark", "");
@mixin toggle($type) {
background-image: none;
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
&:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
&:checked, &:active {
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
&:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
}
&:indeterminate {
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
&:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
}
&.menuitem {
-gtk-icon-source: none;
&:disabled { -gtk-icon-source: none; }
&:checked, &:active {
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
}
&:indeterminate {
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
}
}
}
@include exports("checkradio") {
radio {
@include toggle("radio");
min-width: 16px;
min-height: 16px;
}
check {
@include toggle("checkbox");
min-width: 16px;
min-height: 16px;
}
iconview.content-view.cell.check {
-gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
&:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
}
}
/********
! Switch
*********/
@include exports("switch") {
switch {
border-radius: 3px;
padding: 5px;
border: none;
outline: none;
transition: all 0.4s linear;
transition: background-colot 0.4s linear;
min-width: 93px;
min-height: 25px;
background-color: #e8eaec;
color: #8e969e;
slider {
background-color: #fbfbfb;
transition: all 0.3s linear;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
&:checked {
background-color: $selected_bg_color;
background-image: none;
border-color: $selected_bg_color;
color: $base_color;
slider {
background-color: $white;
}
}
&:disabled {
background-color: #d8d8d8;
background-image: none;
border-color: #ccc;
color: mix(#444, #f0f0f0, 0.5);
slider {
background-color: #e8eaec;
}
}
}
}

View File

@ -0,0 +1,123 @@
@import "button";
/*********
! Toolbar
**********/
@mixin toolbar($bg, $fg) {
@include linear-gradient($bg);
@include border($bg);
padding: $spacing * 2;
color: $fg;
&:disabled {
@include linear-gradient(shade($bg, .9));
color: mix($fg, $bg, .5);
}
.title {
font: bold;
padding: 0 ($spacing * 2);
}
.subtitle {
font: smaller;
padding: 0 ($spacing * 2);
}
button { @include button($bg, $fg); }
button.linked, .linked button { @include linked_button($bg); }
combobox, button {
padding: $spacing - 1px;
&.text-button { padding: $spacing; }
&.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
}
separator, separator:disabled {
color: shade($bg, ($contrast + .1));
border-color: currentColor;
-GtkWidget-window-dragging: true;
}
.menubar, menubar { -GtkToolbar-button-relief: normal; }
}
@include exports("toolbar") {
toolbar {
@include toolbar($bg_color, $fg_color);
border-style: none;
&.inline-toolbar {
background-image: none;
background-color: transparent;
}
}
headerbar {
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
border-width: 0 0 1px;
border-style: solid;
}
.titlebar {
@include linear-gradient($titlebar_bg_color);
border-radius: $roundness $roundness 0 0;
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
&:backdrop {
@include linear-gradient($titlebar_bg_color);
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
text-shadow: none;
}
&.default-decoration {
border: 0;
box-shadow: none;
}
.tiled &, .maximized & { border-radius: 0; }
.title { font: bold; }
.titlebutton {
padding: $spacing;
border: 0;
background-image: none;
background-color: transparent;
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
box-shadow: none;
&:hover, &:hover:focus {
background-image: none;
background-color: transparent;
color: $selected_bg_color;
box-shadow: none;
}
&:active, &:active:hover {
background-image: none;
background-color: transparent;
color: shade($selected_bg_color, .9);
box-shadow: none;
}
&:backdrop {
background: none;
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
-gtk-icon-shadow: none;
}
}
}
}

View File

@ -0,0 +1,332 @@
/***************
! Generic views
****************/
@include exports("view") {
.view,
%view {
color: $text_color;
background-color: $base_color;
&:backdrop {
color: $backdrop_text_color;
background-color: $backdrop_base_color;
}
&:selected {
&:focus, & {
@extend %selected_items;
border-radius: 3px;
}
}
}
.view,
textview {
text {
@extend %view;
selection { &:focus, & { @extend %selected_items; }}
}
}
iconview { @extend .view; }
}
/************
! Treeview
*************/
@include exports("treeview") {
.rubberband,
rubberband {
border: 1px solid darken($selected_bg_color, 10%);
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
}
treeview entry {
&.flat, & {
border-radius: 0;
background-image: none;
background-color: $base_color;
&:focus { border-color: $selected_bg_color; }
}
}
%column_header_button {
padding: 0 6px;
border-radius: 0;
background-image: none;
text-shadow: none;
border-style: none solid solid none;
border-color: $bg_color;
&:disabled {
border-color: $bg_color;
background-image: none;
}
&:backdrop {
border-color: $backdrop_bg_color;
border-style: none solid solid none;
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
background-image: none;
background-color: $backdrop_base_color;
&:disabled {
border-color: $backdrop_bg_color;
background-image: none;
}
}
}
treeview.view {
-GtkTreeView-grid-line-width: 1;
-GtkTreeView-grid-line-pattern: '';
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
border-top-color: $bg_color; // 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, & {
@extend %selected_items;
border-radius: 0;
}
&:backdrop, & {
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
}
}
&:disabled {
color: $insensitive_fg_color;
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 40%);
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
}
&:backdrop { color: $backdrop_insensitive_color; }
}
&.separator {
min-height: 2px;
color: $bg_color;
&:backdrop { color: transparentize($bg_color, 0.9); }
}
&:backdrop {
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
border-top: $backdrop_bg_color;
}
&:drop(active) {
border-style: solid none;
border-width: 1px;
border-color: $selected_borders_color;
&.after { border-top-style: none; }
&.before { border-bottom-style: none; }
}
&.expander {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
color: mix($fg_color, $base_color, 70%);
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
&:hover { color: $fg_color; }
&:selected {
color: mix($selected_fg_color, $selected_bg_color, 70%);
&:hover { color: $selected_fg_color; }
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
}
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
}
&.progressbar { // progress bar in treeviews
@if $variant == light { color: $base_color; }
border: 1px solid $selected_borders_color;
border-radius: 4px;
background-color: $selected_bg_color;
background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%));
box-shadow: inset 0 1px if($variant == 'light', transparentize(white,0.7), transparentize(white,0.85)),
0 1px if($variant == 'light', transparentize(black, 0.8), transparentize(black,0.9));
&:selected {
&:focus, & {
border-radius: 4px;
@if $variant == 'light' {
color: $selected_bg_color;
box-shadow: none;
} @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
background-image: linear-gradient(to bottom,
$base_color,
darken($base_color,10%));
&:backdrop {
@if $variant == 'light' {
color: $selected_bg_color;
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
} @else { border-color: $backdrop_base_color; }
background-color: $backdrop_base_color;
}
}
}
&:backdrop {
@if $variant == 'light' { color: $backdrop_base_color;
} @else { border-color: $backdrop_base_color; }
background-image: none;
box-shadow: none;
}
}
&.trough { // progress bar trough in treeviews
background-color: transparentize($fg_color,0.9);
border-radius: 4px;
&:selected {
&:focus, & {
background-color: if($variant == 'light',
transparentize($selected_fg_color, 0.7),
darken($selected_bg_color, 10%));
border-radius: 4px;
@if $variant == 'light' {
border-width: 1px 0;
border-style: solid;
border-color: $selected_bg_color;
}
}
}
}
header {
button {
$_column_header_color: mix($fg_color, $base_color, 50%);
@extend %column_header_button;
color: $_column_header_color;
background-color: $base_color;
font-weight: bold;
text-shadow: none;
box-shadow: none;
&:hover {
@extend %column_header_button;
color: mix($_column_header_color, $fg_color, 50%);
box-shadow: none;
transition: none; //I shouldn't need this
}
&:active {
@extend %column_header_button;
color: $fg_color;
transition: none; //I shouldn't need this
}
}
button:last-child { &:backdrop, & { border-right-style: none; }}
}
button.dnd,
header.button.dnd { // for treeview-like derive widgets
&:active, &:selected, &:hover, & {
padding: 0 6px;
transition: none;
background-image: none;
background-color: $selected_bg_color;
color: $base_color;
border-radius: 0;
border-style: none;
box-shadow: inset 0 0 0 1px $base_color;
text-shadow: none;
}
}
}
}
/***********
! Separator
************/
@include exports("separator") {
.view.separator, .separator {
color: shade($bg_color, ($contrast + .1));
border: 1px solid currentColor;
}
}
/*********************
! Column view headers
**********************/
@include exports("columnheader") {
column-header {
.button {
&, &:active {
border-width: 0 1px 1px 0;
border-radius: 0;
}
&, &:active, &:focus, &:active:focus {
border-color: shade($base_color, .9);
border-bottom-color: shade($base_color, .8);
background-color: shade($base_color, .97);
background-image: none;
}
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
border-color: shade($base_color, .9);
border-bottom-color: shade($base_color, .8);
background-color: shade($base_color, .99);
background-image: none;
}
&:last-child .button { border-width: 0 0 1px; }
}
}
}
/**********
! Frames *
***********/
@include exports("frame") {
.frame {
border: 1px solid border_normal($bg_color);
&.flat { border: 0; }
}
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
scrolledwindow viewport.frame { border: 0; }
}

View File

@ -0,0 +1,55 @@
/**************
! Window frame
***************/
@include exports("window") {
%window {
box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22), 0 0 0 1px $wm_border_focused;
&:backdrop {
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23), 0 0 0 1px $wm_border_unfocused;
}
}
.window-frame {
@extend %window;
border: 0;
border-radius: $roundness $roundness 0 0;
/* this is used for the resize cursor area */
margin: $spacing * 3;
&.tiled { border-radius: 0; }
&.solid-csd {
border-radius: 0;
margin: 1px;
background-color: $bg_color;
box-shadow: none;
}
&.csd {
&.popup {
@extend %window;
border-radius: 0;
}
&.tooltip {
border-radius: $roundness;
box-shadow: none;
}
&.message-dialog {
@extend %window;
border-radius: $roundness;
}
}
&.ssd {
&.maximized { border-radius: 0; }
}
}
}

View File

@ -0,0 +1 @@
../gtk-3.0/thumbnail.png