1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
/* The pills, and the way they move.
*
* Geometry from idea1: modules are rounded capsules grouped into clusters,
* with gaps between clusters and none inside one, so the bar reads as a few
* objects rather than a continuous strip.
*
* Motion from idea2: background and colour cross-fade on hover over 0.3s.
* That is the whole effect. No keyframes anywhere, because GTK's CSS engine
* supports transitions on these properties directly and an animation would
* run forever whether or not anyone is looking at it.
*/
/* Every pill. Shared geometry lives here exactly once; modules.css only says
* what is different about each one. */
#image.launcher,
#clock.date,
#clock.time,
#workspaces,
#custom-vmdot,
#taskbar,
#custom-privacy_dots,
#custom-mail,
#volume,
#tray,
#custom-presentation,
#image.lang {
background: @main-bg;
color: @main-fg;
border-radius: 14px;
padding: 2px 12px;
margin: 4px 0;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hover. The one rule that makes the bar feel alive, and the reason every
* pill declares a transition above. */
/* The launcher is absent on purpose: its mark is an image CSS cannot recolour,
* so a hover background would paint the mark in its own colour. See
* modules.css. */
#clock.date:hover,
#clock.time:hover,
#custom-vmdot:hover,
#custom-privacy_dots:hover,
#custom-mail:hover,
#volume:hover,
#tray:hover,
#custom-presentation:hover,
#image.lang:hover {
background: @hover-bg;
color: @hover-fg;
}
/* Clusters.
*
* Neighbours inside a cluster sit flush and share one outline; only the ends
* of a cluster round off. The gap between clusters is a margin on the last
* pill of each, so adding a module to a cluster means editing one rule.
*/
/* Top bar, left: date time | vm dots */
#clock.date {
border-radius: 14px 0 0 14px;
padding-right: 8px;
margin-left: 6px;
}
#clock.time {
border-radius: 0 14px 14px 0;
padding-left: 8px;
margin-right: 6px;
}
/* Top bar, centre: the launcher stands alone. */
#image.launcher {
margin-left: 6px;
margin-right: 6px;
}
/* Bottom bar, left: the workspace strip. */
#workspaces {
padding: 2px 6px;
margin-left: 6px;
}
/* Right: privacy | mail | volume | tray | presentation | language */
#custom-privacy_dots {
margin-right: 6px;
}
#custom-mail {
margin-right: 6px;
}
#volume {
margin-right: 6px;
}
#tray {
margin-right: 6px;
}
#custom-presentation {
margin-right: 6px;
}
#image.lang {
margin-right: 6px;
}
/* Bottom bar, right: the taskbar is one pill holding a row of buttons. */
#taskbar {
padding: 2px 6px;
margin-right: 6px;
}
|
