Added xfce and lightdm styles
parent
14f1db1e01
commit
f0b8fa3ac8
|
@ -53,14 +53,14 @@
|
||||||
@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
|
@define-color lightdm_fg_color #{"" + $lightdm_fg_color};
|
||||||
|
|
||||||
/* window manager colors */
|
/* window manager colors */
|
||||||
@define-color wm_bg @titlebar_bg_color;
|
@define-color wm_bg #{"" + $wm_bg};
|
||||||
@define-color wm_border_focused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21);
|
@define-color wm_border_focused #{"" + $wm_border_focused};
|
||||||
@define-color wm_border_unfocused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.12);
|
@define-color wm_border_unfocused #{"" + $wm_border_unfocused};
|
||||||
@define-color wm_title_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
|
@define-color wm_title_focused #{"" + $wm_title_focused};
|
||||||
@define-color wm_title_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4);
|
@define-color wm_title_unfocused #{"" + $wm_title_unfocused};
|
||||||
@define-color wm_icons_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
|
@define-color wm_icons_focused #{"" + $wm_icons_focused};
|
||||||
@define-color wm_icons_focused_prelight @selected_bg_color;
|
@define-color wm_icons_focused_prelight #{"" + $wm_icons_focused_prelight};
|
||||||
@define-color wm_icons_focused_pressed shade(@selected_bg_color, 0.8);
|
@define-color wm_icons_focused_pressed #{"" + $wm_icons_unfocused_pressed};
|
||||||
@define-color wm_icons_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4);
|
@define-color wm_icons_unfocused #{"" + $wm_icons_unfocused};
|
||||||
@define-color wm_icons_unfocused_prelight @selected_bg_color;
|
@define-color wm_icons_unfocused_prelight #{"" + $wm_icons_unfocused_prelight};
|
||||||
@define-color wm_icons_unfocused_pressed shade(@selected_bg_color, 0.8);
|
@define-color wm_icons_unfocused_pressed #{"" + $wm_icons_unfocused_pressed};
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
@import "global";
|
|
||||||
|
|
||||||
$modules: () !default;
|
$modules: () !default;
|
||||||
|
|
||||||
@mixin exports($name) {
|
@mixin exports($name) {
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "functions";
|
||||||
|
|
||||||
// default color scheme
|
// default color scheme
|
||||||
$bg_color: #eee;
|
$bg_color: #eee;
|
||||||
$fg_color: #333;
|
$fg_color: #333;
|
||||||
|
@ -51,8 +53,20 @@ $osd_fg: $dark_fg_color;
|
||||||
$lightdm_bg_color: $dark_bg_color;
|
$lightdm_bg_color: $dark_bg_color;
|
||||||
$lightdm_fg_color: $dark_fg_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
|
// widget styles
|
||||||
$roundness: 2px;
|
$roundness: 2px;
|
||||||
$spacing: 5px;
|
$spacing: 4px;
|
||||||
$gradient: 0;
|
$gradient: 0;
|
||||||
$contrast: .7;
|
$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;
|
color: $panel_fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
PanelWidget, PanelApplet, PanelToplevel {
|
%panelbutton {
|
||||||
@extend %panel;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
PanelApplet {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.button {
|
|
||||||
-GtkButton-inner-border: 2;
|
|
||||||
|
|
||||||
border-width: 0 1px;
|
border-width: 0 1px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-color: transparent;
|
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 {
|
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/nemo";
|
||||||
@import "apps/panel";
|
@import "apps/panel";
|
||||||
@import "apps/synaptic";
|
@import "apps/synaptic";
|
||||||
|
@import "apps/xfce";
|
||||||
|
@import "apps/unity";
|
||||||
|
@import "apps/lightdm";
|
||||||
|
|
|
@ -3,27 +3,32 @@
|
||||||
***************/
|
***************/
|
||||||
|
|
||||||
@include exports("window") {
|
@include exports("window") {
|
||||||
.window-frame {
|
%window {
|
||||||
border: none;
|
|
||||||
border-radius: $roundness $roundness 0 0;
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
|
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);
|
0 0 0 1px $wm_border_focused;
|
||||||
|
|
||||||
/* this is used for the resize cursor area */
|
|
||||||
margin: $spacing * 3;
|
|
||||||
|
|
||||||
&:backdrop {
|
&:backdrop {
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
|
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; }
|
&.tiled { border-radius: 0; }
|
||||||
|
|
||||||
&.csd {
|
&.csd {
|
||||||
&.popup {
|
&.popup {
|
||||||
|
@extend %window;
|
||||||
|
|
||||||
border-radius: 0;
|
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 {
|
&.tooltip {
|
||||||
|
@ -32,9 +37,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.message-dialog {
|
&.message-dialog {
|
||||||
|
@extend %window;
|
||||||
|
|
||||||
border-radius: $roundness;
|
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