1
2//
3// Elementary Desktop
4//
5
6// Wingpanel
7.menubar.panel {
8  .panel {
9    &, &.color-light, &.color-dark {
10      background-color: $panel_bg;
11      background-image: image($panel_bg);
12      transition: all 100ms ease-in-out;
13      color: $panel_fg;
14    }
15
16    &.maximized {
17      background-color: darken($panel_bg, 10%);
18    }
19
20    &.translucent {
21      background-color: rgba($panel_bg, 0.95);
22    }
23
24    menubar {
25      background: none;
26      box-shadow: none;
27      border: none;
28    }
29  }
30
31  &-shadow {
32    background-image: none;
33    background-color: transparent;
34  }
35
36  popover {
37    padding: 2px 4px;
38    font-weight: normal;
39    border: 1px solid if($variant == 'light', rgba(black, 0.35), rgba(white, 0.12));
40    box-shadow: 0 2px 3px rgba(black, 0.12), 0 3px 6px rgba(black, 0.08);
41
42    button {
43      font-weight: normal;
44      border-color: transparent;
45      background-color: transparent;
46
47      &:hover { border-color: $borders_color; }
48      &:active, &:checked {
49        border-color: $sec_selected_bg_color;
50        label { color: white; }
51      }
52    }
53
54    .linked > button {
55      border-color: $borders_color;
56    }
57
58    list { background-color: transparent; }
59
60    separator.horizontal {
61      margin: 0 -4px;
62    }
63
64    separator.vertical {
65      background-image: image($borders_color);
66      margin: 0 2px;
67    }
68
69    .sidebar {
70      border-style: none;
71      background: none;
72
73      .view {
74        background: none;
75        border-radius: $bt_radius;
76        border: 1px solid transparent;
77        color: $text_color;
78        transition: $shorter_transition;
79
80        &:hover {
81          background-color: if($variant=='light', mix($fg_color, $bg_color, 5%), mix($fg_color, $bg_color, 10%));
82          border: 1px solid $borders_color;
83        }
84
85        &:selected,
86        &:active,
87        &:checked,
88        &:active:backdrop,
89        &:checked:backdrop,
90        &:selected:backdrop {
91          color: $selected_fg_color;
92          background-color: $selected_bg_color;
93          border: 1px solid if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
94        }
95      }
96    }
97  }
98}
99
100// Popover switcher dots
101button.flat.toggle.switcher {
102  &:hover, &:active, &:checked, &:selected {
103    image {
104      color: $selected_bg_color;
105    }
106  }
107
108  -gtk-outline-radius: 100px;
109}
110
111// Calendar Popover
112.circular { // Calendar popover date button
113  label:disabled { color: $insensitive_fg_color; }
114
115  &.accent { // Today button
116    color: $selected_fg_color;
117    background-color: $selected_bg_color;
118  }
119}
120
121.panel-app-button > GtkWidget > GtkWidget:first-child {
122  padding: 0 2px 0 4px;
123}
124
125.panel .menu .spinner,
126.menu .spinner { opacity: 1; } // Fixes sound indicator buttons
127
128.composited-indicator {
129  background-color: transparent;
130  color: $panel_fg;
131  padding: 0 $cont_padding;
132
133  > revealer label,
134  > revealer image,
135  > revealer spinner {
136    color: $panel_fg;
137    font-weight: normal;
138    text-shadow: none;
139    transition: all 200ms ease-in-out;
140  }
141
142  > revealer image,
143  > revealer spinner {
144    padding: 3px 0;
145  }
146
147  > revealer label {
148    padding: 3px 6px;
149  }
150
151  .keyboard {
152    background-color: #fff;
153    border-radius: $bt_radius;
154    box-shadow: none;
155    color: #333;
156    font-weight: 600;
157    padding: 0 3px;
158    text-shadow: none;
159  }
160
161  > GtkWidget > GtkWidget:first-child { padding: 0 2px; }
162
163  .menuitem:active, .menuitem:hover {
164    border-style: none;
165  }
166
167  > .popup > .menu {
168    padding-top: 8px;
169    padding-bottom: 8px;
170  }
171}
172
173// Birdie
174BirdieWidgetsTweetList * {
175  background-image: none;
176  background-color: transparent;
177}
178
179// Marlin / Pantheon Files
180MarlinViewWindow {
181  *:selected, *:selected:focus {
182    color: $selected_fg_color;
183    background-color: $selected_bg_color;
184    outline-color: transparent;
185  }
186
187  GtkIconView.view:selected {
188    &, &:focus, &:hover, &:focus:hover { background-color: transparent; }
189  }
190
191  FMListView, FMColumnView { outline-color: transparent; }
192}
193
194.marlin-pathbar.pathbar {
195  border-radius: $bt_radius;
196  padding-left: 4px;
197  padding-right: 4px;
198
199  @include entry(header-normal);
200  &:focus { @include entry(header-focus) }
201  &:disabled { @include entry(header-insensitive) }
202  &:active, &:checked { color: $selected_bg_color; }
203}
204
205treeview.view {
206  &.sidebar {
207    color: $dark_sidebar_fg;
208    background-color: $dark_sidebar_bg;
209
210    &.source-list {
211      padding-top: 3px;
212      padding-bottom: 3px;
213
214      &.has-open-popup,
215      &:hover {
216        color: $dark_sidebar_fg;
217        background-color: mix($dark_sidebar_fg, $dark_sidebar_bg, 10%);
218      }
219
220      &:disabled {
221        color: rgba($dark_sidebar_fg, 0.35);
222      }
223
224      &:selected {
225        @extend %selected_items;
226
227        &.has-open-popup,
228        &:hover {
229          color: $selected_fg_color;
230          background-color: mix(black, $selected_bg_color, 10%);
231        }
232      }
233
234      &.trough {
235        color: $fg_color;
236        background-color: $borders_color;
237        border-radius: $bt_radius;
238        border-width: 0;
239
240        &:selected, &:selected:focus {
241          color: $selected_fg_color;
242          background-color: rgba(black, 0.2);
243          border-radius: $bt_radius;
244          border-width: 0;
245        }
246      }
247    }
248  }
249}
250
251.dynamic-notebook {
252  notebook {
253    iconview.view.cell {
254      &:selected { background-color: if($variant == 'light', rgba(black, 0.1), rgba(white, 0.08)); }
255    }
256
257    .overlay-bar { // floating infobar of files
258      box-shadow: none;
259      text-shadow: none;
260    }
261  }
262}
263
264headerbar.titlebar {
265  > box.horizontal > entry.pathbar {
266    // min-height: 0;
267    margin-top: 0;
268    margin-bottom: 0;
269    padding: 2px 12px;
270
271    caret-color: currentColor;
272  }
273
274  button.flat.image-button.toggle {
275    margin-top: 4px;
276    margin-bottom: 4px;
277  }
278
279  // Hide Code header format-bar
280  > grid.linked.horizontal.format-bar {
281    background-image: image($header_bg);
282    border-bottom: 1px solid transparent;
283    border-radius: 0;
284
285    &:backdrop {
286      transition: $backdrop_transition;
287      background-image: image($header_bg_backdrop);
288    }
289  }
290}
291
292// Code
293popover {
294  radiobutton {
295    &.color-button {
296      &.color-light, &.color-dark, &.color-white {
297        border: 1px solid $borders_color;
298      }
299    }
300  }
301}
302
303// Gala
304.gala-notification {
305    border: 1px solid rgba(0, 0, 0, 0.35);
306    border-radius: $bt_radius;
307    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
308    background-image: _solid(white);
309    background-color: transparent;
310
311  .title, .label {
312    color: #5c616c;
313  }
314}
315
316// system setting
317actionbar.inline-toolbar {
318  border: none;
319  border-top: 1px solid $borders_color;
320
321  // button + button { margin-left: -6px; }
322
323  button { // Reset buttons
324    border-radius: $bt_radius;
325    border: 1px solid $borders_color;
326
327    &:first-child { border-right-style: solid; }
328    &:last-child { border-left-style: solid; }
329  }
330}
331
332// Nightlight warmth trough
333scale.warmth trough {
334  background-image: linear-gradient(to right, $suggested_color, $destructive_color);
335  box-shadow: inset 0 0 0 1px rgba($borders_color, 0.25);
336}
337
338// Terminal
339.terminal-window {
340  headerbar.titlebar.default-decoration {
341    box-shadow: inset 0 -1px $borders_color;
342  }
343
344  .search-bar {
345    background-color: $bg_color;
346    border-bottom: 1px solid $solid_borders_color;
347  }
348
349  .dynamic-notebook {
350    notebook > header { border-color: $solid_borders_color; }
351  }
352}
353