diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 58a48ca9c..8676b5b72 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -43,8 +43,9 @@
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 789260a91..69661747c 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -77,13 +77,18 @@
&:hover {
color: #000 !important;
}
+
+ &:hover > .glyphicon {
+ opacity: 1 !important;
+ }
}
.option .glyphicon {
font-size: 22px;
color: inherit;
- opacity: 0.6;
+ opacity: 0.15;
margin-bottom: 10px;
+ transition: opacity 0.3s;
}
.video-small-block-text {
@@ -98,11 +103,14 @@
border-style: solid;
}
- .video-small-block-author {
- font-size: 15px;
- font-weight: bold;
- text-align: left;
- padding-left: $video-watch-info-padding-left;
+ .video-small-block-author, .video-small-block-more {
+ a.option {
+ display: block;
+
+ .glyphicon {
+ display: block;
+ }
+ }
}
.video-small-block-share, .video-small-block-more {
@@ -136,13 +144,15 @@
.glyphicon {
font-size: 18px;
margin: 0 10px 0 0;
+ opacity: 0.3;
}
.interactive {
cursor: pointer;
- transition: color 0.3s;
+ transition: opacity, color 0.3s;
&.activated, &:hover {
+ opacity: 1;
color: #000;
}
}