diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-04-21 16:40:45 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-04-26 21:23:19 +0200 |
commit | 09223546a4d882a9dbfdbd95d551e48af7bee123 (patch) | |
tree | 9ee8159046068725662b42955b599b4b7734e385 /client/src/app/videos/video-watch/video-watch.component.scss | |
parent | 383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (diff) | |
download | PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.gz PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.zst PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.zip |
Client Better design for video watch
Diffstat (limited to 'client/src/app/videos/video-watch/video-watch.component.scss')
-rw-r--r-- | client/src/app/videos/video-watch/video-watch.component.scss | 166 |
1 files changed, 100 insertions, 66 deletions
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 92192221f..cd9d71fb4 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss | |||
@@ -32,102 +32,136 @@ | |||
32 | } | 32 | } |
33 | 33 | ||
34 | #video-info { | 34 | #video-info { |
35 | border-top: 1px solid rgba(0, 0, 0, 0.1); | 35 | .video-name-views { |
36 | margin-top: 10px; | 36 | font-weight: bold; |
37 | padding-top: 5px; | 37 | font-size: 18px; |
38 | 38 | height: $video-watch-title-height; | |
39 | #video-name-actions { | 39 | line-height: $video-watch-title-height; |
40 | 40 | padding: 0 30px; | |
41 | #video-name { | ||
42 | font-size: 20px; | ||
43 | } | ||
44 | 41 | ||
45 | .btn .glyphicon { | 42 | .video-views { |
46 | position: relative; | 43 | text-align: right; |
47 | top: 2px; | ||
48 | } | 44 | } |
45 | } | ||
49 | 46 | ||
50 | #rates { | 47 | .video-small-blocks { |
51 | display: inline-block; | 48 | height: 150px; |
52 | margin-right: 20px; | 49 | color: $video-watch-info-color; |
50 | border-color: $video-watch-border-color; | ||
51 | border-width: 1px 0px; | ||
52 | border-style: solid; | ||
53 | |||
54 | .video-small-block { | ||
55 | height: $video-watch-info-height; | ||
56 | display: flex; | ||
57 | flex-direction: column; | ||
58 | justify-content: center; | ||
59 | text-align: center; | ||
60 | |||
61 | a { | ||
62 | cursor: pointer; | ||
63 | transition: color 0.3s; | ||
64 | |||
65 | &, &:hover { | ||
66 | color: inherit; | ||
67 | text-decoration:none; | ||
68 | } | ||
53 | 69 | ||
54 | // Remove focus style | 70 | &:hover { |
55 | .btn:focus { | 71 | color: #000 !important; |
56 | outline: 0; | 72 | } |
57 | } | 73 | } |
58 | 74 | ||
59 | .activated-btn { | 75 | .option .glyphicon { |
60 | color: #333; | 76 | font-size: 22px; |
61 | background-color: #e6e6e6; | 77 | color: inherit; |
62 | border-color: #8c8c8c; | 78 | opacity: 0.9; |
79 | margin-bottom: 10px; | ||
63 | } | 80 | } |
64 | 81 | ||
65 | .not-interactive-btn { | 82 | .video-small-block-text { |
66 | cursor: default; | 83 | font-size: 15px; |
67 | 84 | font-weight: bold; | |
68 | &:hover, &:focus, &:active { | ||
69 | color: #333; | ||
70 | background-color: #fff; | ||
71 | border-color: #ccc; | ||
72 | box-shadow: none; | ||
73 | outline: 0; | ||
74 | } | ||
75 | } | 85 | } |
76 | } | 86 | } |
77 | 87 | ||
78 | #share, #more { | 88 | .video-small-block:not(:last-child) { |
79 | font-weight: bold; | 89 | border-width: 0 1px 0 0; |
80 | opacity: 0.85; | 90 | border-color: $video-watch-border-color; |
91 | border-style: solid; | ||
81 | } | 92 | } |
82 | 93 | ||
83 | #more-menu .dropdown-item .glyphicon { | 94 | .video-small-block-author { |
84 | margin-right: 5px; | 95 | font-size: 15px; |
96 | font-weight: bold; | ||
85 | } | 97 | } |
86 | } | ||
87 | 98 | ||
88 | #video-by-date { | 99 | .video-small-block-share, .video-small-block-more { |
89 | font-size: 13px; | 100 | a.option { |
90 | opacity: 0.6; | 101 | display: block; |
91 | 102 | ||
92 | a { | 103 | .glyphicon { |
93 | color: black; | 104 | display: block; |
105 | } | ||
106 | } | ||
94 | } | 107 | } |
95 | 108 | ||
96 | #video-date:before { | 109 | .video-small-block-more .video-small-block-dropdown { |
97 | content: '\002022'; | 110 | position: relative; |
98 | margin: 0 5px; | 111 | |
112 | .dropdown-item .glyphicon { | ||
113 | margin-right: 5px; | ||
114 | } | ||
99 | } | 115 | } |
100 | } | ||
101 | 116 | ||
102 | #video-tags-views { | 117 | .video-small-block-rating { |
103 | margin-top: 10px; | ||
104 | 118 | ||
105 | a { | 119 | .video-small-block-like { |
106 | margin-right: 5px; | 120 | margin-bottom: 10px; |
107 | } | 121 | } |
108 | 122 | ||
109 | #video-views { | 123 | .video-small-block-text { |
110 | font-weight: bold; | 124 | vertical-align: top; |
111 | } | 125 | } |
112 | } | ||
113 | 126 | ||
114 | #video-category { | 127 | .glyphicon { |
115 | margin-top: 10px; | 128 | font-size: 18px; |
129 | margin: 0 10px 0 0; | ||
130 | } | ||
116 | 131 | ||
117 | #category-label { | 132 | .interactive { |
118 | font-weight: bold; | 133 | cursor: pointer; |
134 | transition: color 0.3s; | ||
135 | |||
136 | &.activated, &:hover { | ||
137 | color: #000; | ||
138 | } | ||
139 | } | ||
119 | } | 140 | } |
120 | } | 141 | } |
121 | 142 | ||
122 | #video-licence #licence-label, #video-language #language-label { | 143 | .video-details { |
123 | font-weight: bold; | 144 | margin-top: 30px; |
124 | } | ||
125 | 145 | ||
126 | #video-description { | 146 | .video-details-date-description { |
127 | margin-top: 10px; | 147 | padding-left: 30px; |
128 | 148 | ||
129 | #description-label { | 149 | .video-details-date { |
150 | font-weight: bold; | ||
151 | margin-bottom: 30px; | ||
152 | } | ||
153 | } | ||
154 | |||
155 | .video-details-attributes { | ||
130 | font-weight: bold; | 156 | font-weight: bold; |
157 | font-size: 12px; | ||
158 | |||
159 | .video-details-attribute-label { | ||
160 | color: $video-watch-info-color; | ||
161 | display: inline-block; | ||
162 | width: 60px; | ||
163 | margin-right: 5px; | ||
164 | } | ||
131 | } | 165 | } |
132 | } | 166 | } |
133 | } | 167 | } |