-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use '_miniature' as *;
$thumbnail-width: 130px;
$thumbnail-height: 72px;
my-video-thumbnail,
.fake-thumbnail {
+ @include margin-right(10px);
+
display: flex; // Avoids an issue with line-height that adds space below the element
- margin-right: 10px;
}
.video {
cursor: pointer;
.position {
+ @include margin-right(10px);
+
font-weight: $font-semibold;
- margin-right: 10px;
color: pvar(--greyForegroundColor);
min-width: 25px;
left: -2px;
}
}
-
- .video-info {
- display: flex;
- flex-direction: column;
- align-self: flex-start;
- min-width: 0;
-
- a {
- width: auto;
- }
-
- .video-info-account, .video-info-timestamp {
- color: pvar(--greyForegroundColor);
- }
- }
}
- .video-info-name {
- font-size: 18px;
- font-weight: $font-semibold;
- display: inline-block;
-
- @include ellipsis;
- }
+ .more,
+ my-edit-button {
+ @include margin-left(auto);
- .more, my-edit-button {
justify-self: flex-end;
- margin-left: auto;
cursor: pointer;
min-width: 24px;
}
display: flex;
&::after {
- border: none;
+ border: 0;
}
}
+ }
+}
+
+.video-info-name {
+ @include ellipsis;
+
+ font-size: 18px;
+ font-weight: $font-semibold;
+ display: inline-block;
+}
+
+.video-info {
+ display: flex;
+ flex-direction: column;
+ align-self: flex-start;
+ min-width: 0;
- .dropdown-item {
- @include dropdown-with-icon-item;
+ .video-info-header {
+ display: flex;
+ align-items: baseline;
+
+ a {
+ width: auto;
+ padding-right: 5px;
}
- .timestamp-options {
- padding-top: 0;
- padding-left: 35px;
- margin-bottom: 15px;
+ .pt-badge {
+ @include margin-right(5px);
+ }
+ }
- > div {
- display: flex;
- align-items: center;
- }
+ .video-info-account,
+ .video-info-timestamp {
+ color: pvar(--greyForegroundColor);
+ }
+}
+
+.video-info-account,
+.video-miniature-created-at-views {
+ font-size: 14px;
+}
- input {
- @include peertube-button;
- @include orange-button;
+.dropdown-menu {
- margin-top: 10px;
- }
+ .dropdown-item {
+ @include dropdown-with-icon-item;
+
+ cursor: pointer;
+ }
+
+ .timestamp-options {
+ @include padding-left(35px);
+
+ padding-top: 0;
+ margin-bottom: 15px;
+
+ > div {
+ display: flex;
+ align-items: center;
+ margin-bottom: 5px;
+ }
+
+ my-peertube-checkbox {
+ @include margin-right(5px);
+ }
+
+ input {
+ @include peertube-button;
+ @include orange-button;
+
+ margin-top: 10px;
}
}
}