@use "sass:map";
@import "parameters";
-@import "browse";
@import "bootstrap";
@import "rails_bootstrap_forms";
body {
font-size: $typeheight;
+ --dark-mode-map-filter: brightness(.8);
}
time[title] {
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 {
}
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,
- .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;
}
}
-/* Rules for attribution text under the main map shown on printouts */
+@mixin dark-map-color-scheme {
+ .leaflet-tile-container,
+ .mapkey-table-entry td:first-child > * {
+ filter: var(--dark-mode-map-filter);
+ }
-.donate-attr { color: darken($green, 10%) !important; }
+ .leaflet-tile-container .leaflet-tile {
+ filter: none;
+ }
+}
-/* Rules for the sidebar */
+body[data-map-theme="dark"] {
+ @include dark-map-color-scheme;
+}
-#browse_status {
- input {
- display: block;
- margin-left: auto;
- margin-right: auto;
+@include color-mode(dark) {
+ body:not([data-map-theme]) {
+ @include dark-map-color-scheme;
}
}
+/* Rules for attribution text under the main map shown on printouts */
+
+.donate-attr { color: darken($green, 10%) !important; }
+
/* 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);
/* Rules for map sidebar icons */
-.browse-section {
- .node::before,
- .way::before,
- .relation::before {
- display: inline-block;
- width: 25px;
- margin-left: -25px;
- }
+.browse-section .browse-element-list {
+ line-height: 1.25rem;
- .node, .way, .relation {
- margin-left: 25px;
+ .browse-icon {
+ height: 1.25rem;
}
-}
-@each $class, $item in $map-sidebar-icons {
- .browse-section #{$class}::before {
- content: image-url('browse/#{map.get($item, "filename")}');
+ .d-flex > .browse-icon {
+ height: max(20px, 1.25rem);
}
- @if map.get($item, "invert") {
- @include color-mode(dark) {
- .browse-section #{$class}::before {
- filter: invert(.8) hue-rotate(180deg);
- }
+ @include color-mode(dark) {
+ .browse-icon-invertible {
+ filter: invert(.8) hue-rotate(180deg);
}
}
}
projects / rails.git / blobdiff