[enh] simple theme: RTL support

* mirror all inline SVGs so that direction SVGs display correctly on RTL
* set the bold list element in info box to RTL so the colon gets displayed on the right side
* set correct .ltr function for the left border on the search button in #q
* move text to the right in autocomplete
* move search form in lign with result article on RTL
* add the correct padding for img thumbnails in categories like music on RTL
* apply RTL to result table for map results
* align text in tables part of /preferences on RTL
* move burger menu on index page to the left on RTL
* fix positioning of drop down arrow on select boxes on RTL
* align result URL on the right (written LTR)
* align vim hotkeys help on the left since it is not translated
* image detail:
  * labels (author, format, URL, etc...) are written on the right,
    values are on the left.
  * URL are written LTR and overflow on the right
This commit is contained in:
Alexandre Flament 2022-01-13 21:36:08 +01:00
parent 2084d7b1ed
commit d000288ad0
10 changed files with 311 additions and 74 deletions

View file

@ -8,7 +8,9 @@
}
#search_header {
padding: 1.5em 2em 0 @results-offset - 3rem;
padding-top: 1.5em;
.ltr-padding-right(2em);
.ltr-padding-left(@results-offset - 3rem);
margin: 0;
background: var(--color-header-background);
border-bottom: 1px solid var(--color-header-border);
@ -24,7 +26,7 @@
.category {
display: inline-block;
position: relative;
margin-right: 1rem;
.ltr-margin-right(1rem);
padding: 0;
input {
@ -127,11 +129,11 @@
#q {
outline: medium none;
padding-left: 12px;
padding-right: 0 !important;
border-right: none;
.ltr-padding-left(12px);
.ltr-padding-right(0) !important;
.ltr-border-right(none);
width: @search-width;
border-radius: 10px 0 0 10px;
.ltr-rounded-left-corners();
}
#q::-ms-clear,
@ -140,8 +142,8 @@
}
#send_search {
border-left: none;
border-radius: 0 10px 10px 0;
.ltr-border-left(none);
.ltr-rounded-right-corners();
&:hover {
cursor: pointer;
@ -153,12 +155,15 @@
.no-js #clear_search,
.no-js #send_search {
width: auto !important;
border-left: 1px solid var(--color-search-border);
.ltr-border-left(1px solid var(--color-search-border));
padding: 10px;
}
.search_filters {
margin: 0.6rem 0 0 @results-offset + 0.6rem;
margin-top: 0.6rem;
.ltr-margin-right(0);
margin-bottom: 0;
.ltr-margin-left(@results-offset + 0.6rem);
select {
background-color: inherit;
@ -177,7 +182,10 @@
}
.search_filters {
margin: 0.6rem 0 0 @results-tablet-offset + 3rem;
margin-top: 0.6rem;
.ltr-margin-right(0);
margin-bottom: 0;
.ltr-margin-left(@results-tablet-offset + 3rem);
}
#categories {
@ -204,7 +212,7 @@
#categories {
width: 100%;
text-align: left;
.ltr-text-align-left();
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
@ -243,7 +251,7 @@
#main_results #q:placeholder-shown ~ #send_search {
margin-right: 2.6rem;
transition: margin-right 0.1s;
transition: margin-right 0.1s; // FIX RTL
}
.search_filters {