Skip to content

Commit

Permalink
Improvement: GTK3&4 - sliders appearance
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekomer
thekomer committed Feb 6, 2022
1 parent aecdb94 commit 164527b
Show file tree
Hide file tree
Showing 8 changed files with 262 additions and 248 deletions.
6 changes: 3 additions & 3 deletions gtk-3.0/_drawing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,9 +585,9 @@
box-shadow: none;
}

@mixin scale-highlight($dir) {
// background: linear-gradient(to $dir, #FF6A00, #00f7d2);
background: linear-gradient(to $dir, $theme-gradient-start, $theme-gradient-end);
@mixin scale-highlight($dir, $state:normal) {
//background: linear-gradient(to $dir, $theme-gradient-start, $theme-gradient-end);
background: linear-gradient(to $dir, if($state==disabled, transparentize($theme-gradient-start, 0.5), $theme-gradient-start), if($state==disabled, transparentize($theme-gradient-end, 0.5),$theme-gradient-end));
}

@mixin selected-tab($dir) {
Expand Down
113 changes: 57 additions & 56 deletions gtk-3.0/gtk-dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3513,7 +3513,7 @@ progressbar progress, scale highlight {
margin: 0; }
progressbar progress:disabled, scale highlight:disabled {
border: none;
background-color: rgba(255, 255, 255, 0.14); }
background: linear-gradient(to right, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5)); }
progressbar progress:backdrop, progressbar:backdrop progress, scale highlight:backdrop, progressbar progress:active:backdrop, progressbar:backdrop progress:active, scale highlight:active:backdrop {
border-color: #ff791a;
background-color: #ff791a; }
Expand All @@ -3532,6 +3532,8 @@ scale {
min-width: 6px; }
scale.vertical highlight {
background: linear-gradient(to bottom, #ff3300, #ffa100); }
scale.vertical highlight:disabled {
background: linear-gradient(to bottom, rgba(255, 51, 0, 0.5), rgba(255, 161, 0, 0.5)); }
scale slider {
min-height: 15px;
min-width: 15px;
Expand Down Expand Up @@ -3579,15 +3581,14 @@ scale {
border-color: #111524;
border: 2px solid #FF6A00;
border-radius: 12px;
background-color: #1f253f; }
scale slider:active {
border-color: #cc5500; }
background-color: #0E111D; }
scale slider:disabled {
background-color: #06070c;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
background-color: #161b2e;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
border-color: rgba(255, 106, 0, 0.5); }
scale slider:backdrop, scale slider:backdrop:disabled {
transition: 200ms ease-out;
background-color: #06070c;
background-color: #161b2e;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1); }
row:selected scale slider:disabled, row:selected scale slider {
border-color: #cc5500; }
Expand Down Expand Up @@ -3684,239 +3685,239 @@ scale {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-before:not(.marks-after) slider:hover {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-before:not(.marks-after) slider:active {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-before:not(.marks-after) slider:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-before:not(.marks-after) slider:backdrop {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-before:not(.marks-after) slider:backdrop:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider:hover {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider:active {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider:backdrop {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.horizontal.marks-after:not(.marks-before) slider:backdrop:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.horizontal.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider:hover {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider:active {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider:backdrop {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-before:not(.marks-after) slider:backdrop:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-before:not(.marks-after).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider:hover {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider:active {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider:backdrop {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
scale.vertical.marks-after:not(.marks-before) slider:backdrop:disabled {
min-height: 15px;
min-width: 15px;
margin: -7px;
border: 2px solid #FF6A00;
border: 2px solid #ff6a00;
border-radius: 50%;
background-color: #1f253f;
background-color: #0E111D;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
scale.vertical.marks-after:not(.marks-before).fine-tune slider {
margin: -7px; }
Expand Down Expand Up @@ -3986,7 +3987,7 @@ scale {
**************/
scrollbar {
background-color: #101320;
border-radius: 0.5em;
border-radius: 0.6em;
transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
* {
-GtkScrollbar-has-backward-stepper: false;
Expand Down
Loading

0 comments on commit 164527b

Please sign in to comment.