1 files changed, 102 insertions, 0 deletions
diff --git a/styles/pills.css b/styles/pills.css
new file mode 100644
index 0000000..83e5d36
--- /dev/null
+++ b/styles/pills.css
@@ -0,0 +1,102 @@
+/* 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. */
+#custom-launcher,
+#clock.date,
+#clock.time,
+#workspaces,
+#custom-vmdot,
+#taskbar,
+#custom-privacy_dots,
+#volume,
+#tray,
+#image.idle,
+#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. */
+#custom-launcher:hover,
+#clock.date:hover,
+#clock.time:hover,
+#custom-vmdot:hover,
+#custom-privacy_dots:hover,
+#volume:hover,
+#tray:hover,
+#image.idle: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.
+ */
+
+/* Left: launcher | date time | workspaces | vm dots */
+#custom-launcher {
+	margin-left: 6px;
+	margin-right: 6px;
+}
+
+#clock.date {
+	border-radius: 14px 0 0 14px;
+	padding-right: 8px;
+}
+
+#clock.time {
+	border-radius: 0 14px 14px 0;
+	padding-left: 8px;
+	margin-right: 6px;
+}
+
+#workspaces {
+	padding: 2px 6px;
+	margin-right: 6px;
+}
+
+/* Right: privacy | volume | tray | presentation | language */
+#custom-privacy_dots {
+	margin-right: 6px;
+}
+
+#volume {
+	margin-right: 6px;
+}
+
+#tray {
+	margin-right: 6px;
+}
+
+#image.idle {
+	margin-right: 6px;
+}
+
+#image.lang {
+	margin-right: 6px;
+}
+
+/* Center: the taskbar is one pill holding a row of buttons. */
+#taskbar {
+	padding: 2px 6px;
+}