mirror of
https://github.com/encounter/numix-blue-gtk-theme.git
synced 2026-07-10 12:18:49 -07:00
Start redesign
This commit is contained in:
Satyajit Sahoo
@@ -58,7 +58,7 @@
|
||||
|
||||
@include exports("actionbuttons") {
|
||||
$types: (
|
||||
suggested: $selected_bg_color,
|
||||
suggested: $success_color,
|
||||
destructive: $error-color
|
||||
);
|
||||
|
||||
|
||||
@@ -4,34 +4,9 @@
|
||||
|
||||
* {
|
||||
-GtkArrow-arrow-scaling: 0.5;
|
||||
-GtkButton-child-displacement-x: 0;
|
||||
-GtkButton-child-displacement-y: 0;
|
||||
-GtkButton-default-border: 0;
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 1;
|
||||
-GtkButton-interior-focus: true;
|
||||
-GtkButtonBox-child-min-height: 24;
|
||||
-GtkButtonBox-child-internal-pad-y: 1;
|
||||
-GtkExpander-expander-size: 8;
|
||||
-GtkMenu-horizontal-padding: 0;
|
||||
-GtkMenu-vertical-padding: 0;
|
||||
-GtkPaned-handle-size: 4;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 12;
|
||||
-GtkProgressBar-min-vertical-bar-width: 12;
|
||||
-GtkRange-slider-width: 12;
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-border: 0;
|
||||
-GtkRange-trough-under-steppers: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkScrollbar-min-slider-length: 80;
|
||||
-GtkScrolledWindow-scrollbar-spacing: 0;
|
||||
-GtkScrolledWindow-scrollbars-within-bevel: 1;
|
||||
-GtkStatusbar-shadow-type: none;
|
||||
-GtkTextView-error-underline-color: $error_color;
|
||||
-GtkToolButton-icon-spacing: 6;
|
||||
-GtkToolItemGroup-expander-size: 8;
|
||||
-GtkTreeView-expander-size: 8;
|
||||
-GtkWindow-resize-grip-height: 0;
|
||||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
@@ -82,6 +57,8 @@
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
|
||||
&.csd { background-color: $bg_color; }
|
||||
}
|
||||
|
||||
.gtkstyle-fallback {
|
||||
|
||||
@@ -4,15 +4,17 @@
|
||||
|
||||
@include exports("button_extends") {
|
||||
%button {
|
||||
padding: ($spacing - 1px) ($spacing + 1px);
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 100ms ease;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
|
||||
-GtkWidget-focus-padding: 1;
|
||||
-GtkWidget-focus-line-width: 0;
|
||||
|
||||
&:focus, &:hover, &:active { transition: none; }
|
||||
}
|
||||
|
||||
%linked_middle {
|
||||
@@ -71,95 +73,107 @@
|
||||
}
|
||||
|
||||
@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($bg),
|
||||
0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
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($bg),
|
||||
0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
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($bg),
|
||||
inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 1px alpha($dark_shadow, .08),
|
||||
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);
|
||||
}
|
||||
|
||||
&:insensitive { box-shadow: inset -1px 0 border_insensitive($bg); }
|
||||
&:insensitive { 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); }
|
||||
|
||||
&:last-child, &:only-child,
|
||||
&:insensitive:last-child, &:insensitive:only-child,
|
||||
&:active:insensitive:last-child, &:active:insensitive:only-child,
|
||||
&:checked:insensitive:last-child, &:checked:insensitive:only-child { box-shadow: none; }
|
||||
|
||||
&:active:last-child, &:active:only-child,
|
||||
&:active:last-child:focus, &:active:only-child:focus,
|
||||
&:active:last-child:hover, &:active:only-child:hover,
|
||||
&:active:last-child:hover:focus, &:active:only-child:hover:focus,
|
||||
&:checked:last-child, &:checked:only-child,
|
||||
&:checked:last-child:focus, &:checked:only-child:focus,
|
||||
&:checked:last-child:hover, &:checked:only-child:hover,
|
||||
&:checked:last-child:hover:focus, &:checked:only-child:hover:focus {
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 1px alpha($dark_shadow, .08),
|
||||
inset -1px 0 alpha($dark_shadow, .07);
|
||||
&: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) {
|
||||
@include linear-gradient(shade($bg, 1.05));
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
@extend %button;
|
||||
@include linear-gradient(shade($bg, 1.2));
|
||||
@include border(rgba(0,0,0,.12 + $border_strength));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg, .95));
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&, &.flat {
|
||||
@include border(shade($bg, 1.05));
|
||||
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($bg, 1.1));
|
||||
|
||||
box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5);
|
||||
}
|
||||
|
||||
&:checked, &:active {
|
||||
@include linear-gradient(shade($bg, .95));
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
&:active:insensitive,
|
||||
&:checked:insensitive {
|
||||
@include linear-gradient(shade($bg, .8));
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
&.flat {
|
||||
color: inherit;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&, &.flat {
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($bg, 1.2));
|
||||
@include border(rgba(0,0,0,.2 + $border_strength));
|
||||
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
|
||||
color: $fg;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
|
||||
&:active:insensitive, &:checked:insensitive {
|
||||
@include linear-gradient(shade($bg, .8));
|
||||
|
||||
color: $fg;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:insensitive:insensitive {
|
||||
@if (lightness($bg) > 50) {
|
||||
@include linear-gradient(shade($bg, .95));
|
||||
} @else {
|
||||
@include linear-gradient(alpha($bg, .3));
|
||||
}
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: shade($bg, ($contrast + .1));
|
||||
@@ -169,6 +183,18 @@
|
||||
}
|
||||
|
||||
@include exports("button") {
|
||||
* {
|
||||
-GtkButton-child-displacement-x: 0;
|
||||
-GtkButton-child-displacement-y: 0;
|
||||
-GtkButton-default-border: 0;
|
||||
-GtkButton-image-spacing: 0;
|
||||
-GtkButton-inner-border: 1;
|
||||
-GtkButton-interior-focus: true;
|
||||
-GtkButtonBox-child-min-height: 24;
|
||||
-GtkButtonBox-child-internal-pad-y: 1;
|
||||
-GtkToolButton-icon-spacing: 6;
|
||||
}
|
||||
|
||||
%close_button {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
@@ -176,15 +202,15 @@
|
||||
box-shadow: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
border: 1px solid alpha(black, 0.3);
|
||||
background-color: alpha(white, 0.2);
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(white, .2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha(black, 0.3);
|
||||
background-color: alpha(black, 0.1);
|
||||
border: 1px solid alpha(black, .3);
|
||||
background-color: alpha(black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -195,21 +221,21 @@
|
||||
|
||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||
|
||||
&.linked, .linked & { @include linked_button($bg_color); }
|
||||
&.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
|
||||
|
||||
.spinbutton & {
|
||||
color: mix($text_color, $base_color, 0.4);
|
||||
color: mix($text_color, $base_color, .4);
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 1px 0 shade($base_color, 0.9);
|
||||
box-shadow: inset 1px 0 shade($base_color, .9);
|
||||
|
||||
&:insensitive {
|
||||
color: mix($text_color, $base_color, 0.7);
|
||||
box-shadow: inset 1px 0 shade($base_color, 0.85);
|
||||
color: mix($text_color, $base_color, .7);
|
||||
box-shadow: inset 1px 0 shade($base_color, .85);
|
||||
}
|
||||
|
||||
&:active, &:checked, &:hover { color: $text_color; }
|
||||
@@ -221,11 +247,11 @@
|
||||
|
||||
&:last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, 0.9); }
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
|
||||
}
|
||||
|
||||
.spinbutton.vertical & {
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
border-radius: $roundness;
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
@@ -233,26 +259,26 @@
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($bg_color, 0.7);
|
||||
border-color: shade($bg_color, .7);
|
||||
background-color: shade($bg_color, 1.1);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
border-color: shade($bg_color, .8);
|
||||
background-color: shade($bg_color, .95);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active:hover, &:checked:hover {
|
||||
border-color: shade($bg_color, 0.7);
|
||||
border-color: shade($bg_color, .7);
|
||||
}
|
||||
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, 0.7); }
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, 0.85);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
border-color: shade($bg_color, .85);
|
||||
background-color: shade($bg_color, .9);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -289,7 +315,7 @@
|
||||
> .button {
|
||||
padding: ($spacing - 2px) ($spacing + 1px);
|
||||
|
||||
-GtkComboBox-arrow-scaling: 0.5;
|
||||
-GtkComboBox-arrow-scaling: .5;
|
||||
-GtkComboBox-shadow-type: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:hover, &:insensitive {
|
||||
&, &:focus, &:hover, &:insensitive {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
@@ -30,33 +30,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg) {
|
||||
@include border(shade($bg, .9));
|
||||
|
||||
%entry {
|
||||
padding: ($spacing - 1px) $spacing;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
background-color: $bg;
|
||||
background-image: none;
|
||||
transition: border 100ms ease;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
|
||||
inset 0 1px alpha($dark_shadow, .12),
|
||||
inset -1px 0 alpha($dark_shadow, .1),
|
||||
inset 0 -1px alpha($dark_shadow, .05),
|
||||
0 1px 2px -1px shade($bg, 1.4);
|
||||
transition: border 150ms ease;
|
||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
|
||||
&:focus, &:hover, &:active { transition: none; }
|
||||
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: shade($bg, .9);
|
||||
background-image: none;
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
&:insensitive { box-shadow: none; }
|
||||
|
||||
&.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
@@ -69,6 +59,22 @@
|
||||
&.image.left { padding-right: $spacing; }
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg) {
|
||||
@extend %entry;
|
||||
@include linear-gradient($bg, to top);
|
||||
@include border($bg);
|
||||
|
||||
color: $fg;
|
||||
|
||||
&:focus, &:active { border-color: $selected_bg_color; }
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("entry") {
|
||||
.entry {
|
||||
@include entry($base_color, $text_color);
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
border-radius: 0;
|
||||
padding: $spacing;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
background-color: alpha($bg_color, 0);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -40,6 +40,11 @@
|
||||
*******/
|
||||
|
||||
@include exports("menu") {
|
||||
* {
|
||||
-GtkMenu-horizontal-padding: 0;
|
||||
-GtkMenu-vertical-padding: 0;
|
||||
}
|
||||
|
||||
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
||||
&.menu, .menu {
|
||||
background-color: $menu_bg_color;
|
||||
@@ -50,7 +55,7 @@
|
||||
#toolbar-popup, .menu {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
border: none;
|
||||
background-color: $menu_bg_color;
|
||||
color: $menu_fg_color;
|
||||
|
||||
@@ -191,9 +196,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
.view, .list {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
@include exports("dialogs") {
|
||||
GtkMessageDialog, .message-dialog, .prompt {
|
||||
-GtkDialog-content-area-border: 0;
|
||||
-GtkDialog-action-area-border: 0;
|
||||
-GtkDialog-action-area-border: $spacing;
|
||||
-GtkDialog-button-spacing: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
@@ -27,10 +27,10 @@
|
||||
|
||||
&.header {
|
||||
border-width: 0;
|
||||
background-color: shade($base_color, 0.85);
|
||||
background-color: shade($base_color, .9);
|
||||
|
||||
&.frame {
|
||||
border-color: shade($base_color, 0.75);
|
||||
border-color: border_normal($base_color);
|
||||
|
||||
&.top { border-width: 1px 1px 0 1px; }
|
||||
|
||||
@@ -49,55 +49,45 @@
|
||||
}
|
||||
|
||||
tab {
|
||||
padding: $spacing ($spacing * 2);
|
||||
padding: ($spacing + 1px) ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
background-color: shade($base_color, .95);
|
||||
border-color: shade($base_color, .8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
border-color: shade($base_color, .85);
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&:hover { border-bottom-color: alpha($selected_bg_color, 0.3); }
|
||||
|
||||
&:active { border-bottom-color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-left-width: 2px;
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
||||
&:hover { border-left-color: alpha($selected_bg_color, 0.3); }
|
||||
|
||||
&:active { border-left-color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
|
||||
&.bottom {
|
||||
border-top-width: 2px;
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
|
||||
&:hover { border-top-color: alpha($selected_bg_color, 0.3); }
|
||||
|
||||
&:active { border-top-color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-right-width: 2px;
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:hover { border-right-color: alpha($selected_bg_color, 0.3); }
|
||||
|
||||
&:active { border-right-color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
GtkLabel { color: mix($text_color, $base_color, 0.3); }
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
@mixin overshoot($position, $type: normal, $color: $selected_bg_color) {
|
||||
$_small_gradient_length: 5%;
|
||||
$_big_gradient_length: 100%;
|
||||
|
||||
$_position: center top;
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
|
||||
@if $position == bottom {
|
||||
$_position: center bottom;
|
||||
$_linear_gradient_direction: to top;
|
||||
}
|
||||
|
||||
@else if $position == right {
|
||||
$_position: right center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
@else if $position == left {
|
||||
$_position: left center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $color;
|
||||
$_big_gradient_color: $color;
|
||||
|
||||
$_small_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.5,
|
||||
to(alpha($_small_gradient_color, .35)),
|
||||
to(alpha($_small_gradient_color, .25)));
|
||||
|
||||
$_big_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, 0.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: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@mixin undershoot($position) {
|
||||
$_undershoot_color_dark: alpha(black, .2);
|
||||
$_undershoot_color_light: alpha(white, .2);
|
||||
|
||||
$_gradient_dir: left;
|
||||
$_dash_bg_size: 10px 1px;
|
||||
$_gradient_repeat: repeat-x;
|
||||
$_bg_pos: center $position;
|
||||
|
||||
background-color: transparent; // shouldn't be needed, but better to be sure;
|
||||
|
||||
@if ($position == left) or ($position == right) {
|
||||
$_gradient_dir: top;
|
||||
$_dash_bg_size: 1px 10px;
|
||||
$_gradient_repeat: repeat-y;
|
||||
$_bg_pos: $position center;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
|
||||
$_undershoot_color_light 50%,
|
||||
$_undershoot_color_dark 50%);
|
||||
|
||||
padding-#{$position}: 1px;
|
||||
background-size: $_dash_bg_size;
|
||||
background-repeat: $_gradient_repeat;
|
||||
background-origin: content-box;
|
||||
background-position: $_bg_pos;
|
||||
}
|
||||
|
||||
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
||||
// This draws a box on top of the content, the size changes programmatically.
|
||||
.overshoot {
|
||||
&.top {
|
||||
@include overshoot(top);
|
||||
|
||||
&:backdrop { @include overshoot(top, backdrop); }
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
@include overshoot(bottom);
|
||||
|
||||
&:backdrop { @include overshoot(bottom, backdrop); }
|
||||
}
|
||||
|
||||
&.left {
|
||||
@include overshoot(left);
|
||||
|
||||
&:backdrop { @include overshoot(left, backdrop); }
|
||||
}
|
||||
|
||||
&.right {
|
||||
@include overshoot(right);
|
||||
|
||||
&:backdrop { @include overshoot(right, backdrop); }
|
||||
}
|
||||
}
|
||||
|
||||
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
||||
.undershoot {
|
||||
&.top { @include undershoot(top); }
|
||||
|
||||
&.bottom { @include undershoot(bottom); }
|
||||
|
||||
&.left { @include undershoot(left); }
|
||||
|
||||
&.right { @include undershoot(right); }
|
||||
}
|
||||
@@ -9,13 +9,13 @@
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, 0.6);
|
||||
|
||||
-GtkProgressBar-min-horizontal-bar-height: 12;
|
||||
-GtkProgressBar-min-vertical-bar-width: 12;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 6;
|
||||
-GtkProgressBar-min-vertical-bar-width: 6;
|
||||
|
||||
&.osd {
|
||||
-GtkProgressBar-xspacing: 0;
|
||||
-GtkProgressBar-yspacing: 0;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 3;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 4;
|
||||
}
|
||||
|
||||
&.trough {
|
||||
@@ -119,8 +119,8 @@
|
||||
|
||||
|
||||
&.slider {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
@include border($bg_color);
|
||||
@include linear-gradient($base_color);
|
||||
@include border($base_color);
|
||||
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
@@ -146,13 +146,13 @@
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
|
||||
margin: 7px 0;
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
margin: 8px 0;
|
||||
border: 0;
|
||||
border-radius: $roundness;
|
||||
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
|
||||
&.vertical { margin: 0 7px; }
|
||||
&.vertical { margin: 0 8px; }
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
|
||||
@@ -3,6 +3,18 @@
|
||||
************/
|
||||
|
||||
@include exports("scrollbar") {
|
||||
* {
|
||||
-GtkRange-slider-width: 8;
|
||||
-GtkRange-stepper-spacing: 0;
|
||||
-GtkRange-trough-border: $spacing;
|
||||
-GtkRange-trough-under-steppers: 1;
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
-GtkScrollbar-min-slider-length: 80;
|
||||
-GtkScrolledWindow-scrollbar-spacing: 0;
|
||||
-GtkScrolledWindow-scrollbars-within-bevel: 1;
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
border: none;
|
||||
padding: 0;
|
||||
@@ -18,24 +30,15 @@
|
||||
}
|
||||
|
||||
&.slider, &.slider.vertical {
|
||||
border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-radius: $roundness;
|
||||
background-color: mix($bg_color, $fg_color, 0.21);
|
||||
|
||||
&:hover {
|
||||
border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
|
||||
background-color: mix($bg_color, $fg_color, 0.31);
|
||||
}
|
||||
&:hover { background-color: $selected_bg_color; }
|
||||
|
||||
&:active {
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
&:active { background-color: shade($selected_bg_color, .9); }
|
||||
|
||||
&.fine-tune:prelight:active {
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
}
|
||||
&.fine-tune:prelight:active { border: 2px solid transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -38,8 +38,7 @@
|
||||
&:prelight {
|
||||
border: none;
|
||||
background-image: none;
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
background-color: shade($bg_color, 1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +56,7 @@
|
||||
&:dir(ltr) { border-width: 0 1px 0 0; }
|
||||
&:dir(rtl) { border-width: 0 0 0 1px; }
|
||||
|
||||
GtkLabel {
|
||||
.label {
|
||||
padding: $spacing ($spacing * 2);
|
||||
|
||||
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
|
||||
@@ -71,51 +70,38 @@
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
! Pane separator
|
||||
****************/
|
||||
/******
|
||||
! Paned
|
||||
*******/
|
||||
|
||||
@include exports("paneseparator") {
|
||||
.pane-separator {
|
||||
background-color: $bg_color;
|
||||
color: transparent;
|
||||
@include exports("paned") {
|
||||
GtkPaned {
|
||||
-GtkPaned-handle-size: 1;
|
||||
-gtk-icon-source: none;
|
||||
|
||||
&, &.horizontal {
|
||||
background-image: linear-gradient(to bottom,
|
||||
shade($bg_color, 0.8) 0%,
|
||||
shade($bg_color, 0.8) 20%,
|
||||
transparent 20%,
|
||||
transparent 45%,
|
||||
shade($bg_color, 0.8) 45%,
|
||||
shade($bg_color, 0.8) 55%,
|
||||
transparent 55%,
|
||||
transparent 80%,
|
||||
shade($bg_color, 0.8) 80%,
|
||||
shade($bg_color, 0.8)
|
||||
);
|
||||
|
||||
background-size: 4px 10px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
background-image: linear-gradient(to right,
|
||||
shade($bg_color, 0.8) 0%,
|
||||
shade($bg_color, 0.8) 20%,
|
||||
transparent 20%,
|
||||
transparent 45%,
|
||||
shade($bg_color, 0.8) 45%,
|
||||
shade($bg_color, 0.8) 55%,
|
||||
transparent 55%,
|
||||
transparent 80%,
|
||||
shade($bg_color, 0.8) 80%,
|
||||
shade($bg_color, 0.8)
|
||||
);
|
||||
|
||||
background-size: 10px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
margin: 0 $spacing;
|
||||
}
|
||||
|
||||
|
||||
GtkPaned:dir(rtl) {
|
||||
margin-right: 0;
|
||||
margin-left: $spacing;
|
||||
}
|
||||
|
||||
GtkPaned .pane-separator { background-color: shade($bg_color, 0.9); }
|
||||
|
||||
GtkPaned.wide {
|
||||
-GtkPaned-handle-size: 4;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
GtkPaned.wide .pane-separator {
|
||||
background-color: transparent;
|
||||
border-style: none solid;
|
||||
border-color: shade($bg_color, 0.9);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
GtkPaned.wide.vertical .pane-separator { border-style: solid none; }
|
||||
}
|
||||
|
||||
@@ -2,23 +2,25 @@
|
||||
! Check and Radio items
|
||||
************************/
|
||||
|
||||
$suffix: if($variant == "dark", "-dark", "");
|
||||
|
||||
@mixin toggle($type) {
|
||||
background-image: none;
|
||||
|
||||
-gtk-icon-source: url('../assets/#{$type}-unchecked.svg');
|
||||
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-unchecked-insensitive.svg'); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url('../assets/#{$type}-checked.svg');
|
||||
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-checked-insensitive.svg'); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url('../assets/#{$type}-mixed.svg');
|
||||
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-mixed-insensitive.svg'); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&.menuitem {
|
||||
@@ -27,19 +29,19 @@
|
||||
&:insensitive { -gtk-icon-source: none; }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url('../assets/menuitem-#{$type}-checked.svg');
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url('../assets/menuitem-#{$type}-checked-hover.svg'); }
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/menuitem-#{$type}-checked-insensitive.svg'); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url('../assets/menuitem-#{$type}-mixed.svg');
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url('../assets/menuitem-#{$type}-mixed-hover.svg'); }
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/menuitem-#{$type}-mixed-insensitive.svg'); }
|
||||
&:insensitive { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,7 +49,7 @@
|
||||
@include exports("checkradio") {
|
||||
* {
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 14;
|
||||
-GtkCheckMenuItem-indicator-size: 16;
|
||||
}
|
||||
|
||||
.radio { @include toggle("radio"); }
|
||||
@@ -55,9 +57,9 @@
|
||||
.check { @include toggle("checkbox"); }
|
||||
|
||||
GtkIconView.content-view.cell.check {
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
|
||||
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,29 +76,39 @@
|
||||
outline-offset: -4px;
|
||||
|
||||
&.slider {
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
@include linear-gradient(shade($bg_color, 1.2));
|
||||
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12);
|
||||
|
||||
&:insensitive {
|
||||
border-color: border_insensitive($bg_color);
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, .95), to top);
|
||||
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
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);
|
||||
|
||||
&:active {
|
||||
@include linear-gradient($selected_bg_color, to top);
|
||||
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, .9), to top);
|
||||
|
||||
border-color: border_insensitive($bg_color);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
||||
padding: $spacing;
|
||||
padding: $spacing * 2;
|
||||
color: $fg;
|
||||
|
||||
&:insensitive {
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: $spacing ($spacing - 1px) ($spacing - 1px) $spacing; }
|
||||
&.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
|
||||
}
|
||||
|
||||
GtkSeparatorToolItem, .separator, .separator:insensitive {
|
||||
@@ -55,6 +55,11 @@
|
||||
@include toolbar($bg_color, $fg_color);
|
||||
|
||||
border-style: none;
|
||||
|
||||
&.inline-toolbar {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
@@ -97,20 +102,17 @@
|
||||
&: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);
|
||||
icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
****************/
|
||||
|
||||
@include exports("view") {
|
||||
* { -GtkTextView-error-underline-color: $error_color; }
|
||||
|
||||
.view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
@@ -92,9 +94,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
|
||||
.overshoot { background-color: alpha($selected_bg_color, 0.3); }
|
||||
|
||||
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
|
||||
|
||||
/* this will get overridden by .view, needed by gedit line numbers */
|
||||
@@ -115,6 +114,7 @@
|
||||
|
||||
@include exports("treeview") {
|
||||
GtkTreeView {
|
||||
-GtkTreeView-expander-size: 8;
|
||||
-GtkTreeView-vertical-separator: 0;
|
||||
|
||||
outline-offset: -1px;
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
|
||||
@include exports("window") {
|
||||
%window {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22),
|
||||
0 0 0 1px $wm_border_focused;
|
||||
|
||||
&:backdrop {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px $wm_border_unfocused;
|
||||
}
|
||||
}
|
||||
@@ -16,8 +16,8 @@
|
||||
.window-frame {
|
||||
@extend %window;
|
||||
|
||||
border: none;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
border: 0;
|
||||
border-radius: $roundness + 1;
|
||||
|
||||
/* this is used for the resize cursor area */
|
||||
margin: $spacing * 3;
|
||||
|
||||
Reference in New Issue
Block a user