text-decoration: underline dotted;
}
-#container { position: relative; }
-
/* Rules for icons */
.icon {
}
}
+/* 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 {
position: relative;
font-size: 14px;
- h1, nav, nav > ul, nav > ul > li {
- display: inline-block;
- }
-
> * {
- height: 100%;
padding: $lineheight * 0.5;
}
h1 {
+ height: $headerHeight;
font-size: 18px;
}
nav.primary {
margin-right: auto;
}
+
+ .username {
+ max-width: 12em;
+ }
}
nav.primary {
- & > .btn-group .btn-outline-primary {
+ #edit_tab .btn-outline-primary {
@include button-outline-variant($green, $color-hover: $white, $active-color: $white);
}
nav.secondary {
.nav-link {
- padding: 0.2rem;
+ padding: 0.3rem;
}
}
min-height: $headerHeight;
&.closed nav {
- display: none;
+ display: none !important;
}
.search_forms {
}
}
- #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;
}
}
nav.secondary {
+ flex-direction: column;
+
.user-menu, .login-menu {
width: 100%;
}
.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 {
}
.overlay-layers {
- p {
- font-size: 13px;
- margin-bottom: 8px;
- }
li.disabled { color: $darkgrey; }
}
}
}
@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;
}
}
.donate-attr { color: darken($green, 10%) !important; }
-/* Rules for the sidebar */
-
-#browse_status {
- input {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
-}
-
/* Temporary label size override until we remove site-wide font customisation */
form {
cursor: pointer;
}
-.routing_marker { width: 15px; cursor: move; }
+.routing_marker_column {
+ width: 15px;
-.browse_status {
- display: none;
+ img {
+ cursor: move;
+ }
}
/* Rules for the history sidebar */
}
}
-/* Bootstrap buttons don't have any vertical margin, so
- they touch when adjacent buttons wrap onto a new line
- e.g. wide form buttons on a narrow sidebar */
-
-.btn-wrapper {
- > .btn {
- margin-bottom: $spacer * 0.25;
- }
-}
-
/* Force LTR/RTL alignment for placeholder text */
.form-control::placeholder {
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");
}
}
}
}
-/* Rules for the "Welcome" and "Fix the map" pages */
-
-.site-welcome, .site-fixthemap {
- .sprite {
- width: 50px;
- height: 50px;
- background-image: image-url("welcome-sprite.svg");
- background-size: 500px 250px;
- }
-
- .sprite.x {
- /*rtl:ignore*/ background-position: -50px 0;
- }
-
- .sprite.node {
- /*rtl:ignore*/ background-position: -100px 0;
- }
-
- .sprite.way {
- /*rtl:ignore*/ background-position: -150px 0;
- }
-
- .sprite.tag {
- /*rtl:ignore*/ background-position: -200px 0;
- }
-
- .sprite.editor {
- /*rtl:ignore*/ background-position: -250px 0;
- }
-
- .sprite.question {
- /*rtl:ignore*/ background-position: -300px 0;
- }
-
- .sprite.rules {
- /*rtl:ignore*/ background-position: -350px 0;
- }
-}
-
/* Rules for the "About" page */
.site-about #content {
margin-left: -1em;
}
}
+}
- .icon {
- width: 30px;
- height: 30px;
- background: 40px 40px image-url('about/sprite.png') no-repeat;
+/* Rules for tables with usernames */
- &.local {
- /*rtl:ignore*/
- background-position: 0px 0px;
- }
- &.community {
- /*rtl:ignore*/
- background-position: 0px -40px;
- }
- &.open {
- /*rtl:ignore*/
- background-position: 0px -80px;
- }
- &.partners {
- /*rtl:ignore*/
- background-position: 0px -120px;
- }
- &.infringement {
- /*rtl:ignore*/
- background-position: 0px -160px;
- }
- &.legal {
- /*rtl:ignore*/
- background-position: -45px -160px;
- }
- }
+.messages-table .username,
+#block_list .username {
+ max-width: 20em;
}
-.auth-container {
- max-width: 600px;
-}
+/* Rules for navigation tabs */
-/* Rules for tabs inside secondary background sections */
+.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 {