Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. Glass Vis 3

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.7k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.0k

Glass Vis 3

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
17 Beiträge 8 Kommentatoren 3.3k Aufrufe 13 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • O Ostpower

    @wszene
    Super Danke!

    ich Depp geh zwar auf CSS aber schalte nie um auf Projekt :(.

    Danke für die schnelle Hilfe

    Wie kann man solch einen Hintergrund selber erstellen? Gibt es dafür ein Tool?

    Gruß
    Ostpower

    WszeneW Offline
    WszeneW Offline
    Wszene
    schrieb am zuletzt editiert von
    #6

    @ostpower sagte in Glass Vis 3:

    Wie kann man solch einen Hintergrund selber erstellen? Gibt es dafür ein Tool?

    schau mal hier
    https://www.google.com/search?q=css+gradient+generator&oq=css+gradient+&aqs=edge.1.69i57j0i512l8.6681j0j1&sourceid=chrome&ie=UTF-8
    Da gibt es sehr viele Generatoren

    Meine Hard- & Software:

    • MSI Cubi 5 10M-049DE mit Proxmox
    • CC2652P Zigbee Stick
    • Steckdosen mit Tasmota und Zigbee
    • Lichtschalter mit Tasmota
    • IKEA TRÅDFRI Glühbirnen
    • Aqara Sensoren
    1 Antwort Letzte Antwort
    1
    • arteckA arteck

      @enrico-fischer sieht gut aus

      kannst du mir ein export der widgets machen von dem hier
      ea6f21ef-6590-416f-ae96-95a5db1b0f44-grafik.png
      danke

      GlasfaserG Offline
      GlasfaserG Offline
      Glasfaser
      schrieb am zuletzt editiert von
      #7

      @arteck

      [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","html":""},"style":{"left":"30px","top":"30px","z-index":"1","text-align":"center","line-height":"9","width":"400px","height":"335px","font-size":"large","opacity":""},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.weather","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Wetter"},"style":{"left":"44px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.traffic","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Verkehr"},"style":{"left":"163px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarToday","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Heute"},"style":{"left":"284px","top":"117px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.flashbriefing","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nachrichten"},"style":{"left":"44px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.deviceStop","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Alexa Stop"},"style":{"left":"163px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarNext","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nächster Termin"},"style":{"left":"284px","top":"203px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarTomorrow","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Morgen"},"style":{"left":"284px","top":"289px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"ALEXA","class":"Kopf30px"},"style":{"left":"30px","top":"30px","width":"400px","height":"58px","z-index":"4","text-align":"center","line-height":"3"},"widgetSet":"basic"}]
      

      .vis-view {
        background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
        color:#f1e9e9;
      
      }
      
      .Kopf30px {
       color: white;
       border-top-left-radius: 30px;
       border-top-right-radius: 30px;
       background-color: #22244a;
         box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
      }
      
      .container_radius30px {
       color: white;
       border-radius: 30px;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
       border: 0.5px solid #29323C;
      }
      
      
      .container_radius30pxglow {
       color: white;
       border-radius: 30px;
       border: 0.5px solid #29323C;
       animation: lightsbg 5s 750ms linear infinite;
      }
      
      
      .container_radius30pxBlank {
       border-radius: 30px;
      }
      
      
      .app-container {
       border-radius: 10px;
       background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
       box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
      }
      
      
      .app-container2 {
         box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
         border-radius:15px;
         border:1px solid rgba(255,255,255,0.5);
         backdrop-filter: blur(5px);
      }
      
      /*container*/
      
      .container_radius10px {
       color: white;
       border-radius: 10px;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
       border: 0.5px solid #29323C;
      }
      
      
      
      .container_radius60px {
       color: white;
       border-radius: 60px;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
       border: 0.5px solid #29323C;
      }
      
      
      .container_radius100 {
       color: white;
       border-radius: 100%;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
       border: 0.5px solid #29323C;
      }
      
      .container_gradient {
       background-image: linear-gradient(270deg, #485563 0%, #29323C 100%);
       border-radius: 10px;
       border: 0.5px solid #29323C;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
      }
      
      
      /*custom-radio*/
      
      .custom-radio {
       text-align: center;
       border-radius: 100%;
       border: none;
       box-shadow:
         -1px -1px 3px rgba(255, 255, 255, 0.1),
         2px 2px 6px rgba(0, 0, 0, 0.8),
         inset -2px -2px 10px rgba(255, 255, 255, 0.05),
         inset 2px 2px 10px rgba(0, 0, 0, 0.5);
      }
      
      
      .custom-radio-glow {
       border-radius: 100px;
       box-shadow:
         -1px -1px 3px rgba(255, 255, 255, 0.1),
         2px 2px 6px rgba(0, 0, 0, 0.8),
         inset -2px -2px 10px rgba(255, 255, 255, 0.05),
         inset 2px 2px 10px rgba(0, 0, 0, 0.5);
       animation: lightsbg 5s 750ms linear infinite;
      }
      
      @keyframes lightsbg {
       0% {
         color: hsl(230, 40%, 80%);
         box-shadow:
           0 0 1em hsla(320, 100%, 50%, 0.2),
           0 0 0.125em hsla(320, 100%, 60%, 0.3),
           -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
           1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
       }
      
       30% {
         color: hsl(230, 80%, 90%);
         box-shadow:
           0 0 1em hsla(320, 100%, 50%, 0.5),
           0 0 0.125em hsla(320, 100%, 60%, 0.5),
           -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
           0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
       }
      
       40% {
         color: hsl(230, 100%, 95%);
         box-shadow:
           0 0 1em hsla(320, 100%, 50%, 0.5),
           0 0 0.125em hsla(320, 100%, 90%, 0.5),
           -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
           0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
       }
      
       70% {
         color: hsl(230, 80%, 90%);
         box-shadow:
           0 0 1em hsla(320, 100%, 50%, 0.5),
           0 0 0.125em hsla(320, 100%, 60%, 0.5),
           0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
           -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
       }
      
       100% {
         color: hsl(230, 40%, 80%);
         box-shadow:
           0 0 1em hsla(320, 100%, 50%, 0.2),
           0 0 0.125em hsla(320, 100%, 60%, 0.3),
           1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
           -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
       }
      }
      
      .custom-radio_radius30px {
       text-align: center;
       border-radius: 30px;
       box-shadow:
         -1px -1px 3px rgba(255, 255, 255, 0.1),
         2px 2px 6px rgba(0, 0, 0, 0.8),
         inset -2px -2px 10px rgba(255, 255, 255, 0.05),
         inset 2px 2px 10px rgba(0, 0, 0, 0.5);
      }
      
      
      .custom-radio__fortschritt {
       text-align: center;
       border-radius: 30px;
       box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
       box-shadow: inset 9px 9px 29px #151a1f,
         inset -9px -9px 29px #3d4a59;
      }
      
      
      
      

      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

      arteckA 1 Antwort Letzte Antwort
      0
      • GlasfaserG Glasfaser

        @arteck

        [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","html":""},"style":{"left":"30px","top":"30px","z-index":"1","text-align":"center","line-height":"9","width":"400px","height":"335px","font-size":"large","opacity":""},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.weather","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Wetter"},"style":{"left":"44px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.traffic","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Verkehr"},"style":{"left":"163px","top":"118px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarToday","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Heute"},"style":{"left":"284px","top":"117px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.flashbriefing","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nachrichten"},"style":{"left":"44px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.deviceStop","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Alexa Stop"},"style":{"left":"163px","top":"238px","width":"100px","height":"100px","z-index":"3","line-height":"6","text-align":"center"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarNext","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Nächster Termin"},"style":{"left":"284px","top":"203px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplBasicState","data":{"oid":"alexa2.0.Echo-Devices.90F00818714705KQ.Commands.calendarTomorrow","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"class":"container_radius30px","value":"true","html":"Termine Morgen"},"style":{"left":"284px","top":"289px","width":"130px","height":"50px","z-index":"3","line-height":"3.2","text-align":"center","font-size":"15px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"ALEXA","class":"Kopf30px"},"style":{"left":"30px","top":"30px","width":"400px","height":"58px","z-index":"4","text-align":"center","line-height":"3"},"widgetSet":"basic"}]
        

        .vis-view {
          background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
          color:#f1e9e9;
        
        }
        
        .Kopf30px {
         color: white;
         border-top-left-radius: 30px;
         border-top-right-radius: 30px;
         background-color: #22244a;
           box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
        }
        
        .container_radius30px {
         color: white;
         border-radius: 30px;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
         border: 0.5px solid #29323C;
        }
        
        
        .container_radius30pxglow {
         color: white;
         border-radius: 30px;
         border: 0.5px solid #29323C;
         animation: lightsbg 5s 750ms linear infinite;
        }
        
        
        .container_radius30pxBlank {
         border-radius: 30px;
        }
        
        
        .app-container {
         border-radius: 10px;
         background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
         box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
        }
        
        
        .app-container2 {
           box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
           border-radius:15px;
           border:1px solid rgba(255,255,255,0.5);
           backdrop-filter: blur(5px);
        }
        
        /*container*/
        
        .container_radius10px {
         color: white;
         border-radius: 10px;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
         border: 0.5px solid #29323C;
        }
        
        
        
        .container_radius60px {
         color: white;
         border-radius: 60px;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
         border: 0.5px solid #29323C;
        }
        
        
        .container_radius100 {
         color: white;
         border-radius: 100%;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
         border: 0.5px solid #29323C;
        }
        
        .container_gradient {
         background-image: linear-gradient(270deg, #485563 0%, #29323C 100%);
         border-radius: 10px;
         border: 0.5px solid #29323C;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11), 0 -6px 8px rgba(255, 255, 255, 0.11), 0 -8px 16px rgba(255, 255, 255, 0.11);
        }
        
        
        /*custom-radio*/
        
        .custom-radio {
         text-align: center;
         border-radius: 100%;
         border: none;
         box-shadow:
           -1px -1px 3px rgba(255, 255, 255, 0.1),
           2px 2px 6px rgba(0, 0, 0, 0.8),
           inset -2px -2px 10px rgba(255, 255, 255, 0.05),
           inset 2px 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        
        .custom-radio-glow {
         border-radius: 100px;
         box-shadow:
           -1px -1px 3px rgba(255, 255, 255, 0.1),
           2px 2px 6px rgba(0, 0, 0, 0.8),
           inset -2px -2px 10px rgba(255, 255, 255, 0.05),
           inset 2px 2px 10px rgba(0, 0, 0, 0.5);
         animation: lightsbg 5s 750ms linear infinite;
        }
        
        @keyframes lightsbg {
         0% {
           color: hsl(230, 40%, 80%);
           box-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.2),
             0 0 0.125em hsla(320, 100%, 60%, 0.3),
             -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
             1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
         }
        
         30% {
           color: hsl(230, 80%, 90%);
           box-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 60%, 0.5),
             -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
             0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
         }
        
         40% {
           color: hsl(230, 100%, 95%);
           box-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 90%, 0.5),
             -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
             0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
         }
        
         70% {
           color: hsl(230, 80%, 90%);
           box-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.5),
             0 0 0.125em hsla(320, 100%, 60%, 0.5),
             0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
             -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
         }
        
         100% {
           color: hsl(230, 40%, 80%);
           box-shadow:
             0 0 1em hsla(320, 100%, 50%, 0.2),
             0 0 0.125em hsla(320, 100%, 60%, 0.3),
             1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
             -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
         }
        }
        
        .custom-radio_radius30px {
         text-align: center;
         border-radius: 30px;
         box-shadow:
           -1px -1px 3px rgba(255, 255, 255, 0.1),
           2px 2px 6px rgba(0, 0, 0, 0.8),
           inset -2px -2px 10px rgba(255, 255, 255, 0.05),
           inset 2px 2px 10px rgba(0, 0, 0, 0.5);
        }
        
        
        .custom-radio__fortschritt {
         text-align: center;
         border-radius: 30px;
         box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.1), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
         box-shadow: inset 9px 9px 29px #151a1f,
           inset -9px -9px 29px #3d4a59;
        }
        
        
        
        

        arteckA Offline
        arteckA Offline
        arteck
        Developer Most Active
        schrieb am zuletzt editiert von
        #8

        @glasfaser danke

        zigbee hab ich, zwave auch, nuc's genauso und HA auch

        1 Antwort Letzte Antwort
        0
        • WszeneW Wszene

          @ostpower
          Das hat er via CSS gemacht
          Geh mal rechts auf den Reiter CSS
          Dort siehst du ganz oben folgenden Code

          .vis-view {
             background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
             color:#f1e9e9;
          
          }
          

          Dieser Code ist für den Hintergrund zuständig

          ChaotC Offline
          ChaotC Offline
          Chaot
          schrieb am zuletzt editiert von Chaot
          #9

          @wszene Danke für die Idee.
          Es gibt aber noch eine zweite Möglichkeit.
          Ich habe einzelne Seiten in der VIS.
          Auf der jeweiligen Unterseite schalte ich im Reiter "View" die Option "use Background" ein und platziere dann dort den CSS Code:

          rgb(222,36,36) linear-gradient(34deg, rgba(222,36,36,1) 4%, rgba(107,107,104,1) 20%, rgba(222,36,36,1) 36%, rgba(222,36,36,1) 40%, rgba(107,107,104,1) 56%, rgba(222,36,36,1) 72%)
          

          VISCSS.jpg

          So habe ich die Möglichkeit jeder einzelnen Seite einen eigenen Hintergrund zum Thema hinzuzufügen.

          P.S. Nicht wundern. Die View ist für einen 12" mit 800x600 Auflösung.

          ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

          1 Antwort Letzte Antwort
          0
          • Enrico FischerE Enrico Fischer

            Wieder mal ein kleines Update

            Unbenannt.jpg

            Glass3.zip

            D Offline
            D Offline
            dos1973
            schrieb am zuletzt editiert von
            #10

            @enrico-fischer
            würdest das hintergundbild teilen/ hochladen? thx

            GlasfaserG 1 Antwort Letzte Antwort
            0
            • D dos1973

              @enrico-fischer
              würdest das hintergundbild teilen/ hochladen? thx

              GlasfaserG Offline
              GlasfaserG Offline
              Glasfaser
              schrieb am zuletzt editiert von
              #11

              @dos1973 sagte in Glass Vis 3:

              würdest das hintergundbild

              Ist per CSS

              .vis-view {
                background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
                color:#f1e9e9;
              
              }
              

              Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

              D 1 Antwort Letzte Antwort
              0
              • GlasfaserG Glasfaser

                @dos1973 sagte in Glass Vis 3:

                würdest das hintergundbild

                Ist per CSS

                .vis-view {
                  background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697003234675773) 68%, rgba(255, 206, 196, 0.5) 163%),linear-gradient(163deg, rgba(49, 146, 170, 0.07944489965716128) 86%, rgba(239, 112, 138, 0.5) 40%),linear-gradient(30deg, rgba(76, 79, 173, 0.6173675716587805) 22%, rgba(237, 106, 134, 0.5) 169%),linear-gradient(48deg, rgba(31, 85, 147, 0.7323890641868473) 64%, rgba(247, 126, 132, 0.5) 43%);
                  color:#f1e9e9;
                
                }
                

                D Offline
                D Offline
                dos1973
                schrieb am zuletzt editiert von
                #12

                @glasfaser
                danke dir

                1 Antwort Letzte Antwort
                0
                • GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von Glasfaser
                  #13

                  @dos1973

                  Tip,
                  wenn du nur eine Viewseite mit dem Hintergrund haben möchtest dann

                  #visview_home.vis-view {
                  

                  home gegen den Viewnamen ersetzen .

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  ChaotC 1 Antwort Letzte Antwort
                  1
                  • GlasfaserG Glasfaser

                    @dos1973

                    Tip,
                    wenn du nur eine Viewseite mit dem Hintergrund haben möchtest dann

                    #visview_home.vis-view {
                    

                    home gegen den Viewnamen ersetzen .

                    ChaotC Offline
                    ChaotC Offline
                    Chaot
                    schrieb am zuletzt editiert von
                    #14

                    @glasfaser Das kannst du aber auch genau so machen wie ich das eben beschrieben habe. Geht schneller und ist am Ende übersichtlicher finde ich.

                    ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                    GlasfaserG 1 Antwort Letzte Antwort
                    0
                    • ChaotC Chaot

                      @glasfaser Das kannst du aber auch genau so machen wie ich das eben beschrieben habe. Geht schneller und ist am Ende übersichtlicher finde ich.

                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      schrieb am zuletzt editiert von
                      #15

                      @chaot

                      Ja , du hast recht kann man so machen ,
                      aber die Vorlage wie oben , wird dann aber nicht richtig dargestellt .

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      ChaotC 1 Antwort Letzte Antwort
                      0
                      • GlasfaserG Glasfaser

                        @chaot

                        Ja , du hast recht kann man so machen ,
                        aber die Vorlage wie oben , wird dann aber nicht richtig dargestellt .

                        ChaotC Offline
                        ChaotC Offline
                        Chaot
                        schrieb am zuletzt editiert von
                        #16

                        @glasfaser Interessant. Muss ich mal probieren.
                        Ich habe im Projektordner eine Hintergrundanweisung für das Projekt stehen:

                        .vis-view {
                         background-color: #3EECAC;
                        background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
                        
                        }
                        ....
                        
                        

                        aber wenn ich in der View die CSS angebe wird die genutzt. Die aus dem Projekt wird nur bei den Views sichtbar die bei "use Background" keine Anweisung stehen haben.
                        Muss ich mir mal aus Interesse anschauen wie das obige Projekt genau aufgebaut ist wenn das anders funktioniert. Kann man vielleicht auch nutzen.

                        ioBroker auf NUC unter Proxmox; VIS: 12" Touchscreen und 17" Touch; Lichtsteuerung, Thermometer und Sensoren: Tasmota (39); Ambiente Beleuchtung: WLED (9); Heizung: DECT Thermostate (9) an Fritz 6690; EMS-ESP; 1 Echo V2; 3 Echo DOT; 1 Echo Connect; 2 Echo Show 5; Unifi Ap-Ac Lite.

                        1 Antwort Letzte Antwort
                        0
                        • mgiesoM Offline
                          mgiesoM Offline
                          mgieso
                          schrieb am zuletzt editiert von
                          #17

                          Hallo wie bekomme ich meine Alexas eingebunden und eigene Radiosender ?

                          Danke im Voraus

                          1 Antwort Letzte Antwort
                          0
                          Antworten
                          • In einem neuen Thema antworten
                          Anmelden zum Antworten
                          • Älteste zuerst
                          • Neuste zuerst
                          • Meiste Stimmen


                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          692

                          Online

                          32.4k

                          Benutzer

                          81.5k

                          Themen

                          1.3m

                          Beiträge
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                          ioBroker Community 2014-2025
                          logo
                          • Anmelden

                          • Du hast noch kein Konto? Registrieren

                          • Anmelden oder registrieren, um zu suchen
                          • Erster Beitrag
                            Letzter Beitrag
                          0
                          • Home
                          • Aktuell
                          • Tags
                          • Ungelesen 0
                          • Kategorien
                          • Unreplied
                          • Beliebt
                          • GitHub
                          • Docu
                          • Hilfe