forked from AuroraMiddleware/gtk
eb8f60f141
Removed bright translucent outer border for "top level" osd widgets, insensitive osd entry styled, more meaningfull color variables and some code rationalization.
498 lines
16 KiB
SCSS
498 lines
16 KiB
SCSS
// Drawing mixins
|
|
|
|
// generic drawing of more complex things
|
|
|
|
@function _widget_edge($c:$borders_edge) {
|
|
// outer highlight "used" on most widgets
|
|
@return 0 1px $c;
|
|
}
|
|
|
|
@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
|
|
//
|
|
// Helper function to stack up to 4 box-shadows;
|
|
//
|
|
@if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
|
|
@else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
|
|
@else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
|
|
@else { box-shadow: $shadow1; }
|
|
}
|
|
|
|
// entries
|
|
|
|
@function entry_focus_border($fc) {
|
|
@if $variant == 'light' { @return $fc; }
|
|
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); }
|
|
}
|
|
|
|
@function entry_focus_glow($fc) {
|
|
$_focus_glow_color: if($variant=='light', transparentize($fc,0.85),
|
|
transparentize($fc,0.3));
|
|
@return inset 0 0 0 1px $_focus_glow_color;
|
|
}
|
|
|
|
@function entry_gradient($c) {
|
|
@return linear-gradient(to bottom, darken($c,3%), $c 90%);
|
|
}
|
|
|
|
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
|
|
//
|
|
// Entries drawing function
|
|
//
|
|
// $t: entry type
|
|
// $fc: focus color
|
|
// $edge: set to none to not draw the bottom edge or specify a color to not
|
|
// use the default one
|
|
//
|
|
// possible $t values:
|
|
// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
|
|
//
|
|
background-color: transparent;
|
|
background-image: entry_gradient($base_color);
|
|
$_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1));
|
|
$_entry_edge: if($edge == none, none, _widget_edge($edge));
|
|
$_inner_shadows: inset 0 3px transparentize(black, 0.98),
|
|
inset 0 2px transparentize(black, 0.97),
|
|
inset 0 1px transparentize(black, 0.92);
|
|
|
|
// we need to match the same shadow types (inset/outset) in various states
|
|
// hence transparent shadows istead of resetting them when not needed
|
|
$_blank_inner_shadows: inset 0 3px transparentize(black, 1),
|
|
inset 0 2px transparentize(black, 1),
|
|
inset 0 1px transparentize(black, 1);
|
|
@if $t==normal {
|
|
color: $text_color;
|
|
border-color: $borders_color;
|
|
@include _shadows($_inner_shadows,
|
|
entry_focus_glow(transparentize($fc,1)),
|
|
$_entry_edge);
|
|
// the second transparent shadow is needed for the transition to work
|
|
}
|
|
@if $t==focus {
|
|
@include _shadows($_inner_shadows,
|
|
entry_focus_glow($fc),
|
|
$_entry_edge);
|
|
border-color: entry_focus_border($fc);
|
|
}
|
|
@if $t==insensitive {
|
|
color: $insensitive_fg_color;
|
|
border-color: $borders_color;
|
|
background-image: linear-gradient(to bottom, $insensitive_bg_color);
|
|
@include _shadows($_blank_inner_shadows, $_entry_edge);
|
|
|
|
}
|
|
@if $t==backdrop {
|
|
color: $backdrop_text_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: linear-gradient(to bottom, $backdrop_base_color);
|
|
@include _shadows($_blank_inner_shadows, $_blank_edge);
|
|
}
|
|
@if $t==backdrop-insensitive {
|
|
color: $backdrop_insensitive_color;
|
|
border-color: $backdrop_borders_color;
|
|
background-image: linear-gradient(to bottom, $insensitive_bg_color);
|
|
@include _shadows($_blank_inner_shadows, $_blank_edge);
|
|
}
|
|
@if $t==osd {
|
|
color: $osd_text_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
}
|
|
@if $t==osd-focus {
|
|
color: $osd_text_color;
|
|
border-color: $selected_bg_color;
|
|
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
|
|
background-clip: padding-box;
|
|
box-shadow: entry_focus_glow($selected_bg_color);
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
}
|
|
@if $t==osd-insensitive {
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
@if $t==osd-backdrop {
|
|
color: $osd_text_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
// buttons
|
|
|
|
@function _border_color ($c) { @return darken($c,25%); } // colored buttons want
|
|
// the border form the
|
|
// base color
|
|
|
|
@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
|
|
//
|
|
// calculate the color of text shadows
|
|
//
|
|
// $tc is the text color
|
|
// $bg is the background color
|
|
//
|
|
$_lbg: lightness($bg)/100%;
|
|
@if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); }
|
|
@else { @return transparentize(black,$_lbg*0.8); }
|
|
}
|
|
|
|
@function _button_hilight_color($c) {
|
|
//
|
|
// calculate the right top hilight color for buttons
|
|
//
|
|
// $c: base color;
|
|
//
|
|
@if lightness($c)>90% { @return white; }
|
|
@else if lightness($c)>80% { @return transparentize(white, 0.3); }
|
|
@else if lightness($c)>50% { @return transparentize(white, 0.5); }
|
|
@else if lightness($c)>40% { @return transparentize(white, 0.7); }
|
|
@else { @return transparentize(white, 0.9); }
|
|
}
|
|
|
|
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
|
|
//
|
|
// helper function for the text emboss effect
|
|
//
|
|
// $tc is the optional text color, not the shadow color
|
|
//
|
|
// TODO: this functions needs a way to deal with special cases
|
|
//
|
|
|
|
$_shadow: _text_shadow_color($tc, $bg);
|
|
|
|
@if lightness($tc)<50% {
|
|
text-shadow: 0 1px $_shadow;
|
|
icon-shadow: 0 1px $_shadow;
|
|
}
|
|
@else {
|
|
text-shadow: 0 -1px $_shadow;
|
|
icon-shadow: 0 -1px $_shadow;
|
|
}
|
|
}
|
|
|
|
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
|
|
//
|
|
// Button drawing function
|
|
//
|
|
// $t: button type,
|
|
// $c: base button color for colored* types
|
|
// $tc: optional text color for colored* types
|
|
// $edge: set to none to not draw the bottom edge or specify a color to not
|
|
// use the default one
|
|
//
|
|
// possible $t values:
|
|
// normal, hover, active, insensitive, insensitive-active,
|
|
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
|
|
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
|
|
//
|
|
|
|
$_hilight_color: _button_hilight_color($c);
|
|
$_button_edge: if($edge == none, none, _widget_edge($edge));
|
|
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
|
|
|
|
@if $t==normal {
|
|
//
|
|
// normal button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c!=$bg_color, _border_color($c), $borders_color);
|
|
background-image: linear-gradient(to bottom,
|
|
lighten($c,5%),
|
|
$c 40%,
|
|
darken($c,5%)
|
|
);
|
|
@include _button_text_shadow($tc,$c);
|
|
@include _shadows(inset 0 1px $_hilight_color, $_button_edge);
|
|
}
|
|
|
|
@else if $t==hover {
|
|
//
|
|
// hovered button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c!=$bg_color, _border_color($c), $borders_color);
|
|
background-image: linear-gradient(to bottom,
|
|
lighten($c,14%),
|
|
lighten($c,4%) 40%,
|
|
$c);
|
|
|
|
@include _button_text_shadow($tc,lighten($c,4%));
|
|
@include _shadows(inset 0 1px $_hilight_color, $_button_edge);
|
|
}
|
|
|
|
@else if $t==active {
|
|
//
|
|
// pushed button
|
|
//
|
|
color: $tc;
|
|
outline-color: transparentize($tc, 0.7);
|
|
border-color: if($c!=$bg_color, _border_color($c), $borders_color);
|
|
background-image: linear-gradient(to bottom,
|
|
darken($c,9%),
|
|
darken($c,5%));
|
|
@include _button_text_shadow($tc,darken($c,10%));
|
|
@include _shadows(inset 0 1px transparentize(black, 0.93),
|
|
inset 0 2px 1px -2px transparentize(black,0.4),
|
|
$_button_edge);
|
|
}
|
|
@else if $t==insensitive {
|
|
//
|
|
// insensitive button
|
|
//
|
|
$_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color);
|
|
|
|
color: if($tc!=$fg_color, mix($tc,$_bg,50%), $insensitive_fg_color);
|
|
border-color: if($c!=$bg_color, _border_color($c),
|
|
$insensitive_borders_color);
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white,1), $_button_edge);
|
|
> .label { color: inherit; }
|
|
}
|
|
@else if $t==insensitive-active {
|
|
//
|
|
// insensitive pushed button
|
|
//
|
|
$_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%),
|
|
$insensitive_bg_color);
|
|
$_bc: if($c!=$bg_color, _border_color($c), $insensitive_borders_color);
|
|
|
|
color: if($c!=$bg_color, mix($tc,$_bg,60%), $insensitive_fg_color);
|
|
border-color: $_bc;
|
|
background-image: linear-gradient(to bottom, mix($_bc, $_bg, 10%), $_bg);
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white,1), $_button_edge);
|
|
> .label { color: inherit; }
|
|
}
|
|
|
|
@else if $t==backdrop {
|
|
//
|
|
// backdrop button
|
|
//
|
|
$_bg: if($c!=$bg_color,$c,$backdrop_bg_color);
|
|
$_bc: if($variant=='light',$c,_border_color($c));
|
|
|
|
color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color);
|
|
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
@include _shadows(inset 0 1px transparentize(white,1),
|
|
$_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-active {
|
|
//
|
|
// backdrop pushed button FIXME no colors here!
|
|
//
|
|
$_bg: if($c!=$bg_color, darken($c,10%), $backdrop_dark_fill);
|
|
$_bc: if($variant=='light',$_bg,_border_color($c));
|
|
|
|
color: if($tc!=$fg_color, mix($tc,$_bg,80%), $backdrop_fg_color);
|
|
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
@include _shadows(inset 0 1px transparentize(white,1),
|
|
$_blank_edge);
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive {
|
|
//
|
|
// backdrop insensitive button
|
|
//
|
|
|
|
$_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color);
|
|
$_bc: if($variant=='light',$_bg,_border_color($c));
|
|
|
|
color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color);
|
|
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
// white with 0 alpha to avoid an ugly transition, since no color means
|
|
// black with 0 alpha
|
|
@include _shadows(inset 0 1px transparentize(white,1),
|
|
$_blank_edge);
|
|
> .label { color: inherit; }
|
|
}
|
|
|
|
@else if $t==backdrop-insensitive-active {
|
|
//
|
|
// backdrop insensitive pushed button
|
|
//
|
|
|
|
$_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%),
|
|
darken($insensitive_bg_color,5%));
|
|
$_bc: if($variant=='light',$_bg,_border_color($c));
|
|
|
|
color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color);
|
|
border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color);
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
@include _shadows(inset 0 1px transparentize(white,1),
|
|
$_blank_edge);
|
|
> .label { color: inherit; }
|
|
}
|
|
|
|
@else if $t==osd {
|
|
//
|
|
// normal osd button
|
|
//
|
|
$_bg: if($c!=$bg_color, transparentize($c, 0.5),
|
|
$osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
@else if $t==osd-hover {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c!=$bg_color, transparentize($c, 0.3),
|
|
lighten($osd_bg_color, 12%));
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
background-clip: padding-box;
|
|
box-shadow: inset 0 1px transparentize(white, 0.9);
|
|
text-shadow: 0 1px black;
|
|
icon-shadow: 0 1px black;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
@else if $t==osd-active {
|
|
//
|
|
// active osd button
|
|
//
|
|
$_bg: if($c!=$bg_color, $c, $osd_borders_color);
|
|
|
|
color: white;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
outline-color: transparentize($osd_fg_color, 0.7);
|
|
}
|
|
@else if $t==osd-insensitive {
|
|
//
|
|
// insensitive osd button
|
|
//
|
|
color: $osd_insensitive_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
@else if $t==osd-backdrop {
|
|
//
|
|
// backdrop osd button
|
|
//
|
|
$_bg: if($c!=$bg_color, transparentize($c, 0.5),
|
|
$osd_bg_color);
|
|
|
|
color: $osd_fg_color;
|
|
border-color: $osd_borders_color;
|
|
background-image: linear-gradient(to bottom, $_bg);
|
|
background-clip: padding-box;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
@else if $t==undecorated {
|
|
//
|
|
// reset
|
|
//
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
|
|
@include _shadows(inset 0 1px transparentize(white, 1),
|
|
$_blank_edge);
|
|
|
|
text-shadow: none;
|
|
icon-shadow: none;
|
|
}
|
|
}
|
|
|
|
@mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
|
|
color: mix($tc,$bg_color,80%);
|
|
@if $flat { background-image: linear-gradient(to bottom,$c); }
|
|
@else {
|
|
background-image: linear-gradient(to bottom,
|
|
mix(black,$c,15%) 5%,
|
|
mix(black,$c,10%) 20%,
|
|
mix(black,$c,10%) 90%,
|
|
$c);
|
|
}
|
|
|
|
border-color: if($c!=$bg_color, _border_color($c), $border_color);
|
|
|
|
@if not($noedge) {
|
|
@if lightness($c) > 60% {
|
|
box-shadow: inset 0 -1px $borders_edge,
|
|
0 1px $borders_edge;
|
|
}
|
|
@else {
|
|
box-shadow: inset 0 -1px transparentize($borders_edge,0.5),
|
|
0 1px transparentize($borders_edge,0.5);
|
|
}
|
|
}
|
|
@else { box-shadow: none; }
|
|
}
|
|
|
|
@mixin progressbar_fill($d:horizontal) {
|
|
$dir: if($d==vertical,right,bottom);
|
|
background-image: linear-gradient(to $dir, $selected_bg_color 2px,
|
|
lighten($selected_bg_color,6%));
|
|
}
|
|
|
|
@function headerbar_gradient($c, $tc:lighten($c,4%)) {
|
|
//
|
|
// headerbar gradient helper function
|
|
//
|
|
// $c: base color
|
|
// $tc: top color
|
|
//
|
|
@return linear-gradient(to bottom, $tc, $c);
|
|
}
|
|
|
|
@mixin headerbar_fill($c:$bg_color, $tc:lighten($c,4%), $hc:$top_hilight) {
|
|
//
|
|
// headerbar fill
|
|
//
|
|
// $c: base color
|
|
// $tc: top color
|
|
// $hc: top highlight color
|
|
//
|
|
background-image: headerbar_gradient($c, $tc);
|
|
box-shadow: inset 0 -1px mix(_border_color($c), $c, 30%), // bottom shade
|
|
inset 0 1px $hc; // top highlight
|
|
|
|
}
|