_video.scss in semantic-ui-sass-1.7.0.0

- old
+ new
@@ -1,94 +1,126 @@
-/*
- * # Semantic - Video
- * http://github.com/jlukic/semantic-ui/
- *
- *
- * Copyright 2014 Contributors
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
  */
 
-/*******************************
-            Video
+
+
+/*******************************
+            Video
 *******************************/
 
 .ui.video {
+  background-color: #dddddd;
   position: relative;
   max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0px;
+  overflow: hidden;
 }
 
-/*--------------
-     Content
+/*--------------
+     Content
 ---------------*/
 
-/* Placeholder Image */
 
+/* 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%;
-  -ms-filter: "progid:DXImageTransform.Microsoft@include ctb-Alpha(Opacity=60);";
-  filter: alpha(opacity=60);
-  opacity: 0.6;
+  opacity: 0.8;
   -webkit-transition: opacity 0.3s;
-  transition: opacity 0.3s;
+          transition: opacity 0.3s;
 }
-
 .ui.video .play.icon:before {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 11;
-  font-size: 6rem;
-  margin: -3rem 0em 0em -3rem;
-  color: #FFFFFF;
-  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.3);
+  width: 8rem;
+  height: 8rem;
+  line-height: 8rem;
+  border-radius: 500rem;
+  color: #ffffff;
+  font-size: 8rem;
+  text-shadow: none;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+      -ms-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
 }
-
 .ui.video .placeholder {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   display: block;
   width: 100%;
   height: 100%;
 }
 
 /* IFrame Embed */
-
-.ui.video .embed {
-  display: none;
+.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
+
+/*******************************
+            States
 *******************************/
 
-/*--------------
-    Hover
+
+/*--------------
+    Hover
 ---------------*/
 
 .ui.video .play:hover {
   opacity: 1;
 }
 
-/*--------------
-     Active
+/*--------------
+     Active
 ---------------*/
 
 .ui.video.active .play,
 .ui.video.active .placeholder {
   display: none;
 }
-
 .ui.video.active .embed {
-  display: block;
-}
\ No newline at end of file
+  display: inline;
+}
+
+
+/*******************************
+        Video Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+