Skip to content

Commit 4bd04d4

Browse files
KenniMKenniM
authored
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
1 parent 791677f commit 4bd04d4

19 files changed

+262
-99
lines changed

‎gcx/styles/src/css/footer.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,19 @@
9595
/* Footer icons ------------------------------------------------------------ */
9696

9797
.ds-bottom-logo-img {
98+
position: relative;
99+
top: 21%;
98100
content: url('../img/ds-logo-white.svg');
99101
width: 150px;
100102
height: auto;
101103
}
102104

105+
@media only screen and (max-width: 647px) {
106+
.ds-bottom-logo-img {
107+
top: 30%;
108+
}
109+
}
110+
103111
@media only screen and (max-width: 480px) {
104112
.ds-bottom-logo-img {
105113
display: none;

‎gcx/styles/src/css/helios-gcx-body.css‎

Lines changed: 51 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Dark mode: Body*/
22

33
.dark-mode body {
4-
background-color: var(--color-interface-night-900);
4+
background-color: var(--color-purple-background);
55
}
66

77
/* breadcrumbs */
@@ -11,7 +11,7 @@
1111
}
1212

1313
.dark-mode .breadcrumbs li {
14-
color: var(--color-interface-night-300);
14+
color: var(--color-purple-secondary-darker);
1515
}
1616

1717

@@ -29,7 +29,7 @@
2929

3030
.dark-mode .toolbar {
3131
color: var(--white);
32-
background-color: var(--color-interface-night-900);
32+
background-color: var(--color-purple-background);
3333
}
3434

3535
.nav.pagination {
@@ -42,6 +42,9 @@
4242
}
4343
}
4444

45+
.dark-mode .landing-card .content {
46+
color: var(--color-black)
47+
}
4548

4649
.full-articles {
4750
flex: 0 1 50%;
@@ -93,7 +96,7 @@
9396
}
9497

9598
.dark-mode .doc .sect1 {
96-
border-color: #20293a;
99+
border-color: var(--color-purple-background);
97100
}
98101

99102
.dark-mode .anchor {
@@ -133,10 +136,52 @@
133136
width: 100%;
134137
}
135138

136-
.dark-mode .doc {
137-
color: var(--color-interface-night-300);
139+
.doc {
140+
color: var(--color-black);
138141
}
139142

143+
.dark-mode .doc {
144+
color: var(--color-white);
145+
}
146+
147+
.doc h1,
148+
.doc h2,
149+
.doc h3,
150+
.doc h4,
151+
.doc h5,
152+
.doc h6 {
153+
color: var(--color-black);
154+
};
155+
156+
.doc h1 a,
157+
.doc h2 a,
158+
.doc h3 a,
159+
.doc h4 a,
160+
.doc h5 a,
161+
.doc h6 a {
162+
color: var(--color-black);
163+
text-decoration: none!important;
164+
};
165+
166+
.dark-mode .doc h1,
167+
.dark-mode .doc h2,
168+
.dark-mode .doc h3,
169+
.dark-mode .doc h4,
170+
.dark-mode .doc h5,
171+
.dark-mode .doc h6 {
172+
color: var(--color-white);
173+
};
174+
175+
.dark-mode .doc h1 a,
176+
.dark-mode .doc h2 a,
177+
.dark-mode .doc h3 a,
178+
.dark-mode .doc h4 a,
179+
.dark-mode .doc h5 a,
180+
.dark-mode .doc h6 a {
181+
color: var(--color-white);
182+
text-decoration: none;
183+
};
184+
140185
.dark-mode .doc .sidebarblock {
141186
background: var(--color-interface-night-800);
142187
}

‎gcx/styles/src/css/helios-gcx-buttons.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
padding: 8px 12px;
3838
width: 135px;
3939
height: 40px;
40-
background: var(--blue);
40+
background: var(--color-purple);
4141
border-radius: 6px;
4242
cursor: pointer;
4343
}
@@ -50,7 +50,7 @@ a.ds_buttons_button {
5050
}
5151

5252
.ds_buttons_button:hover {
53-
background: #7BB3F7;
53+
background: var(--color-purple-100);
5454
}
5555

