Skip to content

Commit fcce95c

Browse files
edwiniedwini
committed
css fixes and full-code
1 parent 681037c commit fcce95c

12 files changed

+185
-173
lines changed

‎src/css/helios-gcx.css‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,15 @@
4545
}
4646

4747
.nav-container {
48-
width: 280px;
48+
width: 294px;
49+
box-shadow: 2px 0px 0px var(--nav-border-color);
4950
transition: 150ms ease-in-out
5051
}
5152

5253
@media screen and (min-width:769px) {
5354
.nav-container {
54-
width: 280px;
55+
width: 294px;
56+
5557
}
5658
}
5759

@@ -289,6 +291,9 @@ ul#ds_sites_list li a:active {
289291

290292

291293
/*Card Styles*/
294+
.helios-card.mdc-card--outlined{
295+
margin-top: 4rem;
296+
}
292297

293298
feedback-stars {
294299
--spacing-space01h: 16px;
@@ -330,6 +335,7 @@ feedback-stars {
330335
padding: 24px;
331336
box-shadow: 0px 6px 8px rgb(32 41 58 / 8%), 0px 4px 10px rgb(32 41 58 / 8%), 0px 3px 12px rgb(32 41 58 / 12%);
332337
border-radius: 6px;
338+
width: 100%;
333339
}
334340

335341

@@ -407,7 +413,7 @@ gcx-full-code {
407413
flex: 0 1 50%;
408414
min-width: auto;
409415
position: relative;
410-
right: 0.75px;
416+
right: 1.05px;
411417
height: auto!important;
412418
}
413419

@@ -508,6 +514,7 @@ gcx-schema-bottom-sidebar {
508514

509515
.sidebar.small-container {
510516
width: 55px;
517+
box-shadow: 2px 0px 0px var(--nav-border-color);
511518
}
512519

513520
.small-container .small-nav-list {
@@ -612,6 +619,14 @@ label.collapse_label:after {
612619
}
613620

614621

622+
.dark-mode .collapse[type="checkbox"]+label {
623+
background-image: url(../img/open-white.svg);
624+
}
625+
626+
.dark-mode .collapse[type="checkbox"]:checked+label {
627+
background-image: url(../img/close-white.svg);
628+
}
629+
615630
/* Header Navbar */
616631

617632

@@ -736,20 +751,39 @@ label.switch_label:after {
736751

737752
/*Dark mode: Mobile Header */
738753

739-
.dark-mode .navbar-menu {
740-
background: var(--color-black);
741-
;
754+
/* gcx-schema-sample-app-gallery */
755+
.dark-mode gcx-schema-sample-app-gallery {
756+
--gcx-app-appgallery-h4-color: var(--white);
757+
--gcx-app-gallery-p-color: var(--color-interface-night-300);
758+
--gcx-sample-appgallery-card-background: var(--color-interface-night-900);
759+
--gcx-sample-appgallery-card-border: 2px solid #2E394E;
742760
}
743761

762+
.dark-mode .small-container gcx-schema-sample-app-gallery {
763+
--gcx-sample-appgallery-card-border: 0;
764+
}
765+
766+
.dark-mode .mdc-card--outlined{
767+
border: 2px solid #2E394E;
768+
}
769+
770+
.dark-mode .doc h2:not(.discrete){
771+
border-bottom: 1px solid #2E394E;
772+
}
744773

745774
/* Dark mode: Navigation*/
746775

747776
.dark-mode .nav {
748-
background: var(--color-jet-80);
777+
background: var(--color-interface-night-900);
778+
box-shadow: 2px 0px 0px #2e394e;
779+
}
780+
781+
.dark-mode .nav-container{
782+
box-shadow: 2px 0px 0px #2E394E;
749783
}
750784

751785
.dark-mode li.nav-item.toggler.is-active:hover {
752-
background: var(--color-jet-80);
786+
background: var(--color-interface-night-900);
753787
}
754788

755789
.dark-mode .nav-menu h3.title {
@@ -793,27 +827,34 @@ label.switch_label:after {
793827
}
794828

795829
.dark-mode .nav-item.is-current-page a {
796-
color: var(--color-black);
830+
color: var(--color-interface-night-300);
797831
}
798832

799833
.dark-mode .nav-item.is-current-page::before {
800-
background: var(--gray);
801-
border: 2px solid var(--gray);
834+
background: var(--color-interface-night-300);
835+
border: 2px solid var(--color-interface-night-300);
836+
}
837+
838+
.dark-mode .nav-item.is-current-page {
839+
background-color: var(--color-interface-night-800);
802840
}
803841

804842

843+
805844
/* Dark mode: Toolbar*/
806845

807846
.dark-mode .toolbar {
808847
color: var(--white);
809-
background-color: var(--color-jet-80);
848+
background-color: var(--color-interface-night-900);
810849
}
811850

812-
851+
.dark-mode .breadcrumbs li {
852+
color: var(--color-interface-night-300);
853+
}
813854
/* Dark mode: Body*/
814855

815856
.dark-mode body {
816-
background-color: var(--color-jet-80);
857+
background-color: var(--color-interface-night-900);
817858
}
818859

819860

@@ -832,22 +873,22 @@ label.switch_label:after {
832873
/*Dark mode: Footer*/
833874

834875
.dark-mode .wh_footer {
835-
background-color: var(--color-black);
876+
background-color: var(--color-interface-night-800);
836877
}
837878

838879

839880
/* Dark mode: Header*/
840881

841882
.dark-mode .header,
842883
.dark-mode .navbar {
843-
background-color: var(--color-black);
884+
background-color: var(--color-interface-night-800);
844885
}
845886

846887

847888
/* Dark mode: Top Bar*/
848889

849890
.dark-mode gcx-schema-topbar {
850-
--gcx-topbar-bgcolor: var(--gray-dark);
891+
--gcx-topbar-bgcolor: var(--color-blue-gray-4);
851892
;
852893
}
853894

@@ -860,46 +901,41 @@ label.switch_label:after {
860901
}
861902

862903

863-
/* Dark mode: buttons */
864-
865-
.dark-mode .ds_buttons_button {
866-
background: var(--gray-dark);
867-
}
868-
869-
.dark-mode .ds_buttons_button:hover {
870-
background: var(--gray);
871-
}
872-
873-
874904
/* Dark mode: cards*/
875905

876906
.dark-mode .doc {
877-
color: var(--white);
907+
color: var(--color-interface-night-300);
878908
}
879909

880910
.dark-mode .doc .sidebarblock {
881-
background: var(--gray-dark);
911+
background: var(--color-interface-night-800);
882912
}
883913

884914
.dark-mode .helios-card {
885-
background-color: var(--gray-dark);
915+
background-color: var(--color-interface-night-900);
886916
}
887917

888918
.dark-mode .doc pre:not(.highlight),
889919
.doc pre.highlight code {
890-
background: var(--gray-dark);
891-
box-shadow: inset 0 0 1.75px var(--gray-dark);
920+
background: var(--color-interface-night-800);
921+
box-shadow: inset 0 0 1.75px var(--color-interface-night-800);
892922
}
893923

894924
.dark-mode .doc .exampleblock>.content {
895-
background: var(--gray-dark);
925+
background: var(--color-interface-night-800);
896926
}
897927

898928
.dark-mode .doc .admonitionblock td.content {
899-
background: var(--gray-dark);
929+
/* background: var(--gray-dark);*/
900930
}
901931

932+
.dark-mode .doc .sidebarblock > .content > .title{
933+
color: var(--white);
934+
}
902935

936+
.dark-mode .doc .sidebarblock > .content > .title a{
937+
color: var(--white);
938+
}
903939
/*Dark Mode Aside Menu*/
904940

905941
.dark-mode .toc .toc-menu a {
@@ -991,17 +1027,18 @@ label.switch_label:after {
9911027
}
9921028

9931029
.dark-mode .enlighter-t-bootstrap4 .enlighter-k5 {
994-
color: #ffffff;
1030+
color: var(--white);
9951031
}
9961032

9971033
.dark-mode .doc .sect1.active {
998-
background-color: #20293A!important;
1034+
background-color: var(--color-interface-night-800);
9991035
}
10001036

10011037
.dark-mode .enlighter-t-bootstrap4 div.enlighter>div.enlighter-special {
1002-
background-color: #20293A!important;
1038+
background-color: var(--color-interface-night-800);
10031039
}
10041040

10051041
.dark-mode .enlighter-t-bootstrap4 .enlighter-k10 {
1006-
color: #ffffff!important;
1007-
}
1042+
color: var(--white)!important;
1043+
}
1044+

‎src/css/typeface-roboto-mono.css‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
@font-face {
2-
font-family: "Roboto Mono";
3-
font-style: normal;
4-
font-weight: 400;
5-
src:
6-
local("Roboto Mono"),
7-
local("RobotoMono-Regular"),
8-
url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff2) format("woff2"),
9-
url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff) format("woff");
2+
font-family: Roboto;
3+
font-style: normal;
4+
font-weight: 400;
5+
src: local("Roboto Regular"), local("Roboto-Regular"), url(../font/roboto-latin-400.woff2) format("woff2"), url(../font/roboto-latin-400.woff) format("woff")
106
}
117

128
@font-face {
13-
font-family: "Roboto Mono";
14-
font-style: normal;
15-
font-weight: 500;
16-
src:
17-
local("Roboto Mono Medium"),
18-
local("RobotoMono-Medium"),
19-
url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff2) format("woff2"),
20-
url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff) format("woff");
9+
font-family: Roboto;
10+
font-style: italic;
11+
font-weight: 400;
12+
src: local("Roboto Italic"), local("Roboto-Italic"), url(../font/roboto-latin-400italic.woff2) format("woff2"), url(../font/roboto-latin-400italic.woff) format("woff")
2113
}
14+
15+
@font-face {
16+
font-family: Roboto;
17+
font-style: normal;
18+
font-weight: 500;
19+
src: local("Roboto Medium"), local("Roboto-Medium"), url(../font/roboto-latin-500.woff2) format("woff2"), url(../font/roboto-latin-500.woff) format("woff")
20+
}
21+
22+
@font-face {
23+
font-family: Roboto;
24+
font-style: italic;
25+
font-weight: 500;
26+
src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url(../font/roboto-latin-500italic.woff2) format("woff2"), url(../font/roboto-latin-500italic.woff) format("woff")
27+
}
28+
29+
@font-face {
30+
font-family: Roboto Mono;
31+
font-style: normal;
32+
font-weight: 400;
33+
src: local("Roboto Mono"), local("RobotoMono-Regular"), url(../font/roboto-mono-latin-400.woff2) format("woff2"), url(../font/roboto-mono-latin-400.woff) format("woff")
34+
}
35+
36+
@font-face {
37+
font-family: Roboto Mono;
38+
font-style: normal;
39+
font-weight: 500;
40+
src: local("Roboto Mono Medium"), local("RobotoMono-Medium"), url(../font/roboto-mono-latin-500.woff2) format("woff2"), url(../font/roboto-mono-latin-500.woff) format("woff")
41+
}

‎src/css/typeface-roboto.css‎

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,20 @@
11
@font-face {
2-
font-family: "Roboto";
3-
font-style: normal;
4-
font-weight: 400;
5-
src:
6-
local("Roboto Regular"),
7-
local("Roboto-Regular"),
8-
url(~typeface-roboto/files/roboto-latin-400.woff2) format("woff2"),
9-
url(~typeface-roboto/files/roboto-latin-400.woff) format("woff");
2+
font-family: Roboto;
3+
font-style: normal;
4+
font-weight: 400;
5+
src: local("Roboto Regular"), local("Roboto-Regular"), url(../font/roboto-latin-400.woff2) format("woff2"), url(../font/roboto-latin-400.woff) format("woff")
106
}
117

128
@font-face {
13-
font-family: "Roboto";
14-
font-style: italic;
15-
font-weight: 400;
16-
src:
17-
local("Roboto Italic"),
18-
local("Roboto-Italic"),
19-
url(~typeface-roboto/files/roboto-latin-400italic.woff2) format("woff2"),
20-
url(~typeface-roboto/files/roboto-latin-400italic.woff) format("woff");
9+
font-family: Roboto;
10+
font-style: italic;
11+
font-weight: 400;
12+
src: local("Roboto Italic"), local("Roboto-Italic"), url(../font/roboto-latin-400italic.woff2) format("woff2"), url(../font/roboto-latin-400italic.woff) format("woff")
2113
}
2214

2315
@font-face {
24-
font-family: "Roboto";
25-
font-style: normal;
26-
font-weight: 500;
27-
src:
28-
local("Roboto Medium"),
29-
local("Roboto-Medium"),
30-
url(~typeface-roboto/files/roboto-latin-500.woff2) format("woff2"),
31-
url(~typeface-roboto/files/roboto-latin-500.woff) format("woff");
32-
}
33-
34-
@font-face {
35-
font-family: "Roboto";
36-
font-style: italic;
37-
font-weight: 500;
38-
src:
39-
local("Roboto Medium Italic"),
40-
local("Roboto-MediumItalic"),
41-
url(~typeface-roboto/files/roboto-latin-500italic.woff2) format("woff2"),
42-
url(~typeface-roboto/files/roboto-latin-500italic.woff) format("woff");
43-
}
16+
font-family: Roboto Mono;
17+
font-style: normal;
18+
font-weight: 400;
19+
src: local("Roboto Mono"), local("RobotoMono-Regular"), url(../font/roboto-mono-latin-400.woff2) format("woff2"), url(../font/roboto-mono-latin-400.woff) format("woff")
20+
}

0 commit comments

Comments
 (0)