Added xfce and lightdm styles

pull/224/head
Satyajit Sahoo 2015-01-24 00:24:03 +05:30
parent 14f1db1e01
commit f0b8fa3ac8
9 changed files with 366 additions and 53 deletions

View File

@ -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};

View File

@ -1,5 +1,3 @@
@import "global";
$modules: () !default;
@mixin exports($name) {

View File

@ -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;

View File

@ -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; }
}

View File

@ -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);
}
}
}
}

View File

@ -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; }
}

View File

@ -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; }
}
}

View File

@ -30,3 +30,6 @@
@import "apps/nemo";
@import "apps/panel";
@import "apps/synaptic";
@import "apps/xfce";
@import "apps/unity";
@import "apps/lightdm";

View File

@ -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);
}
}
}