5656
a.ds_buttons_button:hover {

‎gcx/styles/src/css/helios-gcx-code.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ code::before {
5151
}
5252

5353
.dark-mode .mdc-card--outlined {
54-
border: 2px solid #2E394E;
54+
border: 2px solid var(--color-purple-secondary-dark);
5555
}
5656

5757
.helios-card.mdc-card--outlined {

‎gcx/styles/src/css/helios-gcx-footer.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ footer .container-fluid {
99
.wh_footer {
1010
padding-bottom: 32px;
1111
font-size: 16px;
12+
background-color: var(--color-black)!important;
1213
}
1314

1415
.contact-us p {
@@ -21,6 +22,3 @@ footer .container-fluid {
2122

2223
/*Dark mode: Footer*/
2324

24-
.dark-mode .wh_footer {
25-
background-color: var(--color-interface-night-800);
26-
}

‎gcx/styles/src/css/helios-gcx-header.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
.header {
44
padding: 18px 32px;
5-
background-color: var(--navbar-background);
5+
background-color: var(--color-black);
66
}
77

88
/* Dark mode: Header*/
99

1010
.dark-mode .header,
1111
.dark-mode .navbar {
12-
background-color: var(--color-interface-night-800);
12+
background-color: var(--color-black);
1313
}
1414

1515
.navbar-menu {
@@ -42,7 +42,7 @@
4242
justify-content: space-between;
4343
top: unset;
4444
position: unset;
45-
background: var(--navbar-background);
45+
background: var(--color-black);
4646
z-index: 4;
4747
height: 35px;
4848
padding-left: 0;
@@ -155,7 +155,7 @@
155155
/* Not Checked */
156156

157157
input.switch+.slider svg:nth-of-type(1) path {
158-
fill: var(--blue);
158+
fill: var(--color-purple);
159159
}
160160

161161
input.switch+.slider svg:nth-of-type(2) path {
@@ -170,7 +170,7 @@ input.switch:checked+.slider svg:nth-of-type(1) path {
170170
}
171171

172172
input.switch:checked+.slider svg:nth-of-type(2) path {
173-
fill: var(--blue);
173+
fill: var(--color-purple);
174174
}
175175

176176
input.switch:checked+.slider:before {

‎gcx/styles/src/css/helios-gcx-links.css‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,50 @@
1+
.doc a {
2+
color: var(--color-purple-links);
3+
text-decoration: underline;
4+
}
5+
6+
.doc a:hover {
7+
color: var(--color-purple-links);
8+
}
9+
10+
.doc a.link {
11+
color: var(--color-black);
12+
}
13+
14+
.dark-mode .doc a {
15+
color: var(--color-dark-mode-links);
16+
}
17+
118
.dark-mode .doc h1 a,
219
.dark-mode .doc h2 a,
320
.dark-mode .doc h3 a,
421
.dark-mode .doc h4 a,
522
.dark-mode .doc h5 a,
623
.dark-mode .doc h6 a {
724
color: var(--white);
25+
text-decoration: none;
826
}
927

10-
.dark-mode .doc .sidebarblock>.content>.title a {
28+
.doc h1 a,
29+
.doc h2 a,
30+
.doc h3 a,
31+
.doc h4 a,
32+
.doc h5 a,
33+
.doc h6 a {
1134
color: var(--white);
35+
text-decoration: none;
36+
}
37+
38+
.dark-mode .doc .sidebarblock>.content>.title a {
39+
color: var(--black);
40+
}
41+
42+
.dark-mode .sidebarblock a.xref.page{
43+
color: var(--black);
44+
}
45+
46+
.dark-mode .sidebarblock a{
47+
color: var(--black)!important;
1248
}
1349

1450
.doc .admonitionblock.caution a {

‎gcx/styles/src/css/helios-gcx-rightSidebar.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22
display: none;
33
}
44

5+
.toc .toc-menu a:hover{
6+
color: var(--color-purple-links);
7+
}
8+
9+
.dark-mode .toc .toc-menu a:hover{
10+
color: var(--color-dark-mode-links);
11+
}
12+
13+
14+
.toc-menu {
15+
color: var(--color-black);
16+
}
17+
518
/*Dark Mode Aside Menu*/
619

720
.dark-mode .toc .toc-menu a {

‎gcx/styles/src/css/helios-gcx-sidebar.css‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,16 @@ li.nav-item.toggler.is-active:hover {
9999

100100
.nav-item.is-current-page>a:before{
101101
content: "";
102-
border: 2px solid #007bff;
102+
border: 2px solid var(--color-purple);
103103
top: 0;
104-
background: #007bff;
104+
background: var(--color-purple);
105105
left: 0;
106106
position: absolute;
107107
height: 100%;
108108
}
109109

110110
.nav-item.is-current-page>a{
111-
background-color: #f6f8fa;
111+
background-color: var(--color-purple-secondary-light);
112112
}
113113

114114
.nav-item.toggler {
@@ -266,7 +266,7 @@ label.collapse_label:after {
266266
}
267267
.dark-mode .nav,
268268
.dark-mode .nav-container {
269-
background: #20293a;
269+
background: var(--color-purple-background);
270270
z-index: 9999;
271271
}
272272
}
@@ -283,11 +283,11 @@ label.collapse_label:after {
283283

284284
/*New Nav Style - Firefox working*/
285285
.dark-mode .nav-item.toggler>a:hover, .dark-mode .nav-item a:hover{
286-
background: #2e394e;
286+
background: var(--color-purple-secondary-dark);
287287
}
288288

289289
.nav-item.toggler>a:hover, .nav-item a:hover{
290-
background: #f6f8fa;
290+
background: var(--color-purple-secondary-light);
291291
}
292292

293293
.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 {
349349
.dark-mode .nav-item[data-depth="3"].toggler:hover,
350350
.dark-mode .nav-item[data-depth="4"].toggler:hover {
351351
color: #fff;
352-
background-color: #2e394e;
352+
background-color: var(--color-purple-secondary-dark);
353353
}
354354

355355
.dark-mode .nav-item.is-current-page a:hover {
@@ -365,16 +365,16 @@ label.collapse_label:after {
365365
/* Dark mode: Navigation*/
366366

367367
.dark-mode .nav {
368-
background: var(--color-interface-night-900);
369-
box-shadow: 2px 0px 0px #2e394e;
368+
background: var(--color-purple-background);
369+
box-shadow: 2px 0px 0px var(--color-purple-secondary-dark);
370370
}
371371

372372
.dark-mode .nav-container {
373-
box-shadow: 2px 0px 0px #2E394E;
373+
box-shadow: 2px 0px 0px var(--color-purple-secondary-dark);
374374
}
375375

376376
.dark-mode li.nav-item.toggler.is-active:hover {
377-
background: var(--color-interface-night-900);
377+
background: var(--color-purple-background);
378378
}
379379

380380

@@ -417,16 +417,16 @@ label.collapse_label:after {
417417

418418
.dark-mode .nav-item.is-current-page>a:before{
419419
content: "";
420-
border: 2px solid var(--color-interface-night-300);
420+
border: 2px solid var(--color-purple-secondary-darker);
421421
top: 0;
422-
background: var(--color-interface-night-300);
422+
background: var(--color-purple-secondary-darker);
423423
left: 0;
424424
position: absolute;
425425
height: 100%;
426426
}
427427

428428
.dark-mode .nav-item.is-current-page>a{
429-
background-color: var(--color-interface-night-800);
429+
background-color: var(--color-purple-secondary-dark);
430430
}
431431

432432
/* DARK MODE LISTS */
@@ -442,7 +442,7 @@ label.collapse_label:after {
442442
.dark-mode .nav-item[data-depth="2"].toggler.is-active:hover,
443443
.dark-mode .nav-item[data-depth="3"].toggler.is-active:hover,
444444
.dark-mode .nav-item[data-depth="4"].toggler.is-active:hover {
445-
background-color: #20293a;
445+
background-color: var(--color-purple-background);
446446
}
447447

448448

‎gcx/styles/src/css/helios-gcx-styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ feedback-stars {
113113
}
114114

115115
.dark-mode .helios-card {
116-
background-color: var(--color-interface-night-900);
116+
background-color: var(--color-purple-background);
117117
}
118118

119119
.dark-mode .helios-text-field-label {

0 commit comments

Comments
 (0)