-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+$optional-rows-checkbox-width: 34px;
+$timestamp-width: 50px;
+$timestamp-margin-right: 10px;
.header,
.dropdown-item,
padding: 8px 24px;
}
+.dropdown-item:active {
+ color: inherit;
+}
+
.header {
min-width: 240px;
margin-bottom: 10px;
font-size: 18px;
flex-grow: 1;
}
-
- .options {
- display: flex;
- align-items: center;
- font-size: 14px;
- cursor: pointer;
-
- my-global-icon {
- @include apply-svg-color(#333);
-
- width: 16px;
- height: 23px;
- margin-right: 3px;
- }
- }
- }
-
- .options-row {
- margin-top: 10px;
- padding-left: 10px;
-
- > div {
- display: flex;
- align-items: center;
- }
}
}
}
.playlist {
- display: inline-flex;
- cursor: pointer;
+ padding: 0;
+
+ > .primary-row {
+ padding: 8px 10px 8px 24px;
+ }
+
+ > .optional-rows {
+ @include padding-left(24px);
+ }
+
+ &.has-optional-row:hover {
+ background-color: inherit;
+ }
+}
+
+.primary-row,
+.optional-rows > div {
+ display: flex;
my-peertube-checkbox {
- margin-right: 10px;
+ @include margin-right(10px);
align-self: center;
}
.display-name {
display: flex;
align-items: flex-end;
+ flex-grow: 1;
+ margin: 0;
+ font-weight: $font-regular;
+ cursor: pointer;
+ }
+
+ .optional-row-icon {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ cursor: pointer;
+
+ my-global-icon {
+ @include apply-svg-color(#333);
+ @include margin-right(0);
+
+ width: 19px;
+ height: 19px;
+ }
+ }
+
+ my-timestamp-input {
+ @include margin-right($timestamp-margin-right);
+
+ ::ng-deep .ui-inputtext {
+ padding: 0;
+ width: $timestamp-width;
+ }
+ }
+}
+
+.optional-rows {
+ > div {
+ padding: 8px 5px 5px 10px;
+ }
+
+ my-peertube-checkbox {
+ @include margin-right(0 !important);
+
+ display: block;
+ width: $optional-rows-checkbox-width;
+ }
+
+ .labels {
+ @include margin-left($optional-rows-checkbox-width);
+
+ font-size: 13px;
+ color: pvar(--greyForegroundColor);
+ padding-top: 5px;
+ padding-bottom: 0;
+
+ div {
+ @include margin-right($timestamp-margin-right);
- .timestamp-info {
- font-size: 0.9em;
- color: pvar(--greyForegroundColor);
- margin-left: 5px;
+ width: $timestamp-width;
}
}
}
border-top: 1px solid $separator-border-color;
}
-.new-playlist-button {
+.new-playlist-button {
cursor: pointer;
my-global-icon {
@include apply-svg-color(#333);
+ @include margin-right(4px);
position: relative;
left: -1px;
top: -1px;
- margin-right: 4px;
width: 21px;
height: 21px;
}