Tweak things
parent
63b89ba1f0
commit
e2dc6ca7cc
|
@ -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") {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue