Limestone rewrite

app/Assets/css/extra.css

@@ -1,12 +1,84 @@
+@layer overrides, limestone;
+
+/* creates a layer encapsulating all limestone styles; browser has a <link rel="preload" as="style"> to prewarm, this import blocks render. Unlayered styles always win conflicting rules regardless of specificity. */
+@import url("https://webcdn.uky.edu/limestone/1.0.0/css/style.css") layer(limestone);
+
+/* When limestone uses !important, it will win against unlayered rules. Overrides for limestone rules must live here */
+@layer overrides {
+  .js-accordion__panel[aria-hidden="true"] {
+    contain: content;
+  }
+
+  .universal-breadcrumb ul {
+    font-family: "usual", sans-serif !important;
+  }
+
+  .left-border {
+    border-left: 5px solid var(--color-wildcat-blue);
+  }
+
+  .viewer-control:disabled {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    color: transparent !important;
+  }
+}
+
+:root {
+    /* Limestone brand colors (names mirror Limestone's modifier classes) */
+    --color-wildcat-blue: #0033a0;
+    --color-wildcat-white: #fff;
+    --color-blue-gray: #eff4fd;
+    --color-cool-neutral: #dcddde;
+    --color-sky: #b1c9e8;
+}
+
+.fa-component .slab__wrapper {
+  padding: 0 1rem;
+}
+
+.fa-component {
+  background-color: var(--color-blue-gray);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.container_list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0;
+}
+
+.container_list_item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.container_list_item > p {
+  margin: 0;
+  padding: 0;
+}
+
+.editorial {
+  padding: 0;
+}
+
+.fa-expand-all-wrap {
+    margin: 0 0 0.75rem;
+    text-align: right;
+}
+
+.editorial > p {
+  padding-left: 1em;
+}
+
 .fa-request.fa-requestable-toc {
     display: block;
     margin: 0 auto;
 }
 
-.fa-request.fa-requestable-contents {
-    float: right;
-}
-
 .fa-request-summary-note {
     font-style: italic;
 }
@@ -19,6 +91,10 @@
     display: none;
 }
 
+.breadcrumbs ul li.fa-hidden {
+    display: none;
+}
+
 .fa-request-form {
     overflow: auto;
     background: #FDFDF6;
@@ -28,24 +104,10 @@
     border-radius: 6px;
 }
 
-.fa-request-ul {
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    margin: 1em;
-    height: 10em;
-}
-
 .fa-options {
     padding: 1em;
 }
 
-.fa-viewer {
-    overflow: hidden;
-    height: 100vh;
-    overflow-y: scroll;
-}
-
 .fa-toc-entry-highlight {
     font-weight: bold;
 }
@@ -64,102 +126,107 @@ label {
     font-weight: 300;
 }
 
-.hd {
-    height: 3px;
-    background-color: #0a3a5e;
+.fa-section {
+    margin-bottom: 2rem;
+}
+
+.editorial .fa-section h3 {
+    font-size: 1.5rem;
 }
 
-.nav-tabs {
-   float: right;
+.editorial .fa-component h4 {
+    font-size: 1.15rem;
+    font-weight: 400;
 }
 
-.container-fluid {
-   width: 80% !important;
-   background-color: #ffffff !important;
+.fa-component .list-unstyled {
+    list-style: none;
+    padding-left: 0;
 }
 
-.panel-heading[data-toggle="collapse"] .panel-title:after {
-    font-family: "Glyphicons Halflings";
-    color: #666;
-    float: right;
-    content: "\e114";
+.fa-request__button, .button {
+    font-size: 0.75rem;
+    padding: 0.15rem 0.5rem;
 }
 
-.panel-heading[data-toggle="collapse"].collapsed .panel-title:after {
-    content: "\e080";
+.click-to-load-images, .image-overflow {
+  display: inline;
 }
 
-.panel-title a {
-    color: #337ab7 !important;
+.click-to-play-audio, .click-to-play-video {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
-.toplink {
-    padding: 1em;
-    float: right;
+.fa-media,
+.mejs-container {
+  max-width: 100%;
 }
 
-.click-to-load-images, .image-overflow {
-    display: inline;
+.image-gallery__block--player {
+  width: 100%;
 }
 
+
 #viewer {
     background: black;
 }
 
+/* overwrite limestone default button styles */
 .viewer-control {
+    display: inline-block;
+    width: auto;
+    margin: 0;
+    padding: 0 1rem;
+    border: none;
     background: transparent;
-    display: inline;
-    color: transparent;
+    color: var(--color-wildcat-white);
     font-size: 6vh;
+    line-height: 1;
 }
 
-#viewer-img {
-    height: 80vh;
+.viewer-control:disabled {
+    visibility: hidden;
 }
 
-.alert-harmful {
-    background: #b1c9e8;
-    color: #282828;
+.fa-request-summary {
+    background-color: var(--color-blue-gray);
+    padding: 1rem 1.5rem;
 }
-
-.red-alert {
-    color: #ff0033;
-    font-size: larger;
+.fa-request-summary .heading--display span {
+    background-color: var(--color-blue-gray);
 }
-
-.red-alert-text {
-    font-size: larger;
-    color: #313132;
-    font-weight: bold;
+.fa-request-summary .accordion__header,
+.fa-request-summary .accordion__header:hover,
+.fa-request-summary .accordion__header:focus,
+.fa-request-summary .accordion__header:active {
+    background-color: var(--color-blue-gray);
 }
 
-.green-alert-text {
-    color: #246024;
+/* UK LIMESTONE STYLES */
+/* Fix Limestone bug - `.button--ghost` both focused and hovered should have white background text and blue background */
+button:focus:hover.button--ghost,
+.default-colors button:focus:hover.button--ghost {
+    background-color: var(--color-wildcat-blue);
+    border-color: var(--color-wildcat-blue);
+    color: var(--color-wildcat-white);
 }
 
-/* UK LIMESTONE STYLES */
-/* styling to match Limestone's Underline Link */
-a.underline-link {
-    color:#000000;
-    background-attachment: scroll;
-    background-image: linear-gradient(to top,rgba(161,211,237,0.4) 0,rgba(161,211,237,0.4) 0.5em,transparent 0.5em,transparent 110%),linear-gradient(to top,rgba(0,51,160,0.4) 0,rgba(0,51,160,0.4) 2px,transparent 2px,transparent 100%);
-    background-repeat: no-repeat;
-    background-position: 0 0.5em, 0 0;
-    position: relative;
-    transition: 0.2s background-position ease-out;
-    font-weight: 400;
-    z-index: 1;
-    text-decoration: none;
+/* Fix Limestone bug - `.social-media-links` assume a light background, so override with appropriate color for footer. */
+.global-footer .social-media-links a:hover,
+.global-footer .social-media-links a:focus,
+.global-footer .social-media-links a:active {
+    color: var(--color-sky);
 }
 
-a:hover.underline-link {
-    color:#0033A0;
-    background-position: 0 0, 1000px 2px;
+.global-footer .social-media-links__linkset a {
+    text-decoration: none;
 }
 
 /* styling to match central webcom's in-page alert*/
 .in-page-alert {
-    background-color: #EFF4FD;
+    background-color: var(--color-blue-gray);
     border-left: 7px solid #1E8AFF;
     padding: 1rem;
     align-items: center;
@@ -170,7 +237,7 @@ a:hover.underline-link {
         font-size: 1.75rem;
         font-weight: 900;
         margin-top: 0;
-        color: #0033A0;
+        color: var(--color-wildcat-blue);
         line-height: 1.2;
 }
 .in-page-alert h3 {
@@ -179,7 +246,45 @@ a:hover.underline-link {
         font-weight: 500;
         margin-bottom: 5px;
         margin-top: 10px;
-        color: #0033A0;
+        color: var(--color-wildcat-blue);
         line-height: 1.2;
-
-}
+}
+
+.heading-section {
+    margin: 1rem 0;
+}
+
+@scope(.heading-section){
+    .heading--display {
+        margin: 2rem 0;
+    }
+}
+
+/*Archive content banner*/
+@scope (.slab--micro) {
+    :scope{
+        padding-top: .2rem;
+        padding-bottom: .2rem;
+    }
+    .icon-label--micro {
+        font-size: .81rem;
+        margin-top: .2rem;
+        margin-bottom: .2rem;
+    }
+}
+
+@scope (.lity-content) {
+  .viewer {
+    display: flex;
+    align-items: center;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.image-gallery__block--overflow {
+    display: none;
+}

app/Assets/css/footer.css → app/Assets/css/old/footer.css

@@ -4,6 +4,10 @@ footer {
    font-weight: normal;
 }
 
+.global-footer .social-media-links__linkset a {
+    text-decoration: none;
+}
+
 #connectWithUs {
     font-weight: 300;
     font-size: smaller;