From ccc9160ed1a9f3810f9c2e34255e038efa8d2b77 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Thu, 6 Nov 2025 14:24:36 -0330 Subject: [PATCH 1/2] Update category icons, change style and layout of tile view --- src/bz-category-tile.blp | 4 +- src/bz-search-widget.blp | 2 +- src/gtk/style.css | 149 ++++---- .../io.github.kolumni.Bazaar.Audiovideo.svg | 279 +++++++++++++-- src/icons/io.github.kolumni.Bazaar.Learn.svg | 253 ++++++++++++- src/icons/io.github.kolumni.Bazaar.New.svg | 55 ++- .../io.github.kolumni.Bazaar.Science.svg | 332 ++++++++++++++++-- .../io.github.kolumni.Bazaar.Trending.svg | 242 +++++++++++-- src/icons/io.github.kolumni.Bazaar.Work.svg | 258 ++++++++++++-- 9 files changed, 1371 insertions(+), 203 deletions(-) diff --git a/src/bz-category-tile.blp b/src/bz-category-tile.blp index 2a3d4665..f77ae283 100644 --- a/src/bz-category-tile.blp +++ b/src/bz-category-tile.blp @@ -16,13 +16,13 @@ template $BzCategoryTile: Button { margin-end: 16; margin-top: 24; margin-bottom: 24; - orientation: horizontal; + orientation: vertical; spacing: 12; valign: center; halign: center; Image { - pixel-size: 32; + pixel-size: 48; icon-name: bind template.category as <$BzFlathubCategory>.icon-name; visible: bind $invert_boolean($is_null(template.category as <$BzFlathubCategory>.icon-name) as ) as ; diff --git a/src/bz-search-widget.blp b/src/bz-search-widget.blp index 3452f3d0..a6b1f16d 100644 --- a/src/bz-search-widget.blp +++ b/src/bz-search-widget.blp @@ -161,7 +161,7 @@ template $BzSearchWidget: Adw.Bin { ] hexpand: true; - max-children-per-line: 3; + max-children-per-line: 4; scroll: false; noscroll-kind: flow-box; child-type: "BzCategoryTile"; diff --git a/src/gtk/style.css b/src/gtk/style.css index 1c1e57da..1fec63c9 100644 --- a/src/gtk/style.css +++ b/src/gtk/style.css @@ -409,182 +409,191 @@ window.flathub { /* Category buttons styling modified from GNOME Software*/ .category-tile { - font-weight: 900; - font-size: larger; + font-weight: 700; + font-size: 14pt; + color: white; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + padding-left: 32px; + padding-right: 32px; +} + +window.narrow .category-tile { + font-size: 14pt; + padding-left: 24px; + padding-right: 24px; } +/* All background gradients are at 135deg for consistency */ + .category-tile.category-recently-updated { - background: linear-gradient(285deg, #26a269, #f9ef69); + background: linear-gradient(135deg, #f9ef69, #26a269); color: #0c3020; + text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-recently-updated:hover { - background: linear-gradient(285deg, shade(#26a269, 1.1), shade(#f9ef69, 1.1)); + background: linear-gradient(135deg, shade(#f9ef69, 1.1), shade(#26a269, 1.1)); } .category-tile.category-recently-updated:active { - background: linear-gradient(285deg, shade(#26a269, 0.95), shade(#f9ef69, 0.95)); + background: linear-gradient(135deg, shade(#f9ef69, 0.95), shade(#26a269, 0.95)); } .category-tile.category-recently-added { - background: linear-gradient(90deg, #d98b6b, #b36a4f); - color: white; + background: linear-gradient(135deg, #99a3eb, #495ade); } .category-tile.category-recently-added:hover { - background: linear-gradient(90deg, #e09d81, #c17c62); + background: linear-gradient(135deg, shade(#99a3eb, 1.1), shade(#495ade, 1.1)); } .category-tile.category-recently-added:active { - background: linear-gradient(90deg, #c17c62, #9e5744); + background: linear-gradient(135deg, shade(#99a3eb, .95), shade(#495ade, .95)); } .category-tile.category-trending { - background: linear-gradient(135deg, #99c1f1, #3584e4); - color: white; + background: linear-gradient(135deg, #99c1f1, #3584e4); } .category-tile.category-trending:hover { - background: linear-gradient(135deg, shade(#99c1f1, 1.1), shade(#3584e4, 1.1)); + background: linear-gradient(135deg, shade(#99c1f1, 1.1), shade(#3584e4, 1.1)); } .category-tile.category-trending:active { - background: linear-gradient(135deg, shade(#99c1f1, .95), shade(#3584e4, .95)); + background: linear-gradient(135deg, shade(#99c1f1, .95), shade(#3584e4, .95)); } .category-tile.category-popular { - background: linear-gradient(45deg, #ffbf6f, #f7ef74); - color: rgba(0, 0, 0, 0.8); + background: linear-gradient(135deg, #f7ef74, #ffbf6f); + color: rgba(0, 0, 0, 0.8); + text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-popular:hover { - background: linear-gradient(45deg, shade(#ffbf6f, 1.1), shade(#f7ef74, 1.1)); + background: linear-gradient(135deg, shade(#f7ef74, 1.1), shade(#ffbf6f, 1.1)); } .category-tile.category-popular:active { - background: linear-gradient(45deg, shade(#ffbf6f, .95), shade(#f7ef74, .95)); + background: linear-gradient(135deg, shade(#f7ef74, .95), shade(#ffbf6f, .95)); } .category-tile.category-mobile { - background: linear-gradient(135deg, #c6eaf8, #c4f3c9); - color: rgba(0, 0, 0, 0.8); + background: linear-gradient(135deg, #c6eaf8, #c4f3c9); + color: rgba(0, 0, 0, 0.8); + text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-mobile:hover { - background: linear-gradient(135deg, shade(#c6eaf8, 1.1), shade(#c4f3c9, 1.1)); + background: linear-gradient(135deg, shade(#c6eaf8, 1.1), shade(#c4f3c9, 1.1)); } .category-tile.category-mobile:active { - background: linear-gradient(135deg, shade(#c6eaf8, .95), shade(#c4f3c9, .95)); + background: linear-gradient(135deg, shade(#c6eaf8, .95), shade(#c4f3c9, .95)); } .category-tile.category-graphics { - background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%); - color: white; + background: linear-gradient(135deg, #ce8cd7 0%, #2861c6 100%); } .category-tile.category-graphics:hover { - background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%); + background: linear-gradient(135deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%); } .category-tile.category-graphics:active { - background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%); + background: linear-gradient(135deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%); } .category-tile.category-development { - background: #333337; - color: white; + background: linear-gradient(135deg, #444449 30%, #333337 100%); } .category-tile.category-development:hover { - background: shade(#333337, 1.2); + background: linear-gradient(135deg, shade(#444449, 1.06) 30%, shade(#333337, 1.06) 100%); } .category-tile.category-development:active { - background-color: shade(#333337, .95); + background: linear-gradient(135deg, shade(#444449, .95) 30%, shade(#333337, .95) 100%); } .category-tile.category-education { - background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%); - color: white; + background: linear-gradient(135deg, #2ec27e 30%, #27a66c 100%); } .category-tile.category-education:hover { - background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%); + background: linear-gradient(135deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%); } .category-tile.category-education:active { - background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%); + background: linear-gradient(135deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%); } .category-tile.category-game { - background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%); - color: #393484; + background: linear-gradient(135deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%); + color: #393484; + text-shadow: 0 1px rgba(255, 255, 255, 0.35); } .category-tile.category-game:hover { - background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%); + background: linear-gradient(135deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%); } .category-tile.category-game:active { - background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%); + background: linear-gradient(135deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%); } .category-tile.category-network { - background: #dc322f; - color: white; + background: linear-gradient(135deg, #ff6b35, #ed333b); } .category-tile.category-network:hover { - background: shade(#dc322f, 1.15); + background: linear-gradient(135deg, shade(#ff6b35, 1.1), shade(#ed333b, 1.1)); } .category-tile.category-network:active { - background: shade(#dc322f, .95); + background: linear-gradient(135deg, shade(#ff6b35, .95), shade(#ed333b, .95)); } .category-tile.category-office { - padding: 1px; - color: #1c71d8; - background-color:#fdf8d7; - background-image: linear-gradient(#deddda 1px, transparent 1px), - linear-gradient(90deg, #deddda 1px, transparent 1px); - background-size: 10px 10px, 10px 10px; - background-position: -1px -4px, center -1px; + padding: 1px; + color: #1c71d8; + text-shadow: 0 1px rgba(255, 255, 255, 0.35); + background-color: #fdf8d7; + background-image: linear-gradient(#deddda 1px, transparent 1px), + linear-gradient(90deg, #deddda 1px, transparent 1px); + background-size: 10px 10px, 10px 10px; + background-position: -1px -4px, center -1px; } .category-tile.category-office:hover { - background-color: shade(#fdf8d7, 1.03); - background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px), - linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px); + background-color: shade(#fdf8d7, 1.03); + background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px), + linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px); } .category-tile.category-office:active { - background-color: shade(#fdf8d7, .93); - background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px), - linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px); + background-color: shade(#fdf8d7, .93); + background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px), + linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px); } .category-tile.category-audiovideo { - background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffcd3c 100%); - color: white; + background: linear-gradient(135deg, #ffcd3c 0%, #ff6b35 100%); } .category-tile.category-audiovideo:hover { - background: linear-gradient(135deg, shade(#ff6b35, 1.08) 0%, shade(#f7931e, 1.08) 50%, shade(#ffcd3c, 1.08) 100%); + background: linear-gradient(135deg, shade(#ffcd3c, 1.08) 0%, shade(#ff6b35, 1.08) 100%); } .category-tile.category-audiovideo:active { - background: linear-gradient(135deg, shade(#ff6b35, .95) 0%, shade(#f7931e, .95) 50%, shade(#ffcd3c, .95) 100%); + background: linear-gradient(135deg, shade(#ffcd3c, .95) 0%, shade(#ff6b35, .95) 100%); } .category-tile.category-science { - background: linear-gradient(45deg, #1a5fb4 0%, #3584e4 50%, #26a269 100%); - color: white; + background: linear-gradient(135deg, #8ff0a4 0%, #1c71d8 100%); } .category-tile.category-science:hover { - background: linear-gradient(45deg, shade(#1a5fb4, 1.1) 0%, shade(#3584e4, 1.1) 50%, shade(#26a269, 1.1) 100%); + background: linear-gradient(135deg, shade(#8ff0a4, 1.1) 0%, shade(#1c71d8, 1.1) 100%); } .category-tile.category-science:active { - background: linear-gradient(45deg, shade(#1a5fb4, .95) 0%, shade(#3584e4, .95) 50%, shade(#26a269, .95) 100%); + background: linear-gradient(135deg, shade(#8ff0a4, .95) 0%, shade(#1c71d8, .95) 100%); } .category-tile.category-system { -background: linear-gradient(135deg, #6c757d 0%, #495057 100%); -color: white; + background: linear-gradient(135deg, #6c757d 0%, #495057 100%); } .category-tile.category-system:hover { -background: linear-gradient(135deg, shade(#6c757d, 1.15) 0%, shade(#495057, 1.15) 100%); + background: linear-gradient(135deg, shade(#6c757d, 1.15) 0%, shade(#495057, 1.15) 100%); } .category-tile.category-system:active { -background: linear-gradient(135deg, shade(#6c757d, .95) 0%, shade(#495057, .95) 100%); + background: linear-gradient(135deg, shade(#6c757d, .95) 0%, shade(#495057, .95) 100%); } .category-tile.category-utility { -background: #deddda; -color: #ee5f50; + color: #ee5f50; + text-shadow: 0 1px rgba(255, 255, 255, 0.35); + background: linear-gradient(135deg, #f6f5f4 0%, #deddda 100%); } .category-tile.category-utility:hover { -background: shade(#deddda, 1.05); + background: linear-gradient(135deg, shade(#f6f5f4, 1.08) 0%, shade(#deddda, 1.08) 100%); } .category-tile.category-utility:active { -background: shade(#deddda, .95); + background: linear-gradient(135deg, shade(#f6f5f4, .95) 0%, shade(#deddda, .95) 100%); } .installed-list-view > * { diff --git a/src/icons/io.github.kolumni.Bazaar.Audiovideo.svg b/src/icons/io.github.kolumni.Bazaar.Audiovideo.svg index 357bb24b..151de8a4 100644 --- a/src/icons/io.github.kolumni.Bazaar.Audiovideo.svg +++ b/src/icons/io.github.kolumni.Bazaar.Audiovideo.svg @@ -1,21 +1,260 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/io.github.kolumni.Bazaar.Learn.svg b/src/icons/io.github.kolumni.Bazaar.Learn.svg index 7ad37213..72a7f456 100644 --- a/src/icons/io.github.kolumni.Bazaar.Learn.svg +++ b/src/icons/io.github.kolumni.Bazaar.Learn.svg @@ -1,10 +1,245 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/io.github.kolumni.Bazaar.New.svg b/src/icons/io.github.kolumni.Bazaar.New.svg index 4b1bd210..1363bc63 100644 --- a/src/icons/io.github.kolumni.Bazaar.New.svg +++ b/src/icons/io.github.kolumni.Bazaar.New.svg @@ -1,6 +1,51 @@ - - - - - + + + + + + + + + + + + diff --git a/src/icons/io.github.kolumni.Bazaar.Science.svg b/src/icons/io.github.kolumni.Bazaar.Science.svg index 67f62aaf..734d6b6b 100644 --- a/src/icons/io.github.kolumni.Bazaar.Science.svg +++ b/src/icons/io.github.kolumni.Bazaar.Science.svg @@ -1,37 +1,297 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/io.github.kolumni.Bazaar.Trending.svg b/src/icons/io.github.kolumni.Bazaar.Trending.svg index 9e4ad610..c58d5634 100644 --- a/src/icons/io.github.kolumni.Bazaar.Trending.svg +++ b/src/icons/io.github.kolumni.Bazaar.Trending.svg @@ -1,37 +1,207 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/io.github.kolumni.Bazaar.Work.svg b/src/icons/io.github.kolumni.Bazaar.Work.svg index 46433a4e..c6b43888 100644 --- a/src/icons/io.github.kolumni.Bazaar.Work.svg +++ b/src/icons/io.github.kolumni.Bazaar.Work.svg @@ -1,27 +1,237 @@ - - - - - - - - - + + + + + + + - - - - - + + + + - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 01032b3d08e29cbc63611d1cddcd9504c4d1abf7 Mon Sep 17 00:00:00 2001 From: Eva M Date: Thu, 6 Nov 2025 13:34:37 -0700 Subject: [PATCH 2/2] fix offcenter label issue --- src/bz-category-tile.blp | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/bz-category-tile.blp b/src/bz-category-tile.blp index f77ae283..062f4fb2 100644 --- a/src/bz-category-tile.blp +++ b/src/bz-category-tile.blp @@ -33,7 +33,8 @@ template $BzCategoryTile: Button { Label { css-name: "category-tile-label"; - xalign: 0.0; + halign: center; + xalign: 0.5; label: bind template.category as <$BzFlathubCategory>.short-name; } };