From f0b8fa3ac8ac0fc39b7e5cf524aa48d64419e25d Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sat, 24 Jan 2015 00:24:03 +0530 Subject: [PATCH] Added xfce and lightdm styles --- gtk-3.0/scss/_colors.scss | 22 ++-- gtk-3.0/scss/_functions.scss | 2 - gtk-3.0/scss/_global.scss | 16 ++- gtk-3.0/scss/apps/_lightdm.scss | 193 ++++++++++++++++++++++++++++++ gtk-3.0/scss/apps/_panel.scss | 58 ++++----- gtk-3.0/scss/apps/_unity.scss | 70 +++++++++++ gtk-3.0/scss/apps/_xfce.scss | 26 ++++ gtk-3.0/scss/gtk.scss | 3 + gtk-3.0/scss/widgets/_window.scss | 29 +++-- 9 files changed, 366 insertions(+), 53 deletions(-) create mode 100644 gtk-3.0/scss/apps/_lightdm.scss create mode 100644 gtk-3.0/scss/apps/_unity.scss create mode 100644 gtk-3.0/scss/apps/_xfce.scss diff --git a/gtk-3.0/scss/_colors.scss b/gtk-3.0/scss/_colors.scss index dcb562c..86dd590 100755 --- a/gtk-3.0/scss/_colors.scss +++ b/gtk-3.0/scss/_colors.scss @@ -53,14 +53,14 @@ @define-color lightdm_fg_color #{"" + $lightdm_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); +@define-color wm_bg #{"" + $wm_bg}; +@define-color wm_border_focused #{"" + $wm_border_focused}; +@define-color wm_border_unfocused #{"" + $wm_border_unfocused}; +@define-color wm_title_focused #{"" + $wm_title_focused}; +@define-color wm_title_unfocused #{"" + $wm_title_unfocused}; +@define-color wm_icons_focused #{"" + $wm_icons_focused}; +@define-color wm_icons_focused_prelight #{"" + $wm_icons_focused_prelight}; +@define-color wm_icons_focused_pressed #{"" + $wm_icons_unfocused_pressed}; +@define-color wm_icons_unfocused #{"" + $wm_icons_unfocused}; +@define-color wm_icons_unfocused_prelight #{"" + $wm_icons_unfocused_prelight}; +@define-color wm_icons_unfocused_pressed #{"" + $wm_icons_unfocused_pressed}; diff --git a/gtk-3.0/scss/_functions.scss b/gtk-3.0/scss/_functions.scss index 9ea3a1b..6216dc2 100755 --- a/gtk-3.0/scss/_functions.scss +++ b/gtk-3.0/scss/_functions.scss @@ -1,5 +1,3 @@ -@import "global"; - $modules: () !default; @mixin exports($name) { diff --git a/gtk-3.0/scss/_global.scss b/gtk-3.0/scss/_global.scss index 3c51646..d2b1c51 100755 --- a/gtk-3.0/scss/_global.scss +++ b/gtk-3.0/scss/_global.scss @@ -1,3 +1,5 @@ +@import "functions"; + // default color scheme $bg_color: #eee; $fg_color: #333; @@ -51,8 +53,20 @@ $osd_fg: $dark_fg_color; $lightdm_bg_color: $dark_bg_color; $lightdm_fg_color: $dark_fg_color; +$wm_bg: $titlebar_bg_color; +$wm_border_focused: mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21); +$wm_border_unfocused: mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12); +$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, 0.1); +$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, 0.4); +$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, 0.1); +$wm_icons_focused_prelight: $selected_bg_color; +$wm_icons_focused_pressed: shade($selected_bg_color, 0.8); +$wm_icons_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, 0.4); +$wm_icons_unfocused_prelight: $selected_bg_color; +$wm_icons_unfocused_pressed: shade($selected_bg_color, 0.8); + // widget styles $roundness: 2px; -$spacing: 5px; +$spacing: 4px; $gradient: 0; $contrast: .7; diff --git a/gtk-3.0/scss/apps/_lightdm.scss b/gtk-3.0/scss/apps/_lightdm.scss new file mode 100644 index 0000000..333d6af --- /dev/null +++ b/gtk-3.0/scss/apps/_lightdm.scss @@ -0,0 +1,193 @@ +/*********************** + ! LightDM GTK Greeter * + ***********************/ + +@include exports("lightdm") { + #panel_window { + background-color: transparent; + background-image: none; + color: white; + font: bold; + text-shadow: 0 1px alpha(black, 0.5); + icon-shadow: 0 1px alpha(black, 0.5); + + .menubar { + &, > .menuitem { + background-color: transparent; + background-image: none; + color: white; + font: bold; + text-shadow: 0 1px alpha(black, 0.5); + icon-shadow: 0 1px alpha(black, 0.5); + + *:hover { color: white; } + + &:hover { + border-style: none; + background-color: alpha(white, 0.2); + background-image: none; + color: white; + } + + &:insensitive { color: alpha(white, 0.7); } + + .menu { + border-radius: 1px; + + .menuitem { + font: normal; + text-shadow: none; + } + } + } + } + } + + #content_frame { padding-bottom: 14px; } + + #login_window, #shutdown_dialog, #restart_dialog { + border-style: none; + border-radius: $roundness; + background-color: $lightdm_bg_color; + color: $lightdm_fg_color; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 mix(shade($lightdm_bg_color, 0.7), $lightdm_fg_color, 0.21), + inset -1px 0 mix(shade($lightdm_bg_color, 0.7), $lightdm_fg_color, 0.21), + inset 0 1px mix(shade($lightdm_bg_color, 0.7), $lightdm_fg_color, 0.21), + inset 0 -1px mix(shade($lightdm_bg_color, 0.7), $lightdm_fg_color, 0.21); + + .button { + padding: 3px 15px; + border-width: 1px; + border-radius: $roundness; + border-style: solid; + border-color: shade($lightdm_bg_color, 0.8); + background-color: shade($lightdm_bg_color, 1.08); + background-image: none; + color: $lightdm_fg_color; + transition: all 150ms ease-out; + + &.default, &:focus, &:active:focus { + border-color: shade($selected_bg_color, 0.8); + background-color: shade($selected_bg_color, 1.08); + background-image: none; + color: $selected_fg_color; + + &:hover { + border-color: shade($selected_bg_color, 0.7); + background-color: $selected_bg_color; + } + } + } + } + + + #login_window { + .menu { border-radius: 1px; } + + GtkComboBox .button { + &, &:hover, &:active, &:active:hover, + &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { + padding: 0; + background: none; + border-style: none; + box-shadow: none; + } + } + + .entry { + padding: 3px 5px; + border-width: 1px; + border-style: solid; + border-color: shade($lightdm_bg_color, 0.8); + border-radius: $roundness; + background-color: shade($lightdm_bg_color, 0.9); + background-image: none; + color: $lightdm_fg_color; + box-shadow: none; + transition: all 150ms ease-out; + + &:focus, &:hover { + border-color: shade($lightdm_bg_color, 0.7); + + box-shadow: inset 1px 0 alpha($dark_shadow, 0.10), + inset 0 1px alpha($dark_shadow, 0.12), + inset -1px 0 alpha($dark_shadow, 0.10), + inset 0 -1px alpha($dark_shadow, 0.05); + } + } + } + + #user_combobox { + color: $lightdm_fg_color; + font: 18px; + + .menu { font: normal; } + + .arrow { olor: mix($lightdm_fg_color, $lightdm_bg_color, 0.5); } + } + + #user_image { + padding: 3px; + border-radius: $roundness; + + /* draw border using box-shadow */ + box-shadow: inset 1px 0 shade($lightdm_bg_color, 0.7), + inset -1px 0 shade($lightdm_bg_color, 0.7), + inset 0 1px shade($lightdm_bg_color, 0.7), + inset 0 -1px shade($lightdm_bg_color, 0.7); + } + + #user_image_border { + border-radius: $roundness; + background-color: shade($lightdm_bg_color, 0.9); + background-image: none; + box-shadow: inset 1px 0 alpha($dark_shadow, 0.07), + inset 0 1px alpha($dark_shadow, 0.08), + inset -1px 0 alpha($dark_shadow, 0.07), + inset 0 -1px alpha($dark_shadow, 0.05); + } + + #buttonbox_frame { + padding-top: 10px; + padding-bottom: 0; + border-style: none; + border-bottom-left-radius: $roundness; + border-bottom-right-radius: $roundness; + background-color: transparent; + background-image: none; + box-shadow: none; + } + + + + /* shutdown button */ + #shutdown_button { + border-color: shade($error_bg_color, 0.8); + background-color: shade($error_bg_color, 1.08); + background-image: none; + color: $error_fg_color; + + &:hover, &:active, &:active:hover { + border-color: shade($error_bg_color, 0.7); + background-color: $error_bg_color; + } + } + + /* restart button */ + #restart_button { + border-color: shade($warning_bg_color, 0.8); + background-color: shade($warning_bg_color, 1.08); + background-image: none; + color: $warning_fg_color; + + &:hover, &:active, &:active:hover { + border-color: shade($warning_bg_color, 0.7); + background-color: $warning_bg_color; + } + } + + /* password warning */ + #greeter_infobar { font: bold; } +} diff --git a/gtk-3.0/scss/apps/_panel.scss b/gtk-3.0/scss/apps/_panel.scss index adc096e..c84c98b 100644 --- a/gtk-3.0/scss/apps/_panel.scss +++ b/gtk-3.0/scss/apps/_panel.scss @@ -9,6 +9,35 @@ color: $panel_fg_color; } + %panelbutton { + border-width: 0 1px; + border-radius: 0; + border-color: transparent; + background-color: transparent; + background-image: none; + color: $panel_fg_color; + + &:hover, &:prelight { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.11)); + + border-color: mix($panel_bg_color, $panel_fg_color, 0.11); + color: shade($panel_fg_color, 1.08); + } + + &:active, &:checked { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.21), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, 0.21); + color: shade($panel_fg_color, 1.08); + + &:prelight { + @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.31), to top); + + border-color: mix($panel_bg_color, $panel_fg_color, 0.31); + } + } + } + PanelWidget, PanelApplet, PanelToplevel { @extend %panel; @@ -19,34 +48,9 @@ border: none; .button { + @extend %panelbutton; + -GtkButton-inner-border: 2; - - border-width: 0 1px; - border-radius: 0; - border-color: transparent; - background-color: transparent; - background-image: none; - color: $panel_fg_color; - - &:hover, &:prelight { - @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.11)); - - border-color: mix($panel_bg_color, $panel_fg_color, 0.11); - color: shade($panel_fg_color, 1.08); - } - - &:active, &:checked { - @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.21), to top); - - border-color: mix($panel_bg_color, $panel_fg_color, 0.21); - color: shade($panel_fg_color, 1.08); - - &:prelight { - @include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.31), to top); - - border-color: mix($panel_bg_color, $panel_fg_color, 0.31); - } - } } } diff --git a/gtk-3.0/scss/apps/_unity.scss b/gtk-3.0/scss/apps/_unity.scss new file mode 100644 index 0000000..5cea4ad --- /dev/null +++ b/gtk-3.0/scss/apps/_unity.scss @@ -0,0 +1,70 @@ +@import "panel"; + +/**************** + ! Unity styles * +*****************/ + +@include exports("unity") { + UnityDecoration { + -UnityDecoration-extents: 28px 1px 1px 1px; + -UnityDecoration-input-extents: 10px; + + -UnityDecoration-shadow-offset-x: 1px; + -UnityDecoration-shadow-offset-y: 1px; + -UnityDecoration-active-shadow-color: rgba(0,0,0,0.7); + -UnityDecoration-active-shadow-radius: 8px; + -UnityDecoration-inactive-shadow-color: rgba(0,0,0,0.5); + -UnityDecoration-inactive-shadow-radius: 5px; + + -UnityDecoration-glow-size: 10px; + -UnityDecoration-glow-color: $selected_bg_color; + + -UnityDecoration-title-indent: 10px; + -UnityDecoration-title-fade: 35px; + -UnityDecoration-title-alignment: 0.0; + + + &.top { + border: 1px solid $wm_border_focused; + border-bottom: none; + border-radius: 2px 2px 0 0; + padding: 1px ($spacing * 2) 0 ($spacing * 2); + background-color: $titlebar_bg_color; + color: mix($titlebar_fg_color, $titlebar_bg_color, 0.1); + text-shadow: none; + + &:backdrop { + border: 1px solid $wm_border_unfocused; + color: mix($titlebar_fg_color, $titlebar_bg_color, 0.4); + } + } + + &.left, &.right, &.bottom { + background-color: $wm_border_focused; + + &:backdrop { background-color: $wm_border_unfocused; } + } + } + + UnityPanelWidget, .unity-panel { + @extend %panel; + + border: none; + } + + .unity-panel { + &.menuitem, .menuitem { + border-width: 0 1px; + color: $panel_fg_color; + + &:hover, *:hover { + border-color: mix($panel_bg_color, $panel_fg_color, 0.21); + background-color: mix($panel_bg_color, $panel_fg_color, 0.21); + background-image: none; + color: shade($panel_fg_color, 1.08); + } + } + } + + SheetStyleDialog.unity-force-quit { background-color: $bg_color; } +} diff --git a/gtk-3.0/scss/apps/_xfce.scss b/gtk-3.0/scss/apps/_xfce.scss new file mode 100644 index 0000000..20dd546 --- /dev/null +++ b/gtk-3.0/scss/apps/_xfce.scss @@ -0,0 +1,26 @@ +@import "panel"; + +/*************** + ! Xfce styles * +****************/ + +@include exports("xfce") { + XfceHeading { + margin: 0; + padding: 0; + border: none; + background-image: none; + background-color: $base_color; + color: $text_color; + } + + .xfce4-panel { + @extend %panel; + + font: normal; + + .button { @extend %panelbutton; } + + .menu { -gtk-image-effect: none; } + } +} diff --git a/gtk-3.0/scss/gtk.scss b/gtk-3.0/scss/gtk.scss index 26eeaa5..e593bcb 100755 --- a/gtk-3.0/scss/gtk.scss +++ b/gtk-3.0/scss/gtk.scss @@ -30,3 +30,6 @@ @import "apps/nemo"; @import "apps/panel"; @import "apps/synaptic"; +@import "apps/xfce"; +@import "apps/unity"; +@import "apps/lightdm"; diff --git a/gtk-3.0/scss/widgets/_window.scss b/gtk-3.0/scss/widgets/_window.scss index 8f354c8..8d60778 100755 --- a/gtk-3.0/scss/widgets/_window.scss +++ b/gtk-3.0/scss/widgets/_window.scss @@ -3,27 +3,32 @@ ***************/ @include exports("window") { - .window-frame { - border: none; - border-radius: $roundness $roundness 0 0; + %window { 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; + 0 0 0 1px $wm_border_focused; &: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); + 0 0 0 1px $wm_border_unfocused; } + } + + .window-frame { + @extend %window; + + border: none; + border-radius: $roundness $roundness 0 0; + + /* this is used for the resize cursor area */ + margin: $spacing * 3; &.tiled { border-radius: 0; } &.csd { &.popup { + @extend %window; + 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 { @@ -32,9 +37,9 @@ } &.message-dialog { + @extend %window; + 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); } } }