Commit c56d3813 authored by Dirruk de Vries's avatar Dirruk de Vries

color effects

parent 1f5035a2
//
// Theme color functions
//
// fg color
@function fg_color($widget: w) {
@if $widget == w { // fg_color
@return $Window_ForegroundNormal;
}
@if $widget == b { // button_fg_color
@return $Button_ForegroundNormal;
}
@if $widget == v { // text_color
@return $View_ForegroundNormal;
}
@if $widget == t {
@return $Tooltip_ForegroundNormal; // tooltip_fg_color
}
@if $widget == s {
@return transparentize($View_ForegroundNormal, 0.5); // scrollbar slider
}
}
// bg color
@function bg_color($widget: w) {
@if $widget == w { // bg_color
@return $Window_BackgroundNormal;
}
@if $widget == b { // button_bg_color
@return $Button_BackgroundNormal;
}
@if $widget == v { // base_color
@return $View_BackgroundNormal;
}
@if $widget == t {
@return $Tooltip_BackgroundNormal; // tooltip_bg_color
}
@if $widget == s {
@return transparentize($Window_ForegroundNormal, 0.7); // scrollbar trough
}
@if $widget == o { // osd background
@return transparentize($Window_BackgroundNormal, 0.2);
}
}
// selected bg color
@function selection($c, $state:normal) {
@if $c == bg {
@if $state == backdrop and $Inactive_ChangeSelectionColor == true {
@return transparentize($Selection_BackgroundNormal, 0.8); // don't know, just guessing
}
@if $state == hover {
@return $Button_DecorationHover;
}
@else {
@return $Selection_BackgroundNormal;
}
}
@if $c == fg {
@return $Selection_ForegroundNormal;
}
}
// Borders/Decoration
@function border($t: normal, $widget: b) {
@if $t == normal {
@return $borders_color;
}
@if $t == hover {
@if $widget == b {
@return $Button_DecorationHover;
}
@else {
@return $View_DecorationHover;
}
}
@if $t == active {
@if $widget == b {
@return $Button_DecorationFocus;
}
@else {
@return $View_DecorationFocus; // for entry
}
}
}
@function titlebar($c, $state: normal) {
@if $c == bg {
@if $state == normal {
@return $WM_activeBackground;
}
@else {
@return $WM_inactiveBackground;
}
}
@if $c == fg {
@if $state == normal {
@return $WM_activeForeground;
}
@else {
@return $WM_inactiveForeground;
}
}
}
@function button_gradient($c, $state: normal) {
@if $state == normal {
@return linear-gradient(to bottom, change-color($c, $lightness: lightness($c)*1.01), change-color($c, $lightness:lightness($c)/1.03));
}
@else {
@return linear-gradient(to bottom, change-color($c, $lightness: lightness($c)*1.03), change-color($c, $lightness:lightness($c)/1.10));
}
}
//
// Color effects
//
@function insensitive($c) {
@return Color(Intensity(Contrast($c, Disabled), Disabled), Disabled);
}
@function backdrop($c) {
@if $Inactive_Enable == true {
@return Color(Intensity(Contrast($c, Inactive), Inactive), Inactive);
}
@else {
@return $c;
}
}
@function Contrast($c, $state) {
@if map-get($ContrastEffect, $state) == 0 {
@return $c;
}
@if map-get($ContrastEffect, $state) == 1 { // can't see the difference between 1 and 2, should ask someone
@if lightness(bg_color(w)) > lightness(fg_color(w)) { // don't know what a reasonable lightness treshhold is for Contrast
@if lightness($c) < lightness(bg_color(w)) or ($c == $WM_activeForeground and lightness($WM_activeBackground) <= lightness($WM_activeForeground)) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else { @return $c; }
}
@if lightness(bg_color(w)) <= lightness(fg_color(w)) {
@if lightness($c) > lightness(bg_color(w)) or ($c == $WM_activeForeground and lightness($WM_activeBackground) > lightness($WM_activeForeground)) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else { @return $c; }
}
}
@if map-get($ContrastEffect, $state) == 2 {
@if lightness(bg_color(w)) > lightness(fg_color(w)) { // don't know what a reasonable lightness treshhold is for Contrast
@if lightness($c) < lightness(bg_color(w)) or ($c == $WM_activeForeground and lightness($WM_activeBackground) <= lightness($WM_activeForeground)) {
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else { @return $c; }
}
@if lightness(bg_color(w)) <= lightness(fg_color(w)) {
@if lightness($c) > lightness(bg_color(w)) or ($c == $WM_activeForeground and lightness($WM_activeBackground) > lightness($WM_activeForeground)){
@return transparentize($c, map-get($ContrastAmount, $state));
}
@else { @return $c; }
}
}
}
@function Color($c, $state) {
@if map-get($ColorEffect, $state) ==0 {
@return $c;
}
@if map-get($ColorEffect, $state) ==1 {
@if map-get($ColorAmount, $state) >=0 {
@return desaturate($c, percentage(map-get($ColorAmount, $state)));
}
@else {
@return saturate($c, percentage(abs(map-get($ColorAmount, $state))));
}
}
@if map-get($ColorEffect, $state)==2 or map-get($ColorEffect, $state)==3 { // 2 and 3 seem to do the same
@return mix(map-get($Color, $state),$c, percentage(map-get($ColorAmount, $state)));
}
}
@function Intensity($c, $state) {
@if map-get($IntensityEffect, $state) == 0 {
@return $c;
}
@if map-get($IntensityEffect, $state) == 1 {
@if map-get($IntensityAmount, $state) >= 0 {
@return mix(white, $c, percentage(map-get($IntensityAmount, $state)));
}
@else {
@return mix(black, $c, percentage(abs(map-get($IntensityAmount, $state))));
}
}
@if map-get($IntensityEffect, $state) == 2 {
@if map-get($IntensityAmount, $state) >= 0 {
@return darken($c, percentage(map-get($IntensityAmount, $state)));
}
@else {
@return lighten($c, percentage(abs(map-get($IntensityAmount, $state)))); //?? Just for testing, need to ask what this does
}
}
@if map-get($IntensityEffect, $state) == 3 {
@if map-get($IntensityAmount, $state) >=0 {
@return lighten($c, percentage(map-get($IntensityAmount, $state)));
}
@else {
@return darken($c, percentage(abs(map-get($IntensityAmount, $state)))); //?? Just for testing, need to ask what this does
}
}
}
// //[ColorEffects:Disabled]
$Disabled_Color:rgb(56,56,56);
$Disabled_ColorAmount:0;
$Disabled_ColorEffect:0;
$Disabled_ContrastAmount:0.65;
$Disabled_ContrastEffect:1;
$Disabled_IntensityAmount:0.1;
$Disabled_IntensityEffect:2;
//
// //[ColorEffects:Inactive]
$Inactive_ChangeSelectionColor:true;
$Inactive_Color:rgb(112,111,110);
$Inactive_ColorAmount:0.025;
$Inactive_ColorEffect:2;
$Inactive_ContrastAmount:0.1;
$Inactive_ContrastEffect:2;
$Inactive_Enable:false;
$Inactive_IntensityAmount:0;
$Inactive_IntensityEffect:0;
//
// //[Colors:Button]
// $Button_BackgroundAlternate:rgb(189,195,199);
$Button_BackgroundNormal:rgb(239,240,241);
$Button_DecorationFocus:rgb(61,174,233);
$Button_DecorationHover:rgb(147,206,233);
// $Button_ForegroundActive:rgb(61,174,233);
// $Button_ForegroundInactive:rgb(127,140,141);
// $Button_ForegroundLink:rgb(41,128,185);
// $Button_ForegroundNegative:rgb(218,68,83);
// $Button_ForegroundNeutral:rgb(246,116,0);
$Button_ForegroundNormal:rgb(49,54,59);
// $Button_ForegroundPositive:rgb(39,174,96);
// $Button_ForegroundVisited:rgb(127,140,141);
//
// //[Colors:Selection]
// $Selection_BackgroundAlternate:rgb(29,153,243);
$Selection_BackgroundNormal:rgb(61,174,233);
// $Selection_DecorationFocus:rgb(61,174,233);
// $Selection_DecorationHover:rgb(147,206,233);
// $Selection_ForegroundActive:rgb(252,252,252);
// $Selection_ForegroundInactive:rgb(239,240,241);
// $Selection_ForegroundLink:rgb(253,188,75);
// $Selection_ForegroundNegative:rgb(218,68,83);
// $Selection_ForegroundNeutral:rgb(246,116,0);
$Selection_ForegroundNormal:rgb(239,240,241);
// $Selection_ForegroundPositive:rgb(39,174,96);
// $Selection_ForegroundVisited:rgb(189,195,199);
//
// //[Colors:Tooltip]
// $Tooltip_BackgroundAlternate:rgb(77,77,77);
$Tooltip_BackgroundNormal:rgb(49,54,59);
// $Tooltip_DecorationFocus:rgb(61,174,233);
// $Tooltip_DecorationHover:rgb(147,206,233);
// $Tooltip_ForegroundActive:rgb(61,174,233);
// $Tooltip_ForegroundInactive:rgb(189,195,199);
// $Tooltip_ForegroundLink:rgb(41,128,185);
// $Tooltip_ForegroundNegative:rgb(218,68,83);
// $Tooltip_ForegroundNeutral:rgb(246,116,0);
$Tooltip_ForegroundNormal:rgb(239,240,241);
// $Tooltip_ForegroundPositive:rgb(39,174,96);
// $Tooltip_ForegroundVisited:rgb(127,140,141);
//
// //[Colors:View]
// $View_BackgroundAlternate:rgb(239,240,241);
$View_BackgroundNormal:rgb(252,252,252);
$View_DecorationFocus:rgb(61,174,233);
$View_DecorationHover:rgb(147,206,233);
// $View_ForegroundActive:rgb(61,174,233);
// $View_ForegroundInactive:rgb(127,140,141);
$View_ForegroundLink:rgb(41,128,185);
$View_ForegroundNegative:rgb(218,68,83);
$View_ForegroundNeutral:rgb(246,116,0);
$View_ForegroundNormal:rgb(49,54,59);
$View_ForegroundPositive:rgb(39,174,96);
$View_ForegroundVisited:rgb(127,140,141);
//
// //[Colors:Window]
// $Window_BackgroundAlternate:rgb(189,195,199);
$Window_BackgroundNormal:rgb(239,240,241);
// $Window_DecorationFocus:rgb(61,174,233);
// $Window_DecorationHover:rgb(147,206,233);
// $Window_ForegroundActive:rgb(61,174,233);
// $Window_ForegroundInactive:rgb(127,140,141);
// $Window_ForegroundLink:rgb(41,128,185);
// $Window_ForegroundNegative:rgb(218,68,83);
// $Window_ForegroundNeutral:rgb(246,116,0);
$Window_ForegroundNormal:rgb(49,54,59);
// $Window_ForegroundPositive:rgb(39,174,96);
// $Window_ForegroundVisited:rgb(127,140,141);
//
// //[WM]
$WM_activeBackground:rgb(71,80,87);
// $WM_activeBlend:rgb(255,255,255);
$WM_activeForeground:rgb(239,240,241);
$WM_inactiveBackground:rgb(239,240,241);
// $WM_inactiveBlend:rgb(75,71,67);
$WM_inactiveForeground:rgb(189,195,199);
//
// Color maps for color effect functions
//
$Color: (
Disabled: $Disabled_Color,
Inactive: $Inactive_Color
);
$ColorAmount: (
Disabled: $Disabled_ColorAmount,
Inactive: $Inactive_ColorAmount
);
$ColorEffect: (
Disabled: $Disabled_ColorEffect,
Inactive: $Inactive_ColorEffect
);
$ContrastAmount: (
Disabled: $Disabled_ContrastAmount,
Inactive: $Inactive_ContrastAmount
);
$ContrastEffect: (
Disabled: $Disabled_ContrastEffect,
Inactive: $Inactive_ContrastEffect
);
$IntensityAmount: (
Disabled: $Disabled_IntensityAmount,
Inactive: $Inactive_IntensityAmount
);
$IntensityEffect: (
Disabled: $Disabled_IntensityEffect,
Inactive: $Inactive_IntensityEffect
);
$r: 3px; // standard radius
$borders_color: mix($Window_BackgroundNormal,$Window_ForegroundNormal, 75%);
$link_color: $View_ForegroundLink;
$link_visited_color: $View_ForegroundVisited;
$warning_color: $View_ForegroundNeutral;
$error_color: $View_ForegroundNegative;
$success_color: $View_ForegroundPositive;
$destructive_color: $error_color;
/*********************
* App Notifications *
*********************/
.app-notification,
.app-notification.frame {
@extend %osd;
padding: 10px;
border-top-width: 0px;
border-radius: 0px 0px 3px 3px;
&:backdrop { background-image: none; }
.button {
@include button(normal);
&.flat {
@extend %undecorated_button;
icon-shadow: none;
text-shadow: none;
&:hover {
@extend %undecorated_button;
color: border(hover);
}
&:active {
@extend %undecorated_button;
color: border(active);
}
&:backdrop,
&:insensitive,
&:backdrop:insensitive { @extend %undecorated_button; }
}
&:hover { @include button(hover); }
&:active,
&:checked,
&:backdrop:active,
&:backdrop:checked {
@include button(active);
}
&:insensitive,
&:backdrop:insensitive {
@include button(insensitive);
}
&:backdrop { @include button(backdrop); }
}
}
@function gtkalpha($c,$a) {
@return unquote("alpha(#{$c},#{$a})");
}
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
* {
padding: 0;
-GtkToolButton-icon-spacing: 4;
-GtkTextView-error-underline-color: $error_color;
-GtkButton-child-displacement-x: 0;
-GtkButton-child-displacement-y: 0;
-GtkCheckButton-indicator-size: 20;
-GtkCheckMenuItem-indicator-size: 20;
// The size for scrollbars. The slider is 2px smaller, but we keep it
// up so that the whole area is sensitive to button presses for the
// slider. The stepper button is larger in both directions, the slider
// only in the width
-GtkScrolledWindow-scrollbar-spacing: 0;
-GtkScrolledWindow-scrollbars-within-bevel: 1;
-GtkToolItemGroup-expander-size: 11;
-GtkExpander-expander-size: 16;
-GtkTreeView-expander-size: 11;
-GtkTreeView-horizontal-separator: 4;
-GtkMenu-horizontal-padding: 0;
-GtkMenu-vertical-padding: 0;
-GtkWidget-link-color: $link_color;
-GtkWidget-visited-link-color: $link_visited_color;
-GtkWidget-focus-padding: 2; // FIXME: do we still need these?
-GtkWidget-focus-line-width: 1; //
-GtkWidget-text-handle-width: 20;
-GtkWidget-text-handle-height: 20;
-GtkDialog-button-spacing: 4;
-GtkDialog-action-area-border: 0;
-GtkStatusbar-shadow-type: none;
outline-width: 0px;
}
/***************
* Base States *
***************/
.background {
color: fg_color(w);
background-color: bg_color(w);
&:backdrop {
text-shadow: none;
icon-shadow: none;
color: backdrop(fg_color(w));
background-color: backdrop(bg_color(w));
}
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
*:insensitive {
-gtk-image-effect: dim;
}
.gtkstyle-fallback {
background-color: bg_color(w);
color: fg_color(w);
&:prelight {
background-color: lighten(bg_color(w), 10%);
color: fg_color(w);
}
&:active {
background-color: darken(bg_color(w), 10%);
color: fg_color(w);
}
&:insensitive {
background-color: insensitive(bg_color(w));
color: insensitive(fg_color(w));
}
&:selected {
background-color: selection(bg);
color: selection(fg);
}
}
.view {
color: fg_color(v);
background-color: bg_color(v);
&:backdrop {
color: backdrop(fg_color(v));
background-color: backdrop(bg_color(v));
}
&:selected {
border-radius: $r;
@extend %selected_items;
}
}
.rubberband {
border: 1px solid selection(bg);
background-color: transparentize(selection(bg),0.8);
&:backdrop {
border-color: backdrop(selection(bg));
background-color: backdrop(transparentize(selection(bg),0.8));
}
}
.label {
&.separator {
color: fg_color(w);
@extend .dim-label;
&:backdrop { color: backdrop(fg_color(w)); }
}
&:selected,
&:selected:focus,
&:selected:hover {
@extend %selected_items;
}
&:insensitive {
color: insensitive(fg_color(w));
&:backdrop { color: backdrop(insensitive(fg_color(w))); }
}
}
.dim-label {
opacity: 0.5;
text-shadow: none;
}
GtkAssistant {
.sidebar {
background-color: fg_color(v);
border-top: 1px solid border(normal);
&:dir(ltr) { border-right: 1px solid border(normal); }
&:dir(rtl) { border-left: 1px solid border(normal); }
&:backdrop {
background-color: backdrop(fg_color(v));
border-color: backdrop(border(normal));
}
}
&.csd .sidebar { border-top-style: none; }
.sidebar .label {
padding: 6px 12px;
}
.sidebar .label.highlight {
background-color: mix(bg_color(v), fg_color(v), 80%);
}
}
GtkTextView { // This will get overridden by .view, needed by gedit line numbers
background-color: mix(bg_color(w), bg_color(v), 50%);
&:backdrop { background-color: backdrop(mix(bg_color(w), bg_color(v), 50%)); }
}
.grid-child {
padding: 3px;
border-radius: $r;
&:selected {
@extend %selected_items;
}
}
%osd, .osd {
color: fg_color(w);
border: 1px solid bg_color(w);
background-color: bg_color(o);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
&:backdrop {
color: backdrop(fg_color(w));
background-color: backdrop(bg_color(o));
}
}
%selected_items {
background-color: selection(bg);
color: selection(fg);