Add style classes to distinguish header bars

- Add "sidebar-header" and "main-header" style classes
- Target each header bar specifically in CSS
- Make tab bar ultra-compact to fit within header height
- Reduce tab padding and remove all internal margins
This commit is contained in:
vesp 2025-12-24 03:48:50 +01:00
parent bbb4788a73
commit 9f05701df8
2 changed files with 28 additions and 5 deletions

View File

@ -28,6 +28,9 @@
<property name="show-title">False</property> <property name="show-title">False</property>
<property name="show-end-title-buttons">False</property> <property name="show-end-title-buttons">False</property>
<property name="show-start-title-buttons">False</property> <property name="show-start-title-buttons">False</property>
<style>
<class name="sidebar-header"/>
</style>
<child type="start"> <child type="start">
<object class="GtkLabel"> <object class="GtkLabel">
<property name="label">Projects</property> <property name="label">Projects</property>
@ -97,6 +100,9 @@
<object class="AdwHeaderBar"> <object class="AdwHeaderBar">
<property name="show-start-title-buttons">False</property> <property name="show-start-title-buttons">False</property>
<property name="show-end-title-buttons">False</property> <property name="show-end-title-buttons">False</property>
<style>
<class name="main-header"/>
</style>
<!-- Tab bar as title widget --> <!-- Tab bar as title widget -->
<property name="title-widget"> <property name="title-widget">

View File

@ -133,31 +133,48 @@ class RosterWindow(Adw.ApplicationWindow):
"""Setup custom CSS for UI styling.""" """Setup custom CSS for UI styling."""
css_provider = Gtk.CssProvider() css_provider = Gtk.CssProvider()
css_provider.load_from_data(b""" css_provider.load_from_data(b"""
/* Force both header bars to same height */ /* Match both header bars to same height */
headerbar { headerbar.sidebar-header,
headerbar.main-header {
min-height: 46px; min-height: 46px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
}
headerbar.sidebar-header {
padding-left: 0px; padding-left: 0px;
padding-right: 6px; padding-right: 6px;
} }
/* Compact tab bar to fit in header bar */ headerbar.main-header {
padding-left: 0px;
padding-right: 6px;
}
/* Ultra-compact tab bar to fit exactly in header */
tabbar { tabbar {
min-height: 0; min-height: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none;
} }
tabbar > scrolledwindow { tabbar > scrolledwindow {
min-height: 0; min-height: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none;
}
tabbar > scrolledwindow > box {
min-height: 0;
padding: 0;
margin: 0;
} }
tabbar tab { tabbar tab {
min-height: 28px; min-height: 24px;
padding: 4px 10px; padding: 2px 10px;
margin: 0 1px; margin: 0 1px;
} }