lesderid
/
paper-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

trough style adjustments

This commit is contained in:
Sam Hewitt 2016-04-15 12:59:10 -04:00
parent a754139cb2
commit 1a50924925
7 changed files with 2179 additions and 850 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Paper/gtk-3.0/_colors.scss
View File

@ -11,7 +11,7 @@ $headerbar_fg_color: if($variant == 'light', #ffffff, transparentize(#ffffff, 0.
$selected_fg_color: #ffffff;
$selected_bg_color: if($variant == 'light', lighten(#347D9F, 10%), darken(#9fb0b9,20%));
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 20%), darken($selected_bg_color, 30%));
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 10%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', darken($bg_color,20%), darken($bg_color,12%));
$borders_edge: if($variant == 'light', transparentize(white, 0.8), transparentize(white, 0.9));
$link_color: blue;
@ -55,6 +55,7 @@ $drop_target_color: #4e9a06;
// Insensitive state colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_base_color: darken($base_color, 5%);
$insensitive_borders_color: $borders_color;
// Backdrop state colors
@ -65,6 +66,7 @@ $backdrop_headerbar_bg_color: darken($headerbar_bg_color, 5%);
$backdrop_headerbar_fg_color: transparentize($headerbar_fg_color, 0.5);
$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_bg_color: if($variant == 'light', lighten($selected_bg_color, 5%), lighten($selected_bg_color, 5%));
$backdrop_selected_fg_color: if($variant == 'light', transparentize($selected_fg_color, 0.5), transparentize($selected_fg_color, 0.5));
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);

1348
Paper/gtk-3.0/gtk-dark.css
View File

File diff suppressed because it is too large Load Diff

1383
Paper/gtk-3.0/gtk.css
View File

File diff suppressed because it is too large Load Diff

100
Paper/gtk-3.0/widgets/_level-bars.scss
View File

