Moved between oomox themes
This one's based on Numix, which should look a lot better.
This commit is contained in:
101
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_colors.scss
Normal file
101
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_colors.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
@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 button_bg_color #{"" + $button_bg_color};
|
||||
@define-color button_fg_color #{"" + $button_fg_color};
|
||||
@define-color header_button_bg_color #{"" + $header_button_bg_color};
|
||||
@define-color header_button_fg_color #{"" + $header_button_fg_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};
|
||||
@define-color osd_insensitive_bg_color #{"" + $osd_insensitive_bg_color};
|
||||
@define-color osd_insensitive_fg_color #{"" + $osd_insensitive_fg_color};
|
||||
@define-color osd_borders_color #{"" + $osd_borders_color};
|
||||
|
||||
/* lightdm greeter colors */
|
||||
@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
|
||||
@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
|
||||
|
||||
/* widget text/foreground color on backdrop windows */
|
||||
@define-color theme_unfocused_fg_color #{"" + $backdrop_fg_color};
|
||||
|
||||
/* text color for entries, views and content in general on backdrop windows */
|
||||
@define-color theme_unfocused_text_color #{"" + $text_color};
|
||||
|
||||
/* widget base background color on backdrop windows */
|
||||
@define-color theme_unfocused_bg_color #{"" + $backdrop_bg_color};
|
||||
|
||||
/* text widgets and the like base background color on backdrop windows */
|
||||
@define-color theme_unfocused_base_color #{"" + $backdrop_base_color};
|
||||
|
||||
/* base background color of selections on backdrop windows */
|
||||
@define-color theme_unfocused_selected_bg_color #{"" + $selected_bg_color};
|
||||
|
||||
/* text/foreground color of selections on backdrop windows */
|
||||
@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
|
||||
|
||||
/* insensitive color on backdrop windows*/
|
||||
@define-color unfocused_insensitive_color #{"" + $backdrop_insensitive_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};
|
||||
95
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_functions.scss
Normal file
95
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_functions.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
$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 if($variant == 'light', mix($selected_bg_color, $color, .3), darken($selected_bg_color, 20%));
|
||||
}
|
||||
|
||||
@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); }
|
||||
}
|
||||
|
||||
@function _text_shadow_color($tc: $fg_color, $bg: $bg_color) {
|
||||
//
|
||||
// calculate the color of text shadows
|
||||
//
|
||||
// $tc is the text color
|
||||
// $bg is the background color
|
||||
//
|
||||
$_lbg: lightness($bg) / 100%;
|
||||
|
||||
@if lightness($tc) < 50% {
|
||||
@return transparentize(white, 1 - $_lbg / ($_lbg * 1.3));
|
||||
} @else {
|
||||
@return transparentize(black, $_lbg * .8);
|
||||
}
|
||||
}
|
||||
150
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_global.scss
Normal file
150
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_global.scss
Normal file
@@ -0,0 +1,150 @@
|
||||
// scss-lint:disable ColorVariable
|
||||
|
||||
@import "functions";
|
||||
|
||||
// default color scheme
|
||||
$bg_color: if($variant == "dark", #ebdbb2, #1d2021);
|
||||
$fg_color: if($variant == "dark", #1d2021, #ebdbb2);
|
||||
$base_color: if($variant == "dark", #ebdbb2, #282828);
|
||||
$text_color: if($variant == "dark", #282828, #ebdbb2);
|
||||
$button_bg_color: if($variant == "dark", #ebdbb2, #32302f);
|
||||
$button_fg_color: if($variant == "dark", #32302f, #ebdbb2);
|
||||
$header_button_bg_color: #282828;
|
||||
$header_button_fg_color: #ebdbb2;
|
||||
$selected_bg_color: #83a598;
|
||||
$selected_fg_color: #ebdbb2;
|
||||
$tooltip_bg_color: #1d2021;
|
||||
$tooltip_fg_color: #ebdbb2;
|
||||
|
||||
/*$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%));*/
|
||||
/*$borders_color: if($variant == 'light', shade($bg_color, .85), shade($bg_color, .88));*/
|
||||
$selected_borders_color: if($variant == 'light', mix($selected_bg_color, $fg_color, .3), darken($selected_bg_color, 20%));
|
||||
$borders_color: if($variant == 'light', mix($bg_color, $fg_color, .08), shade($bg_color, .88));
|
||||
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||
|
||||
// dark colors
|
||||
$dark_bg_color: #32302f;
|
||||
$dark_fg_color: #ebdbb2;
|
||||
|
||||
// shadows
|
||||
/*$dark_shadow: #000;*/
|
||||
/*$light_shadow: #fff;*/
|
||||
$dark_shadow: shade($fg_color, .2);
|
||||
$light_shadow: lighten($bg_color, .4);
|
||||
|
||||
// caret
|
||||
$primary_caret_color: #1d2021;
|
||||
$secondary_caret_color: #1d2021;
|
||||
$caret_aspect_ratio: 0.04;
|
||||
|
||||
// white and black
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
|
||||
/*$button_border_strength: if(lightness($bg) > 50, 0, .1);*/
|
||||
/*$button_shadow_strength: if(lightness($bg) > 50, 0, .1);*/
|
||||
$button_border_strength: 0.1;
|
||||
$button_border: alpha($button_fg_color, .06 + $button_border_strength);
|
||||
$entry_border: $borders_color;
|
||||
|
||||
$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4));
|
||||
$scrollbar_slider_color: mix($bg_color, $fg_color, .5);
|
||||
$scrollbar_slider_hover_color: mix($bg_color, $fg_color, .7);
|
||||
$scrollbar_slider_active_color: if($variant == 'light', darken($selected_bg_color, 5%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$switch_disabled_bg_color: mix($bg_color, $base_color, .5);
|
||||
$switch_disabled_border_color: $bg_color;
|
||||
$switch_disabled_fg_color: $bg_color;
|
||||
$switch_disabled_slider_bg_color: $bg_color;
|
||||
$switch_bg_color: mix($bg_color, $base_color, .3);
|
||||
$switch_fg_color: $text_color;
|
||||
$switch_slider_bg_color: mix($text_color, $bg_color, .5);
|
||||
|
||||
// @TODO: replace to xrdb values:
|
||||
// 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_text_color: $dark_fg_color;
|
||||
$osd_bg: alpha($osd_base, .8);
|
||||
$osd_fg: $osd_text_color;
|
||||
$osd_insensitive_bg_color: mix($osd_fg, $osd_bg, .5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg, $osd_base, .6);
|
||||
$osd_borders_color: shade($osd_bg, .85);
|
||||
|
||||
$lightdm_bg_color: $dark_bg_color;
|
||||
$lightdm_fg_color: $dark_fg_color;
|
||||
|
||||
$wm_bg: $titlebar_bg_color;
|
||||
$wm_border_focused: #32302f;
|
||||
$wm_border_unfocused: #1d2021;
|
||||
$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, .5);
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, .6);
|
||||
$insensitive_borders_color: $borders_color;
|
||||
|
||||
//colors for the backdrop state, derived from the main colors.
|
||||
$backdrop_base_color: if($variant == 'light', darken($base_color, .01), lighten($base_color, .01));
|
||||
$backdrop_text_color: mix($backdrop_base_color, $text_color, .8);
|
||||
$backdrop_bg_color: $bg_color;
|
||||
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, .5);
|
||||
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||
$backdrop_selected_bg_color: $selected_bg_color;
|
||||
$backdrop_selected_fg_color: mix($selected_bg_color, $selected_fg_color, .66);
|
||||
$backdrop_borders_color: mix($bg_color, $borders_color, .9);
|
||||
$backdrop_dark_fill: mix($backdrop_bg_color, $backdrop_borders_color, .35);
|
||||
$backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, .5);
|
||||
|
||||
$backdrop_osd_base: $osd_base;
|
||||
$backdrop_osd_bg: $osd_bg;
|
||||
$backdrop_osd_fg: mix($osd_fg, $backdrop_osd_base, .5);
|
||||
|
||||
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
|
||||
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, .4);
|
||||
|
||||
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, .2));
|
||||
|
||||
$drop_target_color: #4e9a06;
|
||||
|
||||
// widget styles
|
||||
$_roundness: 5;
|
||||
$_spacing: 3;
|
||||
$roundness: 5px;
|
||||
$spacing: 3px;
|
||||
$gradient: 0.0;
|
||||
$contrast: .8;
|
||||
41
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_widgets.scss
Normal file
41
.themes/oomox-numix-gruvbox/gtk-3.20/scss/_widgets.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@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/mate-applications";
|
||||
@import "apps/cinnamon-applications";
|
||||
@import "apps/gnome-applications";
|
||||
@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";
|
||||
@import "apps/budgie";
|
||||
27
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_budgie.scss
Normal file
27
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_budgie.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
/******************
|
||||
! Budgie Desktop *
|
||||
*******************/
|
||||
|
||||
@include exports("budgie-desktop") {
|
||||
.budgie-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.raven {
|
||||
background-color: transparentize($bg_color, .07);
|
||||
|
||||
.raven-header {
|
||||
background-color: $bg_color;
|
||||
border: solid $borders_color;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
.raven-background {
|
||||
background-color: transparentize($bg_color, .07);
|
||||
}
|
||||
}
|
||||
|
||||
.raven-mpris {
|
||||
background-color: transparentize($bg_color, .3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/*********************
|
||||
! Cinnamon Settings *
|
||||
**********************/
|
||||
|
||||
@include exports("cinnamon-settings") {
|
||||
.cs-category-view {
|
||||
&, .view {
|
||||
&, &:backdrop {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
143
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_gedit.scss
Normal file
143
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_gedit.scss
Normal file
@@ -0,0 +1,143 @@
|
||||
/*********
|
||||
! 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;
|
||||
}
|
||||
|
||||
//Ignore: Global double border separator.
|
||||
//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);
|
||||
}
|
||||
|
||||
.gedit-bottom-panel-paned,
|
||||
.gedit-side-panel-paned,
|
||||
paned.titlebar {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gedit-bottom-panel-paned notebook {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/****************
|
||||
! Gnome clocks *
|
||||
*****************/
|
||||
|
||||
@include exports("gnome-clocks") {
|
||||
.clocks-analog-frame {
|
||||
&.trough { color: mix($fg_color, $bg_color, .85); }
|
||||
|
||||
&.progress { color: mix($bg_color, $selected_bg_color, .5); }
|
||||
|
||||
&.progress-fast { color: shade($selected_bg_color, .7); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************
|
||||
! Gnome Builder *
|
||||
******************/
|
||||
|
||||
@include exports("gnome-builder") {
|
||||
workbench.csd > stack.titlebar:not(headerbar) {
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
headerbar {
|
||||
&, &:first-child, &:last-child { border-radius: $roundness $roundness 0 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************
|
||||
! Unity-Control-Center *
|
||||
*************************/
|
||||
|
||||
@include exports("unity-control-center") {
|
||||
// Fixed: https://github.com/numixproject/numix-gtk-theme/issues/634
|
||||
.background:not(.csd):not(.solid-csd) > box.vertical > notebook.frame {
|
||||
// hide unwanted frames
|
||||
border: 0 none transparent;
|
||||
|
||||
> stack > scrolledwindow > viewport > box.vertical > frame > box.vertical {
|
||||
// reset $base_color;
|
||||
iconview.view {
|
||||
&, &:backdrop {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**********************
|
||||
! Genome Terminal *
|
||||
***********************/
|
||||
|
||||
@include exports("gnome-terminal") {
|
||||
//noinspection ScssLintInspection,ScssLintInspection
|
||||
VteTerminal {
|
||||
background-color: $osd_base;
|
||||
color: $osd_fg;
|
||||
}
|
||||
|
||||
terminal-window {
|
||||
junction, scrollbar trough {
|
||||
background-color: $osd_base;
|
||||
border-color: border_normal($osd_base);
|
||||
|
||||
//&:backdrop {
|
||||
// background-color: shade($backdrop_osd_bg, .9);
|
||||
// border-color: border_normal(shade($backdrop_osd_bg, .9));
|
||||
//}
|
||||
}
|
||||
|
||||
scrollbar.vertical {
|
||||
slider {
|
||||
background-color: mix($osd_base, $osd_fg, .2);
|
||||
|
||||
&:hover { background-color: mix($osd_base, $osd_fg, .3); }
|
||||
|
||||
&:hover:active { background-color: $selected_bg_color; }
|
||||
|
||||
//&:backdrop { background-color: mix($backdrop_osd_fg, $backdrop_osd_bg, .4); }
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
117
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_lightdm.scss
Normal file
117
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_lightdm.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
/***********************
|
||||
! LightDM GTK Greeter *
|
||||
***********************/
|
||||
|
||||
@include exports("lightdm") {
|
||||
#panel_window {
|
||||
background-color: $lightdm_bg_color;
|
||||
background-image: none;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px alpha($black, .5);
|
||||
-gtk-icon-shadow: 0 1px alpha($black, .5);
|
||||
|
||||
menubar {
|
||||
padding-left: $spacing;
|
||||
|
||||
&, > menuitem {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-style: none;
|
||||
color: $white;
|
||||
text-shadow: 0 1px alpha($black, .5);
|
||||
-gtk-icon-shadow: 0 1px alpha($black, .5);
|
||||
|
||||
&:hover {
|
||||
background-color: alpha($white, .2);
|
||||
background-image: none;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
*:hover { color: $white; }
|
||||
|
||||
&:disabled { color: alpha($white, .7); }
|
||||
}
|
||||
|
||||
menu > menuitem { font-weight: normal; }
|
||||
}
|
||||
}
|
||||
|
||||
#content_frame { padding-bottom: $spacing * 3; }
|
||||
|
||||
#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);
|
||||
|
||||
@extend %panelbutton;
|
||||
}
|
||||
|
||||
#login_window {
|
||||
menu { border-radius: 0; }
|
||||
|
||||
button { @include button($lightdm_bg_color, $lightdm_fg_color); }
|
||||
|
||||
entry { @include entry($lightdm_bg_color, $lightdm_fg_color); }
|
||||
}
|
||||
|
||||
#user_combobox {
|
||||
color: $lightdm_fg_color;
|
||||
font-size: 18px;
|
||||
|
||||
menu { font-weight: normal; }
|
||||
|
||||
arrow { color: mix($lightdm_fg_color, $lightdm_bg_color, .5); }
|
||||
}
|
||||
|
||||
#user_image {
|
||||
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: $spacing * 2;
|
||||
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 {
|
||||
button { @include button($error_bg_color, $error_fg_color); }
|
||||
}
|
||||
|
||||
/* restart button */
|
||||
#restart_button {
|
||||
button { @include button($warning_bg_color, $warning_fg_color); }
|
||||
}
|
||||
|
||||
/* password warning */
|
||||
#greeter_infobar { font-weight: bold; }
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@import "panel";
|
||||
|
||||
/****************
|
||||
! MATE styles *
|
||||
*****************/
|
||||
|
||||
@include exports("mate-applications") {
|
||||
.mate-panel-menu-bar {
|
||||
@extend %panel;
|
||||
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#PanelApplet label,
|
||||
.mate-panel-menu-bar menubar > menuitem {
|
||||
color: $panel_fg_color;
|
||||
}
|
||||
|
||||
PanelSeparator, MatePanelAppletFrameDBus {
|
||||
border-width: 0;
|
||||
color: transparent;
|
||||
background-image: -gtk-scaled(url("../assets/pane-handle.png"),
|
||||
url("../assets/pane-handle@2.png"));
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left;
|
||||
}
|
||||
|
||||
#PanelApplet button,
|
||||
#PanelApplet button.flat,
|
||||
#PanelApplet button.toggle
|
||||
#PanelApplet button.flat.toggle {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
border-width: 1px;
|
||||
color: $panel_fg_color;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#PanelApplet button:hover:active,
|
||||
#PanelApplet button:checked,
|
||||
#PanelApplet button:checked:hover,
|
||||
#PanelApplet button.flat:hover:active,
|
||||
#PanelApplet button.flat:checked,
|
||||
#PanelApplet button.flat:checked:hover,
|
||||
#PanelApplet button.toggle:hover:active,
|
||||
#PanelApplet button.toggle:checked,
|
||||
#PanelApplet button.toggle:checked:hover,
|
||||
#PanelApplet button.flat.toggle:hover:active,
|
||||
#PanelApplet button.flat.toggle:checked,
|
||||
#PanelApplet button.flat.toggle:checked:hover {
|
||||
background-image: none;
|
||||
background-color: darker($panel_bg_color);
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
border-width: 1px;
|
||||
color: lighter($panel_fg_color);
|
||||
text-shadow: none;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#PanelApplet button:hover,
|
||||
#PanelApplet button.flat:hover,
|
||||
#PanelApplet button.toggle:hover,
|
||||
#PanelApplet button.flat.toggle:hover {
|
||||
background-image: none;
|
||||
background-color: shade($panel_bg_color, 1.3);
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
border-width: 1px;
|
||||
color: $selected_fg_color;
|
||||
text-shadow: none;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mate-panel-menu-bar menubar > menuitem {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/************
|
||||
! Nautilus *
|
||||
*************/
|
||||
|
||||
@include exports("nautilus") {
|
||||
.nautilus-desktop, .nautilus-desktop * {
|
||||
&, &:backdrop {
|
||||
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: 0;
|
||||
|
||||
frame { border: 0; }
|
||||
}
|
||||
|
||||
notebook {
|
||||
background-color: $base_color;
|
||||
border: 0;
|
||||
|
||||
frame { border: 0; }
|
||||
}
|
||||
|
||||
.searchbar-container {
|
||||
margin-top: -1px;
|
||||
|
||||
searchbar {
|
||||
padding-top: $spacing - 3px;
|
||||
padding-bottom: $spacing - 2px;
|
||||
border-bottom: 1px solid $borders_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.nautilus-circular-button.image-button {
|
||||
@extend button.circular;
|
||||
}
|
||||
|
||||
$disk_space_unknown: alpha($fg_color, .5);
|
||||
$disk_space_used: alpha($selected_bg_color, .8);
|
||||
$disk_space_free: shade($bg_color, .95);
|
||||
|
||||
.disk-space-display {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
&.unknown {
|
||||
background-color: $disk_space_unknown;
|
||||
border-color: shade($disk_space_unknown, .9);
|
||||
}
|
||||
|
||||
&.used {
|
||||
background-color: $disk_space_used;
|
||||
border-color: shade($disk_space_used, .9);
|
||||
}
|
||||
|
||||
&.free {
|
||||
background-color: $disk_space_free;
|
||||
border-color: shade($disk_space_free, .9);
|
||||
}
|
||||
}
|
||||
|
||||
// Batch renaming dialog
|
||||
.conflict-row.activatable {
|
||||
&, &:active {
|
||||
color: $error_fg_color;
|
||||
background-color: $error_color;
|
||||
}
|
||||
|
||||
&:hover { background-color: shade($error_color, 1.1); }
|
||||
|
||||
&:selected {
|
||||
color: $selected_fg_color;
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
174
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_nemo.scss
Normal file
174
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_nemo.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
/********
|
||||
! Nemo *
|
||||
*********/
|
||||
|
||||
@include exports("nemo") {
|
||||
.nemo-desktop, .nemo-desktop * {
|
||||
&, &:backdrop {
|
||||
color: $white;
|
||||
text-shadow: 1px 1px $black;
|
||||
|
||||
&:active { color: $fg_color; }
|
||||
|
||||
&:selected { color: $selected_fg_color; }
|
||||
|
||||
&:active, &:hover, &:selected { text-shadow: none; }
|
||||
}
|
||||
}
|
||||
|
||||
.nemo-window {
|
||||
toolbar {
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: border_normal($toolbar_bg_color);
|
||||
|
||||
button {
|
||||
@include button($bg_color, $fg_color);
|
||||
}
|
||||
|
||||
.linked > button { @include linked_button($bg_color); }
|
||||
|
||||
separator, separator:disabled {
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
border-color: currentColor;
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
|
||||
&.primary-toolbar button.image-button {
|
||||
padding: 0 ($spacing + 5px);
|
||||
}
|
||||
|
||||
combobox, button {
|
||||
padding: $spacing;
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: $spacing; }
|
||||
}
|
||||
|
||||
/* Path Bar */
|
||||
toolitem stack {
|
||||
margin-left: 15px;
|
||||
|
||||
widget button {
|
||||
@include linked_button($toolbar_bg_color);
|
||||
-NemoPathbarButton-border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
} // END toolbar
|
||||
|
||||
/* Status Bar */
|
||||
grid {
|
||||
> widget:last-child {
|
||||
button {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: ($spacing - 1px) (($spacing * 2) - 2px);
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
button:first-child + button {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
button:first-child + button + separator + button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
> box > scale {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
statusbar {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
} // END Status Bar
|
||||
|
||||
.sidebar {
|
||||
.frame {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
.nemo-places-sidebar {
|
||||
&, & .view {
|
||||
background-color: mix($bg_color, $base_color, .5);
|
||||
}
|
||||
|
||||
.view {
|
||||
-NemoPlacesTreeView-disk-full-bg-color: shade($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: 0;
|
||||
-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);
|
||||
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Nemo Query Editor (File Search Bar) */
|
||||
+ separator + box .primary-toolbar {
|
||||
@include linear-gradient(shade($bg_color, .98)); // Searchbar color (_actionbar.scss)
|
||||
|
||||
padding-top: $spacing - 3px;
|
||||
padding-bottom: $spacing - 3px;
|
||||
border-bottom: 1px solid $borders_color;
|
||||
|
||||
button:nth-child(2) {
|
||||
border-right: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
button:nth-child(3) {
|
||||
margin-left: -6px;
|
||||
border-left: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
button.flat {
|
||||
$bg: $bg_color;
|
||||
$fg: $fg_color;
|
||||
$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);
|
||||
padding: 5px 6px;
|
||||
}
|
||||
} // END Nemo Query Editor
|
||||
} // END .sidebar
|
||||
|
||||
notebook {
|
||||
background-color: $base_color;
|
||||
border-width: 0;
|
||||
|
||||
tabs {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_panel.scss
Normal file
91
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_panel.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
/***********************
|
||||
! Fallback mode panel *
|
||||
************************/
|
||||
|
||||
@include exports("panel") {
|
||||
%panel {
|
||||
@include linear-gradient($panel_bg_color);
|
||||
|
||||
color: $panel_fg_color;
|
||||
}
|
||||
|
||||
%panellabel {
|
||||
font-weight: normal;
|
||||
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 {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
panel-plug,
|
||||
panel-toplevel.background {
|
||||
@extend %panel;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gp-text-color {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
#clock-applet-button { &, &:backdrop { @extend %panelbutton; } }
|
||||
|
||||
panel-applet {
|
||||
border: 0;
|
||||
|
||||
button {
|
||||
&, &:backdrop { @extend %panelbutton; }
|
||||
}
|
||||
}
|
||||
|
||||
clock-box,
|
||||
panel-applet > menubar,
|
||||
panel-toplevel .gnome-panel-menu-bar {
|
||||
&, &:backdrop {
|
||||
@extend %panel;
|
||||
|
||||
menuitem {
|
||||
@extend %panel;
|
||||
|
||||
border: 0;
|
||||
|
||||
label { @extend %panellabel; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
gp-calendar-window,
|
||||
#tasklist-button,
|
||||
#clock-applet-button,
|
||||
#showdesktop-button {
|
||||
label { @extend %panellabel; }
|
||||
}
|
||||
|
||||
wnck-pager, wnck-tasklist { @extend %panel; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
/***********************
|
||||
! Unity Greeter *
|
||||
***********************/
|
||||
|
||||
@include exports("unity-greeter") {
|
||||
@keyframes dashentry_spinner {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
%lightdm-button {
|
||||
background-image: none;
|
||||
background-color: fade-out($black, .7);
|
||||
border-color: fade-out($white, .1);
|
||||
border-radius: ($roundness * 2) + 1px;
|
||||
padding: $spacing;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.lightdm {
|
||||
&.menu {
|
||||
background-image: none;
|
||||
background-color: fade-out($black, .4);
|
||||
border-color: fade-out($white, .8);
|
||||
border-radius: $roundness * 2;
|
||||
padding: 1px;
|
||||
|
||||
color: $white;
|
||||
|
||||
.menuitem { *, &.check:active, &.radio:active { color: $white; } }
|
||||
}
|
||||
|
||||
&.menubar { *, &.menuitem { padding: $spacing - 3px; } }
|
||||
|
||||
&.option-button {
|
||||
padding: $spacing;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.toggle-button {
|
||||
background: none;
|
||||
border-width: 0;
|
||||
|
||||
&.selected {
|
||||
background-color: fade-out($black, .7);
|
||||
border-color: fade-out($white, .7);
|
||||
border-width: 1px;
|
||||
|
||||
&:hover { background-color: fade-out($white, .7); }
|
||||
}
|
||||
}
|
||||
|
||||
&.button {
|
||||
@extend %lightdm-button;
|
||||
|
||||
&:hover {
|
||||
background-color: fade-out($white, .7);
|
||||
border-color: fade-out($white, .4);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.entry, &.button:active, &.button:active:focus, &.button:focus {
|
||||
background-image: none;
|
||||
background-color: fade-out($black, .7);
|
||||
border-color: fade-out($white, .4);
|
||||
border-radius: ($roundness * 2) + 1px;
|
||||
padding: $spacing + 2px;
|
||||
color: $white;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.entry {
|
||||
&:hover, &:active, &:active:focus {
|
||||
background-image: none;
|
||||
border-image: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
animation: dashentry_spinner 1s infinite linear;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: fade-out($white, .4);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:selected { background-color: fade-out($white, .8); }
|
||||
}
|
||||
}
|
||||
|
||||
.lightdm-combo {
|
||||
&.combobox-entry .button, .cell, .button, .entry { @extend %lightdm-button; }
|
||||
|
||||
&.menu {
|
||||
background-color: shade($dark_bg_color, 1.08);
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_unity.scss
Normal file
80
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_unity.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
@import "panel";
|
||||
|
||||
/****************
|
||||
! Unity styles *
|
||||
*****************/
|
||||
|
||||
@include exports("unity") {
|
||||
UnityDecoration {
|
||||
-UnityDecoration-extents: 24px 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: $roundness $roundness 0 0;
|
||||
padding: 1px ($spacing + 3px) 0 ($spacing + 3px);
|
||||
background-color: $titlebar_bg_color;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
text-shadow: none;
|
||||
|
||||
// Fixed: https://github.com/numixproject/numix-gtk-theme/issues/632
|
||||
// for L.I.M's selected menuitem
|
||||
&:hover {
|
||||
border-radius: 0;
|
||||
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);
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border: 1px solid $wm_border_unfocused;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .4);
|
||||
}
|
||||
}
|
||||
|
||||
.left, .right, .bottom {
|
||||
background-color: $titlebar_bg_color;
|
||||
|
||||
&:backdrop { background-color: mix(shade($titlebar_bg_color, .7), $titlebar_fg_color, .21); }
|
||||
}
|
||||
}
|
||||
|
||||
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; }
|
||||
}
|
||||
30
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_xfce.scss
Normal file
30
.themes/oomox-numix-gruvbox/gtk-3.20/scss/apps/_xfce.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@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: inherit;
|
||||
|
||||
button { @extend %panelbutton; }
|
||||
|
||||
menu {
|
||||
-gtk-icon-effect: none;
|
||||
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
.themes/oomox-numix-gruvbox/gtk-3.20/scss/gtk-dark.scss
Normal file
3
.themes/oomox-numix-gruvbox/gtk-3.20/scss/gtk-dark.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$variant: "dark";
|
||||
|
||||
@import "widgets";
|
||||
3
.themes/oomox-numix-gruvbox/gtk-3.20/scss/gtk.scss
Normal file
3
.themes/oomox-numix-gruvbox/gtk-3.20/scss/gtk.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
$variant: "light";
|
||||
|
||||
@import "widgets";
|
||||
@@ -0,0 +1,99 @@
|
||||
@import "button";
|
||||
@import "toolbar";
|
||||
|
||||
/**************
|
||||
! Action-bar *
|
||||
***************/
|
||||
|
||||
@include exports("actionbar") {
|
||||
actionbar > revealer > box {
|
||||
padding: $spacing;
|
||||
border-top: 1px solid $borders_color;
|
||||
|
||||
&:backdrop { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/****************************
|
||||
! Search and Location bars *
|
||||
*****************************/
|
||||
|
||||
@include exports("searchbar") {
|
||||
searchbar,
|
||||
.location-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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************
|
||||
! Action buttons *
|
||||
*******************/
|
||||
|
||||
@include exports("actionbuttons") {
|
||||
$types: (
|
||||
suggested: $success_color,
|
||||
destructive: $error-color
|
||||
);
|
||||
|
||||
@each $type, $color in $types {
|
||||
.#{$type}-action {
|
||||
@include button($color, $selected_fg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************
|
||||
! Selection mode *
|
||||
*******************/
|
||||
|
||||
@include exports("selectionmode") {
|
||||
headerbar,
|
||||
.titlebar:not(headerbar) {
|
||||
&.selection-mode {
|
||||
@include toolbar($selected_bg_color, $selected_fg_color);
|
||||
|
||||
button {
|
||||
@include button($selected_bg_color, $selected_fg_color);
|
||||
|
||||
&.suggested-action { @extend .suggested-action; }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_selected_bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.selection-menu {
|
||||
&:backdrop, & {
|
||||
color: shade($selected_bg_color, $contrast);
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
&:hover { color: shade($selected_bg_color, ($contrast - .1)); }
|
||||
|
||||
&:active { color: shade($selected_bg_color, ($contrast - .05)); }
|
||||
|
||||
.arrow {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
color: transparentize($selected_fg_color, .5);
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dim-label {
|
||||
&, .selection-menu & { color: shade($selected_bg_color, ($contrast - .1)); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
133
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_base.scss
Normal file
133
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_base.scss
Normal file
@@ -0,0 +1,133 @@
|
||||
/**************
|
||||
! GTK settings
|
||||
***************/
|
||||
|
||||
* {
|
||||
-GtkWindow-resize-grip-height: 0;
|
||||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
|
||||
-GtkWidget-cursor-aspect-ratio: $caret_aspect_ratio;
|
||||
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
||||
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: $spacing ($spacing * 2); }
|
||||
|
||||
.sidebar label.highlight { background-color: mix($fg_color, $bg_color, .8); }
|
||||
}
|
||||
566
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_button.scss
Normal file
566
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_button.scss
Normal file
@@ -0,0 +1,566 @@
|
||||
/*********
|
||||
! Buttons
|
||||
**********/
|
||||
|
||||
@include exports("button_extends") {
|
||||
// stuff for .needs-attention
|
||||
$_dot_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, .15));
|
||||
|
||||
@keyframes needs_attention {
|
||||
from {
|
||||
background-image: -gtk-gradient(radial, center center, 0, center center, .01, to($_dot_color), to(transparent));
|
||||
}
|
||||
|
||||
to {
|
||||
background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($selected_bg_color), to(transparent));
|
||||
}
|
||||
}
|
||||
|
||||
%needs_attention {
|
||||
animation: needs_attention 150ms ease-in;
|
||||
$_dot_shadow: _text_shadow_color();
|
||||
$_dot_shadow_r: if($variant == 'light', .5, .45);
|
||||
background-image: -gtk-gradient(radial, center center, 0, center center, .5, to($_dot_color), to(transparent)),
|
||||
-gtk-gradient(radial, center center, 0, center center, $_dot_shadow_r, to($_dot_shadow), to(transparent));
|
||||
background-size: 6px 6px, 6px 6px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@if $variant == 'light' {
|
||||
background-position: right 3px, right 4px;
|
||||
} @else {
|
||||
background-position: right 3px, right 2px;
|
||||
}
|
||||
|
||||
&:backdrop { background-size: 6px 6px, 0 0; }
|
||||
|
||||
&:dir(rtl) {
|
||||
@if $variant == 'light' {
|
||||
background-position: left 3px, left 4px;
|
||||
} @else {
|
||||
background-position: left 3px, left 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%button {
|
||||
min-height: 14px + $spacing * 2;
|
||||
min-width: 14px + $spacing * 2;
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
%undecorated_button {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
%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_vertical_middle {
|
||||
border-radius: 0;
|
||||
border-top-style: none;
|
||||
border-bottom-style: solid;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: 0; // needed when including %linked_vertical_middle:dir(rtl)
|
||||
border-top-style: none;
|
||||
border-bottom-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;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
%linked_vertical_button {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
border-top-style: none;
|
||||
border-bottom-style: none;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-top-style: none;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-top-style: none;
|
||||
border-bottom-style: solid;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-top-style: solid;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
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 linked_vertical_button($bg) {
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
@extend %linked_vertical_button;
|
||||
|
||||
box-shadow: inset 0 -1px border_normal(rgba(0, 0, 0, .12 + $border_strength)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
&:focus, &:hover {
|
||||
box-shadow: inset 0 -1px 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 0 -1px border_active(rgba(0, 0, 0, .12 + $border_strength)),
|
||||
inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .05);
|
||||
}
|
||||
|
||||
&:disabled { box-shadow: inset 0 -1px 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($fg) > 50, .1, .2);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
$button_bg: $bg;
|
||||
|
||||
@extend %button;
|
||||
@include linear-gradient($button_bg);
|
||||
@include border(alpha($fg, .12 + $border_strength));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
|
||||
&.flat {
|
||||
//color: mix($bg, $fg, .2);
|
||||
color: $fg;
|
||||
border-color: alpha($button_bg, 0);
|
||||
background-color: alpha($button_bg, 0);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&, &.flat {
|
||||
|
||||
&:hover {
|
||||
@include linear-gradient(shade($bg, 1.05));
|
||||
@include border(alpha($fg, .20 + $border_strength));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .22 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include linear-gradient(shade($bg, 1.05));
|
||||
@include border(alpha($fg, .20 + $border_strength));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
&:hover {
|
||||
@include linear-gradient(shade($bg, 1.1));
|
||||
@include border(alpha($fg, .20 + $border_strength));
|
||||
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .38 + $shadow_strength);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked, &:active {
|
||||
/*@include linear-gradient(shade($bg, .7), to top);*/
|
||||
@include linear-gradient($selected_bg_color, to top);
|
||||
|
||||
color: $selected_fg_color;
|
||||
box-shadow: inset 1px 0 alpha($fg, .06),
|
||||
inset 0 1px alpha($fg, .07),
|
||||
inset -1px 0 alpha($fg, .06),
|
||||
inset 0 -1px alpha($fg, .05);
|
||||
@include border(alpha($fg, .12 + $border_strength));
|
||||
|
||||
&:focus, &:hover {
|
||||
/*@include linear-gradient(shade($bg, .65), to top);*/
|
||||
@include linear-gradient(shade($selected_bg_color, 1.05), to top);
|
||||
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover { color: $fg; }
|
||||
|
||||
&:disabled:disabled {
|
||||
@include linear-gradient(alpha(mix($bg, $fg, .2), .4));
|
||||
/*border: 1px solid alpha($bg, .2);*/
|
||||
opacity: .4;
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active:disabled, &:checked:disabled {
|
||||
@include linear-gradient(alpha($selected_bg_color, .6));
|
||||
|
||||
color: $selected_fg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: alpha($bg, ($contrast + .1));
|
||||
|
||||
&:disabled { color: alpha($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($bg_color, .3);
|
||||
background-color: alpha($fg_color, .2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha($selected_bg_color, .3);
|
||||
background-color: alpha($selected_fg_color, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($button_bg_color, $button_fg_color);
|
||||
|
||||
|
||||
.inline-toolbar &,
|
||||
.linked > & { @include linked_button($button_bg_color); }
|
||||
|
||||
.linked.vertical > & { @include linked_vertical_button($button_bg_color); }
|
||||
|
||||
&.circular,
|
||||
&.circular-button { // FIXME: aggregate to buttons
|
||||
padding: 0;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
border-radius: 9999px; // Fixed: https://github.com/GNOME/gtk/commit/a6409458f0d50d673a4dc370b9251993b7835b6b
|
||||
-gtk-outline-radius: 9999px;
|
||||
|
||||
label { padding: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
spinbutton {
|
||||
|
||||
&:disabled {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
button {
|
||||
color: $button_fg_color;
|
||||
|
||||
&:active, &:checked, &:hover {
|
||||
@include linear-gradient(shade($button_bg_color, 1.2));
|
||||
}
|
||||
|
||||
&:disabled { color: mix($button_fg_color, $bg_color, .7); }
|
||||
|
||||
&:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); }
|
||||
|
||||
&:backdrop:disabled { color: alpha($backdrop_insensitive_color, .8); }
|
||||
}
|
||||
|
||||
&:not(.vertical) {
|
||||
/*@extend %entry;*/
|
||||
@include linear-gradient($base_color, to top);
|
||||
/*@include border($base_color);*/
|
||||
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
|
||||
color: $text_color;
|
||||
caret-color: $text_color;
|
||||
|
||||
/*&:focus, &:active { border-color: border_focus($borders_color); }*/
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($base_color, .9), to top);
|
||||
|
||||
color: mix($base_color, $text_color, .5);
|
||||
}
|
||||
|
||||
entry {
|
||||
border-radius: $roundness 0 0 $roundness;
|
||||
border-right-width: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
button {
|
||||
@extend %linked_middle;
|
||||
border-radius: 0;
|
||||
/*border-color: alpha($borders_color, .8);*/
|
||||
/*border-style: none none none solid;*/
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
/*
|
||||
@if (lightness($bg_color) > 50) {
|
||||
background-color: shade($bg_color, 1.08);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@if (lightness($bg_color) > 50) {
|
||||
background-color: shade($bg_color, 1.11);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
|
||||
&:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); }
|
||||
|
||||
&:backdrop { border-color: alpha($backdrop_borders_color, .8); }
|
||||
|
||||
&:backdrop:disabled {
|
||||
border-style: none none none solid; // It is needed or it gets overridden
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
}
|
||||
|
||||
&:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; }
|
||||
|
||||
&:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
button, entry {
|
||||
min-width: 0;
|
||||
padding-left: $spacing - 2px;
|
||||
padding-right: $spacing - 2px;
|
||||
}
|
||||
|
||||
entry {
|
||||
// reset all the other props since the spinbutton node is styled here
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
&.up {
|
||||
border-style: solid solid none solid;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
}
|
||||
|
||||
&.down {
|
||||
border-style: none solid solid solid;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************
|
||||
! ComboBoxes *
|
||||
*******************/
|
||||
|
||||
@include exports("combobox") {
|
||||
combobox {
|
||||
button.combo {
|
||||
// otherwise the arrow placement is not symmetric
|
||||
min-width: 0;
|
||||
padding-left: $spacing + 2px;
|
||||
padding-right: $spacing + 2px;
|
||||
}
|
||||
|
||||
arrow {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
box button, box entry {
|
||||
@extend %linked_button;
|
||||
padding: $spacing ($spacing + 2px);
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > & > box > button.combo {
|
||||
// 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); }
|
||||
}
|
||||
|
||||
.linked:not(.vertical) > &:first-child > box > button.combo { @extend %linked_button:first-child; }
|
||||
|
||||
.linked:not(.vertical) > &:last-child > box > button.combo { @extend %linked_button:last-child; }
|
||||
|
||||
.linked:not(.vertical) > &:only-child > box > button.combo { @extend %linked_button:only-child; }
|
||||
|
||||
.linked.vertical > & > box > button.combo { @extend %linked_vertical_middle; }
|
||||
|
||||
.linked.vertical > &:first-child > box > button.combo { @extend %linked_vertical_button:first-child; }
|
||||
|
||||
.linked.vertical > &:last-child > box > button.combo { @extend %linked_vertical_button:last-child; }
|
||||
|
||||
.linked.vertical > &:only-child > box > button.combo { @extend %linked_vertical_button:only-child; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**********
|
||||
! Calendar
|
||||
***********/
|
||||
|
||||
@include exports("calendar") {
|
||||
calendar {
|
||||
padding: 1px 3px;
|
||||
outline-offset: -1px;
|
||||
|
||||
color: $text_color;
|
||||
|
||||
&.view {
|
||||
&, &:backdrop { @extend %undecorated_button; }
|
||||
}
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
&.header {
|
||||
border-bottom: 1px solid transparentize($black, .9);
|
||||
border-radius: 0;
|
||||
|
||||
&:backdrop { border-color: transparentize($black, .9); }
|
||||
}
|
||||
|
||||
&.button {
|
||||
@extend %undecorated_button;
|
||||
|
||||
color: alpha($fg_color, .55);
|
||||
|
||||
&:hover {
|
||||
@extend %undecorated_button;
|
||||
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
@extend %undecorated_button;
|
||||
|
||||
color: alpha($backdrop_fg_color, .55);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@extend %undecorated_button;
|
||||
|
||||
color: alpha($insensitive_fg_color, .55);
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate,
|
||||
&:indeterminate:backdrop { color: mix($fg_color, $bg_color, .5); }
|
||||
|
||||
&.highlight,
|
||||
&.highlight:backdrop {
|
||||
font-size: smaller;
|
||||
color: mix($selected_bg_color, $fg_color, .5);
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_text_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* gnome-calendar */
|
||||
.calendar-view {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
181
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_choosers.scss
Normal file
181
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_choosers.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
/***************
|
||||
! Color chooser
|
||||
****************/
|
||||
|
||||
@include exports("colorchooser") {
|
||||
colorswatch {
|
||||
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
|
||||
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
|
||||
// applied to the overlay box.
|
||||
|
||||
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
|
||||
|
||||
$_colorswatch_radius: $roundness;
|
||||
|
||||
// base color corners rounding
|
||||
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
||||
// sports a bigger radius.
|
||||
// nth-child is needed by the custom color strip.
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $_colorswatch_radius + .5px;
|
||||
border-top-right-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-top-left-radius: $_colorswatch_radius;
|
||||
border-top-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $_colorswatch_radius + .5px;
|
||||
border-bottom-right-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-bottom-left-radius: $_colorswatch_radius;
|
||||
border-bottom-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.left,
|
||||
&:first-child:not(.top) {
|
||||
border-top-left-radius: $_colorswatch_radius + .5px;
|
||||
border-bottom-left-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-top-left-radius: $_colorswatch_radius;
|
||||
border-bottom-left-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.right,
|
||||
&:last-child:not(.bottom) {
|
||||
border-top-right-radius: $_colorswatch_radius + .5px;
|
||||
border-bottom-right-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-top-right-radius: $_colorswatch_radius;
|
||||
border-bottom-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.dark overlay {
|
||||
color: $selected_fg_color;
|
||||
|
||||
&:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
|
||||
|
||||
&:backdrop { color: $backdrop_selected_fg_color; }
|
||||
}
|
||||
|
||||
&.light overlay {
|
||||
color: $text_color;
|
||||
|
||||
&:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
|
||||
|
||||
&:backdrop { color: $backdrop_text_color; }
|
||||
}
|
||||
|
||||
&:drop(active) {
|
||||
box-shadow: none;
|
||||
|
||||
&.light overlay {
|
||||
border-color: $drop_target_color;
|
||||
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
|
||||
inset 0 0 0 1px $drop_target_color;
|
||||
}
|
||||
|
||||
&.dark overlay {
|
||||
border-color: $drop_target_color;
|
||||
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
|
||||
inset 0 0 0 1px $drop_target_color;
|
||||
}
|
||||
}
|
||||
|
||||
overlay {
|
||||
border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 1px transparentize($white, .6),
|
||||
inset 0 -1px transparentize($black, .8);
|
||||
}
|
||||
|
||||
&:backdrop,
|
||||
&:backdrop:hover {
|
||||
border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: .5;
|
||||
|
||||
overlay {
|
||||
border-color: transparentize($black, .4);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
|
||||
|
||||
&#add-color-button {
|
||||
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
|
||||
|
||||
&:only-child { border-radius: $_colorswatch_radius; }
|
||||
|
||||
overlay {
|
||||
background-color: shade($bg_color, .95);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover { background-color: shade($bg_color, .9); }
|
||||
|
||||
&:backdrop { background-color: shade($backdrop_bg_color, .95); }
|
||||
}
|
||||
}
|
||||
|
||||
&#editor-color-sample {
|
||||
border-radius: $_colorswatch_radius;
|
||||
|
||||
overlay { border-radius: $_colorswatch_radius + .5px; }
|
||||
}
|
||||
}
|
||||
|
||||
button.color {
|
||||
padding: $spacing;
|
||||
|
||||
colorswatch:only-child {
|
||||
&, overlay { border-radius: 0; }
|
||||
|
||||
@if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
|
||||
}
|
||||
|
||||
@if $variant == 'light' {
|
||||
&:disabled,
|
||||
&:backdrop,
|
||||
&:active,
|
||||
&:checked { colorswatch:only-child { box-shadow: none; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********************
|
||||
! Font and file choosers
|
||||
************************/
|
||||
|
||||
@include exports("miscchoosers") {
|
||||
filechooser {
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-top: 1px solid $borders_color;
|
||||
|
||||
&:backdrop { border-top-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
#pathbarbox { border-bottom: 1px solid $bg_color; }
|
||||
}
|
||||
|
||||
filechooserbutton:drop(active) {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
186
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_entry.scss
Normal file
186
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_entry.scss
Normal file
@@ -0,0 +1,186 @@
|
||||
/*********
|
||||
! 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;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
%linked_vertical_entry {
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
%entry {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
border-color: border_normal($bg_color);
|
||||
transition: border 100ms ease-out;
|
||||
&:focus, &:hover, &:active { transition: border 100ms ease-in; }
|
||||
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, 0.10),
|
||||
inset 0 1px alpha($dark_shadow, 0.12),
|
||||
inset -1px 0 alpha($dark_shadow, 0.10),
|
||||
inset 0 -1px alpha($dark_shadow, 0.05);
|
||||
|
||||
|
||||
|
||||
&:selected {
|
||||
&, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled { box-shadow: none; }
|
||||
|
||||
progress {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-width: 0;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
image.left { padding-right: $spacing; }
|
||||
|
||||
image.right { padding-left: $spacing; }
|
||||
|
||||
selection { @extend %selected_items; }
|
||||
|
||||
// entry error and warning style
|
||||
@each $e_type, $e_color, $e_fg_color in (warning, $warning_bg_color, $warning_fg_color),
|
||||
(error, $error_bg_color, $error_fg_color),
|
||||
// entry.search-missing for Gnome-Builder
|
||||
(search-missing, $error_bg_color, $error_fg_color) {
|
||||
&.#{$e_type} {
|
||||
color: $e_fg_color;
|
||||
border-color: border_normal($e_color);
|
||||
background-color: mix($base_color, $e_color, .6);
|
||||
|
||||
image { color: $e_fg_color; }
|
||||
|
||||
&:focus {
|
||||
color: $e_fg_color;
|
||||
border-color: border_focus($e_color);
|
||||
background-color: $e_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
selection {
|
||||
background-color: $e_fg_color;
|
||||
color: $e_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg, $border: $borders_color) {
|
||||
@extend %entry;
|
||||
@include linear-gradient($bg, to top);
|
||||
@include border(mix($bg, $fg, .20));
|
||||
|
||||
padding: $spacing;
|
||||
|
||||
color: $fg;
|
||||
caret-color: $primary_caret_color;
|
||||
-gtk-secondary-caret-color: $secondary_caret_color;
|
||||
|
||||
&:focus, &:active { border-color: border_focus($border); }
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
@include border(alpha(mix($bg, $fg, .20), .4));
|
||||
/*@include border(mix($bg, $fg, .20));*/
|
||||
/*border-color: alpha(mix($bg, $fg, .15), .8);*/
|
||||
/*opacity: .8;*/
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("entry") {
|
||||
entry {
|
||||
@include entry($base_color, $text_color);
|
||||
|
||||
.linked:not(.vertical) > & { @extend %linked_entry; }
|
||||
|
||||
.linked.vertical > & { @extend %linked_vertical_entry; }
|
||||
}
|
||||
}
|
||||
63
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_grid.scss
Normal file
63
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_grid.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
/******************
|
||||
! Grid and flowbox
|
||||
*******************/
|
||||
|
||||
@include exports("grid") {
|
||||
list {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
border-color: $borders_color;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_base_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
|
||||
row { padding: $spacing; }
|
||||
}
|
||||
|
||||
row {
|
||||
transition: all 150ms cubic-bezier(.25, .46, .45, .94);
|
||||
|
||||
&:hover { transition: none; }
|
||||
|
||||
&:backdrop { transition: 200ms ease-out; }
|
||||
|
||||
&.activatable {
|
||||
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
||||
|
||||
&:hover { background-color: if(variant == light, transparentize($fg_color, .9), transparentize($fg_color, .95)); }
|
||||
|
||||
&:active { box-shadow: inset 0 2px 2px -2px transparentize($black, .8); }
|
||||
|
||||
&:backdrop:hover { background-color: transparent; }
|
||||
|
||||
&:selected {
|
||||
&:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .5); }
|
||||
|
||||
&.has-open-popup,
|
||||
&:hover { background-color: mix($selected_bg_color, $fg_color, .1); }
|
||||
|
||||
&:backdrop { background-color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
&:selected { @extend %selected_items; }
|
||||
}
|
||||
|
||||
flowbox {
|
||||
rubberband { @extend rubberband; }
|
||||
|
||||
flowboxchild {
|
||||
padding: $spacing;
|
||||
border-radius: $roundness;
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
@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} {
|
||||
&, &:backdrop { // Backdrop button fix: https://github.com/numixproject/numix-gtk-theme/issues/544
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
caret-color: currentColor;
|
||||
|
||||
label, & { color: $fg_color; }
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.close { @extend %close_button; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
319
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_menu.scss
Normal file
319
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_menu.scss
Normal file
@@ -0,0 +1,319 @@
|
||||
@import "entry";
|
||||
|
||||
|
||||
|
||||
@mixin menu_calendar($bg, $fg) {
|
||||
color: $fg;
|
||||
|
||||
&.header {
|
||||
border-bottom: 1px solid shade($bg, ($contrast + .1));
|
||||
border-radius: 0;
|
||||
|
||||
&:backdrop { border-color: shade($bg, ($contrast + .1)); }
|
||||
}
|
||||
|
||||
&.button {
|
||||
@extend %undecorated_button;
|
||||
color: alpha($fg, .55);
|
||||
|
||||
&:hover {
|
||||
@extend %undecorated_button;
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
|
||||
&:indeterminate,
|
||||
&:indeterminate:backdrop { color: mix($fg, $bg, .5); }
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
! Menubar
|
||||
**********/
|
||||
|
||||
@include exports("menubar") {
|
||||
menubar, .menubar {
|
||||
-GtkWidget-window-dragging: true;
|
||||
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: $menubar_bg_color;
|
||||
background-image: none;
|
||||
//box-shadow: inset 0 -1px shade($menubar_bg_color, .9);
|
||||
color: $menubar_fg_color;
|
||||
|
||||
> menuitem {
|
||||
min-height: 16px;
|
||||
padding: $spacing*1.5 $spacing * 2.5;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menubar_fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
|
||||
background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
|
||||
background-image: none;
|
||||
color: shade($menubar_fg_color, 1.08);
|
||||
}
|
||||
|
||||
*:hover { color: shade($menubar_fg_color, 1.08); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Menu
|
||||
*******/
|
||||
|
||||
@include exports("menu") {
|
||||
menu,
|
||||
.menu,
|
||||
.context-menu {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: $spacing;
|
||||
background-color: $menu_bg_color;
|
||||
color: $menu_fg_color;
|
||||
|
||||
.csd & { border: 0; } // axes borders in a composited env
|
||||
|
||||
&:selected { background-color: $selected_bg_color; }
|
||||
|
||||
// A little hack to get some extra space above/below menuitem separators
|
||||
separator,
|
||||
.csd & separator {
|
||||
background-color: shade($menu_bg_color, ($contrast + .1));
|
||||
margin: ($spacing - 2px) 0;
|
||||
}
|
||||
|
||||
// Firefox workaround
|
||||
.separator,
|
||||
.csd & .separator { color: shade($menu_bg_color, ($contrast + .1)); }
|
||||
|
||||
menuitem {
|
||||
min-height: 16px;
|
||||
min-width: 40px;
|
||||
padding: $spacing;
|
||||
border-radius: 0;
|
||||
|
||||
&: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); }
|
||||
|
||||
// submenu indicators
|
||||
arrow {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
|
||||
&:dir(ltr) {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 { @include menu_calendar($menu_bg_color, $menu_fg_color); }
|
||||
|
||||
// avoids labels color being overridden, see
|
||||
// https://bugzilla.gnome.org/show_bug.cgi?id=767058
|
||||
label { &:dir(rtl), &:dir(ltr) { color: inherit; } }
|
||||
}
|
||||
|
||||
// overflow arrows
|
||||
> arrow {
|
||||
//@include button(undecorated);
|
||||
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
padding: $spacing;
|
||||
background-color: $menu_bg_color;
|
||||
border-radius: 0;
|
||||
|
||||
&.top {
|
||||
margin-top: -6px;
|
||||
border-bottom: 1px solid mix($fg_color, $base_color, .1);
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
margin-bottom: -6px;
|
||||
border-top: 1px solid mix($fg_color, $base_color, .1);
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
&:hover { background-color: mix($fg_color, $base_color, .1); }
|
||||
|
||||
&:backdrop { background-color: $backdrop_menu_color; }
|
||||
|
||||
&:disabled {
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu { font: initial; } // Decouple the font of context menus from their entry/textview
|
||||
|
||||
.monospace { font-family: monospace; }
|
||||
|
||||
menuitem {
|
||||
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); }
|
||||
}
|
||||
|
||||
check, radio {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
|
||||
&:dir(ltr) { margin-right: 7px; }
|
||||
&:dir(rtl) { margin-left: 7px; }
|
||||
}
|
||||
|
||||
window decoration {
|
||||
box-shadow: 0 2px 3px alpha($black, .2);
|
||||
}
|
||||
|
||||
entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
! Popover
|
||||
**********/
|
||||
|
||||
@include exports("popover") {
|
||||
popover.background {
|
||||
padding: $spacing - 3px;
|
||||
border-radius: $roundness;
|
||||
background-clip: border-box;
|
||||
background-color: $menu_bg_color;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
box-shadow: 0 3px 6px alpha($black, .16);
|
||||
|
||||
.csd &, & {
|
||||
/*@include border($menu_bg_color);*/
|
||||
@include border(alpha($menu_fg_color, .5));
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
|
||||
treeview.view {
|
||||
&:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; }
|
||||
|
||||
&, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); }
|
||||
}
|
||||
|
||||
view, .view, list {
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&, &:backdrop {
|
||||
background-color: shade($menu_bg_color, ($contrast + .5));
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
border-color: border_normal($menu_bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
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($base_color, $text_color); }
|
||||
|
||||
button { @include button($header_button_bg_color, $header_button_fg_color); }
|
||||
.linked > button { @include linked_button($header_button_bg_color); }
|
||||
|
||||
> list, > .view, > toolbar {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
modelbutton.flat,
|
||||
menuitem.button.flat {
|
||||
padding: $spacing ($spacing + 2px);
|
||||
outline-color: transparent;
|
||||
transition: none;
|
||||
|
||||
@extend %undecorated_button;
|
||||
|
||||
&:hover {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:active, &:selected { &, arrow { @extend %selected_items; } }
|
||||
|
||||
&:checked { color: $fg_color; }
|
||||
|
||||
arrow {
|
||||
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
|
||||
|
||||
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
||||
}
|
||||
|
||||
// FIXME: temporary workaround
|
||||
check:last-child,
|
||||
radio:last-child { margin-left: 8px; }
|
||||
|
||||
check:first-child,
|
||||
radio:first-child { margin-right: 8px; }
|
||||
}
|
||||
}
|
||||
320
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_misc.scss
Normal file
320
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_misc.scss
Normal file
@@ -0,0 +1,320 @@
|
||||
/***************
|
||||
! Dimmed label *
|
||||
****************/
|
||||
|
||||
@include exports("dimlabel") {
|
||||
.dim-label {
|
||||
opacity: .5;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Tooltip *
|
||||
************/
|
||||
|
||||
@include exports("tooltip") {
|
||||
.tooltip, // Firefox fix
|
||||
tooltip {
|
||||
&.background {
|
||||
&, &.csd {
|
||||
background-color: $tooltip_bg_color;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid border_normal($tooltip_bg_color);
|
||||
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: 0;
|
||||
-GtkDialog-button-spacing: $spacing;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
printdialog {
|
||||
paper {
|
||||
color: $fg_color;
|
||||
border: 1px solid $borders_color;
|
||||
background: $white;
|
||||
padding: 0;
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_fg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-action-box { margin: $spacing * 2; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
! App notifications *
|
||||
**********************/
|
||||
|
||||
@include exports("notifications") {
|
||||
frame.app-notification {
|
||||
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);
|
||||
}
|
||||
|
||||
border {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Expanders *
|
||||
**************/
|
||||
|
||||
@include exports("expander") {
|
||||
expander {
|
||||
arrow {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
|
||||
&:hover { color: alpha(currentColor, .8); } //only lightens the arrow
|
||||
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! 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 {
|
||||
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") {
|
||||
// Base code: https://github.com/GNOME/gnome-bluetooth/blob/a93575c4b590e2b831da32f739294bb2f197d420/lib/bluetooth-settings.css
|
||||
entry.entry.pin-entry {
|
||||
font-style: normal;
|
||||
font-size: 50px;
|
||||
padding-left: $spacing * 5;
|
||||
padding-right: $spacing * 5;
|
||||
}
|
||||
|
||||
label.pin-label {
|
||||
font-style: normal;
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************
|
||||
! Shortcut window keys *
|
||||
*************************/
|
||||
|
||||
@include exports("keycap") {
|
||||
// shortcut window keys
|
||||
.keycap {
|
||||
min-width: 20px;
|
||||
min-height: 24px;
|
||||
margin-top: 2px;
|
||||
padding-bottom: $spacing / 2;
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
|
||||
color: $fg_color;
|
||||
background-color: $base_color;
|
||||
border: 1px solid;
|
||||
border-color: if($variant == 'light', mix($borders_color, $bg_color, .5), $borders_color);
|
||||
border-radius: $roundness;
|
||||
box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, .2), inset 0 -3px mix($borders_color, $base_color, .6));
|
||||
font-size: smaller;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_base_color;
|
||||
color: $backdrop_fg_color;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*****************
|
||||
! Stackswitcher *
|
||||
******************/
|
||||
|
||||
@include exports("stackswitcher") {
|
||||
stackswitcher button {
|
||||
&.text-button { min-width: 80px; } // FIXME aggregate with buttons
|
||||
|
||||
&.circular { // FIXME aggregate with buttons
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! 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, .7); }
|
||||
|
||||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, .5); }
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_selected_bg_color; // Fixed Issue #430
|
||||
color: $backdrop_selected_fg_color;
|
||||
|
||||
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
149
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_notebook.scss
Normal file
149
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_notebook.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/**********
|
||||
! Notebook
|
||||
***********/
|
||||
|
||||
@include exports("notebook") {
|
||||
|
||||
notebook {
|
||||
padding: 0;
|
||||
|
||||
&.frame {
|
||||
border: 1px solid $borders_color;
|
||||
|
||||
> header {
|
||||
// ugly hack to hide the borders around the header
|
||||
margin: -1px;
|
||||
&.top { margin-bottom: 0; }
|
||||
&.bottom { margin-top: 0; }
|
||||
&.left { margin-right: 0; }
|
||||
&.right { margin-left: 0; }
|
||||
|
||||
&.top, &.bottom { padding-left: 0; padding-right: 0; }
|
||||
&.left, &.right { padding-top: 0; padding-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
||||
background-color: $bg_color;
|
||||
}
|
||||
|
||||
> header {
|
||||
padding: $spacing;
|
||||
background-color: $bg_color;
|
||||
|
||||
&.top { box-shadow: inset 0 -1px $borders_color; }
|
||||
&.bottom { box-shadow: inset 0 1px $borders_color; }
|
||||
&.right { box-shadow: inset 1px 0 $borders_color; }
|
||||
&.left { box-shadow: inset -1px 0 $borders_color; }
|
||||
|
||||
@each $_pos, $_bpos in (top, bottom), (bottom, top), (right, left), (left, right) {
|
||||
// sizing and borders
|
||||
&.#{$_pos} {
|
||||
padding-#{$_bpos}: 0;
|
||||
|
||||
> tabs > tab {
|
||||
padding: $spacing $spacing + 8px;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
|
||||
outline-offset: -4px;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-#{$_bpos}: none;
|
||||
border-#{$_pos}-width: 3px;
|
||||
|
||||
&:checked {
|
||||
border-#{$_pos}-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
// tab overlap
|
||||
+ tab {
|
||||
@if $_pos==top or $_pos==bottom { margin-left: -1px; }
|
||||
@else { margin-top: -1px; }
|
||||
}
|
||||
|
||||
|
||||
// tab border radius
|
||||
@if $_pos==top { border-radius: 1px 1px 0 0; }
|
||||
@else if $_pos==bottom { border-radius: 0 0 1px 1px; }
|
||||
@else if $_pos==left { border-radius: 1px 0 0 1px; }
|
||||
@else if $_pos==right { border-radius: 0 1px 1px 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
// overflow arrows
|
||||
&.top, &.bottom {
|
||||
> tabs > arrow.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
&:last-child { margin-left: 2px; }
|
||||
}
|
||||
> tabs > arrow.down {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
|
||||
&:first-child { margin-right: 2px; }
|
||||
}
|
||||
}
|
||||
&.left, &.right {
|
||||
> tabs > arrow.up {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
&:last-child { margin-top: 2px; }
|
||||
}
|
||||
> tabs > arrow.down {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
&:first-child { margin-bottom: 2px; }
|
||||
}
|
||||
}
|
||||
> tabs > arrow {
|
||||
@extend %close_button;
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
&:hover { color: mix($fg_color, $insensitive_fg_color, 0.5); }
|
||||
&:active { color: $fg_color; }
|
||||
&:disabled { color: alpha($insensitive_fg_color,0.3); }
|
||||
}
|
||||
|
||||
// tab colors
|
||||
|
||||
&.top > tabs > tab:hover:not(:checked) { box-shadow: inset 0 -1px $borders_color; }
|
||||
&.bottom > tabs > tab:hover:not(:checked) { box-shadow: inset 0 1px $borders_color; }
|
||||
&.left > tabs > tab:hover:not(:checked) { box-shadow: inset -1px 0 $borders_color; }
|
||||
&.right > tabs > tab:hover:not(:checked) { box-shadow: inset 1px 0 $borders_color; }
|
||||
|
||||
> tabs > tab {
|
||||
color: alpha($fg_color, 0.8);
|
||||
background-color: alpha(mix($bg_color, $fg_color, .1), 0.7);
|
||||
|
||||
&:hover:not(:checked) {
|
||||
color: mix($fg_color, $insensitive_fg_color, 0.5);
|
||||
background-color: transparentize($base_color, 0.5);
|
||||
border-color: $borders_color;
|
||||
}
|
||||
&:checked {
|
||||
border-color: $borders_color;
|
||||
color: $fg_color;
|
||||
background-color: $bg_color;
|
||||
}
|
||||
// close button
|
||||
button.flat {
|
||||
min-height: 22px;
|
||||
min-width: 16px;
|
||||
padding: 0;
|
||||
color: mix($bg_color, $fg_color, 0.35);
|
||||
|
||||
&:hover {
|
||||
@extend %undecorated_button;
|
||||
color: lighten(red, 15%);
|
||||
}
|
||||
&:active, &:active:hover {
|
||||
@extend %undecorated_button;
|
||||
color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
268
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_osd.scss
Normal file
268
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_osd.scss
Normal file
@@ -0,0 +1,268 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*******
|
||||
! OSD *
|
||||
********/
|
||||
|
||||
@include exports("osd") {
|
||||
overlay.osd { background-color: transparent; }
|
||||
|
||||
colorchooser .popover.osd { border-radius: $roundness; }
|
||||
|
||||
button.color {
|
||||
.osd colorswatch:only-child { box-shadow: none; }
|
||||
|
||||
@if $variant == 'light' {
|
||||
.osd & {
|
||||
&:disabled,
|
||||
&:backdrop,
|
||||
&:active,
|
||||
&:checked { colorswatch:only-child { box-shadow: none; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.osd,
|
||||
#XfceNotifyWindow button {
|
||||
@include button($osd_bg, $osd_fg);
|
||||
|
||||
&.image-button {
|
||||
padding: 0;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// stand-alone OSD toolbars
|
||||
toolbar.osd {
|
||||
-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)); }
|
||||
|
||||
&.left,
|
||||
&.right,
|
||||
&.top,
|
||||
&.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
|
||||
}
|
||||
|
||||
progressbar.osd { // progressbar.osd used for epiphany page loading progress
|
||||
margin: 2px;
|
||||
min-height: 2px;
|
||||
min-width: 2px;
|
||||
|
||||
trough {
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
progress {
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.osd,
|
||||
#XfceNotifyWindow {
|
||||
background-color: $osd_bg;
|
||||
color: $osd_fg;
|
||||
|
||||
&.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); }
|
||||
|
||||
entry { @include entry($osd_base, $osd_text_color, $osd_borders_color); }
|
||||
|
||||
/* used by gnome-settings-daemon's media-keys OSD */
|
||||
trough,
|
||||
&.trough {
|
||||
background-color: alpha($osd_fg, .3);
|
||||
}
|
||||
|
||||
progressbar,
|
||||
&.progressbar {
|
||||
background-color: $osd_fg;
|
||||
}
|
||||
|
||||
// Old GTK 3.0 code
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// New GTK 3.20 code
|
||||
scale {
|
||||
//OSD troughs
|
||||
trough {
|
||||
background-color: lighten($osd_bg, 7%);
|
||||
|
||||
highlight { background-color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
// OSD sliders
|
||||
slider {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
popover.background {
|
||||
box-shadow: 0 2px 7px 3px alpha($black, .5);
|
||||
|
||||
> toolbar button {
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
spinbutton {
|
||||
// OSD horizontal
|
||||
&:not(.vertical) {
|
||||
@include linear-gradient($osd_base, to top);
|
||||
@include border($osd_base);
|
||||
|
||||
padding: 0;
|
||||
|
||||
color: $osd_text_color;
|
||||
caret-color: $osd_text_color;
|
||||
|
||||
&:focus, &:active { border-color: border_focus($osd_borders_color); }
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($osd_base, .9), to top);
|
||||
|
||||
color: mix($osd_base, $osd_text_color, .5);
|
||||
}
|
||||
|
||||
button {
|
||||
@include button($osd_bg, $osd_fg);
|
||||
|
||||
border-radius: 0;
|
||||
border-color: transparentize($osd_borders_color, .3);
|
||||
border-style: none none none solid;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
|
||||
&:active, &:checked, &:hover { color: $osd_text_color; }
|
||||
|
||||
&:disabled { color: alpha($osd_insensitive_fg_color, .8); }
|
||||
|
||||
&:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); }
|
||||
|
||||
&:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); }
|
||||
|
||||
&:backdrop:disabled {
|
||||
color: alpha($backdrop_insensitive_color, .8);
|
||||
|
||||
border-style: none none none solid; // It is needed or it gets overridden
|
||||
|
||||
&:dir(rtl) { border-style: none solid none none; }
|
||||
}
|
||||
|
||||
&:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; }
|
||||
|
||||
&:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
}
|
||||
}
|
||||
|
||||
// OSD vertical
|
||||
&.vertical button:first-child {
|
||||
@include button($osd_bg, $osd_fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
@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;
|
||||
|
||||
@if $color == $fg_color {
|
||||
$_small_gradient_color: shade($borders_color, .9);
|
||||
$_big_gradient_color: $fg_color;
|
||||
|
||||
@if $type == backdrop { $_small_gradient_color: $backdrop_borders_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;
|
||||
}
|
||||
|
||||
// Disable
|
||||
/*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;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
scrolledwindow {
|
||||
viewport.frame { // avoid double borders when viewport inside scrolled window
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
||||
// This draws a box on top of the content, the size changes programmatically.
|
||||
overshoot {
|
||||
&.top {
|
||||
@include overshoot(top);
|
||||
|
||||
&: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); }
|
||||
}
|
||||
|
||||
junction { // the small square between two scrollbars
|
||||
border-color: transparent;
|
||||
// the border image is used to add the missing dot between the borders, details, details, details...
|
||||
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
|
||||
background-color: $scrollbar_bg_color;
|
||||
|
||||
&:dir(rtl) { border-image-slice: 0 1 0 0; }
|
||||
|
||||
&:backdrop {
|
||||
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
364
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_progress.scss
Normal file
364
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_progress.scss
Normal file
@@ -0,0 +1,364 @@
|
||||
/*****************
|
||||
! Progress bars *
|
||||
******************/
|
||||
|
||||
@include exports("progressbar") {
|
||||
progressbar {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, .6);
|
||||
|
||||
// sizing
|
||||
&.horizontal {
|
||||
trough,
|
||||
progress { min-height: 6px; }
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
trough,
|
||||
progress { min-width: 6px; }
|
||||
}
|
||||
|
||||
trough {
|
||||
border: 1px solid mix($bg_color, $fg_color, .17);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
progress {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-radius: 0;
|
||||
|
||||
&.left {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
levelbar {
|
||||
&.horizontal block {
|
||||
min-width: 34px;
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
&.vertical block {
|
||||
min-width: 4px;
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
&:backdrop { transition: 200ms ease-out; }
|
||||
|
||||
trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||
|
||||
border: 1px solid mix($bg_color, $fg_color, .17);
|
||||
border-radius: $roundness;
|
||||
padding: 2px; // make discrete block appear inside levelbar
|
||||
}
|
||||
|
||||
&.horizontal.discrete block {
|
||||
margin: 0 1px;
|
||||
|
||||
&:first-child { margin: 0; }
|
||||
}
|
||||
|
||||
&.vertical.discrete block {
|
||||
margin: 1px 0;
|
||||
|
||||
&:first-child { margin: 0; }
|
||||
}
|
||||
|
||||
block {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-color: transparent;
|
||||
border-radius: $roundness;
|
||||
|
||||
&.low {
|
||||
background-color: $warning_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.high,
|
||||
&:not(.empty) {
|
||||
background-color: $success_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.full {
|
||||
background-color: shade($selected_bg_color, .8);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scale {
|
||||
$_marks_length: 3px;
|
||||
$_marks_distance: 1px;
|
||||
$button_bg: $button_bg_color;
|
||||
$ease-out-quad: cubic-bezier(.25, .46, .45, .94);
|
||||
$button_transition: all 200ms $ease-out-quad;
|
||||
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
padding: $spacing;
|
||||
|
||||
&.horizontal {
|
||||
trough { padding: 0 3px; }
|
||||
|
||||
highlight, fill { margin: 0 -4px; }
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
trough { padding: 3px 0; }
|
||||
|
||||
highlight, fill { margin: -4px 0; }
|
||||
}
|
||||
|
||||
// The slider is inside the trough, negative margin to make it bigger
|
||||
slider {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: -7px;
|
||||
}
|
||||
|
||||
// Click-and-hold the slider to activate
|
||||
&.fine-tune {
|
||||
// Make the trough grow in fine-tune mode
|
||||
slider { margin: -7px; }
|
||||
|
||||
highlight { background-color: shade($selected_bg_color, 1.1); }
|
||||
|
||||
fill,
|
||||
highlight,
|
||||
trough {
|
||||
border-radius: 5px;
|
||||
-gtk-outline-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Trough
|
||||
trough {
|
||||
$_scale_trough_bg: mix($bg_color, $fg_color, .2);
|
||||
|
||||
outline-offset: 2px;
|
||||
-gtk-outline-radius: 4.5px;
|
||||
|
||||
border-radius: 2.5px;
|
||||
background-color: $_scale_trough_bg;
|
||||
|
||||
&:disabled { background-color: mix($bg_color, $fg_color, .1); }
|
||||
|
||||
// Troughs in selected list-rows and infobars
|
||||
menuitem:hover &,
|
||||
row:selected &,
|
||||
infobar & {
|
||||
background-color: transparentize($black, .8);
|
||||
|
||||
highlight {
|
||||
background-color: $selected_fg_color;
|
||||
|
||||
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, .55); }
|
||||
}
|
||||
|
||||
&:disabled { background-color: transparentize($black, .9); }
|
||||
}
|
||||
}
|
||||
|
||||
// The colored part of trough
|
||||
highlight {
|
||||
border-radius: 2.5px;
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
&:disabled { background-color: transparentize($selected_bg_color, .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, .5);
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
slider {
|
||||
$_slider_border: $button_border;
|
||||
|
||||
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($button_bg, $bg_color, .55);
|
||||
border-color: transparentize($_slider_border, .2);
|
||||
}
|
||||
|
||||
// Selected list-row and infobar sliders
|
||||
menuitem:hover &,
|
||||
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, .5);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, .5);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, .55);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, .55);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
value { color: alpha(currentColor, .4); }
|
||||
|
||||
marks {
|
||||
color: alpha(currentColor, .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); }
|
||||
}
|
||||
|
||||
&.color {
|
||||
trough {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
highlight, fill { margin: 0; }
|
||||
|
||||
&.horizontal {
|
||||
padding: 0 0 6px 0;
|
||||
|
||||
trough {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
slider {
|
||||
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
&:dir(ltr) {
|
||||
padding: 0 0 0 6px;
|
||||
|
||||
trough {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
slider {
|
||||
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
padding: 0 6px 0 0;
|
||||
|
||||
trough {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
slider {
|
||||
&:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
/***********
|
||||
! Scrollbar
|
||||
************/
|
||||
|
||||
@include exports("scrollbar") {
|
||||
scrollbar {
|
||||
$_slider_min_length: 40px;
|
||||
$_slider_normal_width: 7px;
|
||||
$_slider_small_width: 4px;
|
||||
|
||||
// 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 on the content side
|
||||
&.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 {
|
||||
min-width: $_slider_normal_width;
|
||||
min-height: $_slider_normal_width;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $roundness;
|
||||
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; }
|
||||
}
|
||||
|
||||
&.horizontal slider { min-width: $_slider_min_length; }
|
||||
&.vertical slider { min-height: $_slider_min_length; }
|
||||
|
||||
&.fine-tune slider:active {
|
||||
background-color: lighten($scrollbar_slider_active_color, 10%);
|
||||
}
|
||||
|
||||
&.overlay-indicator {
|
||||
opacity: .8;
|
||||
|
||||
&:not(.dragging):not(.hovering) {
|
||||
border-color: transparent;
|
||||
opacity: .4;
|
||||
background-color: transparent;
|
||||
|
||||
slider {
|
||||
min-width: $_slider_small_width;
|
||||
min-height: $_slider_small_width;
|
||||
background-color: $fg_color;
|
||||
border: 1px solid if($variant == 'light', $white, $black);
|
||||
}
|
||||
|
||||
// hide steppers
|
||||
button {
|
||||
min-width: $_slider_small_width;
|
||||
min-height: $_slider_small_width;
|
||||
border-color: transparent;
|
||||
-gtk-icon-source: none;
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
slider { min-width: $_slider_min_length; }
|
||||
button { min-width: $_slider_normal_width; }
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
slider { min-height: $_slider_min_length; }
|
||||
button { min-height: $_slider_normal_width; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stepper styling
|
||||
button {
|
||||
min-width: $_slider_normal_width;
|
||||
min-height: $_slider_normal_width;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-color: $borders_color; // FIXME overwritten by global button definition
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
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");
|
||||
border-top: 1px solid $borders_color;
|
||||
}
|
||||
|
||||
&.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
|
||||
border-bottom: 1px solid $borders_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
button {
|
||||
&.down {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
|
||||
border-left: 1px solid $borders_color;
|
||||
}
|
||||
|
||||
&.up {
|
||||
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
|
||||
border-right: 1px solid $borders_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
226
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_sidebar.scss
Normal file
226
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_sidebar.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
/*********
|
||||
! Sidebar
|
||||
**********/
|
||||
|
||||
@include exports("sidebar") {
|
||||
.sidebar {
|
||||
border-style: none;
|
||||
background-color: mix($bg_color, $base_color, .5);
|
||||
|
||||
@at-root %sidebar_left,
|
||||
&:dir(ltr),
|
||||
&.left,
|
||||
&.left:dir(rtl) {
|
||||
border-right: 1px solid $borders_color;
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
@at-root %sidebar_right
|
||||
&:dir(rtl),
|
||||
&.right {
|
||||
border-left: 1px solid $borders_color;
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_sidebar_bg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
.frame, frame { border-width: 0; }
|
||||
|
||||
list { background-color: transparent; }
|
||||
|
||||
paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; } }
|
||||
}
|
||||
|
||||
stacksidebar {
|
||||
&.sidebar {
|
||||
&:dir(ltr),
|
||||
&.left,
|
||||
&.left:dir(rtl) {
|
||||
list { @extend %sidebar_left; }
|
||||
}
|
||||
|
||||
&:dir(rtl),
|
||||
&.right {
|
||||
list { @extend %sidebar_right; }
|
||||
}
|
||||
}
|
||||
|
||||
row {
|
||||
padding: $spacing * 2 $spacing;
|
||||
|
||||
> label {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
&.needs-attention > label {
|
||||
@extend %needs_attention;
|
||||
|
||||
background-size: 6px 6px, 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$_placesidebar_icons_opacity: .7;
|
||||
|
||||
placessidebar {
|
||||
> viewport.frame { border-style: none; }
|
||||
|
||||
row {
|
||||
// Needs overriding of the GtkListBoxRow padding
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
|
||||
// Using margins/padding directly in the SidebarRow
|
||||
// will make the animation of the new bookmark row jump
|
||||
> revealer { padding: 0 $spacing * 2; }
|
||||
|
||||
&:selected { color: $selected_fg_color; }
|
||||
|
||||
&:disabled { color: $insensitive_fg_color; }
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_fg_color;
|
||||
|
||||
&:selected { color: $backdrop_selected_fg_color; }
|
||||
|
||||
&:disabled { color: $backdrop_insensitive_color; }
|
||||
}
|
||||
|
||||
image.sidebar-icon {
|
||||
opacity: $_placesidebar_icons_opacity; // dim the device icons
|
||||
|
||||
&:dir(ltr) {
|
||||
padding-right: $spacing*2 + 2;
|
||||
padding-left: $spacing;
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
padding-left: $spacing*2 + 2;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
label.sidebar-label {
|
||||
&:dir(ltr) { padding-right: 2px; }
|
||||
|
||||
&:dir(rtl) { padding-left: 2px; }
|
||||
}
|
||||
|
||||
@at-root button.sidebar-button {
|
||||
//@extend %button_basic.flat;
|
||||
|
||||
//@extend %button_selected.flat;
|
||||
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
padding: 0;
|
||||
border-radius: 100%;
|
||||
-gtk-outline-radius: 100%;
|
||||
|
||||
&:not(:hover):not(:active),
|
||||
&:backdrop {
|
||||
> image { opacity: $_placesidebar_icons_opacity; }
|
||||
}
|
||||
}
|
||||
|
||||
// in the sidebar case it makes no sense to click the selected row
|
||||
&:selected:active { box-shadow: none; }
|
||||
|
||||
&.sidebar-placeholder-row {
|
||||
padding: 0 8px;
|
||||
min-height: 2px;
|
||||
background-image: image($drop_target_color);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&.sidebar-new-bookmark-row { color: $selected_bg_color; }
|
||||
|
||||
&:drop(active):not(:disabled) {
|
||||
color: $drop_target_color;
|
||||
box-shadow: inset 0 1px $drop_target_color,
|
||||
inset 0 -1px $drop_target_color;
|
||||
|
||||
&:selected {
|
||||
color: $selected_fg_color;
|
||||
background-color: $drop_target_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Paned
|
||||
*******/
|
||||
|
||||
@include exports("paned") {
|
||||
paned {
|
||||
> separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
-gtk-icon-source: none; // defeats the ugly default handle decoration
|
||||
border-style: none; // just to be sure
|
||||
background-color: transparent;
|
||||
// workaround, using background istead of a border since the border will get rendered twice (?)
|
||||
background-image: image(shade($bg_color, .9));
|
||||
background-size: 1px 1px;
|
||||
background-position: center center;
|
||||
|
||||
&:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
|
||||
|
||||
&:backdrop { background-image: image($backdrop_borders_color); }
|
||||
|
||||
&.wide {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: $bg_color;
|
||||
background-image: image(border_normal($bg_color)), image(border_normal($bg_color));
|
||||
background-size: 1px 1px, 1px 1px;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_bg_color;
|
||||
background-image: image($backdrop_borders_color),
|
||||
image($backdrop_borders_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal > separator {
|
||||
background-repeat: repeat-y;
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-repeat: repeat-y, repeat-y;
|
||||
background-position: left, right;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > separator {
|
||||
background-repeat: repeat-x;
|
||||
padding: 2px 0;
|
||||
margin: -2px 0;
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-repeat: repeat-x, repeat-x;
|
||||
background-position: bottom, top;
|
||||
}
|
||||
}
|
||||
|
||||
&.titlebar > separator {
|
||||
background-image: image(shade($titlebar_bg_color, ($contrast + .1)));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*******************
|
||||
! Spinner animation
|
||||
********************/
|
||||
|
||||
@include exports("spinner") {
|
||||
@keyframes spin {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
spinner {
|
||||
background-image: none;
|
||||
color: $selected_bg_color;
|
||||
opacity: 0; // non spinning spinner makes no sense
|
||||
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
|
||||
&:checked {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
|
||||
&:disabled { opacity: .5; }
|
||||
}
|
||||
}
|
||||
}
|
||||
155
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_toggle.scss
Normal file
155
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_toggle.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
/***********************
|
||||
! Check and Radio items
|
||||
************************/
|
||||
|
||||
$suffix: if($variant == "dark", "-dark", "");
|
||||
|
||||
@mixin toggle($type) {
|
||||
background-image: none;
|
||||
|
||||
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.svg");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-disabled#{$suffix}.svg"); }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.svg");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-disabled#{$suffix}.svg"); }
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.svg");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-disabled#{$suffix}.svg"); }
|
||||
}
|
||||
|
||||
menuitem &, modelbutton & {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-unchecked.svg");
|
||||
|
||||
&:disabled {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked-disabled.svg");
|
||||
}
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.svg");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.svg"); }
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-disabled.svg"); }
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.svg");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.svg"); }
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-disabled.svg"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("checkradio") {
|
||||
radio {
|
||||
@include toggle("radio");
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
check {
|
||||
@include toggle("checkbox");
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
radio:dir(rtl), check:dir(rtl) {
|
||||
margin-right: 0;
|
||||
margin-left: $spacing;
|
||||
}
|
||||
|
||||
//selection-mode
|
||||
@each $s,$as in ('', '-unchecked'),
|
||||
(':hover', '-unchecked'),
|
||||
(':active', '-checked'),
|
||||
(':backdrop', '-unchecked'),
|
||||
(':checked', '-checked'),
|
||||
(':checked:hover', '-checked'),
|
||||
(':checked:active', '-checked'),
|
||||
(':backdrop:checked', '-checked') {
|
||||
.view.content-view.check#{$s}:not(list) {
|
||||
-gtk-icon-shadow: none;
|
||||
-gtk-icon-source: url("../assets/grid-selection#{$as}#{$suffix}.svg");
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********
|
||||
! Switch
|
||||
*********/
|
||||
|
||||
@include exports("switch") {
|
||||
switch {
|
||||
border-radius: $roundness;
|
||||
padding: $spacing - 1px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: background-color .3s linear;
|
||||
min-width: 88px;
|
||||
min-height: 24px;
|
||||
background-color: $switch_bg_color;
|
||||
color: $switch_fg_color;
|
||||
box-shadow: inset 1px -1px 0 alpha($dark_shadow, .06), inset -1px 1px 0 alpha($dark_shadow, .06);
|
||||
|
||||
slider {
|
||||
background-color: $switch_slider_bg_color;
|
||||
transition: all 0.3s ease-in;
|
||||
box-shadow: 0 1px 2px 0 alpha($dark_shadow, .07), 1px 0 2px 0 alpha($dark_shadow, .07);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
border-color: $selected_bg_color;
|
||||
color: $base_color;
|
||||
|
||||
slider {
|
||||
background-color: $white;
|
||||
box-shadow: 0 1px 3px 0 alpha($dark_shadow, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $switch_disabled_bg_color;
|
||||
background-image: none;
|
||||
border-color: $switch_disabled_border_color;
|
||||
color: $switch_disabled_fg_color;
|
||||
box-shadow: none;
|
||||
|
||||
slider {
|
||||
background-color: $switch_disabled_slider_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
list row:selected & {
|
||||
background-color: $switch_disabled_slider_bg_color;
|
||||
color: $switch_disabled_bg_color;
|
||||
|
||||
slider {
|
||||
background-color: mix($switch_disabled_bg_color, $base_color, .4);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
color: $selected_bg_color;
|
||||
background-color: $switch_slider_bg_color;
|
||||
|
||||
slider {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
237
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_toolbar.scss
Normal file
237
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_toolbar.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*********
|
||||
! Toolbar
|
||||
**********/
|
||||
|
||||
@mixin toolbar($bg, $fg) {
|
||||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
||||
color: $fg;
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($bg, .9));
|
||||
|
||||
color: mix($fg, $bg, .5);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: smaller;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
button { @include button($bg, $fg); }
|
||||
|
||||
.linked > button { @include linked_button($bg); }
|
||||
|
||||
combobox, button {
|
||||
padding: $spacing;
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: $spacing; }
|
||||
}
|
||||
|
||||
separator {
|
||||
&, &:disabled {
|
||||
color: shade($bg, ($contrast - .2));
|
||||
border-color: currentColor;
|
||||
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inline-toolbar($bg, $fg) {
|
||||
padding: 1px;
|
||||
border-width: 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($borders_color, $bg_color, .7);;
|
||||
background-image: none;
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
background-color: $backdrop_dark_fill;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
button { @include button($toolbar_bg_color, $toolbar_fg_color); }
|
||||
|
||||
toolbutton,
|
||||
toolbutton:backdrop {
|
||||
> button.flat { @extend %linked_middle; }
|
||||
|
||||
&:first-child > button.flat { @extend %linked_button:first-child; }
|
||||
|
||||
&:last-child > button.flat { @extend %linked_button:last-child; }
|
||||
|
||||
&:only-child > button.flat { @extend %linked_button:only-child; }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("toolbar_extends") {
|
||||
%toolbar {
|
||||
padding: $spacing - 1px;
|
||||
border-style: none;
|
||||
|
||||
// toolbar separators
|
||||
&.horizontal separator { margin: 0 ($spacing + 2px) 1px; }
|
||||
|
||||
&.vertical separator { margin: ($spacing + 2px) 1px ($spacing + 2px) 0; }
|
||||
}
|
||||
|
||||
%headerbar {
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
|
||||
// add vertical margins to common widget on the headerbar to avoid them spanning the whole height
|
||||
entry,
|
||||
spinbutton,
|
||||
separator,
|
||||
button { // Size height
|
||||
margin-top: $spacing + 3px;
|
||||
margin-bottom: $spacing + 3px;
|
||||
}
|
||||
|
||||
switch { // Size height
|
||||
margin-top: $spacing + 1px;
|
||||
margin-bottom: $spacing + 1px;
|
||||
}
|
||||
|
||||
window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
|
||||
window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: $roundness; } }
|
||||
|
||||
window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: $roundness; } }
|
||||
}
|
||||
|
||||
%titlebar { // Default headerbar and titlebar code.
|
||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
padding: 0 $spacing * 2;
|
||||
min-height: 42px;
|
||||
|
||||
&:backdrop {
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.default-decoration { // Default titlebar (old metacity)
|
||||
min-height: 24px;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
|
||||
button.titlebutton {
|
||||
min-height: 16px;
|
||||
min-width: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tiled &,
|
||||
.maximized & { &:backdrop, & { border-radius: 0; } } // squared corners when the window is maximized or tiled
|
||||
|
||||
.title { font-weight: bold; }
|
||||
|
||||
separator.titlebutton { margin-left: $spacing; }
|
||||
|
||||
button {
|
||||
@include button($header_button_bg_color, $header_button_fg_color);
|
||||
}
|
||||
|
||||
button.titlebutton + separator.titlebutton {
|
||||
margin-left: 0;
|
||||
margin-right: $spacing;
|
||||
}
|
||||
|
||||
button.titlebutton {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("toolbar") {
|
||||
toolbar {
|
||||
@include toolbar($toolbar_bg_color, $toolbar_fg_color);
|
||||
|
||||
@extend %toolbar;
|
||||
|
||||
&.inline-toolbar { @include inline-toolbar($toolbar_bg_color, $toolbar_fg_color); }
|
||||
}
|
||||
|
||||
headerbar {
|
||||
@extend %titlebar;
|
||||
@extend %headerbar;
|
||||
}
|
||||
|
||||
.titlebar:not(headerbar) {
|
||||
window.csd > & {
|
||||
// in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-style: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> separator { background-color: shade($titlebar_bg_color, .88); } // $borders_color
|
||||
|
||||
@extend %titlebar;
|
||||
}
|
||||
|
||||
.background:not(.tiled):not(.maximized) .titlebar {
|
||||
&:backdrop, & {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixed: https://github.com/numixproject/numix-gtk-theme/issues/585
|
||||
// workaround for ugly Ubuntu-related CSD patches
|
||||
.background:not(.csd):not(.ssd):not(.solid-csd) headerbar {
|
||||
&, &:backdrop {
|
||||
&, &:not(:last-child) {
|
||||
border-radius: 0;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
354
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_view.scss
Normal file
354
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_view.scss
Normal file
@@ -0,0 +1,354 @@
|
||||
/***************
|
||||
! Generic views
|
||||
****************/
|
||||
|
||||
@include exports("view") {
|
||||
.view,
|
||||
%view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
caret-color: $primary_caret_color;
|
||||
-gtk-secondary-caret-color: $secondary_caret_color;
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_text_color;
|
||||
background-color: $backdrop_base_color;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view,
|
||||
textview {
|
||||
text {
|
||||
@extend %view;
|
||||
|
||||
selection { &:focus, & { @extend %selected_items; } }
|
||||
}
|
||||
}
|
||||
|
||||
textview border { background-color: mix($bg_color, $base_color, .5); }
|
||||
|
||||
iconview { @extend .view; }
|
||||
}
|
||||
|
||||
|
||||
/************
|
||||
! Treeview
|
||||
*************/
|
||||
|
||||
@include exports("treeview") {
|
||||
.rubberband,
|
||||
rubberband {
|
||||
border: 1px solid darken($selected_bg_color, .1);
|
||||
background-color: transparentize(darken($selected_bg_color, .1), .8);
|
||||
}
|
||||
|
||||
treeview entry {
|
||||
&:focus {
|
||||
&:dir(rtl), &:dir(ltr) { // specificity bump hack
|
||||
background-color: $base_color;
|
||||
transition-property: color, background;
|
||||
}
|
||||
}
|
||||
|
||||
&.flat, & {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: $base_color;
|
||||
|
||||
&:focus { border-color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
%column_header_button {
|
||||
padding: ($spacing - 2px) ($spacing + 1px);
|
||||
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, .5);
|
||||
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, .5); // 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, .5);
|
||||
border-top-color: transparentize($fg_color, .9); // doesn't work unfortunatelly
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_fg_color, $selected_bg_color, .4);
|
||||
|
||||
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, .3); }
|
||||
}
|
||||
|
||||
&:backdrop { color: $backdrop_insensitive_color; }
|
||||
}
|
||||
|
||||
&.separator {
|
||||
min-height: 2px;
|
||||
color: $bg_color;
|
||||
|
||||
&:backdrop { color: transparentize($bg_color, .9); }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, .5);
|
||||
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($base_color, $fg_color, .7);
|
||||
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
|
||||
&:hover { color: $fg_color; }
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_bg_color, $selected_fg_color, .7);
|
||||
|
||||
&:hover { color: $selected_fg_color; }
|
||||
|
||||
&:backdrop { color: mix($selected_bg_color, $backdrop_selected_fg_color, .7); }
|
||||
}
|
||||
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
|
||||
&:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .7); }
|
||||
}
|
||||
|
||||
&.progressbar { // progress bar in treeviews
|
||||
@if $variant == light { color: $base_color; }
|
||||
|
||||
border-radius: $roundness;
|
||||
border: 1px solid $selected_borders_color;
|
||||
background-color: $selected_bg_color;
|
||||
//background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color, .1));
|
||||
//box-shadow: inset 0 1px $fg_color,
|
||||
//0 1px if($variant == 'light', transparentize($black, .8), transparentize($black, .9));
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@if $variant == 'light' {
|
||||
color: $selected_fg_color;
|
||||
box-shadow: none;
|
||||
} @else {
|
||||
box-shadow: inset 0 1px transparentize($white, .95);
|
||||
}
|
||||
|
||||
@include linear-gradient($selected_bg_color);
|
||||
border-radius: $roundness;
|
||||
|
||||
&:backdrop {
|
||||
@if $variant == 'light' {
|
||||
color: $backdrop_selected_fg_color;
|
||||
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
||||
} @else {
|
||||
border-color: $backdrop_base_color;
|
||||
}
|
||||
|
||||
background-color: mix($backdrop_base_color, $selected_bg_color, .9);
|
||||
}
|
||||
}
|
||||
border: 1px solid mix($selected_bg_color, $selected_fg_color, .2);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient($bg_color);
|
||||
border-color: border_insensitive($bg_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, .9);
|
||||
border-radius: $roundness;
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
background-color: if($variant == 'light', transparentize($selected_fg_color, .7), darken($selected_bg_color, .1));
|
||||
|
||||
@if $variant == 'light' {
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: $selected_bg_color;
|
||||
}
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
button {
|
||||
$_column_header_color: mix($fg_color, $base_color, .5);
|
||||
|
||||
@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, .5);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
acceleditor > label { background-color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Separator
|
||||
************/
|
||||
|
||||
@include exports("separator") {
|
||||
separator { // vbox and hbox separators
|
||||
background: transparentize($black, .9);
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
! Frames *
|
||||
***********/
|
||||
|
||||
@include exports("frame") {
|
||||
frame > border, .frame {
|
||||
border: 1px solid $borders_color;
|
||||
|
||||
&.flat { border-style: none; }
|
||||
|
||||
&:backdrop { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
||||
scrolledwindow viewport.frame { border: 0; }
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
! Places view *
|
||||
****************/
|
||||
|
||||
@include exports("placesview") {
|
||||
placesview {
|
||||
.server-list-button > image {
|
||||
transition: 200ms cubic-bezier(.25, .46, .45, .94);
|
||||
-gtk-icon-transform: rotate(0turn);
|
||||
}
|
||||
|
||||
.server-list-button:checked > image {
|
||||
transition: 200ms cubic-bezier(.25, .46, .45, .94);
|
||||
-gtk-icon-transform: rotate(-0.5turn);
|
||||
}
|
||||
|
||||
row.activatable:hover { background-color: transparent; }
|
||||
|
||||
// this selects the "connect to server" label
|
||||
> actionbar > revealer > box > label {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
/**************
|
||||
! Window frame
|
||||
***************/
|
||||
|
||||
@include exports("window") {
|
||||
decoration {
|
||||
$_wm_border: if($variant == 'light', transparentize($black, .77), transparentize($borders_color, .1));
|
||||
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
// lamefun trick to get rounded borders regardless of CSD use
|
||||
//border-width: 0;
|
||||
|
||||
//box-shadow: 0 3px 9px 1px transparentize($black, .3), 0 0 0 1px $wm_border_focused; //doing borders with box-shadow
|
||||
/* this is used for the resize cursor area */
|
||||
//margin: $spacing * 3;
|
||||
|
||||
border-width: $spacing % 2;
|
||||
border-style: solid;
|
||||
//border-color: $wm_border_focused;
|
||||
//@TODO:
|
||||
border-color: $wm_border_unfocused;
|
||||
|
||||
|
||||
&:backdrop {
|
||||
//box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px transparentize($black, .6), 0 0 0 1px $wm_border_unfocused;
|
||||
border-color: $wm_border_unfocused;
|
||||
transition: 200ms ease-out;
|
||||
}
|
||||
|
||||
.maximized &, .fullscreen &, .tiled & { border-radius: 0; }
|
||||
|
||||
.popup & { box-shadow: none; }
|
||||
|
||||
// this needs to be transparent
|
||||
// see bug #722563
|
||||
// server-side decorations as used by mutter
|
||||
// Fixed gtk-3.18 Unity bug (https://github.com/numixproject/numix-gtk-theme/issues/270)
|
||||
.ssd & { box-shadow: 0 0 0 1px $wm_border_focused; } //just doing borders, wm draws actual shadows
|
||||
|
||||
.solid-csd & {
|
||||
border-radius: 0;
|
||||
//margin: 1px;
|
||||
//background-color: $bg_color;
|
||||
// Unity/compiz regression: Issue: https://github.com/numixproject/numix-gtk-theme/issues/206
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.csd.popup & {
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($_wm_border, .1);
|
||||
}
|
||||
|
||||
tooltip.csd & {
|
||||
border-radius: $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
messagedialog.csd & {
|
||||
border-radius: $roundness;
|
||||
box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($_wm_border, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user