]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/shared/video/video-miniature.component.scss
Add commentor name alongside fid for video comments
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / video / video-miniature.component.scss
CommitLineData
63c4db6d
C
1@import '_variables';
2@import '_mixins';
830b4faf 3@import '_miniature';
63c4db6d 4
743f023c 5$more-button-width: 41px;
5dfb7c1d 6$more-margin-right: 15px;
743f023c 7
501bc6c2 8.video-miniature {
11dd0c2e 9 width: $video-miniature-width;
e2409062
C
10 display: inline-flex;
11 flex-direction: column;
dc890263 12 margin-bottom: $video-miniature-margin-bottom;
e5fc7811 13 height: 195px;
0d7d2ad9 14 vertical-align: top;
501bc6c2 15
0f4905e1
C
16 .video-bottom {
17 display: flex;
501bc6c2 18
0f4905e1 19 .video-miniature-information {
743f023c 20 width: $video-miniature-width - $more-button-width - $more-margin-right;
0f4905e1 21 line-height: normal;
501bc6c2 22
0f4905e1
C
23 .video-miniature-name {
24 @include miniature-name;
25 }
00a44645 26
0f4905e1
C
27 .video-miniature-created-at-views {
28 display: block;
29 font-size: 13px;
30 }
03e12d7c 31
0f4905e1
C
32 .video-miniature-account,
33 .video-miniature-channel {
34 @include disable-default-a-behaviour;
35 @include ellipsis;
03e12d7c 36
0f4905e1
C
37 display: block;
38 font-size: 13px;
39 color: $grey-foreground-color;
40
41 &:hover {
42 color: $grey-foreground-hover-color;
43 }
03e12d7c 44 }
e2409062 45
0f4905e1
C
46 .video-info-privacy,
47 .video-info-blacklisted .blacklisted-label,
48 .video-info-nsfw {
49 font-weight: $font-semibold;
50 }
e2409062 51
0f4905e1
C
52 .video-info-blacklisted {
53 color: red;
e2409062 54
0f4905e1
C
55 .blacklisted-reason::before {
56 content: ' - ';
57 }
e2409062 58 }
e2409062 59
0f4905e1
C
60 .video-info-nsfw {
61 color: red;
62 }
e2409062 63 }
3a0fb65c
C
64
65 .video-actions {
66 margin-top: 3px;
743f023c
C
67 width: $more-button-width;
68 height: 30px;
3a0fb65c 69
03652b31 70 ::ng-deep .dropdown-root:not(.show) {
2b3f1919 71 opacity: 0;
0f4905e1 72 }
3a0fb65c 73
03652b31 74 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
2b3f1919 75 opacity: 1;
0f4905e1 76 }
3a0fb65c
C
77 }
78
03652b31 79 &:hover .video-actions ::ng-deep .dropdown-root {
2b3f1919 80 opacity: 1;
3a0fb65c
C
81 }
82
83 @media screen and (max-width: $small-view) {
0f4905e1
C
84 .video-miniature-information .video-miniature-name {
85 margin-top: 0;
3a0fb65c
C
86 }
87
0f4905e1
C
88 .video-actions {
89 margin: 0;
90 top: -3px;
91
03652b31 92 ::ng-deep .dropdown-root {
743f023c 93 opacity: 1 !important;
0f4905e1 94 }
3a0fb65c
C
95 }
96 }
97 }
98
e2409062
C
99 &.display-as-row {
100 flex-direction: row;
101 margin-bottom: 0;
102 height: auto;
103 width: 100%;
104
105 my-video-thumbnail {
106 margin-right: 10px;
107 }
108
0f4905e1
C
109 .video-bottom {
110 .video-miniature-information {
dd570a34
C
111 @media screen and (min-width: $small-view) {
112 width: auto;
113 min-width: 500px;
114 }
0f4905e1
C
115
116 .video-miniature-name {
117 @include ellipsis-multiline(1.3em, 2);
118
119 margin-top: 2px;
120 margin-bottom: 5px;
121 }
122
123 .video-miniature-created-at-views,
124 .video-miniature-account,
125 .video-miniature-channel {
126 font-size: 14px;
127 width: fit-content;
128 }
129
130 .video-info-privacy {
131 margin-top: 5px;
132 }
133
134 .video-info-blacklisted {
135 margin-top: 3px;
136 }
e2409062
C
137 }
138
0f4905e1
C
139 .video-actions {
140 margin: 0;
141 top: -3px;
e2409062
C
142 }
143 }
144
145 @media screen and (max-width: $small-view) {
146 flex-direction: column;
147 height: auto;
148
149 my-video-thumbnail {
150 margin-right: 0;
151 }
8dfceec4
C
152
153 .video-miniature-information {
154 min-width: initial;
155 }
e2409062 156 }
501bc6c2
C
157 }
158}