-// Bootstrap grid utilities require functions, variables and mixins
-@import 'node_modules/bootstrap/scss/functions';
-@import 'node_modules/bootstrap/scss/variables';
-@import 'node_modules/bootstrap/scss/mixins';
-@import 'node_modules/bootstrap/scss/grid';
-
-@import 'variables';
-@import 'mixins';
-
-label,
-my-dynamic-form-field ::ng-deep label {
- font-weight: $font-regular;
- font-size: 100%;
-}
+@use '_variables' as *;
+@use '_mixins' as *;
.peertube-select-container {
@include peertube-select-container(auto);
}
-.title-page a {
- color: pvar(--mainForegroundColor);
-
- &:hover {
- text-decoration: none;
- opacity: .8;
- }
-}
-
my-peertube-checkbox {
display: block;
margin-bottom: 1rem;
height: 100%;
min-height: 300px;
- .form-group {
- margin-bottom: 25px;
- }
-
input {
@include peertube-input-text(100%);
display: block;
}
+}
- .label-tags + span {
- font-size: 15px;
- }
-
- .advanced-settings .form-group {
- margin-bottom: 20px;
- }
+.captions-header {
+ text-align: end;
+ margin-bottom: 1rem;
}
-.captions {
+.caption-entry {
+ display: flex;
+ height: 40px;
+ align-items: center;
+
+ a.caption-entry-label {
+ @include disable-default-a-behaviour;
- .captions-header {
- text-align: right;
- margin-bottom: 1rem;
+ color: #000;
- .create-caption {
- @include create-button;
+ &:hover {
+ opacity: 0.8;
}
}
- .caption-entry {
- display: flex;
- height: 40px;
- align-items: center;
-
- a.caption-entry-label {
- @include disable-default-a-behaviour;
+ .caption-entry-label {
+ @include margin-right(20px);
- flex-grow: 1;
- color: #000;
+ font-weight: bold;
+ min-width: 100px;
+ }
- &:hover {
- opacity: 0.8;
- }
- }
+ .caption-entry-state {
+ @include margin-right(15px);
- .caption-entry-label {
- font-size: 15px;
- font-weight: bold;
+ min-width: 250px;
- margin-right: 20px;
- width: 150px;
+ &.caption-entry-state-create {
+ color: #39CC0B;
}
- .caption-entry-state {
- width: 200px;
-
- &.caption-entry-state-create {
- color: #39CC0B;
- }
-
- &.caption-entry-state-delete {
- color: #FF0000;
- }
+ &.caption-entry-state-delete {
+ color: #FF0000;
}
+ }
- .caption-entry-delete {
- @include peertube-button;
- @include grey-button;
- }
+ .caption-entry-edit {
+ @include peertube-button;
}
- .no-caption {
- text-align: center;
- font-size: 15px;
+ .caption-entry-delete {
+ @include peertube-button;
+ @include grey-button;
}
}
+.no-caption {
+ text-align: center;
+}
+
.submit-container {
- text-align: right;
+ text-align: end;
.message-submit {
- display: inline-block;
- margin-right: 25px;
-
- color: pvar(--greyForegroundColor);
- font-size: 15px;
- }
-
- .submit-button {
- @include peertube-button;
- @include orange-button;
- @include button-with-icon(20px, 1px);
+ @include margin-right(25px);
display: inline-block;
-
- input {
- cursor: inherit;
- background-color: inherit;
- border: none;
- padding: 0;
- outline: 0;
- color: inherit;
- font-weight: $font-semibold;
- }
+ color: pvar(--greyForegroundColor);
}
}
}
}
-// columns for the video
-.col-video-edit {
- @include make-col-ready();
-
- @include media-breakpoint-up(md) {
- @include make-col(7);
-
- & + .col-video-edit {
- @include make-col(5);
- }
- }
-
- @include media-breakpoint-up(xl) {
- @include make-col(8);
+.form-columns {
+ display: grid;
- & + .col-video-edit {
- @include make-col(4);
- }
- }
+ grid-template-columns: 66% 1fr;
+ grid-gap: 30px;
}
-:host-context(.expanded) {
- .col-video-edit {
- @include media-breakpoint-up(md) {
- @include make-col(8);
-
- & + .col-video-edit {
- @include make-col(4);
- }
- }
+@include on-small-main-col {
+ .form-columns {
+ grid-template-columns: 1fr;
}
}