Unify CSS and rebase on antora-default-ui

Refactor existing CSS to build on top of antora-default-ui CSS.
This update allows us to apply our CSS tweaks on top of the
standard Antora UI which should help us keep it in sync.

In addition, the updated CSS provides the following changes:

- Admon block styling has been updated to improve the look
- Reduced contrast is now used for the dark theme
- Callout formatting has been improved
- The breadcrumb area has been moved to allow the main
  <article> tag to have the `doc` class applied. Without this
  change the default Antora CSS does not apply correctly.
- Anchor hover positions have been improved.
- Toolbox and Tab buttons have hover colors.
- Tables can scroll horizontally when there is unbreakable
  content.
- Spring specific css is prefixed with `spring-` to make the
  files easier to find from browser devtools.
- Page bounce has been disabled

Closes spring-io#205

src/css/base.css

@@ -8,6 +8,7 @@ html {
   box-sizing: border-box;
   font-size: var(--body-font-size);
   height: 100%;
+  scroll-behavior: smooth;
 }
 
 @media screen and (min-width: 1024px) {
@@ -51,6 +52,22 @@ th {
   font-weight: var(--body-font-weight-bold);
 }
 
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
 em em { /* stylelint-disable-line */
   font-style: normal;
 }
@@ -72,23 +89,61 @@ button::-moz-focus-inner {
   padding: 0;
 }
 
+summary {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
 table {
   border-collapse: collapse;
   word-wrap: normal; /* table widths aren't computed as expected when word-wrap is enabled */
 }
 
-@supports (scrollbar-width: thin) {
-  body * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb-color) transparent;
-  }
+object[type="image/svg+xml"]:not([width]) {
+  width: fit-content;
 }
 
-body ::-webkit-scrollbar {
-  height: 0.25rem;
-  width: 0.25rem;
+::placeholder {
+  opacity: 0.5;
 }
 
-body ::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-color);
+@media (pointer: fine) {
+  @supports (scrollbar-width: thin) {
+    html {
+      scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+    }
+
+    body * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb-color) transparent;
+    }
+  }
+
+  html::-webkit-scrollbar {
+    background-color: var(--scrollbar-track-color);
+    height: 12px;
+    width: 12px;
+  }
+
+  body ::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--scrollbar-thumb-color);
+    border: 3px solid transparent;
+    border-radius: 12px;
+  }
+
+  body ::-webkit-scrollbar-thumb {
+    border-width: 1.75px;
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar_hover-thumb-color);
+  }
 }

src/css/body.css

@@ -3,7 +3,3 @@
     display: flex;
   }
 }
-
-body {
-  text-rendering: optimizeLegibility;
-}

src/css/breadcrumbs.css

@@ -1,7 +1,23 @@
+.breadcrumbs {
+  margin: var(--doc-margin);
+  max-width: var(--doc-max-width);
+}
+
+@media screen and (min-width: 1024px) {
+  .breadcrumbs {
+    margin: var(--doc-margin--desktop);
+    max-width: var(--doc-max-width--desktop);
+    min-width: 0;
+  }
+}
+
 .breadcrumbs {
   flex: 1 1;
-  padding: 0 0.5rem 0 0.75rem;
+  padding: 1.5rem 0 0rem;
   line-height: var(--nav-line-height);
+  color: var(--doc-font-color);
+  font-family: var(--font-family);
+  font-size: calc(16 / var(--rem-base) * 1rem);
 }
 
 a + .breadcrumbs {
@@ -11,9 +27,10 @@ a + .breadcrumbs {
 .breadcrumbs ul {
   display: flex;
   flex-wrap: wrap;
-  margin: 0;
-  padding: 0;
   list-style: none;
+  padding: 0 1rem 0rem;
+  margin-top: 0;
+  margin-bottom: -2rem;
 }
 
 .breadcrumbs li {