Gtk-4: Fix color styling issues

This commit is contained in:
EliverLara
2021-12-05 14:55:19 -06:00
parent f187d1496d
commit ae73376031
8 changed files with 1288 additions and 1258 deletions

View File

@@ -597,7 +597,7 @@ box-shadow: none;
} }
@mixin scale-highlight($dir) { @mixin scale-highlight($dir) {
background: linear-gradient(to $dir, #00f17d, #00f7d2); background: linear-gradient(to $dir, #00c6ff, $selected_bg_color);
} }
@mixin selected-tab($dir) { @mixin selected-tab($dir) {
@@ -605,7 +605,7 @@ box-shadow: none;
linear-gradient(to $dir, $selected-tab-gradient-start, $selected-tab-gradient-end) linear-gradient(to $dir, $selected-tab-gradient-start, $selected-tab-gradient-end)
left left
bottom bottom
lighten(mix($base_color, $headerbar_color, 30%), 2%) lighten(mix($base_color, darken($bg_color, 8%), 30%), 4%)
no-repeat; no-repeat;
@if $dir==right { background-size: 100% 2px; } @if $dir==right { background-size: 100% 2px; }
@else if $dir==bottom { background-size: 2px 100%; } @else if $dir==bottom { background-size: 2px 100%; }

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,6 @@
$variant: 'dark'; $variant: 'light';
@import '../gtk-3.0/colors'; @import '../gtk-3.0/colors';
@import '../gtk-3.0/elementary-colors'; @import '../gtk-3.0/elementary-colors';

View File

@@ -1,12 +1,12 @@
/************* /*************
* Notebooks * * Notebooks *
*************/ *************/
notebook { notebook {
> header { > header {
padding: 1px; padding: 1px;
border-color: transparent; border-color: transparent;
border-width: 1px; border-width: 1px;
background-color: mix($base_color, $headerbar_color, 30%); background-color: mix($base_color, darken($bg_color, 8%), 30%);
&:backdrop { &:backdrop {
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;

View File

@@ -150,7 +150,7 @@ scale {
$_scale_disabled_bg: darken($_scale_bg, 15%); $_scale_disabled_bg: darken($_scale_bg, 15%);
slider { slider {
border-color: $base_color; border-color: $base_color;
border: 2px solid #00f17d; border: 2px solid $selected_bg_color;
border-radius: 12px; border-radius: 12px;
background-color: $_scale_bg; background-color: $_scale_bg;
@@ -282,7 +282,7 @@ scale {
min-height: 15px; min-height: 15px;
min-width: 15px; min-width: 15px;
margin: -7px; margin: -7px;
border: 2px solid #00f17d; border: 2px solid $selected_bg_color;
border-radius: 50%; border-radius: 50%;
background-color: $_scale_bg; background-color: $_scale_bg;

View File

@@ -1,18 +1,20 @@
/********** /**********
* Switch * * Switch *
**********/ **********/
switch { switch {
font-size: 1px; font-size: 1px;
font-weight: bold; font-weight: bold;
outline-offset: -4px; outline-offset: -4px;
transition: all 200ms ease-in; transition: all 200ms ease-in;
border: 1px solid $borders_color; border: none;
border-radius: 14px; border-radius: 14px;
color: transparent; color: transparent;
padding: 2.3px 0px; padding: 2.3px 0px;
background: linear-gradient(to right, #1E2233, #1E2233);
background: linear-gradient(to right, #859398, #859398);
// border: 1px solid rgba(170, 170, 170, 0.4); // border: 1px solid rgba(170, 170, 170, 0.4);
box-shadow: 0px 2px 3px rgba(138, 138, 138, 0.753);
&:disabled { &:disabled {
background-color: $insensitive_bg_color; background-color: $insensitive_bg_color;
} }
@@ -27,12 +29,14 @@ switch {
&:active, &:active,
&:checked { &:checked {
background: linear-gradient(to right, #f7005a, #fadd00); // border: 1px solid $teal;
background: linear-gradient(to right, #56CCF2, #2F80ED);
slider{ slider{
background: #fff; background: #fff;
} }
&:backdrop { &:backdrop {
background: linear-gradient(to right, darken(#f7005a, 5%), darken(#fadd00, 5%)); //border: 1px solid $teal;
background: linear-gradient(to right, darken(#56CCF2, 5%), darken(#2F80ED, 5%));
slider { slider {
&:backdrop { &:backdrop {
box-shadow:none; box-shadow:none;
@@ -45,14 +49,14 @@ switch {
// Handle // Handle
slider { slider {
padding: 2px; padding:2px;
margin: 0 2.3px; margin: 0 2.3px;
min-width: 12px; min-width: 12px;
min-height: 12px; min-height: 12px;
border-radius: 100%; border-radius: 100%;
transition: $button_transition; transition: $button_transition;
background-color: darken(#1E2233, 5%); background-color: lighten(#859398, 20%);
&:backdrop { &:backdrop {
padding:2px; padding:2px;

View File

@@ -15,7 +15,7 @@ decoration, window {
// lamefun trick to get rounded borders regardless of CSD use // lamefun trick to get rounded borders regardless of CSD use
border-width: 0px; border-width: 0px;
box-shadow: 0 4px 10px 2px transparentize($borders_color, 0.2); box-shadow: 0 4px 10px 2px transparentize(#211A1E, 0.6);
// FIXME rationalize shadows // FIXME rationalize shadows
// this is used for the resize cursor area // this is used for the resize cursor area