Upstream version 5.34.104.0

[platform/framework/web/crosswalk.git] / src / remoting / webapp / main.css

diff --git a/src/remoting/webapp/main.css b/src/remoting/webapp/main.css
index b5b75b6..7673498 100644 (file)
--- a/src/remoting/webapp/main.css
+++ b/src/remoting/webapp/main.css
@@ -739,3 +739,35 @@ html.apps-v2.scrollable {
   left: 0;
   width: 100%;
 }
+
+/* video-container needs relative position so that mediasource-video-output can
+ * be positioned relative to the parent with position:absolute. */
+#video-container {
+  position: relative;
+}
+
+/* mediasource-video-output is hidden by default. */
+#mediasource-video-output {
+  display: none;
+}
+
+/* Use absolute positioning for mediasource-video-output so that it's rendered
+ * at the same position as the plugin. */
+#video-container.mediasource-rendering #mediasource-video-output {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-shadow: 0 0 8px 0 black;
+}
+
+/*
+ * With MediaSource-based rendering the plugin is transparent and is placed on
+ * top of the <video> element so that it can still receive mouse events.
+ *
+ * TODO(sergeyu): This is temporary solution. Ideally mouse and keyboard events
+ * should be captured on JS level and passed to the plugin.
+ */
+#video-container.mediasource-rendering #client-plugin-container {
+  opacity: 0;
+}