From 1894d74ebd38a745bb48602b0c646145fdb130c4 Mon Sep 17 00:00:00 2001
From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com>
Date: Mon, 17 Mar 2025 20:55:21 +0100
Subject: [PATCH] DOCS-3713: Update CSS

---
 assets/scss/_styles_project.scss | 140 +++++++++++++++++--------------
 static/css/prism.css             |  25 +++---
 2 files changed, 90 insertions(+), 75 deletions(-)

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index bad63b61a9..f2e19b6b2c 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -387,6 +387,7 @@ END MARKETING CSS
   border: 1px solid black;
   margin-right: 5px;
   padding: 1rem 1.25rem;
+  border-radius: 4px;
 
   @each $color, $value in $theme-colors {
     &-#{$color} {
@@ -413,7 +414,6 @@ END MARKETING CSS
 .alert-heading { // left margin for h4 in alerts
   margin-left: 0;
   letter-spacing: 0.0625em;
-  text-transform: uppercase;
 }
 .alert-heading::after { // blocks display h4 rules in alerts
   content:' ';
@@ -459,22 +459,18 @@ END MARKETING CSS
 
 .alert.alert-warning {
   border-color: red;
-  border-left: 3px solid red;
   background-color: rgb(249, 237, 234);
 }
-.alert.alert-note {
-  border-color: blue;
-  border-left: 3px solid blue;
-  background-color: rgb(229, 242, 254);
+.alert.alert-note, .alert.alert-info {
+  border-color: #E4E4E6;
+  background-color: #FBFBFC;
 }
 .alert.alert-caution {
   border-color: #f0b93f;
-  border-left: 3px solid #f0b93f;
   background-color: rgb(252, 244, 225);
 }
-.alert.alert-tip, .alert.alert-info {
-  border-color: #1be020;
-  border-left: 3px solid #1be020;
+.alert.alert-tip {
+  border-color: #E4E4E6;
   background-color: rgb(229, 249, 228);
 }
 
@@ -489,8 +485,11 @@ END MARKETING CSS
 /* START CSS FOR EXPANDER */
 
 .expand-label {
-  background-color: whitesmoke;
-  border: #d9d9d9 solid 1px;
+  background-color: #F7F7F8;
+  color: #4E4F52;
+  font-weight: 300;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   padding: 0.5rem 1rem 0.5rem 1rem;
   i {
     font-size: inherit !important;
@@ -503,6 +502,7 @@ END MARKETING CSS
   display: inline;
   font-family: Public Sans,system-ui;
   font-size: 0.938rem !important;
+  font-weight: 300;
 }
 
 .expand-content {
@@ -510,6 +510,7 @@ END MARKETING CSS
   border-left: #d9d9d9 solid 1px;
   border-right: #d9d9d9 solid 1px;
   border-bottom: #d9d9d9 solid 1px;
+  border-radius: 4px;
   background: whitesmoke;
   padding: 1rem;
   overflow: hidden;
@@ -686,7 +687,7 @@ details summary::-webkit-details-marker {
 
 .hover-card > a, .hover-card > .hovercardcontainer {
   border: 1px solid #dee2e6;
-  border-radius: 2px;
+  border-radius: 4px;
   padding: 1rem;
   margin: 0px;
   transition: all .2s;
@@ -786,6 +787,7 @@ details summary::-webkit-details-marker {
 // For some reason video elements don't calculate the height correctly. This adjusts for that.
 .hover-card-video {
   border: 1px solid white;
+  border-radius: 4px;
   margin-bottom: 0.5rem;
 }
 
@@ -799,7 +801,8 @@ details summary::-webkit-details-marker {
   max-width: 100%;
   aspect-ratio: 4 / 3;
   margin-bottom: 0 !important;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
 }
 
 .fit-contain.hover-card * img, .fit-contain.hover-card * video {
@@ -976,7 +979,8 @@ details summary::-webkit-details-marker {
 .hover-card * .pill {
  background-color: whitesmoke;
  padding: 0.1rem 0.25rem;
- border: 1px solid black;
+ border: 1px solid #E4E4E6;
+ border-radius: 4px;
  margin: 0.1rem;
  font-size: 0.833rem !important;
  font-weight: 400 !important;
@@ -1073,6 +1077,7 @@ td > ul, td > ol {
   gap: 1px;
   display: flex;
   flex-direction: row;
+  border-bottom: 1px solid #E4E4E6;
 }
 
 .horizontalheaders > .nav-tabs, .horizontalheaders * .nav-tabs {
@@ -1081,17 +1086,15 @@ td > ul, td > ol {
 }
 
 .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
-  border-color: rgb(156, 156, 164);
-  background-color: rgb(251, 251, 252);
+  border-bottom: 1px solid #000000;
+  font-weight: 600;
 }
 
 .horizontalheaders > .nav-tabs, .horizontalheaders * .nav-tabs {
   background-color: rgb(247, 247, 248);
-  border-bottom: 1px solid #d7d7d9;
 }
 
 .horizontalheaders > .nav-tabs * .nav-link {
-  background-color: rgb(247, 247, 248);
 }
 
 .horizontalheaders > .nav-tabs .nav-link:hover {
@@ -1099,7 +1102,6 @@ td > ul, td > ol {
 }
 
 .horizontalheaders * .nav-tabs .nav-link.active, .horizontalheaders * .nav-tabs .nav-link.active:hover {
-  background-color: white;
   border-top: unset;
   border-bottom: 1px solid white;
 }
@@ -1108,25 +1110,22 @@ td > ul, td > ol {
   border: 0px;
   border-style: solid;
   border-radius: 0;
-  border-left: 1px solid rgb(209, 213, 219);
-  border-right: 1px solid rgb(209, 213, 219);
-  margin-right: -1px;
-  border-bottom: 1px solid rgb(209, 213, 219);
-  border-top: 1px solid rgb(209, 213, 219);
-  padding: 0.5rem 1.5rem;
-  color: rgb(78, 79, 82);
+  padding: 0.25rem 0 0.25rem 0;
+  margin-right: 2rem;
+  color: #7A7C80;
 }
 
 .horizontalheaders .nav-tabs .nav-link, .horizontalheaders .nav-tabs .nav-link:hover {
   padding: 0.5rem 1.5rem;
+  margin-right: 0;
 }
 
-.nav-tabs .nav-link {
-  background-color: rgb(251, 251, 252);
+.nav-tabs .nav-link:hover {
+  background-color: rgb(247, 247, 248);
 }
 
-.nav-tabs .nav-link:hover {
-  background-color: rgb(241, 241, 244);
+.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
+  background-color: inherit !important;
 }
 
 .horizontalheaders * .nav-tabs .nav-link, .horizontalheaders * .nav-tabs .nav-link:hover {
@@ -1137,10 +1136,6 @@ td > ul, td > ol {
   border-right: 1px solid rgb(209, 213, 219);
 }
 
-.nav-tabs .nav-item {
-  margin-bottom: 0.5rem;
-}
-
 .horizontalheaders * .nav-tabs > .nav-item, .horizontalheaders > .nav-tabs > .nav-item {
   margin-bottom: 0rem;
 }
@@ -1153,10 +1148,6 @@ td > ul, td > ol {
   text-align: center;
 }
 
-.nav-tabs > .nav-item:last-child {
-  border-right: 1px solid rgb(209, 213, 219);
-}
-
 .tab-content {
   padding: .7rem;
   background-color: white;
@@ -1165,6 +1156,7 @@ td > ul, td > ol {
 
 .horizontalheaders * .tab-content, .horizontalheaders > .tab-content {
   border: 1px solid rgb(215, 215, 217);
+  border-radius: 4px;
 }
 
 /* TAB CSS consistency END */
@@ -1172,10 +1164,11 @@ td > ul, td > ol {
 /* scroll to top and github styling START */
 
 .docsbutton {
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px !important;
   color: black;
   border-radius: 0;
-  background-color: whitesmoke;
+  background-color: #FBFBFC;
   margin: 0.5rem;
   padding: 1rem 1.25rem;
   i {
@@ -1209,16 +1202,12 @@ td > ul, td > ol {
   width: 60px;
   opacity: 1;
   transition: opacity 0.5s;
-  background-color: #000000;
-  color: white;
+  background-color: #FBFBFC;
+  color: black;
 }
 
 #scrollButton > i, #chatButton > i {
-  color: white;
-}
-
-#scrollButton {
-  margin-right: 136px;
+  color: black;
 }
 
 @keyframes wiggle {
@@ -1261,7 +1250,8 @@ td > ul, td > ol {
 }
 
 .embed-responsive.embed-responsive-16by9 {
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
 }
 
 img.embed-responsive.embed-responsive-16by9 {
@@ -1293,7 +1283,7 @@ img.embed-responsive.embed-responsive-16by9 {
 }
 
 img.frame {
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
 }
 
 .td-content > video {
@@ -1331,7 +1321,8 @@ img.frame {
 .feedback--response {
   display: none;
   margin-top: 1em;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   padding: 1rem;
   max-width: 400px;
   margin: auto;
@@ -1753,9 +1744,9 @@ ul.sectionlist > li:hover {
   color: black;
   padding: 0.2rem 1rem;
   margin: 0.2rem;
-  border: 1px solid black;
-  border-radius: 0px;
-  -moz-border-radius: 0px;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
+  -moz-border-radius: 4px;
 }
 
 #platformarea-list .filterbutton {
@@ -1838,7 +1829,8 @@ ul.sectionlist > li:hover {
 
 .search-facets {
   width: 540px;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   margin: 0.2rem;
   padding: 0.2rem;
   position: absolute;
@@ -1871,7 +1863,8 @@ ul.sectionlist > li:hover {
 
 .search-facets * input {
   padding: 0.1rem 0.25rem;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   margin: 0.1rem;
   font-size: 0.833rem !important;
   font-weight: 400 !important;
@@ -1924,7 +1917,8 @@ span.ais-Pagination-link {
   text-decoration: none;
   color: black;
   padding: 0.2rem 1rem;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
 }
 
 a.ais-Pagination-link:hover {
@@ -2018,6 +2012,7 @@ a.ais-Pagination-link:hover {
 .searchhitsbox {
   margin-bottom: 1rem;
   border: 1px solid rgb(209, 213, 219);
+  border-radius: 4px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -2108,8 +2103,8 @@ a.ais-Pagination-link:hover {
 }
 
 .ais-SearchBox-input {
-  border: 1px solid black;
-  border-radius: 0;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   background-color: white;
   outline-offset: 0px;
   padding: 0.25rem 0.75rem;
@@ -2148,7 +2143,8 @@ input[type=search]::-webkit-search-cancel-button {
 .changelog .colorbox, .changelog .datebox {
   text-transform: uppercase;
   padding: 0.1rem 0.25rem;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.0;
@@ -2193,7 +2189,8 @@ input[type=search]::-webkit-search-cancel-button {
   color: black;
   padding: 0.2rem 1rem;
   margin: 0.2rem;
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
+  border-radius: 4px;
 }
 
 #added-button.active, #added-button:hover {
@@ -2299,9 +2296,9 @@ h3.body-header[style] {
 };
 
 .actions .hs-button.primary.large {
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
   color: black;
-  border-radius: 0;
+  border-radius: 4px;
   background-color: whitesmoke;
   padding: 0.25rem 0.5rem;
   i {
@@ -2463,6 +2460,7 @@ hr {
   display: flex;
   flex-direction: column;
   border: 1px solid #d7d7d9;
+  border-radius: 4px;
   margin-right: -1px;
 }
 
@@ -2737,7 +2735,7 @@ nav {
   padding: 0;
   padding-left: 1.25rem;
   margin: 0;
-  border-left: 1px solid black;
+  border-left: 1px solid #E4E4E6;
 }
 
 .td-topbar-sections > ul > li {
@@ -3101,3 +3099,17 @@ li.active-path.tutorial-heading > a {
 }
 
 // Platform landing pages END
+
+// Table styling START
+
+.table-striped tbody tr:nth-of-type(odd), .td-content>table tbody tr:nth-of-type(odd), .td-box .row.section>table tbody tr:nth-of-type(odd) {
+  background-color: unset;
+}
+
+.table th, .td-content>table th, .td-box .row.section>table th, .table td, .td-content>table td, .td-box .row.section>table td {
+  border-right: 1px solid #E4E4E6;
+  border-left: 1px solid #E4E4E6;
+  border-bottom: 1px solid #E4E4E6;
+}
+
+// Table styling END
\ No newline at end of file
diff --git a/static/css/prism.css b/static/css/prism.css
index 1199d948f2..0dc85cfec8 100644
--- a/static/css/prism.css
+++ b/static/css/prism.css
@@ -110,14 +110,16 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
     background-color: rgba(128, 128, 128, 0.2);
   }
   .line-numbers .line-numbers-rows {
-    border-right: 1px solid #d3d3d3;
+    border-right: 1px solid #FBFBFC;
+    border-radius: 4px;
   }
   .line-numbers-rows > span:before {
     color: #237893;
   }
 
   .code-toolbar {
-    border: 1px solid #dee2e6;
+    border: 1px solid #e4e4e6;
+    border-radius: 4px;
     background-color: white;
     margin-bottom: 1rem;
   }
@@ -125,19 +127,20 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
 /* Commandline prompt */
 
 .code-terminal {
-  border: 1px solid black;
-  background-color: #333;
+  border: 1px solid #F7F7F8;
+  border-radius: 4px;
+  background-color: #F7F7F8;
   margin-bottom: 1rem;
 }
 
 .code-terminal > pre[class*="language-"] {
-  background-color: #333 !important;
-  color: white;
+  background-color: #F7F7F8 !important;
+  color: #4E4F52;
 }
 
 .code-terminal > pre[class*="language-"] > code span {
   text-shadow: none;
-  color: white !important;
+  color: #4E4F52 !important;
 }
 
 .code-terminal > pre[class*="language-"] > code span > .token.class-name,
@@ -146,7 +149,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span {
 .code-terminal > pre[class*="language-"] > code span > .token.important,
 .code-terminal > pre[class*="language-"] > code span > .token.regex,
 .code-terminal > pre[class*="language-"] > code span > .token.variable {
-    color: white !important;
+    color: #4E4F52 !important;
 }
 
 
@@ -176,13 +179,13 @@ div.code-toolbar.code-terminal > .toolbar > .toolbar-item > span {
 } */
 
 .code-terminal > pre[class*="language-sh"] > code {
-  background-color: #333 !important;
-  color: white !important;
+  background-color: #F7F7F8 !important;
+  color: #4E4F52 !important;
   text-shadow: none !important;
 }
 
 .command-line-prompt {
-  background-color: #333;
+  background-color: #F7F7F8
   border-right: 1px solid #999;
   display: block;
   float: left;