Fix scrollbars
parent
0edb0d13e4
commit
f30b5ec971
|
@ -2,6 +2,8 @@
|
||||||
! Buttons
|
! Buttons
|
||||||
**********/
|
**********/
|
||||||
|
|
||||||
|
$shadow_strength: .3;
|
||||||
|
|
||||||
@include exports("button_extends") {
|
@include exports("button_extends") {
|
||||||
%button {
|
%button {
|
||||||
padding: $spacing ($spacing + 2px);
|
padding: $spacing ($spacing + 2px);
|
||||||
|
@ -73,16 +75,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin linked_button($bg) {
|
@mixin linked_button($bg) {
|
||||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
|
||||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
|
||||||
|
|
||||||
@extend %linked_button;
|
@extend %linked_button;
|
||||||
|
|
||||||
box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12 + $border_strength)),
|
box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12)),
|
||||||
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||||
|
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12 + $border_strength)),
|
box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12)),
|
||||||
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,7 +89,7 @@
|
||||||
&:active:focus, &:active:hover:focus,
|
&:active:focus, &:active:hover:focus,
|
||||||
&:checked, &:checked:hover,
|
&:checked, &:checked:hover,
|
||||||
&:checked:focus, &:checked:hover:focus {
|
&:checked:focus, &:checked:hover:focus {
|
||||||
box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12 + $border_strength)),
|
box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12)),
|
||||||
inset 0 1px alpha($dark_shadow, .07),
|
inset 0 1px alpha($dark_shadow, .07),
|
||||||
inset 0 -1px alpha($dark_shadow, .05);
|
inset 0 -1px alpha($dark_shadow, .05);
|
||||||
}
|
}
|
||||||
|
@ -120,28 +119,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin button($bg, $fg) {
|
@mixin button($bg, $fg) {
|
||||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
|
||||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
|
||||||
|
|
||||||
@extend %button;
|
@extend %button;
|
||||||
@include linear-gradient(shade($bg, 1.2));
|
@include linear-gradient(shade($bg, 1.3));
|
||||||
@include border(rgba(0,0,0,.12 + $border_strength));
|
@include border(rgba(0,0,0,.12));
|
||||||
|
|
||||||
color: $fg;
|
color: $fg;
|
||||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
|
||||||
|
border-color: alpha($bg, 0);
|
||||||
|
|
||||||
&.flat {
|
&.flat {
|
||||||
border-color: transparent;
|
border-color: alpha($bg, 0);
|
||||||
background-color: transparent;
|
background-color: alpha($bg, 0);
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&, &.flat {
|
&, &.flat {
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
@include linear-gradient(shade($bg, 1.2));
|
@include linear-gradient(shade($bg, 1.4));
|
||||||
@include border(rgba(0,0,0,.2 + $border_strength));
|
|
||||||
|
|
||||||
|
border-color: alpha($bg, 0);
|
||||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
* {
|
* {
|
||||||
-GtkRange-slider-width: 8;
|
-GtkRange-slider-width: 8;
|
||||||
-GtkRange-stepper-spacing: 0;
|
-GtkRange-stepper-spacing: 0;
|
||||||
-GtkRange-trough-border: $spacing;
|
-GtkRange-trough-border: 2;
|
||||||
-GtkRange-trough-under-steppers: 1;
|
-GtkRange-trough-under-steppers: 1;
|
||||||
-GtkScrollbar-has-backward-stepper: false;
|
-GtkScrollbar-has-backward-stepper: false;
|
||||||
-GtkScrollbar-has-forward-stepper: false;
|
-GtkScrollbar-has-forward-stepper: false;
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbar {
|
.scrollbar {
|
||||||
border: none;
|
border: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&.button {
|
&.button {
|
||||||
|
@ -25,32 +25,55 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
color: shade($bg_color, 0.6);
|
color: alpha($fg_color, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slider, &.slider.vertical {
|
&.slider, &.slider.vertical {
|
||||||
border: none;
|
border: 0;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
background-color: mix($bg_color, $fg_color, 0.21);
|
background-color: shade($bg_color, 0.5);
|
||||||
|
|
||||||
&:hover { background-color: $selected_bg_color; }
|
&:hover { background-color: shade($bg_color, 0.3); }
|
||||||
|
|
||||||
&:active { background-color: shade($selected_bg_color, .9); }
|
&:active { background-color: $selected_bg_color; }
|
||||||
|
|
||||||
&.fine-tune:prelight:active { border: 2px solid transparent; }
|
&.fine-tune:prelight:active { border: 2px solid transparent; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// overlay scrolling indicator
|
||||||
|
&.overlay-indicator {
|
||||||
|
&:not(.dragging):not(.hovering) {
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
-GtkRange-slider-width: 4px;
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
margin: 0;
|
||||||
|
background-color: $fg_color;
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trough {
|
||||||
|
border-style: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dragging, &.hovering { opacity: 0.7; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scrollbars-junction,
|
.scrollbars-junction,
|
||||||
|
.scrollbars-junction.frame,
|
||||||
.scrollbar.trough {
|
.scrollbar.trough {
|
||||||
border: none;
|
border: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-color: $bg_color;
|
background-color: $bg_color;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* overlay scrollbar */
|
// ubuntu overlay scrollbars
|
||||||
OsThumb, OsScrollbar {
|
OsThumb, OsScrollbar {
|
||||||
color: shade($bg_color, 0.7);
|
color: shade($bg_color, 0.7);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue