1.0.60

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptimelink/webwidget",
-  "version": "1.0.56",
+  "version": "1.0.60",
   "private": false,
   "description": "the webwidget for public use of uptimelink",
   "main": "dist_ts_web/index.js",
@@ -13,13 +13,11 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@designestate/dees-domtools": "^1.0.74",
+    "@designestate/dees-element": "^1.0.6",
+    "@designestate/dees-wcctools": "^1.0.47",
     "@gitzone/tsrun": "^1.2.12",
-    "@losslessone_private/loint-pubapi": "^1.0.9",
-    "@pushrocks/smartexpress": "^3.0.76",
-    "lit-element": "^2.3.1",
-    "typescript": "^3.9.7"
+    "typescript": "^4.1.2"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.24",

ts_web/elements/uptimelink-webwidget.ts

@@ -1,8 +1,8 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('uptimelink-webwidget')
-export class UptimelinkWebwidget extends LitElement {
+export class UptimelinkWebwidget extends DeesElement {
   public static demo = () => html`
     <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
   `;
@@ -19,7 +19,11 @@ export class UptimelinkWebwidget extends LitElement {
     return html`
       ${domtools.elementBasic.styles}
       <style>
+        :host {
+          display: block;
+        }
         .mainbox {
+          line-height: 1em;
           margin: auto;
           display: grid;
           grid-template-columns: 26px auto;
@@ -30,9 +34,10 @@ export class UptimelinkWebwidget extends LitElement {
           width: 150px;
           border-radius: 20px;
           height: 30px;
-          background: #111;
+          background: ${this.goBright ? '#fff' : '#222' };
+          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
           padding: 5px;
-          color: #CCC;
+          color: ${this.goBright ? '#333' : '#CCC' };
           cursor: pointer;
         }
         .statusindicator {