Merge rebranding styles into Main (#44)

* Initial rebranding styles Changed header and footer background color for both light and dark modes * Initial rebranding styles * Fixing styles The headings should no longer be underlined and cards should now show have black as font color in dark mode * Fixes in links The links and titles should now show properly in cards for both dark and light modes
riptano · Jan 11, 2023 · 4bd04d4 · 4bd04d4
1 parent 791677f
commit 4bd04d4
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 99 deletions.
diff --git a/gcx/styles/src/css/footer.css b/gcx/styles/src/css/footer.css
@@ -95,11 +95,19 @@
 /* Footer icons ------------------------------------------------------------ */
 
 .ds-bottom-logo-img {
+    position: relative;
+    top: 21%;
     content: url('../img/ds-logo-white.svg');
     width: 150px;
     height: auto;
 }
 
+@media only screen and (max-width: 647px) {
+    .ds-bottom-logo-img {
+        top: 30%;
+    }
+}
+
 @media only screen and (max-width: 480px) {
     .ds-bottom-logo-img {
         display: none;

diff --git a/gcx/styles/src/css/helios-gcx-body.css b/gcx/styles/src/css/helios-gcx-body.css
@@ -1,7 +1,7 @@
 /* Dark mode: Body*/
 
 .dark-mode body {
-    background-color: var(--color-interface-night-900);
+    background-color: var(--color-purple-background);
 }
 
 /* breadcrumbs */
@@ -11,7 +11,7 @@
 }
 
 .dark-mode .breadcrumbs li {
-    color: var(--color-interface-night-300);
+    color: var(--color-purple-secondary-darker);
 }
 
 
@@ -29,7 +29,7 @@
 
 .dark-mode .toolbar {
     color: var(--white);
-    background-color: var(--color-interface-night-900);
+    background-color: var(--color-purple-background);
 }
 
 .nav.pagination {
@@ -42,6 +42,9 @@
     }
 }
 
+.dark-mode .landing-card .content {
+    color: var(--color-black)
+}
 
 .full-articles {
     flex: 0 1 50%;
@@ -93,7 +96,7 @@
 }
 
 .dark-mode .doc .sect1 {
-    border-color: #20293a;
+    border-color: var(--color-purple-background);
 }
 
 .dark-mode .anchor {
@@ -133,10 +136,52 @@
     width: 100%;
 }
 
-.dark-mode .doc {
-    color: var(--color-interface-night-300);
+.doc {
+    color: var(--color-black);
 }
 
+.dark-mode .doc {
+    color: var(--color-white);
+}
+
+.doc h1,
+.doc h2,
+.doc h3,
+.doc h4,
+.doc h5,
+.doc h6 {
+    color: var(--color-black);
+};
+
+.doc h1 a,
+.doc h2 a,
+.doc h3 a,
+.doc h4 a,
+.doc h5 a,
+.doc h6 a {
+    color: var(--color-black);
+    text-decoration: none!important;
+};
+
+.dark-mode .doc h1,
+.dark-mode .doc h2,
+.dark-mode .doc h3,
+.dark-mode .doc h4,
+.dark-mode .doc h5,
+.dark-mode .doc h6 {
+    color: var(--color-white);
+};
+
+.dark-mode .doc h1 a,
+.dark-mode .doc h2 a,
+.dark-mode .doc h3 a,
+.dark-mode .doc h4 a,
+.dark-mode .doc h5 a,
+.dark-mode .doc h6 a {
+    color: var(--color-white);
+    text-decoration: none;
+};
+
 .dark-mode .doc .sidebarblock {
     background: var(--color-interface-night-800);
 }

diff --git a/gcx/styles/src/css/helios-gcx-buttons.css b/gcx/styles/src/css/helios-gcx-buttons.css
@@ -37,7 +37,7 @@
     padding: 8px 12px;
     width: 135px;
     height: 40px;
-    background: var(--blue);
+    background: var(--color-purple);
     border-radius: 6px;
     cursor: pointer;
 }
@@ -50,7 +50,7 @@ a.ds_buttons_button {
 }
 
 .ds_buttons_button:hover {
-    background: #7BB3F7;
+    background: var(--color-purple-100);
 }
 
 a.ds_buttons_button:hover {

diff --git a/gcx/styles/src/css/helios-gcx-code.css b/gcx/styles/src/css/helios-gcx-code.css
@@ -51,7 +51,7 @@ code::before {
 }
 
 .dark-mode .mdc-card--outlined {
-    border: 2px solid #2E394E;
+    border: 2px solid var(--color-purple-secondary-dark);
 }
 
 .helios-card.mdc-card--outlined {

diff --git a/gcx/styles/src/css/helios-gcx-footer.css b/gcx/styles/src/css/helios-gcx-footer.css
@@ -9,6 +9,7 @@ footer .container-fluid {
 .wh_footer {
     padding-bottom: 32px;
     font-size: 16px;
+    background-color: var(--color-black)!important;
 }
 
 .contact-us p {
@@ -21,6 +22,3 @@ footer .container-fluid {
 
 /*Dark mode: Footer*/
 
-.dark-mode .wh_footer {
-    background-color: var(--color-interface-night-800);
-}
diff --git a/gcx/styles/src/css/helios-gcx-header.css b/gcx/styles/src/css/helios-gcx-header.css
@@ -2,14 +2,14 @@
 
 .header {
     padding: 18px 32px;
-    background-color: var(--navbar-background);
+    background-color: var(--color-black);
 }
 
 /* Dark mode: Header*/
 
 .dark-mode .header,
 .dark-mode .navbar {
-    background-color: var(--color-interface-night-800);
+    background-color: var(--color-black);
 }
 
 .navbar-menu {
@@ -42,7 +42,7 @@
     justify-content: space-between;
     top: unset;
     position: unset;
-    background: var(--navbar-background);
+    background: var(--color-black);
     z-index: 4;
     height: 35px;
     padding-left: 0;
@@ -155,7 +155,7 @@
 /* Not Checked */
 
 input.switch+.slider svg:nth-of-type(1) path {
-    fill: var(--blue);
+    fill: var(--color-purple);
 }
 
 input.switch+.slider svg:nth-of-type(2) path {
@@ -170,7 +170,7 @@ input.switch:checked+.slider svg:nth-of-type(1) path {
 }
 
 input.switch:checked+.slider svg:nth-of-type(2) path {
-    fill: var(--blue);
+    fill: var(--color-purple);
 }
 
 input.switch:checked+.slider:before {

diff --git a/gcx/styles/src/css/helios-gcx-links.css b/gcx/styles/src/css/helios-gcx-links.css
@@ -1,14 +1,50 @@
+.doc a {
+    color: var(--color-purple-links);
+    text-decoration: underline;
+}
+
+.doc a:hover {
+    color: var(--color-purple-links);
+}
+
+.doc a.link {
+    color: var(--color-black);
+}
+
+.dark-mode .doc a {
+    color: var(--color-dark-mode-links);
+}
+
 .dark-mode .doc h1 a,
 .dark-mode .doc h2 a,
 .dark-mode .doc h3 a,
 .dark-mode .doc h4 a,
 .dark-mode .doc h5 a,
 .dark-mode .doc h6 a {
     color: var(--white);
+    text-decoration: none;
 }
 
-.dark-mode .doc .sidebarblock>.content>.title a {
+.doc h1 a,
+.doc h2 a,
+.doc h3 a,
+.doc h4 a,
+.doc h5 a,
+.doc h6 a {
     color: var(--white);
+    text-decoration: none;
+}
+
+.dark-mode .doc .sidebarblock>.content>.title a {
+    color: var(--black);
+}
+
+.dark-mode .sidebarblock a.xref.page{
+    color: var(--black);
+}
+
+.dark-mode .sidebarblock a{
+    color: var(--black)!important;
 }
 
 .doc .admonitionblock.caution a {

diff --git a/gcx/styles/src/css/helios-gcx-rightSidebar.css b/gcx/styles/src/css/helios-gcx-rightSidebar.css
@@ -2,6 +2,19 @@
     display: none;
 }
 
+.toc .toc-menu a:hover{
+    color: var(--color-purple-links);
+}
+
+.dark-mode .toc .toc-menu a:hover{
+    color: var(--color-dark-mode-links);
+}
+
+
+.toc-menu {
+    color: var(--color-black);
+}
+
 /*Dark Mode Aside Menu*/
 
 .dark-mode .toc .toc-menu a {

diff --git a/gcx/styles/src/css/helios-gcx-sidebar.css b/gcx/styles/src/css/helios-gcx-sidebar.css
@@ -99,16 +99,16 @@ li.nav-item.toggler.is-active:hover {
 
 .nav-item.is-current-page>a:before{
     content: "";
-    border: 2px solid #007bff;
+    border: 2px solid var(--color-purple);
     top: 0;
-    background: #007bff;
+    background: var(--color-purple);
     left: 0;
     position: absolute;
     height: 100%;
 }
 
 .nav-item.is-current-page>a{
-    background-color: #f6f8fa;
+    background-color: var(--color-purple-secondary-light);
 }
 
 .nav-item.toggler {
@@ -266,7 +266,7 @@ label.collapse_label:after {
     }
     .dark-mode .nav,
     .dark-mode .nav-container {
-        background: #20293a;
+        background: var(--color-purple-background);
         z-index: 9999;
     }
 }
@@ -283,11 +283,11 @@ label.collapse_label:after {
 
 /*New Nav Style - Firefox working*/
 .dark-mode .nav-item.toggler>a:hover, .dark-mode .nav-item a:hover{
-    background: #2e394e;
+    background: var(--color-purple-secondary-dark);
 }
 
 .nav-item.toggler>a:hover, .nav-item a:hover{
-    background: #f6f8fa;
+    background: var(--color-purple-secondary-light);
 }
 
 .nav-item.is-current-page[data-depth="1"]:not(.toggler)>a::before, .nav-item.is-current-page[data-depth="2"]:not(.toggler)>a::before {
@@ -349,7 +349,7 @@ label.collapse_label:after {
 .dark-mode .nav-item[data-depth="3"].toggler:hover,
 .dark-mode .nav-item[data-depth="4"].toggler:hover {
     color: #fff;
-    background-color: #2e394e;
+    background-color: var(--color-purple-secondary-dark);
 }
 
 .dark-mode .nav-item.is-current-page a:hover {
@@ -365,16 +365,16 @@ label.collapse_label:after {
 /* Dark mode: Navigation*/
 
 .dark-mode .nav {
-    background: var(--color-interface-night-900);
-    box-shadow: 2px 0px 0px #2e394e;
+    background: var(--color-purple-background);
+    box-shadow: 2px 0px 0px var(--color-purple-secondary-dark);
 }
 
 .dark-mode .nav-container {
-    box-shadow: 2px 0px 0px #2E394E;
+    box-shadow: 2px 0px 0px var(--color-purple-secondary-dark);
 }
 
 .dark-mode li.nav-item.toggler.is-active:hover {
-    background: var(--color-interface-night-900);
+    background: var(--color-purple-background);
 }
 
 
@@ -417,16 +417,16 @@ label.collapse_label:after {
 
 .dark-mode .nav-item.is-current-page>a:before{
     content: "";
-    border: 2px solid var(--color-interface-night-300);
+    border: 2px solid var(--color-purple-secondary-darker);
     top: 0;
-    background: var(--color-interface-night-300);
+    background: var(--color-purple-secondary-darker);
     left: 0;
     position: absolute;
     height: 100%;
 }
 
 .dark-mode .nav-item.is-current-page>a{
-    background-color: var(--color-interface-night-800);
+    background-color: var(--color-purple-secondary-dark);
 }
 
 /* DARK MODE LISTS */
@@ -442,7 +442,7 @@ label.collapse_label:after {
 .dark-mode .nav-item[data-depth="2"].toggler.is-active:hover,
 .dark-mode .nav-item[data-depth="3"].toggler.is-active:hover,
 .dark-mode .nav-item[data-depth="4"].toggler.is-active:hover {
-    background-color: #20293a;
+    background-color: var(--color-purple-background);
 }
 
 

diff --git a/gcx/styles/src/css/helios-gcx-styles.css b/gcx/styles/src/css/helios-gcx-styles.css
@@ -113,7 +113,7 @@ feedback-stars {
 }
 
 .dark-mode .helios-card {
-    background-color: var(--color-interface-night-900);
+    background-color: var(--color-purple-background);
 }
 
 .dark-mode .helios-text-field-label {