gtk-4.0/widgets/_header-bars.scss 4.9 K raw
1
/***************
2
 * Header bars *
3
 ***************/
4
%titlebar,
5
headerbar {
6
  padding: 0 6px;
7
  min-height: 38px;
8
  background: $headerbar_color;
9
  color: $headerbar_fg_color;
10
  border-radius: 0;
11
  &:backdrop {
12
    border-color: $backdrop_borders_color;
13
    // background-image: none;
14
15
    transition: $backdrop_transition;
16
  }
17
18
  .title {
19
    font-weight: bold;
20
    padding-left: 12px;
21
    padding-right: 12px;
22
  }
23
24
  .subtitle {
25
    font-size: smaller;
26
    padding-left: 12px;
27
    padding-right: 12px;
28
29
    @extend .dim-label;
30
  }
31
32
  entry { min-height: 24px; }  
33
  
34
  %linked-header {
35
    border-radius: 0;
36
    border-right-style: none;
37
    box-shadow: none;
38
    &:first-child {
39
      border-top-left-radius: 6px;
40
      border-bottom-left-radius: 6px;
41
    }
42
43
    &:last-child {
44
      border-top-right-radius: 6px;
45
      border-bottom-right-radius: 6px;
46
      border-right-style: solid;
47
    }
48
49
    &:only-child {
50
      border-radius: 6px;
51
      border-style: solid;
52
    }
53
  }
54
  %linked-button {
55
    @extend %linked-header;
56
    &:active, &:checked {
57
      @include button(active, transparentize($selected_bg_color, 0.3), #fff);
58
      &:backdrop{
59
        color: $backdrop_selected_fg_color;
60
        label{
61
          color: $backdrop_selected_fg_color;
62
        }
63
      }
64
    }
65
  }
66
  .linked > button {
67
    @extend %linked-button;
68
  }
69
  .linked > button:hover,
70
  .linked > button:backdrop { @extend %linked-header; }
71
72
  & splitbutton.image-button {
73
    > button:not(.toggle) { 
74
      border-radius: 6px 0px 0px 6px;
75
    }
76
     menubutton.popup button.toggle {
77
      border-radius: 0px 6px 6px 0px ;
78
    }
79
  }
80
  // End reset style
81
82
  .path-bar-box {
83
    .dim-label {
84
      color: transparent;
85
      margin-right: -6px;
86
    }
87
    button {
88
      @extend %linked-button;
89
      &:last-child {
90
        margin-left: -1px;
91
        border-radius: 0px;
92
        &:active, &:checked {
93
          border-radius: 0px 6px 6px 0px;
94
        }
95
      }
96
      &:first-child {
97
        border-radius: 6px 0px 0px 6px;
98
        &:active, &:checked {
99
          border-radius: 6px;
100
        }
101
      }
102
    }
103
    widget > .text-button:last-child{
104
      border-radius: 0px 6px 6px 0px;
105
      @include button(active, transparentize($selected_bg_color, 0.3), #fff);
106
      &:backdrop, &:backdrop label {
107
        color: $backdrop_selected_fg_color;
108
      }
109
      &:only-child{
110
        border-radius: 6px;
111
      } 
112
    }
113
  }
114
115
  &.selection-mode {
116
    button {
117
      &:backdrop {
118
        &.flat, & {
119
          &:active,
120
          &:checked {
121
            //@include button(backdrop-active, $selected_bg_color, $selected_fg_color);
122
            label{
123
              color:$backdrop_selected_bg_color;
124
            }
125
            border-color: $selected_borders_color;
126
          }
127
        }
128
      }
129
    }
130
131
  }
132
133
  .tiled &,
134
  .maximized & {
135
    &.titlebar {
136
      @if $variant == 'light' { box-shadow: none; }
137
      @else { box-shadow: inset 0 -1px $bottom_highlight; }
138
    }
139
    &:backdrop, & { border-radius: 0; }
140
  } // squared corners when the window is maximized or tiled
141
142
  &.default-decoration {
143
    padding: 5px 4px; 
144
    min-height: 20px;
145
146
    button.titlebutton {
147
      min-height: 20px;
148
      min-width: 20px;
149
      margin: 0;
150
      padding: 0;
151
    }
152
  }
153
}
154
155
headerbar {
156
  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
157
  entry,
158
  spinbutton,
159
  separator:not(.sidebar),
160
  button,
161
  menubutton {
162
    margin-top: 3px;
163
    margin-bottom: 3px;
164
  }
165
  // Reset margins for buttons inside menubutton
166
  menubutton > button,
167
  spinbutton > button,
168
  splitbutton > button,
169
  splitbutton > menubutton,
170
  entry > menubutton {
171
    margin-top: 0px;
172
    margin-bottom: 0px;
173
  }
174
175
  switch {
176
    margin-top: 0;
177
    margin-bottom: 0;
178
  }
179
  separator { background: transparent; }
180
}
181
182
.background:not(.tiled):not(.maximized) .titlebar {
183
  @if $variant == 'light' { box-shadow: inset 0 1px $top_highlight; }
184
  @else { box-shadow: inset 0 1px $top_highlight,inset 0 -1px $bottom_highlight; }
185
186
187
  &:backdrop, & {
188
    border-top-left-radius: 6px;
189
    border-top-right-radius: 6px;
190
  }
191
}
192
193
headerbar {
194
  window:not(.tiled):not(.maximized) separator:first-child + &, // tackles the paned container case
195
  window:not(.tiled):not(.maximized) &:first-child { &:backdrop, & { border-top-left-radius: 6px; }}
196
197
  window:not(.tiled):not(.maximized) &:last-child { &:backdrop, & { border-top-right-radius: 6px; }}
198
}
199
200
.titlebar:not(headerbar) {
201
  window.csd > & {
202
    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
203
    padding: 0;
204
    background-color: transparent;
205
    background-image: none;
206
    border-style: none;
207
    border-color: transparent;
208
    box-shadow: none;
209
  }
210
211
  > separator {
212
    background: $headerbar_color;
213
  }
214
215
  @extend %titlebar;
216
}
217
218
.titlebar{
219
  @extend %titlebar;
220
}
221
222
// Gnome 45
223
224
.sidebar-pane, .content-pane {
225
  .top-bar {
226
    &, headerbar {
227
      background-color: $headerbar_color;
228
    }
229
  }
230
}
231
232
.raised.top-bar { background-color: $headerbar_color; }