Spruce up video styles

src/definitions/modules/video.less

@@ -49,30 +49,22 @@
   top: 0px;
   left: 0px;
   z-index: 10;
-
   width: 100%;
   height: 100%;
-
-  opacity: @playOpacity;
-  transition: opacity 0.3s;
+  background: @playBackground;
+  transition: @playTransition;
 }
 .ui.video .play.icon:before {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 11;
-
-  background: @playBackground;
-
-  width: (@playSize + @playBorderSize);
-  height: (@playSize + @playBorderSize);
-  line-height: (@playSize + @playBorderSize);
-  border-radius: @playBorderRadius;
-
-  color: @playColor;
-  font-size: @playSize;
-  text-shadow: @playShadow;
   transform: translateX(-50%) translateY(-50%);
+
+  color: @playIconColor;
+  font-size: @playIconSize;
+  text-shadow: @playIconShadow;
+  transition: @playIconTransition;
 }
 
 .ui.video .placeholder {
@@ -107,18 +99,21 @@
 ---------------*/
 
 .ui.video .play:hover {
-  opacity: @playHoverOpacity;
+  background: @playHoverBackground;
+}
+.ui.video .play:hover:before {
+  color: @playHoverIconColor;
 }
 
 /*--------------
      Active
 ---------------*/
 
-.ui.video.active .play,
-.ui.video.active .placeholder {
+.ui.active.video .play,
+.ui.active.video .placeholder {
   display: none;
 }
-.ui.video.active .embed {
+.ui.active.video .embed {
   display: inline;
 }
 

src/themes/default/modules/video.variables

@@ -2,15 +2,25 @@
              Video
 *******************************/
 
+/*-------------------
+       Element
+--------------------*/
+
 @background: #DDDDDD;
 @placeholderBackground: #333333;
 
-@playSize: 8rem;
-@playColor: #FFFFFF;
-@playOpacity: 0.8;
-@playHoverOpacity: 1;
-@playShadow: none;
+@playBackground: transparent;
+@playTransition: background @defaultDuration @defaultEasing;
+
+@playIconSize: 7rem;
+@playIconTransition: color @defaultDuration @defaultEasing;
+@playIconColor: rgba(255, 255, 255, 0.7);
+@playIconShadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
+
+
+/*-------------------
+       States
+--------------------*/
 
-@playBorderSize: 0rem;
-@playBackground: rgba(0, 0, 0, 0.3);
-@playBorderRadius: @circularRadius;
+@playHoverBackground: rgba(0, 0, 0, 0);
+@playHoverIconColor: @white;