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
......@@ -44,7 +44,7 @@ $timestamp-margin-right: 10px;
}
> .optional-rows {
padding-left: 24px;
@include padding-left(24px);
}
&.has-optional-row:hover {
......@@ -57,7 +57,7 @@ $timestamp-margin-right: 10px;
display: flex;
my-peertube-checkbox {
margin-right: 10px;
@include margin-right(10px);
align-self: center;
}
......@@ -78,15 +78,15 @@ $timestamp-margin-right: 10px;
my-global-icon {
@include apply-svg-color(#333);
@include margin-right(0);
width: 19px;
height: 19px;
margin-right: 0;
}
}
my-timestamp-input {
margin-right: $timestamp-margin-right;
@include margin-right($timestamp-margin-right);
::ng-deep .ui-inputtext {
padding: 0;
......@@ -101,20 +101,23 @@ $timestamp-margin-right: 10px;
}
my-peertube-checkbox {
@include margin-right(0 !important);
display: block;
width: $optional-rows-checkbox-width;
margin-right: 0 !important;
}
.labels {
margin-left: $optional-rows-checkbox-width;
@include margin-left($optional-rows-checkbox-width);
font-size: 13px;
color: pvar(--greyForegroundColor);
padding-top: 5px;
padding-bottom: 0;
div {
margin-right: $timestamp-margin-right;
@include margin-right($timestamp-margin-right);
width: $timestamp-width;
}
}
......@@ -131,11 +134,11 @@ $timestamp-margin-right: 10px;
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;
}
......
......@@ -17,8 +17,9 @@ my-video-thumbnail {
my-video-thumbnail,
.fake-thumbnail {
@include margin-right(10px);
display: flex; // Avoids an issue with line-height that adds space below the element
margin-right: 10px;
}
.video {
......@@ -60,8 +61,9 @@ my-video-thumbnail,
cursor: pointer;
.position {
@include margin-right(10px);
font-weight: $font-semibold;
margin-right: 10px;
color: pvar(--greyForegroundColor);
min-width: 25px;
......@@ -101,8 +103,9 @@ my-video-thumbnail,
.more,
my-edit-button {
@include margin-left(auto);
justify-self: flex-end;
margin-left: auto;
cursor: pointer;
min-width: 24px;
}
......@@ -135,8 +138,9 @@ my-video-thumbnail,
}
.timestamp-options {
@include padding-left(35px);
padding-top: 0;
padding-left: 35px;
margin-bottom: 15px;
> div {
......@@ -146,7 +150,7 @@ my-video-thumbnail,
}
my-peertube-checkbox {
margin-right: 5px;
@include margin-right(5px);
}
input {
......
......@@ -88,9 +88,10 @@
display: flex;
.miniature-thumbnail {
@include margin-right(10px);
width: var(--rowThumbnailWidth);
height: var(--rowThumbnailHeight);
margin-right: 10px;
}
}
......
......@@ -65,6 +65,9 @@ body {
// Allow to disable the scrollbar instead of hide it when the content fit the body
// And not move the content and header horizontally sticked to right when the content is updating
overflow-y: scroll;
// Fix "reboot" style that set text-align: left
text-align: start;
}
::selection {
......@@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
max-width: initial;
}
......@@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
}
.main-col {
margin-left: $menu-width;
@include margin-left($menu-width);
width: calc(100% - #{$menu-width});
outline: none;
.margin-content {
margin-left: pvar(--horizontalMarginContent);
margin-right: pvar(--horizontalMarginContent);
margin: 0 pvar(--horizontalMarginContent);
flex-grow: 1;
}
......@@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
width: 100%;
display: flex;
align-items: center;
padding-left: pvar(--horizontalMarginContent);
padding-right: pvar(--horizontalMarginContent);
padding: 0 pvar(--horizontalMarginContent);
height: $sub-menu-height;
margin-bottom: $sub-menu-margin-bottom;
overflow-x: auto;
......@@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
--horizontalMarginContent: #{$expanded-horizontal-margins};
--mainColWidth: 100vw;
margin-left: 0;
@include margin-left(0);
width: 100%;
}
......@@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
.title-page {
@include disable-default-a-behaviour;
@include margin-right(55px);
opacity: 0.6;
color: pvar(--mainForegroundColor);
font-size: 16px;
display: inline-block;
margin-right: 55px;
font-weight: $font-semibold;
border-bottom: 2px solid transparent;
......@@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
}
@media screen and (max-width: $mobile-view) {
margin-right: 15px;
@include margin-left(15px);
}
}
......@@ -365,8 +366,7 @@ ngx-loading-bar {
--horizontalMarginContent: #{$expanded-horizontal-margins / 3};
.sub-menu {
padding-left: 50px;
padding-right: 50px;
padding: 0 50px;
.title-page {
font-size: 17px;
......@@ -386,12 +386,11 @@ ngx-loading-bar {
.main-col.expanded {
--horizontalMarginContent: 15px;
margin-left: 0;
@include margin-left(0);
.sub-menu {
width: 100vw;
padding-left: 15px;
padding-right: 15px;
padding: 0 15px;
margin-bottom: $sub-menu-margin-bottom-small-view;
overflow-x: auto;
}
......@@ -405,7 +404,8 @@ ngx-loading-bar {
flex-direction: column;
.form-sub-title {
margin-right: 0 !important;
@include margin-right(0 !important);
margin-bottom: 10px;
text-align: center;
}
......@@ -419,7 +419,7 @@ ngx-loading-bar {
width: 100%;
a {
margin-left: 5px;
@include margin-left(5px);
}
}
}
......
......@@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
font-size: 15px;
.dropdown-header {
padding-left: 1rem;
@include padding-left(1rem);
}
.dropdown-item {
......@@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
}
.modal-dialog {
text-align: left;
text-align: start;
&:not(.modal-lg):not(.modal-xl) {
min-width: 500px;
......@@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
.inputs {
margin-bottom: 0;
text-align: right;
text-align: end;
> .peertube-button:not(:first-child) {
margin-left: 10px;
@include margin-left(10px);
}
}
}
......@@ -342,7 +342,7 @@ ngb-tooltip-window {
position: relative;
input {
padding-right: 1.5rem !important;
@include padding-right(1.5rem !important);
}
.form-control-clear {
......@@ -392,3 +392,22 @@ ngb-tooltip-window {
border-left-color: pvar(--mainColor);
}
}
// Override these properties for Bidi support
@each $size, $length in $spacers {
.ml-#{$size} {
@include margin-left($length);
}
.mr-#{$size} {
@include margin-right($length);
}
.pl-#{$size} {
@include padding-left($length);
}
.pr-#{$size} {
@include padding-right($length);
}
}
......@@ -30,7 +30,8 @@
}
> div {
margin-left: $img-margin;
@include margin-left($img-margin);
min-width: 1px;
}
......
......@@ -14,8 +14,9 @@
}
&.blur-filter {
@include padding-left(4px);
filter: blur(3px);
padding-left: 4px;
}
}
......@@ -102,11 +103,11 @@
--gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
@if $margin {
margin-left: var(--gridVideosMiniatureMargins) !important;
margin-right: var(--gridVideosMiniatureMargins) !important;
@include margin-left(var(--gridVideosMiniatureMargins) !important);
@include margin-right(var(--gridVideosMiniatureMargins) !important);
} @else {
padding-left: var(--gridVideosMiniatureMargins) !important;
padding-right: var(--gridVideosMiniatureMargins) !important;
@include padding-left(var(--gridVideosMiniatureMargins) !important);
@include padding-right(var(--gridVideosMiniatureMargins) !important);
}
@media screen and (max-width: $mobile-view) {
......
......@@ -84,6 +84,7 @@
}
@mixin peertube-input-text($width) {
padding: 0 15px;
display: inline-block;
height: $button-height;
width: $width;
......@@ -91,8 +92,6 @@
background-color: pvar(--inputBackgroundColor);
border: 1px solid #C6C6C6;
border-radius: 3px;
padding-left: 15px;
padding-right: 15px;
font-size: 15px;
&::placeholder {
......@@ -257,6 +256,8 @@
}
@mixin peertube-button {
@include padding(0, 17px, 0, 13px);
border: 0;
font-weight: $font-semibold;
font-size: 15px;
......@@ -265,7 +266,6 @@
// FIXME: because of primeng that redefines border-radius of all input[type="..."]
border-radius: 3px !important;
text-align: center;
padding: 0 17px 0 13px;
cursor: pointer;
}
......@@ -290,9 +290,10 @@
line-height: normal !important;
my-global-icon {
@include margin-right($margin-right);
position: relative;
width: $width;
margin-right: $margin-right;
top: $top;
}
}
......@@ -310,7 +311,7 @@
width: 100%;
height: 100%;
font-size: 100px;
text-align: right;
text-align: end;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
......@@ -428,6 +429,8 @@
cursor: pointer;
&::before {
@include margin-right(10px);
position: relative;
top: -2px;
content: '';
......@@ -440,7 +443,6 @@
vertical-align: middle;
cursor: pointer;
text-align: center;
margin-right: 10px;
}
}
......@@ -500,9 +502,10 @@
}
+ span + span {
@include margin-left(5px);
font-size: 15px;
font-weight: $font-regular;
margin-left: 5px;
cursor: pointer;
display: inline;
}
......@@ -635,10 +638,10 @@
padding: 6px 15px;
my-global-icon {
@include margin-right(10px);
width: 22px;
opacity: .7;
margin-right: 10px;
position: relative;
top: -2px;
}
......@@ -705,10 +708,12 @@
}
+ .breadcrumb-item {
padding-left: 0.5rem;
@include padding-left(0.5rem);
&::before {
@include padding-right(0.5rem);
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: '/';
}
......@@ -822,8 +827,8 @@
}
my-actor-avatar {
margin-left: -.4rem;
margin-right: .2rem;
@include margin-left(-.4rem);
@include margin-right(.2rem);
}
&.two-lines {
......@@ -836,11 +841,11 @@
}
div {
margin: 0 .1rem;
display: flex;
flex-direction: column;
height: $avatar-height;
margin-left: .1rem;
margin-right: .1rem;
justify-content: center;
}
}
......@@ -875,14 +880,14 @@
> span > my-global-icon,
> my-global-icon {
margin-right: 10px;
@include margin-right(10px);
width: 24px;
height: 24px;
vertical-align: top;
}
.badge {
margin-left: 7px;
@include margin-left(7px);
vertical-align: top;
}
}
......@@ -930,3 +935,59 @@
}
}
}
@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
@include margin-left($inline-start);
@include margin-right($inline-end);
margin-top: $block-start;
margin-bottom: $block-end;
}
@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
@include padding-left($inline-start);
@include padding-right($inline-end);
padding-top: $block-start;
padding-bottom: $block-end;
}
@mixin margin-left ($value) {
@supports (margin-inline-start: $value) {
margin-inline-start: $value;
}
@supports not (margin-inline-start: $value) {
margin-left: $value;
}
}
@mixin margin-right ($value) {
@supports (margin-inline-end: $value) {
margin-inline-end: $value;
}
@supports not (margin-inline-end: $value) {
margin-right: $value;
}
}
@mixin padding-left ($value) {
@supports (padding-inline-start: $value) {
padding-inline-start: $value;
}
@supports not (padding-inline-start: $value) {
padding-left: $value;
}
}
@mixin padding-right ($value) {
@supports (padding-inline-end: $value) {
padding-inline-end: $value;
}
@supports not (padding-inline-end: $value) {
padding-right: $value;
}
}
......@@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
}
.ng-arrow-wrapper {
padding-right: 12px;
@include padding-right(12px);
}
&.ng-select-single .ng-value-container .ng-value {
......@@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
}
&.ng-select-multiple .ng-select-container .ng-value-container {
padding-left: 12px;
@include padding-left(12px);
.ng-value { /* stylelint-disable-line */
margin-left: 3px;
@include margin-left(12px);
}
}
}
......@@ -9,13 +9,14 @@
}
.vjs-bezel {
@include margin-left(-26px);
position: absolute;
left: 50%;
top: 50%;
width: 52px;
height: 52px;
z-index: 19;
margin-left: -26px;
margin-top: -26px;
background: rgba(0, 0, 0, .5);
border-radius: 26px;
......
......@@ -25,7 +25,7 @@ $context-menu-width: 350px;
cursor: pointer;
font-size: 1em;
padding: 8px 16px;
text-align: left;
text-align: start;
text-transform: none;
&:hover {
......@@ -35,6 +35,8 @@ $context-menu-width: 350px;
[class^='vjs-icon-'] {
$icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
@include margin-right(0.8rem !important);
display: inline-flex;
position: relative;
top: 2px;
......@@ -43,7 +45,6 @@ $context-menu-width: 350px;