Added xfce and lightdm styles
Satyajit Sahoo
parent
14f1db1e01
commit
f0b8fa3ac8
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "global";
|
||||
|
||||
$modules: () !default;
|
||||
|
||||
@mixin exports($name) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
|
@ -9,18 +9,7 @@
|
|||
color: $panel_fg_color;
|
||||
}
|
||||
|
||||
PanelWidget, PanelApplet, PanelToplevel {
|
||||
@extend %panel;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
PanelApplet {
|
||||
border: none;
|
||||
|
||||
.button {
|
||||
-GtkButton-inner-border: 2;
|
||||
|
||||
%panelbutton {
|
||||
border-width: 0 1px;
|
||||
border-radius: 0;
|
||||
border-color: transparent;
|
||||
|
|
@ -48,6 +37,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
PanelWidget, PanelApplet, PanelToplevel {
|
||||
@extend %panel;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
PanelApplet {
|
||||
border: none;
|
||||
|
||||
.button {
|
||||
@extend %panelbutton;
|
||||
|
||||
-GtkButton-inner-border: 2;
|
||||
}
|
||||
}
|
||||
|
||||
PanelSeparator {
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
|
|
@ -30,3 +30,6 @@
|
|||
@import "apps/nemo";
|
||||
@import "apps/panel";
|
||||
@import "apps/synaptic";
|
||||
@import "apps/xfce";
|
||||
@import "apps/unity";
|
||||
@import "apps/lightdm";
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue