mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-27 18:26:16 -04:00
adjustments to add right-to-left language
This commit is contained in:
parent
8d0e560b1d
commit
117a4d3eb9
8 changed files with 240 additions and 62 deletions
|
@ -100,8 +100,7 @@ header {
|
|||
right: 0;
|
||||
}
|
||||
|
||||
header > a,
|
||||
header > div {
|
||||
header > *:not(:first-child) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
@ -703,7 +702,6 @@ footer .logo {
|
|||
max-width: 15em;
|
||||
text-overflow: ellipsis;
|
||||
cursor: text;
|
||||
margin-left: -1rem;
|
||||
margin-bottom: -6px;
|
||||
padding-bottom: 0.1rem;
|
||||
border-radius: 1.3rem/30%;
|
||||
|
@ -717,11 +715,27 @@ footer .logo {
|
|||
#edit-pen {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-left: -1rem;
|
||||
margin-bottom: -2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html:not([dir="rtl"]) {
|
||||
#display-name,
|
||||
#edit-pen {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
html[dir="rtl"] {
|
||||
#display-name,
|
||||
#edit-pen {
|
||||
margin-right: -1rem;
|
||||
}
|
||||
#edit-pen {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
|
||||
x-dialog x-background {
|
||||
|
@ -829,8 +843,8 @@ x-dialog a {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-key-container > input + * {
|
||||
margin-left: 6px;
|
||||
.input-key-container > input {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.input-key-container.six-chars > input:nth-of-type(4) {
|
||||
|
@ -841,11 +855,11 @@ x-dialog a {
|
|||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
user-select: text;
|
||||
font-size: 50px;
|
||||
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 23px);
|
||||
display: inline-block;
|
||||
text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 23px)));
|
||||
margin: 15px -15px;
|
||||
font-size: 50px;
|
||||
letter-spacing: min(calc((100vw - 80px - 99px) / 100 * 7), 20px);
|
||||
text-indent: calc(0.5 * (11px + min(calc((100vw - 80px - 99px) / 100 * 6), 28px)));
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
.key-qr-code {
|
||||
|
@ -1001,12 +1015,28 @@ x-paper > .button-row > .button {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
x-paper > .button-row > .button:not(:first-child) {
|
||||
border-right: solid 1.5px var(--border-color);
|
||||
html:not([dir="rtl"]) {
|
||||
& x-paper > .button-row > .button:not(:first-child) {
|
||||
border-right: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
& x-paper > .button-row > .button:not(:last-child) {
|
||||
border-left: solid 1.5px var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
x-paper > .button-row > .button:not(:last-child) {
|
||||
border-left: solid 1.5px var(--border-color);
|
||||
html[dir="rtl"] {
|
||||
& x-paper > .button-row > .button:not(:first-child) {
|
||||
border-left: solid 1.5px var(--border-color);
|
||||
}
|
||||
|
||||
& x-paper > .button-row > .button:not(:last-child) {
|
||||
border-right: solid 1.5px var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.language-buttons > button > span {
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
|
||||
.file-description {
|
||||
|
@ -1271,7 +1301,6 @@ button::-moz-focus-inner {
|
|||
--size: max(max(230vw, 230vh), calc(150vh + 150vw));
|
||||
--size-half: calc(var(--size)/2);
|
||||
top: calc(28px - var(--size-half));
|
||||
right: calc(36px - var(--size-half));
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
|
@ -1280,6 +1309,19 @@ button::-moz-focus-inner {
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
html:not([dir="rtl"]) {
|
||||
#about x-background {
|
||||
right: calc(36px - var(--size-half));
|
||||
}
|
||||
}
|
||||
|
||||
html[dir="rtl"] {
|
||||
#about x-background {
|
||||
left: calc(36px - var(--size-half));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Hack such that initial scale(0) isn't animated */
|
||||
#about x-background {
|
||||
will-change: transform;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue