From 02ddac28e4628d60683e487fd5b7c5c8c3e6b300 Mon Sep 17 00:00:00 2001 From: Alireza Date: Tue, 22 Jun 2021 17:12:00 -0400 Subject: [PATCH] feat: Add custom css for styling --- platform/docs/docusaurus.config.js | 8 +- platform/docs/src/css/custom.css | 122 ++++++++++++++++--- platform/docs/static/img/favicon.ico | Bin 3626 -> 5430 bytes platform/docs/static/img/logo-ohif.svg | 19 --- platform/docs/static/img/logo.svg | 1 - platform/docs/static/img/ohif-logo-light.svg | 15 +++ platform/docs/static/img/ohif-logo.svg | 15 +++ 7 files changed, 138 insertions(+), 42 deletions(-) delete mode 100644 platform/docs/static/img/logo-ohif.svg delete mode 100644 platform/docs/static/img/logo.svg create mode 100644 platform/docs/static/img/ohif-logo-light.svg create mode 100644 platform/docs/static/img/ohif-logo.svg diff --git a/platform/docs/docusaurus.config.js b/platform/docs/docusaurus.config.js index 3c2e3e948..6b58462c7 100644 --- a/platform/docs/docusaurus.config.js +++ b/platform/docs/docusaurus.config.js @@ -65,7 +65,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true'; }, onBrokenLinks: 'warn', onBrokenMarkdownLinks: 'warn', - favicon: 'img/docusaurus.ico', + favicon: 'img/favicon.ico', // customFields: { // description: // 'An optimized site generator in React. Docusaurus helps you to move fast and write content. Build documentation websites, blogs, marketing pages, and more.', @@ -257,11 +257,11 @@ const isI18nStaging = process.env.I18N_STAGING === 'true'; contextualSearch: true, }, navbar: { - hideOnScroll: true, + hideOnScroll: false, logo: { alt: 'OHIF Logo', - src: 'img/logo-ohif.svg', - srcDark: 'img/logo-ohif.svg', + src: 'img/ohif-logo-light.svg', + srcDark: 'img/ohif-logo.svg', }, items: [ { diff --git a/platform/docs/src/css/custom.css b/platform/docs/src/css/custom.css index 9b35ba59f..96c8377c2 100644 --- a/platform/docs/src/css/custom.css +++ b/platform/docs/src/css/custom.css @@ -1,5 +1,3 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"); - /* stylelint-disable docusaurus/copyright-header */ /** * Any CSS included here will be global. The classic template @@ -10,26 +8,35 @@ /* https://infima.dev/docs/utilities/colors */ /* https://docs.theochu.com/docusaurus/styling/ */ :root { - /*--ifm-color-primary: #25c2a0; + --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darkest: rgb(26, 136, 112); --ifm-color-primary-light: rgb(70, 203, 174); --ifm-color-primary-lighter: rgb(102, 212, 189); - --ifm-color-primary-lightest: rgb(146, 224, 208);*/ - --ifm-color-primary: #1c296d; - --ifm-color-primary-dark: #192562; - --ifm-color-primary-darker: #18235d; - --ifm-color-primary-darkest: #141d4c; - --ifm-color-primary-light: #1f2d78; - --ifm-color-primary-lighter: #202f7d; - --ifm-color-primary-lightest: #24358e; + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-font-color-base: #474747; + --ifm-color-primary: #0151d9; + --ifm-color-primary-dark: #0149c3; + --ifm-color-primary-darker: #0145b8; + --ifm-color-primary-darkest: #013998; + --ifm-color-primary-light: #0159ef; + --ifm-color-primary-lighter: #015dfa; + --ifm-color-primary-lightest: #1d71fe; + --ifm-color-secondary: #e8f7f7; --ifm-code-font-size: 95%; - --ifm-background-color: #f5ffff; - --ifm-background-surface-color: #f5ffff; - --ifm-menu-color: #002e85; + --ifm-background-color: #ffffff; + --ifm-background-surface-color: #ffffff; + --ifm-menu-color: #1e427e; + --ifm-code-background: #e8f7f7; + --ifm-toc-border-color: #ffffff; + --ifm-footer-background-color: #000000; + --ifm-table-stripe-background: #f4fbfb; + --ifm-color-warning: #e9e489; + --ifm-alert-color: #333333; } html[data-theme="dark"] { + --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); --ifm-color-primary: #5acce6; --ifm-color-primary-dark: #3ec3e2; --ifm-color-primary-darker: #30bfe0; @@ -37,17 +44,34 @@ html[data-theme="dark"] { --ifm-color-primary-light: #76d5ea; --ifm-color-primary-lighter: #84d9ec; --ifm-color-primary-lightest: #ade6f3; + --ifm-font-color-base: #ffffff; + --ifm-color-secondary: #050719; + --ifm-blockquote-color: #7bb2ce; --ifm-background-color: #080b2b; --ifm-background-surface-color: #080b2b; --ifm-menu-color: #7bb2ce; + --ifm-toc-link-color: #7bb2ce; + --ifm-code-background: #1c296d; + --ifm-toc-border-color: #080b2b; + --ifm-menu-color-active: #ffffff; + --ifm-footer-background-color: #000000; + --ifm-table-stripe-background: #060920; + --ifm-color-warning: #f1c55a; + --ifm-alert-color: #000000; } + +/* .docusaurus-highlight-code-line { background-color: rgb(72, 77, 91); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); } +*/ +/* Typography updates */ + +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"); html { font-size: 18px; @@ -67,16 +91,78 @@ h5 { font-family: "Inter", sans-serif; } -.menu { - font-weight: 400; - font-size: 1.0rem; +blockquote { + border-left: 3px solid #4042af; } -.menu__list-item .menu__list{ +/* Remove navigation shadow */ + +.navbar { + box-shadow: none; +} + +/* Navigation color and type updates */ + +.footer { + background-color: #000000; + color: #ffffff; +} + +.footer a { + color: #7bb2ce; +} + +.footer a:hover { + color: #ffffff; + text-decoration: none; +} + +.menu { font-weight: 400; font-size: 0.9rem; } .table-of-contents { font-size: 0.8rem; + font-weight: 600; +} + +.menu { + padding-top: 2rem !important; +} + +.menu__link--active { + color: var(--ifm-menu-color-active); + font-weight: 600; +} + +.table-of-contents__link:hover, +.table-of-contents__link:hover code, +.table-of-contents__link--active, +.table-of-contents__link--active code { + color: var(--ifm-menu-color-active); + text-decoration: none; + font-weight: 600; +} + +.badge--secondary { + --ifm-badge-background-color: var(--ifm-color-secondary); + --ifm-badge-border-color: var(--ifm-badge-background-color); + color: var(--ifm-color-primary); +} + +/* Alerts */ + +.alert--secondary { + --ifm-alert-background-color: var(--ifm-color-secondary); + --ifm-alert-color: var(--ifm-font-color-base); +} + +.admonition-icon svg { + fill: #0151d9; +} + + +.table-of-contents__left-border { + border-left: #013998; } diff --git a/platform/docs/static/img/favicon.ico b/platform/docs/static/img/favicon.ico index c01d54bcd39a5f853428f3cd5aa0f383d963c484..faaa2cf9c10ac519bf5ab9a7d4f29247d076bc9d 100644 GIT binary patch literal 5430 zcmeHJF=_)b5Zr`-OZx@ks*q=-aG8hX8F$>(euwcNT-o3oa69 zawet=hV10RXQ}=eFNuxDA^V`dsu_o?@508uk@ir0KiWh23E4H~TsjnA$j-fnPuc&- z`;)To18&J~C$inzLX5VMopq*yyg^uxN(*P8>$+#0_YLI2+A|hnw9&^mQwra3`|+Bt zK4R!yF{JYO-?$$1zHM7RT~;Fo``-9$EF%UJ@V|5JT3gpLF)+r9VycNTwpc#76rInf zeSSXtejcBn4=;Q>1HL@@aGNdS^GiKH6Y#U%ztsAX%I7|rIkME>`*Tvp|1SeM&tK~O zN#&z{WvxFG)X(z%m+zP8@3-9NFZcaRtskj;zBXo#^8Wwf(>s{f&-?jtcAOnfhtucP O{iBUO^i`hfSpF9%v4Y?L literal 3626 zcmb`Je@s(X6vrR`EK3%b%orErlDW({vnABqA zcfaS{d+xbU5JKp0*;0YOg+;Fl!eT)XRuapIwFLL`=imZCSon$`se`_<%@MB=M~KG+ z=EW^FL`w|Bo>*ktlaS^(fut!95`iG5u=SZ8nfDHO#GaTlH1-XG^;vsjUb^gWTVz0+ z^=WR1wv9-2oeR=_;fL0H7rNWqAzGtO(D;`~cX(RcN0w2v24Y8)6t`cS^_ghs`_ho? z{0ka~1Dgo8TfAP$r*ua?>$_V+kZ!-(TvEJ7O2f;Y#tezt$&R4 zLI}=-y@Z!grf*h3>}DUL{km4R>ya_I5Ag#{h_&?+HpKS!;$x3LC#CqUQ8&nM?X))Q zXAy2?`YL4FbC5CgJu(M&Q|>1st8XXLZ|5MgwgjP$m_2Vt0(J z&Gu7bOlkbGzGm2sh?X`){7w69Y$1#@P@7DF{ZE=4%T0NDS)iH`tiPSKpDNW)zmtn( zw;4$f>k)4$LBc>eBAaTZeCM2(iD+sHlj!qd z2GjRJ>f_Qes(+mnzdA^NH?^NB(^o-%Gmg$c8MNMq&`vm@9Ut;*&$xSD)PKH{wBCEC z4P9%NQ;n2s59ffMn8*5)5AAg4-93gBXBDX`A7S& zH-|%S3Wd%T79fk-e&l`{!?lve8_epXhE{d3Hn$Cg!t=-4D(t$cK~7f&4s?t7wr3ZP z*!SRQ-+tr|e1|hbc__J`k3S!rMy<0PHy&R`v#aJv?`Y?2{avK5sQz%=Us()jcNuZV z*$>auD4cEw>;t`+m>h?f?%VFJZj8D|Y1e_SjxG%J4{-AkFtT2+ZZS5UScS~%;dp!V>)7zi`w(xwSd*FS;Lml=f6hn#jq)2is4nkp+aTrV?)F6N z>DY#SU0IZ;*?Hu%tSj4edd~kYNHMFvS&5}#3-M;mBCOCZL3&;2obdG?qZ>rD|zC|Lu|sny76pn2xl|6sk~Hs{X9{8iBW zwiwgQt+@hi`FYMEhX2 - - - - - - Open Health Imaging Foundation - - - - - - - - - - - - diff --git a/platform/docs/static/img/logo.svg b/platform/docs/static/img/logo.svg deleted file mode 100644 index 9db6d0d06..000000000 --- a/platform/docs/static/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/platform/docs/static/img/ohif-logo-light.svg b/platform/docs/static/img/ohif-logo-light.svg new file mode 100644 index 000000000..a0414e29f --- /dev/null +++ b/platform/docs/static/img/ohif-logo-light.svg @@ -0,0 +1,15 @@ + + + ohif-logo + + \ No newline at end of file diff --git a/platform/docs/static/img/ohif-logo.svg b/platform/docs/static/img/ohif-logo.svg new file mode 100644 index 000000000..c0a876014 --- /dev/null +++ b/platform/docs/static/img/ohif-logo.svg @@ -0,0 +1,15 @@ + + + ohif-logo + + \ No newline at end of file