[gtk/wip/jimmac/rounded-lists] Adwaita: rounded lists
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk/wip/jimmac/rounded-lists] Adwaita: rounded lists
- Date: Tue, 2 Oct 2018 13:33:10 +0000 (UTC)
commit 04e84618b875415009b52efeef1d404513906971
Author: Jakub Steiner <jimmac gmail com>
Date: Tue Oct 2 15:31:33 2018 +0200
Adwaita: rounded lists
- non-scrolled lists get a rounded corner
- scrolled lists are rectangular
gtk/theme/Adwaita/_common.scss | 8 ++++++++
gtk/theme/Adwaita/gtk-contained-dark.css | 12 ++++++++++--
gtk/theme/Adwaita/gtk-contained.css | 12 ++++++++++--
3 files changed, 28 insertions(+), 4 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 5fd176598b..3cba4c061a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3637,6 +3637,10 @@ list {
}
row { padding: 2px; }
+
+ border-radius: 6px; /* rounded borders for lists ...*/
+ /* ... not for scrolled lists though */
+ scrolledwindow & { border-radius: 0; }
}
row {
@@ -3666,6 +3670,10 @@ row {
}
&:selected { @extend %selected_items; }
+ /* non scrolled lists get a rounded corner */
+ &:first-child { border-radius: 3px 3px 0 0; }
+ &:last-child { border-radius: 0 0 3px 3px; }
+ scrolledview &:first-child, scrolledview &:last-child { border-raidus: 0 }
}
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 4b362f5505..c59f58cf84 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1576,13 +1576,15 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
/********* Lists * */
-list { color: white; background-color: #232729; border-color: #1b1f20; }
+list { color: white; background-color: #232729; border-color: #1b1f20; border-radius: 6px; /* not for
scrolled lists though */ }
list:backdrop { background-color: #252a2c; border-color: #202425; }
list row { padding: 2px; }
-row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrolledwindow list { border-radius: 0; }
+
+row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* non scrolled lists get a rounded corner
*/ }
row:hover { transition: none; }
@@ -1600,6 +1602,12 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { backgr
row.activatable:selected:backdrop { background-color: #215d9c; }
+row:first-child { border-radius: 3px 3px 0 0; }
+
+row:last-child { border-radius: 0 0 3px 3px; }
+
+scrolledview row:first-child, scrolledview row:last-child { border-raidus: 0; }
+
/********************* App Notifications * */
.app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color:
rgba(28, 31, 32, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 67aef82932..3ef667da70 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1596,13 +1596,15 @@ scrolledwindow junction:backdrop { border-image-source: linear-gradient(to botto
separator { background: rgba(0, 0, 0, 0.1); min-width: 1px; min-height: 1px; }
/********* Lists * */
-list { color: black; background-color: #ffffff; border-color: #b6b6b3; }
+list { color: black; background-color: #ffffff; border-color: #b6b6b3; border-radius: 6px; /* not for
scrolled lists though */ }
list:backdrop { background-color: #fcfcfc; border-color: #c0c0bd; }
list row { padding: 2px; }
-row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+scrolledwindow list { border-radius: 0; }
+
+row { transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* non scrolled lists get a rounded corner
*/ }
row:hover { transition: none; }
@@ -1620,6 +1622,12 @@ row.activatable:selected.has-open-popup, row.activatable:selected:hover { backgr
row.activatable:selected:backdrop { background-color: #4a90d9; }
+row:first-child { border-radius: 3px 3px 0 0; }
+
+row:last-child { border-radius: 0 0 3px 3px; }
+
+scrolledview row:first-child, scrolledview row:last-child { border-raidus: 0; }
+
/********************* App Notifications * */
.app-notification, .app-notification.frame { padding: 10px; border-radius: 0 0 5px 5px; background-color:
rgba(28, 31, 32, 0.7); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]