aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-watch
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/video-watch')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html5
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss24
2 files changed, 20 insertions, 9 deletions
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 @@
43 43
44 <div class="row video-small-blocks"> 44 <div class="row video-small-blocks">
45 <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author"> 45 <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author">
46 <a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]"> 46 <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]">
47 {{ video.by }} 47 <span class="glyphicon glyphicon-user"></span>
48 <span class="video-small-block-text">{{ video.by }}</span>
48 </a> 49 </a>
49 </div> 50 </div>
50 51
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 @@
77 &:hover { 77 &:hover {
78 color: #000 !important; 78 color: #000 !important;
79 } 79 }
80
81 &:hover > .glyphicon {
82 opacity: 1 !important;
83 }
80 } 84 }
81 85
82 .option .glyphicon { 86 .option .glyphicon {
83 font-size: 22px; 87 font-size: 22px;
84 color: inherit; 88 color: inherit;
85 opacity: 0.6; 89 opacity: 0.15;
86 margin-bottom: 10px; 90 margin-bottom: 10px;
91 transition: opacity 0.3s;
87 } 92 }
88 93
89 .video-small-block-text { 94 .video-small-block-text {
@@ -98,11 +103,14 @@
98 border-style: solid; 103 border-style: solid;
99 } 104 }
100 105
101 .video-small-block-author { 106 .video-small-block-author, .video-small-block-more {
102 font-size: 15px; 107 a.option {
103 font-weight: bold; 108 display: block;
104 text-align: left; 109
105 padding-left: $video-watch-info-padding-left; 110 .glyphicon {
111 display: block;
112 }
113 }
106 } 114 }
107 115
108 .video-small-block-share, .video-small-block-more { 116 .video-small-block-share, .video-small-block-more {
@@ -136,13 +144,15 @@
136 .glyphicon { 144 .glyphicon {
137 font-size: 18px; 145 font-size: 18px;
138 margin: 0 10px 0 0; 146 margin: 0 10px 0 0;
147 opacity: 0.3;
139 } 148 }
140 149
141 .interactive { 150 .interactive {
142 cursor: pointer; 151 cursor: pointer;
143 transition: color 0.3s; 152 transition: opacity, color 0.3s;
144 153
145 &.activated, &:hover { 154 &.activated, &:hover {
155 opacity: 1;
146 color: #000; 156 color: #000;
147 } 157 }
148 } 158 }