Glass Vis 3

[Enrico Fischer]

Wieder mal ein kleines Update

Glass3.zip

[arteck]

@enrico-fischer sieht gut aus

kannst du mir ein export der widgets machen von dem hier

danke

[Ostpower]

@enrico-fischer
Deine VIS Seite sieht Mega aus, ich habe dazu mal eine Frage.
Wie bekommst du den Hintergrund in deine VIS. Ich habe deine zip importiert und
das Hintergrundbild ist direkt mit dabei.
Ich würde sowas auch in meiner Vis implementieren, nur weiß ich nicht wie Du
das gemacht hast. Ich finde z.b. dein Bild nicht unter Dateimanager und wo Du es
verknüpft hast, in der "Glass Vis 3" Vorlage.

Über eine Hilfe würde ich mich freuen.

Danke

[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

[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

[Wszene]

@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

[Glasfaser]

@arteck

Widget

[{"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"}]

CSS vom View/Projekt

.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;
}

[arteck]

@glasfaser danke

[Chaot]

@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%)

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.

[dos1973]

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

[Glasfaser]

@dos1973 sagte in Glass Vis 3:

würdest das hintergundbild

Ist per CSS

Spoiler

.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;

}

[dos1973]

@glasfaser
danke dir

[Glasfaser]

@dos1973

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

#visview_home.vis-view {

home gegen den Viewnamen ersetzen .

[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.

[Glasfaser]

@chaot

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

[Chaot]

@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.

[mgieso]

Hallo wie bekomme ich meine Alexas eingebunden und eigene Radiosender ?

Danke im Voraus