AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-17 06:10:15 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: places sidebar selected button fix and refactor

Browse Source
This commit is contained in:
Lapo Calamandrei 2016-03-14 17:22:31 +01:00
parent 2923f69d3c
commit bbced9a0cf
3 changed files with 80 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
gtk/theme/Adwaita/_common.scss
View File

@ -504,6 +504,20 @@ button {
}
}
@at-root %button_selected, & {
row:selected & {
@if $variant == 'light' { border-color: $selected_borders_color; }
&.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: $selected_fg_color;
border-color: transparent;
&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
}
}
}
// big standalone buttons like in Documents pager
&.osd {
&.image-button {
@ -3251,11 +3265,11 @@ actionbar > revealer > box {
&:backdrop { border-color: $backdrop_borders_color; }
}
placessidebar,
scrolledwindow {
viewport.frame { // avoid double borders when viewport inside scrolled window
border-style: none;
}
// This is used when content is touch-dragged past boundaries.
// draws a box on top of the content, the size changes programmatically.
overshoot {
@ -3335,45 +3349,31 @@ list {
row { padding: 2px; }
}
row.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
&:backdrop:hover { background-color: transparent; }
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
&.has-open-popup,
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
&:backdrop { background-color: $selected_bg_color; }
}
}
row:selected {
@extend %selected_items;
button {
@if $variant == 'light' { border-color: $selected_borders_color; }
&.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: $selected_fg_color;
border-color: transparent;
&:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
}
}
}
// transition
row {
transition: all 150ms $ease-out-quad;
&:hover { transition: none; }
&.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
&:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
&:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
&:backdrop:hover { background-color: transparent; }
&:selected {
&:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
&.has-open-popup,
&:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
&:backdrop { background-color: $selected_bg_color; }
}
}
&:selected { @extend %selected_items; }
}
@ -3604,6 +3604,8 @@ stacksidebar {
$_placesidebar_icons_opacity: 0.7;
placessidebar {
> viewport.frame { border-style: none; }
row {
// Needs overriding of the GtkListBoxRow padding
min-height: 36px;
@ -3630,6 +3632,8 @@ placessidebar {
@at-root button.sidebar-button {
@extend %button_basic.flat;
@extend %button_selected.flat;
min-height: 26px;
min-width: 26px;
margin-top: 3px;

54
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -528,6 +528,11 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
.titlebar button.titlebutton:drop(active), button:drop(active) {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: #ffffff;
border-color: transparent; }
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: #949796; }
button.osd {
color: #eeeeec;
border-radius: 5px;
@ -3380,10 +3385,8 @@ actionbar > revealer > box {
actionbar > revealer > box:backdrop {
border-color: #1f2222; }
placessidebar viewport.frame,
scrolledwindow viewport.frame {
border-style: none; }
placessidebar overshoot.top,
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
@ -3392,7 +3395,6 @@ scrolledwindow overshoot.top {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.top:backdrop,
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
@ -3401,7 +3403,6 @@ scrolledwindow overshoot.top {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom,
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 100% 5%, 100% 100%;
@ -3410,7 +3411,6 @@ scrolledwindow overshoot.bottom {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom:backdrop,
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 100% 5%;
@ -3419,7 +3419,6 @@ scrolledwindow overshoot.bottom {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left,
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
@ -3428,7 +3427,6 @@ scrolledwindow overshoot.left {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left:backdrop,
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
@ -3437,7 +3435,6 @@ scrolledwindow overshoot.left {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right,
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 238, 236, 0)));
background-size: 5% 100%, 100% 100%;
@ -3446,7 +3443,6 @@ scrolledwindow overshoot.right {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right:backdrop,
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1f2222), to(rgba(31, 34, 34, 0)));
background-size: 5% 100%;
@ -3455,7 +3451,6 @@ scrolledwindow overshoot.right {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar undershoot.top,
scrolledwindow undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3466,7 +3461,6 @@ scrolledwindow undershoot.top {
background-position: center top;
border: none;
box-shadow: none; }
placessidebar undershoot.bottom,
scrolledwindow undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3477,7 +3471,6 @@ scrolledwindow undershoot.bottom {
background-position: center bottom;
border: none;
box-shadow: none; }
placessidebar undershoot.left,
scrolledwindow undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3488,7 +3481,6 @@ scrolledwindow undershoot.left {
background-position: left center;
border: none;
box-shadow: none; }
placessidebar undershoot.right,
scrolledwindow undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3499,15 +3491,12 @@ scrolledwindow undershoot.right {
background-position: right center;
border: none;
box-shadow: none; }
placessidebar junction,
scrolledwindow junction {
border-color: transparent;
border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #313434; }
placessidebar junction:dir(rtl),
scrolledwindow junction:dir(rtl) {
border-image-slice: 0 1 0 0; }
placessidebar junction:backdrop,
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
background-color: #323737; }
@ -3530,29 +3519,22 @@ list {
list row {
padding: 2px; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(238, 238, 236, 0.05); }
row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:backdrop:hover {
background-color: transparent; }
row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover {
background-color: #366ca4; }
row.activatable:selected:backdrop {
background-color: #215d9c; }
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: #ffffff;
border-color: transparent; }
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: #949796; }
row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row:hover {
transition: none; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(238, 238, 236, 0.05); }
row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:backdrop:hover {
background-color: transparent; }
row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover {
background-color: #366ca4; }
row.activatable:selected:backdrop {
background-color: #215d9c; }
/*********************
* App Notifications *
@ -3686,6 +3668,8 @@ stacksidebar row {
/****************
* File chooser *
****************/
placessidebar > viewport.frame {
border-style: none; }
placessidebar row {
min-height: 36px;
padding: 0px; }

58
gtk/theme/Adwaita/gtk-contained.css
View File

@ -528,6 +528,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
.titlebar button.titlebutton:drop(active), button:drop(active) {
border-color: black;
box-shadow: inset 0 0 0 1px black; }
row:selected button {
border-color: #184472; }
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: #ffffff;
border-color: transparent; }
row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: white; }
button.osd {
color: #eeeeec;
border-radius: 5px;
@ -3411,10 +3418,8 @@ actionbar > revealer > box {
actionbar > revealer > box:backdrop {
border-color: #a5a5a1; }
placessidebar viewport.frame,
scrolledwindow viewport.frame {
border-style: none; }
placessidebar overshoot.top,
scrolledwindow overshoot.top {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#84847f), to(rgba(132, 132, 127, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
@ -3423,7 +3428,6 @@ scrolledwindow overshoot.top {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.top:backdrop,
scrolledwindow overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a5a5a1), to(rgba(165, 165, 161, 0)));
background-size: 100% 5%;
@ -3432,7 +3436,6 @@ scrolledwindow overshoot.top {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom,
scrolledwindow overshoot.bottom {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#84847f), to(rgba(132, 132, 127, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 100% 5%, 100% 100%;
@ -3441,7 +3444,6 @@ scrolledwindow overshoot.bottom {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.bottom:backdrop,
scrolledwindow overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a5a5a1), to(rgba(165, 165, 161, 0)));
background-size: 100% 5%;
@ -3450,7 +3452,6 @@ scrolledwindow overshoot.bottom {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left,
scrolledwindow overshoot.left {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#84847f), to(rgba(132, 132, 127, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
@ -3459,7 +3460,6 @@ scrolledwindow overshoot.left {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.left:backdrop,
scrolledwindow overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a5a5a1), to(rgba(165, 165, 161, 0)));
background-size: 5% 100%;
@ -3468,7 +3468,6 @@ scrolledwindow overshoot.left {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right,
scrolledwindow overshoot.right {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#84847f), to(rgba(132, 132, 127, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 52, 54, 0)));
background-size: 5% 100%, 100% 100%;
@ -3477,7 +3476,6 @@ scrolledwindow overshoot.right {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar overshoot.right:backdrop,
scrolledwindow overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a5a5a1), to(rgba(165, 165, 161, 0)));
background-size: 5% 100%;
@ -3486,7 +3484,6 @@ scrolledwindow overshoot.right {
background-color: transparent;
border: none;
box-shadow: none; }
placessidebar undershoot.top,
scrolledwindow undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3497,7 +3494,6 @@ scrolledwindow undershoot.top {
background-position: center top;
border: none;
box-shadow: none; }
placessidebar undershoot.bottom,
scrolledwindow undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3508,7 +3504,6 @@ scrolledwindow undershoot.bottom {
background-position: center bottom;
border: none;
box-shadow: none; }
placessidebar undershoot.left,
scrolledwindow undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3519,7 +3514,6 @@ scrolledwindow undershoot.left {
background-position: left center;
border: none;
box-shadow: none; }
placessidebar undershoot.right,
scrolledwindow undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@ -3530,15 +3524,12 @@ scrolledwindow undershoot.right {
background-position: right center;
border: none;
box-shadow: none; }
placessidebar junction,
scrolledwindow junction {
border-color: transparent;
border-image: linear-gradient(to bottom, #9d9d99 1px, transparent 1px) 0 0 0 1/0 1px stretch;
background-color: #c3c4c4; }
placessidebar junction:dir(rtl),
scrolledwindow junction:dir(rtl) {
border-image-slice: 0 1 0 0; }
placessidebar junction:backdrop,
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, #a5a5a1 1px, transparent 1px);
background-color: #e1e1df; }
@ -3561,31 +3552,22 @@ list {
list row {
padding: 2px; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(46, 52, 54, 0.05); }
row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:backdrop:hover {
background-color: transparent; }
row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover {
background-color: #4787c9; }
row.activatable:selected:backdrop {
background-color: #4a90d9; }
row:selected button {
border-color: #184472; }
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
color: #ffffff;
border-color: transparent; }
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: white; }
row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row:hover {
transition: none; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(46, 52, 54, 0.05); }
row.activatable:active {
box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
row.activatable:backdrop:hover {
background-color: transparent; }
row.activatable:selected:active {
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
row.activatable:selected.has-open-popup, row.activatable:selected:hover {
background-color: #4787c9; }
row.activatable:selected:backdrop {
background-color: #4a90d9; }
/*********************
* App Notifications *
@ -3719,6 +3701,8 @@ stacksidebar row {
/****************
* File chooser *
****************/
placessidebar > viewport.frame {
border-style: none; }
placessidebar row {
min-height: 36px;
padding: 0px; }