Verified Commit 27bc9586 authored by Chocobozzz's avatar Chocobozzz
Browse files

Bidi support

parent 8beea2d3
Pipeline #422042 failed with stages
in 14 minutes and 12 seconds
...@@ -6,10 +6,11 @@ ...@@ -6,10 +6,11 @@
display: flex; display: flex;
.left { .left {
@include margin-right(10px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-right: 10px;
.vertical-border { .vertical-border {
width: 2px; width: 2px;
...@@ -51,6 +52,9 @@ my-actor-avatar { ...@@ -51,6 +52,9 @@ my-actor-avatar {
} }
.video-author { .video-author {
@include padding-right(6px);
@include padding-left(6px);
height: 20px; height: 20px;
background-color: #888888; background-color: #888888;
border-radius: 12px; border-radius: 12px;
...@@ -60,8 +64,6 @@ my-actor-avatar { ...@@ -60,8 +64,6 @@ my-actor-avatar {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
padding-right: 6px;
padding-left: 6px;
color: #fff !important; color: #fff !important;
} }
...@@ -86,9 +88,10 @@ my-actor-avatar { ...@@ -86,9 +88,10 @@ my-actor-avatar {
} }
.comment-date { .comment-date {
@include margin-left(5px);
font-size: 90%; font-size: 90%;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
margin-left: 5px;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
...@@ -129,9 +132,10 @@ my-actor-avatar { ...@@ -129,9 +132,10 @@ my-actor-avatar {
::ng-deep .dropdown-toggle, ::ng-deep .dropdown-toggle,
.comment-action-reply { .comment-action-reply {
@include margin-right(10px);
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
cursor: pointer; cursor: pointer;
margin-right: 10px;
&:hover, &:hover,
&:active, &:active,
...@@ -162,25 +166,25 @@ my-video-comment-add { ...@@ -162,25 +166,25 @@ my-video-comment-add {
} }
.left { .left {
margin-right: 6px; @include margin-right(6px);
} }
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.children { .children {
margin-left: -10px; @include margin-left(-10px);
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.children { .children {
margin-left: -20px; @include margin-left(-20px);
.left { .left {
align-items: flex-start; align-items: flex-start;
.vertical-border { .vertical-border {
margin-left: 2px; @include margin-left(2px);
} }
} }
} }
...@@ -189,7 +193,7 @@ my-video-comment-add { ...@@ -189,7 +193,7 @@ my-video-comment-add {
flex-direction: column; flex-direction: column;
.comment-date { .comment-date {
margin-left: 0; @include margin-left(0);
} }
} }
} }
...@@ -13,19 +13,21 @@ ...@@ -13,19 +13,21 @@
.glyphicon, .glyphicon,
.comment-thread-loading { .comment-thread-loading {
margin-right: 5px; @include margin-right(5px);
display: inline-block; display: inline-block;
font-size: 13px; font-size: 13px;
} }
.title-block { .title-block {
.title-page { .title-page {
margin-right: 0; @include margin-right(0);
} }
my-feed { my-feed {
@include margin-left(5px);
display: inline-block; display: inline-block;
margin-left: 5px;
opacity: 0; opacity: 0;
transition: ease-in .2s opacity; transition: ease-in .2s opacity;
width: 12px; width: 12px;
...@@ -47,7 +49,7 @@ ...@@ -47,7 +49,7 @@
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.view-replies { .view-replies {
margin-left: 46px; @include margin-left(46px);
} }
} }
......
...@@ -10,8 +10,9 @@ ...@@ -10,8 +10,9 @@
.title-page.active, .title-page.active,
.title-page.title-page-single { .title-page.title-page-single {
@include margin-right(.5rem !important);
margin-bottom: unset; margin-bottom: unset;
margin-right: .5rem !important;
} }
} }
...@@ -20,14 +21,16 @@ ...@@ -20,14 +21,16 @@
} }
.title-page-autoplay { .title-page-autoplay {
@include margin-left(auto);
display: flex; display: flex;
width: max-content; width: max-content;
height: max-content; height: max-content;
align-items: center; align-items: center;
margin-left: auto;
span { span {
margin-right: 0.3rem; @include margin-right(0.3rem);
text-transform: uppercase; text-transform: uppercase;
font-size: 85%; font-size: 85%;
font-weight: 600; font-weight: 600;
......
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
.wrapper { .wrapper {
@include actor-avatar-size(35px); @include actor-avatar-size(35px);
@include margin-right(5px);
position: relative; position: relative;
margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
&.generic-channel { &.generic-channel {
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
display: flex; display: flex;
.playlist-by { .playlist-by {
margin-right: 5px; @include margin-right(5px);
} }
.playlist-index span:first-child::after { .playlist-index span:first-child::after {
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
margin: 10px 0; margin: 10px 0;
my-global-icon:not(:last-child) { my-global-icon:not(:last-child) {
margin-right: .5rem; @include margin-right(.5rem);
} }
my-global-icon { my-global-icon {
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
::ng-deep { ::ng-deep {
.video { .video {
.position { .position {
margin-right: 0; @include margin-right(0);
} }
.video-info { .video-info {
......
...@@ -152,7 +152,7 @@ $video-info-margin-left: 44px; ...@@ -152,7 +152,7 @@ $video-info-margin-left: 44px;
.video-info-name { .video-info-name {
@include peertube-word-wrap; @include peertube-word-wrap;
margin-right: 30px; @include margin-right(30px);
min-height: 40px; // Align with the action buttons min-height: 40px; // Align with the action buttons
font-size: 27px; font-size: 27px;
font-weight: $font-semibold; font-weight: $font-semibold;
...@@ -167,9 +167,10 @@ $video-info-margin-left: 44px; ...@@ -167,9 +167,10 @@ $video-info-margin-left: 44px;
} }
.video-info-date-views { .video-info-date-views {
align-self: start; @include margin-right(10px);
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; align-self: start;
font-size: 1em; font-size: 1em;
} }
...@@ -209,15 +210,19 @@ $video-info-margin-left: 44px; ...@@ -209,15 +210,19 @@ $video-info-margin-left: 44px;
} }
my-subscribe-button { my-subscribe-button {
margin-left: 5px; @include margin-left(5px);
} }
} }
.video-actions-rates { .video-actions-rates {
margin: 0 0 10px; @include margin-left(auto);
@include margin-right(0);
margin-top: 0;
margin-bottom: 10px;
align-items: start; align-items: start;
width: max-content; width: max-content;
margin-left: auto;
.video-actions { .video-actions {
height: 40px; // Align with the title height: 40px; // Align with the title
...@@ -227,7 +232,7 @@ $video-info-margin-left: 44px; ...@@ -227,7 +232,7 @@ $video-info-margin-left: 44px;
.action-button:not(:first-child), .action-button:not(:first-child),
.action-dropdown, .action-dropdown,
my-video-actions-dropdown { my-video-actions-dropdown {
margin-left: 5px; @include margin-left(5px);
} }
::ng-deep.action-button { ::ng-deep.action-button {
...@@ -305,7 +310,7 @@ $video-info-margin-left: 44px; ...@@ -305,7 +310,7 @@ $video-info-margin-left: 44px;
} }
.icon-text { .icon-text {
margin-left: 3px; @include margin-left(3px);
} }
} }
} }
...@@ -341,8 +346,11 @@ $video-info-margin-left: 44px; ...@@ -341,8 +346,11 @@ $video-info-margin-left: 44px;
} }
.video-info-description { .video-info-description {
margin: 20px 0; @include margin-left($video-info-margin-left);
margin-left: $video-info-margin-left; @include margin-right(0);
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px; font-size: 15px;
.video-info-description-html { .video-info-description-html {
...@@ -355,7 +363,7 @@ $video-info-margin-left: 44px; ...@@ -355,7 +363,7 @@ $video-info-margin-left: 44px;
.glyphicon, .glyphicon,
.description-loading { .description-loading {
margin-left: 3px; @include margin-left(3px);
} }
.description-loading { .description-loading {
...@@ -376,7 +384,7 @@ $video-info-margin-left: 44px; ...@@ -376,7 +384,7 @@ $video-info-margin-left: 44px;
} }
.video-attributes { .video-attributes {
margin-left: $video-info-margin-left; @include margin-left($video-info-margin-left);
} }
.video-attributes .video-attribute { .video-attributes .video-attribute {
...@@ -385,8 +393,9 @@ $video-info-margin-left: 44px; ...@@ -385,8 +393,9 @@ $video-info-margin-left: 44px;
margin-bottom: 12px; margin-bottom: 12px;
.video-attribute-label { .video-attribute-label {
@include padding-right(5px);
min-width: 142px; min-width: 142px;
padding-right: 5px;
display: inline-block; display: inline-block;
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
...@@ -413,8 +422,9 @@ $video-info-margin-left: 44px; ...@@ -413,8 +422,9 @@ $video-info-margin-left: 44px;
} }
my-recommended-videos { my-recommended-videos {
@include padding-left(15px);
display: block; display: block;
padding-left: 15px;
min-width: 250px; min-width: 250px;
} }
...@@ -432,14 +442,15 @@ my-video-comments { ...@@ -432,14 +442,15 @@ my-video-comments {
@media screen and (max-width: $small-view) { @media screen and (max-width: $small-view) {
.privacy-concerns { .privacy-concerns {
margin-left: $menu-width - 15px; // Menu is absolute @include margin-left($menu-width - 15px); // Menu is absolute
} }
} }
:host-context(.expanded) { :host-context(.expanded) {
.privacy-concerns { .privacy-concerns {
@include margin-left(-15px);
width: 100%; width: 100%;
margin-left: -15px;
} }
} }
...@@ -473,8 +484,9 @@ my-video-comments { ...@@ -473,8 +484,9 @@ my-video-comments {
} }
.privacy-concerns-button { .privacy-concerns-button {
@include margin-left(auto);
padding: 5px 8px 5px 7px; padding: 5px 8px 5px 7px;
margin-left: auto;
border-radius: 3px; border-radius: 3px;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
...@@ -487,8 +499,9 @@ my-video-comments { ...@@ -487,8 +499,9 @@ my-video-comments {
} }
.privacy-concerns-okay { .privacy-concerns-okay {
@include margin-left(10px);
background-color: pvar(--mainColor); background-color: pvar(--mainColor);
margin-left: 10px;
} }
} }
...@@ -525,7 +538,7 @@ my-video-comments { ...@@ -525,7 +538,7 @@ my-video-comments {
} }
my-recommended-videos { my-recommended-videos {
padding-left: 0; @include padding-left(0);
} }
} }
......
...@@ -53,17 +53,18 @@ ...@@ -53,17 +53,18 @@
my-actor-avatar { my-actor-avatar {
@include actor-avatar-size(28px); @include actor-avatar-size(28px);
@include margin-right(8px);
font-size: initial; font-size: initial;
margin-right: 8px;
} }
} }
.followers { .followers {
@include margin-left(10px);
color: pvar(--greyForegroundColor); color: pvar(--greyForegroundColor);
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
margin-left: 10px;
position: relative; position: relative;
top: 2px; top: 2px;
} }
...@@ -87,8 +88,9 @@ ...@@ -87,8 +88,9 @@
overflow: initial; overflow: initial;
.section-title { .section-title {
@include margin-left(10px);
font-size: 17px; font-size: 17px;
margin-left: 10px;
} }
} }
} }
@import '_mixins';
.btn-group label { .btn-group label {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 9999px !important; border-radius: 9999px !important;
...@@ -5,13 +7,14 @@ ...@@ -5,13 +7,14 @@
opacity: .8;