DOCS-3713: Update CSS

Author: npentrel

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,13 +502,15 @@ END MARKETING CSS
   display: inline;
   font-family: Public Sans,system-ui;
   font-size: 0.938rem !important;
+  font-weight: 300;
 }
 
 .expand-content {
   border-top: #d9d9d9 solid 0px;
   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,25 +1086,22 @@ 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 {
   background-color: #d7d7d9;
 }
 
 .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,17 +1156,19 @@ td > ul, td > ol {
 
 .horizontalheaders * .tab-content, .horizontalheaders > .tab-content {
   border: 1px solid rgb(215, 215, 217);
+  border-radius: 4px;
 }
 
 /* TAB CSS consistency END */
 
 /* 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,12 +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;
+  color: black;
 }
 
 #scrollButton {
@@ -1261,7 +1254,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 +1287,7 @@ img.embed-responsive.embed-responsive-16by9 {
 }
 
 img.frame {
-  border: 1px solid black;
+  border: 1px solid #E4E4E6;
 }
 
 .td-content > video {
@@ -1331,7 +1325,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 +1748,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 +1833,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 +1867,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 +1921,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 +2016,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 +2107,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 +2147,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 +2193,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 +2300,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 +2464,7 @@ hr {
   display: flex;
   flex-direction: column;
   border: 1px solid #d7d7d9;
+  border-radius: 4px;
   margin-right: -1px;
 }
 
@@ -2737,7 +2739,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 +3103,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