AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-12-26 21:51:08 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: added a transition to the backdrop state to most widgets

Browse Source
This commit is contained in:
Lapo Calamandrei 2016-03-19 19:56:15 +01:00
parent 38211ff800
commit 0174803149
3 changed files with 98 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 400ms linear;
$backdrop_transition: 200ms ease-out;
* {
padding: 0;
@ -279,7 +279,11 @@ entry {
&:disabled { @include entry(insensitive); }
&:backdrop { @include entry(backdrop); }
&:backdrop {
@include entry(backdrop);
transition: $backdrop_transition;
}
&:backdrop:disabled { @include entry(backdrop-insensitive); }
@ -466,6 +470,7 @@ button {
&.flat, & {
@include button(backdrop);
transition: $backdrop_transition;
-gtk-icon-effect: none;
&:active,
@ -1037,6 +1042,7 @@ spinbutton {
color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
background-color: transparent;
border-color: transparentize($backdrop_borders_color, 0.7);
transition: $backdrop_transition;
}
&:backdrop:disabled {
@ -1288,6 +1294,7 @@ searchbar,
border-color: $backdrop_borders_color;
background-color: $backdrop_dark_fill;
box-shadow: none;
transition: $backdrop_transition;
}
}
@ -1311,6 +1318,8 @@ headerbar {
background-color: $bg_color;
background-image: none;
box-shadow: inset 0 1px $top_hilight;
transition: $backdrop_transition;
}
.title {
@ -2221,6 +2230,7 @@ scrollbar {
&:backdrop {
background-color: $backdrop_scrollbar_bg_color;
border-color: $backdrop_borders_color;
transition: $backdrop_transition;
}
// slider
@ -2415,6 +2425,7 @@ switch {
background-image: linear-gradient(to bottom, $backdrop_dark_fill);
box-shadow: none;
text-shadow: none;
transition: $backdrop_transition;
&:active {
@if $variant == 'light' { color: $backdrop_bg_color; }
@ -2525,6 +2536,8 @@ radio {
&:backdrop {
@include button(backdrop);
transition: $backdrop_transition;
&:disabled { @include button(backdrop-insensitive); }
}
@ -2652,6 +2665,7 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
background-color: $backdrop_dark_fill;
border-color: $backdrop_borders_color;
box-shadow: none;
transition: $backdrop_transition;
&:disabled { background-color: $insensitive_bg_color; }
}
@ -3110,7 +3124,10 @@ progressbar {
font-size: smaller;
color: transparentize($fg_color, 0.6);
&:backdrop { box-shadow: none; }
&:backdrop {
box-shadow: none;
transition: $backdrop_transition;
}
trough { @extend %scale_trough; }
@ -3178,6 +3195,8 @@ levelbar {
min-height: 32px;
}
&:backdrop { transition: $backdrop_transition; }
trough {
border: 1px solid;
padding: 2px;
@ -3339,6 +3358,7 @@ scrolledwindow {
&:backdrop {
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
background-color: $backdrop_scrollbar_bg_color;
transition: $backdrop_transition;
}
}
}
@ -3372,6 +3392,8 @@ row {
&:hover { transition: none; }
&:backdrop { transition: $backdrop_transition; }
&.activatable {
&.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
@ -3409,7 +3431,10 @@ row {
transparent 2px);
background-clip: padding-box;
&:backdrop { background-image: none; }
&:backdrop {
background-image: none;
transition: $backdrop_transition;
}
button { @extend %osd_button; }
@ -3578,6 +3603,7 @@ filechooserbutton:drop(active) {
&:backdrop {
background-color: $backdrop_sidebar_bg_color;
border-color: $backdrop_borders_color;
transition: $backdrop_transition;
}
:selected { // FIXME: what this is supposed to select
@ -3987,7 +4013,6 @@ colorchooser .popover.osd { border-radius: 5px; }
}
.scale-popup {
.osd & { @extend %osd; }
.osd & button.flat { //FIXME: quick hack, redo properly
@ -4036,6 +4061,7 @@ decoration {
box-shadow: 0 3px 9px 1px transparent,
0 2px 6px 2px transparentize(black, 0.8),
0 0 0 1px $_wm_border_backdrop;
transition: $backdrop_transition;
}
.fullscreen &,
@ -4176,6 +4202,7 @@ button.circular { // FIXME: aggregate to buttons
&:backdrop {
background-color: $backdrop_base_color;
color: $backdrop_fg_color;
transition: $backdrop_transition;
}
}

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

@ -222,7 +222,8 @@ entry {
color: #d5d5d5;
border-color: #1f2222;
background-image: linear-gradient(to bottom, #2c2c2c);
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
spinbutton:backdrop:disabled:not(.vertical),
entry:backdrop:disabled {
color: #5d6767;
@ -454,6 +455,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
-gtk-icon-effect: none; }
notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, headerbar button.titlebutton:backdrop label,
.titlebar button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, headerbar button.titlebutton:backdrop,
@ -1277,7 +1279,8 @@ spinbutton:not(.vertical) {
spinbutton:not(.vertical) button:backdrop {
color: #8a8c8b;
background-color: transparent;
border-color: rgba(31, 34, 34, 0.3); }
border-color: rgba(31, 34, 34, 0.3);
transition: 200ms ease-out; }
spinbutton:not(.vertical) button:backdrop:disabled {
color: rgba(93, 103, 103, 0.3);
background-image: none;
@ -1471,7 +1474,8 @@ searchbar,
.location-bar:backdrop {
border-color: #1f2222;
background-color: #303535;
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
/***************
* Header bars *
@ -1492,7 +1496,8 @@ headerbar {
border-color: #1f2222;
background-color: #393f3f;
background-image: none;
box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); }
box-shadow: inset 0 1px rgba(238, 238, 236, 0.07);
transition: 200ms ease-out; }
.titlebar:not(headerbar) .title,
headerbar .title {
font-weight: bold;
@ -2255,7 +2260,8 @@ scrollbar {
border-left: 1px solid #1c1f1f; }
scrollbar:backdrop {
background-color: #323737;
border-color: #1f2222; }
border-color: #1f2222;
transition: 200ms ease-out; }
scrollbar slider {
min-width: 6px;
min-height: 6px;
@ -2414,7 +2420,8 @@ switch {
border-color: #1f2222;
background-image: linear-gradient(to bottom, #303535);
box-shadow: none;
text-shadow: none; }
text-shadow: none;
transition: 200ms ease-out; }
switch:backdrop:active {
border-color: #0f2b48;
background-image: linear-gradient(to bottom, #215d9c);
@ -2573,7 +2580,8 @@ radio {
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out; }
check:backdrop label, check:backdrop,
radio:backdrop label,
radio:backdrop {
@ -2730,7 +2738,8 @@ scale trough, scale fill, progressbar trough {
scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #303535;
border-color: #1f2222;
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
scale trough:backdrop:disabled, scale fill:backdrop:disabled, progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled {
background-color: #333636; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough {
@ -3363,7 +3372,8 @@ progressbar {
progressbar.vertical progress {
margin: -1px 0; }
progressbar:backdrop {
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
progressbar progress {
border-radius: 1.5px; }
progressbar progress.left {
@ -3400,6 +3410,8 @@ levelbar block {
levelbar.vertical block {
min-width: 1px;
min-height: 32px; }
levelbar:backdrop {
transition: 200ms ease-out; }
levelbar trough {
border: 1px solid;
padding: 2px;
@ -3600,7 +3612,8 @@ scrolledwindow junction {
border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
background-color: #323737; }
background-color: #323737;
transition: 200ms ease-out; }
separator {
background: rgba(0, 0, 0, 0.1);
@ -3624,6 +3637,8 @@ row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row:hover {
transition: none; }
row:backdrop {
transition: 200ms ease-out; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(238, 238, 236, 0.05); }
row.activatable:active {
@ -3649,7 +3664,8 @@ row {
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame:backdrop {
background-image: none; }
background-image: none;
transition: 200ms ease-out; }
.app-notification border,
.app-notification.frame border {
border: none; }
@ -3752,7 +3768,8 @@ filechooserbutton:drop(active) {
border-right-style: none; }
.sidebar:backdrop {
background-color: #333636;
border-color: #1f2222; }
border-color: #1f2222;
transition: 200ms ease-out; }
.sidebar list {
background-color: transparent; }
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
@ -4124,7 +4141,8 @@ decoration {
box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(28, 31, 31, 0.9);
margin: 10px; }
decoration:backdrop {
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 31, 31, 0.9); }
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 31, 31, 0.9);
transition: 200ms ease-out; }
.fullscreen decoration, .tiled decoration {
border-radius: 0; }
.popup decoration {
@ -4271,7 +4289,8 @@ button.circular {
font-size: smaller; }
.keycap:backdrop {
background-color: #2c2c2c;
color: #949796; }
color: #949796;
transition: 200ms ease-out; }
*:drop(active):focus,
*:drop(active) {

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

@ -222,7 +222,8 @@ entry {
color: #323232;
border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #fcfcfc);
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
spinbutton:backdrop:disabled:not(.vertical),
entry:backdrop:disabled {
color: #c3c3c0;
@ -454,6 +455,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out;
-gtk-icon-effect: none; }
notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, headerbar button.titlebutton:backdrop label,
.titlebar button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, button.sidebar-button:backdrop, headerbar button.titlebutton:backdrop,
@ -1283,7 +1285,8 @@ spinbutton:not(.vertical) {
spinbutton:not(.vertical) button:backdrop {
color: #96999a;
background-color: transparent;
border-color: rgba(165, 165, 161, 0.3); }
border-color: rgba(165, 165, 161, 0.3);
transition: 200ms ease-out; }
spinbutton:not(.vertical) button:backdrop:disabled {
color: rgba(195, 195, 192, 0.3);
background-image: none;
@ -1477,7 +1480,8 @@ searchbar,
.location-bar:backdrop {
border-color: #a5a5a1;
background-color: #d1d1cf;
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
/***************
* Header bars *
@ -1498,7 +1502,8 @@ headerbar {
border-color: #a5a5a1;
background-color: #e8e8e7;
background-image: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
transition: 200ms ease-out; }
.titlebar:not(headerbar) .title,
headerbar .title {
font-weight: bold;
@ -2267,7 +2272,8 @@ scrollbar {
border-left: 1px solid #9d9d99; }
scrollbar:backdrop {
background-color: #e1e1df;
border-color: #a5a5a1; }
border-color: #a5a5a1;
transition: 200ms ease-out; }
scrollbar slider {
min-width: 6px;
min-height: 6px;
@ -2426,7 +2432,8 @@ switch {
border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #d1d1cf);
box-shadow: none;
text-shadow: none; }
text-shadow: none;
transition: 200ms ease-out; }
switch:backdrop:active {
color: #e8e8e7;
border-color: #4a90d9;
@ -2597,7 +2604,8 @@ radio {
background-image: linear-gradient(to bottom, #e8e8e7);
text-shadow: none;
-gtk-icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
transition: 200ms ease-out; }
check:backdrop label, check:backdrop,
radio:backdrop label,
radio:backdrop {
@ -2758,7 +2766,8 @@ scale trough, scale fill, progressbar trough {
scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
background-color: #d1d1cf;
border-color: #a5a5a1;
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
scale trough:backdrop:disabled, scale fill:backdrop:disabled, progressbar trough:backdrop:disabled, progressbar:backdrop trough:disabled {
background-color: #f1f1f1; }
row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, row:selected progressbar trough, progressbar row:selected trough {
@ -3391,7 +3400,8 @@ progressbar {
progressbar.vertical progress {
margin: -1px 0; }
progressbar:backdrop {
box-shadow: none; }
box-shadow: none;
transition: 200ms ease-out; }
progressbar progress {
border-radius: 1.5px; }
progressbar progress.left {
@ -3428,6 +3438,8 @@ levelbar block {
levelbar.vertical block {
min-width: 1px;
min-height: 32px; }
levelbar:backdrop {
transition: 200ms ease-out; }
levelbar trough {
border: 1px solid;
padding: 2px;
@ -3628,7 +3640,8 @@ scrolledwindow junction {
border-image-slice: 0 1 0 0; }
scrolledwindow junction:backdrop {
border-image-source: linear-gradient(to bottom, #a5a5a1 1px, transparent 1px);
background-color: #e1e1df; }
background-color: #e1e1df;
transition: 200ms ease-out; }
separator {
background: rgba(0, 0, 0, 0.1);
@ -3652,6 +3665,8 @@ row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
row:hover {
transition: none; }
row:backdrop {
transition: 200ms ease-out; }
row.activatable.has-open-popup, row.activatable:hover {
background-color: rgba(46, 52, 54, 0.05); }
row.activatable:active {
@ -3677,7 +3692,8 @@ row {
background-clip: padding-box; }
.app-notification:backdrop,
.app-notification.frame:backdrop {
background-image: none; }
background-image: none;
transition: 200ms ease-out; }
.app-notification border,
.app-notification.frame border {
border: none; }
@ -3780,7 +3796,8 @@ filechooserbutton:drop(active) {
border-right-style: none; }
.sidebar:backdrop {
background-color: #f2f2f2;
border-color: #a5a5a1; }
border-color: #a5a5a1;
transition: 200ms ease-out; }
.sidebar list {
background-color: transparent; }
paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned .sidebar:dir(ltr), paned .sidebar {
@ -4152,7 +4169,8 @@ decoration {
box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23);
margin: 10px; }
decoration:backdrop {
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); }
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18);
transition: 200ms ease-out; }
.fullscreen decoration, .tiled decoration {
border-radius: 0; }
.popup decoration {
@ -4300,7 +4318,8 @@ button.circular {
font-size: smaller; }
.keycap:backdrop {
background-color: #fcfcfc;
color: #8b8e8f; }
color: #8b8e8f;
transition: 200ms ease-out; }
*:drop(active):focus,
*:drop(active) {