diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index bc32d7964..c1c7c686d 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -1,9 +1,3 @@
-// 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';
@@ -57,63 +51,60 @@ my-peertube-checkbox {
}
}
-.captions {
+.captions-header {
+ text-align: right;
+ margin-bottom: 1rem;
+}
- .captions-header {
- text-align: right;
- margin-bottom: 1rem;
+.create-caption {
+ @include create-button;
+}
- .create-caption {
- @include create-button;
+.caption-entry {
+ display: flex;
+ height: 40px;
+ align-items: center;
+
+ a.caption-entry-label {
+ @include disable-default-a-behaviour;
+
+ flex-grow: 1;
+ color: #000;
+
+ &:hover {
+ opacity: 0.8;
}
}
- .caption-entry {
- display: flex;
- height: 40px;
- align-items: center;
-
- a.caption-entry-label {
- @include disable-default-a-behaviour;
-
- flex-grow: 1;
- color: #000;
-
- &:hover {
- opacity: 0.8;
- }
- }
-
- .caption-entry-label {
- font-size: 15px;
- font-weight: bold;
-
- margin-right: 20px;
- width: 150px;
- }
-
- .caption-entry-state {
- width: 200px;
-
- &.caption-entry-state-create {
- color: #39CC0B;
- }
-
- &.caption-entry-state-delete {
- color: #FF0000;
- }
- }
-
- .caption-entry-delete {
- @include peertube-button;
- @include grey-button;
- }
- }
-
- .no-caption {
- text-align: center;
+ .caption-entry-label {
font-size: 15px;
+ font-weight: bold;
+
+ margin-right: 20px;
+ width: 150px;
}
+
+ .caption-entry-state {
+ width: 200px;
+
+ &.caption-entry-state-create {
+ color: #39CC0B;
+ }
+
+ &.caption-entry-state-delete {
+ color: #FF0000;
+ }
+ }
+
+ .caption-entry-delete {
+ @include peertube-button;
+ @include grey-button;
+ }
+}
+
+.no-caption {
+ text-align: center;
+ font-size: 15px;
}
.submit-container {
@@ -143,35 +134,15 @@ p-calendar {
}
}
-// columns for the video
-.col-video-edit {
- @include make-col-ready();
+.form-columns {
+ display: grid;
- @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);
-
- + .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;
}
}