Info modal: improve CSS and move background stuff at the bottom.

2 files changed, 26 insertions, 17 deletions

diff --git a/index.html b/index.html
index e9c330b..6fced1d 100644
--- a/index.html
+++ b/index.html
@@ -17,12 +17,13 @@
     <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
         <div class="modal-content">
-          <div class="modal-header py-2">
-            <h5 class="my-0">Källor och licensinformation</h5>
+          <div class="modal-header">
+            <div class="h5 m-0">Källor och licensinformation</div>
             <button type="button" class="btn-close" data-bs-dismiss="modal" title="Stäng" aria-label="Stäng"></button>
           </div>
           <div id="info-body" class="modal-body">
-            <ul class="list-group list-group-flush mb-2">
+            <div id="info-accordion" class="accordion accordion-flush"></div>
+            <ul class="list-group list-group-flush">
               <li class="list-group-item">
                 <h6>Bakgrund kartor</h6>
                 <p>&copy; <a href="https://lantmateriet.se" target="_blank">Lantmäteriet</a></p>
@@ -44,7 +45,6 @@
                   <a href="https://git.guilhem.org/KlimatanalysNorr/tools" target="_blank">Källkod <i class="bi bi-box-arrow-up-right"></i></a></p>
               </li>
             </ul>
-            <div id="info-accordion" class="accordion accordion-flush"></div>
             <p class="small text-muted info-credits">Webbkartan är utvecklad av
               <a href="https://guilhem.se" target="_blank">Guilhem Datakonsult</a> på uppdrag av
               <a href="https://www.klimatanalysnorr.se" target="_blank">Klimatanalys Norr projektet</a>.</p>
diff --git a/style.css b/style.css
index dcb9dc3..f979bd0 100644
--- a/style.css
+++ b/style.css
@@ -294,23 +294,28 @@ body.inprogress {
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text;
-  --modal-info-padding-x: .5rem;
+  --bs-modal-header-padding: 1rem;
+  --modal-info-padding-x: var(--bs-modal-header-padding);
+  --modal-info-padding-y: .5rem;
   --modal-info-bg-light: rgba(0, 0, 0, .08);
 }
+#modal-info .modal-header {
+  padding: var(--modal-info-padding-y) var(--modal-info-padding-x);
+}
 #modal-info .list-group-item,
 #modal-info {
   --bs-list-group-border-width: 1px;
 }
-#modal-info .accordion {
+#info-accordion {
   --bs-accordion-active-bg: var(--bs-accordion-bg);
   --bs-accordion-active-color: var(--bs-body-color);
-  --bs-accordion-btn-padding-x: .5rem;
+  --bs-accordion-btn-padding-x: 0;
   --bs-accordion-btn-padding-y: .025rem;
   --bs-accordion-btn-focus-box-shadow: none;
-  --bs-accordion-body-padding-x: var(--modal-info-padding-x);
+  --bs-accordion-body-padding-x: 0;
   --bs-accordion-body-padding-y: 0;
   --bs-accordion-btn-active-bg: var(--modal-info-bg-light);
-  margin: 0 calc(var(--bs-accordion-btn-padding-x)*-1);
+  padding: 0 var(--modal-info-padding-x);
 }
 #modal-info .accordion-item {
   border: none;
@@ -322,14 +327,20 @@ body.inprogress {
   background-color: var(--bs-accordion-btn-active-bg);
 }
 #modal-info ul.list-group > li.list-group-item {
-  padding: .3rem var(--modal-info-padding-x);
-  margin: 0 calc(var(--modal-info-padding-x)*-1);
+  padding: .3rem 0;
   border: none;
 }
+#modal-info ul.list-group > li.list-group-item:last-child {
+  padding-bottom: var(--modal-info-padding-y);
+}
+#info-body > ul.list-group {
+  margin-top: var(--modal-info-padding-y);
+  border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+  padding: 0 var(--modal-info-padding-x);
+}
 #modal-info ul.list-group > li.list-group-item:not(:first-child) {
   border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
 }
-#info-body > ul.list-group > li.list-group-item:last-child,
 #info-accordion > .accordion-item:not(:last-child) ul.list-group > li.list-group-item:last-child {
   border-bottom: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
 }
@@ -337,8 +348,7 @@ body.inprogress {
   background-color: rgb(from var(--modal-info-bg-light) r g b / calc(alpha*.4));
 }
 #info-body {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: var(--modal-info-padding-y) 0;
 }
 #info-body > ul.list-group > li.list-group-item p,
 #modal-info .accordion-body ul.list-group > li.list-group-item p {
@@ -358,10 +368,9 @@ body.inprogress {
   text-decoration: underline;
 }
 #modal-info .modal-body .info-credits {
-  margin: 0 calc(var(--modal-info-padding-x)*-1);
-  padding: .3rem var(--modal-info-padding-x);
-  margin-top: .3rem;
   border-top: var(--bs-list-group-border-width) solid var(--modal-info-bg-light);
+  padding: var(--modal-info-padding-y) var(--modal-info-padding-x) 0 var(--modal-info-padding-x);
+  margin: 0;
 }
 
 .ol-overlaycontainer-stopevent .modal-backdrop.show {