mirror of
https://github.com/encounter/numix-blue-gtk-theme.git
synced 2026-07-10 12:18:49 -07:00
Move widgets to separate folder
This commit is contained in:
Satyajit Sahoo
Executable
+123
@@ -0,0 +1,123 @@
|
||||
/**************
|
||||
! GTK settings
|
||||
***************/
|
||||
|
||||
* {
|
||||
-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;
|
||||
|
||||
outline-color: alpha($selected_bg_color, 0.5);
|
||||
outline-style: dashed;
|
||||
outline-width: 1px;
|
||||
outline-offset: -1px;
|
||||
outline-radius: $roundness;
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Base states
|
||||
*************/
|
||||
|
||||
%selected_items {
|
||||
&, &:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
&:selected { @extend %selected_items; }
|
||||
|
||||
&:insensitive,
|
||||
&:insensitive:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
|
||||
&:insensitive { -gtk-image-effect: dim; }
|
||||
|
||||
&:hover { -gtk-image-effect: highlight; }
|
||||
|
||||
/* hyperlinks */
|
||||
-GtkHTML-link-color: $link_color;
|
||||
-GtkIMHtml-hyperlink-color: $link_color;
|
||||
-GtkWidget-link-color: $link_color;
|
||||
-GtkWidget-visited-link-color: $link_color;
|
||||
|
||||
&:link, &:visited { color: $link_color; }
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: $bg_color;
|
||||
color: $fg_color;
|
||||
|
||||
&:backdrop {
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gtkstyle-fallback {
|
||||
background-color: alpha($bg_color, .5);
|
||||
color: $fg_color;
|
||||
|
||||
&:prelight {
|
||||
background-color: shade($bg_color, 1.1);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: shade(shade($bg_color, 0.95), 1.05);
|
||||
color: mix($fg_color, $bg_color, 0.50);
|
||||
}
|
||||
|
||||
&:selected { @extend %selected_items; }
|
||||
}
|
||||
|
||||
GtkImage, GtkLabel, GtkBox, GtkGrid {
|
||||
&, &:insensitive { background-color: transparent; }
|
||||
}
|
||||
|
||||
GtkLabel {
|
||||
&.separator {
|
||||
color: $fg_color;
|
||||
|
||||
@extend .dim-label;
|
||||
}
|
||||
|
||||
&:selected { @extend %selected_items; }
|
||||
|
||||
&:insensitive { color: mix($fg_color, $bg_color, 0.50); }
|
||||
}
|
||||
Executable
+268
@@ -0,0 +1,268 @@
|
||||
/*********
|
||||
! Buttons
|
||||
**********/
|
||||
|
||||
@include exports("button_extends") {
|
||||
%button {
|
||||
padding: ($spacing - 1px) ($spacing + 1px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: $roundness;
|
||||
transition: 100ms ease;
|
||||
outline-color: transparent;
|
||||
|
||||
-GtkWidget-focus-padding: 1;
|
||||
-GtkWidget-focus-line-width: 0;
|
||||
}
|
||||
|
||||
%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) {
|
||||
@extend %linked_button;
|
||||
|
||||
box-shadow: inset -1px 0 border_normal($bg),
|
||||
0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
|
||||
&:focus, &:hover {
|
||||
box-shadow: inset -1px 0 border_focus($bg),
|
||||
0 1px 2px -1px alpha($dark_shadow, .3);
|
||||
}
|
||||
|
||||
&: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),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
}
|
||||
|
||||
&:insensitive { box-shadow: inset -1px 0 border_insensitive($bg); }
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg, $fg) {
|
||||
@include linear-gradient(shade($bg, 1.05));
|
||||
@extend %button;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&.flat {
|
||||
color: inherit;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.separator, .separator {
|
||||
border: 1px solid currentColor;
|
||||
color: shade($bg, ($contrast + .05));
|
||||
|
||||
&:insensitive { color: shade($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, 0.3);
|
||||
background-color: alpha(white, 0.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);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.default { @include button($selected_bg_color, $selected_fg_color); }
|
||||
|
||||
&.linked, .linked & { @include linked_button($bg_color); }
|
||||
|
||||
.spinbutton & {
|
||||
color: mix($text_color, $base_color, 0.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);
|
||||
|
||||
&:insensitive {
|
||||
color: mix($text_color, $base_color, 0.7);
|
||||
box-shadow: inset 1px 0 shade($base_color, 0.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, 0.9); }
|
||||
}
|
||||
|
||||
.spinbutton.vertical & {
|
||||
border: 1px solid shade($bg_color, 0.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, 0.7);
|
||||
background-color: shade($bg_color, 1.10);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:active:hover, &:checked:hover {
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
|
||||
&:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, 0.7); }
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, 0.85);
|
||||
background-color: shade($bg_color, 0.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/**********
|
||||
! Calendar
|
||||
***********/
|
||||
|
||||
@include exports("calendar") {
|
||||
GtkCalendar {
|
||||
padding: $spacing;
|
||||
outline-offset: -1px;
|
||||
|
||||
&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
|
||||
|
||||
&.view, &.highlight, &.header, &.button {
|
||||
&, &:hover, &:insensitive {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight { color: $selected_bg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
/***************
|
||||
! Color chooser
|
||||
****************/
|
||||
|
||||
@include exports("colorchooser") {
|
||||
GtkColorSwatch {
|
||||
&, &:selected {
|
||||
border: 1px solid alpha(black, 0.1);
|
||||
border-radius: $roundness - 1px;
|
||||
background-color: transparent;
|
||||
background-clip: border-box;
|
||||
|
||||
&:hover { border-color: alpha(black, 0.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;
|
||||
}
|
||||
|
||||
GtkColorEditor & {
|
||||
border-radius: $roundness;
|
||||
|
||||
&.color-dark:hover, &.color-light:hover {
|
||||
background-image: none;
|
||||
border-color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorChooserWidget #add-color-button {
|
||||
background-clip: padding-box;
|
||||
border-color: alpha(black, 0.1);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
background-color: shade($bg_color, 0.90);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.color-active-badge {
|
||||
&, &:selected {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.color-light {
|
||||
&, &:hover {
|
||||
border-color: alpha(black, 0.3);
|
||||
color: alpha(black, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.color-dark {
|
||||
&, &:hover {
|
||||
border-color: alpha(white, 0.3);
|
||||
color: alpha(white, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkColorButton.button { padding: $spacing; }
|
||||
}
|
||||
|
||||
|
||||
/***********************
|
||||
! Font and file choosers
|
||||
************************/
|
||||
|
||||
@include exports("miscchoosers") {
|
||||
GtkFontButton, GtkFileChooserButton {
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
}
|
||||
|
||||
GtkLabel:last-child { color: alpha(currentColor, 0.7); }
|
||||
|
||||
GtkImage:last-child { color: alpha(currentColor, 0.7); }
|
||||
}
|
||||
|
||||
GtkFileChooser {
|
||||
.pane-separator {
|
||||
&, &:hover {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: currentColor;
|
||||
background-color: $bg_color;
|
||||
color: border_normal($bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-width: 1px 0 0;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+111
@@ -0,0 +1,111 @@
|
||||
/*******
|
||||
! Entry
|
||||
********/
|
||||
|
||||
@mixin linked_entry($bg) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin entry($bg, $fg) {
|
||||
@include border(shade($bg, .9));
|
||||
|
||||
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);
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&.progressbar {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-width: 0;
|
||||
border-radius: $roundness;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&.image.left { padding-right: $spacing; }
|
||||
}
|
||||
|
||||
@include exports("entry") {
|
||||
.entry { @include entry($base_color, $text_color); }
|
||||
}
|
||||
|
||||
|
||||
/******************
|
||||
! Combobox entry *
|
||||
*******************/
|
||||
|
||||
@include exports("combobox") {
|
||||
GtkComboBox {
|
||||
&.combobox-entry {
|
||||
.entry {
|
||||
&, &:hover, &:focus, &:active, &:insensitive {
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&, &:hover, &:focus, &:active, &:insensitive {
|
||||
border-width: 1px 1px 1px 1px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
/* always disable separators */
|
||||
-GtkWidget-wide-separators: true;
|
||||
-GtkWidget-horizontal-separator: 0;
|
||||
-GtkWidget-vertical-separator: 0;
|
||||
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/******************
|
||||
! Grid and flowbox
|
||||
*******************/
|
||||
|
||||
.list {
|
||||
background-color: shade($bg_color, 0.97);
|
||||
color: $fg_color;
|
||||
|
||||
&-row {
|
||||
&, &.button {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: $spacing;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
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 {
|
||||
&, GtkFlowBox & {
|
||||
padding: $spacing;
|
||||
border-radius: $roundness;
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*********
|
||||
! Infobar
|
||||
**********/
|
||||
|
||||
@include exports("infobar") {
|
||||
GtkInfoBar {
|
||||
border: none;
|
||||
|
||||
$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, 0.8);
|
||||
color: $fg_color;
|
||||
|
||||
.button {
|
||||
@include button($bg_color, $fg_color);
|
||||
|
||||
&.close { @extend %close_button; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+244
@@ -0,0 +1,244 @@
|
||||
@import "entry";
|
||||
|
||||
|
||||
/*********
|
||||
! Menubar
|
||||
**********/
|
||||
|
||||
@include exports("menubar") {
|
||||
.menubar {
|
||||
-GtkWidget-window-dragging: true;
|
||||
|
||||
border: none;
|
||||
background-color: $menubar_bg_color;
|
||||
background-image: none;
|
||||
color: $menubar_fg_color;
|
||||
|
||||
|
||||
&.menuitem, .menuitem {
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $menubar_fg_color;
|
||||
|
||||
&:hover {
|
||||
border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
||||
background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
|
||||
background-image: none;
|
||||
color: shade($menubar_fg_color, 1.08);
|
||||
}
|
||||
|
||||
& *:hover { color: shade($menubar_fg_color, 1.08); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******
|
||||
! Menu
|
||||
*******/
|
||||
|
||||
@include exports("menu") {
|
||||
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
||||
&.menu, .menu {
|
||||
background-color: $menu_bg_color;
|
||||
margin: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
#toolbar-popup, .menu {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border-style: none;
|
||||
background-color: $menu_bg_color;
|
||||
color: $menu_fg_color;
|
||||
|
||||
&:selected { background-color: $selected_bg_color; }
|
||||
|
||||
.button {
|
||||
&, &:hover, &:active, &:active *:insensitive, &:insensitive {
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu { font: initial; }
|
||||
|
||||
.menuitem {
|
||||
GtkTreeMenu & {
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&, .menu & {
|
||||
margin: $spacing;
|
||||
padding: $spacing;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
-GtkMenuItem-arrow-scaling: 0.5;
|
||||
|
||||
&:active, &:hover {
|
||||
border: none;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
& *:active, & *:hover { color: $selected_fg_color; }
|
||||
|
||||
&:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); }
|
||||
}
|
||||
|
||||
&.check, &.radio {
|
||||
&, &:focus, &:hover, &:insensitive { background-image: none; }
|
||||
|
||||
&, &:focus, &:hover, &:active, &:insensitive {
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.separator {
|
||||
-GtkMenuItem-horizontal-padding: 0;
|
||||
-GtkWidget-separator-height: 1;
|
||||
|
||||
border-style: none;
|
||||
color: shade($menu_bg_color, .9);
|
||||
}
|
||||
|
||||
&.button {
|
||||
&, &:focus, &:active, &:insensitive, &:active:insensitive {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&:hover, &:focus:hover, &:active:hover, &:selected {
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
GtkCalendar {
|
||||
&:inconsistent { 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); }
|
||||
|
||||
&:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
|
||||
}
|
||||
|
||||
.entry { @include entry($menu_bg_color, $menu_fg_color); }
|
||||
}
|
||||
|
||||
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
! Popover
|
||||
**********/
|
||||
|
||||
@include exports("popover") {
|
||||
GtkPopover {
|
||||
@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 2px 3px alpha(black, .5);
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
GtkModelButton.button {
|
||||
&, &:backdrop {
|
||||
@include button(transparent, currentColor);
|
||||
|
||||
&:focus:hover, &:active:hover, &:hover, &:selected {
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/***************
|
||||
! Dimmed label *
|
||||
****************/
|
||||
|
||||
.dim-label {
|
||||
opacity: 0.5;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Tooltip *
|
||||
************/
|
||||
|
||||
@include exports("tooltip") {
|
||||
.tooltip {
|
||||
@include linear-gradient($tooltip_bg_color);
|
||||
|
||||
border: none;
|
||||
border-radius: $roundness;
|
||||
color: $tooltip_fg_color;
|
||||
|
||||
* { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Dialogs *
|
||||
************/
|
||||
|
||||
@include exports("dialogs") {
|
||||
GtkMessageDialog, .prompt {
|
||||
-GtkDialog-content-area-border: 0;
|
||||
-GtkDialog-action-area-border: 0;
|
||||
-GtkDialog-button-spacing: 0;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
! App notifications *
|
||||
**********************/
|
||||
|
||||
@include exports("notifications") {
|
||||
.app-notification {
|
||||
border-style: solid;
|
||||
border-color: border_normal($base_color);
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
padding: $spacing * 3;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Expanders *
|
||||
**************/
|
||||
|
||||
@include exports("expander") {
|
||||
GtkExpander {
|
||||
padding: $spacing;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.expander {
|
||||
color: alpha(currentColor, 0.7);
|
||||
border: alpha(currentColor, 0.7);
|
||||
|
||||
&:hover {
|
||||
color: alpha(currentColor, 0.8);
|
||||
border-color: alpha(currentColor, 0.8);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: alpha(currentColor, 0.9);
|
||||
border-color: alpha(currentColor, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
! Symbolic images *
|
||||
********************/
|
||||
|
||||
@include exports("symbolicimage") {
|
||||
.image {
|
||||
color: alpha(currentColor, 0.5);
|
||||
|
||||
&:hover { color: alpha(currentColor, 0.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-image-spacing: 0;
|
||||
-GtkButton-inner-border: 0;
|
||||
|
||||
border: none;
|
||||
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; }
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/**********
|
||||
! Notebook
|
||||
***********/
|
||||
|
||||
@include exports("notebook") {
|
||||
.notebook {
|
||||
padding: 0;
|
||||
border-width: 1px 0 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;
|
||||
|
||||
-GtkNotebook-initial-gap: 0;
|
||||
-GtkNotebook-arrow-spacing: 5;
|
||||
-GtkNotebook-tab-curvature: 0;
|
||||
-GtkNotebook-tab-overlap: 1;
|
||||
-GtkNotebook-has-tab-gap: false;
|
||||
|
||||
&.frame { border-width: 1px; }
|
||||
|
||||
&.header {
|
||||
border-width: 0;
|
||||
background-color: shade($base_color, 0.85);
|
||||
|
||||
&.frame {
|
||||
border-color: shade($base_color, 0.75);
|
||||
|
||||
&.top { border-width: 1px 1px 0 1px; }
|
||||
|
||||
&.right { border-width: 1px 1px 1px 0; }
|
||||
|
||||
&.bottom { border-width: 0 1px 1px 1px; }
|
||||
|
||||
&.left { border-width: 1px 0 1px 1px; }
|
||||
}
|
||||
}
|
||||
|
||||
GtkViewport {
|
||||
border-width: 0;
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
|
||||
tab {
|
||||
padding: $spacing ($spacing * 2);
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.top {
|
||||
border-bottom-width: 2px;
|
||||
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-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-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-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); }
|
||||
|
||||
/* close button styling */
|
||||
.button { @extend %close_button; }
|
||||
}
|
||||
|
||||
.prelight-page {
|
||||
&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
|
||||
}
|
||||
|
||||
.active-page {
|
||||
&, GtkLabel { color: $text_color; }
|
||||
}
|
||||
|
||||
.reorderable-page {
|
||||
&:hover {
|
||||
background-color: shade($base_color, 0.85);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
/* using box shadows instead of borders due to slanted edges */
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: shade($base_color, 0.90);
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
|
||||
inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*******
|
||||
! OSD *
|
||||
********/
|
||||
|
||||
GtkOverlay.osd {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.osd {
|
||||
&.background {
|
||||
background-color: alpha($osd_bg, 0.8);
|
||||
color: $osd_fg;
|
||||
}
|
||||
|
||||
&.frame {
|
||||
background-clip: border-box;
|
||||
background-origin: border-box;
|
||||
}
|
||||
|
||||
&.button, .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, 0.9); }
|
||||
}
|
||||
|
||||
/* used by gnome-settings-daemon's media-keys OSD */
|
||||
&.trough { background-color: shade($osd_bg, 0.8); }
|
||||
|
||||
&.progressbar { background-color: $osd_fg; }
|
||||
|
||||
.scale {
|
||||
&.slider {
|
||||
background-color: shade($osd_bg, 1.08);
|
||||
background-image: none;
|
||||
/* we will draw the border using box shadow for now */
|
||||
box-shadow: inset 1px 0 shade($osd_bg, 0.8),
|
||||
inset 0 1px shade($osd_bg, 0.8),
|
||||
inset -1px 0 shade($osd_bg, 0.8),
|
||||
inset 0 -1px shade($osd_bg, 0.8);
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 1px 0 shade($osd_bg, 0.7),
|
||||
inset 0 1px shade($osd_bg, 0.7),
|
||||
inset -1px 0 shade($osd_bg, 0.7),
|
||||
inset 0 -1px shade($osd_bg, 0.7);
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
background-color: shade($osd_bg, 0.9);
|
||||
background-image: none;
|
||||
box-shadow: inset 1px 0 shade($osd_bg, 0.85),
|
||||
inset 0 1px shade($osd_bg, 0.85),
|
||||
inset -1px 0 shade($osd_bg, 0.85),
|
||||
inset 0 -1px shade($osd_bg, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border-color: shade($osd_bg, 0.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;
|
||||
}
|
||||
|
||||
&:insensitive, &.highlight:insensitive {
|
||||
border-color: shade($osd_bg, 0.85);
|
||||
background-color: shade($osd_bg, 0.9);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.view, .view { background-color: $osd_bg; }
|
||||
|
||||
.scrollbar {
|
||||
.trough { background-color: $osd_bg; }
|
||||
|
||||
.slider {
|
||||
border: 1px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
|
||||
border-radius: 0;
|
||||
background-color: mix($osd_bg, $osd_fg, 0.21);
|
||||
|
||||
&:hover {
|
||||
border-color: mix(shade($osd_bg, 0.87), $osd_fg, 0.31);
|
||||
background-color: mix($osd_bg, $osd_fg, 0.31);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkIconView.cell {
|
||||
&:selected, &:selected:focus {
|
||||
background-color: transparent;
|
||||
border: 3px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
|
||||
border-radius: $roundness;
|
||||
outline-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* used by Documents */
|
||||
.page-thumbnail {
|
||||
border: 1px solid shade($osd_bg, 0.9);
|
||||
/* when there's no pixbuf yet */
|
||||
background-color: $osd_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.osd GtkProgressBar, GtkProgressBar.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,195 @@
|
||||
/*****************
|
||||
! Progress bars *
|
||||
******************/
|
||||
|
||||
@include exports("progressbar") {
|
||||
GtkProgressBar {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font-size: smaller;
|
||||
color: alpha($fg_color, 0.6);
|
||||
|
||||
-GtkProgressBar-min-horizontal-bar-height: 12;
|
||||
-GtkProgressBar-min-vertical-bar-width: 12;
|
||||
|
||||
&.osd {
|
||||
-GtkProgressBar-xspacing: 0;
|
||||
-GtkProgressBar-yspacing: 0;
|
||||
-GtkProgressBar-min-horizontal-bar-height: 3;
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GtkLevelBar {
|
||||
-GtkLevelBar-min-block-width: 34;
|
||||
-GtkLevelBar-min-block-height: 3;
|
||||
|
||||
&.vertical {
|
||||
-GtkLevelBar-min-block-width: 3;
|
||||
-GtkLevelBar-min-block-height: 34;
|
||||
}
|
||||
}
|
||||
|
||||
.level-bar {
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
border-radius: $roundness;
|
||||
}
|
||||
|
||||
&.fill-block {
|
||||
@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;
|
||||
|
||||
&.indicator-discrete {
|
||||
&.horizontal { margin-right: 1px; }
|
||||
&.vertical { margin-bottom: 1px; }
|
||||
}
|
||||
|
||||
&.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 {
|
||||
-GtkRange-slider-width: 16;
|
||||
-GtkRange-trough-border: 1;
|
||||
-GtkScale-slider-length: 16;
|
||||
|
||||
padding: 0;
|
||||
border-width: 1px;
|
||||
border-radius: $roundness;
|
||||
outline-offset: -1px;
|
||||
|
||||
|
||||
&.slider {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
/* we will draw the border using box shadow for now */
|
||||
box-shadow: inset 1px 0 border_normal($bg_color),
|
||||
inset 0 1px border_normal($bg_color),
|
||||
inset -1px 0 border_normal($bg_color),
|
||||
inset 0 -1px border_normal($bg_color);
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: inset 1px 0 border_focus($bg_color),
|
||||
inset 0 1px border_focus($bg_color),
|
||||
inset -1px 0 border_focus($bg_color),
|
||||
inset 0 -1px border_focus($bg_color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 1px 0 border_active($bg_color),
|
||||
inset 0 1px border_active($bg_color),
|
||||
inset -1px 0 border_active($bg_color),
|
||||
inset 0 -1px border_active($bg_color);
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, 0.9));
|
||||
|
||||
box-shadow: inset 1px 0 border_insensitive($bg_color),
|
||||
inset 0 1px border_insensitive($bg_color),
|
||||
inset -1px 0 border_insensitive($bg_color),
|
||||
inset 0 -1px border_insensitive($bg_color);
|
||||
}
|
||||
}
|
||||
|
||||
&.fine-tune {
|
||||
&, &.horizontal {
|
||||
&:active, &:active:hover {
|
||||
background-size: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
|
||||
|
||||
|
||||
&.trough {
|
||||
@include linear-gradient(shade($bg_color, 1.08));
|
||||
|
||||
margin: 7px 0;
|
||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||
border-radius: $roundness;
|
||||
|
||||
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
|
||||
|
||||
&.vertical { margin: 0 7px; }
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
&, &.left, &.bottom {
|
||||
@include linear-gradient($selected_bg_color);
|
||||
|
||||
border-color: $selected_bg_color;
|
||||
|
||||
&:insensitive {
|
||||
@include linear-gradient(shade($bg_color, 0.8));
|
||||
|
||||
border-color: shade($bg_color, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/***********
|
||||
! Scrollbar
|
||||
************/
|
||||
|
||||
@include exports("scrollbar") {
|
||||
.scrollbar {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
&.button {
|
||||
&, &:active, &:active:hover {
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: shade($bg_color, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
&.slider, &.slider.vertical {
|
||||
border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
|
||||
border-radius: 0;
|
||||
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);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
&.fine-tune:prelight:active {
|
||||
border-width: 2px;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbars-junction,
|
||||
.scrollbar.trough {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: $bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* overlay scrollbar */
|
||||
OsThumb, OsScrollbar {
|
||||
color: shade($bg_color, 0.7);
|
||||
|
||||
&:selected { background-color: $selected_bg_color; }
|
||||
|
||||
&:active { background-color: $selected_bg_color; }
|
||||
|
||||
&:insensitive { background-color: shade($bg_color, 0.9); }
|
||||
}
|
||||
}
|
||||
Executable
+121
@@ -0,0 +1,121 @@
|
||||
/*********
|
||||
! Sidebar
|
||||
**********/
|
||||
|
||||
@include exports("sidebar") {
|
||||
.sidebar {
|
||||
&, &.view, & .view, & GtkScrolledWindow {
|
||||
background-color: $bg_color;
|
||||
color: mix($fg_color, $bg_color, 0.1);
|
||||
|
||||
&.separator {
|
||||
&, &:hover, &:focus {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($bg_color, 0.9);
|
||||
color: shade($bg_color, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
row, .view row {
|
||||
&:selected {
|
||||
&, &:hover, &:focus {
|
||||
border: none;
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:prelight {
|
||||
border: none;
|
||||
background-image: none;
|
||||
background-color: shade($selected_bg_color, 1.05);
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
&:prelight {
|
||||
border: none;
|
||||
background-image: none;
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.frame { border-width: 0; }
|
||||
|
||||
GtkAssistant & {
|
||||
padding: 4px;
|
||||
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, 0.1);
|
||||
|
||||
&:dir(ltr) { border-width: 0 1px 0 0; }
|
||||
&:dir(rtl) { border-width: 0 0 0 1px; }
|
||||
|
||||
GtkLabel {
|
||||
padding: $spacing ($spacing * 2);
|
||||
|
||||
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
|
||||
}
|
||||
|
||||
&.csd .sidebar { border-top-style: none; }
|
||||
|
||||
.highlight { font: bold; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
! Pane separator
|
||||
****************/
|
||||
|
||||
@include exports("paneseparator") {
|
||||
.pane-separator {
|
||||
background-color: $bg_color;
|
||||
color: transparent;
|
||||
|
||||
&, &.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
&:insensitive { opacity: 0.5; }
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+104
@@ -0,0 +1,104 @@
|
||||
/***********************
|
||||
! Check and Radio items
|
||||
************************/
|
||||
|
||||
@mixin toggle($type) {
|
||||
background-image: none;
|
||||
|
||||
-gtk-icon-source: url('../assets/#{$type}-unchecked.svg');
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-unchecked-insensitive.svg'); }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url('../assets/#{$type}-checked.svg');
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-checked-insensitive.svg'); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url('../assets/#{$type}-mixed.svg');
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/#{$type}-mixed-insensitive.svg'); }
|
||||
}
|
||||
|
||||
&.menuitem {
|
||||
-gtk-icon-source: none;
|
||||
|
||||
&:insensitive { -gtk-icon-source: none; }
|
||||
|
||||
&:checked, &:active {
|
||||
-gtk-icon-source: url('../assets/menuitem-#{$type}-checked.svg');
|
||||
|
||||
&:hover { -gtk-icon-source: url('../assets/menuitem-#{$type}-checked-hover.svg'); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/menuitem-#{$type}-checked-insensitive.svg'); }
|
||||
}
|
||||
|
||||
&:inconsistent {
|
||||
-gtk-icon-source: url('../assets/menuitem-#{$type}-mixed.svg');
|
||||
|
||||
&:hover { -gtk-icon-source: url('../assets/menuitem-#{$type}-mixed-hover.svg'); }
|
||||
|
||||
&:insensitive { -gtk-icon-source: url('../assets/menuitem-#{$type}-mixed-insensitive.svg'); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("checkradio") {
|
||||
* {
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 14;
|
||||
}
|
||||
|
||||
.radio { @include toggle("radio"); }
|
||||
|
||||
.check { @include toggle("checkbox"); }
|
||||
|
||||
GtkIconView.content-view.cell.check {
|
||||
-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
|
||||
|
||||
&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/********
|
||||
! Switch
|
||||
*********/
|
||||
|
||||
@include exports("switch") {
|
||||
GtkSwitch {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font: bold condensed;
|
||||
outline-offset: -4px;
|
||||
|
||||
&.slider {
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
|
||||
&:insensitive {
|
||||
border-color: border_insensitive($bg_color);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border: 1px solid border_normal($bg_color);
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
|
||||
&:active {
|
||||
border-color: shade($selected_bg_color, 0.9);
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
|
||||
&:insensitive {
|
||||
border-color: border_insensitive($bg_color);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+118
@@ -0,0 +1,118 @@
|
||||
@import "button";
|
||||
|
||||
|
||||
/*********
|
||||
! Toolbar
|
||||
**********/
|
||||
|
||||
@mixin toolbar($bg, $fg) {
|
||||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
||||
padding: $spacing;
|
||||
color: $fg;
|
||||
|
||||
&:insensitive {
|
||||
@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); }
|
||||
|
||||
GtkComboBox, .button {
|
||||
padding: $spacing - 1px;
|
||||
|
||||
&.text-button { padding: $spacing; }
|
||||
|
||||
&.image-button { padding: $spacing ($spacing - 1px) ($spacing - 1px) $spacing; }
|
||||
}
|
||||
|
||||
GtkSeparatorToolItem, .separator, .separator:insensitive {
|
||||
color: border_normal($bg);
|
||||
border-color: currentColor;
|
||||
|
||||
-GtkWidget-window-dragging: true;
|
||||
}
|
||||
|
||||
.menubar { -GtkToolbar-button-relief: normal; }
|
||||
}
|
||||
|
||||
@include exports("toolbar") {
|
||||
.toolbar {
|
||||
@include toolbar($bg_color, $fg_color);
|
||||
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
@include toolbar($titlebar_bg_color, $titlebar_fg_color);
|
||||
|
||||
border-width: 0 0 1px 0;
|
||||
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: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tiled &, .maximized & { border-radius: 0; }
|
||||
|
||||
.title { font: bold; }
|
||||
|
||||
.titlebutton {
|
||||
padding: $spacing;
|
||||
border: none;
|
||||
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);
|
||||
icon-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/***************
|
||||
! Generic views
|
||||
****************/
|
||||
|
||||
@include exports("view") {
|
||||
.view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
|
||||
&:insensitive, &:insensitive:insensitive {
|
||||
background-color: shade($base_color, 0.9);
|
||||
color: mix($text_color, $base_color, 0.5);
|
||||
}
|
||||
|
||||
&:selected, &:selected:focus { @extend %selected_items; }
|
||||
}
|
||||
|
||||
.cell {
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:selected, &:selected:focus {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
|
||||
row {
|
||||
&:selected {
|
||||
&, &:hover, &:focus {
|
||||
-GtkWidget-focus-padding: 1;
|
||||
-GtkWidget-focus-line-width: 0;
|
||||
|
||||
border: none;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-view {
|
||||
&.view {
|
||||
background-color: $base_color;
|
||||
|
||||
&:prelight { background-color: alpha($selected_bg_color, 0.6); }
|
||||
|
||||
&:selected, &:active { background-color: $selected_bg_color; }
|
||||
|
||||
&:insensitive { background-color: shade($base_color, 0.9); }
|
||||
|
||||
&.check {
|
||||
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: smaller;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
GtkIconView {
|
||||
&.content-view.check { @extend .content-view.check; }
|
||||
|
||||
&.view.cell {
|
||||
&:selected, &:selected:focus {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background-image: none;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dim-label {
|
||||
&, &.view { color: alpha(currentColor, 0.5); }
|
||||
}
|
||||
|
||||
.dnd { border: 1px solid $selected_bg_color; }
|
||||
|
||||
.grip { background-color: transparent; }
|
||||
|
||||
.arrow { color: alpha(currentColor, 0.7); }
|
||||
|
||||
.rubberband {
|
||||
&, &.view, &.content-view.view {
|
||||
border: 1px solid $selected_bg_color;
|
||||
border-radius: 0;
|
||||
background-color: alpha($selected_bg_color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
GtkTextView { background-color: mix($bg_color, $base_color, 0.50); }
|
||||
|
||||
GtkDrawingArea, GtkHTML {
|
||||
@extend .view;
|
||||
|
||||
&:insensitive { background-color: shade($base_color, 0.9); }
|
||||
}
|
||||
}
|
||||
|
||||
/************
|
||||
! Treeview *
|
||||
*************/
|
||||
|
||||
@include exports("treeview") {
|
||||
GtkTreeView {
|
||||
-GtkTreeView-vertical-separator: 0;
|
||||
|
||||
outline-offset: -1px;
|
||||
|
||||
&.dnd { border: 1px solid $selected_bg_color; }
|
||||
|
||||
.entry {
|
||||
border-radius: 0;
|
||||
background-color: $base_color;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
! Separator
|
||||
************/
|
||||
|
||||
@include exports("separator") {
|
||||
.view.separator, .separator {
|
||||
color: shade($bg_color, ($contrast + .10));
|
||||
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, 0.9);
|
||||
border-bottom-color: shade($base_color, 0.8);
|
||||
background-color: shade($base_color, 0.97);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
|
||||
border-color: shade($base_color, 0.9);
|
||||
border-bottom-color: shade($base_color, 0.8);
|
||||
background-color: shade($base_color, 0.99);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:last-child .button { border-width: 0 0 1px 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
! Frames *
|
||||
***********/
|
||||
|
||||
@include exports("frame") {
|
||||
.frame {
|
||||
border: 1px solid border_normal($bg_color);
|
||||
|
||||
&.flat { border: none; }
|
||||
}
|
||||
|
||||
/* avoid double borders when a viewport is packed into a GtkScrolledWindow */
|
||||
GtkScrolledWindow GtkViewport.frame { border: none; }
|
||||
}
|
||||
|
||||
Executable
+41
@@ -0,0 +1,41 @@
|
||||
/**************
|
||||
! Window frame
|
||||
***************/
|
||||
|
||||
@include exports("window") {
|
||||
.window-frame {
|
||||
border: none;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||
|
||||
/* this is used for the resize cursor area */
|
||||
margin: $spacing * 3;
|
||||
|
||||
&:backdrop {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
|
||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
|
||||
}
|
||||
|
||||
&.tiled { border-radius: 0; }
|
||||
|
||||
&.csd {
|
||||
&.popup {
|
||||
border-radius: 0;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||
}
|
||||
|
||||
&.tooltip {
|
||||
border-radius: $roundness;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.message-dialog {
|
||||
border-radius: $roundness;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
|
||||
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user