Merge Feature/rebranding styles into Main (#45)

* 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 * Rebranding styles This commit includes multiple changes for the rebranding styles, like changing some colors. * The right content bar should now be sticky to the page, making it always available with no need to scroll to the top * Collapse and Expand all buttons has been added for the left navbar * The GCX code component should now take all the entire height from the body space on the website. * The code blocks should no longer have bold font
riptano · Jan 27, 2023 · 863ef60 · 863ef60
1 parent 644bb74
commit 863ef60
Show file tree

Hide file tree

Showing 13 changed files with 228 additions and 37 deletions.
diff --git a/gcx/styles/src/css/helios-gcx-alerts.css b/gcx/styles/src/css/helios-gcx-alerts.css
@@ -10,57 +10,69 @@
 
 .doc .admonitionblock.caution tr {
     display: block;
-    background: #d8ddf2;
+    background: var(--color-white);
     border: 2px solid #3b4260;
     border-radius: 6px;
 }
 
 .doc .admonitionblock.caution td.content {
-    color: #3b4260;
+    color: var(--color-black);
 }
 
 .doc .admonitionblock.tip tr {
     display: block;
-    background: #F0F8F4;
-    border: 2px solid #008040;
+    background: var(--color-white);
+    border: 2px solid var(--color-green-700);
     border-radius: 6px;
 }
 
 .doc .admonitionblock.tip td.content {
-    color: #008040;
+    color: var(--color-black);
+}
+
+.dark-mode .doc .admonitionblock td.content{
+    background: var(--color-purple-700);
+    color: var(--color-white)!important;
 }
 
 .doc .admonitionblock.warning tr {
     display: block;
-    background: #F9F6F0;
-    border: 2px solid #916707;
+    background: var(--color-white);
+    border: 2px solid var(--color-red-500);
     border-radius: 6px;
 }
 
 .doc .admonitionblock.warning td.content {
-    color: #916707;
+    color: var(--color-black);
 }
 
 .doc .admonitionblock.important tr {
     display: block;
-    background: #FEF1F1;
-    border: 2px solid #D52424;
+    background: var(--color-white);
+    border: 2px solid var(--color-gray-neutral-700);
+    border-radius: 6px;
+}
+
+.dark-mode .doc .admonitionblock.important tr {
+    display: block;
+    background: var(--color-white);
+    border: 2px solid var(--color-gray-neutral-500);
     border-radius: 6px;
 }
 
 .doc .admonitionblock.important td.content {
-    color: #D52424;
+    color: var(--color-black);
 }
 
 .doc .admonitionblock.note tr {
     display: block;
-    background: #F3F8FF;
-    border: 2px solid #1E71D4;
+    background: var(--color-white);
+    border: 2px solid var(--color-green-700);
     border-radius: 6px;
 }
 
 .doc .admonitionblock.note td.content {
-    color: #1E71D4;
+    color: var(--color-black);
 }
 
 .doc .exampleblock>.content {

diff --git a/gcx/styles/src/css/helios-gcx-body.css b/gcx/styles/src/css/helios-gcx-body.css
@@ -33,6 +33,7 @@
 }
 
 .nav.pagination {
+    hyphens: none!important;
     margin-bottom: 20px;
 }
 
@@ -47,7 +48,7 @@
 }
 
 .full-articles {
-    flex: 0 1 50%;
+    flex: 0 1 49%;
     z-index: 999;
 }
 
@@ -87,7 +88,7 @@
 
 .doc .sect1 {
     margin-top: 1rem!important;
-    padding: 20px 0 20px 20px;
+    padding: 20px 10px 20px 20px;
     border-width: 1px 0px 1px 1px;
     border-style: solid;
     border-top-left-radius: 6px;
@@ -104,18 +105,22 @@
 }
 
 .doc .sect1 .paragraph {
-    padding: 0 1rem;
+    padding: 0 0rem;
 }
 
 .doc .sect1.active {
     background-color: #eceef0;
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
-    border-width: 1px 0px 1px 1px;
+    border-radius: 6px;
+    border-width: 1px;
     border-style: solid;
     border-color: var(--section-divider-color);
 }
 