@ -2,28 +2,20 @@
* Level Bar *
*************/
GtkLevelBar,
.level-bar,
levelbar {
.fill-block,
block {
min-width: 32px;
min-height: 1px;
}
&.vertical block {
min-width: 1px;
min-height: 32px;
}
-GtkLevelBar-min-block-width: 32;
-GtkLevelBar-min-block-height: 8;
&:backdrop { transition: $backdrop_transition; }
.trough,
trough {
border: 1px solid;
padding: 2px;
border-radius: 3px;
@include entry(normal);
&:backdrop { @include entry(backdrop); }
@extend %scale_trough;
margin: 0;
padding:2px;
border-radius:3px;
}
&.horizontal.indicator-discrete.fill-block { margin: 0 1px; }
@ -32,53 +24,73 @@ levelbar {
&.vertical.indicator-discrete.fill-block { margin: 1px 0; }
&.vertical.discrete block { margin: 1px 0; }
.fill-block:not(.empty),
block:not(.empty) {
border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
darken($selected_bg_color,5%));
background-color: $selected_bg_color;
box-shadow: 0 1px transparentize(black, 0.9);
border-radius: 1px;
&:backdrop {
border-color: $selected_bg_color;
box-shadow: none;
}
}
%fill-block,
.fill-block,
block {
&.low {
border-color: darken($warning_color,10%);
border-radius:2px;
padding:2px;
min-width: 32px;
min-height: 8px;
&.low,
&.level-low {
border:1px solid darken($warning_color,10%);
background-color: $warning_color;
&:backdrop { border-color: $warning_color; };
&:backdrop { border:1px solid $warning_color; };
}
&.high {
border-color: darken($selected_bg_color,10%);
&.high,
&.level-high {
border:1px solid darken($selected_bg_color,10%);
background-color: $selected_bg_color;
&:backdrop { border-color: $selected_bg_color; }
&:backdrop { border:1px solid $selected_bg_color; }
}
&.full {
border-color: darken($success_color,10%);
&.full,
&.level-full {
border:1px solid darken($success_color,10%);
background-color: $success_color;
&:backdrop { border-color: $success_color; };
&:backdrop { border:1px solid $success_color; };
}
&.empty {
border: 1px solid if($variant=='light', darken($selected_bg_color,10%),
darken($selected_bg_color,5%));
border-radius: 1px;
&.empty,
&.level-empty {
background-color: transparent;
border-color: if($variant=='light', transparentize($fg_color,0.8),
border:1px solid if($variant=='light', transparentize($fg_color,0.8),
transparentize($fg_color,0.9));
box-shadow: none;
&:backdrop { border-color: transparentize($backdrop_fg_color,0.85); }
}
}
}
// Trough
&.horizontal,
&.vertical {
trough,
.trough {
@extend %scale_trough;
}
}
// Vertical
&.vertical {
-GtkLevelBar-min-block-width: 8;
-GtkLevelBar-min-block-height: 32;
.fill-block,
block {
@extend %fill-block;
min-width: 8px;
min-height: 32px;
}
}
}

75
Paper/gtk-3.0/widgets/_progress-bars.scss
View File

@ -2,9 +2,11 @@
* Progress bars *
*****************/
%progressbar,
GtkProgressBar,
.progressbar,
progressbar {
@extend %scale_trough;
// sizing
&.horizontal {
@ -27,43 +29,51 @@ progressbar {
font-size: smaller;
color: transparentize($fg_color, 0.6);
&:backdrop {
box-shadow: none;
transition: $backdrop_transition;
&:active {
border-radius:0px;
color: transparentize(black,0.5);
background-color: $selected_bg_color;
border-color: darken($selected_bg_color, 10%);
&:backdrop {
background-color: lighten($selected_bg_color, 10%);
border-color: lighten(darken($selected_bg_color, 10%), 10%);
}
}
.trough,
trough { @extend %scale_trough; }
&:backdrop .trough,trough { @extend %scale_trough:backdrop; } // looks like states are not passed to the trough component here
&:backdrop {
transition: $backdrop_transition;
}
.progressbar,
progress {
@extend %scale_highlight;
border-radius: 2px;
border-radius: 0px;
// default 2px
&.left {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
&.right {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
&.top {
border-top-right-radius: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
&.bottom {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
}
&:backdrop .progressbar { @extend %scale_highlight:backdrop; } // states not passed here as well
&:backdrop progress { @extend %scale_highlight:backdrop; } // states not passed here as well
&.osd { // progressbar.osd used for epiphany page loading progress
@ -79,7 +89,7 @@ progressbar {
box-shadow: none;
}
.progress,
.progressbar,
progress {
border-style: none;
border-radius: 0;
@ -90,38 +100,11 @@ progressbar {
row,
.list-row {
&:selected {
border: 1px solid darken($selected_bg_color, 10%);
color: transparentize(black,0.5);
background-color: $selected_bg_color;
}
}
}
GtkProgressBar {
@extend %progressbar;
&:active {
color: transparentize(black,0.5);
background-color: $selected_bg_color;
border-color: darken($selected_bg_color, 10%);
&:backdrop {
background-color: lighten($selected_bg_color, 10%);
border-color: lighten(darken($selected_bg_color, 10%), 10%);
}
}
&:backdrop {
}
}
trough,
.trough {
@extend %scale_trough;
}

31
Paper/gtk-3.0/widgets/_scales.scss
View File

@ -3,24 +3,22 @@
************/
%scale_trough {
border: 1px solid $borders_color;
background-color: $dark_fill;
box-shadow: 0px 1px $bottom_highlight;
border:none;
background-color: $base_color;
box-shadow: inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight;
border-radius: 2px;
&:insensitive,
&:disabled {
margin: 6px;
background-color: $insensitive_bg_color;
box-shadow: none;
}
&:backdrop {
background-color: $backdrop_dark_fill;
border-color: $backdrop_borders_color;
box-shadow: none;
background-color: $backdrop_base_color;
transition: $backdrop_transition;
&:insensitive,
&:disabled { background-color: $insensitive_bg_color; }
}
@ -49,13 +47,16 @@
border-radius: 2px;
margin: 6px 0;
&:insensitive,
&:disabled {
background-color: transparent;
border-color: transparent;
}
&:backdrop {
&:backdrop,
&:active:backdrop {
border-color: if($variant=='light', $selected_bg_color, $selected_borders_color);
background-color: lighten($selected_bg_color, 10%);
&:disabled {
background-color: transparent;
border-color: transparent;
@ -97,7 +98,6 @@ scale {
highlight { margin: -1px; }
// Slider, the scale handle
%scale_slider,
.slider,
slider {
min-height: 16px;
@ -127,8 +127,6 @@ scale {
&:insensitive,
&:disabled {
box-shadow:none;
box-shadow:0 1px 1px 0 transparentize(black, 0.8);
border: 1px solid transparentize(black, 0.8);
}
&:backdrop {}
@ -160,6 +158,7 @@ scale {
trough,
.trough {
@extend %scale_trough;
border-radius: 2px;
margin: 6px;
outline-offset: 2px;
@ -199,17 +198,14 @@ scale {
// to make the trough grow in fine-tune mode
.slider,
slider {
@extend %scale_highlight;
min-height: 16px;
min-width: 16px;
margin: 2px;
background-color:$base_color;
border-color:$base_color;
box-shadow:none;
border: 1px solid $base_color;
border: 1px solid transparentize(black, 0.7);
border-radius: 12px;
box-shadow:none;
}
trough,
@ -235,6 +231,7 @@ scale {
// in media player to indicate how much video stream as been cached
fill {
@extend %scale_trough;
border-radius: 2px;
&, &:backdrop {
background-color: $borders_color;

88
Paper/gtk-3.0/widgets/_switches.scss
View File

@ -1,6 +1,11 @@
/**********
* Switch *
**********/
GtkSwitch {
-GtkSwitch-slider-width: 20;
-GtkSwitch-slider-height: 20;
}
GtkSwitch,
switch {
font: 1;
@ -8,48 +13,47 @@ switch {
outline-offset: -4px;
transition: all 200ms ease-in;
background-color: transparentize(black, 0.8);
border: none;
border-radius: 14px;
color: transparent;
padding: 2px;
box-shadow: inset 0 0 0 1px transparentize(black, 0.9);
-GtkSwitch-slider-width: 20;
-GtkSwitch-slider-height: 20;
background-color: transparentize(black, 0.9);
box-shadow: inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight;
&:insensitive,
&:disabled {
background-color: $insensitive_bg_color;
}
&:backdrop {
background-color: $backdrop_bg_color;
transition: $backdrop_transition;
&:insensitive,
&:disabled { background-color: $insensitive_bg_color; }
}
&:active,
&:checked {
background-color: $selected_bg_color;
}
&:insensitive,
&:disabled {
background-color: transparentize(black, 0.8);
&:backdrop {
background-color: $backdrop_selected_bg_color;
.slider,
slider {
box-shadow:none;
}
}
&:backdrop {
color: $backdrop_fg_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
box-shadow: none;
text-shadow: none;
transition: $backdrop_transition;
&:checked {
@if $variant == 'light' { color: $backdrop_bg_color; }
border-color: if($variant == 'light', $selected_bg_color,
$selected_borders_color);
background-image: linear-gradient(to bottom, $selected_bg_color);
box-shadow: none;
.slider,
slider {
&:backdrop {
box-shadow:none;
background-color:transparentize($base_color, 0.1);
border:none;
}
}
}
}
// Handle
.slider,
slider {
padding:2px;
@ -61,6 +65,13 @@ switch {
box-shadow: 0 2px 2px transparentize(black, 0.8),
0 1px 2px transparentize(black, 0.8);
&:backdrop {
padding:2px;
box-shadow:none;
background-color:$base_color;
border:1px solid transparentize(black, 0.8);
}
}
&:hover {
@ -74,13 +85,7 @@ switch {
&:checked slider { border: 1px solid $selected_borders_color; }
&:backdrop {
> .slider,
> slider {
box-shadow:none;
}
&:checked slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
&:disabled slider { @include button(backdrop-insensitive); }
}
@ -101,19 +106,14 @@ switch {
// Trough
trough,
.trough {
background-color: transparentize(black, 0.8);
border:none;
border-radius: 14px;
color: transparent;
padding: 2px;
&:active {
&:active,
&:checked {
background-color: $selected_bg_color;
}
&:insensitive,
&:disabled {
background-color: transparentize(black, 0.8);
&:backdrop {
background-color: $backdrop_selected_bg_color;
}
}
}
}