Neues YouTube-Video: Visualisierung im Devices-Adapter

[Enrico Fischer]

Gesamtansicht

Mediaplayer Startseite

Mediaplayer Playlist

Wie in Facebook versprochen hier meine neue VIS.

Diese Datenpunke müssen angelegt werden damit das Mediaplayermenü und die Unterseiten der Beleuchtung funktionieren.

CSS

/*Import Schriftarten*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");

/********************/


/*vis-view*/
/*mit # ausgeklammerte werden nicht geladen*/


.vis-view {
 font-family:  "Inter", sans-serif;
 background: radial-gradient(
    circle at 50% 100%,
    #eb2d76,
    #eb2d76 30%,
    #487ed2 70%
  );
 color: #ebeae5;
}

#.vis-view {
    font-family:  "Inter", sans-serif;
    background-image: url("/vis.0/TheDarkness/3.jpg");
  color: #ebeae5;
}



/********************/

/********************/
/****Glas****/
 
 .glass-panel {
  color: #fff;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}
 
 .glass-button {
   border: 0;
   border-radius: 15px;
   background-color: rgba(255,255,255,0.1);
   border: 1px solid rgba(255,255,255,0.1);
   backdrop-filter: blur(30px);
   color: rgba(255,255,255,0.8);
 }

 .glass-button:hover {
   background-color: rgba(255,255,255,0.2);
 }
 
.glass-button2 {
  color: #fff;
  background-color: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  padding:2px;
  line-height: 1.8em;
}

.glassled {
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  backdrop-filter: blur(10px);
}
 
/********************/
/****Glas End****/
 
 
/********************/
/****Fontstyle****/
 
 
.is-active {
   color: #1aa385;
  }
  
 .is-cancel {
   color: #d14b69;
  }
  
  .is-wait {
  color: #3E4EC2;
 }
 
 .title {
  font-size: 12px;
  font-weight: 500;
 }
 
 .subtitle {
  font-size: 13px;
  line-height: 1.6em;
 }
 
 .degree {
 font-size: 13px;
 color: #818394;
 font-weight: 500;
}

.insetshadow {
    color: #ebeae5;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
  }
  
 
/********************/
/****Fontstyle End****/


.circle {
 border: 2px solid #5b5f78;
 border-radius: 50%;
 box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
 font-size: 20px;
}

/********************/
/****Time BG****/


.time {
  font-size: 30px;
  line-height: 1.3em;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
 }
 
 .datum {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
 }

/********************/
/****Time BG End****/

/********************/
/****modul BG****/

.modulbgtop{
 background: rgb(20, 24, 52);
 background: radial-gradient(circle,rgba(20, 24, 52, 1) 0%,rgba(19, 22, 47, 1)100%);
 box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
 box-shadow: 0 5px 18px #0e0e23;
 border-radius: 20px 20px 0px 0px;
 border-width: 0.1px;
 border-style: solid;
  border-color: rgba(255,255,255,.425);
 }

.modulbgbottom{
 background: rgb(20, 24, 52);
 background: radial-gradient(circle,rgba(20, 24, 52, 1) 0%,rgba(19, 22, 47, 1) 100%);
 box-shadow: 0 16px 12px #0e0e23;
 border-radius: 0px 0px 20px 20px;
 box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255,255,255,.425);
 }
 
.facemodul {
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,.5);
  filter: blur(0.2px);
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255,255,255,.425);
}

 /********************/
/****modul BG End****/



/********************/
/****Sonos Player****/

.bgbottom{
   background: rgb(20, 24, 52);
   background: radial-gradient(circle,rgba(20, 24, 52, 1) 0%,rgba(19, 22, 47, 1) 100%
 );
    box-shadow: 0 16px 12px #0e0e23;
    border-radius: 0px 0px 20px 20px;
    box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
    border-width: 0.1px;
    border-style: solid;
    border-color: rgba(255,255,255,.425);
 }
 
 
.facemediaplayer {
    width: 250px;
    height: 485px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.5);
    background-color: rgba(255,255,255,.05);
    filter: blur(0.2px);
    border-width: 0.1px;
    border-style: solid;
    border-color: rgba(255,255,255,.425);
}

.volslider {
    padding-right:30px;
    padding-left:30px;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	border: 0;
	border-radius: 10px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	outline: none;
}

.progressslider {
  border-width: 0.1px;
  border-style: solid;
  border-color: rgba(255,255,255,.425);
  
 }
 
 .controlbtn {
 border-width: 0.1px;
 border-style: solid;
 border-color: rgba(255,255,255,.425);
 border-radius: 50%;
 box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
}

.cover {
 border-radius: 100%;
 box-shadow : 0px 5px 5px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
}


.cover2 {
 opacity: 0.08;
 border-radius: 6px;
}
 
 /********************/
/****Sonos Player End****/
 

Download

2022-01-01-TheDarkness.zip

[Hansi1234]

Mega Garten!!!

[leonundjulie]

Schaut top aus. Suche nämlich einen Player, also eine VIEW zur Bedienung meiner 6 SONOS Räume. Du bedienst doch SONOS mit der Oberfläche, oder?