Increase secondary nav item padding to compensate removed whitespace

[rails.git] / app / assets / stylesheets / common.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 53a60a3b2c862bc0c3313f11605651499b5c4370..97ed5907135d992c6da34bf612d52ede75368654 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -50,7 +50,7 @@ time[title] {
 
 /* Utility for de-emphasizing content */
 
-.text-muted a {
+.text-body-secondary a {
   color: $blue;
 }
 
@@ -79,7 +79,7 @@ time[title] {
   position: absolute;
   top: 0;
   right: 0;
-  background: image-url("menu-icon.png") no-repeat;
+  background: image-url("menu-icon.svg") no-repeat;
   background-size: 30px 30px;
   width: 30px;
   height: 30px;
@@ -98,23 +98,13 @@ header {
   position: relative;
   font-size: 14px;
 
-  h1, nav, nav > ul, nav > ul > li {
-    display: inline-block;
-  }
-
   > * {
     height: 100%;
     padding: $lineheight * 0.5;
   }
 
-  img.logo {
-    margin-top: -2px;
-  }
-
   h1 {
     font-size: 18px;
-    line-height: 1.2;
-    padding-top: 15px;
   }
 
   .btn {
@@ -160,7 +150,7 @@ nav.primary {
 
 nav.secondary {
   .nav-link {
-    padding: 0.2rem;
+    padding: 0.3rem;
   }
 }
 
@@ -197,7 +187,7 @@ body.small-nav {
     min-height: $headerHeight;
 
     &.closed nav {
-      display: none;
+      display: none !important;
     }
 
     .search_forms {
@@ -222,6 +212,8 @@ body.small-nav {
   }
 
   nav.secondary {
+    flex-direction: column;
+
     .user-menu, .login-menu {
       width: 100%;
     }
@@ -457,13 +449,17 @@ body.small-nav {
   border-top: 0px !important;
 }
 
-.leaflet-popup-content-wrapper,
-.leaflet-popup-tip,
-.leaflet-contextmenu,
-.leaflet-contextmenu-item {
+.leaflet-popup-content-wrapper, .leaflet-popup-tip,
+.leaflet-contextmenu, .leaflet-contextmenu-item,
+.leaflet-control-attribution, .leaflet-control-scale-line {
   @extend .bg-body, .text-body;
 }
 
+.leaflet-control-attribution, .leaflet-control-scale-line {
+  @extend .bg-opacity-75;
+  text-shadow: none !important;
+}
+
 .leaflet-contextmenu-item.over {
   @extend .bg-body-secondary, .border-secondary, .border-opacity-10;
 }
@@ -481,6 +477,14 @@ body.small-nav {
   .mapkey-table-entry td:first-child > * {
     filter: brightness(.8);
   }
+
+  .leaflet-control-attribution a {
+    color: var(--bs-link-color);
+  }
+
+  .leaflet-control-scale-line {
+    @extend .border-light, .border-opacity-75;
+  }
 }
 
 /* Rules for attribution text under the main map shown on printouts */
@@ -554,7 +558,7 @@ header .search_forms,
 /* Rules for routing */
 
 div.direction {
-  background-image: image-url('routing-sprite.png');
+  background-image: image-url('routing-sprite.svg');
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
@@ -729,6 +733,10 @@ tr.turn {
   h1 {
     transform: scaleX(-1);
   }
+
+  ul {
+    transform: scaleX(-1);
+  }
 }
 
 /* Rules for small maps in content areas */
@@ -875,28 +883,20 @@ div.secondary-actions {
   }
 }
 
-/* Rules for the "Welcome" page */
+/* Rules for the "Welcome" and "Fix the map" pages */
+
 .site-welcome, .site-fixthemap {
   .sprite {
-    background-image: image-url("welcome-sprite.png");
-    background-size: 500px 250px;
-    display: block;
-  }
-
-  .sprite.small {
     width: 50px;
     height: 50px;
+    background-image: image-url("welcome-sprite.svg");
+    background-size: 500px 250px;
   }
 
   .sprite.x {
     /*rtl:ignore*/ background-position: -50px 0;
   }
 
-  .sprite.term {
-    margin-right: 10px;
-    vertical-align: middle;
-  }
-
   .sprite.node {
     /*rtl:ignore*/ background-position: -100px 0;
   }
@@ -922,6 +922,8 @@ div.secondary-actions {
   }
 }
 
+/* Rules for the "About" page */
+
 .site-about #content {
   .content-inner {
     max-width: 760px;