1// Dash to Dock
2
3$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.65), rgba(#222222, 0.75));
4$dash_panel_fg: if($variant == 'light', black, white);
5$dash_radius: 18px;
6
7// Scrollview style
8.bottom #dashtodockDashScrollview,
9.top #dashtodockDashScrollview {
10  -st-hfade-offset: 24px;
11}
12
13.left #dashtodockDashScrollview,
14.right #dashtodockDashScrollview {
15  -st-vfade-offset: 24px;
16}
17
18#dashtodockContainer {
19  background-color: transparent;
20
21  .number-overlay {
22    color: $light_fg_color;
23    background-color: rgba(black, 0.75);
24    text-align: center;
25  }
26
27  .notification-badge {
28    color: $light_fg_color;
29    background-color: $primary_color;
30    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
31    border-radius: 1000px;
32    margin: 2px;
33    padding: 0.2em 0.6em;
34    font-weight: bold;
35    text-align: center;
36  }
37
38  &.straight-corner #dash .dash-background,
39  &.shrink.straight-corner #dash .dash-background {
40    border-radius: 0;
41    margin: 0;
42  }
43
44  &.extended.top,
45  &.extended.bottom {
46    #dash {
47      border-left: 0;
48      border-right: 0;
49      padding-top: 0;
50      padding-bottom: 0;
51      margin-top: 0;
52    }
53
54    .dash-background {
55      margin-bottom: 0;
56    }
57  }
58
59  &.extended.right,
60  &.extended.left {
61    #dash {
62      border-top: 0;
63      border-bottom: 0;
64      padding-top: 0;
65      padding-bottom: 0;
66      margin-top: 0;
67    }
68
69    .dash-background {
70      margin-bottom: 0;
71    }
72  }
73
74  &.dashtodock #dash { background: none; }
75
76  #dash { // default-mode
77    background: none;
78
79    StWidget.focused .app-well-app-running-dot {
80      background-color: $primary_color;
81    }
82
83    .app-well-app,
84    .show-apps {
85      &:hover .overview-icon,
86      &:focus .overview-icon,
87      &:selected .overview-icon {
88        background-color: rgba($fg_color, 0.15);
89      }
90      &:active .overview-icon,
91      &:checked .overview-icon {
92        background-color: rgba($fg_color, 0.25);
93      }
94    }
95
96    .show-apps, .show-apps .show-apps-icon, .show-apps .overview-icon {
97      color: $fg_color;
98    }
99  }
100
101  .dash-background {
102    background-color: $dash_panel_bg;
103    border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75));
104    box-shadow: inset 0 0 0 1px rgba(white, 0.05);
105  }
106
107
108  &:overview #dash { // overview-mode #1
109    background: none;
110
111    .app-well-app,
112    .show-apps {
113      &:hover .overview-icon,
114      &:focus .overview-icon,
115      &:selected .overview-icon {
116        background-color: $light_divider_color;
117      }
118      &:active .overview-icon,
119      &:checked .overview-icon {
120        background-color: $light_track_color;
121      }
122    }
123
124    .show-apps, .show-apps .show-apps-icon, .show-apps .overview-icon {
125      color: $light_alt_fg_color;
126    }
127
128    .dash-background {
129      background-color: $light_divider_color;
130      border: 1px solid rgba(black, 0.08);
131      box-shadow: inset 0 0 0 1px rgba(white, 0.05);
132    }
133
134    .app-well-app-running-dot {
135      background-color: $light_alt_fg_color;
136    }
137
138    StWidget.focused .app-well-app-running-dot {
139      background-color: $primary_color;
140    }
141  }
142
143  &.opaque:overview,
144  &.transparent:overview { // overview-mode #2
145    #dash {
146      background-color: transparent !important;
147      box-shadow: none !important;
148    }
149
150    .dash-background {
151      background-color: transparent !important;
152    }
153  }
154
155  &.extended:overview, // overview-mode #3
156  &.opaque.extended:overview,
157  &.transparent.extended:overview {
158    #dash {
159      background: none;
160    }
161  }
162
163  &.running-dots,
164  &.dashtodock {
165    .dash-item-container > StButton {
166      transition-duration: 250ms;
167      background-size: contain;
168    }
169  }
170
171  &.shrink,
172  &.dashtodock {
173    .dash-item-container > StButton {
174       padding: 1px 2px;
175    }
176  }
177
178  .app-well-app,
179  .show-apps {
180    .overview-icon {
181      padding: 8px;
182      background-size: contain;
183    }
184  }
185
186  &.extended,
187  &.extended:overview {
188    .app-well-app,
189    .show-apps {
190      .overview-icon {
191        border-radius: $bt_radius;
192      }
193    }
194  }
195
196  .metro .overview-icon {
197    border-radius: 0;
198  }
199}
200
201.dashtodock-app-well-preview-menu-item {
202  padding: 1em 1em 0.5em 1em;
203}
204
205#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
206  width: 1px;
207  height: auto;
208  border-right-width: 1px;
209  margin: 32px 0;
210}
211