mirror of
https://git.disroot.org/eudaimon/Simplewaita.git
synced 2026-03-10 04:21:07 +00:00
First publishable version
This commit is contained in:
Eudaimon
parent
c8b05825a0
commit
d32217c528
295 changed files with 28883 additions and 6764 deletions
|
|
@ -1,37 +1,42 @@
|
|||
$window_fg: #241f31;
|
||||
$window_bg: #a7a7a7;
|
||||
$text_widget_fg: #241f31;
|
||||
$text_widget_bg: #908f8d;
|
||||
$window_fg: #EDF0F5;
|
||||
$window_bg: #3f3e3e;
|
||||
$text_widget_fg: #EDF0F5;
|
||||
$text_widget_bg: #323232;
|
||||
|
||||
$selected_fg: #000000;
|
||||
$selected_bg: #b0dd7e;
|
||||
$selected_fg: #d1ff96;
|
||||
$selected_bg: #669900;
|
||||
|
||||
$button_fg: #241f31;
|
||||
$button_bg: #bcbeb9;
|
||||
$button_checked_bg: #b0dd7e;
|
||||
$button_checked_fg: #000000;
|
||||
$button_fg: #EDF0F5;
|
||||
$button_bg: #4e584d;
|
||||
$button_checked_bg: #669900;
|
||||
$button_checked_fg: #d1ff96;
|
||||
|
||||
|
||||
$disabled_fg: #552222;
|
||||
$disabled_bg: #938989;
|
||||
$disabled_fg: #7c675a;
|
||||
$disabled_bg: #493e37;
|
||||
|
||||
/*Usually an automatic fg color on these backgrounds should check this value!*/
|
||||
$warningc: #938989;
|
||||
$errorc: #990000;
|
||||
$successc: #73d216;
|
||||
$warningc: #f57900;
|
||||
$errorc: #CC0000;
|
||||
$successc: #33d17a;
|
||||
|
||||
|
||||
$titlebar_active_fg: #000000;
|
||||
$titlebar_active_bg: #b0dd7e;
|
||||
$titlebar_active_fg: #d1ff96;
|
||||
$titlebar_active_bg: #669900;
|
||||
|
||||
$titlebar_backdrop_fg: #241f31;
|
||||
$titlebar_backdrop_bg: #a7a7a7;
|
||||
$titlebar_backdrop_fg: #EDF0F5;
|
||||
$titlebar_backdrop_bg: #3f3e3e;
|
||||
|
||||
$hint_fg: #002269;
|
||||
$hint_bg: #6789b4;
|
||||
$hint_fg: #66cbec;
|
||||
$hint_bg: #203d79;
|
||||
|
||||
$osd_fg: #002269;
|
||||
$osd_bg: #6789b4;
|
||||
$osd_fg: #66cbec;
|
||||
$osd_bg: #203d79;
|
||||
|
||||
$link_fg: #004B91;
|
||||
$link_visited_fg: #680091;
|
||||
$link_fg: #99c1f1;
|
||||
$link_visited_fg: #dc8add;
|
||||
|
||||
// ---- These are not colors, but other types of variables:
|
||||
|
||||
$button_radius: 0px;
|
||||
$window_radius: 0px;
|
||||
|
|
|
|||
|
|
@ -2,58 +2,6 @@
|
|||
|
||||
$_default_button_c: $button_bg;
|
||||
|
||||
@function _border_color($c, $darker: false) {
|
||||
@if $darker == true { @return darken($c, 20%); }
|
||||
@else { @return darken($c, 10%); }
|
||||
}
|
||||
|
||||
@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)>95% { @return white; }
|
||||
@else if lightness($c)>90% { @return transparentize(white, 0.15); }
|
||||
@else if lightness($c)>80% { @return transparentize(white, 0.35); }
|
||||
@else if lightness($c)>50% { @return transparentize(white, 0.5); }
|
||||
@else if lightness($c)>40% { @return transparentize(white, 0.65); }
|
||||
@else { @return transparentize(white, 0.7); }
|
||||
//@return $top_hilight;
|
||||
}
|
||||
|
||||
@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 _button_hilight_color($tc);//$_shadow;
|
||||
-gtk-icon-shadow: 0 1px _button_hilight_color($tc);//$_shadow;
|
||||
}
|
||||
@else {
|
||||
text-shadow: 0 -1px $_shadow;
|
||||
-gtk-icon-shadow: 0 -1px $_shadow;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -85,21 +33,7 @@ $_default_button_c: $button_bg;
|
|||
// this mixin needs to cover both gtk3 and gtk4 cases in order to work.
|
||||
// gtk4 mixin calls only include $t, $c and $tc, therefore it should be safe to use in both.
|
||||
|
||||
|
||||
$_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)));
|
||||
$_button_shadow: 0 1px 2px transparentize($shadow_hard_color, 0.6);
|
||||
|
||||
$button_clickable_image: linear-gradient(
|
||||
to bottom,
|
||||
transparentize($_hilight_color, if($variant == 'light', 0.2 ,0.3 )),
|
||||
transparentize($_hilight_color, 1) 50%,
|
||||
transparentize($shadow_hard_color, 1) 50%,
|
||||
transparentize($shadow_hard_color, if($variant == 'light',0.85,0.7)) );
|
||||
|
||||
//remove borders on all buttons...
|
||||
//border-width: 0;
|
||||
border-width: $border_width;
|
||||
|
||||
@if $t==normal or $t==normal-alt {
|
||||
//
|
||||
|
|
@ -107,30 +41,24 @@ $_default_button_c: $button_bg;
|
|||
//
|
||||
|
||||
color: $tc;
|
||||
background-color: $c;
|
||||
border-color: $tc;
|
||||
outline-color: $focus_border_color;
|
||||
background-image: $button_clickable_image;
|
||||
@include _button_text_shadow($tc, $c);
|
||||
@include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
|
||||
@include relief($c);
|
||||
|
||||
|
||||
}
|
||||
@else if $t==hover or $t==hover-alt or $t==undecorated-hover {
|
||||
//
|
||||
// hovered button
|
||||
//
|
||||
background-color: shade($c, 1.1)
|
||||
@include relief(lighten($c, 5%));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@else if ($t==active) {
|
||||
//
|
||||
// pushed button
|
||||
//
|
||||
//color: $button_checked_fg;
|
||||
//background-color: $button_checked_bg;
|
||||
@include _shadows(0 1px $_hilight_color, $_button_edge, inset $_button_shadow);
|
||||
@include relief($c, sunken);
|
||||
}
|
||||
|
||||
@else if ($t==checked-active ) {
|
||||
|
|
@ -138,9 +66,7 @@ $_default_button_c: $button_bg;
|
|||
// pushed and toggled button
|
||||
//
|
||||
color: $button_checked_fg;
|
||||
background-color: $button_checked_bg;
|
||||
@include _button_text_shadow($button_checked_fg, $button_checked_bg);
|
||||
@include _shadows(0 1px $_hilight_color, $_button_edge, inset $_button_shadow);
|
||||
@include relief($button_checked_bg, sunken);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -149,35 +75,31 @@ $_default_button_c: $button_bg;
|
|||
// toggled button and hover
|
||||
//
|
||||
color: $button_checked_fg;
|
||||
background-color: shade($button_checked_bg, 1.1);
|
||||
@include _button_text_shadow($button_checked_fg, $button_checked_bg);
|
||||
@include _shadows(0 1px $_hilight_color, $_button_edge, inset $_button_shadow);
|
||||
|
||||
@include relief(lighten($button_checked_bg, 5%), sunken);
|
||||
}
|
||||
|
||||
|
||||
@else if $t==insensitive {
|
||||
@else if $t==insensitive or $t==osd-insensitive {
|
||||
//
|
||||
// insensitive button
|
||||
//
|
||||
color: $insensitive_fg_color;
|
||||
border-color: $insensitive_fg_color;
|
||||
background-color: $insensitive_bg_color;
|
||||
background-image: if($backimage==null, none, $backimage);
|
||||
@include relief($insensitive_bg_color);
|
||||
}
|
||||
@else if $t==insensitive-active {
|
||||
//
|
||||
// insensitive pushed button
|
||||
//
|
||||
color: $insensitive_fg_color;
|
||||
background-color: mix($insensitive_bg_color, $button_checked_bg, 85%);
|
||||
@include relief(mix($insensitive_bg_color, $button_checked_bg, 85%), sunken);
|
||||
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
//
|
||||
// backdrop button
|
||||
//
|
||||
background-image: if($backimage==null, none, $backimage);
|
||||
//background-image: if($backimage==null, none, $backimage);
|
||||
}
|
||||
@else if $t==backdrop-active {
|
||||
//
|
||||
|
|
@ -196,7 +118,20 @@ $_default_button_c: $button_bg;
|
|||
//
|
||||
}
|
||||
|
||||
//TODO: what happens with OSDs? Is it necessary to redefine them?
|
||||
//OSD buttons
|
||||
|
||||
@else if $t==osd {
|
||||
color: $osd_fg_color;
|
||||
@include relief($osd_bg_color);
|
||||
}
|
||||
@else if $t==osd-hover {
|
||||
color: $osd_fg_color;
|
||||
@include relief(lighten($osd_bg_color,5%));
|
||||
}
|
||||
@else if $t==osd-active {
|
||||
color: $osd_fg_color;
|
||||
@include relief(lighten($osd_bg_color,5%),sunken);
|
||||
}
|
||||
|
||||
@else if $t==undecorated {
|
||||
//
|
||||
|
|
@ -206,8 +141,6 @@ $_default_button_c: $button_bg;
|
|||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
@include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
|
||||
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ $link_visited_color: $link_visited_fg; //mix($selected_bg_color, $fg_color, 20%)
|
|||
$top_hilight: $borders_edge;
|
||||
$dark_fill: mix($borders_color, $bg_color, 50%);
|
||||
|
||||
$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
|
||||
$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%)); //unused; base and text apply.
|
||||
|
||||
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
|
||||
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
||||
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||
$scrollbar_slider_color: $button_bg; //mix($fg_color, $bg_color, 60%);
|
||||
$scrollbar_slider_hover_color: mix($button_bg, $button_fg, 90%);
|
||||
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$warning_color: $warningc;
|
||||
|
|
@ -34,15 +34,8 @@ $destructive_color: $errorc;
|
|||
//$warning_fg: if($variant == 'light', shade($warningc,0.5), shade($warningc,1.3));
|
||||
//$warning_bg: if($variant == 'light', shade($warningc,1.3), shade($warningc,0.5));
|
||||
|
||||
$osd_fg_color: $osd_fg;
|
||||
$osd_text_color: $osd_fg;
|
||||
$osd_bg_color: transparentize($osd_bg, 0.3); //if($variant == 'light', transparentize(darken(desaturate($osd_bg, 100%), 4%),0.3), transparentize(darken(desaturate($osd_bg, 100%), 10%),0.3));
|
||||
|
||||
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: $hint_fg;
|
||||
|
||||
$sidebar_bg_color: mix($bg_color, $base_color, 50%);
|
||||
|
||||
$tooltip_borders_color: $hint_fg;
|
||||
|
|
@ -56,19 +49,31 @@ $insensitive_fg_color: $disabled_fg;
|
|||
$insensitive_bg_color: $disabled_bg;
|
||||
$insensitive_borders_color: mix($borders_color, $disabled_fg, 50%);
|
||||
|
||||
//osd colors
|
||||
$osd_fg_color: $osd_fg;
|
||||
$osd_text_color: $osd_fg;
|
||||
$osd_bg_color: $osd_bg; //transparentize($osd_bg, 0.3); //if($variant == 'light', transparentize(darken(desaturate($osd_bg, 100%), 4%),0.3), transparentize(darken(desaturate($osd_bg, 100%), 10%),0.3));
|
||||
|
||||
|
||||
$osd_insensitive_bg_color: $insensitive_bg_color; //transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: $insensitive_fg_color;// mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: $hint_fg;
|
||||
|
||||
|
||||
//colors for the backdrop state, derived from the main colors.
|
||||
$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
|
||||
$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
|
||||
// This is a simple theme. Therefore, no backdrop states should be used. However, just in case I forgot one, I'll define them here too:
|
||||
$backdrop_base_color: $base_color; //if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
|
||||
$backdrop_text_color: $text_color; //mix($text_color, $backdrop_base_color, 80%);
|
||||
$backdrop_bg_color: $bg_color;
|
||||
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 50%);
|
||||
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||
$backdrop_selected_fg_color: mix($backdrop_text_color, $selected_fg_color, 50%);
|
||||
$backdrop_selected_bg_color: transparentize(desaturate($selected_bg_color,50%),0.3);
|
||||
$backdrop_borders_color: mix($borders_color, $bg_color, 80%);
|
||||
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||
$backdrop_fg_color: $fg_color; //mix($fg_color, $backdrop_bg_color, 50%);
|
||||
$backdrop_insensitive_color: $insensitive_bg_color; //if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
|
||||
$backdrop_selected_fg_color: $selected_fg_color; //mix($backdrop_text_color, $selected_fg_color, 50%);
|
||||
$backdrop_selected_bg_color: $selected_bg_color; //transparentize(desaturate($selected_bg_color,50%),0.3);
|
||||
$backdrop_borders_color: $borders_color; //mix($borders_color, $bg_color, 80%);
|
||||
$backdrop_dark_fill: $dark_fill; //mix($backdrop_borders_color, $backdrop_bg_color, 35%);
|
||||
|
||||
//special cased widget colors
|
||||
$suggested_bg_color: $selected_bg_color;
|
||||
$suggested_bg_color: darken($success_color,10%); //$selected_bg_color;
|
||||
$suggested_border_color: $selected_borders_color;
|
||||
$progress_bg_color: $selected_bg_color;
|
||||
$progress_border_color: $selected_borders_color;
|
||||
|
|
|
|||
|
|
@ -6,29 +6,34 @@
|
|||
$_sizevariant: 'compact'; //either 'default', or compact otherwise
|
||||
$_headerbar_height: if($_sizevariant=='default', 46px, 40px);
|
||||
$_entry_height: if($_sizevariant=='default', 32px, 28px);
|
||||
$_btn_pad: if($_sizevariant=='default', 4px 9px, 2px 6px);
|
||||
$_btn_pad: if($_sizevariant=='default', 4px 9px, 2px 4px);
|
||||
$_hb_btn_pad: if($_sizevariant=='default', 6px, 5px);
|
||||
$_img_btn_pad: if($_sizevariant=='default', 5px, 2px);
|
||||
$_sel_menu_pad: if($_sizevariant=='default', 6px 10px, 4px 10px);
|
||||
$_circ_btn_pad: if($_sizevariant=='default', 4px, 2px);
|
||||
$_switch_margin: if($_sizevariant=='default', 10px, 7px);
|
||||
|
||||
$entry_radius: 0px;
|
||||
$entry_radius: $button_radius;
|
||||
|
||||
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$asset_suffix: if($variant=='dark', '-dark', '');
|
||||
$backdrop_transition: 200ms ease-out;
|
||||
$backdrop_transition: none;
|
||||
|
||||
$button_transition: all 200ms $ease-out-quad;
|
||||
$button_radius: 5px;
|
||||
$button_transition: none; //all 200ms $ease-out-quad;
|
||||
//$button_radius: 0px;
|
||||
|
||||
//added by me:
|
||||
$border_width: 2px;
|
||||
$button_min_height: 24px;
|
||||
$button_min_width: 16px;
|
||||
$button_padding: $_btn_pad;
|
||||
$button_border: 1px solid;
|
||||
$button_border: $border_width solid;
|
||||
|
||||
$menu_radius: 5px;
|
||||
$_slider_width: 10px;
|
||||
$_slider_min_length: 40px;
|
||||
|
||||
$menu_radius: $button_radius;
|
||||
$popover_radius: $window_radius;
|
||||
|
||||
|
||||
%selected_items {
|
||||
|
|
@ -41,11 +46,11 @@ $menu_radius: 5px;
|
|||
&:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
|
||||
|
||||
@at-root %selected_items_backdrop,
|
||||
&:backdrop {
|
||||
color: $backdrop_selected_fg_color;
|
||||
background-color: $backdrop_selected_bg_color;
|
||||
&:backdrop { //Simplewaita does not like backdrop changes except for headerbar and window decoration
|
||||
//color: $backdrop_selected_fg_color;
|
||||
//background-color: $backdrop_selected_bg_color;
|
||||
|
||||
&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||||
//&:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
94
source/common/entry.scss
Normal file
94
source/common/entry.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
|
||||
//
|
||||
// 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, block_cursor;
|
||||
//
|
||||
//$_entry_shadow: 0 1px 2px transparentize($shadow_hard_color, 0.6);
|
||||
//$_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
|
||||
//$_entry_edge: if($edge == none, none, _widget_edge($edge));
|
||||
//$_hilight_color: _button_hilight_color($bg_color);
|
||||
|
||||
@if $t==normal {
|
||||
color: $text_color;
|
||||
//border-color: $text_color;//$borders_color;
|
||||
//background-color: $base_color;
|
||||
@include relief($base_color, sunken);
|
||||
|
||||
//@include _shadows(entry_focus_shadow(transparentize($fc, 1)),inset $_entry_shadow, 0 1px $_hilight_color, $_entry_edge);
|
||||
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
|
||||
}
|
||||
@if $t==focus {
|
||||
//@include _shadows(entry_focus_shadow($fc), inset $_entry_shadow, 0 1px $_hilight_color, $_entry_edge);
|
||||
//border-color: entry_focus_border($fc);
|
||||
@include relief($base_color, sunken, $fc);
|
||||
}
|
||||
@if $t==insensitive or $t==osd-insensitive {
|
||||
color: $insensitive_fg_color;
|
||||
@include relief($insensitive_bg_color, sunken);
|
||||
//border-color: $insensitive_fg_color;
|
||||
//background-color: $insensitive_bg_color;
|
||||
//box-shadow: $_entry_edge;
|
||||
|
||||
}
|
||||
@if $t==backdrop {
|
||||
//color: $backdrop_text_color;
|
||||
//border-color: $backdrop_borders_color;
|
||||
//background-color: $backdrop_base_color;
|
||||
//box-shadow: $_blank_edge;
|
||||
}
|
||||
@if $t==backdrop-insensitive {
|
||||
//color: $backdrop_insensitive_color;
|
||||
//border-color: $backdrop_borders_color;
|
||||
//background-color: $insensitive_bg_color;
|
||||
//box-shadow: $_blank_edge;
|
||||
}
|
||||
@if $t==osd {
|
||||
color: $osd_text_color;
|
||||
@include relief($osd_bg_color, sunken);
|
||||
//border-color: $osd_borders_color;
|
||||
//background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
//background-clip: padding-box;
|
||||
//@include _shadows($_entry_shadow);;
|
||||
//text-shadow: 0 1px black;
|
||||
//-gtk-icon-shadow: 0 1px black;
|
||||
}
|
||||
@if $t==osd-focus {
|
||||
color: $osd_text_color;
|
||||
@include relief($osd_bg_color, sunken, $fc);
|
||||
//border-color: $selected_bg_color;
|
||||
//background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
//background-clip: padding-box;
|
||||
//@include _shadows(entry_focus_shadow($fc), $_entry_shadow);
|
||||
//text-shadow: 0 1px black;
|
||||
//-gtk-icon-shadow: 0 1px black;
|
||||
}
|
||||
//@if $t==osd-insensitive {
|
||||
// color: $osd_insensitive_fg_color;
|
||||
// border-color: $osd_borders_color;
|
||||
// background-color: $osd_insensitive_bg_color;
|
||||
// background-clip: padding-box;
|
||||
// box-shadow: none;
|
||||
// text-shadow: none;
|
||||
// -gtk-icon-shadow: none;
|
||||
//}
|
||||
@if $t==osd-backdrop {
|
||||
//color: $osd_text_color;
|
||||
//border-color: $osd_borders_color;
|
||||
//background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
|
||||
//background-clip: padding-box;
|
||||
//box-shadow: none;
|
||||
//text-shadow: none;
|
||||
//-gtk-icon-shadow: none;
|
||||
}
|
||||
@if $t==block_cursor {
|
||||
color: $base_color;
|
||||
background-color: $text_color;
|
||||
}
|
||||
}
|
||||
36
source/common/gtkinfobar.scss
Normal file
36
source/common/gtkinfobar.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
/**************
|
||||
* GtkInfoBar *
|
||||
**************/
|
||||
infobar {
|
||||
|
||||
$_bg_info_bar: desaturate(invert($selected_bg_color), 30%);
|
||||
&.info {$_bg_info_bar: $hint_bg;}
|
||||
&.question {$_bg_info_bar: $hint_bg;}
|
||||
&.warning {$_bg_info_bar: $warning_color;}
|
||||
&.error {$_bg_info_bar: $error_color}
|
||||
|
||||
@include relief($_bg_info_bar);
|
||||
|
||||
button {
|
||||
// FIXME: extend selection mode buttons
|
||||
@include button(normal, $_bg_info_bar);//, $fg_color, none);
|
||||
|
||||
&:hover { @include button(hover, $_bg_info_bar);}//$bg_color, $fg_color, none); }
|
||||
|
||||
&:active,
|
||||
&:checked { @include button(active, $_bg_info_bar);}//$bg_color, $fg_color, none); }
|
||||
|
||||
&:disabled { @include button(insensitive,$_bg_info_bar);}//$bg_color,$fg_color,none); }
|
||||
|
||||
|
||||
//&:backdrop,
|
||||
& {
|
||||
label, & { color: $fg_color; }
|
||||
}
|
||||
}
|
||||
|
||||
selection { background-color: darken($bg_color, 10%); }
|
||||
|
||||
*:link { color: $link_color; }
|
||||
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
*************/
|
||||
|
||||
$_levelbar_size: 9px;
|
||||
$_levelbar_border_radius: 5px;
|
||||
$_levelbar_border_radius: 0px;
|
||||
|
||||
levelbar {
|
||||
&.horizontal {
|
||||
|
|
@ -27,14 +27,11 @@ levelbar {
|
|||
// segmented level bar
|
||||
&.discrete {
|
||||
trough > block {
|
||||
min-height: 2px;
|
||||
margin: 1px;
|
||||
min-height: 4px;
|
||||
margin: $border_width;
|
||||
min-width: 24px;
|
||||
border-radius:0;
|
||||
&:first-child {border-radius: 2px 0 0 2px;}
|
||||
&:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,41 +44,38 @@ levelbar {
|
|||
|
||||
&.discrete > trough > block {
|
||||
min-width: $_levelbar_size - 7px;
|
||||
margin: 1px 0;
|
||||
margin: $border_width;
|
||||
min-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
> trough {
|
||||
padding: 1px;
|
||||
@include entry(normal);
|
||||
&:backdrop { @include entry(backdrop); }
|
||||
border-radius: $_levelbar_border_radius;
|
||||
@extend %scale_trough;
|
||||
}
|
||||
|
||||
// level bar colours
|
||||
> trough > block {
|
||||
border: 1px solid;
|
||||
//border: 1px solid;
|
||||
|
||||
&.low {
|
||||
border-color: $warning_color;
|
||||
//border-color: $warning_color;
|
||||
background-color: $warning_color;
|
||||
}
|
||||
|
||||
&.high,
|
||||
&:not(.empty) {
|
||||
border-color: $selected_bg_color;
|
||||
//border-color: $selected_bg_color;
|
||||
background-color: $selected_bg_color;
|
||||
}
|
||||
|
||||
&.full {
|
||||
border-color: $success_color;
|
||||
//border-color: $success_color;
|
||||
background-color: $success_color;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
background-color: darken($bg_color, 5%);
|
||||
border-color: darken($bg_color, 5%);
|
||||
background-color: darken($bg_color, 10%);
|
||||
//border-color: darken($bg_color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
285
source/common/notebook.scss
Normal file
285
source/common/notebook.scss
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
notebook, notebook.frame {
|
||||
|
||||
$stack_bg_color: mix($bg_color, $base_color, 50%);
|
||||
border-width: $border_width;
|
||||
border-style: solid;
|
||||
@include relief($stack_bg_color);
|
||||
|
||||
> header {
|
||||
//padding: 4px;
|
||||
//border: none;
|
||||
border: 0 solid;
|
||||
background-color: $bg_color;
|
||||
@include relief ($bg_color, sunken);
|
||||
margin: -$border_width;
|
||||
|
||||
|
||||
tabs {
|
||||
border-width: 0px;
|
||||
border-style: none;
|
||||
@include relief ($stack_bg_color, sunken);
|
||||
background-color: $bg_color;
|
||||
//margin: -$border_width;
|
||||
|
||||
}
|
||||
|
||||
&.top {
|
||||
//margin-bottom: 0;
|
||||
border-bottom-width: $border_width;
|
||||
|
||||
> tabs { margin-top: $border_width;}
|
||||
> tabs > tab {
|
||||
border-bottom: none;
|
||||
margin-top: $border_width;
|
||||
&:checked {
|
||||
//margin-top: 0px;
|
||||
margin-bottom: -$border_width;
|
||||
//box-shadow: inset 0 1px 1px 0 gtkalpha($light_shadow, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
//margin-top: 0;
|
||||
border-top-width: $border_width;
|
||||
|
||||
> tabs { margin-bottom: $border_width;}
|
||||
> tabs > tab {
|
||||
border-top: none;
|
||||
margin-bottom: $border_width;
|
||||
&:checked {
|
||||
margin-top: -$border_width;
|
||||
//margin-bottom: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
//margin-right: 0;
|
||||
border-right-width: $border_width;
|
||||
@if $gtk == 4 { > tabs { margin-right: 0;} }
|
||||
> tabs > tab {
|
||||
border-right: none;
|
||||
margin-left: $border_width;
|
||||
&:checked {
|
||||
|
||||
margin-right: -($border_width);// + if( $gtk==4, 1px, 0));
|
||||
//@if $gtk==3 {
|
||||
padding-right: 10px + $border_width;
|
||||
//}
|
||||
//margin-left: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right {
|
||||
//margin-left: 0;
|
||||
border-left-width: $border_width;
|
||||
@if $gtk == 4 { > tabs { margin-left: 0;}}
|
||||
> tabs > tab {
|
||||
border-left: none;
|
||||
margin-right: $border_width;
|
||||
&:checked {
|
||||
margin-left: -($border_width);// + if( $gtk==4, 1px, 0));
|
||||
//@if $gtk==3 {
|
||||
padding-left: 10px + $border_width;
|
||||
//}
|
||||
//margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top > tabs > arrow {
|
||||
@extend %notebook_vert_arrows;
|
||||
|
||||
//border-top-style: none;
|
||||
}
|
||||
|
||||
&.bottom > tabs > arrow {
|
||||
@extend %notebook_vert_arrows;
|
||||
|
||||
//border-bottom-style: none;
|
||||
}
|
||||
|
||||
@at-root %notebook_vert_arrows {
|
||||
//margin-left: -5px;
|
||||
//margin-right: -5px;
|
||||
padding: 2px;
|
||||
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
||||
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
|
||||
}
|
||||
|
||||
&.left > tabs > arrow {
|
||||
@extend %notebook_horz_arrows;
|
||||
|
||||
border-left-style: none;
|
||||
}
|
||||
|
||||
&.right > tabs > arrow {
|
||||
@extend %notebook_horz_arrows;
|
||||
|
||||
border-right-style: none;
|
||||
}
|
||||
|
||||
@at-root %notebook_horz_arrows {
|
||||
margin-top: -5px;
|
||||
margin-bottom: -5px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||||
|
||||
&.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
|
||||
}
|
||||
|
||||
> tabs > arrow {
|
||||
@extend %button_basic;
|
||||
|
||||
@extend %button_basic_flat;
|
||||
|
||||
//margin: $border_width;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover:not(:active):not(:backdrop) {
|
||||
background-clip: padding-box;
|
||||
background-image: none;
|
||||
//background-color: transparentize(white, 0.7);
|
||||
//border-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
}
|
||||
|
||||
&:disabled { @include button(disabled); }
|
||||
}
|
||||
|
||||
tab {
|
||||
|
||||
|
||||
outline-offset: -5px;
|
||||
font-weight: normal;
|
||||
padding: 3px 10px;
|
||||
border-width: $border_width;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
color: mix($text_color, $base_color, 50%);
|
||||
@include relief($base_color);
|
||||
margin: 0px;
|
||||
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $fg_color;
|
||||
background-color: darken($bg_color,4%);
|
||||
|
||||
&.reorderable-page {
|
||||
//border-color: transparentize($borders_color, 0.7);
|
||||
//background-color: transparentize($bg_color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:checked {
|
||||
@include relief(mix($bg_color, $base_color, 50%));
|
||||
color: $fg_color;
|
||||
&.reorderable-page {
|
||||
//border-color: transparentize($borders_color, 0.5);
|
||||
//background-color: transparentize($bg_color, 0.5);
|
||||
|
||||
//&:hover { background-color: transparentize($bg_color, 0.3); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// colors the button like the label, overridden otherwise
|
||||
button.flat {
|
||||
&:hover { color: currentColor; }
|
||||
|
||||
&, &:backdrop { color: gtkalpha(currentColor, 0.3); }
|
||||
|
||||
padding: 0;
|
||||
//margin-top: 4px;
|
||||
//margin-bottom: 4px;
|
||||
// FIXME: generalize .small-button?
|
||||
min-width: 1em;
|
||||
min-height: 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 4px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top,
|
||||
&.bottom {
|
||||
tabs {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
|
||||
&:not(:only-child) {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
|
||||
&:first-child { margin-left: -1px; }
|
||||
&:last-child { margin-right: -1px; }
|
||||
}
|
||||
|
||||
tab {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
|
||||
//&.reorderable-page { border-style: none solid; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.left,
|
||||
&.right {
|
||||
tabs {
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&:not(:only-child) {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
|
||||
&:first-child { margin-top: -1px; }
|
||||
&:last-child { margin-bottom: -1px; }
|
||||
}
|
||||
|
||||
tab {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
//&.reorderable-page { border-style: solid none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.top tab { padding-bottom: 4px; }
|
||||
&.bottom tab { padding-top: 4px; }
|
||||
}
|
||||
|
||||
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
||||
border: none;
|
||||
background-color: $stack_bg_color;
|
||||
margin: $border_width;
|
||||
//@include relief(mix($base_color, $bg_color, 50%));
|
||||
|
||||
|
||||
//&:backdrop { background-color: $backdrop_base_color; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@mixin overshoot($p, $t:normal, $c:$selected_bg_color) {
|
||||
@mixin overshoot($p, $t:normal, $c:$error_color) {
|
||||
//
|
||||
// overshoot
|
||||
//
|
||||
|
|
@ -13,49 +13,12 @@
|
|||
// normal, backdrop
|
||||
//
|
||||
|
||||
$_small_gradient_length: 3%;
|
||||
$_big_gradient_length: 50%;
|
||||
// overshoot is very simplified in this theme
|
||||
|
||||
$_small_gradient_size: 100% $_small_gradient_length;
|
||||
$_big_gradient_size: 100% $_big_gradient_length;
|
||||
background-color: gtkalpha($c, 0.1);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
@if $p==right or $p==left {
|
||||
$_small_gradient_size: $_small_gradient_length 100%;
|
||||
$_big_gradient_size: $_big_gradient_length 100%;
|
||||
}
|
||||
|
||||
$_small_gradient_color: $c;
|
||||
$_big_gradient_color: transparentize($c, 0.93);
|
||||
|
||||
@if $c==$fg_color {
|
||||
$_small_gradient_color: darken($borders_color, 10%);
|
||||
$_big_gradient_color: transparentize($fg_color, 0.93);
|
||||
|
||||
@if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
$_small_gradient: radial-gradient(farthest-side at $p,
|
||||
$_small_gradient_color 85%,
|
||||
transparentize($_small_gradient_color, 1));
|
||||
|
||||
$_big_gradient: radial-gradient(farthest-side at $p,
|
||||
$_big_gradient_color,
|
||||
transparentize($_big_gradient_color, 1));
|
||||
|
||||
@if $t==normal {
|
||||
background-image: $_small_gradient, $_big_gradient;
|
||||
background-size: $_small_gradient_size, $_big_gradient_size;
|
||||
}
|
||||
|
||||
@else if $t==backdrop {
|
||||
background-image: $_small_gradient;
|
||||
background-size: $_small_gradient_size;
|
||||
}
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: $p;
|
||||
|
||||
background-color: transparent; // reset some properties to be sure to not inherit them somehow
|
||||
border: none; //
|
||||
box-shadow: none; //
|
||||
}
|
||||
|
|
|
|||
60
source/common/paned.scss
Normal file
60
source/common/paned.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
paned {
|
||||
> separator {
|
||||
min-width: 2*$border_width;
|
||||
min-height: 2*$border_width;
|
||||
-gtk-icon-source: none; // defeats the ugly default handle decoration.
|
||||
border-width: $border_width; //for some reason, it's drawn twice as wide (only in GTK3!)
|
||||
border-style: solid;
|
||||
background-image: radial-gradient(circle closest-side, $fg_color 0%, $fg_color 75%, transparentize($fg_color, 1) 100%);
|
||||
background-clip: padding-box;
|
||||
//background-size: 2*$border_width + 2px 2*$border_width + 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
@include relief($bg_color);
|
||||
|
||||
&:selected { @include relief($selected_bg_color); } // FIXME is this needed?
|
||||
|
||||
&.wide {
|
||||
min-width: 5px;
|
||||
min-height: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal > separator {
|
||||
//background-repeat: repeat-y;
|
||||
|
||||
&:dir(ltr) {
|
||||
//margin: 0 -8px 0 0;
|
||||
//padding: 0 8px 0 0;
|
||||
//background-position: left;
|
||||
}
|
||||
&:dir(rtl) {
|
||||
//margin: 0 0 0 -8px;
|
||||
//padding: 0 0 0 8px;
|
||||
//background-position: right;
|
||||
}
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
//background-repeat: repeat-y, repeat-y;
|
||||
//background-position: left, right;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical > separator {
|
||||
//margin: 0 0 -8px 0;
|
||||
//padding: 0 0 8px 0;
|
||||
//background-repeat: repeat-x;
|
||||
//background-position: top;
|
||||
|
||||
&.wide {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
//background-repeat: repeat-x, repeat-x;
|
||||
//background-position: bottom, top;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
source/common/relief.scss
Normal file
38
source/common/relief.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
//auxiliary functions for buttons first
|
||||
|
||||
|
||||
|
||||
|
||||
@function highlight_border ($c) {
|
||||
@return lighten($c, 15%);
|
||||
}
|
||||
@function shadow_border ($c) {
|
||||
@return darken($c, 10%);
|
||||
}
|
||||
|
||||
|
||||
@mixin relief($bg, $type:raised, $bc:$bg) {
|
||||
// draws a raised (default) or sunken surface
|
||||
// $bg: background color for the surface
|
||||
// $type: either raised (default) or sunken (or any other value, which makes it sunken)
|
||||
// $bc: border color: you may want a different border color (such as an active entry); otherwise it equals $bg
|
||||
|
||||
// it only sets background and border colors; color or any other property are not set.
|
||||
|
||||
background-color: $bg;
|
||||
//border-width: $border_width;
|
||||
//border-style: solid;
|
||||
@if $type==raised {
|
||||
border-left-color: highlight_border($bc);
|
||||
border-top-color: highlight_border($bc);
|
||||
border-right-color: shadow_border($bc);
|
||||
border-bottom-color: shadow_border($bc);
|
||||
}
|
||||
@else { //usually "sunken", but really anything other than "raised"
|
||||
border-left-color: shadow_border($bc);
|
||||
border-top-color: shadow_border($bc);
|
||||
border-right-color: highlight_border($bc);
|
||||
border-bottom-color: highlight_border($bc);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,27 @@
|
|||
undershoot {
|
||||
|
||||
$undershoot_color: mix($hint_bg, $hint_fg, 50%);
|
||||
background-repeat: no-repeat;
|
||||
background-clip: border-box;
|
||||
background-image: image(gtkalpha($undershoot_color, 0.3));
|
||||
&.top {
|
||||
background-image: linear-gradient(to bottom, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 100% 1em;
|
||||
//background-image: linear-gradient(to bottom, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 100% 0.5em;
|
||||
background-position: top;
|
||||
}
|
||||
&.bottom {
|
||||
background-image: linear-gradient(to top, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 100% 1em;
|
||||
//background-image: linear-gradient(to top, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 100% 0.5em;
|
||||
background-position: bottom;
|
||||
}
|
||||
&.left {
|
||||
background-image: linear-gradient(to right, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 1em 100%;
|
||||
//background-image: linear-gradient(to right, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 0.5em 100%;
|
||||
background-position: left;
|
||||
}
|
||||
&.right {
|
||||
background-image: linear-gradient(to left, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 1em 100%;
|
||||
//background-image: linear-gradient(to left, gtkalpha(currentColor, 0.5), gtkalpha(currentColor, 0.2), gtkalpha(currentColor, 0));
|
||||
background-size: 0.5em 100%;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
17
source/common/xfce.scss
Normal file
17
source/common/xfce.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
#XfceNotifyWindow {
|
||||
|
||||
color: $hint_fg;
|
||||
border-radius: $window_radius;
|
||||
border-width: $border_width;
|
||||
border-style: solid;
|
||||
@include relief($hint_bg);
|
||||
label {color: $hint_fg}
|
||||
label #summary { font-weight: bold; }
|
||||
|
||||
button {
|
||||
@include button(osd);
|
||||
&:hover {@include button(osd-hover); }
|
||||
&:active {@include button(osd-active);}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue