elixir-toolkit-theme 4.2.0 → 6.0.0

data/assets/css/main.scss

@@ -8,24 +8,39 @@ permalink: assets/css/main
 /*-----Default theme variables-----*/
 
 @import "bootstrap/functions";
-$popover-max-width: 12em;
-$enable-caret: false;
-$breadcrumb-font-size: 0.85rem;
-$breadcrumb-divider: '>';
-$breadcrumb-margin-bottom: 0;
+
+
+/*-----Initialize User Bootstrap variables-----*/
+
+@import "bootstrap_variables";
+
+/*-----Initialize Bootstrap variables-----*/
+$primary:       #0d6efd !default;
+$light:         #f8f9fa !default;
+$input-bg: $light !default;
+$input-group-addon-bg: rgba($primary, 0.08) !default;
+$form-select-bg: $light !default;
+$popover-max-width: 12em !default;
+$input-border-width: 0 !default;
+$alert-border-width: 0 !default;
+$form-select-border-width: 0 !default;
+$card-border-width: 0 !default;
+$enable-caret: false !default;
+$breadcrumb-font-size: 0.85rem !default;
+$breadcrumb-divider: '>' !default;
+$breadcrumb-margin-bottom: 0 !default;
 $h3-font-size: 1rem * 1.6 !default;
 $h2-font-size: 1rem * 2.1 !default;
 $h1-font-size: 1rem * 3.3 !default;
-$navbar-light-toggler-border-color: transparent;
-$navbar-dark-toggler-border-color: transparent;
-$card-border-width: 0;
+$navbar-light-toggler-border-color: transparent !default;
+$navbar-dark-toggler-border-color: transparent !default;
+$link-decoration: none  !default;
+$link-color: $primary !default;
 $custom-container-max-widths: (
-    xxxl: 1700px
+    xxxl: 1440px
 );
 
-/*-----Initialize Bootstrap variables-----*/
 
-@import "bootstrap_variables";
 @import "bootstrap/variables";
 
 /*-----Custom maps-----*/
@@ -64,7 +79,7 @@ $container-max-widths: map-merge($container-max-widths, $custom-container-max-wi
         margin-top: $spacer * 1.5;
     }
 
-    h3 + h4 {
+    h3+h4 {
         margin-top: $spacer * 0.25;
     }
 
@@ -98,37 +113,39 @@ body img {
     font-family: $font-family-theme !important;
 }
 
+// Add external link icon to all urls
+#content a:is([href^="http"], [href^="//"]):not([href^="{{ site.url }}"]):not([href^="mailto:"]):not([href^="tel:"]):not(:has(> span:only-child)):not(:has(> img)):not(.btn):not(.no-ext-icon)::after {
+    content: "\f35d";
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    display: inline-block;
+    margin-left: .4em;
+    font-size: .60em;
+    line-height: 1;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    pointer-events: none;
+    vertical-align: middle;
+}
+
 /*-----Layout-----*/
 
 #main {
     grid-area: main;
 }
 
-@include media-breakpoint-up(md) {
-    #main {
-        display: grid;
-        grid-template-areas:
-            "intro"
-            "toc"
-            "content";
-        grid-template-rows: auto auto 1fr;
-    }
+#intro {
+    grid-area: intro;
 }
-@include media-breakpoint-up(xl) {
-    #main {
-        grid-template-areas:
-            "intro toc"
-            "content toc";
-        grid-template-rows: auto 1fr;
-    }
 
-    .add-grid {
-        grid-template-columns: 5fr 2fr;
-    }
+#sidebar {
+    grid-area: sidebar;
 }
 
 #toc {
     grid-area: toc;
+
     /*-----Page image-----*/
     .page-img-lg {
         max-height: 9em;
@@ -141,47 +158,62 @@ body img {
     }
 }
 
+@include media-breakpoint-up(md) {
+    #main {
+        display: grid;
+        grid-template-areas:
+            "intro"
+            "toc"
+            "content";
+        grid-template-rows: auto auto 1fr;
+    }
+}
+
+
+@include media-breakpoint-up(lg) {
+    #layout {
+        display: grid;
+        grid-template-areas: "sidebar main";
+        grid-template-columns: 3fr 9fr;
+    }
+}
+
 @include media-breakpoint-up(xl) {
-    #toc {
-        top: $spacer * 3;
+    #main.add-grid {
+        grid-template-areas:
+            "intro toc"
+            "content toc";
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 5fr 2fr;
+    }
+
+    #main.add-grid #toc {
+        top: 0;
         right: 0;
         z-index: 2;
         height: calc(100vh - 7rem);
         overflow-y: auto;
         margin-left: $spacer * 3;
+        scrollbar-width: thin;
+        scrollbar-color: $primary transparent;
     }
-}
 
-#intro {
-    grid-area: intro;
+    #layout {
+        grid-template-columns: 2fr 9fr;
+    }
 }
 
-#sidebar {
-    grid-area: sidebar;
-}
 
 #content {
     grid-area: content;
     min-width: 1px;
     position: relative;
-    > h2:first-child {
-        margin-top: 0;
-    }
-}
 
-@include media-breakpoint-up(lg) {
-    #layout {
-        display: grid;
-        grid-template-areas: "sidebar main";
-        grid-template-columns: 3fr 9fr;
+    >h2:first-child {
+        margin-top: 0;
     }
 }
 
-@include media-breakpoint-up(xl) {
-    #layout {
-        grid-template-columns: 2fr 9fr;
-    }
-}
 
 /*-----Blockquote-----*/
 
@@ -228,6 +260,7 @@ pre {
     border-radius: $border-radius;
     margin-bottom: $spacer;
     line-height: 1.42857143;
+
     code {
         padding: 0;
         background-color: transparent;
@@ -240,17 +273,21 @@ div.highlight {
     border: 1px solid $border-color;
     border-radius: $border-radius;
     margin: $spacer 0;
+
     pre {
         margin-bottom: 0;
         padding: $spacer;
         border: 0;
     }
 }
+
 /*-----Top navigation-----*/
 
 header .navbar {
     background-color: $topnav-bg;
-
+    #search-label, #search-input {
+        background-color: $topnav-searchbar;
+    }
     .navbar-brand {
         color: $topnav-title-color;
 
@@ -375,7 +412,7 @@ header .navbar {
     vertical-align: top;
 }
 
-.search-result-preview + .search-result-preview {
+.search-result-preview+.search-result-preview {
     margin-top: 0.25rem;
 }
 
@@ -394,97 +431,130 @@ header .navbar {
 /*-----Sidebar-----*/
 
 @include media-breakpoint-up(lg) {
-    #sidebar > nav {
+    #sidebar>nav {
         display: block !important;
+        position: sticky;
+        top: 0;
+        height: calc(100vh - 7rem);
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: $primary transparent;
     }
 }
 
-#sidebar > nav .btn.sidebar-title {
-    color: $sidebar-color;
-    border: 0;
+#sidebar > nav {
+    .sidebar-title-wrapper {
+        position: sticky;
+        top: 0;
+        background: $sidebar-title-bg;
+        z-index: 1;
+    }
+
+    .sidebar-title {
+        border: 0;
+        padding: 0.5rem;
+        font-weight: 700;
+        transition: $transition-base;
+        border-radius: $border-radius;
+
+        &:hover:not(.disabled), &.active:not(.disabled) {
+            color: $sidebar-link-color-active!important;
+            background: $sidebar-link-bg-active;
+        }
+    }
 }
 
 .sidebar-collapse {
-    background-color: $sidebar-bg;
+    background-color: $light;
 
     i {
         font-size: 1.25rem;
         float: right;
-        line-height: 1.25em;
     }
 }
 
-.sidebar-collapse:not(.collapsed) {
-    color: $sidebar-color-active;
-    background-color: $sidebar-bg-active;
-}
 
 #sidebar > nav > ul {
-    > li:not(.sidebar-title) > a {
-        background-color: $sidebar-bg;
-        color: $sidebar-color;
-    }
+    margin-bottom: 0;
 
-    li > a {
-        > span {
-            float: right;
-            width: 15px;
-            margin-left: $btn-padding-x;
-            text-align: center;
-        }
+    li {
+        padding: 0.25rem 0.5rem;
+        position: relative;
+        
+        a {
+            color: inherit;
+            cursor: pointer;
+            transition: $transition-base;
+            line-height: 1.15;
+            padding: 0.20rem 0;
+
+            &::after {
+                transition: $transition-base;
+                pointer-events: none;
+                background: transparent;
+                position: absolute;
+                content: "";
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                border-radius: $border-radius;
+            }
 
-        > span:after {
-            display: inline-block;
-            font-style: normal;
-            font-variant: normal;
-            text-rendering: auto;
-            -webkit-font-smoothing: antialiased;
-            font-family: "Font Awesome 6 Free";
-            font-weight: 900;
-            content: "\f078";
-            transition: transform 0.15s ease-in-out;
-        }
-    }
+            &:hover,&.active {
+                color: $sidebar-link-color-active;
+                
+                &::after {
+                    background: $sidebar-link-bg-active;
+                }
+            }
 
-    li.active {
-        &:not(.parent) > a {
-            background-color: $sidebar-bg-active;
-            color: $sidebar-color-active;
+            &.active {
+                font-weight: 600;
+                color: $sidebar-link-color-active;
+            }
         }
 
-        > a > span:after {
-            transform: rotate(-180deg);
-        }
-    }
+        .btn {
+            transition: $transition-base;
+            color: inherit;
+            width: 1.85rem;
+            height: 1.75rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-    ul {
-        display: none;
+            &:hover {
+                color: $sidebar-link-color-active;
+                background: $sidebar-link-bg-active;
+            }
 
-        li {
-            a {
-                margin-left: 30px;
-                background-color: $sidebar-lvl2-bg;
-                color: $sidebar-lvl2-color;
+            &:not(.collapsed) {
+                i {
+                    transform: rotate(90deg);
+                }
             }
 
-            ul li a {
-                margin-left: 60px;
-                background-color: $sidebar-lvl3-bg;
-                color: $sidebar-lvl3-color;
+            i {
+                transition: $transition-base;
             }
         }
 
-        .sidebar_rdm_sub {
-            border-color: $sidebar-bg;
-            padding: 0.75rem 0.5rem 0.5rem 0.5rem;
-            border-radius: 0px 0px $border-radius $border-radius;
-            border-style: none solid solid solid;
-            border-width: 0.2em;
-            margin-top: -0.25rem;
+        ul {
+            border-left: 1px solid $border-color;
+            margin-left: 0.2rem;
+            padding-left: 0.4rem;
+            margin-bottom: 0;
         }
+    }    
+
+    .sidebar_rdm_sub {
+        padding: 0.75rem 0.5rem 0.5rem 0.5rem;
+        margin-top: -0.25rem;
     }
 }
 
+
 /*-----Summary under page title-----*/
 
 .summary {
@@ -501,11 +571,19 @@ header .navbar {
 
 /*-----TOC-----*/
 
+#toc {
+    #btn-toc-hide {
+        display: none;
+    }
+}
 #toc-contents {
     @include media-breakpoint-up(xl) {
         display: block !important;
-    } // Indent the lists and reset any other padding
+    }
+
+    // Indent the lists and reset any other padding
     ul {
+
         // highlighting active links
         a {
             color: inherit;
@@ -513,6 +591,7 @@ header .navbar {
             border-left: 0.125rem solid transparent;
             display: block;
             transition: border-left 0.15s ease-in-out;
+
             &.active,
             &:hover {
                 text-decoration: none !important;
@@ -545,7 +624,7 @@ header .navbar {
 
 /*-----General table properties-----*/
 
-.table > :not(:first-child) {
+.table> :not(:first-child) {
     border-color: inherit;
 }
 
@@ -582,6 +661,16 @@ table {
     font-weight: bold;
 }
 
+/* Make a button the same height/feel as a .badge */
+.btn-badge {
+    /* match .badge metrics */
+    --bs-btn-padding-y: .35em;
+    --bs-btn-padding-x: .65em;
+    --bs-btn-font-size: .75em;
+    --bs-btn-line-height: 1;
+    --bs-btn-font-weight: 700;
+  }
+
 /*-----Footer-----*/
 
 footer {
@@ -624,10 +713,12 @@ footer {
             fill: $footer-ett;
             transition: fill 0.15s ease-in-out;
         }
+
         &:hover {
             .cls-1 {
                 fill: #0d6efd;
             }
+
             color: #0d6efd !important;
         }
     }
@@ -639,8 +730,10 @@ footer {
     position: fixed;
     height: 50px;
     width: 50px;
-    bottom: -50px; /* Default hidden position */
-    right: 1rem; /* Adjust as needed */
+    bottom: -50px;
+    /* Default hidden position */
+    right: 1rem;
+    /* Adjust as needed */
     opacity: 0;
     overflow: hidden;
     z-index: 1000;
@@ -650,7 +743,8 @@ footer {
         opacity 0.15s ease-out;
 
     &.visible {
-        bottom: 1rem; /* Initial visible position */
+        bottom: 1rem;
+        /* Initial visible position */
         opacity: 1;
     }
 }
@@ -669,6 +763,19 @@ footer {
 .contributor-cards {
     .card {
         background-color: $contr-card-bg;
+        display: flex;
+        flex-direction: column;
+        
+        .card-body {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        
+        .card-footer {
+            flex-shrink: 0;
+        }
     }
 
     .badge {
@@ -709,6 +816,7 @@ footer {
             line-height: 2ex;
             width: 2.2ex;
             height: 2.2ex;
+
             i {
                 font-size: 0.625em;
                 line-height: 0.1em;
@@ -739,40 +847,57 @@ footer {
     text-align: center;
 }
 
+/*---- Page metadata ----*/
+.page-metadata {
+    background-color: $page-metadata-bg;
+    .affiliation-link {
+        background-color: $page-metadata-link-bg;
+    }
+    .nav-link {
+        border: none;
+        display: flex;
+        align-items: center;
+        border-bottom: 2px solid transparent;
+        color: rgba($body-color, 0.75);
+        &.active,
+        &:hover {
+            background: none;
+            border-bottom-color: $primary;
+            color: $body-color;
+        }
+        &:not(.active):hover {
+            border-bottom-color: $body-color;
+        }
+    }
+}
+
+
 /*--------Page contributors---------*/
 .page-contributors {
-    background-color: $contr-bg;
     font-size: 0;
 
     .contributor-cards .card {
         background-color: $contr-popover-bg;
     }
+
     .dropdown-menu {
         width: 11em;
     }
 
     /* Gets rid of extra white space */
     .contributor-link {
-        background-color: $contr-link-bg;
+        background-color: $page-metadata-link-bg;
+        padding: 0.25rem 0.5rem !important;
+        font-size: 0.85rem;
+        gap: 0.35rem !important;
+
         &::after {
             display: none;
         }
 
         .contributor-img-sm {
-            height: 25px;
-            width: 25px;
-        }
-
-        .coordinator-crown {
-            font-size: 0.6em;
-            width: 1.8em;
-            height: 1.8em;
-            line-height: 1.8;
-            background-color: $contr-crown-bg;
-
-            .fa-solid {
-                color: $contr-crown-color;
-            }
+            height: 22px;
+            width: 22px;
         }
 
         .contr-placeholder {
@@ -781,6 +906,7 @@ footer {
     }
 }
 
+
 /*-----Cookie consent banner-----*/
 
 .cookiealert {
@@ -818,21 +944,23 @@ footer {
 .tool {
     cursor: pointer;
     color: $link-color;
-    background-color: rgba($link-color, 0.05);
+    background-color: rgba($link-color, 0.08);
     border-radius: $border-radius;
     padding: 0.1rem 0.25rem;
 
     &:hover,
     &:active {
         text-decoration: none !important;
-        color: $primary;
+        color: $link-hover-color;
     }
 }
+
 @include media-breakpoint-up(sm) {
     .tool {
         white-space: nowrap;
     }
 }
+
 .popover-tool {
     max-width: 20rem;
 
@@ -863,15 +991,15 @@ footer {
 }
 
 .affiliation-img {
-    height: 60px;
+    height: 45px;
 }
 
 .affiliation-flag {
-    width: 60px;
+    width: 50px;
 }
 
 .affiliation-flag .ratio {
-    width: 40px;
+    width: 35px;
 }
 
 /*-----News and events-----*/
@@ -882,8 +1010,8 @@ li.past_event,
     display: none;
 }
 
-.events > ul > li,
-.news > ul > li {
+.events>ul>li,
+.news>ul>li {
     border-left: $news-border-color 5px solid;
     border-radius: $border-radius;
     padding: 0px 11px;
@@ -903,7 +1031,7 @@ li.past_event,
         display: inline-block;
     }
 
-    .full-description > *:last-child {
+    .full-description>*:last-child {
         margin-bottom: 0;
 
         li {
@@ -919,25 +1047,29 @@ a.info-collapse {
         transition: transform 0.2s ease-in-out;
         margin-right: $spacer;
     }
+
     h3 {
         transition: color 0.2s ease-in-out;
     }
+
     &[aria-expanded="true"] {
         i {
-            transform: rotate(180deg);
+            transform: rotate(90deg);
         }
     }
+
     &:hover {
+
         i,
         h3 {
-            color: rgba($link-color, 0.8) !important;
+            color: shift-color($link-color, $link-shade-percentage)!important;
         }
     }
 }
 
 // Add a bottom border to the last accordion.
 a.info-collapse[aria-expanded="false"]:last-of-type,
-a.info-collapse[aria-expanded="true"]:last-of-type + .show {
+a.info-collapse[aria-expanded="true"]:last-of-type+.show {
     border-bottom: 1px solid $border-color;
 }
 
@@ -957,13 +1089,16 @@ a.info-collapse[aria-expanded="true"]:last-of-type + .show {
         a.btn {
             background-color: $info-card-bg;
             color: $info-card-color;
+
             i {
                 transition: $btn-transition;
                 color: $info-card-color !important;
             }
+
             &:hover {
                 background-color: $info-card-bg-hover;
                 color: $info-card-color-hover !important;
+
                 i {
                     color: $info-card-color-hover !important;
                 }
@@ -986,14 +1121,17 @@ a.info-collapse[aria-expanded="true"]:last-of-type + .show {
 
 /*-----Section navigation tiles-----*/
 .navigation-tiles {
+
     .card,
     .btn {
         background-color: $nav-card-bg;
         color: $nav-card-color;
         transition: $btn-transition;
+
         &:hover {
             background-color: $nav-card-bg-hover;
             color: $nav-card-color-hover;
+
             a.section-title {
                 text-decoration: none;
                 transition: $btn-transition;
@@ -1002,6 +1140,7 @@ a.info-collapse[aria-expanded="true"]:last-of-type + .show {
         }
 
         a {
+
             &:not(.stretched-link),
             button:not(.stretched-link) {
                 z-index: 2;
@@ -1013,9 +1152,11 @@ a.info-collapse[aria-expanded="true"]:last-of-type + .show {
                 font-size: 1.2rem;
             }
         }
+
         .type-icon {
             height: 1.2rem;
         }
+
         .page-img-sm {
             max-height: 3.2em;
         }