Fix linked buttons and other fixes
Satyajit Sahoo
parent
e87a3b6f41
commit
c3bc33386c
|
|
@ -1,6 +1,11 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/**************
|
||||
! GTK settings
|
||||
***************/
|
||||
|
||||
* {
|
||||
-GtkArrow-arrow-scaling: 0.5;
|
||||
-GtkButton-child-displacement-x: 0;
|
||||
|
|
@ -11,8 +16,6 @@
|
|||
-GtkButton-interior-focus: true;
|
||||
-GtkButtonBox-child-min-height: 24;
|
||||
-GtkButtonBox-child-internal-pad-y: 1;
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 14;
|
||||
-GtkExpander-expander-size: 8;
|
||||
-GtkMenu-horizontal-padding: 0;
|
||||
-GtkMenu-vertical-padding: 0;
|
||||
|
|
@ -37,10 +40,6 @@
|
|||
-GtkWindow-resize-grip-width: 0;
|
||||
-WnckTasklist-fade-overlay-rect: 0;
|
||||
|
||||
/* legacy stuff */
|
||||
-GtkWidget-focus-line-width: 1;
|
||||
-GtkWidget-focus-padding: 0;
|
||||
|
||||
outline-color: alpha($selected_bg_color, 0.5);
|
||||
outline-style: dashed;
|
||||
outline-width: 1px;
|
||||
|
|
@ -48,9 +47,11 @@
|
|||
outline-radius: 2px;
|
||||
}
|
||||
|
||||
/***************
|
||||
* base states *
|
||||
***************/
|
||||
|
||||
/*************
|
||||
! Base states
|
||||
*************/
|
||||
|
||||
%selected_items {
|
||||
&, &:focus {
|
||||
background-color: $selected_bg_color;
|
||||
|
|
@ -88,7 +89,7 @@
|
|||
}
|
||||
|
||||
.gtkstyle-fallback {
|
||||
background-color: $bg_color;
|
||||
background-color: alpha($bg_color, .5);
|
||||
color: $fg_color;
|
||||
|
||||
&:prelight {
|
||||
|
|
@ -129,75 +130,3 @@ GtkLabel {
|
|||
opacity: 0.5;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
|
||||
&:selected { @extend %selected_items; }
|
||||
}
|
||||
|
||||
.rubberband {
|
||||
border: 1px solid $selected_bg_color;
|
||||
background-color: alpha($selected_bg_color, 0.2);
|
||||
}
|
||||
|
||||
/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
|
||||
.overshoot { background-color: alpha($selected_bg_color, 0.2); }
|
||||
|
||||
GtkAssistant {
|
||||
.sidebar {
|
||||
background-color: $base_color;
|
||||
border-top: 1px solid border_normal($base_color);
|
||||
|
||||
&:dir(ltr) { border-right: 1px solid border_normal($base_color); }
|
||||
&:dir(rtl) { border-left: 1px solid border_normal($base_color); }
|
||||
|
||||
GtkLabel {
|
||||
padding: $spacing ($spacing * 2);
|
||||
|
||||
&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
|
||||
}
|
||||
}
|
||||
|
||||
&.csd .sidebar { border-top-style: none; }
|
||||
}
|
||||
|
||||
GtkTextView {
|
||||
/* this will get overridden by .view, needed by gedit line numbers */
|
||||
background-color: mix($bg_color, $base_color, 0.50);
|
||||
}
|
||||
|
||||
|
||||
GtkFlowBox .grid-child {
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************
|
||||
* spinner animation *
|
||||
*********************/
|
||||
@keyframes spin {
|
||||
to { -gtk-icon-transform: rotate(1turn); }
|
||||
}
|
||||
|
||||
.spinner {
|
||||
background-image: none;
|
||||
background-color: blue;
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/*********
|
||||
! Buttons
|
||||
**********/
|
||||
|
||||
@mixin linked_button($bg, $shadow) {
|
||||
border: 1px solid border_normal($bg);
|
||||
|
|
@ -47,7 +53,9 @@
|
|||
}
|
||||
|
||||
&:active, &:active:hover,
|
||||
&:active:focus, &:active:hover:focus {
|
||||
&: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($shadow, .07),
|
||||
inset 0 1px alpha($shadow, .08),
|
||||
|
|
@ -58,9 +66,11 @@
|
|||
|
||||
&:last-child, &:only-child,
|
||||
&:insensitive:last-child, &:insensitive:only-child,
|
||||
&:active *:insensitive:last-child, &:active *:insensitive:only-child { box-shadow: none; }
|
||||
&: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, &:active:only-child,
|
||||
&:checked:last-child, &:checked:only-child {
|
||||
box-shadow: inset 1px 0 alpha($shadow, .07),
|
||||
inset 0 1px alpha($shadow, .08),
|
||||
inset -1px 0 alpha($shadow, .07);
|
||||
|
|
@ -90,9 +100,7 @@
|
|||
|
||||
&:checked, &:active {
|
||||
@include linear-gradient(shade($bg, .95));
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
|
||||
inset 0 1px alpha($dark_shadow, .08),
|
||||
inset -1px 0 alpha($dark_shadow, .07),
|
||||
|
|
@ -106,7 +114,8 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active *:insensitive {
|
||||
&:active *:insensitive,
|
||||
&:checked *:insensitive {
|
||||
@include linear-gradient(shade($bg, .8));
|
||||
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/*******
|
||||
! Entry
|
||||
********/
|
||||
|
||||
@mixin linked_entry($bg) {
|
||||
border-width: 1px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
@import "global";
|
||||
|
||||
$modules: () !default;
|
||||
|
||||
@mixin exports($name) {
|
||||
@if (not index($modules, $name)) {
|
||||
$modules: append($modules, $name) !global;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@function alpha($color, $amount) {
|
||||
@if type-of($color) == "color" {
|
||||
@return fade-out($color, (1 - $amount));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/******************
|
||||
! Grid and flowbox
|
||||
*******************/
|
||||
|
||||
.list {
|
||||
background-color: shade($bg_color, 0.97);
|
||||
|
|
@ -26,4 +32,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.grid-child { padding: $spacing; }
|
||||
.grid-child {
|
||||
&, GtkFlowBox & {
|
||||
padding: $spacing;
|
||||
border-radius: $roundness;
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
@import "entry";
|
||||
|
||||
|
||||
/******
|
||||
! Menu
|
||||
*******/
|
||||
|
||||
GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
||||
&.menu, .menu {
|
||||
background-color: $menu_bg_color;
|
||||
|
|
@ -113,6 +119,11 @@ GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
|
|||
|
||||
GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
|
||||
|
||||
|
||||
/*********
|
||||
! Popover
|
||||
**********/
|
||||
|
||||
GtkPopover {
|
||||
@include border($menu_bg_color);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/*********
|
||||
! Sidebar
|
||||
**********/
|
||||
|
||||
.sidebar {
|
||||
&, &.view, & .view, & GtkScrolledWindow {
|
||||
|
|
@ -51,6 +57,17 @@
|
|||
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; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/*******************
|
||||
! Spinner animation
|
||||
********************/
|
||||
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,16 @@
|
|||
/*************************
|
||||
* Check and Radio items *
|
||||
*************************/
|
||||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/***********************
|
||||
! Check and Radio items
|
||||
************************/
|
||||
|
||||
* {
|
||||
-GtkCheckButton-indicator-size: 16;
|
||||
-GtkCheckMenuItem-indicator-size: 14;
|
||||
}
|
||||
|
||||
@mixin toggle($type, $bg, $fg) {
|
||||
color: $fg;
|
||||
background-image: none;
|
||||
|
|
@ -32,9 +42,46 @@
|
|||
|
||||
}
|
||||
|
||||
.radio {
|
||||
@include toggle("radio", $bg_color, $fg_color);
|
||||
.radio { @include toggle("radio", $bg_color, $fg_color); }
|
||||
|
||||
.check { @include toggle("checkbox", $bg_color, $fg_color); }
|
||||
|
||||
|
||||
/********
|
||||
! Switch
|
||||
*********/
|
||||
|
||||
GtkSwitch {
|
||||
padding: 0;
|
||||
border-radius: $roundness;
|
||||
font: bold condensed;
|
||||
outline-offset: -4px;
|
||||
|
||||
&.slider {
|
||||
border: 1px solid shade($bg_color, 0.8);
|
||||
background-color: shade($bg_color, 1.08);
|
||||
|
||||
&:insensitive {
|
||||
border-color: shade($bg_color, 0.85);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.trough {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
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: shade($bg_color, 0.85);
|
||||
background-color: shade($bg_color, 0.9);
|
||||
color: mix($fg_color, $bg_color, 0.5);
|
||||
}
|
||||
}
|
||||
.check {
|
||||
@include toggle("checkbox", $bg_color, $fg_color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
@import "button";
|
||||
|
||||
/*********
|
||||
! Toolbar
|
||||
**********/
|
||||
|
||||
@mixin toolbar($bg, $fg) {
|
||||
@include linear-gradient($bg);
|
||||
@include border($bg);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,17 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/***************
|
||||
! Generic views
|
||||
****************/
|
||||
|
||||
.view {
|
||||
color: $text_color;
|
||||
background-color: $base_color;
|
||||
|
||||
&:selected { @extend %selected_items; }
|
||||
}
|
||||
|
||||
.cell {
|
||||
border-width: 0;
|
||||
|
|
@ -24,6 +37,68 @@ row {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
|
||||
|
||||
/*********************
|
||||
! Column view headers
|
||||
**********************/
|
||||
|
||||
column-header {
|
||||
.button {
|
||||
&, &:active {
|
||||
|
|
@ -48,52 +123,3 @@ column-header {
|
|||
&:last-child .button { border-width: 0 0 1px 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
&, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
|
||||
}
|
||||
|
||||
&.view.cell {
|
||||
&:selected, &:selected:focus {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
background-color: $selected_bg_color;
|
||||
background-image: none;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rubberband {
|
||||
&, &.view, &.content-view.view {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $selected_bg_color;
|
||||
border-radius: 0;
|
||||
background-color: alpha($selected_bg_color, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
@import "functions";
|
||||
@import "global";
|
||||
|
||||
|
||||
/**************
|
||||
! Window frame
|
||||
***************/
|
||||
|
||||
.window-frame {
|
||||
border: none;
|
||||
border-radius: $roundness $roundness 0 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue