outline-style: none;
}
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: #aaa;
+ opacity: 1; /* Firefox */
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #aaa;
+}
+::-ms-input-placeholder { /* Microsoft Edge */
+ color: #aaa;
+}
+
p {
font-size: 12px;
margin:0;
button {
text-align: center;
- line-height:20px;
+ line-height: 20px;
border:0;
background: white;
font-weight: bold;
}
.header h3 {
- text-align: left;
+ text-align: center;
margin-bottom: 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- padding: 20px 20px 20px 40px;
-}
-[dir='rtl'] .header h3 {
- text-align: right;
- padding: 20px 40px 20px 20px;
+ padding: 20px;
}
.header button,
content: none;
}
+#preset-input-maxspeed_advisory,
#preset-input-maxspeed {
border-right: none;
border-radius: 0 0 0 4px;
width: 80%;
}
+[dir='rtl'] #preset-input-maxspeed_advisory,
[dir='rtl'] #preset-input-maxspeed {
border-right: 1px solid #ccc;
border-radius: 0 0 4px 0;
content: "";
display: block;
position: absolute;
- background:#ccc;
+ background: #ccc;
height: 11px;
width: 1px;
left: 0;
.restriction-controls-container .restriction-controls {
display: table;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
.restriction-controls .restriction-control {
.map-controls {
right: 0;
- top: 70px;
+ top: 132px;
width: 40px;
position: fixed;
z-index: 100;
}
/* Zoomer */
-
-.zoombuttons button.zoom-in {
+.zoombuttons > button.zoom-in {
border-radius: 4px 0 0 0;
}
-[dir='rtl'] .zoombuttons button.zoom-in {
+[dir='rtl'] .zoombuttons > button.zoom-in {
border-radius: 0 4px 0 0;
}
-/* Background / Map Data Settings */
+/* Geolocator */
+.geolocate-control {
+ margin-bottom: 10px;
+}
+.geolocate-control > button {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .geolocate-control > button {
+ border-radius: 0 0 4px 0;
+}
+
+/* Pane Buttons */
+.help-control > button {
+ border-radius: 0 0 0 4px;
+}
+[dir='rtl'] .help-control > button {
+ border-radius: 0 0 4px 0;
+}
.map-data-control button {
border-radius: 0;
}
-.background-control button {
+.background-control > button {
border-radius: 4px 0 0 0;
}
-[dir='rtl'] .background-control button {
+[dir='rtl'] .background-control > button {
border-radius: 0 4px 0 0;
}
+
+/* Background / Map Data Settings */
+
.map-data-control,
.background-control {
position: relative;
border-radius: 3px 0 0 3px;
}
-.map-data-control .map-overlay,
-.background-control .map-overlay,
-.help-control .map-overlay {
- z-index: -1;
-}
-
-/* Geolocator */
-
-.geolocate-control {
- margin-bottom: 10px;
-}
+/* Side panes */
-.geolocate-control button {
- border-radius: 0 0 0 4px;
-}
-[dir='rtl'] .geolocate-control button {
- border-radius: 0 0 4px 0;
+/*.map-data-control .map-pane,
+.background-control .map-pane,
+.help-control .map-pane {
}
-
-.map-overlay.content {
+*/
+.map-pane {
position: fixed;
top: 60px;
bottom: 30px;
- padding: 20px 50px 20px 20px;
right: 0;
- overflow: auto;
+ padding-bottom: 50px;
+ overflow: hidden;
+ z-index: -1;
}
-[dir='rtl'] .map-overlay.content {
- padding: 20px 20px 20px 50px;
+[dir='rtl'] .map-pane {
left: 0;
right: auto !important;
}
-.map-overlay.content > div {
- padding-bottom: 15px;
+.pane-heading {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ border-bottom: 1px solid #ccc;
}
-/* Help */
+.pane-heading h2 {
+ margin: 15px 20px;
+}
-.help-control button {
- border-radius: 0 0 0 4px;
+.pane-heading button {
+ width: 40px;
+ height: 61px;
+ border-radius: 0;
}
-[dir='rtl'] .help-control button {
- border-radius: 0 0 4px 0;
+
+.pane-content {
+ height: 100%;
+ padding: 10px 50px 20px 20px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+[dir='rtl'] .pane-content {
+ padding: 10px 20px 20px 50px;
}
+.pane-content > div {
+ padding-bottom: 15px;
+}
+
+/* Help */
+
+
.help-wrap p {
font-size: 15px;
margin-bottom: 20px;
.help-wrap .nav {
position: relative;
+ padding-bottom: 30px;
}
.help-wrap .nav a {
.nocolor { color: rgba(0, 0, 0, 0); }
.red { color: rgba(255, 0, 0, 0.75); }
.green { color: rgba(0, 255, 0, 0.75); }
-.blue { color: rgba(0, 0, 255, 0.75); }
+.blue { color: rgba(176, 176, 255, 0.75); }
.yellow { color: rgba(255, 255, 0, 0.75); }
.cyan { color: rgba(0, 255, 255, 0.75); }
.magenta { color: rgba(255, 0, 255, 0.75); }
color: #ccf;
}
+/* Notification Badges */
+
+/* For an icon (e.g. new version) */
.badge {
display: inline-block;
background: #d32232;
fill: white;
}
+/* For text (e.g. upcoming events) */
+.badge-text {
+ display: inline-block;
+ color: white;
+ text-align: center;
+ width: 16px;
+ height: 16px;
+ font-size: 10px;
+ font-weight: bold;
+ margin-left: 5px;
+ background: #f00;
+ border-radius: 9px;
+}
+[dir='rtl'] .badge-text {
+ margin-left: 0;
+ margin-right: 5px;
+}
+
/* Modals
------------------------------------------------------- */
text-align: center;
}
-.modal-actions button,
-.save-success a.button {
+.modal-actions button {
font-weight: normal;
color: #7092ff;
border-bottom: 1px solid #ccc;
text-align: center;
display: inline-block;
}
-
-.modal-actions button:hover
-.save-success a.button:hover {
+.modal-actions button:hover {
background-color: #ececec;
}
+.logo-small {
+ height: 40px;
+ width: 40px;
+ margin: auto;
+}
+
.logo {
height: 100px;
width: 100%;
color: #7092ff;
}
.modal-actions .logo-reset {
- color: #E06C5E;
+ color: #e06c5e;
}
/* Success Modal
------------------------------------------------------- */
+.save-success.body {
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+
+.save-success .link-out {
+ margin: 0px 5px;
+ white-space: nowrap;
+}
+
+.save-summary,
+.save-communityLinks {
+ padding: 0px 20px 15px 20px;
+}
+
+.save-communityLinks {
+ border-top: 1px solid #ccc;
+}
+
+.save-success table,
.save-success p {
- padding: 15px 15px 0 15px;
+ margin-top: 15px;
}
-.save-success a.details {
- padding-left: 15px;
+.save-success h3 {
+ font-size: 14px;
+ margin-top: 15px;
+ line-height: 1.5;
+ padding-bottom: 0;
}
-.save-success .button {
- padding-top: 15px;
+.save-success td {
+ vertical-align: top;
}
-.save-success .logo-osm {
- color: #7092ff;
- margin-bottom: 10px;
+.save-success td.cell-icon {
+ width: 40px;
}
-.save-success a.button.social {
- height: auto;
- border-bottom: none;
+.save-success td.cell-detail {
+ padding: 0 10px;
}
-.save-success .icon.social {
- height: 80px;
- width: 80px;
- color: #7092ff;
+.save-success td.community-detail {
+ padding-bottom: 15px;
+}
+
+.summary-view-on-osm,
+.community-name {
+ font-size: 14px;
+ font-weight: bold;
+}
+.community-languages {
+ margin-top: 5px;
+ font-style: italic;
+}
+.community-languages:only-child {
+ margin-top: 0;
}
+.community-detail a.hide-toggle,
+.community-detail a:visited.hide-toggle {
+ font-size: 12px;
+ font-weight: normal;
+ padding-bottom: 0;
+}
+.community-detail .hide-toggle svg.icon.pre-text {
+ width: 12px;
+ height: 15px;
+}
+
+.community-events {
+ margin-top: 5px;
+}
+
+.community-event,
+.community-more {
+ background-color: #efefef;
+ padding: 8px;
+ border-radius: 4px;
+ margin-bottom: 5px;
+}
+
+.community-event-name {
+ font-size: 14px;
+ font-weight: bold;
+}
+.community-event-when {
+ font-weight: bold;
+}
+
+.community-missing {
+ padding: 10px;
+ text-align: center;
+}
+
+
/* Splash Modal
------------------------------------------------------- */
.modal-actions .logo-walkthrough,
.tooltip {
position: absolute;
display: none;
- color:#333;
+ color: #333;
font-size: 12px;
}
/* Exceptions for tooltip layouts */
/* make tooltips in panels dark */
-.map-overlay .tooltip.top .tooltip-arrow,
+.map-pane .tooltip.top .tooltip-arrow,
.entity-editor-pane .tooltip.top .tooltip-arrow,
.warning-section .tooltip.top .tooltip-arrow {
border-top-color: #000;
}
-.map-overlay .tooltip.bottom .tooltip-arrow,
+.map-pane .tooltip.bottom .tooltip-arrow,
.entity-editor-pane .tooltip.bottom .tooltip-arrow,
.warning-section .tooltip.bottom .tooltip-arrow {
border-bottom-color: #000;
}
-.map-overlay .tooltip.left .tooltip-arrow,
+.map-pane .tooltip.left .tooltip-arrow,
.entity-editor-pane .tooltip.left .tooltip-arrow,
.warning-section .tooltip.left .tooltip-arrow {
border-left-color: #000;
}
-.map-overlay .tooltip.right .tooltip-arrow,
+.map-pane .tooltip.right .tooltip-arrow,
.entity-editor-pane .tooltip.right .tooltip-arrow,
.warning-section .tooltip.right .tooltip-arrow {
border-right-color: #000;
}
-.map-overlay .tooltip-inner,
-.map-overlay .tooltip-heading,
-.map-overlay .keyhint-wrap,
+.map-pane .tooltip-inner,
+.map-pane .tooltip-heading,
+.map-pane .keyhint-wrap,
.entity-editor-pane .tooltip-inner,
.warning-section .tooltip-inner {
background: #000;
projects / rails.git / blobdiff