3 @import '_bootstrap-variables';
5 $other-videos-width: 260px;
8 flex-direction: column;
12 font-weight: $font-semibold;
15 #video-element-wrapper {
16 background-color: #000;
18 justify-content: center;
24 flex-direction: column;
27 justify-content: center;
28 background-color: #141313;
33 @media screen and (max-width: 1000px) {
37 @media screen and (max-width: 600px) {
46 &.vjs-theater-enabled {
47 height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
51 // VideoJS create an inner video player
54 position: relative !important;
58 @media screen and (max-width: 600px) {
62 height: calc(100vw / 1.7); // 16/9
76 font-weight: $font-semibold;
85 // Set min width for flex item
89 .video-info-first-row {
98 min-height: 40px; // Align with the action buttons
100 font-weight: $font-semibold;
104 .video-info-date-views {
111 .video-info-channel {
112 font-weight: $font-semibold;
116 @include disable-default-a-behaviour;
118 color: var(--mainForegroundColor);
125 @include avatar(18px);
127 margin: -2px 2px 0 5px;
131 my-subscribe-button {
139 @include disable-default-a-behaviour;
144 color: var(--mainForegroundColor);
151 @include avatar(18px);
170 .video-actions-rates {
171 margin: 20px 0 10px 0;
175 height: 40px; // Align with the title
179 .action-button:not(:first-child), .action-more {
184 @include peertube-button;
185 @include grey-button;
186 @include button-with-icon(21px, 0, -1px);
187 @include apply-svg-color($grey-foreground-color);
190 font-weight: $font-semibold;
191 display: inline-block;
192 padding: 0 10px 0 10px;
199 &.action-button-like.activated {
200 background-color: $green;
203 @include apply-svg-color(#fff);
207 &.action-button-dislike.activated {
208 background-color: $red;
211 @include apply-svg-color(#fff);
221 display: inline-block;
223 .dropdown-menu .dropdown-item {
237 .video-info-likes-dislikes-bar {
238 $likes-bar-height: 2px;
239 height: $likes-bar-height;
240 margin-top: -$likes-bar-height;
242 background-color: $red;
248 background-color: $green;
254 .video-info-description {
258 .video-info-description-html {
259 @include peertube-word-wrap;
262 .glyphicon, .description-loading {
266 .description-loading {
267 display: inline-block;
270 .video-info-description-more {
272 font-weight: $font-semibold;
273 color: $grey-foreground-color;
283 .video-attributes .video-attribute {
288 .video-attribute-label {
291 display: inline-block;
292 color: $grey-foreground-color;
293 font-weight: $font-bold;
296 a.video-attribute-value {
297 @include disable-default-a-behaviour;
298 color: var(--mainForegroundColor);
305 &.video-attribute-tags {
306 .video-attribute-value:not(:nth-child(2)) {
315 /deep/ .other-videos {
317 width: $other-videos-width;
320 margin-top: 0 !important;
329 .video-miniature-information {
341 display: inline-block;
346 // If the view is not expanded, take into account the menu
348 width: calc(100% - #{$menu-width});
351 @media screen and (max-width: $small-view) {
353 margin-left: $menu-width;
357 :host-context(.expanded) {
372 justify-content: flex-start;
373 background-color: rgba(0, 0, 0, 0.9);
376 .privacy-concerns-text {
381 @include disable-default-a-behaviour;
383 color: var(--mainColor);
384 transition: color 0.3s;
391 .privacy-concerns-okay {
392 background-color: var(--mainColor);
393 padding: 5px 8px 5px 7px;
397 transition: background-color 0.3s;
398 font-weight: $font-semibold;
401 background-color: #000;
406 @media screen and (min-width: map-get($grid-breakpoints, xl)) {
407 .video-bottom .video-info {
408 max-width: calc(100% - #{$other-videos-width});
412 @media screen and (max-width: 1600px) {
413 .video-bottom .video-info .video-attributes .video-attribute {
418 @media screen and (max-width: 1300px) {
423 .privacy-concerns-text {
429 @media screen and (max-width: 600px) {
436 .video-info-first-row {
446 /deep/ .other-videos {
447 padding-left: 0 !important;
449 /deep/ .video-miniature {
450 flex-direction: column;
463 @media screen and (max-width: 450px) {
465 .action-button .icon-text {
466 display: none !important;
469 .video-info .video-info-first-row {
474 .video-info-date-views {
478 .video-actions-rates {
483 .video-info-description {
484 font-size: 14px !important;