}
}
+/* Utility for delayed loading spinner */
+
+.delayed-fade-in {
+ animation: 300ms linear forwards delayed-fade-in;
+}
+
+@keyframes delayed-fade-in {
+ 0% { opacity: 0 }
+ 66% { opacity: 0 }
+ 100% { opacity: 1 }
+}
+
+/* Bootstrap close button overrides for nested light/dark themes */
+
+[data-bs-theme="dark"] .btn-close {
+ filter: var(--bs-btn-close-white-filter);
+}
+
+[data-bs-theme="light"] .btn-close {
+ filter: none;
+}
+
/* Rules for the header */
#menu-icon {
}
nav.primary {
- & > .btn-group .btn-outline-primary {
+ #edit_tab .btn-outline-primary {
@include button-outline-variant($green, $color-hover: $white, $active-color: $white);
}
.search_forms {
display: block;
}
+
+ .username {
+ max-width: unset;
+ }
}
- #sidebar .search_forms,
- #edit_tab,
- #export_tab {
+ #sidebar .search_forms {
display: none;
}
margin-right: 0;
padding: 0;
- .btn-group {
+ #edit_tab {
width: 100%;
padding: 10px;
}
.leaflet-marker-draggable {
cursor: move;
}
+
+ .query-marker {
+ animation: 1500ms forwards query-marker-fade;
+
+ @keyframes query-marker-fade {
+ to { opacity: 0 }
+ }
+ }
}
#map-ui {
overflow-y: scroll;
}
- .overlay-sidebar {
+ .overlay-sidebar.overlay-right-sidebar {
#sidebar {
position: absolute;
width: 350px;
overflow: hidden;
}
- #map, #map-ui {
+ #map {
height: 100%;
}
}
.layers-ui {
.base-layers > * {
- height: 56px;
+ height: 3.5rem;
> .btn {
+ box-sizing: content-box;
+ top: - map.get($border-widths, 4);
+ left: - map.get($border-widths, 4);
--bs-btn-border-color: var(--bs-body-bg);
}
> .btn:hover {
}
@include color-mode(dark) {
- .leaflet-tile-container,
+ .leaflet-tile-container .leaflet-tile,
.mapkey-table-entry td:first-child > * {
filter: brightness(.8);
}
- .leaflet-control-attribution a {
+ .leaflet-container .leaflet-control-attribution a {
color: var(--bs-link-color);
}
.leaflet-control-scale-line {
- @extend .border-light, .border-opacity-75;
+ border-color: rgba(var(--bs-light-rgb), .75) !important;
}
}
padding: $lineheight;
}
-/* Overrides for pages that use new layout conventions */
+/* Rules for login and signup pages */
+
+.sessions-new, .users-new, .users-create {
+ #content .content-inner {
+ max-width: 760px;
+ }
+}
.header-illustration {
- background-position: 0 0;
+ background-position: right;
background-repeat: no-repeat;
position: relative;
min-height: 200px;
bottom: 0;
&.new-user-main {
- background-image: image-url("sign-up-illustration.png");
- background-position-x: 50px;
+ background-image: image-url("sign-up-illustration.svg");
+ background-position-x: 70px;
}
&.confirm-main {
- background-image: image-url("confirm-illustration.png");
+ background-image: image-url("confirm-illustration.svg");
}
&.new-user-terms {
- background-image: image-url("terms-illustration.png");
+ background-image: image-url("terms-illustration.svg");
}
}
}
}
-.auth-container {
- max-width: 600px;
+/* Rules for tables with usernames */
+
+.messages-table .username,
+#block_list .username {
+ max-width: 20em;
}
-/* Rules for tabs inside secondary background sections */
+/* Rules for navigation tabs */
+
+.nav-tabs .username {
+ max-width: 20em;
+}
.bg-body-secondary .nav-tabs {
--bs-border-color: var(--bs-secondary-border-subtle);
.node, .way, .relation {
margin-left: 25px;
}
+
+ .node::before { content: image-url('browse/node.svg'); }
+ .way::before { content: image-url('browse/way.svg'); }
+ .relation::before { content: image-url('browse/relation.svg'); }
}
@each $class, $item in $map-sidebar-icons {