@import '_miniature';
.playlist-info {
- background-color: var(--submenuColor);
- margin-left: -15px;
+ background-color: pvar(--submenuColor);
+ margin-left: -$not-expanded-horizontal-margins;
margin-top: -$sub-menu-margin-bottom;
- padding: $sub-menu-margin-bottom 0 -15px 0;
+ padding: 10px;
display: flex;
- justify-content: center;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
/* fix ellipsis dots background color */
::ng-deep .miniature-name::after {
- background-color: var(--submenuColor) !important;
+ background-color: pvar(--submenuColor) !important;
+ }
+}
+
+.playlist-buttons {
+ display:flex;
+ margin: 30px 0 10px 0;
+
+ .share-button {
+ @include peertube-button;
+ @include button-with-icon(17px, 3px, -1px);
+ @include grey-button;
+ @include apply-svg-color(pvar(--actionButtonColor));
+
+ margin-right: 10px;
}
}
@media screen and (max-width: $small-view) {
.playlist-info {
- margin-top: -$sub-menu-margin-bottom-small-view;
+ width: 100vw;
+ padding-top: 20px;
+ margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
}
}