Embed: chromecast

embed/skins/default.css

@@ -178,6 +178,26 @@ svg.icon.timeout {
   position: relative;
   overflow: hidden;
 }
+.mistvideo.casting .mistvideo-controls {
+  bottom: 0;
+}
+.mistvideo.casting .mistvideo-video {
+  filter: blur(1em);
+}
+.mistvideo.casting .mistvideo-maincontainer {
+  overflow: hidden;
+}
+.mistvideo.casting .mistvideo-casting {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  width: 100%;
+  font-size: 2em;
+  text-shadow: 1px 1px 5px #000a;
+} 
+
+
 .mistvideo-error[data-passive] {
   bottom: auto;
   left: auto;
@@ -201,3 +221,20 @@ svg.icon.timeout {
   transform-origin: 50% 50%;
 }
 .browser-ie .mist.icon.loading .spin { animation: none; }
+.mistvideo-chromecast {
+  display: flex;
+}
+google-cast-launcher {
+  width: 24px;
+  height: 24px;
+
+  --connected-color: $fill;
+  --disconnected-color: $semiFill;
+}
+google-cast-launcher.active {
+  --connected-color: $accent;
+  --disconnected-color: $fill;
+}
+.mistvideo.casting .mistvideo-slideshow_mode {
+  display: none;
+}

embed/skins/dev.css

@@ -106,3 +106,8 @@ input[type="checkbox"]:checked:after {
   left: 0;
   font-size: 1.2em;
 }
+.mistvideo.casting .mistvideo-forcePlayer,
+.mistvideo.casting .mistvideo-forceType,
+.mistvideo.casting .mistvideo-displayCombo {
+  display: none !important;
+}

embed/skins/general.css

@@ -207,6 +207,7 @@ a {
   animation-iteration-count: 1;
   animation-timing-function: steps(1,end);
 }
+
 @keyframes mistvideo-appear { from { opacity: 0; } to { opacity: 1; } }
 
 svg.icon {