@include create-button;
}
-/deep/ .action-button {
- &.action-button-delete {
+::ng-deep .action-button {
+ &.action-button-edit {
margin-right: 10px;
}
}
.video-channel {
- display: flex;
- min-height: 130px;
- padding-bottom: 20px;
- margin-bottom: 20px;
- border-bottom: 1px solid #C6C6C6;
+ @include row-blocks;
+ padding-bottom: 0;
img {
@include avatar(80px);
a.video-channel-names {
@include disable-default-a-behaviour;
+ width: fit-content;
display: flex;
- color: #000;
+ align-items: baseline;
+ color: var(--mainForegroundColor);
.video-channel-display-name {
font-weight: $font-semibold;
.video-channel-name {
font-size: 14px;
- color: #777272;
+ color: $grey-actor-name;
+ margin-left: 5px;
+ }
+
+ .video-channel-followers {
+
}
}
}
.video-channel-buttons {
+ margin-top: 10px;
min-width: 190px;
}
}
margin: 20px 0 50px;
}
-@media screen and (max-width: 800px) {
- .video-channel {
- flex-direction: column;
- height: auto;
+::ng-deep .chartjs-render-monitor {
+ position: relative;
+ top: 1px;
+}
+
+@media screen and (max-width: $small-view) {
+ .video-channels-header {
text-align: center;
+ }
+
+ .video-channel {
+ padding-bottom: 10px;
+
+ .video-channel-info {
+ padding-bottom: 10px;
+ text-align: center;
+
+ .video-channel-names {
+ flex-direction: column;
+ align-items: center !important;
+ margin: auto;
+
+ .video-channel-name {
+ margin-left: 0px !important;
+ }
+ }
+ }
img {
margin-right: 0;
}
.video-channel-buttons {
- margin-top: 10px;
+ align-self: center;
+ }
+ }
+}
+
+@media screen and (min-width: breakpoint(lg)) {
+ :host-context(.main-col:not(.expanded)) {
+ .video-channel-buttons {
+ float: right;
+ }
+ }
+}
+
+@media screen and (min-width: $small-view) {
+ :host-context(.expanded) {
+ .video-channel-buttons {
+ float: right;
}
}
}