Adapt several Bootstrap components to Jenkins design language.

Tippy tooltips via Bootstrap are now correctly styled.
Pagination (used by DataTables) also uses Jenkins colors now.
The new styling isa adapted for light and dark themes.

Author: uhafner

src/main/webapp/css/jenkins-style.css

@@ -7,6 +7,20 @@
     --bs-nav-tabs-border-width: 0;
 }
 
+.pagination {
+    --bs-pagination-active-color: var(--text-color);
+    --bs-pagination-active-bg: var(--item-background--active);
+    --bs-pagination-active-border-color: var(--item-background--active);
+
+    --bs-pagination-hover-color: var(--link-color);
+    --bs-pagination-hover-bg: var(--item-background--hover);
+    --bs-pagination-hover-border-color: var(--item-background--hover);
+
+    --bs-link-color: var(--link-color);
+    --bs-pagination-bg: var(--background);
+    --bs-pagination-border-color: var(--item-background--hover);
+}
+
 .modal {
     --bs-modal-color: var(--text-color);
     --bs-modal-bg: var(--background);
@@ -106,23 +120,23 @@ pre {
     display: flex;
 }
 
-.tooltip-inner {
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.8);
-}
-
-.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
-    border-top-color: rgba(0, 0, 0, 0.8);
+.tooltip {
+    --bs-tooltip-opacity: 1;
+    --bs-tooltip-arrow-width: 0px;
+    --bs-tooltip-arrow-height: 0px;
+    --bs-tooltip-font-size: 550;
+    --bs-tooltip-color: var(--text-color);
+    --bs-tooltip-padding-x: 0.8rem;
+    --bs-tooltip-padding-y: 0.45rem;
+    --bs-tooltip-max-width: min(50vw, 1000px) !important;
+    --bs-tooltip-border-radius: 0.66rem;
+    --bs-tooltip-bg: #f8f9fa;
 }
 
-.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
-    border-right-color: rgba(0, 0, 0, 0.8);
-}
-
-.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
-    border-bottom-color: rgba(0, 0, 0, 0.8);
-}
-
-.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
-    border-left-color: rgba(0, 0, 0, 0.8);
+.tooltip-inner {
+    background-color: var(--background);
+    font-weight: 550;
+    font-size: 0.75rem;
+    backdrop-filter: contrast(0.6) brightness(2.4) saturate(2) blur(15px);
+    box-shadow: 0 0 8px 2px rgba(0,0,30,.05), 0 0 1px 1px rgba(0,0,20,.025), 0 10px 20px rgba(0,0,20,.15);
 }