From 591a460450eb76ab02da48a5e67d464746f10c0f Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Wed, 13 Oct 2021 10:06:12 +0200 Subject: [PATCH] docs: rehaul styles (#2505) * doc config * css * assets * header color * transparent navbar * prettier success colors * smaller navitems * table, toast styles * more toast colors --- docs/docusaurus.config.js | 7 +- docs/src/css/custom.css | 167 +++++++++++++++++++++++-- docs/static/img/zitadel-logo-dark.svg | 101 +++++++++++++++ docs/static/img/zitadel-logo-light.svg | 99 +++++++++++++++ 4 files changed, 359 insertions(+), 15 deletions(-) create mode 100644 docs/static/img/zitadel-logo-dark.svg create mode 100644 docs/static/img/zitadel-logo-light.svg diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index a4b870ec9..58e2db11d 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -11,11 +11,11 @@ module.exports = { themeConfig: { zoomSelector: '.markdown :not(em) > img', navbar: { - title: 'ZITADEL', + // title: 'ZITADEL', logo: { alt: 'ZITADEL logo', - src: 'img/zitadel-logo-solo-light.png', - srcDark: 'img/zitadel-logo-solo-darkdesign.svg', + src: 'img/zitadel-logo-dark.svg', + srcDark: 'img/zitadel-logo-light.svg', }, items: [ { @@ -62,7 +62,6 @@ module.exports = { ], }, footer: { - style: 'dark', links: [ { title: 'Community', diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 924023c71..a85d97cd8 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -6,35 +6,180 @@ */ /* You can override the default Infima variables here. */ -@import url('https://fonts.googleapis.com/css2?family=Lato'); +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'); :root { - --ifm-color-primary: #556cd1; - --ifm-color-primary-dark: #3e58cb; - --ifm-color-primary-darker: #3550c5; - --ifm-color-primary-darkest: #2c42a2; - --ifm-color-primary-light: #6c80d7; - --ifm-color-primary-lighter: #788ada; - --ifm-color-primary-lightest: #9aa8e4; + --ifm-navbar-background-color: #ffffff; + --ifm-footer-background-color: #f4f4f4; + --ifm-menu-color-background-active: #f2f5ff; + --ifm-menu-color-active: #5469d4; + --ifm-menu-color: #697386; + --ifm-footer-link-color: #000000; + --ifm-color-primary: #5469d4; + --ifm-color-primary-dark: #4d61cf; + --ifm-color-primary-darker: #4356c9; + --ifm-color-primary-darkest: #3a4cc3; /* 293bb9 */ + --ifm-color-primary-light: #6e80da; + --ifm-color-primary-lighter: #8796e1; + --ifm-color-primary-lightest: #aab4ea; --ifm-code-font-size: 95%; --ifm-font-family-base: 'Lato', sans-serif; --ifm-hero-background-color: var(--ifm-color-primary); --ifm-hero-text-color: var(--ifm-font-color-base-inverse); - --get-started: #FF2069; + --get-started: #ff2069; --get-started-bg-hover: var(--ifm-hero-background-color); --ifm-color-info: #4cb3d4; + --ifm-navbar-height: 56px; + --ifm-navbar-padding-vertical: 0; + --ifm-footer-color: #00000080; + --ifm-footer-padding-vertical: 50px; + --ifm-heading-font-weight: 500; + --ifm-heading-color: #000000; + --ifm-font-color-base: #6b7280; + --ifm-navbar-link-hover-color: #000000; + --ifm-heading-color: #000000; + --ifm-color-success-contrast-foreground: #0e6245; + --ifm-color-success-contrast-background: #cbf4c9; + --ifm-color-success-dark: #0e6245; + --ifm-color-info-dark: #6c8eef; + --ifm-color-info-contrast-background: #f0f3fa; + --ifm-color-secondary-contrast-background: #f0f3fa; + --ifm-alert-background-color-highlight: #620e0e; + --ifm-color-warning-dark: #ffc1c1; + --ifm-color-warning-contrast-background: #ffc1c1; + --ifm-color-warning-contrast-foreground: #620e0e; +} + +.react-toggle-track { + background-color: #ebedf0 !important; +} + +.footer__title { + font-size: 12px; + text-transform: uppercase; + color: #6b7280; +} + +.navbar { + background-color: hsla(0,0%,100%,.8); + backdrop-filter: saturate(110%) blur(5px); +} + +:root[data-theme="dark"] .navbar { + background-color: rgba(31,41,55,.5019607843137255); + backdrop-filter: saturate(110%) blur(5px); +} + +.navbar .navbar__items .navbar__item{ + font-size: 14px; + line-height: 1.25rem; + font-weight: 550; +} + +.menu__link { + font-size: 14px; +} + +.menu__link--sublist:after { + opacity: .3; +} + +:root[data-theme="dark"] .react-toggle-track { + background-color: #454a66 !important; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); + box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); + background-color: #ffffff; + border-radius: 8px; +} + +::-webkit-scrollbar { + width: 6px; + height: 6px; + background-color: #ffffff; +} + +::-webkit-scrollbar-thumb { + background-color: #737c8850; + border-radius: 8px; + cursor: pointer; +} + +:root[data-theme="dark"] ::-webkit-scrollbar-track { + background-color: transparent; +} + +:root[data-theme="dark"] ::-webkit-scrollbar { + background-color: transparent; +} + +:root[data-theme="dark"] ::-webkit-scrollbar-thumb { + background-color: #737c8850; +} + +h1 { + font-size: 2.2rem; +} + +h2 { + font-size: 1.8rem; +} + +.navbar__brand { + height: 40px; } :root[data-theme="dark"] { + /* --ifm-menu-color-active: #ffd0df; */ + /* 6e80da */ + --ifm-navbar-background-color: #1b2036; + --ifm-footer-background-color: #121430; + --ifm-menu-color-background-active: #ffffff10; + --ifm-menu-color-active: #ffffff; + --ifm-menu-color: #a3acb9; + --docsearch-searchbox-background: #454a66; + --docsearch-searchbox-focus-background: #454a66; + --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color); + --docsearch-hit-background: #454a66; + --docsearch-highlight-color: #5469d4; + --ifm-navbar-shadow: inset 0 -1px #303031; + --ifm-footer-link-color: #ffffff; + --ifm-color-emphasis-300: #ffffff20; + --ifm-color-primary: #ff2069; + --ifm-color-primary-dark: #ff1c61; + --ifm-color-primary-darker: #ff1856; + --ifm-color-primary-darkest: #ff134c; + --ifm-color-primary-light: #ff4180; + --ifm-color-primary-lighter: #ff6396; + --ifm-color-primary-lightest: #ff90b4; --ifm-background-color: #141735; --ifm-hero-background-color: #0F1022; --ifm-hero-text-color: var(--ifm-font-color-base); - --get-started-bg: --ifm-font-color-base; + --get-started-bg: var(--ifm-font-color-base); + --get-started: #059669; + --ifm-footer-color: #ffffff50; + --ifm-heading-color: #ffffff; + --ifm-font-color-base: #c1c9d2; + --ifm-navbar-link-hover-color: #ffffff; + --ifm-color-success-contrast-foreground: #cbf4c9; + --ifm-color-success-contrast-background: #4f566b; + --ifm-color-success-dark: #cbf4c9; + --ifm-color-info-dark: #6c8eef; + --ifm-color-info-contrast-background: #3c4257; + --ifm-table-stripe-background: #3c4257; + --ifm-color-secondary-contrast-background: #3c4257; + --ifm-code-background: #3c4257; + --ifm-alert-background-color-highlight: #ffc1c1; + --ifm-color-warning-dark: #4f566b; + --ifm-color-warning-contrast-background: #4f566b; + --ifm-color-warning-contrast-foreground: #ffc1c1; } .menu li li a { font-size: 14px; - padding: 2px 14px; + /* padding: 2px 14px; */ } .docusaurus-highlight-code-line { diff --git a/docs/static/img/zitadel-logo-dark.svg b/docs/static/img/zitadel-logo-dark.svg new file mode 100644 index 000000000..95ff80187 --- /dev/null +++ b/docs/static/img/zitadel-logo-dark.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/img/zitadel-logo-light.svg b/docs/static/img/zitadel-logo-light.svg new file mode 100644 index 000000000..7edc74890 --- /dev/null +++ b/docs/static/img/zitadel-logo-light.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +