diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss index 6d59ed834..3b46475b4 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss @@ -3,7 +3,11 @@ .first-step-block { .torrent-or-magnet { - margin: 10px 0; + @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor)); + + &[data-content] { + margin: 1.5rem 0; + } } .form-group-magnet-uri { diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss index 95baa3d0a..a4f87b0b8 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss @@ -2,7 +2,6 @@ @import 'mixins'; .first-step-block { - .form-group-channel { margin-bottom: 20px; margin-top: 35px; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 76e3f3f97..d414704e9 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -774,3 +774,26 @@ } } } + +@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) { + width: 95%; + border-top: .05rem solid $color; + height: .05rem; + text-align: center; + display: block; + position: relative; + + &[data-content] { + margin: .8rem 0; + + &::after { + background: $background; + color: $color; + content: attr(data-content); + display: inline-block; + font-size: .7rem; + padding: 0 .4rem; + transform: translateY(-.65rem); + } + } +}