From dd5eb36ecf04dc4a755d96725c7f4316b0224267 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 13 Dec 2014 17:36:16 +0530
Subject: [PATCH] Add choosers and other styles
---
gtk-3.0/scss/_choosers.scss | 129 +++++++++++++++++++++++
gtk-3.0/scss/_colors.scss | 10 +-
gtk-3.0/scss/_global.scss | 7 ++
gtk-3.0/scss/_misc.scss | 159 ++++++++++++++++++++++++++++
gtk-3.0/scss/_toggle.scss | 8 +-
gtk-3.0/scss/_view.scss | 89 ----------------
gtk-3.0/scss/widgets.scss | 201 +-----------------------------------
7 files changed, 306 insertions(+), 297 deletions(-)
create mode 100644 gtk-3.0/scss/_choosers.scss
create mode 100644 gtk-3.0/scss/_misc.scss
diff --git a/gtk-3.0/scss/_choosers.scss b/gtk-3.0/scss/_choosers.scss
new file mode 100644
index 0000000..2d1a1cf
--- /dev/null
+++ b/gtk-3.0/scss/_choosers.scss
@@ -0,0 +1,129 @@
+@import "functions";
+@import "global";
+
+
+/***************
+ ! 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);
+ }
+ }
+}
diff --git a/gtk-3.0/scss/_colors.scss b/gtk-3.0/scss/_colors.scss
index 37ab130..f00aaba 100755
--- a/gtk-3.0/scss/_colors.scss
+++ b/gtk-3.0/scss/_colors.scss
@@ -45,13 +45,13 @@
@define-color panel_fg_color @dark_fg_color;
/* osd */
-@define-color osd_base @dark_bg_color;
-@define-color osd_fg @dark_fg_color;
-@define-color osd_bg alpha(@osd_base, 0.8);
+@define-color osd_base #{"" + $osd_base};
+@define-color osd_fg #{"" + $osd_fg};
+@define-color osd_bg #{"" + $osd_bg};
/* lightdm greeter colors */
-@define-color lightdm_bg_color @dark_bg_color;
-@define-color lightdm_fg_color @dark_fg_color;
+@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
+@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
/* window manager colors */
@define-color wm_bg @titlebar_bg_color;
diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss
index f6bbff4..bbb300f 100755
--- a/gtk-3.0/scss/_global.scss
+++ b/gtk-3.0/scss/_global.scss
@@ -42,6 +42,13 @@ $menu_fg_color: $dark_fg_color;
$menubar_bg_color: $dark_bg_color;
$menubar_fg_color: $dark_fg_color;
+$osd_base: $dark_bg_color;
+$osd_fg: $dark_fg_color;
+$osd_bg: fade-out($dark_fg_color, 0.8);
+
+$lightdm_bg_color: $dark_bg_color;
+$lightdm_fg_color: $dark_fg_color;
+
// widget styles
$roundness: 2px;
$spacing: 5px;
diff --git a/gtk-3.0/scss/_misc.scss b/gtk-3.0/scss/_misc.scss
new file mode 100644
index 0000000..35a271c
--- /dev/null
+++ b/gtk-3.0/scss/_misc.scss
@@ -0,0 +1,159 @@
+@import "functions";
+@import "global";
+
+
+/***********
+ ! Tooltip *
+************/
+
+@include exports("tooltip") {
+ .tooltip {
+ border: none;
+ border-radius: $roundness;
+ background-color: $tooltip_bg_color;
+ background-image: none;
+ 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 {
+ border: 1px solid border_normal($bg_color);
+ border-radius: $roundness;
+ background-color: $bg_color;
+ background-image: none;
+ 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; }
+ }
+}
diff --git a/gtk-3.0/scss/_toggle.scss b/gtk-3.0/scss/_toggle.scss
index 4e0199a..70c1f39 100755
--- a/gtk-3.0/scss/_toggle.scss
+++ b/gtk-3.0/scss/_toggle.scss
@@ -78,17 +78,17 @@
outline-offset: -4px;
&.slider {
- border: 1px solid shade($bg_color, 0.8);
+ border: 1px solid border_normal($bg_color);
background-color: shade($bg_color, 1.08);
&:insensitive {
- border-color: shade($bg_color, 0.85);
+ border-color: border_insensitive($bg_color);
background-color: shade($bg_color, 0.9);
}
}
&.trough {
- border-color: shade($bg_color, 0.8);
+ border: 1px solid border_normal($bg_color);
background-color: shade($bg_color, 0.95);
color: $fg_color;
@@ -99,7 +99,7 @@
}
&:insensitive {
- border-color: shade($bg_color, 0.85);
+ border-color: border_insensitive($bg_color);
background-color: shade($bg_color, 0.9);
color: mix($fg_color, $bg_color, 0.5);
}
diff --git a/gtk-3.0/scss/_view.scss b/gtk-3.0/scss/_view.scss
index e2e0c4c..aee0d6b 100644
--- a/gtk-3.0/scss/_view.scss
+++ b/gtk-3.0/scss/_view.scss
@@ -191,92 +191,3 @@
}
}
-
-/*************
- ! 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 {
- border: 1px solid border_normal($bg_color);
- border-radius: $roundness;
- background-color: $bg_color;
- background-image: none;
- 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;
- }
- }
-}
diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss
index c0159c9..562273c 100755
--- a/gtk-3.0/scss/widgets.scss
+++ b/gtk-3.0/scss/widgets.scss
@@ -4,9 +4,11 @@
@import "button";
@import "entry";
@import "calendar";
+@import "choosers";
@import "grid";
@import "infobar";
@import "menu";
+@import "misc";
@import "notebook";
@import "progress";
@import "scrollbar";
@@ -18,127 +20,6 @@
@import "window";
-/*****************
-* color chooser *
-*****************/
-GtkColorSwatch,
-GtkColorSwatch:selected {
- border-width: 1px;
- border-style: solid;
- border-color: alpha(black, 0.1);
- border-radius: 1px;
- background-color: transparent;
- background-clip: border-box;
-}
-
-GtkColorSwatch:hover,
-GtkColorSwatch:selected:hover {
- border-color: alpha(black, 0.3);
-}
-
-GtkColorSwatch.color-dark:hover {
-}
-
-GtkColorSwatch.color-light:hover {
-}
-
-GtkColorSwatch.color-light:selected:hover,
-GtkColorSwatch.color-dark:selected:hover {
- background-image: none;
-}
-
-GtkColorSwatch.left,
-GtkColorSwatch:first-child {
- border-top-left-radius: 2px;
- border-bottom-left-radius: 2px;
-}
-
-GtkColorSwatch.right,
-GtkColorSwatch:last-child {
- border-top-right-radius: 2px;
- border-bottom-right-radius: 2px;
-}
-
-GtkColorSwatch:only-child {
- border-radius: 2px;
-}
-
-GtkColorSwatch.top {
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
-}
-
-GtkColorSwatch.bottom {
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
-}
-
-GtkColorChooserWidget #add-color-button {
- background-clip: padding-box;
- border-color: alpha(black, 0.1);
- background-color: shade($bg_color, 0.95);
- color: $fg_color;
-}
-
-GtkColorChooserWidget #add-color-button:hover {
- border-color: alpha(black, 0.3);
- background-color: shade($bg_color, 0.90);
- color: $fg_color;
-}
-
-.color-active-badge,
-.color-active-badge:selected {
- border-width: 1px;
- border-style: solid;
- border-width: 2px;
- background-color: transparent;
-}
-
-.color-active-badge.color-light,
-.color-active-badge.color-light:hover {
- border-color: alpha(black, 0.3);
- color: alpha(black, 0.3);
-}
-
-.color-active-badge.color-dark,
-.color-active-badge.color-dark:hover {
- border-color: alpha(white, 0.3);
- color: alpha(white, 0.3);
-}
-
-GtkColorEditor GtkColorSwatch {
- border-radius: 2px;
-}
-
-GtkColorEditor GtkColorSwatch.color-dark:hover,
-GtkColorEditor GtkColorSwatch.color-light:hover {
- background-image: none;
- border-color: alpha(black, 0.3);
-}
-
-GtkColorButton.button {
- padding: 2px;
-}
-
-/***********
-* tooltip *
-***********/
-.tooltip {
- border-width: 1px;
- border-style: solid;
- border-color: shade($tooltip_bg_color, 0.8);
- border-radius: 2px;
- background-color: $tooltip_bg_color;
- background-image: none;
- color: $tooltip_fg_color;
-}
-
-.tooltip * {
- background-color: transparent;
-}
-
-
-
/**************
* action-bar *
**************/
@@ -184,68 +65,6 @@ GtkColorButton.button {
padding: 4px;
}
-/***********
-* dialogs *
-***********/
-GtkMessageDialog,
-.prompt {
- -GtkDialog-content-area-border: 0;
- -GtkDialog-action-area-border: 0;
- -GtkDialog-button-spacing: 0;
-
- margin: 0;
- padding: 0;
-}
-
-/********************
-* various choosers *
-********************/
-GtkFontButton .separator,
-GtkFileChooserButton .separator {
- /* always disable separators */
- -GtkWidget-wide-separators: true;
- -GtkWidget-horizontal-separator: 0;
- -GtkWidget-vertical-separator: 0;
-}
-
-GtkFontButton GtkLabel:last-child {
- color: alpha(currentColor, 0.7);
-}
-
-GtkFileChooserButton GtkImage:last-child {
- color: alpha(currentColor, 0.7);
-}
-
-GtkFileChooser .pane-separator,
-GtkFileChooser .pane-separator:hover {
- border-width: 0 1px 0 0;
- border-style: solid;
- border-color: shade($bg_color, 0.8);
- background-color: $bg_color;
- color: shade($bg_color, 0.9);
-}
-
-/* for fallback when header bar not used */
-GtkFileChooser .dialog-action-box {
- border-width: 1px 0 0;
- border-style: solid;
- border-color: shade($bg_color, 0.7);
-}
-
-/*********************
-* app notifications *
-*********************/
-.app-notification {
- border-style: solid;
- border-color: shade($base_color, 0.8);
- border-width: 0 1px 1px 1px;
- border-radius: 0 0 2px 2px;
- padding: 8px;
- background-color: $base_color;
- background-image: none;
- color: $text_color;
-}
-
/*******
* osd *
*******/
@@ -695,19 +514,3 @@ GtkFileChooser .dialog-action-box {
color: shade($selected_bg_color, 0.8);
box-shadow: none;
}
-
-/*************************
-* touch text selections *
-*************************/
-GtkBubbleWindow {
- border-radius: 2px;
- background-clip: border-box;
-}
-
-GtkBubbleWindow.osd.background {
- // background-color: $osd_bg;
-}
-
-GtkBubbleWindow .toolbar {
- background-color: transparent;
-}