Added a color defintion file so other apps can get color from theme
Satyajit Sahoo
parent
6eff3bdc1f
commit
2267965321
|
|
@ -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); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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); }
|
||||
}
|
||||
.entry { @include entry($base_color, $text_color); }
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
$contrast: .7;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
@import "colors";
|
||||
@import "base";
|
||||
@import "button";
|
||||
@import "entry";
|
||||
@import "menu";
|
||||
@import "toolbar";
|
||||
@import "toolbar";
|
||||
@import "window";
|
||||
|
|
|
|||
Loading…
Reference in New Issue