diff options
Diffstat (limited to 'common/gtk-3.0/3.16/_drawing.scss')
| -rw-r--r-- | common/gtk-3.0/3.16/_drawing.scss | 360 |
1 files changed, 360 insertions, 0 deletions
diff --git a/common/gtk-3.0/3.16/_drawing.scss b/common/gtk-3.0/3.16/_drawing.scss new file mode 100644 index 0000000..0300ce1 --- /dev/null +++ b/common/gtk-3.0/3.16/_drawing.scss @@ -0,0 +1,360 @@ +// Drawing mixins + +// generic drawing of more complex things + +@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 + +@mixin entry($t) { +// +// Entries drawing function +// +// $t: entry type +// + + @if $t==normal { + // + // normal entry + // + color: $text_color; + border-color: $entry_border; + background-color: $entry_bg; + background-image: linear-gradient(to bottom, $entry_bg); + } + + @if $t==focus { + // + // focused entry + // + color: $text_color; + border-color: $selected_bg_color; + background-color: $entry_bg; + background-image: linear-gradient(to bottom, $entry_bg); + } + + @if $t==insensitive { + // + // insensitive entry + // + color: $insensitive_fg_color; + border-color: transparentize($entry_border, 0.45); + background-color: transparentize($entry_bg, 0.45); + background-image: linear-gradient(to bottom, transparentize($entry_bg, 0.45)); + } + + @if $t==header-normal { + // + // normal header-bar entry + // + color: $header_fg; + border-color: transparentize($header_fg, 0.7); + background-image: linear-gradient(to bottom, transparentize($base_color, 0.1)); + background-color: transparent; + + &.image, &.image:hover { color: inherit; } + } + + @if $t==header-focus { + // + // focused header-bar entry + // + color: $selected_fg_color; + border-color: $selected_bg_color; + background-image: linear-gradient(to bottom, $selected_bg_color); + } + + @if $t==header-insensitive { + // + // insensitive header-bar entry + // + color: transparentize($header_fg, 0.45); + background-image: linear-gradient(to bottom, transparentize($base_color, 0.45)); + } + + @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; + + 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; + + 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; + + text-shadow: none; + icon-shadow: none; + } +} + +// Buttons + +@mixin button($t) { +// +// Button drawing function +// +// $t: button type, +// + + @if $t==normal { + // + // normal button + // + color: $fg_color; + outline-color: transparentize($fg_color, 0.7); + border-color: $button_border; + background-color: $button_bg; + } + + @else if $t==hover { + // + // hovered button + // + color: $fg_color; + outline-color: transparentize($fg_color, 0.7); + border-color: $selected_bg_color; + background-color: $button_bg; + } + + @else if $t==active { + // + // pushed button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + + @else if $t==insensitive { + // + // insensitive button + // + color: $insensitive_fg_color; + border-color: transparentize($button_border, 0.45); + background-color: transparentize($button_bg, 0.45); + + > GtkLabel { color: inherit; } + } + + @else if $t==insensitive-active { + // + // insensitive pushed button + // + color: transparentize($selected_fg_color, 0.45); + border-color: transparentize($selected_bg_color, 0.45); + background-color: transparentize($selected_bg_color, 0.45); + + opacity: 0.6; + + > GtkLabel { color: inherit; } + } + + @if $t==header-normal { + // + // normal header-bar button + // + color: $header_fg; + outline-color: transparentize($header_fg, 0.7); + outline-offset: -3px; + background-color: transparentize($header_bg, 1); + border-color: transparentize($header_bg, 1); + } + + @else if $t==header-hover { + // + // hovered header-bar button + // + color: $header_fg; + outline-color: transparentize($header_fg, 0.7); + border-color: transparentize($header_fg, 0.7); + background-color: transparentize($button_bg, 0.1); + } + + @else if $t==header-active { + // + // pushed header-bar button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + border-color: $selected_bg_color; + background-color: $selected_bg_color; + } + + @else if $t==header-insensitive { + // + // insensitive header-bar button + // + color: transparentize($header_fg, 0.45); + background-color: transparentize($header_bg, 1); + border-color: transparentize($header_bg, 1); + + > GtkLabel { color: inherit; } + } + + @else if $t==header-insensitive-active { + // + // header-bar insensitive pushed button + // + color: transparentize($selected_fg_color, 0.25); + border-color: transparentize($selected_bg_color, 0.35); + background-color: transparentize($selected_bg_color, 0.35); + } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + outline-color: transparentize($osd_fg_color, 0.7); + border-color: transparentize($osd_fg_color, 0.7); + background-color: transparent; + background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $selected_bg_color; + outline-color: transparentize($osd_fg_color, 0.7); + border-color: $selected_bg_color; + background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + } + + @else if $t==osd-active { + // + // active osd button + // + color: $selected_fg_color; + outline-color: transparentize($selected_fg_color, 0.7); + border-color: $selected_bg_color; + background-image: linear-gradient(to bottom, $selected_bg_color); + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border-color: transparentize($osd_fg_color, 0.8); + background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); + } + + @else if $t==undecorated { + // + // reset + // + border-color: transparent; + background-color: transparent; + background-image: none; + } +} + +// +// Overshoot +// +@mixin overshoot($p, $c:$selected_bg_color) { +// $p: position +// $c: base color +// +// possible $p values: +// top, bottom, right, left +// + + $_big_gradient_length: 60%; + + $_position: center top; + $_big_gradient_size: 100% $_big_gradient_length; + + @if $p==bottom { + $_position: center bottom; + } + + @else if $p==right { + $_position: right center; + $_big_gradient_size: $_big_gradient_length 100%; + } + + @else if $p==left { + $_position: left center; + $_big_gradient_size: $_big_gradient_length 100%; + } + + background-image: -gtk-gradient(radial, + $_position, 0, + $_position, 0.6, + from(transparentize($c, 0.8)), + to(transparentize($c, 1))); + + background-size: $_big_gradient_size; + background-repeat: no-repeat; + background-position: $_position; + + background-color: transparent; // reset some properties to be sure to not inherit them somehow + border: none; // + box-shadow: none; // +} + +// +// Undershoot +// +@mixin undershoot($p) { +// $p: position +// +// possible $p values: +// top, bottom, right, left +// + + $_undershoot_color_dark: transparentize(black, 0.8); + $_undershoot_color_light: transparentize(white, 0.8); + + $_gradient_dir: left; + $_dash_bg_size: 10px 1px; + $_gradient_repeat: repeat-x; + $_bg_pos: center $p; + + background-color: transparent; // shouldn't be needed, but better to be sure; + + @if ($p == left) or ($p == right) { + $_gradient_dir: top; + $_dash_bg_size: 1px 10px; + $_gradient_repeat: repeat-y; + $_bg_pos: $p center; + } + + background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%); + + padding-#{$p}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; +} |