Update base.css

Adding RTL styles to base.css
This commit is contained in:
fim100 2024-08-02 18:42:00 +03:30
parent e61e1e1d3d
commit 48a99aaa15

View file

@ -121,12 +121,19 @@ dt {
.col { .col {
float: left; float: left;
} }
html[dir="rtl"] .col {
float: right;
}
.right { .right {
float: right; float: right;
} }
.col + .col { .col + .col {
padding-left: 20px; padding-left: 20px;
} }
html[dir="rtl"] .col + .col {
padding-right: 20px;
padding-left: 0;
}
.half { .half {
width: 50%; width: 50%;
} }
@ -145,6 +152,10 @@ dt {
.col + .wide { .col + .wide {
padding-left: inherit; padding-left: inherit;
} }
html[dir="rtl"] .col + .wide {
padding-left: initial;
padding-right: inherit;
}
.mshow, .tshow { .mshow, .tshow {
display: none; display: none;
} }
@ -153,6 +164,9 @@ dt {
margin-right: auto; margin-right: auto;
float: none; float: none;
} }
html[dir="rtl"] .center {
float: none;
}
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
@ -279,6 +293,11 @@ button.flat,
line-height: inherit; line-height: inherit;
color: var(--text-color); color: var(--text-color);
} }
html[dir="rtl"] button.flat,
html[dir="rtl"] [type="button"].flat,
html[dir="rtl"] .dark [type="button"].flat {
text-align: right;
}
button.flat:hover, button.flat:hover,
[type="button"].flat:hover, [type="button"].flat:hover,
.dark [type="button"].flat:hover { .dark [type="button"].flat:hover {
@ -430,6 +449,9 @@ input.switch:empty ~ label {
text-shadow: 0 1px rgba(0, 0, 0, 0.1); text-shadow: 0 1px rgba(0, 0, 0, 0.1);
width: 80px; width: 80px;
} }
html[dir="rtl"] input.switch:empty ~ label {
float: right;
}
input.switch:empty ~ label:before, input.switch:empty ~ label:before,
input.switch:empty ~ label:after { input.switch:empty ~ label:after {
position: absolute; position: absolute;
@ -445,6 +467,11 @@ input.switch:empty ~ label:after {
font-weight: bold; font-weight: bold;
background-color: #ededed; background-color: #ededed;
} }
html[dir="rtl"] input.switch:empty ~ label:before,
html[dir="rtl"] input.switch:empty ~ label:after {
right: 0;
left: auto;
}
.dark input.switch:empty ~ label:before, .dark input.switch:empty ~ label:before,
.dark input.switch:empty ~ label:after { .dark input.switch:empty ~ label:after {
background-color: #272c2e; background-color: #272c2e;
@ -458,6 +485,10 @@ input.switch:empty ~ label:after {
border: 1px solid #374E75; border: 1px solid #374E75;
font-weight: bold; font-weight: bold;
} }
html[dir="rtl"] input.switch:empty ~ label:after {
margin-right: 0.1em;
margin-left: auto;
}
.dark input.switch:empty ~ label:after { .dark input.switch:empty ~ label:after {
border: 1px solid #202425; border: 1px solid #202425;
background-color: #2c3233; background-color: #2c3233;
@ -475,6 +506,10 @@ input.switch:checked ~ label:before {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
} }
html[dir="rtl"] .dark input.switch:checked ~ label:before,
html[dir="rtl"] input.switch:checked ~ label:before {
text-align: right;
}
.dark input.switch:checked ~ label:before { .dark input.switch:checked ~ label:before {
border: none; border: none;
background-color: var(--color-accent); background-color: var(--color-accent);
@ -482,6 +517,10 @@ input.switch:checked ~ label:before {
input.switch:checked ~ label:after { input.switch:checked ~ label:after {
margin-left: 3em; margin-left: 3em;
} }
html[dir="rtl"] input.switch:checked ~ label:after {
margin-right: 3em;
margin-left: auto;
}
.button-bar, .umap-multiplechoice { .button-bar, .umap-multiplechoice {
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
@ -558,9 +597,17 @@ input.switch:checked ~ label:after {
line-height: 18px; line-height: 18px;
margin-bottom: 0; margin-bottom: 0;
} }
html[dir="rtl"] .umap-field-iconUrl .action-button,
html[dir="rtl"] .inheritable .define,
html[dir="rtl"] .inheritable .undefine {
float: left;
}
.inheritable .quick-actions { .inheritable .quick-actions {
float: right; float: right;
} }
html[dir="rtl"] .inheritable .quick-actions {
float: left;
}
.inheritable .quick-actions .formbox { .inheritable .quick-actions .formbox {
margin-bottom: 0; margin-bottom: 0;
} }
@ -568,6 +615,10 @@ input.switch:checked ~ label:after {
width: 100px; width: 100px;
margin-right: 5px; margin-right: 5px;
} }
html[dir="rtl"] .inheritable .quick-actions input {
margin-left: 5px;
margin-right: auto;
}
.inheritable .define, .inheritable .define,
.inheritable.undefined .undefine, .inheritable.undefined .undefine,
.inheritable.undefined .show-on-defined { .inheritable.undefined .show-on-defined {
@ -616,24 +667,42 @@ i.info {
.umap-to-polygon:before { .umap-to-polygon:before {
background-position: -80px -48px; background-position: -80px -48px;
} }
html[dir="rtl"] .umap-to-polygon:before {
background-position: -69px -41px;
}
.umap-to-polyline:before { .umap-to-polyline:before {
background-position: -120px -48px; background-position: -120px -48px;
} }
html[dir="rtl"] .umap-to-polyline:before {
background-position: -105px -42px;
}
.umap-clone:before { .umap-clone:before {
background-position: -150px -78px; background-position: -150px -78px;
} }
html[dir="rtl"] .umap-clone:before {
background-position: -139px -78px;
}
.umap-delete:before { .umap-delete:before {
background-position: -32px -8px; background-position: -32px -8px;
} }
html[dir="rtl"] .umap-delete:before {
background-position: -34px -8px;
}
.umap-edit:before { .umap-edit:before {
background-position: -6px -6px; background-position: -6px -6px;
} }
.umap-empty:before { .umap-empty:before {
background-position: -110px -78px; background-position: -110px -78px;
} }
html[dir="rtl"] .umap-empty:before {
background-position: -104px -78px;
}
.umap-download:before { .umap-download:before {
background-position: -77px -78px; background-position: -77px -78px;
} }
html[dir="rtl"] .umap-download:before {
background-position: -68px -78px;
}
.permissions-panel, .permissions-panel,
.umap-upload, .umap-upload,
.umap-share, .umap-share,
@ -714,6 +783,10 @@ i.info {
left: 30px; left: 30px;
position: absolute; position: absolute;
} }
html[dir="rtl"] .umap-pictogram-choice .leaflet-marker-icon {
left: auto;
right: 30px;
}
.umap-color-picker { .umap-color-picker {
clear: both; clear: both;
margin-bottom: 20px; margin-bottom: 20px;
@ -729,6 +802,9 @@ i.info {
cursor: pointer; cursor: pointer;
float: left; float: left;
} }
html[dir="rtl"] .umap-color-picker span {
float: right;
}
input.blur { input.blur {
width: calc(100% - 40px); width: calc(100% - 40px);
display: inline-block; display: inline-block;