mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 09:12:52 +00:00
Move the rest of the RTL rules to be next to the rules they override
This commit is contained in:
Bryan Housel
402
css/80_app.css
402
css/80_app.css
@@ -225,6 +225,12 @@ input[type="radio"] {
|
||||
margin-right: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
[dir='rtl'] input[type="checkbox"],
|
||||
[dir='rtl'] input[type="radio"] {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* remove bottom border radius when combobox is open */
|
||||
.combobox + * textarea:focus,
|
||||
@@ -453,23 +459,37 @@ button.minor:hover {
|
||||
.button-wrap:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
[dir='rtl'] .button-wrap:last-of-type {
|
||||
padding-left: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.joined button {
|
||||
border-radius:0;
|
||||
border-right: 1px solid rgba(0,0,0,.5);
|
||||
}
|
||||
[dir='rtl'] .joined button {
|
||||
border-left: 1px solid rgba(0,0,0,.5);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.fillL .joined button {
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
|
||||
.joined button:first-child {
|
||||
border-radius:4px 0 0 4px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
[dir='rtl'] .joined button:first-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.joined button:last-child {
|
||||
border-right-width: 0;
|
||||
border-radius:0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
[dir='rtl'] .joined button:last-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
button.action {
|
||||
@@ -516,6 +536,10 @@ button.save.has-count .count {
|
||||
margin: auto;
|
||||
margin-left: 9.3333%;
|
||||
}
|
||||
[dir='rtl'] button.save.has-count .count {
|
||||
margin-left: auto;
|
||||
margin-right: 8%;
|
||||
}
|
||||
|
||||
button.save.has-count .count::before {
|
||||
content: "";
|
||||
@@ -532,6 +556,12 @@ button.save.has-count .count::before {
|
||||
border-right-style: solid;
|
||||
border-right-color: inherit;
|
||||
}
|
||||
[dir='rtl'] button.save.has-count .count::before {
|
||||
border-left: 6px solid rgba(255,255,255,.5);
|
||||
border-right: none;
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
@@ -551,6 +581,10 @@ button.save.has-count .count::before {
|
||||
.icon.pre-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
[dir='rtl'] .icon.pre-text {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.icon.light {
|
||||
color: #fff;
|
||||
@@ -583,14 +617,20 @@ button.save.has-count .count::before {
|
||||
#bar {
|
||||
position: fixed;
|
||||
padding: 10px 0;
|
||||
left:0;
|
||||
top:0;
|
||||
right:0;
|
||||
height:60px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 60px;
|
||||
z-index: 9;
|
||||
min-width: 768px;
|
||||
}
|
||||
|
||||
[dir='rtl'] #bar .spacer,
|
||||
[dir='rtl'] #bar .button-wrap,
|
||||
[dir='rtl'] #bar .button-wrap button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* Header for modals / panes
|
||||
------------------------------------------------------- */
|
||||
@@ -609,6 +649,10 @@ button.save.has-count .count::before {
|
||||
overflow: hidden;
|
||||
padding: 20px 20px 20px 40px;
|
||||
}
|
||||
[dir='rtl'] .header h3 {
|
||||
text-align: right;
|
||||
padding: 20px 40px 20px 20px;
|
||||
}
|
||||
|
||||
.header button,
|
||||
.modal > button {
|
||||
@@ -629,12 +673,21 @@ button.save.has-count .count::before {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
[dir='rtl'] .entity-editor-pane .header button.preset-close,
|
||||
[dir='rtl'] .preset-list-pane .header button.preset-choose {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.entity-editor-pane .header button.preset-choose {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
[dir='rtl'] .entity-editor-pane .header button.preset-choose {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.preset-choose {
|
||||
font-size: 16px;
|
||||
@@ -649,6 +702,10 @@ button.save.has-count .count::before {
|
||||
height: 60px;
|
||||
z-index: 50;
|
||||
}
|
||||
[dir='rtl'] .modal > button {
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
@@ -680,6 +737,9 @@ button.save.has-count .count::before {
|
||||
background: #f6f6f6;
|
||||
-ms-user-select: element;
|
||||
}
|
||||
[dir='rtl'] #sidebar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sidebar-component {
|
||||
position: absolute;
|
||||
@@ -736,6 +796,10 @@ button.save.has-count .count::before {
|
||||
top: 80px;
|
||||
pointer-events: none;
|
||||
}
|
||||
[dir='rtl'] #sidebar .search-header .icon {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#sidebar .search-header input {
|
||||
position: absolute;
|
||||
@@ -789,6 +853,9 @@ button.save.has-count .count::before {
|
||||
overflow: hidden;
|
||||
border-left: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
[dir='rtl'] .feature-list-item .label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.feature-list-item .label .icon {
|
||||
opacity: .5;
|
||||
@@ -816,6 +883,11 @@ button.save.has-count .count::before {
|
||||
color: #666;
|
||||
padding-left: 10px;
|
||||
}
|
||||
[dir='rtl'] .feature-list-item .entity-name {
|
||||
padding-left: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Presets
|
||||
------------------------------------------------------- */
|
||||
@@ -940,6 +1012,19 @@ button.save.has-count .count::before {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.preset-list-button .label {
|
||||
background-color: #f6f6f6;
|
||||
text-align: left;
|
||||
@@ -955,7 +1040,15 @@ button.save.has-count .count::before {
|
||||
overflow: hidden;
|
||||
border-left: 1px solid rgba(0, 0, 0, .1);
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
[dir='rtl'] .preset-list-button .label {
|
||||
text-align: right;
|
||||
left: 0;
|
||||
right: 60px;
|
||||
border-left: none;
|
||||
border-right: 1px solid rgba(0, 0, 0, .1);
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.preset-list-button:hover .label {
|
||||
background-color: #ececec;
|
||||
@@ -971,6 +1064,11 @@ button.save.has-count .count::before {
|
||||
width: 32px;
|
||||
background: #fafafa;
|
||||
}
|
||||
[dir='rtl'] .preset-list-item button.tag-reference-button {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.preset-list-item button.tag-reference-button:hover {
|
||||
background: #f1f1f1;
|
||||
@@ -1295,6 +1393,9 @@ button.save.has-count .count::before {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-input-wrap .col6 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* preset form access */
|
||||
@@ -1754,6 +1855,10 @@ div.combobox {
|
||||
margin-left: -30px;
|
||||
vertical-align: top;
|
||||
}
|
||||
[dir='rtl'] .combobox-caret {
|
||||
margin-left: 0;
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
.combobox-caret::after {
|
||||
content:"";
|
||||
@@ -2057,6 +2162,10 @@ div.full-screen > button:hover {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
[dir='rtl'] .map-controls {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.map-control > button {
|
||||
width: 40px;
|
||||
@@ -2078,6 +2187,9 @@ div.full-screen > button:hover {
|
||||
.zoombuttons button.zoom-in {
|
||||
border-radius: 4px 0 0 0;
|
||||
}
|
||||
[dir='rtl'] .zoombuttons button.zoom-in {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
/* Background / Map Data Settings */
|
||||
|
||||
@@ -2088,6 +2200,9 @@ div.full-screen > button:hover {
|
||||
.background-control button {
|
||||
border-radius: 4px 0 0 0;
|
||||
}
|
||||
[dir='rtl'] .background-control button {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.map-data-control,
|
||||
.background-control {
|
||||
@@ -2151,6 +2266,10 @@ div.full-screen > button:hover {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .list-item-gpx-browse svg {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* make sure tooltip fits in map-control panel */
|
||||
/* if too wide, placement will be wrong the first time it displays */
|
||||
.layer-list li.best .tooltip-inner {
|
||||
@@ -2188,9 +2307,13 @@ div.full-screen > button:hover {
|
||||
|
||||
.hide-toggle {
|
||||
display: block;
|
||||
padding-left:12px;
|
||||
padding-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
[dir='rtl'] .hide-toggle {
|
||||
padding-left: 0;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.hide-toggle:before {
|
||||
content: '';
|
||||
@@ -2204,6 +2327,12 @@ div.full-screen > button:hover {
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 8px solid #7092ff;
|
||||
}
|
||||
[dir='rtl'] .hide-toggle:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-right: 8px solid #7092ff;
|
||||
}
|
||||
|
||||
.hide-toggle.expanded:before {
|
||||
border-top: 8px solid #7092ff;
|
||||
@@ -2211,6 +2340,11 @@ div.full-screen > button:hover {
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
[dir='rtl'] .hide-toggle.expanded:before {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Adjust Alignment controls */
|
||||
|
||||
@@ -2341,13 +2475,17 @@ div.full-screen > button:hover {
|
||||
|
||||
.opacity-options {
|
||||
background: url(img/background-pattern-opacity.png) 0 0 repeat;
|
||||
height:20px;
|
||||
width:82px;
|
||||
height: 20px;
|
||||
width: 82px;
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 20px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
[dir='rtl'] .opacity-options {
|
||||
left: 50px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.opacity-options li {
|
||||
height: 100%;
|
||||
@@ -2357,8 +2495,8 @@ div.full-screen > button:hover {
|
||||
|
||||
.opacity-options li .select-box{
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:18px;
|
||||
width: 20px;
|
||||
height: 18px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@@ -2393,6 +2531,12 @@ div.full-screen > button:hover {
|
||||
border-left: 1px solid #CCC;
|
||||
border-radius: 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button,
|
||||
[dir='rtl'] .background-control .layer-list button {
|
||||
float: left;
|
||||
border-left: none;
|
||||
border-right: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.map-data-control .layer-list button .icon,
|
||||
.background-control .layer-list button .icon {
|
||||
@@ -2403,6 +2547,10 @@ div.full-screen > button:hover {
|
||||
.background-control .layer-list button:first-of-type {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
[dir='rtl'] .map-data-control .layer-list button:first-of-type,
|
||||
[dir='rtl'] .background-control .layer-list button:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.map-data-control .map-overlay,
|
||||
.background-control .map-overlay,
|
||||
@@ -2410,7 +2558,6 @@ div.full-screen > button:hover {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* Geolocator */
|
||||
|
||||
.geolocate-control {
|
||||
@@ -2420,6 +2567,9 @@ div.full-screen > button:hover {
|
||||
.geolocate-control button {
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
[dir='rtl'] .geolocate-control button {
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.map-overlay.content {
|
||||
position: fixed;
|
||||
@@ -2429,12 +2579,20 @@ div.full-screen > button:hover {
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
[dir='rtl'] .map-overlay.content {
|
||||
padding: 20px 20px 20px 50px;
|
||||
left: 0;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
/* Help */
|
||||
|
||||
.help-control button {
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
[dir='rtl'] .help-control button {
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.help-wrap p {
|
||||
font-size: 15px;
|
||||
@@ -3356,11 +3514,8 @@ img.tile-removing {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.mode-save .request-review,
|
||||
.mode-save .commit-info {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.mode-save .request-review {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -3482,8 +3637,12 @@ img.tile-removing {
|
||||
}
|
||||
|
||||
.notice .zoom-to .icon {
|
||||
margin-top:10px;
|
||||
margin-right:10px;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
[dir='rtl'] .notice .zoom-to .icon {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Tooltips
|
||||
@@ -3695,6 +3854,10 @@ img.tile-removing {
|
||||
.add-point .tooltip {
|
||||
left: 33.3333% !important;
|
||||
}
|
||||
[dir='rtl'] .add-point .tooltip {
|
||||
left: inherit !important;
|
||||
}
|
||||
|
||||
.add-point .tooltip .tooltip-arrow {
|
||||
left: 60px;
|
||||
}
|
||||
@@ -4027,204 +4190,3 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
|
||||
color: #7092FF;
|
||||
}
|
||||
|
||||
|
||||
/* Right-to-left localization settings */
|
||||
|
||||
[dir='rtl'] #sidebar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] #sidebar .search-header .icon {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* header */
|
||||
[dir='rtl'] .header h3 {
|
||||
text-align: right;
|
||||
padding: 20px 40px 20px 20px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .entity-editor-pane .header button.preset-choose {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .entity-editor-pane .header button.preset-close, [dir='rtl'] .preset-list-pane .header button.preset-choose {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir='rtl'] .map-data-control .layer-list button, [dir='rtl'] .background-control .layer-list button {
|
||||
float: left;
|
||||
border-left: none;
|
||||
border-right: 1px solid #CCC;
|
||||
}
|
||||
|
||||
[dir='rtl'] .map-data-control .layer-list button:first-of-type, [dir='rtl'] .background-control .layer-list button:first-of-type {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* search */
|
||||
[dir='rtl'] .feature-list-item .label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .feature-list-item .entity-name {
|
||||
padding-left: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* preset form */
|
||||
|
||||
[dir='rtl'] .combobox-caret {
|
||||
margin-left: 0;
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .icon.pre-text {
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .notice .zoom-to .icon {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button .label {
|
||||
text-align: right;
|
||||
left: 0;
|
||||
right: 60px;
|
||||
border-left: none;
|
||||
border-right: 1px solid rgba(0, 0, 0, .1);
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-item button.tag-reference-button {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon {
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon-28 {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-list-button-wrap .preset-icon-24 {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
[dir='rtl'] input[type="checkbox"], [dir='rtl'] input[type="radio"] {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .preset-input-wrap .col6 {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* map control buttons */
|
||||
[dir='rtl'] .map-controls {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir='rtl'] .background-control button,
|
||||
[dir='rtl'] .zoombuttons button.zoom-in {
|
||||
border-radius: 0 4px 0 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .help-control button,
|
||||
[dir='rtl'] .geolocate-control button {
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .list-item-gpx-browse svg {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
/* map control button overlays */
|
||||
[dir='rtl'] .map-overlay {
|
||||
padding: 20px 20px 20px 50px;
|
||||
left: 0;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
[dir='rtl'] .opacity-options {
|
||||
left: 50px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir='rtl'] .hide-toggle {
|
||||
padding-left: 0;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .hide-toggle:before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-right: 8px solid #7092ff;
|
||||
}
|
||||
|
||||
[dir='rtl'] .hide-toggle.expanded:before {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
[dir='rtl'] #bar .spacer,
|
||||
[dir='rtl'] #bar .button-wrap,
|
||||
[dir='rtl'] #bar .button-wrap button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir='rtl'] .add-point .tooltip {
|
||||
left: inherit !important;
|
||||
}
|
||||
|
||||
[dir='rtl'] .button-wrap:last-of-type {
|
||||
padding-left: 0;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
[dir='rtl'] button.save.has-count .count {
|
||||
margin-left: auto;
|
||||
margin-right: 8%;
|
||||
}
|
||||
|
||||
[dir='rtl'] button.save.has-count .count::before {
|
||||
border-left: 6px solid rgba(255,255,255,.5);
|
||||
border-right: none;
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .joined button {
|
||||
border-left: 1px solid rgba(0,0,0,.5);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
[dir='rtl'] .joined button:first-child {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
[dir='rtl'] .joined button:last-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
/* modal */
|
||||
[dir='rtl'] .modal > button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: unset;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user