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