css examples (#242)

README.md

@@ -21,6 +21,10 @@ ninja -C build && sudo ninja -C build install
 To configure the panel and the dock, wf-shell uses a config file located (by default) in `~/.config/wf-shell.ini`
 An example configuration can be found in the file `wf-shell.ini.example`, alongside with comments what each option does.
 
+# Style & Theme
+
+Style and theme can be altered with [CSS](/data/css/)
+
 # Screenshots
 
 ![Panel & Background demo](/screenshot.png)

data/css/README.md

@@ -0,0 +1,3 @@
+# A collection of example styles
+
+To use any of these copy them to `~/.config/wf-shell/css/`

data/css/panel-battery-zoom-hover.css

@@ -0,0 +1,9 @@
+.battery:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.4);
+}
+
+.battery image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.9);
+}

data/css/panel-command-output-small.css

@@ -0,0 +1,3 @@
+.command-output {
+    padding: 0px 0px 0px 0px;
+}

data/css/panel-launchers-zoom-hover.css

@@ -0,0 +1,9 @@
+.wf-panel .launcher image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.8);
+}
+
+.wf-panel .launcher:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.2);
+}

data/css/panel-menu-button-small.css

@@ -0,0 +1,7 @@
+.wf-panel .menu-icon {
+    padding: 0px 0px 0px 0px;
+}
+
+.wf-panel .menu {
+    border: none;
+}

data/css/panel-menu-zoom-hover.css

@@ -0,0 +1,9 @@
+.menu:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.4);
+}
+
+.menu image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.9);
+}

data/css/panel-network-zoom-hover.css

@@ -0,0 +1,9 @@
+.network:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.4);
+}
+
+.network image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.9);
+}

data/css/panel-selectors.css

@@ -0,0 +1,39 @@
+/* Examples of ways CSS selectors can be used */
+
+/* Sections of the panel can be selected */
+.wf-panel .left,
+.wf-panel .right,
+.wf-panel .center {
+    background-color: black;
+}
+
+/* Individual plugins can be selected */
+.wf-panel .battery,
+.wf-panel .menu,
+.wf-panel .clock,
+.wf-panel .command-output,
+.wf-panel .launchers,
+.wf-panel .menu,
+.wf-panel .network,
+.wf-panel .spacing,
+.wf-panel .volume,
+.wf-panel .window-list {
+    font: monospace;
+}
+
+/* Plugin popovers can be selected */
+.menu-popover,
+.clock-popover {
+    font: monospace;
+}
+
+/* animations for hover are possible */
+.wf-panel .launcher image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.8);
+}
+
+.wf-panel .launcher:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.2);
+}

data/css/panel-tray-zoom-hover.css

@@ -0,0 +1,13 @@
+.tray-box:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.4);
+}
+
+.tray-box image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.9);
+}
+
+.tray-box {
+    padding: 0px 0px 0px 0px;
+}

data/css/panel-volume-zoom-hover.css

@@ -0,0 +1,9 @@
+.volume:hover image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.4);
+}
+
+.volume image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(0.9);
+}

data/css/panel-window-list-zoom-hover.css

@@ -0,0 +1,23 @@
+/* Default size not-selected not-hovered */
+.wf-panel .window-button.flat image {
+    transition: 500ms linear;
+    -gtk-icon-transform: scale(1.0);
+}
+
+/* Double size not-selected hovered */
+.wf-panel .window-button.flat:hover image {
+    transition: 100ms linear;
+    -gtk-icon-transform: scale(2.0);
+}
+
+/* +50% size selected not-hovered */
+.wf-panel .window-button image {
+    transition: 100ms linear;
+    -gtk-icon-transform: scale(1.5);
+}
+
+/* Double size selected hovered */
+.wf-panel .window-button:hover image {
+    transition: 100ms linear;
+    -gtk-icon-transform: scale(2.0);
+}

data/css/user-font.css

@@ -0,0 +1,3 @@
+* {
+    font-family: Jetbrains Mono Regular;
+}