diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss index 82f84e0..fe017a6 100644 --- a/gtk-3.0/scss/_button.scss +++ b/gtk-3.0/scss/_button.scss @@ -1,26 +1,39 @@ @import "functions"; @mixin linked_button($bg, $shadow) { - border-width: 1px; + border: 1px solid border_normal($bg); border-radius: 0; - border-right-width: 0; - border-left-width: 0; - box-shadow: inset -1px 0 border_normal($bg); + border-right-style: none; + border-left-style: none; + box-shadow: inset -1px 0 border_normal($bg), + 0 1px 2px -1px alpha($dark_shadow, .3); &:first-child { border-width: 1px; border-radius: $roundness; - border-right-width: 0; - border-bottom-right-radius: 0; + 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-width: 0; - border-bottom-left-radius: 0; + 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 { @@ -28,7 +41,10 @@ border-radius: $roundness; } - &:focus, &:hover { box-shadow: inset -1px 0 border_focus($bg); } + &: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 { @@ -61,11 +77,16 @@ border-style: solid; color: $fg; transition: 100ms ease; + box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3); -GtkWidget-focus-padding: 1; -GtkWidget-focus-line-width: 0; - &:focus, &:hover { @include linear-gradient(shade($bg, 1.1)); } + &:focus, &:hover { + @include linear-gradient(shade($bg, 1.1)); + + box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5); + } &:active { @include linear-gradient(shade($bg, .95)); @@ -80,6 +101,7 @@ @include linear-gradient(shade($bg, .95)); color: mix($bg, $fg, .5); + box-shadow: none; } &:active *:insensitive { @@ -94,12 +116,10 @@ &:insensitive { color: shade($bg, .85); } } - - &.linked, &.raised.linked, .linked & { @include linked_button(shade($bg, 1.05), $dark_shadow); } } .button { @include button($bg_color, $fg_color); &.default { @include button($selected_bg_color, $selected_fg_color); } -} \ No newline at end of file +} diff --git a/gtk-3.0/scss/_colors.scss b/gtk-3.0/scss/_colors.scss new file mode 100644 index 0000000..37ab130 --- /dev/null +++ b/gtk-3.0/scss/_colors.scss @@ -0,0 +1,67 @@ +@import "global"; + +/* dark color scheme */ +@define-color dark_bg_color #{"" + $dark_bg_color}; +@define-color dark_fg_color #{"" + $dark_fg_color}; + +/* colormap actually used by the theme, to be overridden in other css files */ +@define-color theme_bg_color #{"" + $bg_color}; +@define-color theme_fg_color #{"" + $fg_color}; +@define-color theme_base_color #{"" + $base_color}; +@define-color theme_text_color #{"" + $text_color}; +@define-color theme_selected_bg_color #{"" + $selected_bg_color}; +@define-color theme_selected_fg_color #{"" + $selected_fg_color}; +@define-color theme_tooltip_bg_color #{"" + $tooltip_bg_color}; +@define-color theme_tooltip_fg_color #{"" + $tooltip_fg_color}; + +/* shadow effects */ +@define-color light_shadow #{"" + $light_shadow}; +@define-color dark_shadow #{"" + $dark_shadow}; + +/* misc colors used by gtk+ */ +@define-color info_fg_color #{"" + $info_fg_color}; +@define-color info_bg_color #{"" + $info_bg_color}; +@define-color warning_fg_color #{"" + $warning_fg_color}; +@define-color warning_bg_color #{"" + $warning_bg_color}; +@define-color question_fg_color #{"" + $question_fg_color}; +@define-color question_bg_color #{"" + $question_bg_color}; +@define-color error_fg_color #{"" + $error_fg_color}; +@define-color error_bg_color #{"" + $error_bg_color}; +@define-color link_color #{"" + $link_color}; +@define-color success_color #{"" + $success_color}; +@define-color warning_color #{"" + $warning_color}; +@define-color error_color #{"" + $error_color}; + +/* widget colors */ +@define-color titlebar_bg_color @dark_bg_color; +@define-color titlebar_fg_color @dark_fg_color; +@define-color menubar_bg_color @dark_bg_color; +@define-color menubar_fg_color @dark_fg_color; +@define-color toolbar_bg_color @theme_bg_color; +@define-color toolbar_fg_color @theme_fg_color; +@define-color menu_bg_color @dark_bg_color; +@define-color menu_fg_color @dark_fg_color; +@define-color panel_bg_color @dark_bg_color; +@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); + +/* lightdm greeter colors */ +@define-color lightdm_bg_color @dark_bg_color; +@define-color lightdm_fg_color @dark_fg_color; + +/* window manager colors */ +@define-color wm_bg @titlebar_bg_color; +@define-color wm_border_focused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21); +@define-color wm_border_unfocused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.12); +@define-color wm_title_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1); +@define-color wm_title_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4); +@define-color wm_icons_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1); +@define-color wm_icons_focused_prelight @selected_bg_color; +@define-color wm_icons_focused_pressed shade(@selected_bg_color, 0.8); +@define-color wm_icons_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4); +@define-color wm_icons_unfocused_prelight @selected_bg_color; +@define-color wm_icons_unfocused_pressed shade(@selected_bg_color, 0.8); diff --git a/gtk-3.0/scss/_entry.scss b/gtk-3.0/scss/_entry.scss index dc9e658..f86563b 100644 --- a/gtk-3.0/scss/_entry.scss +++ b/gtk-3.0/scss/_entry.scss @@ -40,7 +40,8 @@ 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); + inset 0 -1px alpha($dark_shadow, .05), + 0 1px 2px -1px shade($bg_color, 1.4); &:selected, &:selected:focus { background-color: $selected_bg_color; @@ -65,8 +66,4 @@ &.image.left { padding-right: $spacing; } } -.entry { - @include entry($base_color, $text_color); - - .linked & { @include linked_entry($base_color); } -} \ No newline at end of file +.entry { @include entry($base_color, $text_color); } diff --git a/gtk-3.0/scss/_functions.scss b/gtk-3.0/scss/_functions.scss index ab12059..5d90e85 100644 --- a/gtk-3.0/scss/_functions.scss +++ b/gtk-3.0/scss/_functions.scss @@ -29,15 +29,15 @@ } @function border_focus($color) { - @return shade($color, ($contrast - .1)); + @return shade($color, ($contrast - .05)); } @function border_active($color) { - @return shade($color, ($contrast - .15)); + @return shade($color, ($contrast - .10)); } @function border_insensitive($color) { - @return shade($color, ($contrast + .05)); + @return shade($color, ($contrast + .1)); } @mixin linear-gradient($color, $direction: to bottom) { @@ -61,4 +61,4 @@ &:insensitive { border-color: border_insensitive($color); } &:active *:insensitive { border-color: border_normal($color); } -} \ No newline at end of file +} diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss index eee1977..c19db09 100644 --- a/gtk-3.0/scss/_global.scss +++ b/gtk-3.0/scss/_global.scss @@ -1,30 +1,30 @@ /* default color scheme */ -$bg_color: #dedede; -$fg_color: #555555; -$base_color: #f9f9f9; -$text_color: #2d2d2d; -$selected_bg_color: #d64937; -$selected_fg_color: #f9f9f9; -$tooltip_bg_color: #2d2d2d; -$tooltip_fg_color: #dedede; +$bg_color: #eee; +$fg_color: #444; +$base_color: #fff; +$text_color: #444; +$selected_bg_color: #f06860; +$selected_fg_color: #fff; +$tooltip_bg_color: #444; +$tooltip_fg_color: #eee; /* dark colors */ -$dark_bg_color: #2d2d2d; -$dark_fg_color: #dedede; +$dark_bg_color: #444; +$dark_fg_color: #eee; /* shadows */ $dark_shadow: #000; $light_shadow: #fff; /* misc colors used by gtk+ */ -$info_fg_color: rgb (58, 135, 173); -$info_bg_color: rgb (217, 237, 247); -$warning_fg_color: rgb (192, 152, 83); -$warning_bg_color: rgb (252, 248, 227); -$question_fg_color: rgb (214, 73, 55); -$question_bg_color: rgb (252, 229, 213); -$error_fg_color: rgb (185, 74, 72); -$error_bg_color: rgb (242, 222, 222); +$info_fg_color: #3986ac; +$info_bg_color: #d9edf7; +$warning_fg_color: #c09853; +$warning_bg_color: #fcf8e3; +$question_fg_color: #d64937; +$question_bg_color: #fce5d5; +$error_fg_color: #b94a48; +$error_bg_color: #f2dede; $link_color: #fc6f5d; $success_color: #53a93f; $warning_color: #f57900; @@ -40,4 +40,4 @@ $menu_fg_color: $dark_fg_color; $roundness: 2px; $spacing: 5px; $gradient: 0; -$contrast: .7; \ No newline at end of file +$contrast: .7; diff --git a/gtk-3.0/scss/_toolbar.scss b/gtk-3.0/scss/_toolbar.scss index e4f21ca..fd96a69 100644 --- a/gtk-3.0/scss/_toolbar.scss +++ b/gtk-3.0/scss/_toolbar.scss @@ -61,7 +61,7 @@ @include linear-gradient($titlebar_bg_color); border-radius: $roundness $roundness 0 0; - color: mix($titlebar_fg_color, $titlebar_bg_color, .9); + color: mix($titlebar_fg_color, $titlebar_bg_color, .1); &:backdrop { @include linear-gradient($titlebar_bg_color); @@ -103,18 +103,3 @@ } } } - -.window-frame { - margin: 10px; - border-style: none; - border-radius: $roundness $roundness 0 0; - box-shadow: 0 3px 7px 1px fade-out(black, .3), - 0 0 0 1px mix($titlebar_fg_color, $titlebar_bg_color, 21%); - - &:backdrop { - box-shadow: 0 3px 5px 1px fade-out(black, 0.5), - 0 0 0 1px mix($titlebar_fg_color, $titlebar_bg_color, 12%); - } - - &.tiled { border-radius: 0; } -} \ No newline at end of file diff --git a/gtk-3.0/scss/_window.scss b/gtk-3.0/scss/_window.scss new file mode 100644 index 0000000..eb91653 --- /dev/null +++ b/gtk-3.0/scss/_window.scss @@ -0,0 +1,35 @@ +.window-frame { + border-style: none; + border-radius: 2px 2px 0 0; + box-shadow: 0 3px 7px 1px alpha(black, 0.7), + 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: 10px; + + &:backdrop { + box-shadow: 0 3px 5px 1px alpha(black, 0.5), + 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 1px 2px alpha(black, 0.8), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + } + + &.tooltip { + border-radius: 2px; + box-shadow: none; + } + + &.message-dialog { + border-radius: 2px; + box-shadow: 0 1px 2px alpha(black, 0.8), + 0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); + } + } +} diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss index 178dccc..09c5ce7 100644 --- a/gtk-3.0/scss/widgets.scss +++ b/gtk-3.0/scss/widgets.scss @@ -1,5 +1,7 @@ +@import "colors"; @import "base"; @import "button"; @import "entry"; @import "menu"; -@import "toolbar"; \ No newline at end of file +@import "toolbar"; +@import "window";