quattro: style video delete button

view/templates/video_top.tpl

@@ -11,7 +11,7 @@
 	{{*<div class="video-top-album-name"><a href="{{$video.album.link}}" class="video-top-album-link" title="{{$video.album.alt}}" >{{$video.album.name}}</a></div>*}}
 	{{if $delete_url }}
 		<form method="post" action="{{$delete_url}}">
-		<input type="submit" name="delete" value="X"></input>
+		<input type="submit" name="delete" value="X" class="video-delete"></input>
 		<input type="hidden" name="id" value="{{$video.id}}"></input>
 		</form>
 	{{/if}}

view/theme/quattro/dark/style.css

@@ -514,7 +514,6 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
-
   z-index: 110;
   color: #ffffff;
 }
@@ -844,7 +843,6 @@ aside #profiles-menu {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
-
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -926,7 +924,6 @@ aside #profiles-menu {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
-
 }
 .widget h3 {
   padding: 0px;
@@ -1208,7 +1205,6 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
-
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -1283,9 +1279,6 @@ section {
     opacity: 0.5;
 }*/
 .wwto {
-  position: absolute !important;
-  width: 25px;
-  height: 25px;
   background: #FFFFFF;
   border: 2px solid #364e59;
   height: 25px;
@@ -1969,6 +1962,27 @@ ul.tabs li .active {
   width: 50px;
   float: left;
 }
+/* videos page */
+.videos .video-top-wrapper {
+  width: 200px;
+  float: left;
+  margin: 0px 10px 10px 0px;
+  position: relative;
+}
+.videos .video-top-wrapper .video-js {
+  width: 200px!important;
+  height: 132px!important;
+}
+.videos .video-top-wrapper .video-delete {
+  position: absolute;
+  opacity: 0;
+  right: 0px;
+  top: 0px;
+  transition: opacity 0.5s;
+}
+.videos .video-top-wrapper:hover .video-delete {
+  opacity: 1;
+}
 /* photo albums */
 #photo-edit-link-wrap {
   margin-bottom: 10px;

view/theme/quattro/green/style.css

@@ -514,7 +514,6 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
-
   z-index: 110;
   color: #ffffff;
 }
@@ -844,7 +843,6 @@ aside #profiles-menu {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
-
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -926,7 +924,6 @@ aside #profiles-menu {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
-
 }
 .widget h3 {
   padding: 0px;
@@ -1208,7 +1205,6 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
-
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -1283,9 +1279,6 @@ section {
     opacity: 0.5;
 }*/
 .wwto {
-  position: absolute !important;
-  width: 25px;
-  height: 25px;
   background: #FFFFFF;
   border: 2px solid #364e59;
   height: 25px;
@@ -1969,6 +1962,27 @@ ul.tabs li .active {
   width: 50px;
   float: left;
 }
+/* videos page */
+.videos .video-top-wrapper {
+  width: 200px;
+  float: left;
+  margin: 0px 10px 10px 0px;
+  position: relative;
+}
+.videos .video-top-wrapper .video-js {
+  width: 200px!important;
+  height: 132px!important;
+}
+.videos .video-top-wrapper .video-delete {
+  position: absolute;
+  opacity: 0;
+  right: 0px;
+  top: 0px;
+  transition: opacity 0.5s;
+}
+.videos .video-top-wrapper:hover .video-delete {
+  opacity: 1;
+}
 /* photo albums */
 #photo-edit-link-wrap {
   margin-bottom: 10px;

view/theme/quattro/lilac/style.css

@@ -514,7 +514,6 @@ header {
   margin: 0px;
   padding: 0px;
   /*width: 100%; height: 12px; */
-
   z-index: 110;
   color: #ffffff;
 }
@@ -844,7 +843,6 @@ aside #profiles-menu {
   overflow: auto;
   height: auto;
   /*.contact-block-div { width:60px; height: 60px; }*/
-
 }
 #contact-block .contact-block-h4 {
   float: left;
@@ -926,7 +924,6 @@ aside #profiles-menu {
   margin-bottom: 2em;
   /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
 	.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
-
 }
 .widget h3 {
   padding: 0px;
@@ -1208,7 +1205,6 @@ section {
   height: 32px;
   margin-left: 16px;
   /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
-
 }
 .comment-edit-preview .contact-photo-menu-button {
   top: 15px !important;
@@ -1283,9 +1279,6 @@ section {
     opacity: 0.5;
 }*/
 .wwto {
-  position: absolute !important;
-  width: 25px;
-  height: 25px;
   background: #FFFFFF;
   border: 2px solid #364e59;
   height: 25px;
@@ -1969,6 +1962,27 @@ ul.tabs li .active {
   width: 50px;
   float: left;
 }
+/* videos page */
+.videos .video-top-wrapper {
+  width: 200px;
+  float: left;
+  margin: 0px 10px 10px 0px;
+  position: relative;
+}
+.videos .video-top-wrapper .video-js {
+  width: 200px!important;
+  height: 132px!important;
+}
+.videos .video-top-wrapper .video-delete {
+  position: absolute;
+  opacity: 0;
+  right: 0px;
+  top: 0px;
+  transition: opacity 0.5s;
+}
+.videos .video-top-wrapper:hover .video-delete {
+  opacity: 1;
+}
 /* photo albums */
 #photo-edit-link-wrap {
   margin-bottom: 10px;

view/theme/quattro/quattro.less

@@ -1321,6 +1321,33 @@ ul.tabs {
 	width: 50px; float: left;
 }
 
+/* videos page */
+.videos {
+    .video-top-wrapper {
+        width: 200px; float: left;
+        margin: 0px 10px 10px 0px;
+        position: relative;
+
+        .video-js {
+            width: 200px!important;
+            height: 132px!important;
+        }
+
+        .video-delete {
+            position: absolute;
+            opacity: 0;
+            right: 0px;
+            top: 0px;
+            transition: opacity 0.5s;
+        }
+
+        &:hover .video-delete {
+            opacity: 1;
+        }
+    }
+}
+
+
 /* photo albums */
 @photosize: 150px;