Commit 5d4a3b69 authored by ju1464's avatar ju1464
Browse files

FirstChanges

parent 2431509b
@keyframes ripple_effect {
to {
background-size: 1000% 1000%;
}
}
@keyframes scale_ripple_effect {
to {
background-size: auto, 1000% 1000%;
}
}
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #79a3a6 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #79a3a6 100%, transparent 0%);
}
}
* {
background-clip: padding-box;
-GtkToolButton-icon-spacing: 0;
......@@ -464,45 +443,28 @@ treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:f
/***********
* Buttons *
***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#79a3a6), to(transparent));
}
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#79a3a6), to(transparent));
}
}
button {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
border-radius: 0px;
border-radius: 20px;
font-weight: 500;
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;
background-color: #bbdcdc;
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
color: #1c242c;
}
button:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;
background-color: rgba(124, 180, 180, 0.5);
color: #1c242c;
}
button:active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 0% 0%;
color: #1c242c;
}
......@@ -1467,8 +1429,8 @@ headerbar .entry-tag, headerbar .documents-entry-tag, headerbar .photos-entry-ta
}
.background .titlebar {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.background.tiled .titlebar,
......@@ -1484,16 +1446,16 @@ headerbar .entry-tag, headerbar .documents-entry-tag, headerbar .photos-entry-ta
window separator:first-child + headerbar,
window headerbar:first-child {
border-top-left-radius: 0px;
border-top-left-radius: 10px;
}
window headerbar:last-child {
border-top-right-radius: 0px;
border-top-right-radius: 10px;
}
window stack headerbar:first-child, window stack headerbar:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
window.tiled headerbar, window.tiled headerbar:first-child, window.tiled headerbar:last-child, window.tiled headerbar:only-child,
......@@ -1750,7 +1712,7 @@ menu,
margin: 4px 0;
padding: 4px 0;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: #bbdcdc;
background-color: rgba(187, 220, 220, 0.8);
border: 1px solid rgba(0, 0, 0, 0.12);
}
......@@ -1764,7 +1726,7 @@ menu,
menu menuitem,
.menu menuitem,
.context-menu menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
transition: background-color 0ms cubic-bezier(0, 0, 0.2, 1);
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
......@@ -1776,7 +1738,8 @@ menu menuitem:hover,
.menu menuitem:hover,
.context-menu menuitem:hover {
transition: none;
background-color: rgba(28, 36, 44, 0.12);
background-color: rgba(30, 87, 94, 0.5);
color: #BBDCDC;
}
menu menuitem:disabled,
......@@ -1895,7 +1858,7 @@ popover.background {
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #bbdcdc;
background-color: rgba(187, 220, 220, 0.9);
}
popover.background:backdrop {
......@@ -1936,6 +1899,7 @@ popover.background button.model {
min-height: 32px;
padding: 0 8px;
border-radius: 0px;
background-color: rgba(121, 163, 166, 0.3)
}
popover.background separator {
......@@ -2231,11 +2195,11 @@ scrollbar slider {
}
scrollbar slider:hover {
background-color: rgba(28, 36, 44, 0.7);
background-color: rgba(30, 87, 94, 0.7);
}
scrollbar slider:active {
background-color: #1c242c;
background-color: #1e575e;
}
scrollbar slider:disabled {
......@@ -2360,7 +2324,7 @@ switch slider {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
min-width: 20px;
min-height: 20px;
margin: -3px -2px;
margin: 3px 1px;
border-radius: 9999px;
box-shadow: 0 0 0 10px transparent, 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #bbdcdc;
......@@ -2455,7 +2419,7 @@ radio:focus:hover {
check:checked, check:indeterminate,
radio:checked,
radio:indeterminate {
color: #79a3a6;
color: #1E575E;
}
check:checked:disabled, check:indeterminate:disabled,
......@@ -2551,12 +2515,12 @@ radio:indeterminate {
radio {
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#79a3a6), to(transparent));
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#1E575E), to(transparent));
}
radio:checked:not(:indeterminate) {
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.125, to(#79a3a6), to(transparent));
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.125, to(#1E575E), to(transparent));
}
......@@ -2632,7 +2596,7 @@ treeview.view radio:disabled {
treeview.view check:checked, treeview.view check:indeterminate,
treeview.view radio:checked,
treeview.view radio:indeterminate {
color: #79a3a6;
color: #1E575E;
}
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
......@@ -2696,7 +2660,7 @@ scale trough:disabled {
scale highlight {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
background-color: #79a3a6;
background-color: #1E575E;
}
scale highlight:disabled {
......@@ -2730,23 +2694,23 @@ scale slider:disabled {
}
scale slider:hover {
background-color: rgba(121, 163, 166, 0.08);
background-color: rgba(30, 87, 94, 0.08);
}
scale slider:focus {
background-color: rgba(121, 163, 166, 0.12);
background-color: rgba(30, 87, 94, 0.12);
}
scale slider:focus:hover {
background-color: rgba(121, 163, 166, 0.16);
background-color: rgba(30, 87, 94, 0.16);
}
scale slider:active {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
animation: scale_ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-size: auto, 0% 0%;
background-color: rgba(121, 163, 166, 0.08);
color: rgba(121, 163, 166, 0.12);
background-color: rgba(30, 87, 94, 0.08);
color: rgba(30, 87, 94, 0.12);
}
scale marks label,
......@@ -2895,7 +2859,7 @@ progressbar trough {
}
progressbar progress {
background-color: #79a3a6;
background-color: #1E575E;
}
progressbar trough.empty progress {
......@@ -3614,7 +3578,7 @@ colorchooser .popover.osd:backdrop {
**********************/
decoration {
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
border-radius: 0px 0px 0 0;
border-radius: 10px;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
margin: 8px;
}
......@@ -3652,7 +3616,7 @@ tooltip.csd decoration {
}
messagedialog.csd decoration {
border-radius: 0px;
border-radius: 10px;
}
.solid-csd decoration {
......
@keyframes ripple_effect {
to {
background-size: 1000% 1000%;
}
}
@keyframes scale_ripple_effect {
to {
background-size: auto, 1000% 1000%;
}
}
@keyframes header_ripple_effect {
from {
background-image: radial-gradient(circle farthest-corner at center, #7cb4b4 0%, transparent 0%);
}
to {
background-image: radial-gradient(circle farthest-corner at center, #7cb4b4 100%, transparent 0%);
}
}
* {
background-clip: padding-box;
-GtkToolButton-icon-spacing: 0;
......@@ -464,45 +443,28 @@ treeview entry.flat, treeview entry.flat:focus, treeview entry, treeview entry:f
/***********
* Buttons *
***********/
@keyframes needs_attention {
from {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#7cb4b4), to(transparent));
}
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#7cb4b4), to(transparent));
}
}
button {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
border-radius: 0px;
border-radius: 20px;
font-weight: 500;
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 300ms cubic-bezier(0, 0, 0.2, 1), background-image 1200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 0 0 9999px transparent;
background-color: #d2ecee;
background-image: radial-gradient(circle farthest-corner at center, transparent 10%, transparent 0%);
background-repeat: no-repeat;
background-position: center;
background-size: 1000% 1000%;
color: #1c242c;
}
button:hover {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px transparent;
background-color: rgba(124, 180, 180, 0.5);
color: #1c242c;
}
button:active {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
animation: ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23), inset 0 0 0 9999px alpha(currentColor, 0.08);
background-image: radial-gradient(circle farthest-corner at center, alpha(currentColor, 0.12) 10%, transparent 0%);
background-size: 0% 0%;
color: #1c242c;
}
......@@ -1467,8 +1429,8 @@ headerbar .entry-tag, headerbar .documents-entry-tag, headerbar .photos-entry-ta
}
.background .titlebar {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.background.tiled .titlebar,
......@@ -1484,16 +1446,16 @@ headerbar .entry-tag, headerbar .documents-entry-tag, headerbar .photos-entry-ta
window separator:first-child + headerbar,
window headerbar:first-child {
border-top-left-radius: 0px;
border-top-left-radius: 10px;
}
window headerbar:last-child {
border-top-right-radius: 0px;
border-top-right-radius: 10px;
}
window stack headerbar:first-child, window stack headerbar:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
window.tiled headerbar, window.tiled headerbar:first-child, window.tiled headerbar:last-child, window.tiled headerbar:only-child,
......@@ -1750,7 +1712,7 @@ menu,
margin: 4px 0;
padding: 4px 0;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
background-color: #d2ecee;
background-color: rgba(210, 236, 238, 0.8);
border: 1px solid rgba(0, 0, 0, 0.12);
}
......@@ -1764,7 +1726,7 @@ menu,
menu menuitem,
.menu menuitem,
.context-menu menuitem {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
transition: background-color 0ms cubic-bezier(0, 0, 0.2, 1);
min-height: 20px;
min-width: 40px;
padding: 4px 8px;
......@@ -1776,7 +1738,8 @@ menu menuitem:hover,
.menu menuitem:hover,
.context-menu menuitem:hover {
transition: none;
background-color: rgba(28, 36, 44, 0.12);
background-color: rgba(75, 118, 122, 0.5);
color: #D2ECEE;
}
menu menuitem:disabled,
......@@ -1895,7 +1858,7 @@ popover.background {
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
padding: 2px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
background-color: #d2ecee;
background-color: rgba(210, 236, 238, 0.9);
}
popover.background:backdrop {
......@@ -1934,8 +1897,9 @@ popover.background toolbar {
popover.background.menu button,
popover.background button.model {
min-height: 32px;
padding: 0 8px;
padding: 2px 8px;
border-radius: 0px;
background-color: rgba(124, 180, 180, 0.3);
}
popover.background separator {
......@@ -2231,11 +2195,11 @@ scrollbar slider {
}
scrollbar slider:hover {
background-color: rgba(28, 36, 44, 0.7);
background-color: rgba(75, 118, 122, 0.7);
}
scrollbar slider:active {
background-color: #1c242c;
background-color: #4B767A;
}
scrollbar slider:disabled {
......@@ -2360,7 +2324,7 @@ switch slider {
transition: all 100ms cubic-bezier(0, 0, 0.2, 1);
min-width: 20px;
min-height: 20px;
margin: -3px -2px;
margin: 3px 1px;
border-radius: 9999px;
box-shadow: 0 0 0 10px transparent, 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: #d2ecee;
......@@ -2455,7 +2419,7 @@ radio:focus:hover {
check:checked, check:indeterminate,
radio:checked,
radio:indeterminate {
color: #7cb4b4;
color: #4B767A;
}
check:checked:disabled, check:indeterminate:disabled,
......@@ -2551,12 +2515,12 @@ radio:indeterminate {
radio {
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#7cb4b4), to(transparent));
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.001, to(#4B767A), to(transparent));
}
radio:checked:not(:indeterminate) {
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.125, to(#7cb4b4), to(transparent));
border-image-source: -gtk-gradient(radial, center center, 0, center center, 0.125, to(#4B767A), to(transparent));
}
......@@ -2632,7 +2596,7 @@ treeview.view radio:disabled {
treeview.view check:checked, treeview.view check:indeterminate,
treeview.view radio:checked,
treeview.view radio:indeterminate {
color: #7cb4b4;
color: #4B767A;
}
treeview.view check:checked:disabled, treeview.view check:indeterminate:disabled,
......@@ -2696,7 +2660,7 @@ scale trough:disabled {
scale highlight {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1);
background-color: #7cb4b4;
background-color: #4B767A;
}
scale highlight:disabled {
......@@ -2730,23 +2694,23 @@ scale slider:disabled {
}
scale slider:hover {
background-color: rgba(124, 180, 180, 0.08);
background-color: rgba(75, 118, 122, 0.08);
}
scale slider:focus {
background-color: rgba(124, 180, 180, 0.12);
background-color: rgba(75, 118, 122, 0.12);
}
scale slider:focus:hover {
background-color: rgba(124, 180, 180, 0.16);
background-color: rgba(75, 118, 122, 0.16);
}
scale slider:active {
transition: background-color 100ms cubic-bezier(0, 0, 0.2, 1), background-size 0, background-image 0;
animation: scale_ripple_effect 225ms cubic-bezier(0, 0, 0.2, 1) forwards;
background-size: auto, 0% 0%;
background-color: rgba(124, 180, 180, 0.08);
color: rgba(124, 180, 180, 0.12);
background-color: rgba(75, 118, 122, 0.08);
color: rgba(75, 118, 122, 0.12);
}
scale marks label,
......@@ -2895,7 +2859,7 @@ progressbar trough {
}
progressbar progress {
background-color: #7cb4b4;
background-color: #4B767A;
}
progressbar trough.empty progress {
......@@ -3614,7 +3578,7 @@ colorchooser .popover.osd:backdrop {
**********************/
decoration {
transition: box-shadow 100ms cubic-bezier(0, 0, 0.2, 1);
border-radius: 0px 0px 0 0;
border-radius: 10px;
box-shadow: 0 14px 14px rgba(0, 0, 0, 0.25), 0 10px 5px rgba(0, 0, 0, 0.22), 0 16px 16px transparent;
margin: 8px;
}
......@@ -3652,7 +3616,7 @@ tooltip.csd decoration {
}
messagedialog.csd decoration {
border-radius: 0px;
border-radius: 10px;
}
.solid-csd decoration {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment