Refine cards UI

core/src/main/resources/jenkins/job/OverviewTab/index.jelly

@@ -35,9 +35,11 @@ THE SOFTWARE.
 
     <t:editableDescription permission="${it.CONFIGURE}" hideButton="true"/>
 
-    <j:forEach var="w" items="${it.widgets}">
-      <st:include it="${w}" page="index.jelly" />
-    </j:forEach>
+    <div class="jenkins-!-margin-bottom-2">
+      <j:forEach var="w" items="${it.widgets}">
+        <st:include it="${w}" page="index.jelly" />
+      </j:forEach>
+    </div>
 
     <l:card title="${%Legacy}">
       <div>

core/src/main/resources/lib/layout/card.jelly

@@ -41,14 +41,19 @@ THE SOFTWARE.
 
   <div class="jenkins-card" id="${attrs.id}">
     <div class="jenkins-card__title">
-      ${attrs.title}
+      <j:choose>
+        <j:when test="${attrs.expandable == null}">
+          ${attrs.title}
+        </j:when>
+        <j:otherwise>
+          <a href="${attrs.expandable}" class="jenkins-card__title-link jenkins-card__reveal">
+            ${attrs.title}
+            <l:icon src="symbol-chevron-forward" />
+          </a>
+        </j:otherwise>
+      </j:choose>
       <div class="jenkins-card__controls">
         <j:out value="${attrs.controls}"/>
-        <j:if test="${attrs.expandable != null}">
-          <a href="${attrs.expandable}" class="jenkins-card__reveal" tooltip="${%Expand}">
-            <l:icon src="symbol-expand" />
-          </a>
-        </j:if>
       </div>
     </div>
     <div class="jenkins-card__content">

core/src/main/resources/lib/layout/run-subpage.jelly

@@ -46,17 +46,17 @@ THE SOFTWARE.
               </a>
               <j:if test="${it.object.previousBuild != null}">
                 <a href="${buildUrl.previousBuildUrl}"
-                   class="jenkins-button jenkins-button--tertiary"
+                   class="jenkins-button jenkins-button--tertiary app-build__navigation-previous"
                    aria-label="${%Previous build}">
-                  <l:icon class="symbol-chevron-back" />
+                  <l:icon class="symbol-arrow-left" />
                 </a>
               </j:if>
               <h1>${it.object.displayName}</h1>
               <j:if test="${it.object.nextBuild != null}">
                 <a href="${buildUrl.nextBuildUrl}"
-                   class="jenkins-button jenkins-button--tertiary"
+                   class="jenkins-button jenkins-button--tertiary app-build__navigation-next"
                    aria-label="${%Next build}">
-                  <l:icon class="symbol-chevron-forward" />
+                  <l:icon class="symbol-arrow-right" />
                 </a>
               </j:if>
             </div>

src/main/scss/components/_cards.scss

@@ -1,52 +1,33 @@
+@use "../abstracts/mixins";
+
 $card-padding: 1rem;
 
 .jenkins-card {
   display: flex;
   flex-direction: column;
   position: relative;
   border-radius: var(--form-input-border-radius);
-  margin-bottom: calc(var(--section-padding) / 2);
   background: var(--card-background);
 
   &__title {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 $card-padding;
-    height: 50px;
+    height: 2.875rem;
     flex-shrink: 0;
     font-size: var(--font-size-sm) !important;
     font-weight: var(--font-bold-weight);
     width: 100%;
-    z-index: 1;
+    z-index: 2;
   }
 
   &__controls {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.4rem;
-    margin-right: -0.2rem;
-  }
-
-  &:not(:hover) {
-    .jenkins-card__unveil,
-    .jenkins-card__reveal {
-      color: var(--text-color-secondary);
-    }
-  }
-
-  @media (prefers-contrast: more) {
-    .jenkins-card__unveil,
-    .jenkins-card__reveal {
-      color: var(--text-color) !important;
-    }
-  }
-
-  &:hover {
-    .jenkins-card__reveal {
-      color: var(--text-color);
-    }
+    gap: 0.375rem;
+    margin-right: -0.4375rem;
   }
 
   &__content {
@@ -71,37 +52,96 @@ $card-padding: 1rem;
   }
 
   .jenkins-card__reveal {
+    @include mixins.item($border: false);
+
+    --button-background: transparent;
+
     display: flex;
     align-items: center;
     justify-content: center;
     margin-block: -0.5rem;
     min-height: 0;
     padding: 0;
-    width: 26px;
-    height: 26px;
-    border-radius: 0.33rem;
-    transition:
-      scale var(--standard-transition),
-      opacity var(--standard-transition);
+    width: 1.75rem;
+    height: 1.75rem;
+    color: var(--color);
 
     svg {
       width: 1rem;
       height: 1rem;
-      transition: color var(--standard-transition);
+      color: var(--text-color-secondary);
     }
 
+    &:hover,
+    &:active,
+    &:focus-visible,
+    &[aria-expanded="true"] {
+      svg {
+        color: var(--text-color);
+      }
+    }
+  }
+
+  &__title-link {
+    --inset: 0 -0.25rem 0 -0.5rem;
+
+    gap: 0.25rem;
+    width: unset !important;
+    height: unset !important;
+    margin-block: unset !important;
+    line-height: 1.75rem;
+
     &::before,
     &::after {
-      opacity: 0;
+      inset: var(--inset) !important;
     }
 
-    &:hover {
-      opacity: 0.75;
+    svg {
+      width: 0.875rem !important;
+      height: 0.875rem !important;
+      transition: var(--standard-transition);
+    }
+
+    &:hover,
+    &:active,
+    &:focus-visible {
+      --inset: 0 -0.5rem;
+
+      svg {
+        translate: 0.125rem 0;
+      }
     }
+  }
+
+  &__teaser {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    text-decoration: none !important;
+
+    svg {
+      width: 3rem;
+      height: 3rem;
+      margin-bottom: 0.5rem;
+
+      * {
+        stroke-width: 40px;
+      }
+    }
+
+    div {
+      font-weight: var(--font-bold-weight);
+      color: var(--text-color-secondary);
 
-    &:active {
-      scale: 95%;
-      opacity: 0.5;
+      &:first-of-type {
+        color: var(--text-color);
+      }
     }
   }
 

src/main/scss/components/_details.scss

@@ -12,11 +12,17 @@ $icon-size: 1.125rem;
   a.jenkins-details__item {
     @include mixins.item($border: false);
 
+    transition: color var(--standard-transition);
+
     &::before,
     &::after {
       inset: 0 -0.5rem;
       pointer-events: all;
     }
+
+    &:hover {
+      color: var(--text-color) !important;
+    }
   }
 
   &__item {

src/main/scss/components/_side-panel-widgets.scss

@@ -1,7 +1,7 @@
 @use "../abstracts/mixins";
 
 #side-panel .pane-frame {
-  border-radius: 1rem;
+  border-radius: var(--form-input-border-radius);
   background: var(--card-background);
   border: var(--card-border-width) solid var(--card-border-color);
   margin-left: 10px;

src/main/scss/pages/_build.scss

@@ -1,4 +1,5 @@
 @use "../base/breakpoints";
+@use "../components/cards";
 @use "../components/dialogs";
 
 .build-caption-progress-container {
@@ -13,8 +14,14 @@
   gap: calc(var(--section-padding) / 2);
   margin-bottom: calc(var(--section-padding) * -0.5);
 
-  .jenkins-card {
-    margin-bottom: 0; // Remove when .jenkins-card no longer has a default margin
+  & > * {
+    height: 350px;
+  }
+
+  // Legacy card shouldn't have a fixed height
+  .jenkins-card:last-of-type {
+    height: unset;
+    min-height: 350px;
   }
 
   @media (width < 1000px) {
@@ -34,7 +41,6 @@
 
     & > div {
       overflow: clip;
-      margin-bottom: 0; // Remove when .jenkins-card no longer has a default margin
 
       &:first-of-type {
         grid-column: span 1;
@@ -109,8 +115,8 @@
 
 .app-console-output-widget {
   overflow-y: auto;
-  margin: 0 -1rem -1rem;
-  padding: 0 1rem 1rem;
+  margin: 0 -#{cards.$card-padding} -#{cards.$card-padding};
+  padding: 0 cards.$card-padding cards.$card-padding;
 
   pre {
     background: transparent;
@@ -221,6 +227,7 @@ body:has(.app-build-bar) {
     aspect-ratio: 1;
     padding: 0;
     margin-inline: -1rem;
+    transition: translate var(--standard-transition);
 
     &:not(:hover) {
       color: color-mix(
@@ -238,8 +245,20 @@ body:has(.app-build-bar) {
     svg {
       width: 1rem;
       height: 1rem;
+
+      * {
+        stroke-width: 45px;
+      }
     }
   }
+
+  .app-build__navigation-previous:hover {
+    translate: -0.0625rem 0;
+  }
+
+  .app-build__navigation-next:hover {
+    translate: 0.0625rem 0;
+  }
 }
 
 .app-build-content {