+.doc {
+    hyphens: none!important;
+}
+
+
 /*Card Styles*/
 
 
@@ -201,3 +206,17 @@
         min-width: 0;
     }
 }
+
+/* Make right sidebar sticky */
+
+main > .content {
+    position: relative;
+}
+
+.doc .listingblock:hover pre.highlight  .source-toolbox {
+    visibility: visible!important;
+}
+
+.doc .listingblock:hover .source-toolbox {
+    visibility: hidden;
+}
diff --git a/gcx/styles/src/css/helios-gcx-enlighter.css b/gcx/styles/src/css/helios-gcx-enlighter.css
@@ -8,8 +8,13 @@ div.enlighter {
     /* for Chrome, Safari, and Opera */
 }
 
+.enlighter-t-bootstrap4 {
+    height: 100%;
+}
+
 .enlighter-default {
     font-family: 'Roboto Mono', monospace!important;
+    font-weight: lighter;
     margin: 0!important;
     overflow: scroll!important;
     -ms-overflow-style: none;
@@ -103,7 +108,7 @@ div.enlighter {
 }
 
 .dark-mode .doc .sect1.active {
-    background-color: var(--color-interface-night-800);
+    background-color: var(--color-purple-secondary-dark);
 }
 
 .dark-mode .enlighter-t-bootstrap4 div.enlighter>div.enlighter-special {

diff --git a/gcx/styles/src/css/helios-gcx-icons.css b/gcx/styles/src/css/helios-gcx-icons.css
@@ -1,19 +1,34 @@
-.doc .admonitionblock.tip .icon {
-    color: #008040;
+.doc .admonitionblock .icon {
+    padding: 0 1.5rem;;
 }
 
-.doc .admonitionblock.warning .icon {
-    color: #916707;
+.doc .admonitionblock.tip .icon,
+.doc .admonitionblock.note .icon {
+    color: var(--color-green-700);
+    background-color: var(--color-green-700);
+    border: 2px solid var(--color-green-700);
+}
+
+.doc .admonitionblock.warning .icon,
+.doc .admonitionblock.caution .icon {
+    color: var(--color-red-500);
+    background-color: var(--color-red-500);
+    border: 2px solid var(--color-red-500);
 }
 
 .doc .admonitionblock.important .icon {
-    color: #D52424;
+    color: var(--color-gray-neutral-700);
+    background-color: var(--color-gray-neutral-700);
+    border: 2px solid var(--color-gray-neutral-700);
 }
 
-.doc .admonitionblock.note .icon {
-    color: #1E71D4;
+.dark-mode .doc .admonitionblock.important .icon {
+    color: var(--color-gray-neutral-500);
+    background-color: var(--color-gray-neutral-500);
+    border: 2px solid var(--color-gray-neutral-500);
 }
 
+
 .doc .admonitionblock .icon i::after {
     color: white;
 }

diff --git a/gcx/styles/src/css/helios-gcx-images.css b/gcx/styles/src/css/helios-gcx-images.css
@@ -11,6 +11,7 @@
 
 @media only screen and (max-width: 600px) {
     .navbar-brand img {
-        height: 30px;
+        height: 24px;
+        margin-top: 3%;
     }
 }
diff --git a/gcx/styles/src/css/helios-gcx-links.css b/gcx/styles/src/css/helios-gcx-links.css
@@ -48,26 +48,30 @@
 }
 
 .doc .admonitionblock.caution a {
-    color: #3b4260!important;
+    color: var(--color-black)!important;
     text-decoration: underline;
 }
 
 .doc .admonitionblock.tip a {
-    color: #008040!important;
+    color: var(--color-black)!important;
     text-decoration: underline;
 }
 
 .doc .admonitionblock.warning a {
-    color: #916707!important;
+    color: var(--color-black)!important;
     text-decoration: underline;
 }
 
 .doc .admonitionblock.important a {
-    color: #D52424!important;
+    color: var(--color-black)!important;
     text-decoration: underline;
 }
 
 .doc .admonitionblock.note a {
-    color: #1E71D4!important;
+    color: var(--color-black)!important;
     text-decoration: underline;
+}
+
+.dark-mode .doc .admonitionblock.note a {
+    color: var(--color-white)!important;
 }
diff --git a/gcx/styles/src/css/helios-gcx-rightSidebar.css b/gcx/styles/src/css/helios-gcx-rightSidebar.css
@@ -24,4 +24,22 @@
 
 .dark-mode .toc .toc-menu a:hover {
     color: #c8cbd3;
+}
+
+/* Setting the content menu sticky */
+
+.toc.sidebar .toc-menu {
+    top: 0!important;
+    overflow-y: auto;
+    max-height: 100vh;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.toc.sidebar .toc-menu::-webkit-scrollbar {
+    display: none;
+}
+
+.dark-mode .sidebar.toc .toc-menu a:focus {
+    background-color: var(--color-purple-secondary-dark);
 }
diff --git a/gcx/styles/src/css/helios-gcx-sidebar.css b/gcx/styles/src/css/helios-gcx-sidebar.css
@@ -341,7 +341,7 @@ label.collapse_label:after {
 .dark-mode .nav-item[data-depth="2"]:hover,
 .dark-mode .nav-item[data-depth="3"]:hover,
 .dark-mode .nav-item[data-depth="4"]:hover {
-    background-color: #2e394e;
+    background-color: var(--color-purple-secondary-dark);
 }
 
 .dark-mode .nav-item[data-depth="1"].toggler:hover,
@@ -477,3 +477,87 @@ label.collapse_label:after {
     color: #6a7086;
 }
 
+.nav-controls {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 5px;
+}
+
+.nav-controls button {
+    width: 25px;
+    background: transparent;
+    color: var(--color-black);
+    border: 0.5px solid var(--section-divider-color);
+    margin-right: 5px;
+}
+
+.nav-controls button:hover {
+    background: var(--section-divider-color);
+}
+
+.dark-mode .nav-controls button {
+    color: var(--color-white);
+    border: 0.5px solid var(--color-purple-700);
+}
+
+.dark-mode .nav-controls button:hover {
+    background: var(--color-purple-700);
+}
+
+.small-container .nav-controls {
+    display: none;
+}
+
+#expandable,
+#collapsable {
+    position: relative;
+    display: inline-block;
+}
+
+/* Tooltip text */
+#expandable .tooltiptext,
+#collapsable .tooltiptext {
+    visibility: hidden;
+    width: 80px;
+    background-color: var(--color-black);
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -43px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 12px;
+  }
+
+.dark-mode #expandable .tooltiptext,
+.dark-mode #collapsable .tooltiptext {
+    border: 1px solid var(--color-white);
+  }
+
+ #collapsable .tooltiptext::after,
+ #expandable .tooltiptext::after {
+     content: "";
+     position: absolute;
+     top: 100%;
+     left: 50%;
+     margin-left: -5px;
+     border-width: 5px;
+     border-style: solid;
+     border-color: var(--color-black) transparent transparent transparent;
+   }
+
+ .dark-mode #collapsable .tooltiptext::after,
+ .dark-mode #expandable .tooltiptext::after {
+    border-color: var(--color-white) transparent transparent transparent;
+  }
+
+  #expandable:hover .tooltiptext,
+  #collapsable:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
diff --git a/gcx/styles/src/css/helios-gcx.css b/gcx/styles/src/css/helios-gcx.css
@@ -539,7 +539,7 @@ gcx-full .full-articles {
 }
 
 .doc .sect1 .paragraph {
-    padding: 0 1rem;
+    padding: 0 0rem;
 }
 
 .doc .sect1.active {