From e3b8b8b72d391476d4b43298bf87c22f8688e07a Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Thu, 5 May 2022 15:12:31 +0200
Subject: [PATCH] [Minor] Styling updates

---
 bower.json                          |  4 ++--
 strolch-wc-plc-connections.html     | 10 ++++++++++
 strolch-wc-plc-logical-devices.html | 10 ++++++++--
 strolch-wc-plc-style.html           | 19 +++++++++++++++----
 4 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/bower.json b/bower.json
index 09856f2..c6125cb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-plc",
   "description": "Strolch PLC WebComponents",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "authors": ["Robert von Burg"],
   "keywords": [
     "strolch",
@@ -18,7 +18,7 @@
   "ignore": [],
   "dependencies": {
     "strolchjs": "strolch-li/strolchjs#^0.5.1",
-    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.2",
+    "strolch-wc-styles": "strolch-li/strolch-wc-styles#^0.4.4",
     "strolch-wc-debounced-input": "strolch-li/strolch-wc-debounced-input#^0.1.2",
     "strolch-wc-ws-observer": "strolch-li/strolch-wc-ws-observer#^0.2.9",
     "strolch-wc-localize-behavior": "strolch-li/strolch-wc-localize-behavior#^1.1.14",
diff --git a/strolch-wc-plc-connections.html b/strolch-wc-plc-connections.html
index 9b6835a..66d3708 100644
--- a/strolch-wc-plc-connections.html
+++ b/strolch-wc-plc-connections.html
@@ -27,6 +27,16 @@
     <template>
 
         <style is="custom-style" include="strolch-wc-plc-style">
+            :host {
+                display: block;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+
+            paper-card {
+                margin-bottom: 10px;
+            }
+
             .label {
                 min-width: 300px;
                 margin-right: 10px;
diff --git a/strolch-wc-plc-logical-devices.html b/strolch-wc-plc-logical-devices.html
index c6bbd16..09fc94a 100644
--- a/strolch-wc-plc-logical-devices.html
+++ b/strolch-wc-plc-logical-devices.html
@@ -31,8 +31,14 @@
     <template>
 
         <style is="custom-style" include="strolch-wc-plc-style">
-            h2 {
-                margin-bottom: 10px;
+            :host {
+                display: block;
+                padding-left: 10px;
+                padding-right: 10px;
+            }
+
+            h2:not(:first-of-type) {
+                margin-top: 20px;
             }
 
             .actions {
diff --git a/strolch-wc-plc-style.html b/strolch-wc-plc-style.html
index 78c0f4f..99cf407 100644
--- a/strolch-wc-plc-style.html
+++ b/strolch-wc-plc-style.html
@@ -1,19 +1,22 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
 
 <link rel="import" href="../strolch-wc-styles/strolch-wc-app-style.html">
 
 <dom-module id="strolch-wc-plc-style">
     <template>
         <style is="strolch-wc-plc-style" include="strolch-wc-app-style">
-            :host {
-                display: block;
+            :root {
+                --app-primary-color: #9965F4;
+                --app-secondary-color: #616161;
+                --primary-text-color: #212121;
+                --secondary-text-color: #737373;
             }
 
             paper-card {
-                margin-bottom: 10px;
+                display: block;
                 padding: 10px;
-                width: calc(100% - 20px);
             }
 
             paper-icon-button, iron-icon {
@@ -22,11 +25,19 @@
 
             paper-toggle-button {
                 height: 35px;
+                margin-left: 10px;
+                margin-right: 5px;
+                --paper-toggle-button-checked-button-color: var(--app-primary-color);
+            }
+
+            paper-radio-button {
+                --paper-radio-button-checked-color: var(--app-primary-color);
             }
 
             .active-icon {
                 color: var(--app-primary-color);
             }
+
             .inactive-icon {
                 color: var(--secondary-text-color);
             }