Hier wieder mal eine neue Version.Ich habe wieder einige Animationen hinterlegt und habe mich auf die Standart und Material Widgets beschränkt.
Home
Beleuchtung
Heizung
Wetter
Media (noch in Arbeit)
System
Kraftstoff
Systemlogs
Tagesschau in 100 Sek.
Download
grey.zip
CSS Code
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
/* vis-view */
.vis-view {
font-family: 'DM Sans', sans-serif;
background: #1f1d2b;
color:#fff;
transition: 0.2s;
overflow: hidden;
display: flex;
}
.btn {
border-radius: 20px;
background: #1f2937;
box-shadow: 6px 6px 12px #141a23,
-6px -6px 12px #2a384b;
color:rgba(255,255,255,.8);
}
.btnin {
border-radius: 20px;
background: #1f2937;
box-shadow: inset 4px 4px 9px #19212d,
inset -4px -4px 9px #253141;
color:rgba(255,255,255,.8);
}
.modulgreen {
border-radius: 20px;
background-color: rgba(149, 236, 192, 0.8);
color: #4A4A4A;
box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
}
.modulred {
border-radius: 20px;
background-color: rgba(239, 176, 185, 0.8);
color: #4A4A4A;
box-shadow: inset 4px 4px 9px #19212d,
inset -4px -4px 9px #253141;
}
.bggreen {
border-radius: 25px;
background-color: green;
}
.bgred {
border-radius: 25px;
background-color: red;
}
.icon {
box-shadow: none;
background-color: #1f2937;
color:rgba(255,255,255,.8);
}
/*RGB Animation*/
.rgb-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);
}
}
/*Text Animation*/
.glow-text {
margin: auto;
font-size: 25px;
font-weight: 300;
animation: lights 5s 750ms linear infinite;
}
@keyframes lights {
0% {
color: hsl(230, 40%, 80%);
text-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%);
text-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%);
text-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%);
text-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%);
text-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);
}
}
.bgglow {
border-radius:25px;
background: aqua;
box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
animation: colormorph 8s linear infinite;
}
@keyframes colormorph {
0% {
background: aqua;
box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
}
25% {
background: #F1FF98;
box-shadow: inset 0 20px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
}
50% {
background: #98FFA4;
box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
}
75% {
background: #FF98FD;
box-shadow: inset 0 20px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
}
100% {
background: aqua;
box-shadow: inset 0 30px 10px 6px rgba(0, 0, 0, 0.3), inset 0 -4px 4px 4px rgba(0, 0, 0, 0.1);
}
}