diff --git a/package.json b/package.json index 4ab37572..40d88be6 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "dependencies": { "@antora/cli": "^2.3.3", "@antora/site-generator-default": "^2.3.3", - "@neo4j-ndl/base": "^0.8.3", + "@neo4j-ndl/base": "^2.0.0", "font-awesome": "^4.7.0" }, "husky": { diff --git a/preview-src/admonitions.adoc b/preview-src/admonitions.adoc new file mode 100644 index 00000000..2f0a389d --- /dev/null +++ b/preview-src/admonitions.adoc @@ -0,0 +1,182 @@ += Admonitions + + + +== NOTE + +[NOTE] +==== +You've been down _this_ road before. + +`$ npm i -g @antora/cli @antora/site-generator-default` + +* list 1 +* list 2 + +Link example: link:https://neo4j.com[Neo4j] + +Xref example: xref:alpha.adoc[] +==== + +Cum dicat putant ne. +Est in reque homero principes, meis deleniti mediocrem ad has. +Altera atomorum his ex, has cu elitr melius propriae. +Eos suscipit scaevola at. + +== TIP + +Cum dicat putant ne. +Est in reque homero principes, meis deleniti mediocrem ad has. +Altera atomorum his ex, has cu elitr melius propriae. + +[TIP] +==== +This oughta do it! + +Cum dicat putant ne. +Est in reque homero principes, meis deleniti mediocrem ad has. +Altera atomorum his ex, has cu elitr melius propriae. +Eos suscipit scaevola at. +==== + + + +== IMPORTANT + +[IMPORTANT] +==== +Don't forget this step! + + $ npm i -g @antora/cli @antora/site-generator-default + +* list 1 +* list 2 + +Link example: link:https://neo4j.com[Neo4j] + +Xref example: xref:alpha.adoc[] +==== + + + +== CAUTION + +[CAUTION] +==== +[#inline]#I wouldn't try that if I were you.# + + $ npm i -g @antora/cli @antora/site-generator-default + +* list 1 +* list 2 + +Link example: link:https://neo4j.com[Neo4j] + +Xref example: xref:alpha.adoc[] +==== + +== WARNING + +[WARNING] +==== +Watch out! + + $ npm i -g @antora/cli @antora/site-generator-default + +* list 1 +* list 2 + +Link example: link:https://neo4j.com[Neo4j] + +Xref example: xref:alpha.adoc[] +==== + + + +== TIP + +.Key Points to Remember +[TIP] +==== +If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command. + + $ npm i -g @antora/cli @antora/site-generator-default + +* list 1 +* list 2 + +Link example: link:https://neo4j.com[Neo4j] + +Xref example: xref:alpha.adoc[] +==== + +== Admonition block margins + +[NOTE] +==== +Admonition block with a single paragraph of text. +==== + +[NOTE] +==== +Admonition block with multiple paragraphs. + +This is the second paragraph. +==== + +[NOTE] +==== +Admonition block with multiple different elements. + +- List item 1 +- List item 2 + +Paragraph of text. +==== + +[NOTE] +==== +Admonition block with multiple different elements. + +- List item 1 +- List item 2 + +``` +$ npm i -g @antora/cli @antora/site-generator-default +``` +==== + +.Admonition with title text +[NOTE] +==== +Admonition block with multiple different elements. + +- List item 1 +- List item 2 + +``` +$ npm i -g @antora/cli @antora/site-generator-default +``` +==== + +[WARNING] +==== +``` +$ npm i -g @antora/cli @antora/site-generator-default +``` + +``` +$ npm i -g @antora/cli @antora/site-generator-default +``` +==== + +.Admonition with title text +[WARNING] +==== +``` +$ npm i -g @antora/cli @antora/site-generator-default +``` +==== + +Nominavi luptatum eos, an vim hinc philosophia intellegebat. +Eu mea inani iriure. \ No newline at end of file diff --git a/preview-src/docs-roles.adoc b/preview-src/docs-roles.adoc index 3a14bf8e..b59c1001 100644 --- a/preview-src/docs-roles.adoc +++ b/preview-src/docs-roles.adoc @@ -83,7 +83,11 @@ Other blocks can have deprecated roles added. .Example block title ==== -Example 1 content - this example is not deprecated +Example 1 content - this example is not deprecated. + +This is a second paragraph in the example. + +This is the third. ==== [role=deprecated] @@ -132,16 +136,13 @@ Directed Undirected [.supported] -Monopartite +link:example.com[Heterogeneous nodes] -[.not-supported] -Multi-partite +[.allowed] +Heterogeneous relationships [.not-supported] -Weighted - -[.supported] -Unweighted +Weighted relationships -- == List of procedures @@ -161,4 +162,30 @@ Unweighted Admin only +++ -|=== \ No newline at end of file +|=== + +== Examples + +=== Copying the data store of a database + +You can use `neo4j-admin database copy` to copy the data store of a database, for example, `neo4j`. + +. Stop the database named `neo4j`: ++ +[source, cypher, role=noplay] +---- +STOP DATABASE neo4j +---- + +. Copy the data store from `neo4j` to a new database called `database-copy`. ++ +[TIP] +==== +If you do not need an actual copy of the database, you can use the same values for `` and ``. +The command replaces the original database with the newly created copy. +==== ++ +[source, shell] +---- +bin/neo4j-admin database copy neo4j database-copy +---- diff --git a/preview-src/index.adoc b/preview-src/index.adoc index 97d19420..ea95298f 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -49,6 +49,19 @@ Author Name You should be familiar with link:/developer/get-started/graph-database[graph database] concepts and the link:/developer/get-started/graph-database#property-graph[property graph model]. It is also helpful to know the differences between link:/developer/graph-db-vs-rdbms/[relational and graph concepts] and their link:/developer/relational-to-graph-modeling/[data models]. +== Heading + +Lorem ipsum dolor sic est. + + +== Quotes + +[quote,Citation] +____ +Insert fantastically profound thought here +____ + + [.procedures,%headers, cols="5,2,1"] |=== | Qualified Name | Type | Release @@ -612,125 +625,6 @@ Est in reque homero principes, meis deleniti mediocrem ad has. Altera atomorum his ex, has cu elitr melius propriae. Eos suscipit scaevola at. -[TIP] -This oughta do it! - -Cum dicat putant ne. -Est in reque homero principes, meis deleniti mediocrem ad has. -Altera atomorum his ex, has cu elitr melius propriae. -Eos suscipit scaevola at. - -[NOTE] -==== -You've been down _this_ road before. - - $ npm i -g @antora/cli @antora/site-generator-default -==== - -Cum dicat putant ne. -Est in reque homero principes, meis deleniti mediocrem ad has. -Altera atomorum his ex, has cu elitr melius propriae. -Eos suscipit scaevola at. - -[WARNING] -==== -Watch out! - - $ npm i -g @antora/cli @antora/site-generator-default -==== - -[CAUTION] -==== -[#inline]#I wouldn't try that if I were you.# - - $ npm i -g @antora/cli @antora/site-generator-default -==== - -[IMPORTANT] -==== -Don't forget this step! - - $ npm i -g @antora/cli @antora/site-generator-default -==== - -.Key Points to Remember -[TIP] -==== -If you installed the CLI and the default site generator globally, you can upgrade both of them with the same command. - - $ npm i -g @antora/cli @antora/site-generator-default -==== - -== Admonition block margins - -[NOTE] -==== -Admonition block with a single paragraph of text. -==== - -[NOTE] -==== -Admonition block with multiple paragraphs. - -This is the second paragraph. -==== - -[NOTE] -==== -Admonition block with multiple different elements. - -- List item 1 -- List item 2 - -Paragraph of text. -==== - -[NOTE] -==== -Admonition block with multiple different elements. - -- List item 1 -- List item 2 - -``` -$ npm i -g @antora/cli @antora/site-generator-default -``` -==== - -.Admonition with title text -[NOTE] -==== -Admonition block with multiple different elements. - -- List item 1 -- List item 2 - -``` -$ npm i -g @antora/cli @antora/site-generator-default -``` -==== - -[WARNING] -==== -``` -$ npm i -g @antora/cli @antora/site-generator-default -``` - -``` -$ npm i -g @antora/cli @antora/site-generator-default -``` -==== - -.Admonition with title text -[WARNING] -==== -``` -$ npm i -g @antora/cli @antora/site-generator-default -``` -==== - -Nominavi luptatum eos, an vim hinc philosophia intellegebat. -Eu mea inani iriure. [discrete] == Voluptua singulis @@ -809,178 +703,6 @@ An advantage of enhancing graph visualization with these algorithms is that we c == Pad Headers -== Labels - -++++ -
- Default Label Color -
- -
- AuraDB Enterprise -
- -
- Not Available on Aura -
- -
- APOC Core -
- -
- Core -
- -
- APOC Full -
- -
- Full -
- -
- Current -
- -
- Function -
- -
- Procedure -
- -
- Beginner -
- -
- Free -
- -
- Enterprise Edition -
- -
- Enterprise -
- -
- Professional -
- -
- Enterprise Only -
- -
- Aura -
- -
- New -
- -
- Yes -
- -
- Renamed -
- -
- Changed -
- -
- Added -
- -
- Updated -
- -
- Removed -
- -
- No -
- -
- N / A -
- -
- Discontinued -
- -
- Deprecated -
- -
- Warning! -
- -
- Danger! -
- -
- Recommended -
- -
- Default -
- -
- Windows -
- -
- Linux -
- -
- Unix -
- -
- Mac OS -
- -
- Syntax -
- -
- Functionality -
- -
- Cypher -
- -
- CORE -
-
- READ_REPLICA -
-
- SINGLE -
- -++++ - - // tag::glossary[] [discrete.glossary] diff --git a/preview-src/labels.adoc b/preview-src/labels.adoc new file mode 100644 index 00000000..a9589f89 --- /dev/null +++ b/preview-src/labels.adoc @@ -0,0 +1,217 @@ += Labels + + +== All the labels + +++++ +
+ Default Label Color +
+ +
+ Current +
+ +
+ AuraDB Enterprise +
+ +
+ Enterprise Edition +
+ +
+ Enterprise +
+ +
+ Professional +
+ +
+ Enterprise Only +
+ +
+ Aura +
+ +
+ Recommended +
+ +
+ Default +
+ +
+ New +
+ +
+ Yes +
+ +
+ Renamed +
+ +
+ Changed +
+ +
+ Added +
+ +
+ Updated +
+ +
+ Not Available on Aura +
+ +
+ Removed +
+ +
+ No +
+ +
+ N / A +
+ +
+ Warning! +
+ +
+ Danger! +
+ +
+ Discontinued +
+ +
+ Deprecated +
+ +
+ Alpha +
+ +
+ Beta +
+ +
+ APOC Core +
+ +
+ Core +
+ +
+ APOC Full +
+ +
+ Full +
+ +
+ Function +
+ +
+ Procedure +
+ +
+ Beginner +
+ +
+ Free +
+ +
+ Windows +
+ +
+ Linux +
+ +
+ Unix +
+ +
+ Mac OS +
+ +
+ Syntax +
+ +
+ Functionality +
+ +
+ Cypher +
+ +
+ CORE +
+ +
+ READ_REPLICA +
+ +
+ SINGLE +
+ +++++ + +== Tables with labels! + + +++++ + + + ++++ + + + + + + + + + + + + + + +
Table 44. dbms.cluster.protocols() Enterprise Edition

Description

+

Overview of installed protocols.

+
+
+

Note that this can only be executed on a cluster core member.

+

Signature

dbms.cluster.protocols() :: (orientation :: STRING, remoteAddress :: STRING, applicationProtocol :: STRING, applicationProtocolVersion :: INTEGER, modifierProtocols :: STRING)

Mode

READ

+ +++++ \ No newline at end of file diff --git a/preview-src/tables.adoc b/preview-src/tables.adoc index 2a0dd9d5..6a66d27a 100644 --- a/preview-src/tables.adoc +++ b/preview-src/tables.adoc @@ -70,6 +70,16 @@ | Low resource usage and fast startup micro services |=== +.No header +[cols="1,2"] +|=== +| Asciidoctor +| *Awesome* way to write documentation + +| Micronaut +| Low resource usage and fast startup micro services +|=== + .Table with top and bottom frame (topbot) [frame="topbot"] |=== diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index 4b8eec46..0e2dda66 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -136,6 +136,12 @@ page: - content: English + 中文 url: '/xyz/4.1/index.html#english+中文' urlType: internal + - content: Admonitions + url: admonitions.html + urlType: internal + - content: Labels + url: labels.html + urlType: internal - content: Cypher Cheat Sheet url: cheat-sheet.html urlType: internal diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css index be111402..8015063a 100644 --- a/src/css/breadcrumbs.css +++ b/src/css/breadcrumbs.css @@ -1,7 +1,7 @@ .breadcrumbs { display: none; flex: 1 1; - padding: 0 0.5rem 0 0.75rem; + padding: 0 0.5rem; line-height: var(--nav-line-height); } @@ -11,10 +11,6 @@ } } -a + .breadcrumbs { - padding-left: 0.05rem; -} - .breadcrumbs ul { display: flex; flex-wrap: wrap; @@ -26,6 +22,7 @@ a + .breadcrumbs { .breadcrumbs li { display: inline; margin: 0; + color: rgba(var(--colors-baltic-50)); } .breadcrumbs li::after { diff --git a/src/css/challenges.css b/src/css/challenges.css index 82d6995e..0fa94336 100644 --- a/src/css/challenges.css +++ b/src/css/challenges.css @@ -6,8 +6,8 @@ .arrange-options .arrange-message { font-size: 0.75rem; - color: var(--color-grey-600); - border-bottom: 1px solid var(--color-grey-300); + color: rgba(var(--colors-neutral-60)); + border-bottom: 1px solid rgba(var(--colors-neutral-30)); margin: 0 0 0.25rem 0; padding-bottom: 0.25rem; } @@ -15,8 +15,8 @@ .arrange-options li, .arrange pre code span { display: inline-block; - background: var(--color-grey-100); - border: 1px solid var(--color-grey-200); + background: rgba(var(--colors-neutral-15)); + border: 1px solid rgba(var(--colors-neutral-20)); border-radius: 0.25rem; padding: 0.25rem 0.5rem; margin: 0 0.5rem 0 0; diff --git a/src/css/cheat-sheet.css b/src/css/cheat-sheet.css index 770b90f0..ff9a7d13 100644 --- a/src/css/cheat-sheet.css +++ b/src/css/cheat-sheet.css @@ -29,50 +29,50 @@ body.cheat-sheet .search .search-container .search-form { body.cheat-sheet .navbar, body.cheat-sheet .navbar-brand .navbar-item:first-child, body.cheat-sheet .navbar-brand .navbar-item:first-child a { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } @media screen and (min-width: 1024px) { body.cheat-sheet .navbar-end > .navbar-item, body.cheat-sheet .navbar-end .navbar-link { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.cheat-sheet .navbar-end > a.navbar-item:hover, body.cheat-sheet .navbar-end .navbar-link:hover { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.cheat-sheet .navbar-end .navbar-link::after { - border-color: var(--color-grey-600); + border-color: rgba(var(--colors-neutral-60)); } body.cheat-sheet .navbar-item.has-dropdown:hover .navbar-link { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } } body.cheat-sheet .navbar-burger { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.cheat-sheet .navbar-burger span { - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-60)); } body.cheat-sheet .doc .button { - background: var(--color-blue-600); + background: rgba(var(--colors-baltic-50)); color: var(--color-white); } body.cheat-sheet .doc .button:hover { - background: var(--color-blue-500); + background: rgba(var(--colors-baltic-60)); color: var(--color-white); } body.cheat-sheet .nav-item .nav-item::before, body.cheat-sheet .toc-menu li a::before { - background-color: var(--color-blue-300); + background: rgba(var(--colors-baltic-30)); } body.cheat-sheet .tooltip { @@ -90,11 +90,11 @@ body.cheat-sheet .tooltip.tooltip--bottom::after { body.cheat-sheet #preamble .abstract .title, body.cheat-sheet #preamble .abstract blockquote { border-left-color: var(--color-docs); - color: var(--color-blue-800); + color: rgba(var(--colors-baltic-70)); } body.cheat-sheet .tableblock .icon i { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } body.cheat-sheet .navbar .navbar-item.getting-started-cta .navbar-link { @@ -103,18 +103,18 @@ body.cheat-sheet .navbar .navbar-item.getting-started-cta .navbar-link { } body.cheat-sheet .navbar .navbar-item.getting-started-cta .navbar-link:hover { - background: var(--colors-primary-50); + background: rgba(var(--colors-baltic-50)); } body.cheat-sheet .navbar .navbar-item.getting-started-cta .navbar-link:active { - background: var(--colors-primary-60); + background: rgba(var(--colors-baltic-60)); } /* navpanel (version selector */ body.cheat-sheet .navbar-brand { width: 18rem; - /* border-right: 1px solid var(--color-grey-300); */ + /* border-right: 1px solid rgba(var(--colors-neutral-30)); */ } body.cheat-sheet .navbar-start { @@ -143,6 +143,10 @@ body.cheat-sheet .navbar-link a.external::after { background-position: center; } +body.cheat-sheet .navbar-link a.external::after line { + stroke: var(--link-font-color); +} + body.cheat-sheet .selectors { display: flex; flex-direction: column; @@ -163,10 +167,6 @@ body.cheat-sheet .nav-panel-versions { display: flex; } -body.cheat-sheet .nav-panel-versions .dropdown { - /* display: flex; */ -} - body.cheat-sheet .selectors .dropdown { width: 100%; display: flex; @@ -236,23 +236,23 @@ body.cheat-sheet .toc-menu-placeholder h2 { display: none !important; } +body.cheat-sheet .toc .toc-menu { + margin-right: 0; +} + body.cheat-sheet .toc .toc-menu ul { margin-top: 0.5rem; } body.cheat-sheet .toc .toc-menu li { - padding-left: 0.5rem; + padding-left: 0; /* line-height: 1.4; */ } -body.cheat-sheet .toc .toc-menu li[data-level="2"] { - padding-left: 2rem; -} - body.cheat-sheet .toc .toc-menu li a { border: none; - padding: 0.5rem 1rem; - margin: 0.5rem 0; + padding: 1rem; + margin: 0; } body.cheat-sheet .toc .toc-menu li[data-level="1"] a { @@ -260,25 +260,41 @@ body.cheat-sheet .toc .toc-menu li[data-level="1"] a { } body.cheat-sheet .toc .toc-menu li[data-level="2"] a { - padding: 0.25rem 1rem; + padding: 0.25rem 1rem 0.25rem 2rem; margin: 0; } -body.cheat-sheet .toc .toc-menu a.is-active { - /* border-left-color: var(--link-font-color); */ - /* color: var(--link-font-color); */ +body.cheat-sheet .toc .toc-menu a:hover { + background-color: var(--toc_hover-background-color); color: var(--toc_active-font-color); - background-color: #e6f8ff; - border-radius: 0.5rem; + /* border-radius: 0.5rem; */ +} + +body.cheat-sheet .toc .toc-menu a.is-active { + background-color: rgba(var(--colors-baltic-10)); + color: var(--color-docs); + /* border-radius: 0.5rem; */ +} + +body.cheat-sheet .toc .toc-menu a.is-active::before { + content: ""; + width: 4px; + height: 100%; + position: absolute; + margin: 0; + left: 0; + top: 0; + background-color: var(--color-docs); + border-radius: 4px; } /* headings */ -body.cheat-sheet .sect-header:first-child { +body.cheat-sheet .article .sect-header:first-child { display: none; } -body.cheat-sheet h2:not(.discrete) { +body.cheat-sheet .article h2:not(.discrete) { display: flex; font-size: 2rem; font-weight: 600; @@ -289,26 +305,26 @@ body.cheat-sheet h2:not(.discrete) { line-height: 110px; } -body.cheat-sheet h3:not(.discrete) { +body.cheat-sheet .article h3:not(.discrete) { display: flex; flex: 0 0 60%; flex-grow: 1; padding-right: 0; } -body.cheat-sheet h3:not(.discrete) a { +body.cheat-sheet .article h3:not(.discrete) a { align-items: center; display: flex; } -body.cheat-sheet h3:not(.discrete) span.label { +body.cheat-sheet .article h3:not(.discrete) span.label { margin-left: auto; } /* override deprecations */ -body.cheat-sheet div.deprecated h2::after, -body.cheat-sheet div.deprecated h3::after { +body.cheat-sheet .article div.deprecated h2::after, +body.cheat-sheet .article div.deprecated h3::after { display: none; } @@ -332,7 +348,7 @@ body.cheat-sheet .sect2:first-child { margin-top: 0; } -body.cheat-sheet h3 { +body.cheat-sheet .article h3 { flex: 100%; margin: 1rem 0; margin: 0; @@ -342,7 +358,8 @@ body.cheat-sheet h3 { body.cheat-sheet .exampleblock { width: 100%; margin-bottom: 0; - border-top: 1px solid var(--color-grey-300); + border: none; + border-top: 1px solid rgba(var(--theme-light-palette-neutral-border-weak)); } body.cheat-sheet .exampleblock > .content { @@ -360,7 +377,7 @@ body.cheat-sheet .example-block > .content > .listingblock { flex: 0 0 42%; margin: 0; padding: 1rem 0.5rem; - /* border-top: 1px solid var(--color-grey-300); */ + /* border-top: 1px solid rgba(var(--colors-neutral-30)); */ } body.cheat-sheet .listingblock .content { @@ -417,7 +434,7 @@ body.cheat-sheet .page-labels { padding: 0; align-items: center; gap: 0.25rem; - /* border-bottom: 1px solid var(--color-grey-200); */ + /* border-bottom: 1px solid rgba(var(--colors-neutral-20)); */ } body.cheat-sheet .sect1 > h2 { @@ -441,7 +458,7 @@ body.cheat-sheet .labels { /* flex: 0 0 12%; */ /* padding: 1rem 0; */ /* margin: 0; */ - /* border-top: 1px solid var(--color-grey-300); */ + /* border-top: 1px solid rgba(var(--colors-neutral-30)); */ } body.cheat-sheet .label { @@ -497,15 +514,15 @@ body.cheat-sheet span.label.hidden, } body.cheat-sheet .toc-menu-placeholder li[data-level="1"] { - border-bottom: 1px dotted var(--color-blue-300); - /* background-color: var(--color-grey-200); */ + border-bottom: 1px dotted rgba(var(--color-baltic-30)); + /* background-color: rgba(var(--colors-neutral-20)); */ /* margin-left: 0; */ width: 100%; margin-top: 0.5rem; } body.cheat-sheet .toc-menu-placeholder li[data-level="2"] { - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); font-size: calc(var(--doc-font-size--desktop) * 0.8); } @@ -527,10 +544,10 @@ body.cheat-sheet span.label.hidden, } body.cheat-sheet h3:not(.discrete) { - background: var(--color-grey-200); + background: rgba(var(--colors-neutral-20)); margin: 0 0.5rem 0 0.5rem; flex-grow: 1; - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); /* border-right: none; */ } @@ -539,8 +556,8 @@ body.cheat-sheet span.label.hidden, flex-grow: 1; padding: 0.5rem; margin: 0 0.5rem; - background-color: var(--color-grey-200); - border: 1px solid var(--color-grey-300); + background-color: rgba(var(--colors-neutral-20)); + border: 1px solid rgba(var(--colors-neutral-70)); border-radius: 0; } diff --git a/src/css/code.css b/src/css/code.css index 8412fdac..875697eb 100644 --- a/src/css/code.css +++ b/src/css/code.css @@ -31,8 +31,8 @@ .doc .listingblock .code-title, .doc .listingblock .code-language { /* background: var(--code-header-background); */ - color: var(--pre-background); - /* color: white; */ + color: var(--code-header-font-color); + font-size: var(--code-header-font-size); } .doc .listingblock .code-header { @@ -82,7 +82,7 @@ } .doc .listingblock .code-inset .btn-copy.fa-check { - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-60)); margin: 0.2rem; padding: 0.4rem; } @@ -90,13 +90,13 @@ .doc .listingblock .code-inset .btn-copy.fa-check::before { display: block; background: transparent; - color: var(--color-white) !important; + color: var(--code-header-font-color) !important; } .doc .listingblock .code-inset { border-top-right-radius: 0.5rem; /* background: var(--pre-background); */ - color: var(--color-grey-600); + color: var(--code-header-font-color); font-size: calc(12.5 / var(--rem-base) * 1rem); position: absolute; /* float: right; */ @@ -113,7 +113,7 @@ .doc .code-inset .copy-success .btn { position: absolute; right: -1rem; - background: var(--color-green-500); + background: rgba(var(--colors-forest-50)); color: var(--color-white) !important; padding: 0.4rem; margin: 0; @@ -135,11 +135,11 @@ margin-top: -0.25rem; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; - border-bottom: 0.5rem solid var(--color-green-500); + border-bottom: 0.5rem solid rgba(var(--colors-forest-50)); } .doc .code-footer { - background: var(--color-grey-500); + background: rgba(var(--colors-neutral-50)); color: var(--color-white); padding: 0.3rem 12px 0.3rem 0; font-size: 0.8em; @@ -179,14 +179,14 @@ flex-direction: column; justify-content: center; padding: 0 0.6rem; - color: var(--color-grey-200); + color: rgba(var(--colors-neutral-20)); font-size: 0.7rem; } .doc .code-results { - background: var(--color-grey-200); - color: var(--color-grey-600); - border: 1px solid var(--color-grey-500); + background: rgba(var(--colors-neutral-20)); + color: rgba(var(--colors-neutral-60)); + border: 1px solid rgba(var(--colors-neutral-50)); border-bottom-width: 2px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; @@ -197,7 +197,7 @@ .doc .code-results .code-result-options { display: flex; justify-content: space-between; - border-bottom: 1px solid var(--color-grey-400); + border-bottom: 1px solid rgba(var(--colors-neutral-40)); margin: 0 12px 4px; } @@ -211,7 +211,7 @@ padding: 0; font-weight: 600; border: 0 none; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); background: transparent; } @@ -243,12 +243,12 @@ .doc .code-results .code-result-table td { vertical-align: top; padding: 0.25rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .doc .code-results .code-result-table tbody td { - border-right: 1px solid var(--color-grey-300); - border-bottom: 1px solid var(--color-grey-300); + border-right: 1px solid rgba(var(--colors-neutral-30)); + border-bottom: 1px solid rgba(var(--colors-neutral-30)); } .doc .code-results .code-result-table tbody tr td:last-child { @@ -257,16 +257,16 @@ /* .doc .code-results .code-result-table tbody tr:nth-child(even) { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } .doc .code-results .code-result-table tbody tr:hover { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } */ .doc .code-results .code-result-table tbody tr:hover { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } .doc .code-results pre { @@ -296,12 +296,12 @@ padding: 0.5rem 0 0.5rem; margin-left: 0.4rem; border-bottom: 2px solid transparent; - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); } .doc .code-result-toggle button.code-result-toggle--current { - color: var(--color-grey-600); - border-bottom-color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); + border-bottom-color: rgba(var(--colors-neutral-60)); } @media all and (min-width: 760px) { @@ -327,7 +327,7 @@ bottom: -2rem; right: 0; width: 48%; - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); z-index: 1; } diff --git a/src/css/comments.css b/src/css/comments.css index 2a3418f3..8004a5a1 100644 --- a/src/css/comments.css +++ b/src/css/comments.css @@ -1,19 +1,19 @@ .comments { margin: 1.5rem -1rem; - border: 1px solid var(--color-grey-200); + border: 1px solid rgba(var(--colors-neutral-20)); border-top-width: 2px; - /* background: var(--color-grey-100); */ + /* background: rgba(var(--colors-neutral-15)); */ border-radius: 0.5rem; } .comments-header { - background: var(--color-grey-200); + background: rgba(var(--colors-neutral-20)); padding: 1rem; } .comments-header h2 { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); font-size: 0.8rem; font-weight: 600; line-height: 1; diff --git a/src/css/cookies.css b/src/css/cookies.css index daef4308..ccf3f65c 100644 --- a/src/css/cookies.css +++ b/src/css/cookies.css @@ -1,9 +1,9 @@ #cookiebanner { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); box-shadow: 0 -5px 5px 1px rgba(0, 0, 0, 0.08) !important; padding: 1rem; font-size: 0.8rem; - color: var(--color-grey-700); + color: rgba(var(--colors-neutral-70)); } #cookiebanner .row { @@ -14,7 +14,7 @@ #cookiebanner .c-header { font-size: 0.9rem; font-weight: 600; - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); } /* #cookiebanner .columns { @@ -23,7 +23,7 @@ } */ #c-left a { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); font-weight: bold; } /* #c-right { diff --git a/src/css/developer.css b/src/css/developer.css index d8fac91b..224f3ba8 100644 --- a/src/css/developer.css +++ b/src/css/developer.css @@ -38,7 +38,7 @@ right: 0; bottom: 0; background: #f2f2f2; - background: linear-gradient(25deg, var(--color-grey-700) 0%, var(--color-grey-800) 100%); + background: linear-gradient(25deg, rgba(var(--colors-neutral-70)) 0%, rgba(var(--colors-neutral-80)) 100%); } #full-graph .gram { diff --git a/src/css/doc.css b/src/css/doc.css index d8588356..0d833d88 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -31,41 +31,55 @@ body { color: var(--heading-font-color); font-weight: var(--heading-font-weight); hyphens: none; - line-height: 1.3; + line-height: calc((var(--doc-line-height) + 1) / 2); margin: 2rem 0 1rem; } -.doc h1 code, -.doc h2 code, -.doc h3 code, -.doc h4 code, -.doc h5 code, -.doc h6 code { - padding: 0.125em 0.25em; - background: var(--code-background); +.doc h1 { + font-size: var(--doc-font-size-h1); +} + +.doc h2 { + font-size: var(--doc-font-size-h3); +} + +.doc h3 { + font-size: var(--doc-font-size-h4); } .doc h4 { + font-size: var(--doc-font-size-h5); font-weight: 600; - font-size: 1rem; } .doc h5 { + font-size: var(--doc-font-size-h6); font-weight: 600; - font-size: 1rem; margin-bottom: 0.5rem; - color: var(--color-grey-600); +} + +.doc h6 { + font-size: var(--doc-font-size-h6); +} + +.doc h1 code, +.doc h2 code, +.doc h3 code, +.doc h4 code, +.doc h5 code, +.doc h6 code { + padding: 0.125em 0.25em; + background: var(--code-background); } .doc > .sect-header > h1.page:first-child { - font-size: calc(36 / var(--rem-base) * 1rem); - margin: 1.5rem 0.5rem 1.5rem 0; + margin: 1rem 0.5rem 1.5rem 0; flex-grow: 1; } @media screen and (min-width: 769px) { .doc > .sect-header > h1.page:first-child { - margin-top: 2.5rem; + /* margin-top: 2.5rem; */ } } @@ -175,8 +189,8 @@ body { .doc p code, .doc thead code, .doc td code { - color: var(--code-font-color); - background: var(--code-background); + color: var(--inline-code-font-color); + background: var(--inline-code-background); border-radius: 0.25em; font-size: 0.95em; padding: 0.125em 0.25em; @@ -352,9 +366,9 @@ body { } .doc .admonitionblock.warning { - background-color: var(--color-red-200); - color: var(--color-red-900); - border-left-color: var(--color-red-600); + background-color: var(--warning-background-color); + color: var(--warning-color); + border-left-color: var(--warning-border-color); } .doc .admonitionblock.warning a.btn { @@ -366,9 +380,9 @@ body { } .doc .admonitionblock.caution { - background-color: var(--color-orange-200); - color: var(--color-orange-900); - border-left-color: var(--color-orange-600); + background-color: var(--caution-background-color); + color: var(--caution-color); + border-left-color: var(--caution-border-color); } .doc .admonitionblock.caution a { @@ -384,13 +398,13 @@ body { } .doc .admonitionblock.tip { - background-color: var(--color-blue-200); - color: var(--color-blue-900); - border-left-color: var(--color-blue-600); + background-color: var(--tip-background-color); + color: var(--tip-color); + border-left-color: var(--tip-color); } .doc .admonitionblock.tip a { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } .doc .admonitionblock.tip a:hover { @@ -398,35 +412,35 @@ body { } .doc .admonitionblock.tip a.btn { - background-color: var(--color-blue-600); + background-color: rgba(var(--colors-baltic-50)); } .doc .admonitionblock.note { - background-color: var(--color-grey-200); - color: var(--color-grey-900); - border-left-color: var(--color-grey-600); + background-color: var(--note-background-color); + color: var(--note-color); + border-left-color: var(--note-border-color); } .doc .admonitionblock.note a { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .doc .admonitionblock.note a:hover { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); } .doc .admonitionblock.note a.btn { - background-color: var(--color-grey-600); + background-color: rgba(var(--colors-neutral-60)); } .doc .admonitionblock.important { - background-color: var(--color-purple-200); - color: var(--color-purple-900); - border-left-color: var(--color-purple-600); + background-color: var(--important-background-color); + color: var(--important-color); + border-left-color: var(--important-border-color); } .doc .admonitionblock.important a { - color: var(--color-purple-600); + color: var(--important-color); } .doc .admonitionblock.important a:hover { @@ -439,27 +453,27 @@ body { /* .doc .admonitionblock.caution .icon { background-color: var(--caution-color); - color: var(--caution-on-color); + color: var(--caution-background-color); } .doc .admonitionblock.important .icon { background-color: var(--important-color); - color: var(--important-on-color); + color: var(--important-background-color); } .doc .admonitionblock.note .icon { background-color: var(--note-color); - color: var(--note-on-color); + color: var(--note-background-color); } .doc .admonitionblock.tip .icon { background-color: var(--tip-color); - color: var(--tip-on-color); + color: var(--tip-background-color); } .doc .admonitionblock.warning .icon { background-color: var(--warning-color); - color: var(--warning-on-color); + color: var(--warning-background-color); } .doc .admonitionblock .icon i { @@ -613,6 +627,11 @@ body { margin-bottom: 0.5rem; } +.doc .olist li div:first-of-type, +.doc .ulist li div:first-of-type { + margin-top: 1.5rem; +} + .doc .ulist .listingblock, .doc .olist .listingblock, .doc .admonitionblock .listingblock { @@ -641,7 +660,7 @@ body { font-style: italic; hyphens: none; letter-spacing: 0.01em; - padding-bottom: 0.075rem; + padding-bottom: 0.25rem; text-align: left; } @@ -710,7 +729,8 @@ body { .doc pre:not(.highlight), .doc pre.highlight code { - background: var(--pre-background); + background: var(--code-background); + color: var(--code-font-color); display: block; overflow-x: auto; /* width: 100%; */ @@ -903,7 +923,7 @@ body { .doc .button { display: inline-block; - background: var(--color-grey-600); + background: var(--color-docs); color: var(--color-white); padding: 0.5rem 2rem; border-radius: 0.25rem; @@ -912,7 +932,7 @@ body { } .doc .button:hover { - background: var(--color-grey-500); + background: rgba(var(--colors-baltic-60)); color: var(--color-white); } @@ -1024,12 +1044,17 @@ body { .doc table.tableblock.frame-all tr:last-child td, .doc table.tableblock.frame-ends tr:last-child td { - border-bottom: 3px solid var(--color-grey-300); + border-bottom: 2.5px solid var(--table-border-color); +} + +.doc table.tableblock.frame-all tr:first-child td, +.doc table.tableblock.frame-ends tr:first-child td { + border-top: 2.5px solid var(--table-border-color); } .doc .tableblock thead { - background: var(--color-grey-100); - border-bottom: var(--color-grey-200); + background: var(--table-header-color); + border-bottom: var(--table-border-color); } .doc table.tableblock, @@ -1105,8 +1130,8 @@ body { .doc .tabbed { padding: 13px 0 0; margin: 0 -1rem 1.5rem; - background: var(--color-grey-100); - border: 1px solid var(--colors-primary-10); + background: rgba(var(--colors-neutral-15)); + border: 1px solid rgba(var(--colors-neutral-20)); border-top-left-radius: 6px; border-top-right-radius: 6px; } @@ -1127,9 +1152,9 @@ body { font-weight: 600; padding: 0.4rem 0.6rem; margin-right: 0.5rem; - background: var(--color-grey-200); - border: 1px solid var(--color-grey-200); - border-top: 3px solid var(--color-grey-400); + background: rgba(var(--colors-neutral-20)); + border: 1px solid rgba(var(--colors-neutral-20)); + border-top: 3px solid rgba(var(--colors-neutral-30)); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom: none; @@ -1138,17 +1163,17 @@ body { .doc .tabbed-tabs .tabbed-tab--active { margin-bottom: -1px; - background: #fff; - color: var(--colors-primary-60); - border: 1px solid var(--color-grey-400); - border-top: 3px solid var(--colors-primary-60); + background: var(--color-white); + color: var(--color-docs); + border: 1px solid var(--color-docs); + border-top: 3px solid var(--color-docs); border-bottom: none; } .doc .tabbed-container { padding: 1rem; background: #fff; - border: 1px solid var(--color-grey-400); + border: 1px solid var(--color-docs); border-top-left-radius: 6px; border-top-right-radius: 6px; } @@ -1171,20 +1196,20 @@ body { margin-right: .5rem; margin-bottom: calc(var(--tabbed-border) * -1); /* background: var(--color-white); - color: var(--color-grey-600); - border: 1px solid var(--color-grey-200); + color: rgba(var(--colors-neutral-60)); + border: 1px solid rgba(var(--colors-neutral-20)); border-top-left-radius: .25rem; border-top-right-radius: .25rem; } /* .doc li.tabbed-tabs--active { - background: var(--color-grey-100); - border-bottom-color: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); + border-bottom-color: rgba(var(--colors-neutral-15)); } /* .doc .tabbed-container { background: var(--color-white); - /* border-top: var(--tabbed-border) solid var(--color-grey-200); + /* border-top: var(--tabbed-border) solid rgba(var(--colors-neutral-20)); } */ @@ -1214,7 +1239,7 @@ body { display: inline-block; margin: 0 0.2rem; content: "→"; - color: var(--color-purple-600); + color: var(--link-font-color); transform: rotate(-45deg); transition: all 0.2s linear; top: 0; @@ -1234,10 +1259,28 @@ body { list-style-type: none; } -.exampleblock > .content { +.exampleblock { margin-top: 0.75rem; + border: 1px solid var(--example-border-color); +} + +.doc .exampleblock > .title, +.doc .exampleblock > .content { padding: 0.5rem 0.75rem; - border: 1px solid var(--color-grey-300); +} + +.doc .exampleblock > .content { + border-top: 1px solid var(--example-border-color); +} + +.doc .exampleblock > .title { + color: var(--example-header-font-color); + background: var(--example-header-background); + margin-bottom: 0; +} + +.tabbed-container > .exampleblock { + border: none; } .tabbed-container > .exampleblock > .content { @@ -1254,6 +1297,6 @@ body { .doc details > div.content { margin: 0.5rem 0 0 0.25rem; - border-left: 1px dashed var(--color-grey-300); + border-left: 1px dashed rgba(var(--colors-neutral-30)); padding-left: 1rem; } diff --git a/src/css/docs-home.css b/src/css/docs-home.css index 28e5aca8..dd19e71d 100644 --- a/src/css/docs-home.css +++ b/src/css/docs-home.css @@ -1,5 +1,5 @@ body.docshome { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } /* nav */ @@ -56,7 +56,7 @@ body.docshome .doc { body.docshome .doc h2::after { display: block; - background-color: var(--color-blue-600); + background-color: rgba(var(--colors-baltic-50)); height: 3px; width: 80px; margin-top: 1rem; @@ -127,7 +127,7 @@ body.docshome .sect2 .icon img { } body.docshome:not(.create-applications) .sect2 .icon img { - background: #e6f8ff; + background: rgba(var(--colors-baltic-10)); } @media all and (max-width: 820px) { @@ -212,8 +212,8 @@ body.docshome .sect2 ul li { body.docshome .sect2 ul li a { display: inline-block; - color: var(--color-blue-600); - border: 1px solid var(--color-grey-200); + color: rgba(var(--colors-baltic-50)); + border: 1px solid rgba(var(--colors-neutral-20)); padding: 0.1rem 0.7rem; border-radius: 0.2rem; font-size: 0.7rem; diff --git a/src/css/feedback.css b/src/css/feedback.css index 8cfc1608..cfdb3c70 100644 --- a/src/css/feedback.css +++ b/src/css/feedback.css @@ -4,8 +4,8 @@ right: 2rem; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; - background: var(--color-blue-100); - color: var(--color-blue-800); + background: var(--feedback-background-color); + color: var(--feedback-color); padding: 0.5rem 1rem; width: 320px; font-size: 0.8rem; @@ -14,21 +14,21 @@ } .feedback.negative { - background: var(--color-red-100); - color: var(--color-red-800); + background: var(--feedback-negative-color); + color: var(--feedback-negative-background-color); } .feedback.negative line { - stroke: var(--color-red-800); + stroke: var(--feedback-negative-background-color); } .feedback.negative a { - color: var(--color-red-700); + color: var(--feedback-negative-background-color); } .feedback.positive { - background: var(--color-green-100); - color: var(--color-green-800); + background: var(--feedback-positive-color); + color: var(--feedback-positive-background-color); } .feedback .header { @@ -89,7 +89,7 @@ .feedback circle, .feedback line { fill: transparent; - stroke: var(--color-blue-700); + stroke: var(--feedback-color); stroke-width: 1; } diff --git a/src/css/footer.css b/src/css/footer.css index c89af1f6..bfc1de91 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -1,7 +1,7 @@ footer.footer { background-color: var(--footer-background); color: var(--footer-font-color); - font-size: calc(15 / var(--rem-base) * 1rem); + font-size: var(--footer-font-size); line-height: var(--footer-line-height); padding: 2rem 0; } @@ -14,8 +14,14 @@ footer.footer { flex-wrap: wrap; } +.footer .column.logo { + width: 100%; +} + .footer .column { - width: 50%; + display: flex; + flex-direction: column; + width: 33%; flex-grow: 1; min-width: 180px; padding: 1.5rem; @@ -28,7 +34,7 @@ footer.footer { } .footer .column { - width: 25%; + width: 33%; flex-grow: 1; flex-wrap: wrap; padding: 1.5rem; @@ -52,24 +58,31 @@ footer.footer { .footer a { color: var(--footer-link-font-color); - font-weight: 200; + font-weight: var(--body-font-weight); } .footer a:hover { color: var(--footer-link_hover-font-color); + text-decoration: underline; } footer .logo-footer { - margin-bottom: 25px; + width: inherit; height: 34px; - background: url(https://dist.neo4j.com/wp-content/uploads/20210422201812/neo4j-logo-2020-white.svg) no-repeat; + padding: 0 1.5rem; + background: url(../img/Logo_White_RGB_TransBG.svg) no-repeat; } .footer h2 { - font-size: calc(15 / var(--rem-base) * 1rem); - font-weight: 200; + width: 100%; + text-transform: uppercase; + font-size: var(--font-size-body-medium); + font-weight: 700; color: var(--footer-link-font-color); - margin: 65px 0 0.5rem; +} + +.footer h2 a { + font-weight: 700; } .footer ul { @@ -83,7 +96,7 @@ footer .logo-footer { } .footer ul li i { - color: var(--color-grey-500); + color: var(--footer-font-color); font-size: 1rem; width: 0.8rem; text-align: center; diff --git a/src/css/glossary.css b/src/css/glossary.css index 2f2dd1a9..7c4a6339 100644 --- a/src/css/glossary.css +++ b/src/css/glossary.css @@ -23,8 +23,8 @@ code .glossary-term::after { font-size: 0.8rem; position: absolute; z-index: 5000; - background: var(--color-white); - border-bottom: 3px solid var(--code-header-background); + background: rgba(var(--colors-neutral-10)); + border-bottom: 3px solid var(--color-docs); border-radius: 0.25rem; width: 220px; /* overflow: hidden; */ @@ -61,10 +61,10 @@ code .glossary-term::after { } .tooltip .tooltip-header { - background: var(--color-grey-800); + background: var(--color-docs); border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; - color: var(--color-white); + color: rgba(var(--colors-neutral-10)); padding: 12px; padding: 0.5rem 1rem; font-weight: 600; @@ -72,7 +72,7 @@ code .glossary-term::after { .tooltip .tooltip-body { padding: 0.5rem 1rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); font-size: 0.8rem; } @@ -85,6 +85,6 @@ code .glossary-term::after { } .tooltip .tooltip-body a { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); font-weight: 600; } diff --git a/src/css/gram.css b/src/css/gram.css index 6e08d697..4be61e12 100644 --- a/src/css/gram.css +++ b/src/css/gram.css @@ -2,7 +2,7 @@ width: 100%; /* 12px padding top + 12px padding bottom */ height: calc(600px - 24px); - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); border-radius: 0.5rem; } diff --git a/src/css/graphgists.css b/src/css/graphgists.css index 3d1f8b55..049bddfe 100644 --- a/src/css/graphgists.css +++ b/src/css/graphgists.css @@ -103,11 +103,11 @@ ul.graphgists > li > a { .graphgist-card dl.graphgist-info > dd { padding: 0; margin: 0 0 0.5rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .graphgist-card dl.graphgist-info > dt { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); text-transform: uppercase; font-size: 0.8rem; } @@ -164,7 +164,7 @@ body.graphgist .doc > .sect1 > .sectionbody { } .graphgist-metadata { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); float: right; margin-left: 1rem; margin-bottom: 1rem; @@ -184,7 +184,7 @@ body.graphgist .doc > .sect1 > .sectionbody { } .graphgist-metadata dt { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); text-transform: uppercase; font-size: 0.8rem; } @@ -208,11 +208,11 @@ body.graphgist .graphgist-metadata fieldset { body.graphgist .graphgist-metadata fieldset > legend { font-weight: 600; - color: var(--color-grey-700); + color: rgba(var(--colors-neutral-70)); } body.graphgist .graphgist-metadata label { - color: var(--color-grey-700); + color: rgba(var(--colors-neutral-70)); font-size: 0.9em; } @@ -259,10 +259,10 @@ body.graphgist .graphgist-metadata .input:focus-visible { body.graphgist .graphgist-metadata .input { box-shadow: inset 0 0.0625em 0.125em rgb(10 10 10 / 5%); width: 100%; - color: var(--color-grey-700); + color: rgba(var(--colors-neutral-70)); border-radius: 0.375em; align-items: center; - border: 1px solid var(--color-grey-400); + border: 1px solid rgba(var(--colors-neutral-40)); font-size: 1em; line-height: 1.5; padding: calc(0.5em - 1px) calc(0.75em - 1px); @@ -285,7 +285,7 @@ body.graphgist .listingblock pre { .graphgist-metadata-menu { padding-top: 1rem; - border-top: 1px solid var(--color-grey-300); + border-top: 1px solid rgba(var(--colors-neutral-30)); } .graphgist-metadata-menu ul { diff --git a/src/css/header.css b/src/css/header.css index bf58ecdf..c9473106 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -264,7 +264,7 @@ body { bottom: 0; max-height: none; z-index: 500; - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } .navbar-menu a.navbar-item:hover, @@ -448,11 +448,11 @@ body { .project { flex-direction: column; align-items: flex-start; - border-bottom: 1px solid var(--color-grey-200); + border-bottom: 1px solid rgba(var(--colors-neutral-20)); } .project .project-name { - color: var(--body-font-color); + color: var(--doc-font-color); font-weight: 600; font-size: calc(16 / var(--rem-base) * 1rem); } @@ -460,7 +460,7 @@ body { .project-description { margin: 0.2rem 0; font-size: 0.8rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); white-space: normal; } @@ -473,12 +473,12 @@ body { .project-links li { list-style-type: none; display: inline; - /* border-right: 1px solid var(--color-grey-400); */ + /* border-right: 1px solid rgba(var(--colors-neutral-40)); */ /* padding: 0 .1rem; */ } .project-links li::after { - color: var(--color-grey-400); + color: rgba(var(--colors-neutral-40)); content: "|"; } @@ -525,11 +525,11 @@ body { } .getting-started-cta .project:hover { - background: var(--colors-neutral-20); + background: rgba(var(--colors-neutral-20)); } .getting-started-cta .project-subtitle { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); font-size: 13px; font-weight: 400; } @@ -548,7 +548,7 @@ body { } .navbar-item.has-dropdown.getting-started-cta:hover::before { - border-bottom-color: var(--color-grey-600); + border-bottom-color: rgba(var(--colors-neutral-60)); } .navbar-item.has-dropdown.getting-started-cta::after { diff --git a/src/css/highlight-dark.css b/src/css/highlight-dark.css new file mode 100644 index 00000000..539665bf --- /dev/null +++ b/src/css/highlight-dark.css @@ -0,0 +1,81 @@ + +/* Dracula Theme v1.2.5 + * + * https://github.com/dracula/highlightjs + * + * Copyright 2016-present, All rights reserved + * + * Code licensed under the MIT license + * + * @author Denis Ciccale + * @author Zeno Rocha + */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; +} + +.hljs-built_in, +.hljs-selector-tag, +.hljs-section, +.hljs-link { + color: #8be9fd; +} + +.hljs-keyword { + color: rgba(var(--colors-hibiscus-30)); +} + +.hljs, +.hljs-subst { + color: rgba(var(--colors-neutral-30)); +} + +.hljs-title, +.hljs-attr, +.hljs-meta-keyword { + color: rgba(var(--colors-forest-30)); +} + +.hljs-string, +.hljs-meta, +.hljs-name, +.hljs-type, +.hljs-symbol, +.hljs-bullet, +.hljs-addition, +.hljs-variable, +.hljs-template-tag, +.hljs-template-variable { + color: rgba(var(--colors-lemon-30)); +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion { + color: rgba(var(--colors-neutral-30)); + font-style: italic; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-literal, +.hljs-title, +.hljs-section, +.hljs-doctag, +.hljs-type, +.hljs-name, +.hljs-strong { + font-weight: var(--monospace-font-weight-bold); +} + +.hljs-literal, +.hljs-number { + color: rgba(var(--colors-lavender-30)); +} + +.hljs-emphasis { + font-style: italic; +} diff --git a/src/css/highlight.css b/src/css/highlight.css index 32708710..0ebdc97e 100644 --- a/src/css/highlight.css +++ b/src/css/highlight.css @@ -1,14 +1,14 @@ /*! Adapted from the GitHub style by Vasily Polovnyov */ .hljs-comment, .hljs-quote { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-subst { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-50)); font-weight: var(--monospace-font-weight-bold); } @@ -17,18 +17,18 @@ .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } .hljs-string, .hljs-doctag { - color: var(--color-green-700); + color: rgba(var(--colors-forest-40)); } .hljs-title, .hljs-section, .hljs-selector-id { - color: var(--color-purple-800); + color: rgba(var(--colors-lavender-50)); font-weight: var(--monospace-font-weight-bold); } @@ -38,20 +38,20 @@ .hljs-type, .hljs-class .hljs-title { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); font-weight: var(--monospace-font-weight-bold); } .hljs-tag, .hljs-name, .hljs-attribute { - color: var(--color-purple-600); + color: rgba(var(--colors-lavender-40)); font-weight: normal; } .hljs-regexp, .hljs-link { - color: var(--color-green-400); + color: rgba(var(--colors-forest-40)); } .hljs-symbol, @@ -61,17 +61,17 @@ .hljs-built_in, .hljs-builtin-name { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } .hljs-meta { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); /* font-weight: var(--monospace-font-weight-bold); */ } .language-shell, .language-cypher-shell { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .language-shell > .bash, @@ -86,15 +86,15 @@ } .language-shell .bash { - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); } .hljs-deletion { - background: var(--color-grey-200); + background: rgba(var(--colors-neutral-20)); } .hljs-addition { - background: var(--color-green-200); + background: rgba(var(--colors-forest-30)); } .hljs-emphasis { diff --git a/src/css/kb.css b/src/css/kb.css index 59998090..27da9abc 100644 --- a/src/css/kb.css +++ b/src/css/kb.css @@ -4,23 +4,31 @@ body.kb .navbar { border-top-color: var(--color-kb); } +body.kb section.hero { + padding: 8rem 0 0; + background: var(--navbar-background); + background: rgb(2, 0, 36); + background: linear-gradient(180deg, var(--navbar-background) 0%, var(--hero-fade) 100%); + text-align: left; +} + body.kb h1::after, body.kb h2::after { background-color: var(--color-kb) !important; } body.kb .label { - background-color: var(--color-purple-200) !important; - color: var(--color-purple-800); + background-color: var(--color-kb) !important; + color: var(--color-kb); } /* Hero */ body.kb .kb-search { max-width: 680px; margin: 2em auto 4rem; - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-50)); border-radius: 0.5rem; - color: var(--color-grey-200); + color: rgba(var(--colors-neutral-15)); padding: 0.5rem 1rem; display: flex; flex-direction: row; @@ -40,8 +48,8 @@ body.kb .kb-search .search-placeholder { body.kb .kb-search .search-shortcut { flex: 0 0 auto; - color: var(--color-grey-700); - background: var(--color-grey-500); + color: rgba(var(--colors-neutral-70)); + background: rgba(var(--colors-neutral-50)); padding: 0.5rem 1rem; border-radius: 0.25rem; font-size: 0.8rem; @@ -57,7 +65,7 @@ body.kb .kb-search svg { flex-grow: 0; width: 1.6rem; height: 1.6rem; - stroke: var(--color-grey-800); + stroke: rgba(var(--colors-neutral-80)); margin-left: 12px; } @@ -133,7 +141,7 @@ body.landing.kb .doc .sectionbody .column ul { body.landing.kb.kb-home ul.category-tags span.count { float: right; - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); align-items: center; display: inline-flex; font-size: 0.75em; diff --git a/src/css/labels.css b/src/css/labels.css index 9b038ac0..36c5e7ee 100644 --- a/src/css/labels.css +++ b/src/css/labels.css @@ -2,10 +2,11 @@ display: inline-block; padding: 0.2rem 0.8rem; border-radius: 0.25rem; - background: var(--color-blue-200); - color: var(--color-blue-700); + background: rgba(var(--colors-baltic-50)); + color: rgba(var(--colors-baltic-10)); font-weight: 600; font-size: 0.7rem; + font-style: normal; } .tableblock .label { @@ -14,14 +15,14 @@ .label--core, .label--apoc-core { - background: var(--color-blue-200); - color: var(--color-blue-700); + background: rgba(var(--colors-baltic-20)); + color: rgba(var(--colors-baltic-70)); } .label--full, .label--apoc-full { - background: var(--color-green-200); - color: var(--color-green-700); + background: rgba(var(--colors-forest-15)); + color: rgba(var(--colors-forest-50)); } .label--procedure { @@ -30,13 +31,13 @@ } .label--function { - background: var(--color-purple-200); - color: var(--color-purple-700); + background: rgba(var(--colors-lavender-15)); + color: rgba(var(--colors-lavender-50)); } .label--current { - background: var(--color-blue-600); - color: var(--color-white); + background: rgba(var(--colors-baltic-50)); + color: rgba(var(--colors-baltic-10)); } .label--free, @@ -46,13 +47,13 @@ } .label--not-on-aura { - background: var(--color-red-700); - color: var(--color-white); + background: var(--warning-color); + color: var(--warning-background-color); } .label--aura-db-enterprise { - background: var(--color-blue-600); - color: var(--color-white); + background: rgba(var(--colors-baltic-50)); + color: rgba(var(--colors-baltic-10)); } .label--aura, @@ -60,76 +61,78 @@ .label--professional, .label--enterprise, .label--enterprise-edition { - background: var(--colors-primary-40); - color: var(--color-white); + background: rgba(var(--colors-baltic-50)); + color: rgba(var(--colors-baltic-10)); +} + +.label--default, +.label--recommended { + background: rgba(var(--theme-light-palette-primary-bg-strong)); + color: rgba(var(--theme-light-palette-primary-bg-weak)); } .label--added, -.label--updated, .label--changed, -.label--yes, +.label--new, .label--renamed, -.label--new { - background: var(--color-green-300); - color: var(--color-black); +.label--updated, +.label--yes { + background: var(--success-color); + color: var(--success-background-color); +} + +.label--alpha, +.label--beta { + background: var(--alpha-beta-background-color); + color: var(--alpha-beta-color); } .label--na, .label--no, .label--removed { - background: var(--color-red-400); - color: var(--color-black); -} - -.label--deprecated, -.label--discontinued { - background: var(--color-orange-400); - color: var(--color-black); + background: var(--warning-color); + color: var(--warning-background-color); } +.label--admin-only, .label--danger, .label--warning { - background: var(--colors-warning-40); - color: var(--color-black); + background: var(--warning-color); + color: var(--warning-background-color); } -.label--default, -.label--recommended { - background: var(--color-indigo-300); - color: var(--color-black); +.label--deprecated, +.label--discontinued { + background: var(--deprecated-color); + color: var(--deprecated-background-color); } .label--unix, .label--mac-os, .label--linux, .label--windows { - background: var(--color-teal-400); - color: var(--color-black); + background: rgba(var(--colors-baltic-70)); + color: rgba(var(--colors-neutral-10)); } .label--syntax, .label--functionality, .label--cypher { - background: var(--label-group-syntax); - color: var(--color-black); + background: var(--code-background); + color: var(--code-font-color); } .label--cluster-member-core { - background: var(--color-indigo-300); - color: var(--color-black); + background: rgba(var(--colors-baltic-15)); + color: rgba(var(--colors-baltic-50)); } .label--cluster-member-read-replica { - background: var(--color-green-300); - color: var(--color-black); + background: rgba(var(--colors-forest-15)); + color: rgba(var(--colors-forest-50)); } .label--cluster-member-single { - background: var(--color-yellow-300); - color: var(--color-black); -} - -.label--admin-only { - background: var(--color-green-700); - color: var(--color-white); + background: rgba(var(--colors-lemon-10)); + background: rgba(var(--colors-lemon-60)); } diff --git a/src/css/landing.css b/src/css/landing.css index 88624072..575668e5 100644 --- a/src/css/landing.css +++ b/src/css/landing.css @@ -1,9 +1,9 @@ /* Hero */ section.hero { padding: 8rem 0 0; - background: var(--color-grey-800); + background: var(--navbar-background); background: rgb(2, 0, 36); - background: linear-gradient(180deg, var(--color-grey-800) 0%, var(--color-grey-700) 45%, var(--color-grey-700) 100%); + background: linear-gradient(180deg, var(--navbar-background) 0%, var(--hero-fade) 80%); text-align: left; } @@ -25,7 +25,7 @@ section.hero h2 { font-size: 1.2rem; font-weight: 300; display: block; - color: var(--color-grey-400); + color: rgba(var(--colors-neutral-15)); margin-bottom: 1rem; } @@ -45,7 +45,7 @@ section.hero h2::after { .landing .hero p, section.hero p { font-size: 1.8rem; - color: var(--color-grey-300); + color: rgba(var(--colors-neutral-15)); font-weight: 300; } @@ -80,12 +80,12 @@ section.hero p { } .landing .doc .secondary { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } .landing .doc .secondary.leading { margin-top: 0; - background: linear-gradient(180deg, var(--landing-leading-background) 0%, var(--color-grey-100) 35%, var(--color-white) 100%); + background: linear-gradient(180deg, rgba(var(--colors-neutral-20)) 0%, rgba(var(--colors-neutral-15)) 35%, var(--color-white) 100%); padding-top: 4rem; } @@ -95,7 +95,7 @@ section.hero p { .landing .doc h2::after { display: block; - background-color: var(--color-green-600); + background-color: var(--color-docs); height: 3px; width: 80px; margin-top: 1rem; @@ -103,6 +103,10 @@ section.hero p { content: ""; } +.landing.graphgists .doc h2::after { + background-color: var(--color-graphgists); +} + /** * Hide page title since we are already using a hero title */ @@ -165,7 +169,7 @@ body.landing .ulist.buttons li { body.landing .ulist.buttons li a { display: inline-block; margin: 0 0.25rem; - background: var(--color-grey-800); + background: rgba(var(--colors-neutral-80)); color: white; font-weight: 600; padding: 1rem 2rem; @@ -255,9 +259,9 @@ body.landing .ulist.buttons li a { /* Hero */ .hero { padding: 8rem 0 0 !important; - background: var(--color-grey-800); + background: rgba(var(--colors-neutral-80)); background: rgb(2, 0, 36); - background: linear-gradient(180deg, var(--color-grey-800) 0%, var(--color-grey-700) 45%, var(--color-grey-700) 100%); + background: linear-gradient(180deg, var(--navbar-background) 0%, var(--hero-fade) 100%); text-align: left; } @@ -279,14 +283,14 @@ body.landing .ulist.buttons li a { font-size: 1.2rem; font-weight: 300; display: block; - color: var(--color-grey-400); + color: var(--color-white); margin-bottom: 1rem; } .hero h1::after, .hero h2::after { display: block; - background-color: var(--color-green-600); + background-color: rgba(var(--colors-forest-50)); height: 3px; width: 80px; margin-top: 1rem; @@ -296,7 +300,7 @@ body.landing .ulist.buttons li a { .hero p { font-size: 1.8rem; - color: var(--color-grey-300); + color: rgba(var(--colors-neutral-30)); font-weight: 300; } diff --git a/src/css/main.css b/src/css/main.css index 526abd5f..6f15c54a 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -19,6 +19,10 @@ display: flex; } + body:not(.landing) main > .content { + margin-top: 2rem; + } + aside.toc.embedded { display: none; } diff --git a/src/css/nav.css b/src/css/nav.css index e9f03b82..5185320f 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -140,7 +140,7 @@ html.is-clipped--nav { .nav-menu a, .nav-text { - color: var(--colors-neutral-55); + color: rgba(var(--colors-neutral-55)); font-weight: var(--nav-font-weight); display: block; padding: 0.25rem 0; @@ -344,12 +344,12 @@ html.is-clipped--nav { .nav-item a:hover, .nav-item span:hover { - background-color: var(--colors-neutral-25); + background-color: rgba(var(--colors-neutral-25)); } .is-current-page.is-active > a { - background-color: var(--colors-primary-10); - color: var(--colors-primary-60); + background-color: rgba(var(--colors-baltic-10)); + color: var(--color-docs); } .is-current-page.is-active > a::before { @@ -359,7 +359,7 @@ html.is-clipped--nav { position: absolute; left: 0; top: 0; - background: var(--colors-primary-60); + background-color: var(--color-docs); border-radius: 4px; } @@ -478,8 +478,8 @@ html.is-clipped--nav { padding: 0.5rem; padding-right: 28px; border-radius: var(--border-radius-sm); - border: 1px solid rgb(var(--palette-light-neutral-border-strong)); - background-color: rgb(var(--palette-light-neutral-bg-weak)); + border: 1px solid rgba(var(--theme-light-palette-neutral-border-strong)); + background-color: rgba(var(--theme-light-palette-neutral-bg-weak)); background-image: url("data:image/svg+xml,"); background-position: right 5px top 50%; background-repeat: no-repeat; diff --git a/src/css/neo4j-docs.css b/src/css/neo4j-docs.css index 25bfa650..51f02b65 100644 --- a/src/css/neo4j-docs.css +++ b/src/css/neo4j-docs.css @@ -10,7 +10,7 @@ .docs.image-border article img, .docs article .border img { - border: 1px solid var(--color-blue-400); + border: 1px solid var(--color-docs); border-radius: 4px; padding: 1rem; } @@ -18,10 +18,10 @@ .docs.image-shadow article img, .docs article .shadow img { box-shadow: - 2px 2px 4px 0 var(--color-grey-500), - 0 4px 4px 2px var(--color-grey-300), - 0 4px 6px 4px var(--color-grey-200), - 4px 4px 4px 4px var(--color-grey-100); + 2px 2px 4px 0 rgba(var(--colors-neutral-50)), + 0 4px 4px 2px rgba(var(--colors-neutral-30)), + 0 4px 6px 4px rgba(var(--colors-neutral-20)), + 4px 4px 4px 4px rgba(var(--colors-neutral-10)); } .docs article .no-border img { @@ -102,19 +102,22 @@ div.fabric h4::after, section.fabric .title::after, p.fabric::before, span.fabric::after { + display: inline-block; text-align: center; - font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-weight: normal; + font-family: var(--body-font-family); + font-weight: var(--font-weight-semibold); font-style: normal; - font-size: 1rem; + font-size: 0.7rem; + line-height: var(--doc-line-height); + padding: 0.2rem 0.8rem; + border-radius: 0.25rem; position: relative; - box-sizing: border-box; - padding: 5px 8px; - border-style: solid; - border-width: 1px; - border-radius: 6px; bottom: 2px; - margin-left: 8px; + margin-left: 0.5rem; +} + +.doc > .sect-header span.role::after { + bottom: 0.5rem; } .sect1.show-roles h2::after, @@ -142,6 +145,10 @@ span.fabric::after { margin-bottom: 1rem; } +.sect-header:first-of-type { + margin-bottom: 0; +} + .sect1:not(.display) > .sect-header { border-bottom: 1px solid var(--section-divider-color); margin-bottom: 1rem; @@ -170,9 +177,11 @@ section.deprecated .title::after, .deprecated > .title::after, span.deprecated::after { content: "Deprecated"; - color: var(--deprecation-color); - border-color: var(--deprecation-color); + background: var(--deprecated-color); + border-color: var(--deprecated-color); + color: var(--deprecated-background-color); margin-left: 8px; + vertical-align: middle; } div.not-on-aura h2::after, @@ -182,8 +191,9 @@ p.not-on-aura::before, section.not-on-aura .title::after, span.not-on-aura::after { content: "Not available on Aura"; + background-color: var(--not-on-aura-background-color); + border-color: var(--not-on-aura-background-color); color: var(--not-on-aura-color); - border-color: var(--not-on-aura-color); } div.aura-db-enterprise h2::after, @@ -193,8 +203,9 @@ p.aura-db-enterprise::before, section.aura-db-enterprise.title::after, span.aura-db-enterprise::after { content: "AuraDB Enterprise"; + background: var(--aura-db-enterprise-background-color); + border-color: var(--aura-db-enterprise-background-color); color: var(--aura-db-enterprise-color); - border-color: var(--aura-db-enterprise-color); } div.enterprise-edition h2::after, @@ -204,8 +215,9 @@ p.enterprise-edition::before, section.enterprise-edition .title::after, span.enterprise-edition::after { content: "Enterprise Edition"; + background: var(--enterprise-edition-background-color); + border-color: var(--enterprise-edition-background-color); color: var(--enterprise-edition-color); - border-color: var(--enterprise-edition-color); } div.fabric h2::after, @@ -215,8 +227,9 @@ p.fabric::before, section.fabric .title::after, span.fabric::after { content: "Fabric"; + background-color: var(--fabric-background-color); + border-color: var(--fabric-background-color); color: var(--fabric-color); - border-color: var(--fabric-color); } .admonitionblock td.icon .icon-::before { @@ -225,8 +238,8 @@ span.fabric::after { } .doc .admonitionblock.deprecated .icon { - background-color: var(--deprecation-color); - color: var(--deprecation-on-color); + background-color: var(--deprecated-color); + color: var(--deprecated-background-color); } .doc .admonitionblock.deprecated .icon i::after { @@ -235,8 +248,8 @@ span.fabric::after { .doc .admonitionblock.deprecated { background-color: var(--color-pink-200); - color: var(--color-pink-900); border-left-color: var(--color-pink-600); + color: var(--color-pink-900); } .doc .admonitionblock.deprecated pre { @@ -256,7 +269,8 @@ span.fabric::after { .doc .paragraph.erroronlyqueryresult { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: calc(14 / var(--rem-base) * 1rem); - background-color: var(--color-grey-200); + background-color: var(--code-result-background); + color: var(--code-result-font-color); margin: 0; margin-top: -1.5rem; margin-right: 30%; @@ -275,6 +289,7 @@ span.fabric::after { .sect2.beta h3::after, span.alpha::after, span.beta::after { + background: var(--alpha-beta-background-color); color: var(--alpha-beta-color); } @@ -296,12 +311,12 @@ div.tier-note p { } div.tier-note p::before { - border-right: thin solid var(--color-grey-400); + border-right: thin solid var(--alpha-beta-background-color); padding: 0 10px; margin-right: 10px; font-family: fantasy; font-size: 2rem; - color: var(--alpha-beta-color); + color: var(--alpha-beta-background-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } @@ -364,32 +379,36 @@ div.beta-symbol p::before { border-radius: 0.2rem; } +.graph-variants > .content > .supported { + background-color: var(--success-background-color); + color: var(--success-color); +} + .graph-variants > .content > .supported::before { content: '\2714'; margin-right: 0.5em; - color: #00ba88; + color: var(--success-color); } -.graph-variants > .content > .supported { - background-color: #e1faef; +.graph-variants > .content > .allowed { + background-color: var(--neutral-background-color); + color: var(--neutral-color); } .graph-variants > .content > .allowed::before { content: '(\2714)'; margin-right: 0.5em; - color: #808a87; -} - -.graph-variants > .content > .allowed { - background-color: #e4e9e8; + color: var(--neutral-color); } .graph-variants > .content > .not-supported { - background-color: #ffe6e9; + background-color: var(--warning-background-color); + color: var(--warning-color); } .graph-variants > .content > .not-supported::before { content: '\2716'; margin-right: 0.5em; - color: #ed1252; + background-color: var(--warning-background-color); + color: var(--warning-color); } diff --git a/src/css/search.css b/src/css/search.css index c99d1498..a5c66010 100644 --- a/src/css/search.css +++ b/src/css/search.css @@ -63,7 +63,7 @@ body.search--active { margin-left: 1rem; flex-grow: 1; border: 0 none; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); height: 3rem; } @@ -74,7 +74,7 @@ body.search--active { .search .search-container .search-form input::placeholder { font-style: italic; - color: var(--color-grey-400); + color: rgba(var(--colors-neutral-40)); } .search .search-container .search-form .search-icon { @@ -88,7 +88,7 @@ body.search--active { .search svg line { stroke-width: 1.5; - stroke: var(--color-grey-600); + stroke: rgba(var(--colors-neutral-60)); } .search .search-container .search-results { @@ -105,8 +105,8 @@ body.search--active { .search .search-container .search-results.loading::before { content: ""; display: block; - border: 0.3rem solid var(--color-grey-200); - border-top: 0.3rem solid var(--color-grey-600); + border: 0.3rem solid rgba(var(--colors-neutral-20)); + border-top: 0.3rem solid rgba(var(--colors-neutral-60)); border-radius: 50%; width: 3rem; height: 3rem; @@ -144,14 +144,14 @@ body.search--active { } .search .search-container .search-filters h2 { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); font-weight: 400; font-size: 0.8rem; margin: 0; } .search .search-filters-header { - background: var(--color-blue-100); + background: rgba(var(--colors-baltic-10)); display: flex; flex-direction: row; justify-content: space-between; @@ -190,7 +190,7 @@ body.search--active { .search .search-filter-checkbox label span { float: right; - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); } .search-results .search-result-item { @@ -204,7 +204,7 @@ body.search--active { } .search-results .search-result-item h3 a { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } .search-results .search-result-item em { @@ -220,21 +220,21 @@ body.search--active { display: block; font-size: 0.7rem; font-weight: 400; - color: var(--color-blue-800); + color: rgba(var(--colors-baltic-50)); margin-bottom: 0.5rem; } .search-results .search-result-item .search-result-body { font-size: 0.8rem; margin-bottom: 0.5rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .search-results .search-result-label { line-height: 1; font-size: 0.7rem; - background: var(--color-grey-200); - color: var(--color-grey-600); + background: rgba(var(--colors-neutral-20)); + color: rgba(var(--colors-neutral-60)); font-style: normal; padding: 0.2rem 0.5rem; font-weight: 600; @@ -242,13 +242,13 @@ body.search--active { } .search-results .label--docs { - background: var(--color-blue-600); - color: var(--color-blue-100); + background: rgba(var(--colors-baltic-50)); + color: rgba(var(--colors-baltic-10)); } .search-results .label--developer-guide { - background: var(--color-grey-800); - color: var(--color-grey-200); + background: rgba(var(--colors-neutral-80)); + color: rgba(var(--colors-neutral-20)); } .search-results .label--knowledge-base { @@ -266,12 +266,12 @@ body.search--active { } .search-results .search-pagination-link { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); cursor: pointer; } .search-results .search-pagination-link:hover { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); } .search-results .search-pagination .search-pagination--next { diff --git a/src/css/site.css b/src/css/site.css index 4fd6d88e..81b6c1cc 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -2,6 +2,7 @@ @import "../../node_modules/@neo4j-ndl/base/lib/tokens/css/tokens.css"; @import "typeface-roboto-mono.css"; @import "vars.css"; +/* @import "vars-dark.css"; */ @import "base.css"; @import "body.css"; @import "nav.css"; @@ -17,6 +18,7 @@ @import "header.css"; @import "footer.css"; @import "highlight.css"; +/* @import "highlight-dark.css"; */ @import "print.css"; @import "gram.css"; @import "labels.css"; diff --git a/src/css/spinner.css b/src/css/spinner.css index 777011cb..bcb85f17 100644 --- a/src/css/spinner.css +++ b/src/css/spinner.css @@ -10,7 +10,7 @@ width: 100%; height: 100%; border-radius: 50%; - background-color: var(--color-grey-300); + background-color: rgba(var(--colors-neutral-30)); opacity: 0.6; position: absolute; top: 0; diff --git a/src/css/themes.css b/src/css/themes.css index 8847481c..d7b06f11 100644 --- a/src/css/themes.css +++ b/src/css/themes.css @@ -7,7 +7,7 @@ body.docs { --navbar-background: var(--color-white); --navbar-top-border: var(--color-docs); - --navbar-font-color: var(--color-grey-600); + --navbar-font-color: rgba(var(--colors-neutral-60)); --navbar_hover-background: transparent; --nav-bullet-color: var(--color-blue-300); @@ -22,50 +22,50 @@ body.docs .search .search-container .search-form { body.docs .navbar, body.docs .navbar-brand .navbar-item:first-child, body.docs .navbar-brand .navbar-item:first-child a { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } @media screen and (min-width: 1024px) { body.docs .navbar-end > .navbar-item, body.docs .navbar-end .navbar-link { - color: var(--color-grey-600); + color: var(--color-docs); } body.docs .navbar-end > a.navbar-item:hover, body.docs .navbar-end .navbar-link:hover { - color: var(--color-grey-600); + color: var(--color-docs); } body.docs .navbar-end .navbar-link::after { - border-color: var(--color-grey-600); + border-color: var(--color-docs); } body.docs .navbar-item.has-dropdown:hover .navbar-link { - color: var(--color-grey-600); + color: var(--color-docs); } } body.docs .navbar-burger { - color: var(--color-grey-600); + color: var(--color-docs); } body.docs .navbar-burger span { - background: var(--color-grey-600); + background: var(--color-docs); } body.docs .doc .button { - background: var(--color-blue-600); + background: var(--color-docs); color: var(--color-white); } body.docs .doc .button:hover { - background: var(--color-blue-500); + background: rgba(var(--colors-baltic-60)); color: var(--color-white); } body.docs .nav-item .nav-item::before, body.docs .toc-menu li a::before { - background-color: var(--color-blue-300); + color: rgba(var(--colors-baltic-30)); } body.docs .tooltip { @@ -83,24 +83,34 @@ body.docs .tooltip.tooltip--bottom::after { body.docs #preamble .abstract .title, body.docs #preamble .abstract blockquote { border-left-color: var(--color-docs); - color: var(--color-blue-800); + color: rgba(var(--colors-baltic-60)); } body.docs .tableblock .icon i { - color: var(--color-blue-600); + color: var(--color-docs); +} + +/* positive and negative */ + +body.docs .icon i.fa-thumbs-up { + color: rgba(var(--theme-light-palette-success-icon)); +} + +body.docs .icon i.fa-thumbs-down { + color: rgba(var(--theme-light-palette-danger-icon)); } body.docs .navbar .navbar-item.getting-started-cta .navbar-link { - background: var(--colors-primary-default); + background: var(--color-docs); color: var(--color-white); } body.docs .navbar .navbar-item.getting-started-cta .navbar-link:hover { - background: var(--colors-primary-50); + background: rgba(var(--colors-baltic-60)); } body.docs .navbar .navbar-item.getting-started-cta .navbar-link:active { - background: var(--colors-primary-60); + background: rgba(var(--colors-baltic-70)); } /* @@ -108,7 +118,7 @@ body.labs { --navbar-background: var(--color-white); --navbar-top-border: var(--navbar-font-color); - --navbar-font-color: var(--color-grey-600); + --navbar-font-color: rgba(var(--colors-neutral-60)); --navbar_hover-background: transparent; --nav-bullet-color: var(--color-purple-300); @@ -123,44 +133,44 @@ body.labs .search .search-container .search-form { body.labs .navbar, body.labs .navbar-brand .navbar-item:first-child, body.labs .navbar-brand .navbar-item:first-child a { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } @media screen and (min-width: 1024px) { body.labs .navbar-end > .navbar-item, body.labs .navbar-end .navbar-link { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.labs .navbar-end > a.navbar-item:hover, body.labs .navbar-end .navbar-link:hover { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.labs .navbar-end .navbar-link::after { - border-color: var(--color-grey-600); + border-color: rgba(var(--colors-neutral-60)); } body.labs .navbar-item.has-dropdown:hover .navbar-link { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } } body.labs .navbar-burger { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.labs .navbar-burger span { - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-60)); } body.labs .doc .button { - background: var(--color-purple-500); + background: var(--color-labs); color: var(--color-white); } body.labs .doc .button:hover { - background: var(--color-purple-400); + background: rgba(var(--colors-lavender-60)); color: var(--color-white); } @@ -184,21 +194,26 @@ body.labs .tooltip.tooltip--bottom::after { body.labs #preamble .abstract .title, body.labs #preamble .abstract blockquote { border-left-color: var(--color-labs); - color: var(--color-purple-800); + color: rgba(var(--colors-lavender-80)); } body.labs .tableblock .icon i { - color: var(--color-purple-600); + color: var(--color-labs); } body.labs .navbar .navbar-item.getting-started-cta .navbar-link { - background: var(--color-purple-400); + background: var(--color-labs); + color: var(--color-white); +} + +body.labs .navbar .navbar-item.getting-started-cta .navbar-link:hover { + background: rgba(var(--colors-lavender-50)); color: var(--color-white); } /* Labs Home Page */ body.landing.labs .hero { - background-color: var(--color-purple-600); + background-color: var(--color-labs); background-image: url('https://cdn.neo4jlabs.com/images/lab-pipette-big.jpg'); /* background-image: url('https://cdn.neo4jlabs.com/images/lab-pipette-big-overlay.jpg'); */ background-repeat: no-repeat; @@ -210,7 +225,7 @@ body.landing.labs .hero h2 { } body.landing.labs h2::after { - background-color: var(--color-purple-600) !important; + background-color: var(--color-labs) !important; } body.landing.labs .hero p { @@ -218,7 +233,7 @@ body.landing.labs .hero p { } .landing.labs .hero .buttons::before { - background-color: var(--color-purple-600); + background-color: rgba(var(--colors-lavender-40)); } .landing.labs .hero .buttons::after { @@ -226,16 +241,16 @@ body.landing.labs .hero p { } body.landing.labs .buttons > * { - background: var(--color-purple-600); + background: rgba(var(--colors-lavender-40)); } body.landing.labs .buttons li a { - background: var(--color-purple-800); + background: var(--color-labs); color: white; } body.landing.labs .buttons li a:hover { - background: var(--color-purple-700); + background: rgba(var(--colors-lavender-50)); } body.landing.labs .buttons li a:active { @@ -243,7 +258,7 @@ body.landing.labs .buttons li a:active { } /* body.developer { - --nav-bullet-color: var(--color-grey-500); + --nav-bullet-color: rgba(var(--colors-neutral-50)); } */ body.developer .navbar, body.developer .search .search-container .search-form { @@ -252,7 +267,7 @@ body.developer .search .search-container .search-form { body.developer .nav-item .nav-item::before, body.developer .toc-menu li a::before { - background-color: var(--color-grey-500); + background-color: rgba(var(--colors-neutral-50)); } .developer .navbar-brand #neo4j-group { @@ -260,7 +275,7 @@ body.developer .toc-menu li a::before { } .developer .navbar-brand #developer { - fill: var(--color-grey-400); + fill: rgba(var(--colors-neutral-40)); } body.developer .doc .button { @@ -274,7 +289,7 @@ body.developer .doc .button:hover { } body.developer .doc .button:active { - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-60)); color: var(--color-white); } @@ -288,17 +303,21 @@ body.developer .tableblock .icon i { } body.developer .navbar .navbar-item.getting-started-cta .navbar-link { - background: var(--color-grey-700); + background: var(--color-docs); color: var(--color-white); } +body.developer .navbar .navbar-item.getting-started-cta:hover .navbar-link { + background: rgba(var(--colors-baltic-60)); +} + /* Developer Home Page */ body.landing.developer .navbar { border-bottom: 0 none; } body.landing.developer .hero { - background: linear-gradient(180deg, var(--color-grey-800) 0%, var(--color-grey-700) 45%, var(--color-grey-700) 100%); + background: linear-gradient(180deg, rgba(var(--colors-neutral-80)) 0%, rgba(var(--colors-neutral-70)) 45%, rgba(var(--colors-neutral-70)) 100%); } @media all and (min-width: 760px) { @@ -330,7 +349,7 @@ body.landing.developer .hero { } body.landing.developer .hero .buttons::before { - background-color: var(--color-grey-600); + background-color: rgba(var(--colors-neutral-60)); } body.landing.developer .hero .buttons::after { @@ -338,16 +357,16 @@ body.landing.developer .hero .buttons::after { } body.landing.developer .sect1 .buttons > * { - background: var(--color-grey-600); + background: rgba(var(--colors-neutral-60)); } body.landing.developer .buttons li a { - background: var(--color-grey-800); + background: rgba(var(--colors-neutral-80)); color: white; } body.landing.developer .buttons li a:hover { - background: var(--color-grey-700); + background: rgba(var(--colors-neutral-70)); } body.landing.developer .buttons li a:active { @@ -365,7 +384,7 @@ body.kb .search .search-container .search-form { } .kb .navbar-brand #developer { - fill: var(--color-grey-400); + fill: rgba(var(--colors-neutral-40)); } .kb .navbar-brand #neo4j-group { @@ -373,10 +392,18 @@ body.kb .search .search-container .search-form { } body.kb .navbar .navbar-item.getting-started-cta .navbar-link { - background: var(--color-purple-600); + background: var(--color-labs); color: var(--color-white); } +body.kb .navbar .navbar-item.getting-started-cta .navbar-link:hover { + background: rgba(var(--colors-lavender-50)); +} + +body.kb .navbar .navbar-item.getting-started-cta .navbar-link:active { + background: rgba(var(--colors-lavender-60)); +} + body.training .navbar, body.training .search .search-container .search-form { border-top-color: var(--color-training); @@ -384,7 +411,7 @@ body.training .search .search-container .search-form { } .training .navbar-brand #developer { - fill: var(--color-grey-400); + fill: rgba(var(--colors-neutral-40)); } .training .navbar-brand #neo4j-group { @@ -403,11 +430,11 @@ body.graphgists svg.graphgists { body.graphgists .navbar, body.graphgists .search .search-container .search-form { border-top-color: var(--color-graphgists); - border-bottom-color: var(--color-grey-800); + border-bottom-color: var(--color-black); } .graphgists .navbar-brand #developer { - fill: var(--color-grey-400); + fill: rgba(var(--colors-neutral-40)); } .graphgists .navbar-brand #neo4j-group { @@ -415,6 +442,6 @@ body.graphgists .search .search-container .search-form { } body.graphgists .navbar .navbar-item.getting-started-cta .navbar-link { - background: var(--color-purple-600); + background: var(--color-labs); color: var(--color-white); } diff --git a/src/css/tiles.css b/src/css/tiles.css index c5e06b3f..2b98a424 100644 --- a/src/css/tiles.css +++ b/src/css/tiles.css @@ -1,10 +1,10 @@ /* body.tiles { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); } body.landing .primary, body.landing .secondary { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); padding: 2em 0; position: relative; } @@ -15,7 +15,7 @@ body.landing .primary { body.landing .primary::before, body.landing .secondary::before { - background: var(--color-grey-100); + background: rgba(var(--colors-neutral-15)); position: relative; left: -50%; width: 100%; @@ -41,7 +41,7 @@ body.landing .doc h1.page { body.landing .doc .paragraph { flex: 0 0 100%; margin: 2rem auto; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } body.tiles .doc .paragraph { @@ -94,7 +94,7 @@ body.tiles .sect2 .paragraph { font-size: 0.8rem; text-align: left; margin-top: 0.5rem; - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); } body.tiles .sect2 ul { @@ -112,7 +112,7 @@ body.tiles .sect2 ul li { body.tiles .sect2 ul li a { display: inline-block; color: var(--color-blue-600); - border: 1px solid var(--color-grey-200); + border: 1px solid rgba(var(--colors-neutral-20)); padding: 0.1rem 0.7rem; border-radius: 0.2rem; font-size: 0.7rem; diff --git a/src/css/toc-ad.css b/src/css/toc-ad.css index 781ed333..5ad70195 100644 --- a/src/css/toc-ad.css +++ b/src/css/toc-ad.css @@ -1,5 +1,5 @@ .toc .toc-ad { - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); padding: 1rem 0.5rem; border-radius: 0.5rem; margin: 2rem -0.5rem 0; @@ -16,7 +16,7 @@ .toc .toc-ad .toc-ad-overline { font-size: 0.7rem; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); text-transform: uppercase; background-color: var(--color-white); } @@ -24,7 +24,7 @@ .toc .toc-ad .toc-ad-overline a { padding-left: 0 !important; border-left: 0 none !important; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); } .toc .toc-ad .toc-ad-image { @@ -33,24 +33,24 @@ } .toc .toc-ad .toc-ad-overline a:hover { - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); } .toc .toc-ad .toc-ad-title { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); font-size: 1rem; margin: 0.2rem 0 !important; padding: 0 !important; } .toc .toc-ad-description { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); font-size: 0.8rem; margin-top: 0; } .toc .toc-ad-underline { - color: var(--color-blue-600); + color: rgba(var(--colors-baltic-50)); font-weight: bold; font-size: 0.8rem; } @@ -58,7 +58,7 @@ .toc .toc-ad-underline-button, .toc .toc-ad .button { border-radius: 0.25rem; - background-color: var(--color-blue-600); + background-color: rgba(var(--colors-baltic-50)); color: var(--color-white); display: inline-block; font-size: 0.8rem; @@ -67,7 +67,7 @@ } .doc .ad { - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); border-radius: 0.5rem; background: var(--color-white); margin: 2rem -1rem 0; @@ -77,14 +77,14 @@ } .doc .ad h2 { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); font-size: 0.8rem !important; text-transform: uppercase; margin-top: 0; } .doc .ad h2 a { - color: var(--color-grey-500); + color: rgba(var(--colors-neutral-50)); } .doc .ad .anchor { diff --git a/src/css/toc.css b/src/css/toc.css index a295d66c..d8ff76e0 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -12,16 +12,16 @@ .toc.sidebar .toc-menu { margin-right: 0.75rem; position: sticky; - top: var(--toc-top); + top: calc(var(--toc-top) + 1rem); } .toc .toc-menu h2 { color: var(--toc-heading-font-color); - font-size: calc(16 / var(--rem-base) * 1rem); + font-size: var(--doc-font-size-h5); font-weight: var(--body-font-weight-bold); line-height: 1.5; - margin: 1.5rem -0.5px 0; - padding: 0.5rem 0 0.25rem; + margin: 1rem -0.5px 0; + padding: 1.5rem 0 1.25rem; } .toc.sidebar .toc-menu h3 { @@ -89,7 +89,7 @@ .toc .toc-menu a { color: inherit; - border-left: 1px solid var(--toc-border-color); + border-left: 1px solid rgba(var(--colors-neutral-20)); display: inline-block; padding: 0.25rem 0 0.25rem 0.5rem; text-decoration: none; @@ -105,9 +105,9 @@ } .toc .toc-menu a.is-active { - /* border-left-color: var(--link-font-color); */ - /* color: var(--link-font-color); */ - color: var(--toc_active-font-color); + border-left-color: var(--link-font-color); + color: var(--link-font-color); + /* color: var(--toc_active-font-color); */ } .toc .toc-menu a.is-active::before { diff --git a/src/css/toolbar.css b/src/css/toolbar.css index f012e83d..4481ab57 100644 --- a/src/css/toolbar.css +++ b/src/css/toolbar.css @@ -51,6 +51,7 @@ background-size: 50%; display: block; height: 2.5rem; + margin: 0; padding: 0; width: 2.5rem; } @@ -58,6 +59,11 @@ .home-link:hover, .home-link.is-current { background-image: url(../img/home.svg); + /* color: rgba(var(--colors-baltic-50)); */ +} + +.home-link a line { + stroke: rgba(var(--colors-baltic-50)); } .edit-this-page { @@ -78,5 +84,5 @@ } .toolbar .edit-this-page a { - color: var(--toolbar-muted-color); + color: rgba(var(--colors-baltic-50)); } diff --git a/src/css/training.css b/src/css/training.css index 68963bf7..bc910c0d 100644 --- a/src/css/training.css +++ b/src/css/training.css @@ -110,7 +110,7 @@ content: ''; display: block; position: absolute; - background: var(--color-grey-200); + background: rgba(var(--colors-neutral-20)); height: 2px; top: 1.25rem; } @@ -140,9 +140,9 @@ .training-home .hero { color: white; padding: 8rem 0 2rem !important; - background: var(--color-grey-800); + background: rgba(var(--colors-neutral-80)); background: rgb(2, 0, 36); - background: linear-gradient(180deg, var(--color-grey-800) 0%, var(--color-grey-700) 45%, var(--color-grey-700) 100%); + background: linear-gradient(180deg, rgba(var(--colors-neutral-80)) 0%, rgba(var(--colors-neutral-70)) 45%, rgba(var(--colors-neutral-70)) 100%); text-align: left; } @@ -235,7 +235,7 @@ } .training-courses .course-content .course-duration { - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); display: flex; align-items: center; margin-top: 0.1rem; @@ -358,14 +358,14 @@ .training-enrollment .course-actions .panel { display: grid; padding: 1rem; - background-color: var(--color-grey-100); + background-color: rgba(var(--colors-neutral-15)); border-top: 5px solid var(--color-training); } .training-certification .course-actions a.button-logout, .training-enrollment .course-actions a.button-logout { background: none; - color: var(--color-grey-600); + color: rgba(var(--colors-neutral-60)); text-decoration: underline; text-align: end; display: block; @@ -389,7 +389,7 @@ /* Form */ .training-certification .course-actions form label, .training-enrollment .course-actions form label { - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); display: block; font-size: 1rem; margin-bottom: 0.5rem; @@ -427,12 +427,12 @@ .training-certification .course-actions form input:hover, .training-enrollment .course-actions form input:hover { - border-color: var(--color-grey-500); + border-color: rgba(var(--colors-neutral-50)); } .training-certification .course-actions form select:hover, .training-enrollment .course-actions form select:hover { - border-color: var(--color-grey-500); + border-color: rgba(var(--colors-neutral-50)); } .training-certification .course-actions form select, @@ -443,10 +443,10 @@ outline: 0; background-color: white; border-radius: 4px; - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); -webkit-appearance: none; align-items: center; - border: 1px solid var(--color-grey-400); + border: 1px solid rgba(var(--colors-neutral-40)); box-shadow: none; font-size: 1rem; height: 2.5em; @@ -465,11 +465,11 @@ width: 100%; background-color: white; border-radius: 4px; - color: var(--color-grey-800); + color: rgba(var(--colors-neutral-80)); -moz-appearance: none; -webkit-appearance: none; align-items: center; - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); box-shadow: none; display: inline-flex; font-size: 1rem; @@ -749,7 +749,7 @@ body.training .nav-item .nav-item.is-pending::before { color: white; text-align: center; font-weight: bold; - border: 1px solid var(--color-grey-500); + border: 1px solid rgba(var(--colors-neutral-50)); background-color: var(--navbar-font-color); transition: all 0.2s linear; } @@ -762,7 +762,7 @@ body.training .nav-item .nav-item.is-completed:hover::before { body.training .nav-item .nav-item.is-current-page::before, body.training .nav-item .nav-item:hover::before { opacity: 1; - background-color: var(--color-grey-500); + background-color: rgba(var(--colors-neutral-50)); z-index: 1000; } @@ -893,7 +893,7 @@ body.training .button { #yelp-dataset-agreement { padding: 0.75em; - border: 1px solid var(--color-grey-300); + border: 1px solid rgba(var(--colors-neutral-30)); margin-bottom: 1em; margin-right: 1em; } diff --git a/src/css/vars-dark.css b/src/css/vars-dark.css new file mode 100644 index 00000000..0761084e --- /dev/null +++ b/src/css/vars-dark.css @@ -0,0 +1,406 @@ +:root { + + /* --colors-baltic-50: #0A6190; */ + /* --colors-baltic-60: #014063; */ + + /* Picked from Neo4j Design System */ + /* ToDo: use it directly from the Design System when avaiable instead of redefining here */ + --colors-primary-10: #e6f8ff; + --colors-primary-20: #a3e2ff; + --colors-primary-30: #7ad1ff; + --colors-primary-40: #018bff; + --colors-primary-50: #0070d9; + --colors-primary-60: #0056b3; + --colors-primary-70: #002b66; + --colors-primary-default: #018bff; + --colors-secondary-10: #ffe6e9; + --colors-secondary-20: #ffb8c4; + --colors-secondary-30: #ff668a; + --colors-secondary-40: #ed1252; + --colors-secondary-50: #c70646; + --colors-secondary-60: #a1003b; + --colors-secondary-70: #7a0031; + --colors-secondary-default: #ed1252; + --colors-success-10: #e1faef; + --colors-success-20: #98edcb; + --colors-success-30: #44d4a4; + --colors-success-40: #00ba88; + --colors-success-50: #009471; + --colors-success-60: #006e58; + --colors-success-70: #00473b; + --colors-success-default: #00ba88; + --colors-warning-10: #fffbde; + --colors-warning-20: #fff4b5; + --colors-warning-30: #ffea8c; + --colors-warning-40: #ffde63; + --colors-warning-50: #d9b54a; + --colors-warning-60: #8c6a22; + --colors-warning-70: #664817; + --colors-warning-default: #ffde63; + --colors-blueberry-10: #e8ebf6; + --colors-blueberry-20: #c4cce9; + --colors-blueberry-30: #9dabd9; + --colors-blueberry-40: #768aca; + --colors-blueberry-50: #3557b4; + --colors-blueberry-60: #25459e; + --colors-blueberry-70: #0b297d; + --colors-blueberry-default: #0b297d; + --colors-mint-10: #f0fffa; + --colors-mint-20: #d1fff4; + --colors-mint-30: #a8ffee; + --colors-mint-40: #55f9e2; + --colors-mint-50: #3dd4c5; + --colors-mint-60: #2aada5; + --colors-mint-70: #116161; + --colors-mint-default: #55f9e2; + --body-font-color: rgba(var(--colors-neutral-65)); + + /* end: design system colors */ + + --color-black: #000; + --color-white: rgba(var(--colors-neutral-10)); + --color-grey-100: #f7fafc; + --color-grey-200: #edf2f7; + --color-grey-300: #e2e8f0; + --color-grey-400: #cbd5e0; + --color-grey-500: #a0aec0; + --color-grey-600: #718096; + --color-grey-700: #4a5568; + --color-grey-800: #2d3748; + --color-grey-900: #1a202c; + --color-red-100: #fff5f5; + --color-red-200: #fed7d7; + --color-red-300: #feb2b2; + --color-red-400: #fc8181; + --color-red-500: #f56565; + --color-red-600: #e53e3e; + --color-red-700: #c53030; + --color-red-800: #9b2c2c; + --color-red-900: #742a2a; + --color-orange-100: #fffaf0; + --color-orange-200: #feebc8; + --color-orange-300: #fbd38d; + --color-orange-400: #f6ad55; + --color-orange-500: #ed8936; + --color-orange-600: #dd6b20; + --color-orange-700: #c05621; + --color-orange-800: #9c4221; + --color-orange-900: #7b341e; + --color-yellow-100: #fffff0; + --color-yellow-200: #fefcbf; + --color-yellow-300: #faf089; + --color-yellow-400: #f6e05e; + --color-yellow-500: #ecc94b; + --color-yellow-600: #d69e2e; + --color-yellow-700: #b7791f; + --color-yellow-800: #975a16; + --color-yellow-900: #744210; + --color-green-100: #f0fff4; + --color-green-200: #c6f6d5; + --color-green-300: #9ae6b4; + --color-green-400: #68d391; + --color-green-500: #48bb78; + --color-green-600: #38a169; + --color-green-700: #2f855a; + --color-green-800: #276749; + --color-green-900: #22543d; + --color-teal-100: #e6fffa; + --color-teal-200: #b2f5ea; + --color-teal-300: #81e6d9; + --color-teal-400: #4fd1c5; + --color-teal-500: #38b2ac; + --color-teal-600: #319795; + --color-teal-700: #2c7a7b; + --color-teal-800: #285e61; + --color-teal-900: #234e52; + --color-blue-100: #ebf8ff; + --color-blue-200: #bee3f8; + --color-blue-300: #90cdf4; + --color-blue-400: #63b3ed; + --color-blue-500: #4299e1; + --color-blue-600: #3182ce; + --color-blue-700: #2b6cb0; + --color-blue-800: #2c5282; + --color-blue-900: #2a4365; + --color-indigo-100: #ebf4ff; + --color-indigo-200: #c3dafe; + --color-indigo-300: #a3bffa; + --color-indigo-400: #7f9cf5; + --color-indigo-500: #667eea; + --color-indigo-600: #5a67d8; + --color-indigo-700: #4c51bf; + --color-indigo-800: #434190; + --color-indigo-900: #3c366b; + --color-purple-100: #faf5ff; + --color-purple-200: #e9d8fd; + --color-purple-300: #d6bcfa; + --color-purple-400: #b794f4; + --color-purple-500: #9f7aea; + --color-purple-600: #805ad5; + --color-purple-700: #6b46c1; + --color-purple-800: #553c9a; + --color-purple-900: #44337a; + --color-pink-100: #fff5f7; + --color-pink-200: #fed7e2; + --color-pink-300: #fbb6ce; + --color-pink-400: #f687b3; + --color-pink-500: #ed64a6; + --color-pink-600: #d53f8c; + --color-pink-700: #b83280; + --color-pink-800: #97266d; + --color-pink-900: #702459; + + /* theme accent colors */ + --color-developer: rgba(var(--colors-forest-40)); + --color-labs: rgba(var(--colors-lavender-50)); + --color-docs: rgba(var(--colors-baltic-50)); + --color-kb: rgba(var(--colors-lavender-50)); + --color-training: rgba(var(--colors-hibiscus-50)); + --color-graphgists: rgba(var(--colors-lavender-50)); + + /* fonts */ + --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ + --body-font-weight: var(--font-weight-light); + --body-font-size: 1.0625em; /* 17px */ + --body-font-size--desktop: 1em; /* 18px */ + --body-font-size--print: 0.9375em; /* 15px */ + --body-line-height: 1.5; + --body-font-color: rgba(var(--colors-neutral-70)); + --body-font-family: "Public Sans", "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif; + --body-font-weight-bold: var(--font-weight-semibold); + --monospace-font-family: "Roboto Mono", monospace; + --monospace-font-weight-bold: var(--font-weight-medium); + + /* base */ + --body-background: rgba(var(--colors-neutral-10)); + --panel-background: rgba(var(--colors-neutral-15)); + --panel-border-color: rgba(var(--colors-neutral-20)); + --scrollbar-thumb-color: rgba(var(--colors-neutral-15)); + /* navbar */ + --navbar-background: rgba(var(--colors-neutral-80)); + --navbar-font-color: rgba(var(--colors-neutral-15)); + --navbar-font-weight: 400; + --navbar_hover-background: transparent; + --navbar-button-background: var(--color-orange-600); + --navbar-button-border-color: var(--color-blue-800); + --navbar-button-font-color: var(--color-blue-100); + --navbar-menu-border-color: var(--panel-border-color); + --navbar-menu-background: rgba(var(--colors-neutral-10)); + --navbar-menu-font-color: var(--body-font-color); + --navbar-menu_hover-background: transparent; + --navbar-top-border: rgba(var(--colors-neutral-20)); + --navbar-bottom-border: rgba(var(--colors-neutral-20)); + --navbar-dropdown-link: rgba(var(--colors-baltic-50)); + --navbar-dropdown_hover-link: var(--color-blue-800); + --navbar-training-border: var(--color-developer); + --navbar-developer-border: var(--color-developer); + --navbar-docs-border: var(--color-docs); + --navbar-labs-border: var(--color-labs); + --navbar-kb-border: var(--color-kb); + + /* nav */ + --nav-background: rgba(var(--colors-neutral-15)); + --nav-border-color: rgba(var(--colors-neutral-20)); + --nav-font-weight: 400; + --nav_active-font-weight: 400; + --nav-line-height: 1.2; + --nav-heading-font-color: rgba(var(--colors-neutral-55)); + --nav-muted-color: rgba(var(--colors-neutral-40)); + --nav-panel-divider-color: rgba(var(--colors-neutral-20)); + --nav-secondary-background: rgba(var(--colors-neutral-30)); + --nav-bullet-color: rgba(var(--colors-neutral-40)); + + /* toolbar */ + --toolbar-background: var(--panel-background); + --toolbar-border-color: rgba(var(--colors-neutral-20)); + --toolbar-font-color: rgba(var(--colors-neutral-70)); + --toolbar-muted-color: rgba(var(--colors-neutral-50)); + --page-version-menu-background: rgba(var(--colors-neutral-10)); + --page-version-menu-border: rgba(var(--colors-neutral-30)); + --page-version-missing-font-color: rgba(var(--colors-neutral-30)); + + /* toc */ + --toc-font-color: rgba(var(--colors-neutral-70)); + --toc_active-font-color: rgba(var(--colors-baltic-70)); + --toc_active-background-color: rgba(var(--colors-baltic-10)); + --toc_hover-background-color: rgba(var(--colors-neutral-15)); + --toc-heading-font-color: rgba(var(--colors-neutral-70)); + --toc-border-color: rgba(var(--colors-neutral-30)); + --toc-line-height: 1.4; + --toc-bullet-color: rgba(var(--colors-baltic-50)); + + /* kb metadata */ + --kb-metadata-font-color: rgba(var(--colors-neutral-70)); + + /* admonitions + NB: admonitions are dark text on light background + to use the same colors on labels, reverse the + background and color */ + --caution-color: rgba(var(--colors-marigold-70)); + --caution-border-color: rgba(var(--colors-marigold-50)); + --caution-background-color: rgba(var(--colors-marigold-10)); + --important-color: rgba(var(--colors-lavender-70)); + --important-border-color: rgba(var(--colors-lavender-50)); + --important-background-color: rgba(var(--colors-lavender-10)); + --note-color: rgba(var(--colors-forest-70)); + --note-border-color: rgba(var(--colors-forest-40)); + --note-background-color: rgba(var(--colors-forest-10)); + --tip-color: rgba(var(--theme-light-palette-primary-bg-strong)); + --tip-background-color: rgba(var(--theme-light-palette-primary-bg-weak)); + --warning-color: rgba(var(--theme-light-palette-danger-bg-strong)); + --warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --mark-background: rgba(var(--colors-highlights-yellow)); + + /* success */ + --success-color: rgba(var(--theme-light-palette-success-bg-strong)); + --success-background-color: rgba(var(--theme-light-palette-success-bg-weak)); + + /* neutral */ + --neutral-color: rgba(var(--theme-light-palette-neutral-text-default)); + --neutral-background-color: rgba(var(--theme-light-palette-neutral-bg-default)); + + /* feedback */ + --feedback-color: var(--color-docs); + --feedback-background-color: rgba(var(--theme-light-palette-primary-bg-weak)); + --feedback-positive-color: rgba(var(--theme-light-palette-success-bg-weak)); + --feedback-positive-background-color: rgba(var(--theme-light-palette-success-bg-strong)); + --feedback-negative-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --feedback-negative-background-color: rgba(var(--theme-light-palette-danger-bg-strong)); + + /* tbc: success indicator for tutorials */ + --success-color: rgba(var(--theme-light-palette-success-bg-strong)); + --success-background-color: rgba(var(--theme-light-palette-success-bg-weak)); + + /* doc */ + --doc-font-color: rgba(var(--theme-light-palette-neutral-text-weaker)); + --doc-font-size: inherit; + --doc-font-size--desktop: var(--font-size-body-large); + /* --doc-line-height: var(--space-7); */ + --doc-line-height: 1.8; + --doc-margin: 0 auto; + --doc-margin--desktop: 0 2rem; + + /* headers */ + --doc-font-size-h1: var(--font-size-h2); + --doc-font-size-h2: var(--font-size-h3); + --doc-font-size-h3: var(--font-size-h4); + --doc-font-size-h4: var(--font-size-h5); + --doc-font-size-h5: var(--font-size-h6); + --doc-font-size-h6: calc(var(--font-size-h6) * 0.75); + --heading-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --heading-font-weight: var(--font-weight-normal); + --alt-heading-font-weight: var(--body-font-weight-bold); + --section-divider-color: rgba(var(--colors-neutral-20)); + + /* links */ + --link-font-color: rgba(var(--colors-baltic-50)); + --link_hover-font-color: rgba(var(--colors-baltic-40)); + --link_visited-font-color: rgba(var(--colors-baltic-55)); + --link_unresolved-font-color: var(--important-color); + + /* abstract */ + --abstract-background: rgba(var(--colors-neutral-10)); + --abstract-font-color: rgba(var(--colors-neutral-70)); + --abstract-border-color: var(--panel-border-color); + --admonition-background: var(--panel-background); + --admonition-label-font-weight: var(--body-font-weight-bold); + --caption-font-color: rgba(var(--colors-neutral-70)); + --caption-font-weight: var(--body-font-weight-bold); + + /* code */ + --code-header-background: rgba(var(--theme-dark-palette-neutral-bg-strong)); + --code-header-font-color: rgba(var(--theme-dark-palette-neutral-text-default)); + --code-header-font-size: var(--font-size-body-medium); + --code-background: rgba(var(--theme-dark-palette-neutral-bg-default)); + --code-result-background: rgba(var(--theme-dark-palette-neutral-bg-strong)); + --code-result-font-color: rgba(var(--theme-dark-palette-neutral-text-default)); + --code-font-color: rgba(var(--theme-dark-palette-neutral-text-default)); + --code-button-background: rgba(var(--colors-neutral-70)); + --code-button-active-background: rgba(var(--colors-neutral-60)); + --code-button-disabled-background: rgba(var(--colors-neutral-80)); + --code-button-font-color: rgba(var(--colors-neutral-70)); + --inline-code-background: rgba(var(--theme-light-palette-neutral-bg-default)); + --inline-code-font-color: var(--body-font-color); + --pre-background: var(--panel-background); + --pre-border-color: var(--panel-border-color); + --pre-annotation-font-color: rgba(var(--colors-neutral-70)); + + /* examples */ + --example-header-background: rgba(var(--theme-light-palette-neutral-bg-default)); + --example-header-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --example-background: rgba(var(--colors-neutral-10)); + --example-border-color: rgba(var(--theme-light-palette-neutral-bg-strong)); + + /* quotes */ + --quote-background: rgba(var(--colors-baltic-10)); + --quote-border-color: rgba(var(--colors-baltic-70)); + --quote-font-color: rgba(var(--colors-baltic-50)); + --quote-attribution-font-color: rgba(var(--colors-baltic-50)); + --sidebar-background: rgba(var(--theme-light-palette-neutral-bg-strong)); + --table-border-color: var(--panel-border-color); + --table-header-color: rgba(var(--colors-neutral-20)); + --table-stripe-background: rgba(var(--colors-neutral-15)); + --kbd-background: var(--panel-background); + --kbd-border-color: rgba(var(--colors-neutral-40)); + + /* roles */ + --deprecated-color: rgba(var(--theme-light-palette-danger-bg-strong)); + --deprecated-background-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --not-on-aura-color: var(--warning-background-color); + --not-on-aura-background-color: var(--warning-color); + --aura-db-enterprise-color: rgba(var(--colors-baltic-10)); + --aura-db-enterprise-background-color: rgba(var(--colors-baltic-50)); + --enterprise-edition-color: rgba(var(--colors-baltic-10)); + --enterprise-edition-background-color: rgba(var(--colors-baltic-50)); + --fabric-color: rgba(var(--colors-baltic-10)); + --fabric-background-color: rgba(var(--colors-baltic-50)); + --alpha-beta-color: rgba(var(--colors-marigold-10)); + --alpha-beta-background-color: rgba(var(--colors-marigold-50)); + + /* footer */ + --footer-font-size: var(--font-size-body-medium); + --footer-line-height: var(--doc-line-height); + --footer-background: var(--color-black); + --footer-font-color: rgba(var(--colors-neutral-10)); + --footer-link-font-color: rgba(var(--colors-neutral-10)); + --footer-link_hover-font-color: rgba(var(--colors-neutral-20)); + + /* dimensions and positioning */ + --navbar-height: calc(68 / var(--rem-base) * 1rem); + --toolbar-height: calc(45 / var(--rem-base) * 1rem); + --drawer-height: var(--toolbar-height); + --body-top: var(--navbar-height); + --body-min-height: calc(100vh - var(--body-top)); + --nav-height: calc(var(--body-min-height) - var(--toolbar-height)); + --nav-height--desktop: var(--body-min-height); + --nav-panel-height: calc(var(--nav-height) - var(--drawer-height)); + --nav-panel-height--desktop: + calc( + var(--nav-height--desktop) - var(--drawer-height) + ); + --nav-width: 18rem; + --toc-top: calc(var(--body-top) + var(--toolbar-height)); + --kb-metadata-top: calc(var(--body-top) + var(--toolbar-height)); + --toc-height: calc(100vh - var(--toc-top) - 8.5rem); + --toc-width: calc(162 / var(--rem-base) * 1rem); + --kb-metadata-width: calc(216 / var(--rem-base) * 1rem); + --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem); + --kb-metadata-width--widescreen: calc(244 / var(--rem-base) * 1rem); + --toolbar-wrapper-width: 69rem; + --doc-max-width: calc(720 / var(--rem-base) * 1rem); + --doc-max-width--desktop: calc(980 / var(--rem-base) * 1rem); + --cheat-sheet-max-width--desktop: calc(1100 / var(--rem-base) * 1rem); + + /* stacking */ + --z-index-nav: 1; + --z-index-toolbar: 20; + --z-index-code: 10; + --z-index-page-version-menu: 3; + --z-index-navbar: 5000; + + /* landing page */ + --landing-leading-background: rgba(var(--colors-neutral-30)); + + /* Label colors */ + --label-group-syntax: #e6e6e6; +} diff --git a/src/css/vars.css b/src/css/vars.css index 8dbb7d0d..feb11088 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -1,5 +1,8 @@ :root { + /* --colors-baltic-50: #0A6190; */ + /* --colors-baltic-60: #014063; */ + /* Picked from Neo4j Design System */ /* ToDo: use it directly from the Design System when avaiable instead of redefining here */ --colors-primary-10: #e6f8ff; @@ -50,26 +53,12 @@ --colors-mint-60: #2aada5; --colors-mint-70: #116161; --colors-mint-default: #55f9e2; - --colors-neutral-10: #fff; - --colors-neutral-15: #f5f7fa; - --colors-neutral-20: #eef1f6; - --colors-neutral-25: #e6e9ee; - --colors-neutral-30: #d5d9de; - --colors-neutral-35: #c4c8cd; - --colors-neutral-40: #b2b7bd; - --colors-neutral-45: #90979f; - --colors-neutral-50: #717780; - --colors-neutral-55: #535b66; - --colors-neutral-60: #404752; - --colors-neutral-65: #2c3540; - --colors-neutral-70: #212a34; - --colors-neutral-75: #151e29; - --body-font-color: var(--colors-neutral-65); + --body-font-color: rgba(var(--colors-neutral-60)); /* end: design system colors */ --color-black: #000; - --color-white: #fff; + --color-white: rgba(var(--colors-neutral-10)); --color-grey-100: #f7fafc; --color-grey-200: #edf2f7; --color-grey-300: #e2e8f0; @@ -160,46 +149,50 @@ --color-pink-700: #b83280; --color-pink-800: #97266d; --color-pink-900: #702459; - --color-developer: var(--color-green-600); - --color-labs: var(--color-purple-400); - --color-docs: var(--color-blue-400); - --color-kb: var(--color-purple-600); - --color-training: var(--color-pink-600); - --color-graphgists: var(--color-purple-600); + + /* theme accent colors */ + --color-developer: rgba(var(--colors-forest-45)); + --color-labs: rgba(var(--colors-lavender-45)); + --color-docs: rgba(var(--colors-baltic-50)); + --color-kb: rgba(var(--colors-lavender-45)); + --color-kb-weak: rgba(var(--colors-lavender-20)); + --color-training: rgba(var(--colors-hibiscus-50)); + --color-graphgists: rgba(var(--colors-lavender-45)); /* fonts */ --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */ - --body-font-weight: 400; + --body-font-weight: var(--font-weight-light); --body-font-size: 1.0625em; /* 17px */ --body-font-size--desktop: 1em; /* 18px */ --body-font-size--print: 0.9375em; /* 15px */ --body-line-height: 1.5; - --body-font-color: var(--color-grey-700); - --body-font-family: "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif; - --body-font-weight-bold: 600; + --body-font-color: rgba(var(--colors-neutral-70)); + --body-font-family: "Public Sans", "Nunito Sans", "Helvetica Neue", helvetica, roboto, arial, sans-serif; + --body-font-weight-bold: var(--font-weight-semibold); --monospace-font-family: "Roboto Mono", monospace; - --monospace-font-weight-bold: 500; + --monospace-font-weight-bold: var(--font-weight-medium); /* base */ - --body-background: var(--color-white); - --panel-background: var(--color-grey-100); - --panel-border-color: var(--color-grey-200); - --scrollbar-thumb-color: var(--color-grey-100); + --body-background: rgba(var(--colors-neutral-10)); + --panel-background: rgba(var(--colors-neutral-15)); + --panel-border-color: rgba(var(--colors-neutral-20)); + --scrollbar-thumb-color: rgba(var(--colors-neutral-15)); /* navbar */ - --navbar-background: var(--color-grey-800); - --navbar-font-color: var(--color-grey-100); + --navbar-background: rgba(var(--colors-neutral-80)); + --hero-fade: rgba(var(--colors-neutral-50)); + --navbar-font-color: rgba(var(--colors-neutral-15)); --navbar-font-weight: 400; --navbar_hover-background: transparent; - --navbar-button-background: var(--color-orange-600); - --navbar-button-border-color: var(--color-blue-800); - --navbar-button-font-color: var(--color-blue-100); + --navbar-button-background: var(--color-docs); + --navbar-button-border-color: rgba(var(--color-baltic-60)); + --navbar-button-font-color: var(--color-white); --navbar-menu-border-color: var(--panel-border-color); - --navbar-menu-background: var(--color-white); + --navbar-menu-background: rgba(var(--colors-neutral-10)); --navbar-menu-font-color: var(--body-font-color); --navbar-menu_hover-background: transparent; - --navbar-top-border: var(--color-grey-200); - --navbar-bottom-border: var(--color-grey-300); - --navbar-dropdown-link: var(--color-blue-600); + --navbar-top-border: rgba(var(--colors-neutral-20)); + --navbar-bottom-border: rgba(var(--colors-neutral-20)); + --navbar-dropdown-link: rgba(var(--colors-baltic-50)); --navbar-dropdown_hover-link: var(--color-blue-800); --navbar-training-border: var(--color-developer); --navbar-developer-border: var(--color-developer); @@ -208,112 +201,171 @@ --navbar-kb-border: var(--color-kb); /* nav */ - --nav-background: var(--colors-neutral-15); - --nav-border-color: var(--color-grey-200); + --nav-background: rgba(var(--colors-neutral-15)); + --nav-border-color: rgba(var(--colors-neutral-20)); --nav-font-weight: 400; --nav_active-font-weight: 400; --nav-line-height: 1.2; - --nav-heading-font-color: var(--colors-neutral-55); - --nav-muted-color: var(--color-grey-400); - --nav-panel-divider-color: var(--color-grey-200); - --nav-secondary-background: var(--color-grey-300); - --nav-bullet-color: var(--color-grey-400); + --nav-heading-font-color: rgba(var(--colors-neutral-55)); + --nav-muted-color: rgba(var(--colors-neutral-40)); + --nav-panel-divider-color: rgba(var(--colors-neutral-20)); + --nav-secondary-background: rgba(var(--colors-neutral-30)); + --nav-bullet-color: rgba(var(--colors-neutral-40)); /* toolbar */ --toolbar-background: var(--panel-background); - --toolbar-border-color: var(--panel-border-color); - --toolbar-font-color: var(--color-grey-700); - --toolbar-muted-color: var(--color-grey-500); - --page-version-menu-background: var(--color-white); - --page-version-menu-border: var(--color-grey-300); - --page-version-missing-font-color: var(--color-grey-300); + --toolbar-border-color: rgba(var(--colors-neutral-20)); + --toolbar-font-color: rgba(var(--colors-neutral-70)); + --toolbar-muted-color: rgba(var(--colors-neutral-50)); + --page-version-menu-background: rgba(var(--colors-neutral-10)); + --page-version-menu-border: rgba(var(--colors-neutral-30)); + --page-version-missing-font-color: rgba(var(--colors-neutral-30)); /* toc */ - --toc-font-color: var(--color-grey-700); - --toc_active-font-color: var(--color-blue-700); - --toc-heading-font-color: var(--color-grey-700); - --toc-border-color: var(--color-grey-300); + --toc-font-color: rgba(var(--colors-neutral-70)); + --toc_active-font-color: rgba(var(--colors-baltic-70)); + --toc_active-background-color: rgba(var(--colors-baltic-10)); + --toc_hover-background-color: rgba(var(--colors-neutral-15)); + --toc-heading-font-color: rgba(var(--colors-neutral-70)); + --toc-border-color: rgba(var(--colors-neutral-30)); --toc-line-height: 1.4; - --toc-bullet-color: var(--color-blue-600); + --toc-bullet-color: rgba(var(--colors-baltic-50)); /* kb metadata */ - --kb-metadata-font-color: var(--color-grey-700); + --kb-metadata-font-color: rgba(var(--colors-neutral-70)); + + /* admonitions + NB: admonitions are dark text on light background + to use the same colors on labels, reverse the + background and color */ + --caution-color: rgba(var(--colors-marigold-70)); + --caution-border-color: rgba(var(--colors-marigold-50)); + --caution-background-color: rgba(var(--colors-marigold-10)); + --important-color: rgba(var(--colors-lavender-70)); + --important-border-color: rgba(var(--colors-lavender-50)); + --important-background-color: rgba(var(--colors-lavender-10)); + --note-color: rgba(var(--colors-forest-70)); + --note-border-color: rgba(var(--colors-forest-40)); + --note-background-color: rgba(var(--colors-forest-10)); + --tip-color: rgba(var(--theme-light-palette-primary-bg-strong)); + --tip-background-color: rgba(var(--theme-light-palette-primary-bg-weak)); + --warning-color: rgba(var(--theme-light-palette-danger-bg-strong)); + --warning-background-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --mark-background: rgba(var(--colors-highlights-yellow)); + + /* success */ + --success-color: rgba(var(--theme-light-palette-success-bg-strong)); + --success-background-color: rgba(var(--theme-light-palette-success-bg-weak)); - /* admonitions */ - --caution-color: var(--color-orange-600); - --caution-on-color: var(--color-white); - --important-color: var(--color-purple-600); - --important-on-color: var(--color-white); - --note-color: var(--color-purple-600); - --note-on-color: var(--color-white); - --tip-color: var(--color-blue-600); - --tip-on-color: var(--color-white); - --warning-color: var(--color-red-600); - --warning-on-color: var(--color-white); - --mark-background: var(--color-yellow-200); + /* neutral */ + --neutral-color: rgba(var(--theme-light-palette-neutral-text-default)); + --neutral-background-color: rgba(var(--theme-light-palette-neutral-bg-default)); + + /* feedback */ + --feedback-color: var(--color-docs); + --feedback-background-color: rgba(var(--theme-light-palette-primary-bg-weak)); + --feedback-positive-color: rgba(var(--theme-light-palette-success-bg-weak)); + --feedback-positive-background-color: rgba(var(--theme-light-palette-success-bg-strong)); + --feedback-negative-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --feedback-negative-background-color: rgba(var(--theme-light-palette-danger-bg-strong)); + + /* tbc: success indicator for tutorials */ + --success-color: rgba(var(--theme-light-palette-success-bg-strong)); + --success-background-color: rgba(var(--theme-light-palette-success-bg-weak)); /* doc */ - --doc-font-color: var(--color-grey-800); + --doc-font-color: rgba(var(--theme-light-palette-neutral-text-weaker)); --doc-font-size: inherit; - --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem); + --doc-font-size--desktop: var(--font-size-body-large); + /* --doc-line-height: var(--space-7); */ --doc-line-height: 1.8; --doc-margin: 0 auto; --doc-margin--desktop: 0 2rem; - --heading-font-color: var(--color-grey-700); - --heading-font-weight: normal; + + /* headers */ + --doc-font-size-h1: var(--font-size-h2); + --doc-font-size-h2: var(--font-size-h3); + --doc-font-size-h3: var(--font-size-h4); + --doc-font-size-h4: var(--font-size-h5); + --doc-font-size-h5: var(--font-size-h6); + --doc-font-size-h6: calc(var(--font-size-h6) * 0.75); + --heading-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --heading-font-weight: var(--font-weight-normal); --alt-heading-font-weight: var(--body-font-weight-bold); - --section-divider-color: var(--color-grey-300); - --link-font-color: var(--color-blue-600); - --link_hover-font-color: var(--color-purple-600); - --link_visited-font-color: var(--color-blue-800); + --section-divider-color: rgba(var(--colors-neutral-20)); + + /* links */ + --link-font-color: rgba(var(--colors-baltic-50)); + --link_hover-font-color: rgba(var(--colors-baltic-40)); + --link_visited-font-color: rgba(var(--colors-baltic-55)); --link_unresolved-font-color: var(--important-color); - --abstract-background: var(--color-white); - --abstract-font-color: var(--color-grey-700); + + /* abstract */ + --abstract-background: rgba(var(--colors-neutral-10)); + --abstract-font-color: rgba(var(--colors-neutral-70)); --abstract-border-color: var(--panel-border-color); --admonition-background: var(--panel-background); --admonition-label-font-weight: var(--body-font-weight-bold); - --caption-font-color: var(--color-grey-700); + --caption-font-color: rgba(var(--colors-neutral-70)); --caption-font-weight: var(--body-font-weight-bold); - --code-background: var(--panel-background); - --code-font-color: var(--body-font-color); - --code-header-background: var(--color-grey-700); - --code-header-font-color: var(--color-grey-100); - --code-button-background: var(--color-grey-700); - --code-button-active-background: var(--color-grey-600); - --code-button-disabled-background: var(--color-grey-800); - --code-button-font-color: var(--color-grey-700); - --example-background: var(--color-white); - --example-border-color: var(--color-grey-700); - --kbd-background: var(--panel-background); - --kbd-border-color: var(--color-grey-400); + + /* code */ + --code-header-background: rgba(var(--theme-light-palette-neutral-bg-strong)); + --code-header-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --code-header-font-size: var(--font-size-body-medium); + --code-background: rgba(var(--theme-light-palette-neutral-bg-default)); + --code-result-background: rgba(var(--theme-light-palette-neutral-bg-strong)); + --code-result-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --code-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --code-button-background: rgba(var(--colors-neutral-70)); + --code-button-active-background: rgba(var(--colors-neutral-60)); + --code-button-disabled-background: rgba(var(--colors-neutral-80)); + --code-button-font-color: rgba(var(--colors-neutral-70)); + --inline-code-background: rgba(var(--theme-light-palette-neutral-bg-default)); + --inline-code-font-color: var(--body-font-color); --pre-background: var(--panel-background); --pre-border-color: var(--panel-border-color); - --pre-annotation-font-color: var(--color-grey-700); - --quote-background: var(--panel-background); - --quote-border-color: var(--color-grey-700); - --quote-font-color: var(--color-grey-700); - --quote-attribution-font-color: var(--color-grey-300); - --sidebar-background: var(--color-grey-300); + --pre-annotation-font-color: rgba(var(--colors-neutral-70)); + + /* examples */ + --example-header-background: rgba(var(--theme-light-palette-neutral-bg-default)); + --example-header-font-color: rgba(var(--theme-light-palette-neutral-text-default)); + --example-background: rgba(var(--colors-neutral-10)); + --example-border-color: rgba(var(--theme-light-palette-neutral-bg-strong)); + + /* quotes */ + --quote-background: rgba(var(--colors-baltic-10)); + --quote-border-color: rgba(var(--colors-baltic-70)); + --quote-font-color: rgba(var(--colors-baltic-50)); + --quote-attribution-font-color: rgba(var(--colors-baltic-50)); + --sidebar-background: rgba(var(--theme-light-palette-neutral-bg-strong)); --table-border-color: var(--panel-border-color); - --table-stripe-background: var(--color-grey-100); - --deprecation-color: var(--color-pink-600); - --deprecation-on-color: var(--color-white); - --not-on-aura-color: var(--color-red-700); - --not-on-aura-on-color: var(--color-white); - --aura-db-enterprise-color: var(--color-blue-600); - --aura-db-enterprise-on-coor: var(--color-white); - --enterprise-edition-color: var(--color-green-600); - --enterprise-edition-on-color: var(--color-white); - --fabric-color: var(--color-blue-500); - --fabric-on-color: var(--color-white); - --alpha-beta-color: var(--color-orange-500); + --table-header-color: rgba(var(--colors-neutral-20)); + --table-stripe-background: rgba(var(--colors-neutral-15)); + --kbd-background: var(--panel-background); + --kbd-border-color: rgba(var(--colors-neutral-40)); + + /* roles */ + --deprecated-color: rgba(var(--theme-light-palette-danger-bg-strong)); + --deprecated-background-color: rgba(var(--theme-light-palette-danger-bg-weak)); + --not-on-aura-color: var(--warning-background-color); + --not-on-aura-background-color: var(--warning-color); + --aura-db-enterprise-color: rgba(var(--colors-baltic-10)); + --aura-db-enterprise-background-color: rgba(var(--colors-baltic-50)); + --enterprise-edition-color: rgba(var(--colors-baltic-10)); + --enterprise-edition-background-color: rgba(var(--colors-baltic-50)); + --fabric-color: rgba(var(--colors-baltic-10)); + --fabric-background-color: rgba(var(--colors-baltic-50)); + --alpha-beta-color: var(--color-black); + --alpha-beta-background-color: rgba(var(--colors-marigold-40)); /* footer */ + --footer-font-size: var(--font-size-body-medium); --footer-line-height: var(--doc-line-height); - --footer-background: var(--color-grey-800); - --footer-font-color: var(--color-grey-500); - --footer-link-font-color: var(--color-grey-400); - --footer-link_hover-font-color: var(--color-grey-200); + --footer-background: var(--color-black); + --footer-font-color: rgba(var(--colors-neutral-10)); + --footer-link-font-color: rgba(var(--colors-neutral-10)); + --footer-link_hover-font-color: rgba(var(--colors-neutral-20)); /* dimensions and positioning */ --navbar-height: calc(68 / var(--rem-base) * 1rem); @@ -349,7 +401,7 @@ --z-index-navbar: 5000; /* landing page */ - --landing-leading-background: var(--color-grey-300); + --landing-leading-background: rgba(var(--colors-neutral-20)); /* Label colors */ --label-group-syntax: #e6e6e6; diff --git a/src/img/Logo_White_RGB_TransBG.svg b/src/img/Logo_White_RGB_TransBG.svg new file mode 100644 index 00000000..716ff328 --- /dev/null +++ b/src/img/Logo_White_RGB_TransBG.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs index 1ab52710..6d62db27 100644 --- a/src/partials/footer-content.hbs +++ b/src/partials/footer-content.hbs @@ -1,23 +1,10 @@
-
-
-

© {{year}} Neo4j, Inc.
- Terms | Privacy | Sitemap

-

Neo4j®, Neo Technology®, Cypher®, Neo4j® Bloom™ and - Neo4j® Aura™ are registered trademarks - of Neo4j, Inc. All other marks are owned by their respective companies.

-
-
-

Contact Us →

-

US: 1-855-636-4532
- Sweden +46 171 480 113
- UK: +44 20 3868 3223
- France: +33 (0) 1 88 46 13 20
- -

+ +

Learn

+
+

Contact Us →

+
    +
  • US: 1-855-636-4532
    • +
  • Sweden +46 171 480 113
    • +
  • UK: +44 20 3868 3223
    • +
  • France: +33 (0) 1 88 46 13 20
    • + {{!--
  • Germany: +49 (0)89 26204 6300
    • --}} +
+
+ +
+

© {{year}} Neo4j, Inc.
+ Terms | Privacy | Sitemap

+

Neo4j®, Neo Technology®, Cypher®, Neo4j® Bloom™ and + Neo4j® Aura™ are registered trademarks + of Neo4j, Inc. All other marks are owned by their respective companies.

+
+ +
diff --git a/src/partials/head-styles.hbs b/src/partials/head-styles.hbs index c66310e5..33903c16 100644 --- a/src/partials/head-styles.hbs +++ b/src/partials/head-styles.hbs @@ -12,7 +12,10 @@ {{/if}} {{!-- --}} - + {{!-- --}} + + + diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index 81d79528..10f0e55e 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -7,37 +7,37 @@ {{!-- --}} {{#if (eq page.attributes.theme "docs") }} - + Docs {{else if (eq page.attributes.theme "cheat-sheet")}} - + Cypher Cheat Sheet {{else if (eq page.attributes.theme "labs")}} - + Labs {{else if (eq page.attributes.theme "kb")}} - + Knowledge Base {{else if (eq page.attributes.theme "training")}} - + GraphAcademy {{else if (eq page.attributes.theme "graphgists")}} - + GraphGists {{else}} - + Developer