Tweak things

pull/224/head
Satyajit Sahoo 2014-12-14 17:52:13 +05:30
parent 63b89ba1f0
commit e2dc6ca7cc
7 changed files with 51 additions and 50 deletions

View File

@ -35,13 +35,14 @@
}
@mixin entry($bg, $fg) {
@include linear-gradient($bg);
@include border(shade($bg, .9));
padding: ($spacing - 1px) ($spacing + 1px);
padding: ($spacing - 1px) $spacing;
border-width: 1px;
border-style: solid;
border-radius: $roundness;
background-color: $bg;
background-image: none;
transition: border 100ms ease;
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
inset 0 1px alpha($dark_shadow, .12),
@ -55,8 +56,8 @@
}
&:insensitive {
@include linear-gradient(shade($bg, .9));
background-color: shade($bg, .9);
background-image: none;
color: mix($bg, $fg, .5);
box-shadow: none;
}
@ -69,7 +70,7 @@
color: $selected_fg_color;
}
&.image.left { padding-right: $spacing; }
&.image.left { padding-right: ($spacing / 2); }
}
@include exports("entry") {

View File

@ -5,6 +5,7 @@ $modules: () !default;
@mixin exports($name) {
@if (not index($modules, $name)) {
$modules: append($modules, $name) !global;
@content;
}
}
@ -18,15 +19,7 @@ $modules: () !default;
}
@function shade($color, $amount) {
// @if type-of($color) == "color" {
// @if $amount < 1 {
// @return darken($color, ((1 - $amount) * 100));
// } @else {
// @return lighten($color, (($amount - 1) * 100));
// }
// } @else {
@return unquote("shade(#{$color},#{$amount})");
// }
@return unquote("shade(#{$color},#{$amount})");
}
@function mix($color1, $color2, $amount) {
@ -50,13 +43,18 @@ $modules: () !default;
}
@mixin linear-gradient($color, $direction: to bottom) {
$amount: $gradient / 2;
@if $gradient == 0 {
background-color: $color;
background-image: none;
} @else {
$amount: $gradient / 2;
background-color: $color;
background-image: linear-gradient($direction,
shade($color, (1 + $amount)),
shade($color, (1 - $amount))
);
background-color: $color;
background-image: linear-gradient($direction,
shade($color, (1 + $amount)),
shade($color, (1 - $amount))
);
}
}
@mixin border($color) {

View File

@ -1,15 +1,15 @@
// default color scheme
$bg_color: #eee;
$fg_color: #444;
$fg_color: #333;
$base_color: #fff;
$text_color: #444;
$text_color: #333;
$selected_bg_color: #f06860;
$selected_fg_color: #fff;
$tooltip_bg_color: #444;
$tooltip_bg_color: #333;
$tooltip_fg_color: #eee;
// dark colors
$dark_bg_color: #444;
$dark_bg_color: #333;
$dark_fg_color: #eee;
// shadows
@ -50,6 +50,6 @@ $lightdm_fg_color: $dark_fg_color;
// widget styles
$roundness: 2px;
$spacing: 5px;
$spacing: 6px;
$gradient: 0;
$contrast: .7;

View File

@ -24,9 +24,9 @@
$bg_color: nth($colors, 2);
&.#{$type} {
@include linear-gradient($bg_color);
border: 1px solid shade($bg_color, 0.8);
background-color: $bg_color;
background-image: none;
color: $fg_color;
.button {

View File

@ -18,10 +18,10 @@
@include exports("tooltip") {
.tooltip {
@include linear-gradient($tooltip_bg_color);
border: none;
border-radius: $roundness;
background-color: $tooltip_bg_color;
background-image: none;
color: $tooltip_fg_color;
* { background-color: transparent; }
@ -111,10 +111,10 @@
@include exports("floatingbar") {
.floating-bar {
@include linear-gradient($bg_color);
border: 1px solid border_normal($bg_color);
border-radius: $roundness;
background-color: $bg_color;
background-image: none;
color: $fg_color;
&.top {

View File

@ -30,8 +30,8 @@
}
.progressbar {
background-image: none;
background-color: $selected_bg_color;
@include linear-gradient($selected_bg_color);
border-radius: 0;
box-shadow: none;
@ -48,8 +48,7 @@
&.left.right { box-shadow: none; }
&.vertical {
background-image: none;
background-color: $selected_bg_color;
@include linear-gradient($selected_bg_color, to right);
&.bottom {
border-bottom-left-radius: $roundness;
@ -75,16 +74,17 @@
.level-bar {
&.trough {
@include linear-gradient(shade($bg_color, 1.08), to top);
border: 1px solid alpha(border_normal($bg_color), 0.5);
background-color: shade($bg_color, 1.08);
background-image: none;
border-radius: $roundness;
}
&.fill-block {
@include linear-gradient($selected_bg_color);
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
// :nth-child working on discrete indicators
background-color: $selected_bg_color;
border-color: transparent;
border-radius: 0;
@ -123,9 +123,10 @@
&.slider {
@include linear-gradient(shade($bg_color, 1.08));
border-radius: 8px;
background-color: shade($bg_color, 1.08);
background-image: none;
/* we will draw the border using box shadow for now */
box-shadow: inset 1px 0 border_normal($bg_color),
inset 0 1px border_normal($bg_color),
@ -147,8 +148,8 @@
}
&:insensitive {
background-color: shade($bg_color, 0.9);
background-image: none;
@include linear-gradient(shade($bg_color, 0.9));
box-shadow: inset 1px 0 border_insensitive($bg_color),
inset 0 1px border_insensitive($bg_color),
inset -1px 0 border_insensitive($bg_color),
@ -170,26 +171,27 @@
&.trough {
@include linear-gradient(shade($bg_color, 1.08));
margin: 7px 0;
border: 1px solid alpha(border_normal($bg_color), 0.5);
border-radius: $roundness;
background-color: shade($bg_color, 1.08);
background-image: none;
&:insensitive { background-color: shade($bg_color, 0.9); }
&:insensitive { @include linear-gradient(shade($bg_color, 0.9)); }
&.vertical { margin: 0 7px; }
}
&.highlight {
&, &.left, &.bottom {
@include linear-gradient($selected_bg_color);
border-color: $selected_bg_color;
background-color: $selected_bg_color;
background-image: none;
&:insensitive {
@include linear-gradient(shade($bg_color, 0.8));
border-color: shade($bg_color, 0.7);
background-color: shade($bg_color, 0.8);
}
}
}

View File

@ -14,7 +14,7 @@
color: $fg;
&:insensitive {
@include linear-gradient(darken($bg, 10%));
@include linear-gradient(shade($bg, .9));
color: mix($fg, $bg, .5);
}
@ -105,7 +105,7 @@
&:active, &:active:hover {
background-image: none;
background-color: transparent;
color: darken($selected_bg_color, 10%);
color: shade($selected_bg_color, .9);
box-shadow: none;
}