mirror of
https://github.com/signalapp/Signal-Desktop.git
synced 2026-05-08 08:58:38 +01:00
RTL
This commit is contained in:
@@ -124,7 +124,7 @@ $emoji-height: 64px;
|
||||
width: $width - (2 * $guide-offset);
|
||||
height: $height - (2 * $guide-offset);
|
||||
position: absolute;
|
||||
left: $guide-offset - $border-width;
|
||||
inset-inline-start: $guide-offset - $border-width;
|
||||
top: $guide-offset - $border-width;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -132,7 +132,7 @@ $emoji-height: 64px;
|
||||
width: $emoji-width;
|
||||
height: $emoji-height;
|
||||
position: absolute;
|
||||
left: calc(($width - $emoji-width) / 2);
|
||||
inset-inline-start: calc(($width - $emoji-width) / 2);
|
||||
top: calc(($height - $emoji-height) / 2);
|
||||
}
|
||||
}
|
||||
@@ -140,7 +140,7 @@ $emoji-height: 64px;
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
@@ -169,7 +169,7 @@ $emoji-height: 64px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
inset-inline-end: 6px;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
@@ -202,7 +202,8 @@ $emoji-height: 64px;
|
||||
|
||||
.emoji-name-input {
|
||||
width: 100%;
|
||||
padding: 7px 8px;
|
||||
padding-block: 7px;
|
||||
padding-inline: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -30,7 +30,8 @@
|
||||
|
||||
.title-bar {
|
||||
height: 36px;
|
||||
padding: 9px 16px;
|
||||
padding-block: 9px;
|
||||
padding-inline: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -61,7 +62,8 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 0 16px 0 12px;
|
||||
padding-block: 0;
|
||||
padding-inline: 12px 16px;
|
||||
overflow: auto;
|
||||
justify-items: center;
|
||||
|
||||
@@ -76,7 +78,8 @@
|
||||
}
|
||||
|
||||
.meta {
|
||||
padding: 18px 16px;
|
||||
padding-block: 18px;
|
||||
padding-inline: 16px;
|
||||
display: flex;
|
||||
|
||||
@include light-theme {
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
border: none;
|
||||
min-width: 80px;
|
||||
height: 36px;
|
||||
padding: 0 25px;
|
||||
padding-block: 0;
|
||||
padding-inline: 25px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -89,7 +90,8 @@
|
||||
composes: base;
|
||||
height: 28px;
|
||||
border-radius: 15px;
|
||||
padding: 0 17px;
|
||||
padding-block: 0;
|
||||
padding-inline: 17px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
|
||||
@@ -9,7 +9,8 @@
|
||||
max-width: 468px;
|
||||
width: 100%;
|
||||
height: 138px;
|
||||
padding: 16px 16px 8px 16px;
|
||||
padding-block: 16px 8px;
|
||||
padding-inline: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
@@ -70,7 +71,8 @@
|
||||
composes: base;
|
||||
height: 28px;
|
||||
border-radius: 15px;
|
||||
padding: 0 17px;
|
||||
padding-block: 0;
|
||||
padding-inline: 17px;
|
||||
|
||||
@include light-theme() {
|
||||
color: $color-gray-90;
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
flex-grow: 1;
|
||||
height: 36px;
|
||||
line-height: 34px;
|
||||
padding: 0 12px;
|
||||
padding-block: 0;
|
||||
padding-inline: 12px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
|
||||
@@ -24,7 +24,8 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 16px 0 0 0;
|
||||
margin-block: 16px 0;
|
||||
margin-inline: 0;
|
||||
font-family: $inter;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 11px;
|
||||
margin-inline-start: 11px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,8 @@
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 12px;
|
||||
padding-block: 0;
|
||||
padding-inline: 12px;
|
||||
border-radius: 4px;
|
||||
background-color: transparent;
|
||||
font-size: 14px;
|
||||
@@ -47,7 +48,8 @@
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
padding: 0 11px;
|
||||
padding-block: 0;
|
||||
padding-inline: 11px;
|
||||
|
||||
@include light-theme() {
|
||||
border: 2px solid $color-ultramarine;
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
|
||||
.base {
|
||||
background-color: $color-ultramarine;
|
||||
padding: 6px 12px;
|
||||
padding-block: 6px;
|
||||
padding-inline: 12px;
|
||||
border-radius: 18px;
|
||||
color: $color-white-alpha-90;
|
||||
font: {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-left: 6px;
|
||||
margin-inline-start: 6px;
|
||||
font: {
|
||||
size: 11px;
|
||||
family: $inter;
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.base {
|
||||
padding: 6px 12px;
|
||||
padding-block: 6px;
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.image {
|
||||
|
||||
@@ -12,9 +12,11 @@
|
||||
margin-bottom: 30px;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
padding: 0 64px;
|
||||
padding-block: 0;
|
||||
padding-inline: 64px;
|
||||
@include small-screen() {
|
||||
padding: 0 32px;
|
||||
padding-block: 0;
|
||||
padding-inline: 32px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -32,11 +34,12 @@
|
||||
|
||||
.guidelines {
|
||||
text-decoration: none;
|
||||
padding: 12px 16px;
|
||||
padding-block: 12px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.grow {
|
||||
|
||||
@@ -24,7 +24,8 @@
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
padding: 12px 12px 3px 12px;
|
||||
padding-block: 12px 3px;
|
||||
padding-inline: 12px;
|
||||
}
|
||||
|
||||
.frame-light {
|
||||
@@ -77,7 +78,7 @@
|
||||
.arrow-left {
|
||||
composes: arrow;
|
||||
border-width: 8px 8px 8px 0;
|
||||
left: -8px;
|
||||
inset-inline-start: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: transparent $color-white transparent transparent;
|
||||
@@ -91,7 +92,7 @@
|
||||
.arrow-right {
|
||||
composes: arrow;
|
||||
border-width: 8px 0 8px 8px;
|
||||
right: -8px;
|
||||
inset-inline-end: -8px;
|
||||
|
||||
@include light-theme() {
|
||||
border-color: transparent transparent transparent $color-white;
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
@import '../fonts.scss';
|
||||
|
||||
.base {
|
||||
padding: 8px 12px;
|
||||
padding-block: 8px;
|
||||
padding-inline: 12px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
|
||||
|
||||
@@ -46,7 +46,8 @@ button.grey {
|
||||
border-radius: 5px;
|
||||
border: solid 1px $color-gray-25;
|
||||
cursor: pointer;
|
||||
margin: 1em auto;
|
||||
margin-block: 1em;
|
||||
margin-inline: auto;
|
||||
padding: 1em;
|
||||
font-family: inherit;
|
||||
|
||||
|
||||
@@ -31,10 +31,12 @@
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 64px;
|
||||
padding-block: 0;
|
||||
padding-inline: 64px;
|
||||
|
||||
@include small-screen() {
|
||||
padding: 0 32px;
|
||||
padding-block: 0;
|
||||
padding-inline: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,13 +49,15 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 16px 64px;
|
||||
margin-block: 16px;
|
||||
margin-inline: 64px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@include small-screen() {
|
||||
margin: 16px 32px;
|
||||
margin-block: 16px;
|
||||
margin-inline: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,12 +68,19 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
.toaster {
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0px);
|
||||
inset-inline-start: 50%;
|
||||
&:dir(ltr) {
|
||||
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
||||
transform: translate(-50%, 0px);
|
||||
}
|
||||
&:dir(rtl) {
|
||||
// stylelint-disable-next-line declaration-property-value-disallowed-list
|
||||
transform: translate(50%, 0px)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
.edit-button {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
inset-inline-end: 6px;
|
||||
content: '';
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -111,7 +111,7 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
inset-inline-start: 5px;
|
||||
mask-image: url(/src/assets/icons/compose-outline-24.svg);
|
||||
mask-size: 22px;
|
||||
-webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);
|
||||
|
||||
@@ -27,5 +27,6 @@
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin: 24px 0;
|
||||
margin-block: 24px;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user