aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/player
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-08-05 11:41:22 +0200
committerChocobozzz <chocobozzz@cpy.re>2020-08-07 08:58:29 +0200
commit56674bb9f81775ff85115e7daa7d9be0db95c001 (patch)
tree06f74dd3a0d1a39b8e1272c54794604c3a5f6ef2 /client/src/sass/player
parenta950e4c82bd458e924b00698a77c06275a64a46c (diff)
downloadPeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.tar.gz
PeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.tar.zst
PeerTube-56674bb9f81775ff85115e7daa7d9be0db95c001.zip
Handle unavailable videos in embed playlists
Diffstat (limited to 'client/src/sass/player')
-rw-r--r--client/src/sass/player/playlist.scss35
1 files changed, 24 insertions, 11 deletions
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index c242acba8..544d45a48 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -24,17 +24,17 @@ $playlist-menu-width: 350px;
24 justify-content: space-between; 24 justify-content: space-between;
25 25
26 .title { 26 .title {
27 @include ellipsis;
28
27 font-size: 14px; 29 font-size: 14px;
28 margin-bottom: 5px; 30 margin-bottom: 5px;
29 white-space: nowrap;
30 text-overflow: ellipsis;
31 } 31 }
32 32
33 .channel { 33 .channel {
34 @include ellipsis;
35
34 font-size: 11px; 36 font-size: 11px;
35 color: #bfbfbf; 37 color: #bfbfbf;
36 white-space: nowrap;
37 text-overflow: ellipsis;
38 } 38 }
39 39
40 .cross { 40 .cross {
@@ -106,9 +106,13 @@ $playlist-menu-width: 350px;
106} 106}
107 107
108.vjs-playlist-menu-item { 108.vjs-playlist-menu-item {
109 cursor: pointer;
110 display: flex; 109 display: flex;
111 padding: 10px 0; 110 padding: 10px 0;
111 height: 60px;
112
113 &:not(.vjs-disabled) {
114 cursor: pointer;
115 }
112 116
113 .item-position-block { 117 .item-position-block {
114 position: relative; 118 position: relative;
@@ -116,6 +120,14 @@ $playlist-menu-width: 350px;
116 align-items: center; 120 align-items: center;
117 justify-content: center; 121 justify-content: center;
118 width: 30px; 122 width: 30px;
123 flex-shrink: 0;
124 }
125
126 .item-unavailable {
127 position: relative;
128 display: flex;
129 align-items: center;
130 justify-content: center;
119 } 131 }
120 132
121 .item-player { 133 .item-player {
@@ -136,7 +148,7 @@ $playlist-menu-width: 350px;
136 } 148 }
137 } 149 }
138 150
139 &:hover { 151 &:hover:not(.vjs-disabled) {
140 background-color: rgba(150, 150, 150, 0.2); 152 background-color: rgba(150, 150, 150, 0.2);
141 } 153 }
142 154
@@ -146,20 +158,21 @@ $playlist-menu-width: 350px;
146 } 158 }
147 159
148 .info-block { 160 .info-block {
149 margin-left: 10px; 161 margin: 0 10px;
162 min-width: 1px;
150 163
151 .title { 164 .title {
165 @include ellipsis;
166
152 font-size: 13px; 167 font-size: 13px;
153 margin-bottom: 5px; 168 margin-bottom: 5px;
154 white-space: nowrap;
155 text-overflow: ellipsis;
156 } 169 }
157 170
158 .channel { 171 .channel {
172 @include ellipsis;
173
159 font-size: 11px; 174 font-size: 11px;
160 color: #bfbfbf; 175 color: #bfbfbf;
161 white-space: nowrap;
162 text-overflow: ellipsis;
163 } 176 }
164 } 177 }
165} 178}