mirror of
https://github.com/encounter/numix-blue-gtk-theme.git
synced 2026-07-10 12:18:49 -07:00
Add support (beta) for gtk 3.20.
This commit is contained in:
Dustin Falgout
@@ -0,0 +1,113 @@
|
||||
@import "button";
|
||||
@import "toolbar";
|
||||
|
||||
/**************
|
||||
! Action-bar *
|
||||
***************/
|
||||
|
||||
@include exports("actionbar") {
|
||||
actionbar {
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
padding: $spacing;
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: border_normal($bg_color);
|
||||
color: $fg_color;
|
||||
|
||||
.button {
|
||||
&.text-button { padding: $spacing - 1px; }
|
||||
|
||||
&.image-button { padding: $spacing + 1px; }
|
||||
}
|
||||
|
||||
.title {
|
||||
font: bold;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: smaller;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
> revealer > box {
|
||||
padding: 6px;
|
||||
border-top: 1px solid $borders_color;
|
||||
|
||||
&:backdrop { border-color: $backdrop_borders_color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
! Search bars *
|
||||
****************/
|
||||
|
||||
@include exports("searchbar") {
|
||||
.search-bar {
|
||||
@include linear-gradient(shade($bg_color, .98));
|
||||
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: border_normal($bg_color);
|
||||
color: $fg_color;
|
||||
|
||||
.button.close-button { padding: $spacing; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************
|
||||
! Action buttons *
|
||||
*******************/
|
||||
|
||||
@include exports("actionbuttons") {
|
||||
$types: (
|
||||
suggested: $success_color,
|
||||
destructive: $error-color
|
||||
);
|
||||
|
||||
@each $type, $color in $types {
|
||||
.#{$type}-action.button {
|
||||
@include button($color, $selected_fg_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************
|
||||
* selection mode *
|
||||
******************/
|
||||
|
||||
@include exports("selectionmode") {
|
||||
.selection-mode {
|
||||
&.header-bar, &.toolbar {
|
||||
@include toolbar($selected_bg_color, $selected_fg_color);
|
||||
|
||||
.button {
|
||||
@include button($selected_bg_color, $selected_fg_color);
|
||||
|
||||
&.suggested-action { @extend .suggested-action.button; }
|
||||
}
|
||||
|
||||
.selection-menu.button {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: shade($selected_bg_color, $contrast);
|
||||
|
||||
&:hover { color: shade($selected_bg_color, ($contrast - .1)); }
|
||||
|
||||
&:active { color: shade($selected_bg_color, ($contrast - .05)); }
|
||||
}
|
||||
|
||||
.dim-label {
|
||||
&, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); }
|
||||
}
|
||||
}
|
||||
|
||||
&.toolbar { padding: $spacing; }
|
||||
}
|
||||
}
|
||||
Executable
+137
@@ -0,0 +1,137 @@
|
||||
/**************
|
||||
! GTK settings
|
||||
***************/
|
||||
|
||||
* {
|
||||
-GtkStatusbar-shadow-type: none;
|
||||
-GtkWindow-resize-grip-height: 0;
|
||||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
|
||||
outline-color: alpha($selected_bg_color, .5);
|
||||
outline-style: dashed;
|
||||
outline-width: 1px;
|
||||
outline-offset: -1px;
|
||||
-gtk-outline-radius: $roundness;
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Base states
|
||||
*************/
|
||||
|
||||
%selected {
|
||||
&, &:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
/* hyperlinks */
|
||||
-GtkIMHtml-hyperlink-color: $link_color;
|
||||
|
||||
&:selected { @extend %selected; }
|
||||
|
||||
&:disabled,
|
||||
&:disabled:disabled { color: mix($fg_color, $bg_color, .5); }
|
||||
|
||||
&:disabled, &:disabled { -gtk-icon-effect: dim; }
|
||||
|
||||
&:hover { -gtk-icon-effect: highlight; }
|
||||
|
||||
&:link, &:visited { color: $link_color; }
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
|
||||
&:backdrop {
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
||||
&.csd { background-color: $bg_color; }
|
||||
}
|
||||
|
||||
.gtkstyle-fallback {
|
||||
background-color: alpha($bg_color, .5);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: shade($bg_color, 1.1);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($bg_color, .9);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: shade(shade($bg_color, .95), 1.05);
|
||||
color: mix($fg_color, $bg_color, .5);
|
||||
}
|
||||
|
||||
&:selected { @extend %selected; }
|
||||
}
|
||||
|
||||
image, label, box, grid {
|
||||
&, &:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
label {
|
||||
&.separator {
|
||||
@extend .dim-label;
|
||||
|
||||
color: $fg_color;
|
||||
|
||||
&:backdrop { color: $backdrop_fg_color; }
|
||||
}
|
||||
|
||||
row:selected &,
|
||||
&:selected { @extend %nobg_selected_items; }
|
||||
|
||||
selection {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
selection { @extend %selected_items:disabled; }
|
||||
|
||||
&:backdrop { color: $backdrop_insensitive_color; }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_fg_color;
|
||||
|
||||
selection { @extend %selected_items:backdrop; }
|
||||
}
|
||||
}
|
||||
|
||||
.dim-label {
|
||||
opacity: 0.55;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
assistant {
|
||||
.sidebar {
|
||||
background-color: $base_color;
|
||||
border-top: 1px solid $borders_color;
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_base_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
}
|
||||
}
|
||||
|
||||
&.csd .sidebar { border-top-style: none; }
|
||||
|
||||
.sidebar label { padding: 6px 12px; }
|
||||
|
||||
.sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
|
||||
}
|
||||
Executable
+320
@@ -0,0 +1,320 @@
|
||||
/*********
|
||||
! Buttons
|
||||
**********/
|
||||
|
||||
@include exports("button_extends") {
|
||||
%button {
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
%linked_middle {
|
||||
border-radius: 0;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: 0; // needed when including %linked_middle:dir(rtl)
|
||||
border-right-style: none;
|
||||
border-left-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
%linked_button {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
border-right-style: none;
|
||||
border-left-style: none;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-style: none;
|
||||
border-right-style: solid;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&:dir(rtl) {
|
||||
border-left-style: solid;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child, &:first-child:only-child {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin linked_button($bg) {
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
@extend %linked_button;
|
||||
box-shadow: inset -1px 0 border_normal(rgba(0, 0, 0, .12 + $border_strength)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
&:focus, &:hover {
|
||||
box-shadow: inset -1px 0 border_focus(rgba(0, 0, 0, .12 + $border_strength)),
|
||||
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:active, &:active:hover,
|
||||
&:active:focus, &:active:hover:focus,
|
||||
&:checked, &:checked:hover,
|
||||
&:checked:focus, &:checked:hover:focus {
|
||||
box-shadow: inset -1px 0 border_active(rgba(0, 0, 0, .12 + $border_strength)),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
|
||||
&:disabled { box-shadow: inset -1px 0 shade($bg, .8); }
|
||||
|
||||
&:last-child, &:only-child { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); }
|
||||
|
||||
&:last-child:hover, &:only-child:hover { box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); }
|
||||
|
||||
&:disabled:last-child, &:disabled:only-child,
|
||||
&:active:disabled:last-child, &:active:disabled:only-child,
|
||||
&:checked:disabled:last-child, &:checked:disabled:only-child { box-shadow: none; }
|
||||
|
||||
&:active:last-child, &:active:last-child:focus, &:active:last-child:hover, &:active:last-child:hover:focus,
|
||||
&:checked:last-child, &:checked:last-child:focus, &:checked:last-child:hover, &:checked:last-child:hover:focus {
|
||||
box-shadow: inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
|
||||
&:active:only-child, &:active:only-child:focus, &:active:only-child:hover, &:active:only-child:hover:focus,
|
||||
&:checked:only-child, &:checked:only-child:focus, &:checked:only-child:hover, &:checked:only-child:hover:focus {
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg, $fg) {
|
||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$button_bg: if(hue($bg) == 0deg, shade($bg, 1.2), $bg);
|
||||
@extend %button;
|
||||
@include linear-gradient($button_bg);
|
||||
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
||||
color: $fg;
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||
|
||||
&.flat {
|
||||
border-color: alpha($button_bg, 0);
|
||||
background-color: alpha($button_bg, 0);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&, &.flat {
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, 1.2));
|
||||
@include border(rgba(0, 0, 0, .2 + $border_strength));
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
@include linear-gradient(shade($button_bg, .7), to top);
|
||||
color: $white;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, .65), to top);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus, &:hover { color: $fg; }
|
||||
|
||||
&:active:disabled, &:checked:disabled {
|
||||
@include linear-gradient(shade($button_bg, .9));
|
||||
color: $fg;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled:disabled {
|
||||
@if (lightness($button_bg) > 50) {
|
||||
@include linear-gradient(shade($button_bg, .95));
|
||||
} @else {
|
||||
@include linear-gradient(alpha($button_bg, .3));
|
||||
}
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: shade($bg, ($contrast + .1));
|
||||
|
||||
&:disabled { color: shade($button_bg, .85); }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("button") {
|
||||
|
||||
%close_button {
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus, &:hover {
|
||||
border: 1px solid alpha($black, .3);
|
||||
background-color: alpha($white, .2);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:checked, &:active:hover, &:checked:hover {
|
||||
border: 1px solid alpha($black, .3);
|
||||
background-color: alpha($black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 22px;
|
||||
min-width: 24px;
|
||||
@include button(shade($bg_color, 1.2), $fg_color);
|
||||
|
||||
&.link, .link & { @include linked_button(shade($bg_color, 1.2)); }
|
||||
|
||||
spinbutton & {
|
||||
color: mix($text_color, $base_color, .4);
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: inset 1px 0 shade($base_color, .9);
|
||||
|
||||
&:disabled {
|
||||
color: mix($text_color, $base_color, .7);
|
||||
box-shadow: inset 1px 0 shade($base_color, .85);
|
||||
}
|
||||
|
||||
&:active, &:checked, &:hover { color: $text_color; }
|
||||
|
||||
&:first-child {
|
||||
border-radius: $roundness 0 0 $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:last-child { border-radius: 0 $roundness $roundness 0; }
|
||||
|
||||
&:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
|
||||
}
|
||||
|
||||
spinbutton.vertical & {
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
border-radius: $roundness;
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
color: $fg_color;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
background-color: shade($bg_color, 1.1);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
border-color: shade($bg_color, .8);
|
||||
background-color: shade($bg_color, .95);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active:hover, &:checked:hover {
|
||||
border-color: shade($bg_color, .7);
|
||||
}
|
||||
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
|
||||
|
||||
&:disabled {
|
||||
border-color: shade($bg_color, .85);
|
||||
background-color: shade($bg_color, .9);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-top-width: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
spinbutton.vertical entry {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/******************
|
||||
! ComboBoxes *
|
||||
*******************/
|
||||
|
||||
@include exports("combobox") {
|
||||
combobox {
|
||||
box button, box entry {
|
||||
@extend %linked_button;
|
||||
padding: ($spacing - 2px) ($spacing + 1px);
|
||||
}
|
||||
|
||||
box > button {
|
||||
// the combo is a composite widget so the way we do button linked doesn't
|
||||
// work, special case needed. See
|
||||
// https://bugzilla.gnome.org/show_bug.cgi?id=733979
|
||||
&:dir(ltr) { @extend %linked_middle; }
|
||||
// specificity bump
|
||||
&:dir(rtl) { @extend %linked_middle:dir(rtl); }
|
||||
}
|
||||
|
||||
&:first-child > button { @extend %linked_button:first-child; }
|
||||
|
||||
&:last-child > button { @extend %linked_button:last-child; }
|
||||
|
||||
&:only-child > button { @extend %linked_button:only-child; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**********
|
||||
! Calendar
|
||||
***********/
|
||||
|
||||
@include exports("calendar") {
|
||||
calendar {
|
||||
padding: $spacing;
|
||||
outline-offset: -1px;
|
||||
|
||||
&:indeterminate { color: mix($fg_color, $bg_color, .5); }
|
||||
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:focus, &:hover, &:disabled {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight { color: $selected_bg_color; }
|
||||
}
|
||||
|
||||
/* gnome-calendar */
|
||||
.calendar-view {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
/***************
|
||||
! Color chooser
|
||||
****************/
|
||||
|
||||
@include exports("colorchooser") {
|
||||
colorswatch {
|
||||
&, &:selected {
|
||||
border: 1px solid alpha($black, .1);
|
||||
border-radius: $roundness - 1px;
|
||||
background-color: transparent;
|
||||
background-clip: border-box;
|
||||
|
||||
&:hover { border-color: alpha($black, .3); }
|
||||
}
|
||||
|
||||
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
|
||||
|
||||
&.left, &:first-child {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
|
||||
&.right, &:last-child {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&:only-child { border-radius: $roundness; }
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
coloreditor & {
|
||||
border-radius: $roundness;
|
||||
|
||||
&.color-dark:hover, &.color-light:hover {
|
||||
background-image: none;
|
||||
border-color: alpha($black, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
background-clip: padding-box;
|
||||
border-color: alpha($black, .1);
|
||||
background-color: shade($bg_color, .95);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: alpha($black, .3);
|
||||
background-color: shade($bg_color, .9);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.color-active-badge {
|
||||
&, &:selected {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.color-light {
|
||||
&, &:hover {
|
||||
border-color: alpha($black, .3);
|
||||
color: alpha($black, .3);
|
||||
}
|
||||
}
|
||||
|
||||
&.color-dark {
|
||||
&, &:hover {
|
||||
border-color: alpha($white, .3);
|
||||
color: alpha($white, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorButton.button { padding: $spacing; }
|
||||
}
|
||||
|
||||
|
||||
/***********************
|
||||
! Font and file choosers
|
||||
************************/
|
||||
|
||||
@include exports("miscchoosers") {
|
||||
GtkFontButton, filechooserbutton {
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
}
|
||||
|
||||
label:last-child { color: alpha(currentColor, .7); }
|
||||
|
||||
image:last-child { color: alpha(currentColor, .7); }
|
||||
}
|
||||
|
||||
filechooser {
|
||||
.pane-separator {
|
||||
&, &:hover {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
background-color: $bg_color;
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
}
|
||||
}
|
||||
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, .7);
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+84
@@ -0,0 +1,84 @@
|
||||
/*********
|
||||
! Entry *
|
||||
**********/
|
||||
|
||||
%linked_entry {
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
|
||||
&:first-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-right-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
}
|
||||
}
|
||||
|
||||
%entry {
|
||||
padding: ($spacing - 1px) $spacing;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: border 150ms ease;
|
||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
||||
inset -1px 0 alpha($dark_shadow, .06);
|
||||
|
||||
&:focus, &:hover, &:active { transition: none; }
|
||||
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:disabled { box-shadow: none; }
|
||||
|
||||
& progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-width: 0;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&.image.left { padding-right: $spacing; }
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg) {
|
||||
@extend %entry;
|
||||
@include linear-gradient($bg, to top);
|
||||
@include border($bg);
|
||||
|
||||
color: $fg;
|
||||
|
||||
&:focus, &:active { border-color: $selected_bg_color; }
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($bg, .9), to top);
|
||||
|
||||
color: mix($bg, $fg, .5);
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("entry") {
|
||||
entry {
|
||||
@include entry($base_color, $text_color);
|
||||
|
||||
&.linked, .linked & { @extend %linked_entry; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/******************
|
||||
! Grid and flowbox
|
||||
*******************/
|
||||
|
||||
@include exports("grid") {
|
||||
list {
|
||||
background-color: shade($bg_color, .97);
|
||||
color: $fg_color;
|
||||
|
||||
row {
|
||||
&, &.button {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: $spacing;
|
||||
background-image: none;
|
||||
background-color: alpha($bg_color, 0);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
background-color: shade($bg_color, 1.02);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
&, &:hover, &:focus {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-child {
|
||||
&, flowBox & {
|
||||
padding: $spacing;
|
||||
border-radius: $roundness;
|
||||
|
||||
&:selected {
|
||||
@extend %selected;
|
||||
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*********
|
||||
! Infobar
|
||||
**********/
|
||||
|
||||
@include exports("infobar") {
|
||||
infobar {
|
||||
border: 0;
|
||||
|
||||
$types: (
|
||||
info: ($info_fg_color, $info_bg_color),
|
||||
warning: ($warning_fg_color, $warning_bg_color),
|
||||
question: ($question_fg_color, $question_bg_color),
|
||||
error: ($error_fg_color, $error_bg_color),
|
||||
);
|
||||
|
||||
|
||||
@each $type, $colors in $types {
|
||||
$fg_color: nth($colors, 1);
|
||||
$bg_color: nth($colors, 2);
|
||||
|
||||
&.#{$type} {
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
border: 1px solid shade($bg_color, .8);
|
||||
color: $fg_color;
|
||||
|
||||
button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.close { @extend %close_button; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+273
@@ -0,0 +1,273 @@
|
||||
@import "entry";
|
||||
|
||||
|
||||
/*********
|
||||
! Menubar
|
||||
**********/
|
||||
|
||||
@include exports("menubar") {
|
||||
.menubar, menubar {
|
||||
-GtkWidget-window-dragging: true;
|
||||
|
||||
border: 0;
|
||||
background-color: $menubar_bg_color;
|
||||
background-image: none;
|
||||
color: $menubar_fg_color;
|
||||
|
||||
|
||||
&.menuitem, .menuitem, menuitem {
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: mix($menu_bg_color, $menu_fg_color, .21);
|
||||
background-color: mix($menu_bg_color, $menu_fg_color, .21);
|
||||
background-image: none;
|
||||
color: shade($menu_fg_color, 1.08);
|
||||
}
|
||||
|
||||
*:hover { color: shade($menu_fg_color, 1.08); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Menu
|
||||
*******/
|
||||
|
||||
@include exports("menu") {
|
||||
* {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
combobox {
|
||||
&.menu, .menu, menu {
|
||||
background-color: $menu_bg_color;
|
||||
margin: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
#toolbar-popup, menu {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background-color: $menu_bg_color;
|
||||
color: $menu_fg_color;
|
||||
|
||||
&:checked { background-color: $selected_bg_color; }
|
||||
|
||||
button {
|
||||
&, &:hover, &:active, &:active *:disabled, &:disabled {
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
menuitem window decoration {
|
||||
box-shadow: 0 2px 3px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.context-menu { font: initial; }
|
||||
|
||||
.menuitem, menuitem {
|
||||
&, menu & {
|
||||
margin: $spacing;
|
||||
padding: $spacing 8px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
-GtkMenuItem-arrow-scaling: .5;
|
||||
|
||||
menu &:last-child {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
menu &:first-child {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
border: 0;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
*:active, *:hover { color: $selected_fg_color; }
|
||||
|
||||
&:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||
}
|
||||
|
||||
&.check, &.radio {
|
||||
&, &:focus, &:hover, &:disabled { background-image: none; }
|
||||
|
||||
&, &:focus, &:hover, &:active, &:disabled {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator {
|
||||
padding: 0;
|
||||
|
||||
border-style: none;
|
||||
color: shade($menu_bg_color, ($contrast + .1));
|
||||
}
|
||||
|
||||
&.button, &.button.flat {
|
||||
&, &:focus, &:active, &:disabled, &:active:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&:hover, &:focus:hover, &:active:hover, &:selected {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
calendar {
|
||||
&:indeterminate { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||
|
||||
.button {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.accelerator {
|
||||
color: alpha($menu_fg_color, .6);
|
||||
|
||||
&:hover { color: alpha($selected_fg_color, .8); }
|
||||
|
||||
&:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
||||
}
|
||||
|
||||
entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||
}
|
||||
}
|
||||
|
||||
%undecorated_button {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
! Popover
|
||||
**********/
|
||||
|
||||
@include exports("popover") {
|
||||
popover {
|
||||
@include border($menu_bg_color);
|
||||
margin: 10px;
|
||||
padding: $spacing;
|
||||
border-radius: $roundness;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-clip: border-box;
|
||||
background-color: $menu_bg_color;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
box-shadow: 0 3px 6px alpha($black, .16);
|
||||
|
||||
&.background {
|
||||
background-image: none;
|
||||
background-color: $menu_bg_color;
|
||||
color: $menu_fg_color;
|
||||
}
|
||||
|
||||
&:backdrop { box-shadow: none; }
|
||||
|
||||
.osd & {
|
||||
box-shadow: 0 2px 7px 3px alpha($black, .5);
|
||||
|
||||
> toolbar button {
|
||||
border-radius: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
view, .view, list {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
}
|
||||
|
||||
.list-row, list row {
|
||||
&, & .button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menu_fg_color;
|
||||
|
||||
&:focus, &:hover, &:active {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
frame {
|
||||
border-color: border_normal($menu_bg_color);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||
|
||||
button { @include button($menu_bg_color, $menu_fg_color); }
|
||||
|
||||
> list, > view, > toolbar { background-color: transparent; }
|
||||
|
||||
separator {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: alpha($menu_bg_color, .5);
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
modelbutton {
|
||||
padding: $spacing ($spacing + 2px);
|
||||
border: none;
|
||||
transition: 150ms ease;
|
||||
outline-color: transparent;
|
||||
|
||||
&, &:backdrop, &.flat, &.flat:backdrop {
|
||||
//@extend %undecorated_button;
|
||||
|
||||
&:hover { background-color: $selected_bg_color; color: $selected_fg_color }
|
||||
&:active, &:selected { &, arrow { @extend %selected_items; } }
|
||||
&:checked { color: $fg_color; }
|
||||
|
||||
// FIXME: temporary workaround
|
||||
check:last-child,
|
||||
radio:last-child { margin-left: 8px; }
|
||||
|
||||
check:first-child,
|
||||
radio:first-child { margin-right: 8px; }
|
||||
|
||||
&.flat arrow {
|
||||
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
|
||||
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
/***************
|
||||
! Dimmed label *
|
||||
****************/
|
||||
|
||||
@include exports("dimlabel") {
|
||||
.dim-label {
|
||||
opacity: .5;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Tooltip *
|
||||
************/
|
||||
|
||||
@include exports("tooltip") {
|
||||
.tooltip {
|
||||
&.background {
|
||||
@include linear-gradient($tooltip_bg_color);
|
||||
|
||||
border: 0;
|
||||
border-radius: $roundness;
|
||||
color: $tooltip_fg_color;
|
||||
}
|
||||
|
||||
* {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Dialogs *
|
||||
************/
|
||||
|
||||
@include exports("dialogs") {
|
||||
messagedialog, .message-dialog, .prompt {
|
||||
-GtkDialog-content-area-border: 0;
|
||||
-GtkDialog-action-area-border: $spacing;
|
||||
-GtkDialog-button-spacing: 0;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
! App notifications *
|
||||
**********************/
|
||||
|
||||
@include exports("notifications") {
|
||||
.app-notification {
|
||||
&, &.frame {
|
||||
border-style: solid;
|
||||
border-color: border_normal($osd_bg);
|
||||
border-width: 0 1px 1px;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
padding: $spacing * 2;
|
||||
background-color: $osd_bg;
|
||||
background-image: none;
|
||||
color: $osd_fg;
|
||||
|
||||
.button { @include button($osd_bg, $osd_fg); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Expanders *
|
||||
**************/
|
||||
|
||||
@include exports("expander") {
|
||||
expander {
|
||||
padding: $spacing;
|
||||
outline-offset: 1px;
|
||||
min-width: 8px;
|
||||
}
|
||||
|
||||
.expander {
|
||||
color: alpha(currentColor, .7);
|
||||
border: alpha(currentColor, .7);
|
||||
|
||||
&:hover {
|
||||
color: alpha(currentColor, .8);
|
||||
border-color: alpha(currentColor, .8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: alpha(currentColor, .9);
|
||||
border-color: alpha(currentColor, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! Symbolic images *
|
||||
********************/
|
||||
|
||||
@include exports("symbolicimage") {
|
||||
.image {
|
||||
color: alpha(currentColor, .5);
|
||||
|
||||
&:hover { color: alpha(currentColor, .9); }
|
||||
|
||||
&:selected, &:selected:hover { color: $selected_fg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/****************
|
||||
! Floating bar *
|
||||
*****************/
|
||||
|
||||
@include exports("floatingbar") {
|
||||
.floating-bar {
|
||||
@include linear-gradient($bg_color);
|
||||
|
||||
border: 1px solid border_normal($bg_color);
|
||||
border-radius: $roundness;
|
||||
color: $fg_color;
|
||||
|
||||
&.top {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
-GtkButton-inner-border: 0;
|
||||
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************
|
||||
! Touch text selections *
|
||||
**************************/
|
||||
|
||||
@include exports("touchbubble") {
|
||||
GtkBubbleWindow {
|
||||
border-radius: $roundness;
|
||||
background-clip: border-box;
|
||||
|
||||
&.osd.background { background-color: $osd_bg; }
|
||||
|
||||
.toolbar { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
/***************
|
||||
! Font-viewer *
|
||||
****************/
|
||||
|
||||
@include exports("fontviewer") {
|
||||
SushiFontWidget {
|
||||
padding: $spacing ($spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Gucharmap *
|
||||
**************/
|
||||
|
||||
@include exports("charmap") {
|
||||
GucharmapChartable {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
|
||||
&:focus, &:hover, &:active, &:selected { @extend %selected; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Evolution *
|
||||
**************/
|
||||
|
||||
@include exports("evolution") {
|
||||
EPreviewPane .entry {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! Gnome Bluetooth *
|
||||
********************/
|
||||
|
||||
@include exports("gnome-bluetooth") {
|
||||
entry.entry.pin-entry {
|
||||
font: regular 50;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
label.pin-label { font: regular 50; }
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! Selected Items *
|
||||
********************/
|
||||
|
||||
@include exports("selected_items") {
|
||||
%selected_items {
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
@at-root %nobg_selected_items, & {
|
||||
color: $selected_fg_color;
|
||||
|
||||
@if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
|
||||
|
||||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_selected_fg_color;
|
||||
|
||||
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/**********
|
||||
! Notebook
|
||||
***********/
|
||||
|
||||
@include exports("notebook") {
|
||||
notebook {
|
||||
padding: 0;
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: border_normal($base_color);
|
||||
border-radius: 0;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
background-clip: border-box;
|
||||
color: $text_color;
|
||||
|
||||
&.frame { border-width: 1px; }
|
||||
|
||||
> header {
|
||||
margin: 0;
|
||||
border-width: 0;
|
||||
background-color: shade($base_color, .9);
|
||||
|
||||
&.frame {
|
||||
border-color: border_normal($base_color);
|
||||
|
||||
&.top { border-width: 1px 1px 0; }
|
||||
|
||||
&.right { border-width: 1px 1px 1px 0; }
|
||||
|
||||
&.bottom { border-width: 0 1px 1px; }
|
||||
|
||||
&.left { border-width: 1px 0 1px 1px; }
|
||||
}
|
||||
|
||||
tabs arrow {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
viewport {
|
||||
border-width: 0;
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
|
||||
tab {
|
||||
padding: ($spacing + 1px) ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
background-color: shade($base_color, .95);
|
||||
border-color: shade($base_color, .8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
border-color: shade($base_color, .85);
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-bottom-width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-left-width: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
&.bottom {
|
||||
border-top-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
border-right-width: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
label { color: mix($text_color, $base_color, .3); }
|
||||
|
||||
/* close button styling */
|
||||
button { @extend %close_button; }
|
||||
}
|
||||
|
||||
.prelight-page {
|
||||
&, label { color: mix($text_color, $base_color, .15); }
|
||||
}
|
||||
|
||||
.active-page {
|
||||
&, label { color: $text_color; }
|
||||
}
|
||||
|
||||
.reorderable-page {
|
||||
&:hover {
|
||||
background-color: shade($base_color, .85);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
/* using box shadows instead of borders due to slanted edges */
|
||||
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
|
||||
inset 1px 0 shade($base_color, .7), inset -1px 0 shade($base_color, .7);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($base_color, .9);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: inset 0 3px alpha($black, .03), inset 0 2px alpha($black, .03), inset 0 1px alpha($black, .03),
|
||||
inset 1px 0 shade($base_color, .75), inset -1px 0 shade($base_color, .75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*******
|
||||
! OSD *
|
||||
********/
|
||||
|
||||
@include exports("osd") {
|
||||
overlay.osd { background-color: transparent; }
|
||||
|
||||
osd {
|
||||
&.background {
|
||||
background-color: alpha($osd_bg, .8);
|
||||
color: $osd_fg;
|
||||
}
|
||||
|
||||
frame {
|
||||
background-clip: border-box;
|
||||
background-origin: border-box;
|
||||
}
|
||||
|
||||
button { @include button($osd_bg, $osd_fg); }
|
||||
|
||||
|
||||
toolbar {
|
||||
-GtkToolbar-button-relief: normal;
|
||||
|
||||
padding: $spacing;
|
||||
border: 1px solid border_normal($osd_bg);
|
||||
border-radius: $roundness;
|
||||
background-color: $osd_bg;
|
||||
background-image: none;
|
||||
color: $osd_fg;
|
||||
|
||||
separator { color: shade($osd_bg, ($contrast + .1)); }
|
||||
}
|
||||
|
||||
/* used by gnome-settings-daemon's media-keys OSD */
|
||||
trough { background-color: shade($osd_bg, .8); }
|
||||
|
||||
progressbar { background-color: $osd_fg; }
|
||||
|
||||
scale {
|
||||
slider {
|
||||
@include linear-gradient(shade($osd_bg, 1.08));
|
||||
@include border($osd_bg);
|
||||
|
||||
&:disabled { @include linear-gradient(shade($osd_bg, .9)); }
|
||||
}
|
||||
|
||||
trough {
|
||||
border-color: shade($osd_bg, .8);
|
||||
background-color: shade($osd_bg, 1.08);
|
||||
background-image: none;
|
||||
|
||||
&.highlight {
|
||||
border-color: $selected_bg_color;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled, &.highlight:disabled {
|
||||
border-color: shade($osd_bg, .85);
|
||||
background-color: shade($osd_bg, .9);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.view, .view, view { background-color: $osd_bg; }
|
||||
|
||||
scrollbar {
|
||||
trough { background-color: $osd_bg; }
|
||||
|
||||
slider {
|
||||
border: 1px solid mix(shade($osd_bg, .87), $osd_fg, .21);
|
||||
border-radius: 0;
|
||||
background-color: mix($osd_bg, $osd_fg, .21);
|
||||
|
||||
&:hover {
|
||||
border-color: mix(shade($osd_bg, .87), $osd_fg, .31);
|
||||
background-color: mix($osd_bg, $osd_fg, .31);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade($selected_bg_color, .9);
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iconview.cell {
|
||||
&:selected, &:selected:focus {
|
||||
background-color: transparent;
|
||||
border: 3px solid mix(shade($osd_bg, .87), $osd_fg, .21);
|
||||
border-radius: $roundness;
|
||||
outline-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* used by Documents */
|
||||
.page-thumbnail {
|
||||
border: 1px solid shade($osd_bg, .9);
|
||||
/* when there's no pixbuf yet */
|
||||
background-color: $osd_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.osd progressBar, progressBar.osd {
|
||||
-GtkProgressBar-xspacing: 0;
|
||||
-GtkProgressBar-yspacing: 2px;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 2px;
|
||||
|
||||
padding: 0;
|
||||
|
||||
&.trough {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.progressbar {
|
||||
border-style: none;
|
||||
border-radius: 0;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
@mixin overshoot($position, $type: normal, $color: $selected_bg_color) {
|
||||
$_small_gradient_length: 5%;
|
||||
$_big_gradient_length: 100%;
|
||||
|
||||
$_position: center top;
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
|
||||
@if $position == bottom {
|
||||
$_position: center bottom;
|
||||
$_linear_gradient_direction: to top;
|
||||
} @else if $position == right {
|
||||
$_position: right center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
} @else if $position == left {
|
||||
$_position: left center;
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $color;
|
||||
$_big_gradient_color: $color;
|
||||
|
||||
$_small_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, .5,
|
||||
to(alpha($_small_gradient_color, .35)),
|
||||
to(alpha($_small_gradient_color, .25)));
|
||||
|
||||
$_big_gradient: -gtk-gradient(radial,
|
||||
$_position, 0,
|
||||
$_position, .6,
|
||||
from(alpha($_big_gradient_color, .2)),
|
||||
to(alpha($_big_gradient_color, 0)));
|
||||
|
||||
@if $type == normal {
|
||||
background-image: $_small_gradient, $_big_gradient;
|
||||
background-size: $_small_gradient_size, $_big_gradient_size;
|
||||
} @else if $type == backdrop {
|
||||
background-image: $_small_gradient;
|
||||
background-size: $_small_gradient_size;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $_position;
|
||||
|
||||
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@mixin undershoot($position) {
|
||||
$_undershoot_color_dark: alpha($black, .2);
|
||||
$_undershoot_color_light: alpha($white, .2);
|
||||
|
||||
$_gradient_dir: left;
|
||||
$_dash_bg_size: 10px 1px;
|
||||
$_gradient_repeat: repeat-x;
|
||||
$_bg_pos: center $position;
|
||||
|
||||
background-color: transparent; // shouldn't be needed, but better to be sure;
|
||||
|
||||
@if ($position == left) or ($position == right) {
|
||||
$_gradient_dir: top;
|
||||
$_dash_bg_size: 1px 10px;
|
||||
$_gradient_repeat: repeat-y;
|
||||
$_bg_pos: $position center;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
|
||||
$_undershoot_color_light 50%,
|
||||
$_undershoot_color_dark 50%);
|
||||
|
||||
padding-#{$position}: 1px;
|
||||
background-size: $_dash_bg_size;
|
||||
background-repeat: $_gradient_repeat;
|
||||
background-origin: content-box;
|
||||
background-position: $_bg_pos;
|
||||
}
|
||||
|
||||
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
|
||||
// This draws a box on top of the content, the size changes programmatically.
|
||||
.overshoot {
|
||||
&.top {
|
||||
@include overshoot(top);
|
||||
|
||||
&:backdrop { @include overshoot(top, backdrop); }
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
@include overshoot(bottom);
|
||||
|
||||
&:backdrop { @include overshoot(bottom, backdrop); }
|
||||
}
|
||||
|
||||
&.left {
|
||||
@include overshoot(left);
|
||||
|
||||
&:backdrop { @include overshoot(left, backdrop); }
|
||||
}
|
||||
|
||||
&.right {
|
||||
@include overshoot(right);
|
||||
|
||||
&:backdrop { @include overshoot(right, backdrop); }
|
||||
}
|
||||
}
|
||||
|
||||
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
||||
.undershoot {
|
||||
&.top { @include undershoot(top); }
|
||||
|
||||
&.bottom { @include undershoot(bottom); }
|
||||
|
||||
&.left { @include undershoot(left); }
|
||||
|
||||
&.right { @include undershoot(right); }
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
/*****************
|
||||
! Progress bars *
|
||||
******************/
|
||||
|
||||
@include exports("progressbar") {
|
||||
progressbar {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, .6);
|
||||
min-width: 6px;
|
||||
min-height: 6px;
|
||||
|
||||
&.osd {
|
||||
min-height: 4px;
|
||||
}
|
||||
|
||||
trough {
|
||||
border: 1px solid alpha(border_normal($bg_color), .5);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
progressbar progress {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&.left {
|
||||
border-top-left-radius: $roundness;
|
||||
border-bottom-left-radius: $roundness;
|
||||
}
|
||||
|
||||
&.right {
|
||||
border-top-right-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.left.right { box-shadow: none; }
|
||||
|
||||
&.vertical {
|
||||
@include linear-gradient($selected_bg_color, to right);
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $roundness;
|
||||
border-bottom-right-radius: $roundness;
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $roundness;
|
||||
border-top-right-radius: $roundness;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
levelbar {
|
||||
min-width: 34px;
|
||||
min-height: 3px;
|
||||
|
||||
&.vertical {
|
||||
min-width: 3px;
|
||||
min-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
levelbar {
|
||||
trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||
|
||||
border: 1px solid alpha(border_normal($bg_color), .5);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
&.discrete {
|
||||
&.horizontal { margin-right: 1px; }
|
||||
|
||||
&.vertical { margin-bottom: 1px; }
|
||||
}
|
||||
|
||||
block.filled {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
||||
// :nth-child working on discrete indicators
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
|
||||
&.level-high {
|
||||
background-color: $success_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.level-low {
|
||||
background-color: $warning_color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.empty-fill-block {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scale {
|
||||
$_marks_length: 3px;
|
||||
$_marks_distance: 1px;
|
||||
$button_bg: if(hue($bg_color) == 0deg, shade($bg_color, 1.2), $bg_color);
|
||||
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$button_transition: all 200ms $ease-out-quad;
|
||||
|
||||
min-height: 10px;
|
||||
min-width: 10px;
|
||||
|
||||
&.horizontal {
|
||||
padding: 6px 0;
|
||||
|
||||
trough { padding: 0 7px; }
|
||||
highlight, fill { margin: 0 -7px; }
|
||||
}
|
||||
&.vertical {
|
||||
padding: 0 6px;
|
||||
|
||||
trough { padding: 7px 0; }
|
||||
highlight, fill { margin: -7px 0; }
|
||||
}
|
||||
|
||||
// The slider is inside the trough, negative margin to make it bigger
|
||||
slider {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
margin: -6px;
|
||||
}
|
||||
|
||||
// Click-and-hold the slider to activate
|
||||
&.fine-tune {
|
||||
&.horizontal {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
min-height: 15px;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
min-width: 15px;
|
||||
}
|
||||
|
||||
// Make the trough grow in fine-tune mode
|
||||
slider { margin: -4px; }
|
||||
|
||||
fill,
|
||||
highlight,
|
||||
trough {
|
||||
border-radius: 5px;
|
||||
-gtk-outline-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Trough
|
||||
trough {
|
||||
$_scale_trough_bg: if($variant == 'light', shade($toolbar_bg_color, .8), darken($bg_color, 5%));
|
||||
|
||||
outline-offset: 2px;
|
||||
-gtk-outline-radius: 4.5px;
|
||||
|
||||
border-radius: 2.5px;
|
||||
background-color: $_scale_trough_bg;
|
||||
|
||||
&:disabled { background-color: transparentize($_scale_trough_bg, 0.45); }
|
||||
|
||||
//OSD troughs
|
||||
.osd & {
|
||||
background-color: lighten($osd_bg, 7%);
|
||||
|
||||
highlight {
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
// Troughs in selected list-rows and infobars
|
||||
row:selected &,
|
||||
infobar & {
|
||||
background-color: transparentize(black, 0.8);
|
||||
|
||||
highlight {
|
||||
background-color: $selected_fg_color;
|
||||
|
||||
&:disabled { background-color: mix($selected_fg_color, $selected_bg_color, 55%); }
|
||||
}
|
||||
|
||||
&:disabled { background-color: transparentize(black, 0.9); }
|
||||
}
|
||||
}
|
||||
|
||||
// The colored part of trough
|
||||
highlight {
|
||||
border-radius: 2.5px;
|
||||
background-color: $selected_bg_color;
|
||||
|
||||
&:disabled { background-color: transparentize($selected_bg_color, 0.45); }
|
||||
}
|
||||
|
||||
// this is another differently styled part of the trough, the most relevant use case is for example
|
||||
// in media player to indicate how much video stream as been cached
|
||||
fill {
|
||||
border-radius: 2.5px;
|
||||
background-color: transparentize($selected_bg_color, 0.5);
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
slider {
|
||||
$_slider_border: if($variant=='light', transparentize(darken($button_border,25%), 0.5), darken($button_border,2%));
|
||||
|
||||
background-color: $button_bg;
|
||||
border: 1px solid $_slider_border;
|
||||
border-radius: 100%;
|
||||
|
||||
transition: $button_transition;
|
||||
transition-property: background, border;
|
||||
|
||||
&:hover { background-color: lighten($button_bg, 5%); }
|
||||
|
||||
&:active {
|
||||
background-clip: border-box;
|
||||
background-color: $selected_bg_color;
|
||||
border-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: mix($fg_color, $bg_color, 55%);
|
||||
border-color: transparentize($_slider_border, 0.2);
|
||||
}
|
||||
|
||||
// Selected list-row and infobar sliders
|
||||
row:selected &,
|
||||
infobar & {
|
||||
background-clip: border-box;
|
||||
background-color: $selected_fg_color;
|
||||
border-color: $selected_fg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 85%);
|
||||
}
|
||||
&:active {
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
}
|
||||
&:disabled{
|
||||
background-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
border-color: mix($selected_fg_color, $selected_bg_color, 55%);
|
||||
}
|
||||
}
|
||||
|
||||
// OSD sliders
|
||||
.osd & {
|
||||
background-clip: border-box;
|
||||
background-color: $selected_bg_color;
|
||||
border-color: $selected_bg_color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($selected_bg_color, 10%);
|
||||
border-color: lighten($selected_bg_color, 10%)
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($selected_bg_color, 10%);
|
||||
border-color: darken($selected_bg_color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
value { color: alpha(currentColor, 0.4); }
|
||||
|
||||
marks {
|
||||
color: alpha(currentColor, 0.4);
|
||||
|
||||
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
||||
(bottom, bottom, top),
|
||||
(top, left, right),
|
||||
(bottom, right, left) {
|
||||
&.#{$marks_class} {
|
||||
margin-#{$marks_margin}: $_marks_distance;
|
||||
margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fine-tune marks {
|
||||
@each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
|
||||
(bottom, bottom, top),
|
||||
(top, left, right),
|
||||
(bottom, right, left) {
|
||||
&.#{$marks_class} {
|
||||
margin-#{$marks_margin}: ($_marks_distance - 1px);
|
||||
margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.horizontal {
|
||||
indicator {
|
||||
min-height: $_marks_length;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
&.fine-tune indicator { min-height: ($_marks_length - 1px); }
|
||||
}
|
||||
&.vertical {
|
||||
indicator {
|
||||
min-height: 1px;
|
||||
min-width: $_marks_length;
|
||||
}
|
||||
|
||||
&.fine-tune indicator { min-width: ($_marks_length - 1px); }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
/***********
|
||||
! Scrollbar
|
||||
************/
|
||||
|
||||
@include exports("scrollbar") {
|
||||
scrollbar {
|
||||
$_slider_min_length: 20px;
|
||||
|
||||
// disable steppers
|
||||
@at-root * {
|
||||
-GtkScrollbar-has-backward-stepper: false;
|
||||
-GtkScrollbar-has-forward-stepper: false;
|
||||
}
|
||||
|
||||
background-color: $scrollbar_bg_color;
|
||||
transition: 300ms ease-out;
|
||||
|
||||
// scrollbar border
|
||||
&.top { border-bottom: 1px solid $borders_color; }
|
||||
&.bottom { border-top: 1px solid $borders_color; }
|
||||
&.left { border-right: 1px solid $borders_color; }
|
||||
&.right { border-left: 1px solid $borders_color; }
|
||||
|
||||
&:backdrop {
|
||||
background-color: $backdrop_scrollbar_bg_color;
|
||||
border-color: $backdrop_borders_color;
|
||||
transition: 400ms ease-in;
|
||||
}
|
||||
|
||||
// slider
|
||||
slider {
|
||||
min-width: 7px;
|
||||
min-height: 7px;
|
||||
margin: -1px;
|
||||
border: 4px solid transparent;
|
||||
border-radius: 2px;
|
||||
background-clip: padding-box;
|
||||
background-color: $scrollbar_slider_color;
|
||||
|
||||
&:hover { background-color: $scrollbar_slider_hover_color; }
|
||||
|
||||
&:hover:active { background-color: $scrollbar_slider_active_color; }
|
||||
|
||||
&:backdrop { background-color: $backdrop_scrollbar_slider_color; }
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
&.fine-tune {
|
||||
slider {
|
||||
min-width: 7px;
|
||||
min-height: 7px;
|
||||
}
|
||||
|
||||
&.horizontal slider { border-width: 1px; }
|
||||
&.vertical slider { border-width: 1px; }
|
||||
}
|
||||
|
||||
&.overlay-indicator {
|
||||
&:not(.dragging):not(.hovering) {
|
||||
border-color: transparent;
|
||||
opacity: 0.4;
|
||||
background-color: transparent;
|
||||
|
||||
slider {
|
||||
margin: 0;
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: $fg_color;
|
||||
border: 1px solid if($variant == 'light', white, black);
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
background-color: $fg_color;
|
||||
background-clip: padding-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid if($variant == 'light', white, black);
|
||||
-gtk-icon-source: none;
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
slider {
|
||||
margin: 0 2px;
|
||||
min-width: $_slider_min_length;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1px 2px;
|
||||
min-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
slider {
|
||||
margin: 2px 0;
|
||||
min-height: $_slider_min_length;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 2px 1px;
|
||||
min-height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging,
|
||||
&.hovering { opacity: 0.8; }
|
||||
}
|
||||
|
||||
&.horizontal slider { min-width: $_slider_min_length; }
|
||||
|
||||
&.vertical slider { min-height: $_slider_min_length; }
|
||||
// button styling
|
||||
button {
|
||||
padding: 0;
|
||||
min-width: 7px;
|
||||
min-height: 7px;
|
||||
border-style: none;
|
||||
border-radius: 2px;
|
||||
transition-property: min-height, min-width, color;
|
||||
|
||||
color: $scrollbar_slider_color;
|
||||
|
||||
&:hover {
|
||||
|
||||
color: $scrollbar_slider_hover_color;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
|
||||
color: $scrollbar_slider_active_color;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
|
||||
color: $backdrop_scrollbar_slider_color;
|
||||
}
|
||||
}
|
||||
|
||||
// button icons
|
||||
&.vertical {
|
||||
button {
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
button {
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-right-symbolic'); }
|
||||
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-left-symbolic'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
treeview ~ scrollbar.vertical {
|
||||
border-top: 1px solid $borders_color;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
/*********
|
||||
! Sidebar
|
||||
**********/
|
||||
|
||||
@include exports("sidebar") {
|
||||
.sidebar {
|
||||
&, &.view, .view, view, scrolledwindow {
|
||||
background-color: $bg_color;
|
||||
color: mix($fg_color, $bg_color, .1);
|
||||
|
||||
&.separator, separator {
|
||||
&, &:hover, &:focus {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, .9);
|
||||
color: shade($bg_color, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
row, .view row, view row {
|
||||
&:selected {
|
||||
&, &:hover, &:focus {
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: shade($selected_bg_color, 1.05);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: shade($bg_color, 1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-label {
|
||||
padding-left: $spacing;
|
||||
padding-right: $spacing;
|
||||
}
|
||||
|
||||
.frame, frame { border-width: 0; }
|
||||
.sidebar-icon {
|
||||
padding-left: $spacing * 2;
|
||||
padding-right: $spacing * 2;
|
||||
}
|
||||
|
||||
assistant & {
|
||||
padding: $spacing;
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-right-color: border_normal($bg_color);
|
||||
border-radius: 0;
|
||||
background-color: $bg_color;
|
||||
color: mix($fg_color, $bg_color, .1);
|
||||
|
||||
&:dir(ltr) { border-width: 0 1px 0 0; }
|
||||
|
||||
&:dir(rtl) { border-width: 0 0 0 1px; }
|
||||
|
||||
label {
|
||||
padding: $spacing ($spacing * 2);
|
||||
|
||||
&.highlight { background-color: mix($bg_color, $fg_color, .8); }
|
||||
}
|
||||
|
||||
&.csd .sidebar { border-top-style: none; }
|
||||
|
||||
.highlight { font: bold; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Paned
|
||||
*******/
|
||||
|
||||
@include exports("paned") {
|
||||
paned {
|
||||
-GtkPaned-handle-size: 1;
|
||||
-gtk-icon-source: none;
|
||||
|
||||
margin: 0 $spacing;
|
||||
}
|
||||
|
||||
|
||||
paned:dir(rtl) {
|
||||
margin-right: 0;
|
||||
margin-left: $spacing;
|
||||
}
|
||||
|
||||
paned .pane-separator { background-color: shade($bg_color, .9); }
|
||||
|
||||
paned.wide {
|
||||
-GtkPaned-handle-size: 4;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
paned.wide .pane-separator {
|
||||
background-color: transparent;
|
||||
border-style: none solid;
|
||||
border-color: shade($bg_color, .9);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
paned.wide.vertical .pane-separator { border-style: solid none; }
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*******************
|
||||
! Spinner animation
|
||||
********************/
|
||||
|
||||
@include exports("spinner") {
|
||||
@keyframes spin {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
.spinner {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
opacity: 0; // non spinning spinner makes no sense
|
||||
|
||||
-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
animation: spin 1s linear infinite;
|
||||
|
||||
&:disabled { opacity: .5; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+116
@@ -0,0 +1,116 @@
|
||||
/***********************
|
||||
! Check and Radio items
|
||||
************************/
|
||||
|
||||
$suffix: if($variant == "dark", "-dark", "");
|
||||
|
||||
@mixin toggle($type) {
|
||||
background-image: none;
|
||||
|
||||
-gtk-icon-source: url("../assets/#{$type}-unchecked#{$suffix}.png");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-unchecked-insensitive#{$suffix}.png"); }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/#{$type}-checked#{$suffix}.png");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-checked-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
-gtk-icon-source: url("../assets/#{$type}-mixed#{$suffix}.png");
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/#{$type}-mixed-insensitive#{$suffix}.png"); }
|
||||
}
|
||||
|
||||
&.menuitem {
|
||||
-gtk-icon-source: none;
|
||||
|
||||
&:disabled { -gtk-icon-source: none; }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-checked.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-hover.png"); }
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-checked-insensitive.png"); }
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
-gtk-icon-source: url("../assets/menuitem-#{$type}-mixed.png");
|
||||
|
||||
&:hover { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-hover.png"); }
|
||||
|
||||
&:disabled { -gtk-icon-source: url("../assets/menuitem-#{$type}-mixed-insensitive.png"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("checkradio") {
|
||||
radio {
|
||||
@include toggle("radio");
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
check {
|
||||
@include toggle("checkbox");
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
iconview.content-view.cell.check {
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked#{$suffix}.png");
|
||||
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked#{$suffix}.png"); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********
|
||||
! Switch
|
||||
*********/
|
||||
|
||||
@include exports("switch") {
|
||||
switch {
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: all 0.4s linear;
|
||||
transition: background-colot 0.4s linear;
|
||||
min-width: 93px;
|
||||
min-height: 25px;
|
||||
background-color: #e8eaec;
|
||||
color: #8e969e;
|
||||
|
||||
slider {
|
||||
background-color: #fbfbfb;
|
||||
transition: all 0.3s linear;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
border-color: $selected_bg_color;
|
||||
color: $base_color;
|
||||
|
||||
slider {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #d8d8d8;
|
||||
background-image: none;
|
||||
border-color: #ccc;
|
||||
color: mix(#444, #f0f0f0, 0.5);
|
||||
|
||||
slider {
|
||||
background-color: #e8eaec;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+123
@@ -0,0 +1,123 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*********
|
||||
! Toolbar
|
||||
**********/
|
||||
|
||||
@mixin toolbar($bg, $fg) {
|
||||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
||||
padding: $spacing * 2;
|
||||
color: $fg;
|
||||
|
||||
&:disabled {
|
||||
@include linear-gradient(shade($bg, .9));
|
||||
|
||||
color: mix($fg, $bg, .5);
|
||||
}
|
||||
|
||||
.title {
|
||||
font: bold;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: smaller;
|
||||
padding: 0 ($spacing * 2);
|
||||
}
|
||||
|
||||
button { @include button($bg, $fg); }
|
||||
|
||||
button.linked, .linked button { @include linked_button($bg); }
|
||||
|
||||
combobox, button {
|
||||
padding: $spacing - 1px;
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: ($spacing + 1px) ($spacing - 1px) ($spacing + 1px) $spacing; }
|
||||
}
|
||||
|
||||
separator, separator:disabled {
|
||||
color: shade($bg, ($contrast + .1));
|
||||
border-color: currentColor;
|
||||
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
|
||||
.menubar, menubar { -GtkToolbar-button-relief: normal; }
|
||||
}
|
||||
|
||||
@include exports("toolbar") {
|
||||
toolbar {
|
||||
@include toolbar($bg_color, $fg_color);
|
||||
|
||||
border-style: none;
|
||||
|
||||
&.inline-toolbar {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
headerbar {
|
||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
|
||||
&:backdrop {
|
||||
@include linear-gradient($titlebar_bg_color);
|
||||
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.default-decoration {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tiled &, .maximized & { border-radius: 0; }
|
||||
|
||||
.title { font: bold; }
|
||||
|
||||
.titlebutton {
|
||||
padding: $spacing;
|
||||
border: 0;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover, &:hover:focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
color: $selected_bg_color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active, &:active:hover {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
color: shade($selected_bg_color, .9);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
background: none;
|
||||
color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,332 @@
|
||||
/***************
|
||||
! Generic views
|
||||
****************/
|
||||
|
||||
@include exports("view") {
|
||||
.view,
|
||||
%view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
|
||||
&:backdrop {
|
||||
color: $backdrop_text_color;
|
||||
background-color: $backdrop_base_color;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view,
|
||||
textview {
|
||||
text {
|
||||
@extend %view;
|
||||
|
||||
selection { &:focus, & { @extend %selected_items; }}
|
||||
}
|
||||
}
|
||||
|
||||
iconview { @extend .view; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/************
|
||||
! Treeview
|
||||
*************/
|
||||
|
||||
@include exports("treeview") {
|
||||
.rubberband,
|
||||
rubberband {
|
||||
border: 1px solid darken($selected_bg_color, 10%);
|
||||
background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
|
||||
}
|
||||
treeview entry {
|
||||
&.flat, & {
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
background-color: $base_color;
|
||||
|
||||
&:focus { border-color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
%column_header_button {
|
||||
padding: 0 6px;
|
||||
border-radius: 0;
|
||||
background-image: none;
|
||||
text-shadow: none;
|
||||
border-style: none solid solid none;
|
||||
border-color: $bg_color;
|
||||
|
||||
&:disabled {
|
||||
border-color: $bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_bg_color;
|
||||
border-style: none solid solid none;
|
||||
color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
||||
background-image: none;
|
||||
background-color: $backdrop_base_color;
|
||||
|
||||
&:disabled {
|
||||
border-color: $backdrop_bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
treeview.view {
|
||||
-GtkTreeView-grid-line-width: 1;
|
||||
-GtkTreeView-grid-line-pattern: '';
|
||||
-GtkTreeView-tree-line-width: 1;
|
||||
-GtkTreeView-tree-line-pattern: '';
|
||||
|
||||
border-left-color: mix($fg_color, $base_color, 50%); // this is actually the tree lines color,
|
||||
border-top-color: $bg_color; // while this is the grid lines color, better then nothing
|
||||
|
||||
rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
@extend %selected_items;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:backdrop, & {
|
||||
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
|
||||
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $insensitive_fg_color;
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 40%);
|
||||
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||||
}
|
||||
|
||||
&:backdrop { color: $backdrop_insensitive_color; }
|
||||
}
|
||||
|
||||
&.separator {
|
||||
min-height: 2px;
|
||||
color: $bg_color;
|
||||
|
||||
&:backdrop { color: transparentize($bg_color, 0.9); }
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
|
||||
border-top: $backdrop_bg_color;
|
||||
}
|
||||
&:drop(active) {
|
||||
border-style: solid none;
|
||||
border-width: 1px;
|
||||
border-color: $selected_borders_color;
|
||||
|
||||
&.after { border-top-style: none; }
|
||||
|
||||
&.before { border-bottom-style: none; }
|
||||
}
|
||||
|
||||
&.expander {
|
||||
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
|
||||
color: mix($fg_color, $base_color, 70%);
|
||||
|
||||
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
|
||||
|
||||
|
||||
&:hover { color: $fg_color; }
|
||||
|
||||
&:selected {
|
||||
color: mix($selected_fg_color, $selected_bg_color, 70%);
|
||||
|
||||
&:hover { color: $selected_fg_color; }
|
||||
|
||||
&:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%); }
|
||||
}
|
||||
|
||||
&:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
|
||||
&:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
|
||||
}
|
||||
|
||||
&.progressbar { // progress bar in treeviews
|
||||
@if $variant == light { color: $base_color; }
|
||||
|
||||
border: 1px solid $selected_borders_color;
|
||||
border-radius: 4px;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: linear-gradient(to bottom, $selected_bg_color, darken($selected_bg_color,10%));
|
||||
box-shadow: inset 0 1px if($variant == 'light', transparentize(white,0.7), transparentize(white,0.85)),
|
||||
0 1px if($variant == 'light', transparentize(black, 0.8), transparentize(black,0.9));
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
border-radius: 4px;
|
||||
|
||||
@if $variant == 'light' {
|
||||
color: $selected_bg_color;
|
||||
box-shadow: none;
|
||||
} @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
|
||||
|
||||
background-image: linear-gradient(to bottom,
|
||||
$base_color,
|
||||
darken($base_color,10%));
|
||||
|
||||
&:backdrop {
|
||||
@if $variant == 'light' {
|
||||
color: $selected_bg_color;
|
||||
border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
|
||||
} @else { border-color: $backdrop_base_color; }
|
||||
|
||||
background-color: $backdrop_base_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
@if $variant == 'light' { color: $backdrop_base_color;
|
||||
} @else { border-color: $backdrop_base_color; }
|
||||
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.trough { // progress bar trough in treeviews
|
||||
background-color: transparentize($fg_color,0.9);
|
||||
border-radius: 4px;
|
||||
|
||||
&:selected {
|
||||
&:focus, & {
|
||||
background-color: if($variant == 'light',
|
||||
transparentize($selected_fg_color, 0.7),
|
||||
darken($selected_bg_color, 10%));
|
||||
border-radius: 4px;
|
||||
|
||||
@if $variant == 'light' {
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
button {
|
||||
$_column_header_color: mix($fg_color, $base_color, 50%);
|
||||
|
||||
@extend %column_header_button;
|
||||
|
||||
color: $_column_header_color;
|
||||
background-color: $base_color;
|
||||
font-weight: bold;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
@extend %column_header_button;
|
||||
|
||||
color: mix($_column_header_color, $fg_color, 50%);
|
||||
box-shadow: none;
|
||||
transition: none; //I shouldn't need this
|
||||
}
|
||||
|
||||
&:active {
|
||||
@extend %column_header_button;
|
||||
|
||||
color: $fg_color;
|
||||
transition: none; //I shouldn't need this
|
||||
}
|
||||
}
|
||||
|
||||
button:last-child { &:backdrop, & { border-right-style: none; }}
|
||||
}
|
||||
|
||||
button.dnd,
|
||||
header.button.dnd { // for treeview-like derive widgets
|
||||
&:active, &:selected, &:hover, & {
|
||||
padding: 0 6px;
|
||||
transition: none;
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $base_color;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
box-shadow: inset 0 0 0 1px $base_color;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Separator
|
||||
************/
|
||||
|
||||
@include exports("separator") {
|
||||
.view.separator, .separator {
|
||||
color: shade($bg_color, ($contrast + .1));
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
! Column view headers
|
||||
**********************/
|
||||
|
||||
@include exports("columnheader") {
|
||||
column-header {
|
||||
.button {
|
||||
&, &:active {
|
||||
border-width: 0 1px 1px 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&, &:active, &:focus, &:active:focus {
|
||||
border-color: shade($base_color, .9);
|
||||
border-bottom-color: shade($base_color, .8);
|
||||
background-color: shade($base_color, .97);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
|
||||
border-color: shade($base_color, .9);
|
||||
border-bottom-color: shade($base_color, .8);
|
||||
background-color: shade($base_color, .99);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:last-child .button { border-width: 0 0 1px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
! Frames *
|
||||
***********/
|
||||
|
||||
@include exports("frame") {
|
||||
.frame {
|
||||
border: 1px solid border_normal($bg_color);
|
||||
|
||||
&.flat { border: 0; }
|
||||
}
|
||||
|
||||
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
||||
scrolledwindow viewport.frame { border: 0; }
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user