Added ambar colors

This commit is contained in:
EliverLara
2018-09-07 15:36:06 -05:00
parent ade06a2010
commit 2dd9ca028f
128 changed files with 806 additions and 787 deletions

View File

@@ -8,21 +8,22 @@ $bg_color: if($variant == 'light', darken( #EEEEEE, 3%), #161925);
$fg_color: if($variant == 'light', #31363d, #C3C7D1);
$switch_bg: if($variant == 'light', #ffffff, transparentize(black,1));
$shadow_color: rgba(162, 162, 165, 0.21);
$main_dark_color: #202127;
// Primary colors
$lime: #71f79f;
$red: #ed254e;
$orange: #ff6a00;
$yellow: #f9dc5c;
$purple: #c74ded;
$orange: #ff9200;
$yellow: #fadd00;
$purple: #d400dc;
$darkpurple: #7b7bbd;
$blue: #7cb7ff;
$blue: #2F80ED;
$cyan: #00c1e4;
$slider: #7b7bbd;
$teal: #00e8c6;
$selected_fg_color: #fefefe;
$selected_bg_color: #00D3A7;
$selected_bg_color: #f7b922;
/*$selected_bg_color: #00e8c6;06d6a0*/
$selected_borders_color: darken($selected_bg_color, 10%);
$borders_color: if($variant == 'light', transparentize(black,0.87), transparentize(#eee,0.9));
@@ -33,7 +34,7 @@ $top_highlight: if($variant == 'light', transparentize(white, 0.8), transparenti
$bottom_highlight: if($variant == 'light', transparentize(black, 0.8), transparentize(black, 0.9));
$dark_fill: mix($borders_color, $bg_color, 35%);
$headerbar_color: $bg_color;
$headerbar_fg_color: $text_color;
$headerbar_fg_color: lighten( $text_color, 40%);
$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));
$popover_bg_color: $base_color;
$popover_hover_color: darken($bg_color, 2%);
@@ -105,6 +106,6 @@ $backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdro
$scale_bg: if($variant == 'light', transparentize(black,0.86) ,transparentize(white,0.86));
$scale_disabled_bg: if($variant == 'light', transparentize(black, 0.94) ,transparentize(white, 0.94));
$suggested_bg_color: linear-gradient(to right, #5797f7 0%, #00dcf4 100%);
$destructive_bg_color: linear-gradient(to right, #ee0979, #ff6a00);
$suggested_bg_color: linear-gradient(to right, #00ffb7 0%, #00d593 100%);
$destructive_bg_color: linear-gradient(to right, #fe8c00, #f83600);
$menu_shadow_color: if($variant == 'light', transparentize(rgb(122, 122, 122), 0.6), transparent);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -5,7 +5,7 @@
headerbar {
padding: 0px 13px;
min-height: 34px;
background: if($variant == 'light', linear-gradient(to bottom, #fff, #fff) , mix($base_color, darken($headerbar_color, 8%), 30%));
background: if($variant == 'light', linear-gradient(to bottom, darken($main_dark_color, 7%), darken($main_dark_color, 7%)) , mix($base_color, darken($headerbar_color, 8%), 30%));
color: $headerbar_fg_color;
border-radius: 0;
&:backdrop {
@@ -74,7 +74,7 @@ headerbar {
&:backdrop,
&:disabled,
&:backdrop:disabled {
@include button(backdrop-header,red,transparentize($fg_color,0.8));
@include button(backdrop-header,red,transparentize($fg_color,0.3));
border: none;
}
@@ -162,14 +162,14 @@ headerbar {
}
.linked > button:active{
@extend %linked-header;
background: #00e8b7;
background: linear-gradient(to right, #eee90a, $selected_bg_color) ;
color: rgb(255, 250, 250);
}
.linked > button:checked{
@extend %linked-header;
border-radius: 23px;
background: #00e8b7;
box-shadow: 0px 2px 4px rgba(177, 177, 177, 0.753);
background: linear-gradient(to right, #eee90a, $selected_bg_color) ;
box-shadow: 0px 2px 4px transparentize($selected_bg_color, 0.02);
color: rgb(255, 250, 250);
&:backdrop{
color: darken(rgb(255, 250, 250), 4%);

View File

@@ -29,7 +29,7 @@ menu,
.context-menu {
margin: 4px;
padding: 2px 0px;
background: if( $variant == 'light', linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
background: if( $variant == 'light', linear-gradient(to bottom, darken($base_color, 4%) 20%, darken($base_color, 4%) ), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
border: 1px solid $borders_color; // adds borders in a non composited env
.csd & { border: none; } // axes borders in a composited env

View File

@@ -5,7 +5,7 @@
popover.background {
padding: 2px;
border-radius: 5px;
background: if( $variant == 'light', linear-gradient(to bottom, #fff 20%, #fff), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
background: if( $variant == 'light', linear-gradient(to bottom,darken($base_color, 4%) 20%, darken($base_color, 4%)), linear-gradient(to bottom, lighten($bg_color, 2%), darken($bg_color, 2%)));
.csd &, & { border: 1px solid $borders_color; }

View File

@@ -19,7 +19,7 @@
%scale_highlight {
border: none;
background: linear-gradient(to right, #00f17d, #00f7d2);
background: linear-gradient(to right, #fed349, #ff7800);
border-radius: 3px;
margin: 0;

View File

@@ -121,10 +121,10 @@ stacksidebar {
/*--*/
placessidebar{
$_sidebar_color: if($variant == 'light', #222e39, #161925);
$_sidebar_color: if($variant == 'light', darken($main_dark_color, 3%), $main_dark_color);
&.sidebar{
background-color: transparent;
background-image:linear-gradient(to right, #171e27 40px,
background-image:linear-gradient(to right, darken($main_dark_color, 5%) 40px,
$_sidebar_color 35px,$_sidebar_color 36px,
$_sidebar_color 36px,$_sidebar_color 99%,
$_sidebar_color 100%);
@@ -157,9 +157,9 @@ placessidebar{
}
&:selected{
color: rgba(0,0,0,0.54);
color: #fff;
background-color: transparent;
background-image:linear-gradient(to right, #00e8b7 40px,
background-image:linear-gradient(to right, $selected_bg_color 40px,
rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
&:hover{
color: #ffffff;
@@ -171,7 +171,7 @@ placessidebar{
&:backdrop{
color: rgba(0,0,0,0.54);;
background-color: transparent;
background-image:linear-gradient(to right, #00e8b7 40px,
background-image:linear-gradient(to right, $selected_bg_color 40px,
rgba(65,67,75,0) 36px, rgba(65,67,75,0)97%);
}

View File

@@ -30,13 +30,13 @@ switch {
&:active,
&:checked {
// border: 1px solid $teal;
background: linear-gradient(to right, #ff9200, #fadd00);
background: linear-gradient(to right, #56CCF2, #2F80ED);
slider{
background: #fff;
}
&:backdrop {
//border: 1px solid $teal;
background: linear-gradient(to right, darken(#ff9200, 5%), darken(#fadd00, 5%));
background: linear-gradient(to right, darken(#56CCF2, 5%), darken(#2F80ED, 5%));
slider {
&:backdrop {
box-shadow:none;