Tweak things
parent
63b89ba1f0
commit
e2dc6ca7cc
|
@ -35,13 +35,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin entry($bg, $fg) {
|
@mixin entry($bg, $fg) {
|
||||||
@include linear-gradient($bg);
|
|
||||||
@include border(shade($bg, .9));
|
@include border(shade($bg, .9));
|
||||||
|
|
||||||
padding: ($spacing - 1px) ($spacing + 1px);
|
padding: ($spacing - 1px) $spacing;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
|
background-color: $bg;
|
||||||
|
background-image: none;
|
||||||
transition: border 100ms ease;
|
transition: border 100ms ease;
|
||||||
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
|
box-shadow: inset 1px 0 alpha($dark_shadow, .1),
|
||||||
inset 0 1px alpha($dark_shadow, .12),
|
inset 0 1px alpha($dark_shadow, .12),
|
||||||
|
@ -55,8 +56,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
@include linear-gradient(shade($bg, .9));
|
background-color: shade($bg, .9);
|
||||||
|
background-image: none;
|
||||||
color: mix($bg, $fg, .5);
|
color: mix($bg, $fg, .5);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
@ -69,7 +70,7 @@
|
||||||
color: $selected_fg_color;
|
color: $selected_fg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.image.left { padding-right: $spacing; }
|
&.image.left { padding-right: ($spacing / 2); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@include exports("entry") {
|
@include exports("entry") {
|
||||||
|
|
|
@ -5,6 +5,7 @@ $modules: () !default;
|
||||||
@mixin exports($name) {
|
@mixin exports($name) {
|
||||||
@if (not index($modules, $name)) {
|
@if (not index($modules, $name)) {
|
||||||
$modules: append($modules, $name) !global;
|
$modules: append($modules, $name) !global;
|
||||||
|
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -18,15 +19,7 @@ $modules: () !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function shade($color, $amount) {
|
@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) {
|
@function mix($color1, $color2, $amount) {
|
||||||
|
@ -50,6 +43,10 @@ $modules: () !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin linear-gradient($color, $direction: to bottom) {
|
@mixin linear-gradient($color, $direction: to bottom) {
|
||||||
|
@if $gradient == 0 {
|
||||||
|
background-color: $color;
|
||||||
|
background-image: none;
|
||||||
|
} @else {
|
||||||
$amount: $gradient / 2;
|
$amount: $gradient / 2;
|
||||||
|
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
|
@ -58,6 +55,7 @@ $modules: () !default;
|
||||||
shade($color, (1 - $amount))
|
shade($color, (1 - $amount))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin border($color) {
|
@mixin border($color) {
|
||||||
border-color: border_normal($color);
|
border-color: border_normal($color);
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
// default color scheme
|
// default color scheme
|
||||||
$bg_color: #eee;
|
$bg_color: #eee;
|
||||||
$fg_color: #444;
|
$fg_color: #333;
|
||||||
$base_color: #fff;
|
$base_color: #fff;
|
||||||
$text_color: #444;
|
$text_color: #333;
|
||||||
$selected_bg_color: #f06860;
|
$selected_bg_color: #f06860;
|
||||||
$selected_fg_color: #fff;
|
$selected_fg_color: #fff;
|
||||||
$tooltip_bg_color: #444;
|
$tooltip_bg_color: #333;
|
||||||
$tooltip_fg_color: #eee;
|
$tooltip_fg_color: #eee;
|
||||||
|
|
||||||
// dark colors
|
// dark colors
|
||||||
$dark_bg_color: #444;
|
$dark_bg_color: #333;
|
||||||
$dark_fg_color: #eee;
|
$dark_fg_color: #eee;
|
||||||
|
|
||||||
// shadows
|
// shadows
|
||||||
|
@ -50,6 +50,6 @@ $lightdm_fg_color: $dark_fg_color;
|
||||||
|
|
||||||
// widget styles
|
// widget styles
|
||||||
$roundness: 2px;
|
$roundness: 2px;
|
||||||
$spacing: 5px;
|
$spacing: 6px;
|
||||||
$gradient: 0;
|
$gradient: 0;
|
||||||
$contrast: .7;
|
$contrast: .7;
|
||||||
|
|
|
@ -24,9 +24,9 @@
|
||||||
$bg_color: nth($colors, 2);
|
$bg_color: nth($colors, 2);
|
||||||
|
|
||||||
&.#{$type} {
|
&.#{$type} {
|
||||||
|
@include linear-gradient($bg_color);
|
||||||
|
|
||||||
border: 1px solid shade($bg_color, 0.8);
|
border: 1px solid shade($bg_color, 0.8);
|
||||||
background-color: $bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
|
|
@ -18,10 +18,10 @@
|
||||||
|
|
||||||
@include exports("tooltip") {
|
@include exports("tooltip") {
|
||||||
.tooltip {
|
.tooltip {
|
||||||
|
@include linear-gradient($tooltip_bg_color);
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
background-color: $tooltip_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $tooltip_fg_color;
|
color: $tooltip_fg_color;
|
||||||
|
|
||||||
* { background-color: transparent; }
|
* { background-color: transparent; }
|
||||||
|
@ -111,10 +111,10 @@
|
||||||
|
|
||||||
@include exports("floatingbar") {
|
@include exports("floatingbar") {
|
||||||
.floating-bar {
|
.floating-bar {
|
||||||
|
@include linear-gradient($bg_color);
|
||||||
|
|
||||||
border: 1px solid border_normal($bg_color);
|
border: 1px solid border_normal($bg_color);
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
background-color: $bg_color;
|
|
||||||
background-image: none;
|
|
||||||
color: $fg_color;
|
color: $fg_color;
|
||||||
|
|
||||||
&.top {
|
&.top {
|
||||||
|
|
|
@ -30,8 +30,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.progressbar {
|
.progressbar {
|
||||||
background-image: none;
|
@include linear-gradient($selected_bg_color);
|
||||||
background-color: $selected_bg_color;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
|
@ -48,8 +48,7 @@
|
||||||
&.left.right { box-shadow: none; }
|
&.left.right { box-shadow: none; }
|
||||||
|
|
||||||
&.vertical {
|
&.vertical {
|
||||||
background-image: none;
|
@include linear-gradient($selected_bg_color, to right);
|
||||||
background-color: $selected_bg_color;
|
|
||||||
|
|
||||||
&.bottom {
|
&.bottom {
|
||||||
border-bottom-left-radius: $roundness;
|
border-bottom-left-radius: $roundness;
|
||||||
|
@ -75,16 +74,17 @@
|
||||||
|
|
||||||
.level-bar {
|
.level-bar {
|
||||||
&.trough {
|
&.trough {
|
||||||
|
@include linear-gradient(shade($bg_color, 1.08), to top);
|
||||||
|
|
||||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fill-block {
|
&.fill-block {
|
||||||
|
@include linear-gradient($selected_bg_color);
|
||||||
|
|
||||||
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
// FIXME: it would be nice to set make fill blocks bigger, but we'd need
|
||||||
// :nth-child working on discrete indicators
|
// :nth-child working on discrete indicators
|
||||||
background-color: $selected_bg_color;
|
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
|
@ -123,9 +123,10 @@
|
||||||
|
|
||||||
|
|
||||||
&.slider {
|
&.slider {
|
||||||
|
@include linear-gradient(shade($bg_color, 1.08));
|
||||||
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
|
||||||
/* we will draw the border using box shadow for now */
|
/* we will draw the border using box shadow for now */
|
||||||
box-shadow: inset 1px 0 border_normal($bg_color),
|
box-shadow: inset 1px 0 border_normal($bg_color),
|
||||||
inset 0 1px border_normal($bg_color),
|
inset 0 1px border_normal($bg_color),
|
||||||
|
@ -147,8 +148,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
background-color: shade($bg_color, 0.9);
|
@include linear-gradient(shade($bg_color, 0.9));
|
||||||
background-image: none;
|
|
||||||
box-shadow: inset 1px 0 border_insensitive($bg_color),
|
box-shadow: inset 1px 0 border_insensitive($bg_color),
|
||||||
inset 0 1px border_insensitive($bg_color),
|
inset 0 1px border_insensitive($bg_color),
|
||||||
inset -1px 0 border_insensitive($bg_color),
|
inset -1px 0 border_insensitive($bg_color),
|
||||||
|
@ -170,26 +171,27 @@
|
||||||
|
|
||||||
|
|
||||||
&.trough {
|
&.trough {
|
||||||
|
@include linear-gradient(shade($bg_color, 1.08));
|
||||||
|
|
||||||
margin: 7px 0;
|
margin: 7px 0;
|
||||||
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
border: 1px solid alpha(border_normal($bg_color), 0.5);
|
||||||
border-radius: $roundness;
|
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; }
|
&.vertical { margin: 0 7px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
&.highlight {
|
&.highlight {
|
||||||
&, &.left, &.bottom {
|
&, &.left, &.bottom {
|
||||||
|
@include linear-gradient($selected_bg_color);
|
||||||
|
|
||||||
border-color: $selected_bg_color;
|
border-color: $selected_bg_color;
|
||||||
background-color: $selected_bg_color;
|
|
||||||
background-image: none;
|
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
|
@include linear-gradient(shade($bg_color, 0.8));
|
||||||
|
|
||||||
border-color: shade($bg_color, 0.7);
|
border-color: shade($bg_color, 0.7);
|
||||||
background-color: shade($bg_color, 0.8);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
color: $fg;
|
color: $fg;
|
||||||
|
|
||||||
&:insensitive {
|
&:insensitive {
|
||||||
@include linear-gradient(darken($bg, 10%));
|
@include linear-gradient(shade($bg, .9));
|
||||||
|
|
||||||
color: mix($fg, $bg, .5);
|
color: mix($fg, $bg, .5);
|
||||||
}
|
}
|
||||||
|
@ -105,7 +105,7 @@
|
||||||
&:active, &:active:hover {
|
&:active, &:active:hover {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: darken($selected_bg_color, 10%);
|
color: shade($selected_bg_color, .9);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue