feat: update web Interface

WebInterface/Front-end/assets/lib/semantic/components/video.css

@@ -0,0 +1,125 @@
+/*!
+ * # Semantic UI 2.0.0 - Video
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Video
+*******************************/
+
+.ui.video {
+  background-color: #dddddd;
+  position: relative;
+  max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0px;
+  overflow: hidden;
+}
+
+/*--------------
+     Content
+---------------*/
+
+
+/* Placeholder Image */
+.ui.video .placeholder {
+  background-color: #333333;
+}
+
+/* Play Icon Overlay */
+.ui.video .play {
+  cursor: pointer;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  -webkit-transition: background 0.2s ease;
+          transition: background 0.2s ease;
+}
+.ui.video .play.icon:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+      -ms-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 7rem;
+  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.video .placeholder {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* IFrame Embed */
+.ui.video .embed iframe,
+.ui.video .embed embed,
+.ui.video .embed object {
+  position: absolute;
+  border: none;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0em;
+  padding: 0em;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------
+    Hover
+---------------*/
+
+.ui.video .play:hover {
+  background: rgba(0, 0, 0, 0);
+}
+.ui.video .play:hover:before {
+  color: #ffffff;
+}
+
+/*--------------
+     Active
+---------------*/
+
+.ui.active.video .play,
+.ui.active.video .placeholder {
+  display: none;
+}
+.ui.active.video .embed {
+  display: inline;
+}
+
+
+/*******************************
+        Video Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+