Skip to content

Update category icons, change style and layout of tile view #606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kolunmi merged 2 commits into from
Nov 6, 2025
Merged

Update category icons, change style and layout of tile view #606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccc9160
Update category icons, change style and layout of tile view
Nov 6, 2025
01032b3
fix offcenter label issue
kolunmi Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/bz-category-tile.blp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <bool>) as <bool>;

Expand All @@ -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;
}
};
Expand Down
2 changes: 1 addition & 1 deletion src/bz-search-widget.blp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
149 changes: 79 additions & 70 deletions src/gtk/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 > * {
Expand Down
Loading