From dd5eb36ecf04dc4a755d96725c7f4316b0224267 Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo 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; -}