@seqera/docusaurus-theme-seqera 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.js CHANGED
@@ -57,6 +57,7 @@ function themeSeqera(context, options) {
57
57
  './styles/api.css',
58
58
  './styles/search.css',
59
59
  './styles/admonition-alerts.css',
60
+ './styles/other-overrides.css',
60
61
  ];
61
62
  modules.push(...customCss.map((p) => path_1.default.resolve(context.siteDir, p)));
62
63
  return modules;
@@ -10,7 +10,7 @@
10
10
  name: 'light';
11
11
  default: true;
12
12
  --color-primary: var(--color-nextflow-800);
13
- --color-secondary: var(--color-nextflow-200);
13
+ --color-secondary: var(--color-nextflow-500);
14
14
  --color-accent: #f59e0b;
15
15
  --color-neutral: #3d4451;
16
16
  --color-base-100: #ffffff;
@@ -65,10 +65,118 @@ Infima is Docusaurus's built in CSS framework.
65
65
 
66
66
  --ifm-color-info: var(--color-multiqc-600);
67
67
 
68
+
68
69
  /* remove box shadow variables */
69
70
  --ifm-global-shadow-lw: none;
70
71
  --ifm-global-shadow-md: none;
71
72
  --ifm-global-shadow-tl: none;
73
+
74
+
75
+ /* Nextflow (green) colors */
76
+ --color-nextflow-100: #e2f7f3;
77
+ --color-nextflow-200: #b6ece2;
78
+ --color-nextflow-300: #86e0ce;
79
+ --color-nextflow-400: #56d3ba;
80
+ --color-nextflow-500: #31c9ac;
81
+ --color-nextflow-600: #0dc09d;
82
+ --color-nextflow-700: #0cae8e;
83
+ --color-nextflow-800: #0a967b;
84
+ --color-nextflow-900: #087f68;
85
+ --color-nextflow-1000: #065647;
86
+ --color-nextflow: #0dc09d;
87
+
88
+ /* Wave (blue) colors */
89
+ --color-wave-100: #e8f2ff;
90
+ --color-wave-200: #c5dffe;
91
+ --color-wave-300: #9ecafe;
92
+ --color-wave-400: #77b5fe;
93
+ --color-wave-500: #5aa5fd;
94
+ --color-wave-600: #3d95fd;
95
+ --color-wave-700: #3787e5;
96
+ --color-wave-800: #3074c5;
97
+ --color-wave-900: #2863a7;
98
+ --color-wave-1000: #1b4372;
99
+ --color-wave: #3d95fd;
100
+
101
+ /* Fusion (red) colors */
102
+ --color-fusion-100: #feedec;
103
+ --color-fusion-200: #fed2d0;
104
+ --color-fusion-300: #fdb4b1;
105
+ --color-fusion-400: #fc9592;
106
+ --color-fusion-500: #fb7f7a;
107
+ --color-fusion-600: #fa6863;
108
+ --color-fusion-700: #e25e5a;
109
+ --color-fusion-800: #c3514d;
110
+ --color-fusion-900: #a64541;
111
+ --color-fusion-1000: #712f2c;
112
+ --color-fusion: #fa6863;
113
+
114
+ /* MultiQC (orange) colors */
115
+ --color-multiqc-100: #fdf0e9;
116
+ --color-multiqc-200: #fbd9c8;
117
+ --color-multiqc-300: #f8c0a3;
118
+ --color-multiqc-400: #f5a67e;
119
+ --color-multiqc-500: #f39362;
120
+ --color-multiqc-600: #f18046;
121
+ --color-multiqc-700: #da743f;
122
+ --color-multiqc-800: #bc6437;
123
+ --color-multiqc-900: #a0552f;
124
+ --color-multiqc-1000: #6c3a20;
125
+ --color-multiqc: #f18046;
126
+
127
+ /* Brand (purple/grey) colors */
128
+ --color-brand-100: #f3f3f4;
129
+ --color-brand-200: #e8e7e9;
130
+ --color-brand-300: #d0cfd4;
131
+ --color-brand-400: #b9b7be;
132
+ --color-brand-500: #a29fa8;
133
+ --color-brand-600: #8a8792;
134
+ --color-brand-700: #736f7d;
135
+ --color-brand-800: #5c5767;
136
+ --color-brand-900: #453f51;
137
+ --color-brand-1000: #2d273c;
138
+ --color-brand-1100: #160f26;
139
+ --color-brand-1200: #151121;
140
+ --color-brand-1300: #141024;
141
+ --color-brand-1400: #110d1d;
142
+ --color-brand: #160f26;
143
+
144
+ /* Gray Colors */
145
+ --color-gray-100: #f7f7f7;
146
+ --color-gray-200: #eaebeb;
147
+ --color-gray-300: #dddede;
148
+ --color-gray-400: #cfd0d1;
149
+ --color-gray-500: #c4c6c7;
150
+ --color-gray-600: #babcbd;
151
+ --color-gray-700: #a8aaab;
152
+ --color-gray-800: #919393;
153
+ --color-gray-900: #7b7b7b;
154
+ --color-gray-1000: #545555;
155
+
156
+ /* Product (purple) colors */
157
+ --color-product-100: #eae8f1;
158
+ --color-product-200: #cbc6dd;
159
+ --color-product-300: #a9a1c6;
160
+ --color-product-400: #867baf;
161
+ --color-product-500: #6c5e9d;
162
+ --color-product-600: #52428c;
163
+ --color-product-700: #4a3c7f;
164
+ --color-product-800: #40346d;
165
+ --color-product-900: #362c5d;
166
+ --color-product-1000: #251e3f;
167
+
168
+ /* Seqera "blue" Colors */
169
+ --color-blu-100: #e8ebfc;
170
+ --color-blu-200: #c6ccf8;
171
+ --color-blu-300: #a1abf3;
172
+ --color-blu-400: #7b89ee;
173
+ --color-blu-500: #5e6feb;
174
+ --color-blu-600: #4256e7;
175
+ --color-blu-700: #3c4ed1;
176
+ --color-blu-800: #3443b4;
177
+ --color-blu-900: #2c3999;
178
+ --color-blu-1000: #1e2768;
179
+ --color-blu: #4256e7;
72
180
  }
73
181
 
74
182
  /* Dark Mode Support */
@@ -1,8 +1,12 @@
1
-
2
1
  .alert {
3
2
  box-shadow: none;
4
3
  }
5
4
 
5
+ .theme-admonition {
6
+ p {
7
+ line-height: 1.8;
8
+ }
9
+ }
6
10
  .alert--warning {
7
11
  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
8
12
  --ifm-alert-background-color-highlight: #ffba0026;
@@ -19,7 +23,7 @@
19
23
  [data-theme='dark'] {
20
24
  .theme-admonition-tip,
21
25
  .theme-admonition-success {
22
- background-color: var(--color-nextflow-900);
26
+ background-color: var(--color-nextflow-1000);
23
27
  border-color: var(--color-nextflow-600);
24
28
  }
25
29
  }
@@ -33,7 +37,7 @@
33
37
  [data-theme='dark'] {
34
38
  .theme-admonition-note,
35
39
  .alert--info {
36
- background-color: var(--color-wave-900);
40
+ background-color: var(--color-wave-1000);
37
41
  border-color: var(--color-wave-600);
38
42
  }
39
43
  }
@@ -44,7 +48,7 @@
44
48
  }
45
49
  [data-theme='dark'] {
46
50
  .theme-admonition-warning {
47
- background-color: var(--color-multiqc-900);
51
+ background-color: var(--color-multiqc-1000);
48
52
  border-color: var(--color-multiqc-600);
49
53
  }
50
54
  }
@@ -56,7 +60,7 @@
56
60
 
57
61
  [data-theme='dark'] {
58
62
  .theme-admonition-danger {
59
- background-color: var(--color-fusion-900);
63
+ background-color: var(--color-fusion-1000);
60
64
  border-color: var(--color-fusion-600);
61
65
  }
62
66
  }
@@ -7,20 +7,23 @@ Platform API style overrides
7
7
 
8
8
  /* this is the class that wraps the main platform-api docs, so we nest overrides within */
9
9
  .plugin-id-platform-api {
10
+ --ifm-color-primary-light: var(--color-nextflow-500);
10
11
 
11
- .badge {
12
- color: var(--ifm-badge-color);
13
- }
14
- .theme-doc-version-badge {
15
- margin-bottom: 1rem;
12
+ .openapi-explorer__response-container,
13
+ .openapi-explorer__request-form,
14
+ .openapi-tabs__code-container:not(.openapi-tabs__code-container-inner) {
15
+ box-shadow: none;
16
16
  }
17
17
  .theme-admonition {
18
18
  margin: 1rem 0;
19
19
  }
20
20
  .theme-doc-version-badge {
21
+ margin-bottom: 1rem;
22
+ color: black;
23
+ }
24
+ .badge {
21
25
  font-weight: 500;
22
26
  }
23
-
24
27
  .openapi__method-endpoint-path {
25
28
  margin-left: 0.5rem;
26
29
  }
@@ -40,7 +43,7 @@ Platform API style overrides
40
43
  }
41
44
  }
42
45
  .openapi-right-panel__container {
43
- @media (min-width: 997px) {
46
+ @media (min-width: 997px) {
44
47
  padding-left: 1rem;
45
48
  }
46
49
  }
@@ -51,7 +54,7 @@ Platform API style overrides
51
54
  }
52
55
 
53
56
  .openapi-explorer__form-item-input {
54
- background: rgba(0,0,0,.05);
57
+ background: rgba(0, 0, 0, 0.05);
55
58
  }
56
59
  .tabs-container {
57
60
  ul {
@@ -88,7 +91,7 @@ Platform API style overrides
88
91
  }
89
92
  }
90
93
  &:hover {
91
- background: var(--color-blu-100);
94
+ background: var(--color-gray-100);
92
95
  border-radius: 4px;
93
96
  }
94
97
  &.post {
@@ -117,3 +120,24 @@ Platform API style overrides
117
120
  }
118
121
  }
119
122
  }
123
+
124
+ [data-theme='dark'].plugin-id-platform-api {
125
+ --openapi-tree-line-color: rgba(255, 255, 255, 0.6);
126
+ --ifm-toc-border-color: rgba(255, 255, 255, 0.6);
127
+ --ifm-color-primary-light: var(--color-nextflow-500);
128
+ .api-method {
129
+ .menu__link {
130
+ &:before {
131
+ color: white;
132
+ }
133
+ }
134
+ &:hover {
135
+ background: rgba(255, 255, 255, 0.1);
136
+ }
137
+ }
138
+ .theme-doc-version-badge {
139
+ color: white;
140
+ background: rgba(255, 255, 255, 0.4);
141
+ border-color: rgba(255, 255, 255, 0.7);
142
+ }
143
+ }
@@ -0,0 +1,6 @@
1
+ /* multiqc specific svg fix */
2
+ svg.excalidraw {
3
+ max-width: 100%;
4
+ height: 100%;
5
+ margin-bottom: 2rem;
6
+ }
@@ -1,3 +1,38 @@
1
1
  .search-page-wrapper {
2
2
  padding: 0 1rem;
3
- }
3
+ }
4
+
5
+ .search-page-wrapper .theme-layout-main {
6
+ max-width: 1080px;
7
+ margin: 0 auto;
8
+
9
+ svg {
10
+ display: none;
11
+ }
12
+
13
+ mark {
14
+ background: var(--color-nextflow-200)!important;
15
+ }
16
+ }
17
+
18
+ .search-page-wrapper .theme-layout-main {
19
+ h2 {
20
+ font-size: 1.8rem;
21
+ line-height: 1.5;
22
+
23
+ @media (min-width: 997px) {
24
+ font-size: 2.25rem;
25
+ }
26
+ }
27
+ }
28
+
29
+ [data-theme='dark'] {
30
+ --docsearch-key-gradient: rgba(255,255,255,.3)!important;
31
+ --docsearch-key-shadow: none!important;
32
+ --docsearch-muted-color: var(--color-nextflow-100) !important;
33
+ --docsearch-highlight-color: var(--color-nextflow-800)!important;
34
+ --docsearch-searchbox-shadow: var(--color-nextflow-600)!important;
35
+ --docsearch-modal-background: var(--ifm-color-gray-900)!important;
36
+ --docsearch-modal-shadow: var(--ifm-color-gray-900)!important;
37
+ --docsearch-footer-background: var(--ifm-color-gray-900)!important;
38
+ }
@@ -19,7 +19,7 @@ h6 {
19
19
  }
20
20
  .navbar__link--active {
21
21
  border-bottom: 4px solid var(--color-nextflow-600);
22
- padding-bottom: 0.1rem;
22
+ padding-bottom: 0.1rem;
23
23
  }
24
24
 
25
25
  .table-of-contents__link--active {
@@ -39,7 +39,7 @@ main prose styles
39
39
  /* H1 */
40
40
  h1 {
41
41
  font-size: 2rem;
42
- line-height: 1.1;
42
+ line-height: 1.5;
43
43
  margin-top: 0;
44
44
  margin-bottom: 1.5rem;
45
45
 
@@ -51,7 +51,7 @@ main prose styles
51
51
  /* H2 */
52
52
  h2 {
53
53
  font-size: 1.8rem;
54
- line-height: 1.2;
54
+ line-height: 1.5;
55
55
  margin-top: 2.5rem;
56
56
  margin-bottom: 1.25rem;
57
57
 
@@ -63,7 +63,7 @@ main prose styles
63
63
  /* H3 */
64
64
  h3 {
65
65
  font-size: 1.4rem;
66
- line-height: 1.3;
66
+ line-height: 1.5;
67
67
  margin-top: 2rem;
68
68
  margin-bottom: 1rem;
69
69
 
@@ -112,12 +112,15 @@ main prose styles
112
112
  p {
113
113
  margin-top: 1.25rem;
114
114
  margin-bottom: 1.25rem;
115
- line-height: 1.6;
115
+ line-height: 1.7;
116
116
  color: var(--ifm-color-content);
117
117
  }
118
+ a:not([class*='tag']) {
119
+ text-decoration: underline;
120
+ }
118
121
 
119
122
  /* Links */
120
- a:not(.btn):not([class*='btn-']):hover {
123
+ a:not(.btn):not([class*='btn-']):not([class*='tag']):hover {
121
124
  text-decoration: underline;
122
125
  &:hover {
123
126
  color: var(--ifm-color-primary);
@@ -184,15 +187,14 @@ main prose styles
184
187
  /* Inline code */
185
188
  code:not(pre code) {
186
189
  color: var(--ifm-code-color);
187
- background-color: var(--ifm-code-background);
188
- padding: 0.2rem 0.4rem;
190
+ background-color: white;
191
+ padding: 0.1rem 0.2rem;
189
192
  border-radius: 0.25rem;
190
193
  font-size: 0.875em;
191
194
  font-family: var(--ifm-font-family-monospace);
192
195
  border: 1px solid var(--color-gray-400);
193
196
  filter: none;
194
197
  box-shadow: none;
195
-
196
198
  &::before,
197
199
  &::after {
198
200
  content: none;
@@ -209,13 +211,15 @@ main prose styles
209
211
  background-color: var(--prism-background-color);
210
212
  box-shadow: none;
211
213
  filter: none;
214
+ max-width: 100%;
215
+ white-space: pre-wrap;
212
216
 
213
217
  code {
214
218
  color: var(--prism-color);
215
219
  background-color: transparent;
216
220
  padding: 0;
217
221
  border: none;
218
- font-size: 0.875rem;
222
+ font-size: 90%;
219
223
  line-height: 1.7;
220
224
  box-shadow: none;
221
225
  filter: none;
@@ -251,8 +255,9 @@ main prose styles
251
255
  margin-top: 2rem;
252
256
  margin-bottom: 2rem;
253
257
  border-collapse: collapse;
254
- font-size: 0.875rem;
258
+ /* font-size: 0.875rem; */
255
259
  line-height: 1.5;
260
+ background: rgba(255, 255, 255, 0.8);
256
261
  }
257
262
 
258
263
  thead {
@@ -339,4 +344,30 @@ main prose styles
339
344
  .admonition code:not(pre code) {
340
345
  color: #ef4444;
341
346
  }
347
+
348
+ thead {
349
+ background: #0000004d;
350
+ }
351
+ table {
352
+ background: rgba(255, 255, 255, 0.2);
353
+ }
354
+
355
+ table tr:nth-child(2n) {
356
+ background: #0003;
357
+ }
358
+ .markdown code:not(pre code) {
359
+ background: #0000004d;
360
+ }
361
+ }
362
+
363
+ .table-of-contents {
364
+ code {
365
+ padding: 0.25rem;
366
+ }
367
+
368
+ a {
369
+ &:hover {
370
+ color: var(--color-primary)!important;
371
+ }
372
+ }
342
373
  }
@@ -8,7 +8,7 @@
8
8
  text-transform: uppercase;
9
9
  display: flex;
10
10
  flex-direction: row;
11
- justify-content: flex-start;
11
+ justify-content: items-center;
12
12
  align-items: center;
13
13
  }
14
14
 
@@ -22,9 +22,10 @@
22
22
  }
23
23
 
24
24
  .admonitionIcon {
25
- display: inline-block;
26
- vertical-align: middle;
27
25
  margin-right: 0.4em;
26
+ display: flex;
27
+ justify-items: center;
28
+ align-items: center
28
29
  }
29
30
 
30
31
  .admonitionIcon svg {
@@ -30,7 +30,11 @@ function CardContainer({className, href, children}) {
30
30
  return (
31
31
  <Link
32
32
  href={href}
33
- className={clsx('card padding--lg', styles.cardContainer, className)}>
33
+ className={clsx(
34
+ 'card p-8 no-underline! hover:no-underline!',
35
+ styles.cardContainer,
36
+ className,
37
+ )}>
34
38
  {children}
35
39
  </Link>
36
40
  );
@@ -39,14 +43,17 @@ function CardLayout({className, href, icon, title, description}) {
39
43
  return (
40
44
  <CardContainer href={href} className={className}>
41
45
  <Heading
42
- as="h2"
43
- className={clsx('text--truncate', styles.cardTitle)}
46
+ as="h3"
47
+ className={clsx('text-[1.2rem]! text--truncate m-2!', styles.cardTitle)}
44
48
  title={title}>
45
49
  {icon} {title}
46
50
  </Heading>
47
51
  {description && (
48
52
  <p
49
- className={clsx('text--truncate', styles.cardDescription)}
53
+ className={clsx(
54
+ 'text--truncate card-link opacity-80 m-0!',
55
+ styles.cardDescription,
56
+ )}
50
57
  title={description}>
51
58
  {description}
52
59
  </p>
@@ -4,26 +4,29 @@
4
4
  --ifm-link-color: var(--ifm-color-emphasis-800);
5
5
  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
6
6
  --ifm-link-hover-decoration: none;
7
-
8
- box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
9
7
  border: 1px solid var(--ifm-color-emphasis-200);
8
+ border-radius: 0;
10
9
  transition: all var(--ifm-transition-fast) ease;
11
- transition-property: border, box-shadow;
10
+ }
11
+
12
+ .cardContainer p:hover {
13
+ text-decoration: none;
12
14
  }
13
15
 
14
16
  .cardContainer:hover {
15
17
  border-color: var(--ifm-color-primary);
16
- box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
17
18
  }
18
19
 
19
- .cardContainer *:last-child {
20
+ .cardContainer {
20
21
  margin-bottom: 0;
21
22
  }
22
23
 
23
24
  .cardTitle {
24
- font-size: 1.2rem;
25
+ font-size: 1rem;
26
+ font-weight: 500;
27
+ margin: 0!important;
25
28
  }
26
29
 
27
30
  .cardDescription {
28
- font-size: 0.8rem;
31
+ font-size: 0.9rem;
29
32
  }
@@ -12,7 +12,7 @@ function DocCardListForCurrentSidebarCategory({className}) {
12
12
  }
13
13
  function DocCardListItem({item}) {
14
14
  return (
15
- <article className={clsx(styles.docCardListItem, 'col col--6')}>
15
+ <article className={clsx(styles.docCardListItem, 'w-full m-0!')}>
16
16
  <DocCard item={item} />
17
17
  </article>
18
18
  );
@@ -24,7 +24,8 @@ export default function DocCardList(props) {
24
24
  }
25
25
  const filteredItems = filterDocCardListItems(items);
26
26
  return (
27
- <section className={clsx('row', className)}>
27
+ <section
28
+ className={clsx('grid grid-cols-1 lg:grid-cols-2 gap-6', className)}>
28
29
  {filteredItems.map((item, index) => (
29
30
  <DocCardListItem key={index} item={item} />
30
31
  ))}
@@ -1,3 +1,3 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import type { Props } from '@theme/Icon/AI';
3
- export default function IconAI(props: Props): ReactNode;
3
+ export default function IconAI({ lightFill, darkFill, ...props }: Props): ReactNode;
@@ -1,15 +1,27 @@
1
1
  import React from 'react';
2
- export default function IconAI(props) {
2
+ export default function IconAI({
3
+ lightFill = '#160F26',
4
+ darkFill = '#FFFFFF',
5
+ ...props
6
+ }) {
3
7
  return (
4
8
  <svg viewBox="0 0 32 34" fill="none" {...props}>
5
9
  <path
6
10
  d="M12.7857 13.406L16 1L19.2143 13.406L31 16.7895L19.2143 21.3008L16 32.5789L12.7857 21.3008L1 16.7895L12.7857 13.406Z"
7
- stroke="currentColor"
11
+ className="stroke-[var(--icon-stroke)] dark:stroke-[var(--icon-stroke-dark)]"
12
+ style={{
13
+ '--icon-stroke': lightFill,
14
+ '--icon-stroke-dark': darkFill,
15
+ }}
8
16
  strokeLinejoin="round"
9
17
  strokeWidth="1.5"></path>
10
18
  <path
11
19
  d="M26.2109 5.79327L27.0567 8.89478L27.9026 5.79327L31.0041 4.94741L27.9026 3.81959L27.0567 1.00004L26.2109 3.81959L23.1094 4.94741L26.2109 5.79327Z"
12
- stroke="currentColor"
20
+ className="stroke-[var(--icon-stroke)] dark:stroke-[var(--icon-stroke-dark)]"
21
+ style={{
22
+ '--icon-stroke': lightFill,
23
+ '--icon-stroke-dark': darkFill,
24
+ }}
13
25
  strokeLinejoin="round"
14
26
  strokeWidth="1.5"></path>
15
27
  </svg>
@@ -27,7 +27,7 @@ export default function NotFoundContent({className}) {
27
27
  </Translate>
28
28
  </p>
29
29
  <a
30
- className="btn btn-secondary shadow-none border text-black"
30
+ className="btn btn-secondary shadow-none border text-black no-underline!"
31
31
  href="/">
32
32
  Back to docs homepage
33
33
  </a>
@@ -6,7 +6,7 @@ export default function PaginatorNavLink(props) {
6
6
  return (
7
7
  <Link
8
8
  className={clsx(
9
- 'pagination-nav__link',
9
+ 'pagination-nav__link no-underline!',
10
10
  isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
11
11
  )}
12
12
  to={permalink}>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seqera/docusaurus-theme-seqera",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Seqera docs theme for Docusaurus",
5
5
  "author": "Seqera docs team <education@seqera.io>",
6
6
  "license": "Apache-2.0",
@@ -46,7 +46,6 @@
46
46
  "utility-types": "^3.10.0"
47
47
  },
48
48
  "devDependencies": {
49
- "@tailwindcss/typography": "^0.5.19",
50
49
  "@types/lodash": "^4.17.0",
51
50
  "@types/nprogress": "^0.2.0",
52
51
  "@types/prismjs": "^1.26.0",
package/src/index.ts CHANGED
@@ -87,6 +87,7 @@ export default function themeSeqera(
87
87
  './styles/api.css',
88
88
  './styles/search.css',
89
89
  './styles/admonition-alerts.css',
90
+ './styles/other-overrides.css',
90
91
  ];
91
92
 
92
93
  modules.push(...customCss.map((p) => path.resolve(context.siteDir, p)));
@@ -10,7 +10,7 @@
10
10
  name: 'light';
11
11
  default: true;
12
12
  --color-primary: var(--color-nextflow-800);
13
- --color-secondary: var(--color-nextflow-200);
13
+ --color-secondary: var(--color-nextflow-500);
14
14
  --color-accent: #f59e0b;
15
15
  --color-neutral: #3d4451;
16
16
  --color-base-100: #ffffff;
@@ -65,10 +65,118 @@ Infima is Docusaurus's built in CSS framework.
65
65
 
66
66
  --ifm-color-info: var(--color-multiqc-600);
67
67
 
68
+
68
69
  /* remove box shadow variables */
69
70
  --ifm-global-shadow-lw: none;
70
71
  --ifm-global-shadow-md: none;
71
72
  --ifm-global-shadow-tl: none;
73
+
74
+
75
+ /* Nextflow (green) colors */
76
+ --color-nextflow-100: #e2f7f3;
77
+ --color-nextflow-200: #b6ece2;
78
+ --color-nextflow-300: #86e0ce;
79
+ --color-nextflow-400: #56d3ba;
80
+ --color-nextflow-500: #31c9ac;
81
+ --color-nextflow-600: #0dc09d;
82
+ --color-nextflow-700: #0cae8e;
83
+ --color-nextflow-800: #0a967b;
84
+ --color-nextflow-900: #087f68;
85
+ --color-nextflow-1000: #065647;
86
+ --color-nextflow: #0dc09d;
87
+
88
+ /* Wave (blue) colors */
89
+ --color-wave-100: #e8f2ff;
90
+ --color-wave-200: #c5dffe;
91
+ --color-wave-300: #9ecafe;
92
+ --color-wave-400: #77b5fe;
93
+ --color-wave-500: #5aa5fd;
94
+ --color-wave-600: #3d95fd;
95
+ --color-wave-700: #3787e5;
96
+ --color-wave-800: #3074c5;
97
+ --color-wave-900: #2863a7;
98
+ --color-wave-1000: #1b4372;
99
+ --color-wave: #3d95fd;
100
+
101
+ /* Fusion (red) colors */
102
+ --color-fusion-100: #feedec;
103
+ --color-fusion-200: #fed2d0;
104
+ --color-fusion-300: #fdb4b1;
105
+ --color-fusion-400: #fc9592;
106
+ --color-fusion-500: #fb7f7a;
107
+ --color-fusion-600: #fa6863;
108
+ --color-fusion-700: #e25e5a;
109
+ --color-fusion-800: #c3514d;
110
+ --color-fusion-900: #a64541;
111
+ --color-fusion-1000: #712f2c;
112
+ --color-fusion: #fa6863;
113
+
114
+ /* MultiQC (orange) colors */
115
+ --color-multiqc-100: #fdf0e9;
116
+ --color-multiqc-200: #fbd9c8;
117
+ --color-multiqc-300: #f8c0a3;
118
+ --color-multiqc-400: #f5a67e;
119
+ --color-multiqc-500: #f39362;
120
+ --color-multiqc-600: #f18046;
121
+ --color-multiqc-700: #da743f;
122
+ --color-multiqc-800: #bc6437;
123
+ --color-multiqc-900: #a0552f;
124
+ --color-multiqc-1000: #6c3a20;
125
+ --color-multiqc: #f18046;
126
+
127
+ /* Brand (purple/grey) colors */
128
+ --color-brand-100: #f3f3f4;
129
+ --color-brand-200: #e8e7e9;
130
+ --color-brand-300: #d0cfd4;
131
+ --color-brand-400: #b9b7be;
132
+ --color-brand-500: #a29fa8;
133
+ --color-brand-600: #8a8792;
134
+ --color-brand-700: #736f7d;
135
+ --color-brand-800: #5c5767;
136
+ --color-brand-900: #453f51;
137
+ --color-brand-1000: #2d273c;
138
+ --color-brand-1100: #160f26;
139
+ --color-brand-1200: #151121;
140
+ --color-brand-1300: #141024;
141
+ --color-brand-1400: #110d1d;
142
+ --color-brand: #160f26;
143
+
144
+ /* Gray Colors */
145
+ --color-gray-100: #f7f7f7;
146
+ --color-gray-200: #eaebeb;
147
+ --color-gray-300: #dddede;
148
+ --color-gray-400: #cfd0d1;
149
+ --color-gray-500: #c4c6c7;
150
+ --color-gray-600: #babcbd;
151
+ --color-gray-700: #a8aaab;
152
+ --color-gray-800: #919393;
153
+ --color-gray-900: #7b7b7b;
154
+ --color-gray-1000: #545555;
155
+
156
+ /* Product (purple) colors */
157
+ --color-product-100: #eae8f1;
158
+ --color-product-200: #cbc6dd;
159
+ --color-product-300: #a9a1c6;
160
+ --color-product-400: #867baf;
161
+ --color-product-500: #6c5e9d;
162
+ --color-product-600: #52428c;
163
+ --color-product-700: #4a3c7f;
164
+ --color-product-800: #40346d;
165
+ --color-product-900: #362c5d;
166
+ --color-product-1000: #251e3f;
167
+
168
+ /* Seqera "blue" Colors */
169
+ --color-blu-100: #e8ebfc;
170
+ --color-blu-200: #c6ccf8;
171
+ --color-blu-300: #a1abf3;
172
+ --color-blu-400: #7b89ee;
173
+ --color-blu-500: #5e6feb;
174
+ --color-blu-600: #4256e7;
175
+ --color-blu-700: #3c4ed1;
176
+ --color-blu-800: #3443b4;
177
+ --color-blu-900: #2c3999;
178
+ --color-blu-1000: #1e2768;
179
+ --color-blu: #4256e7;
72
180
  }
73
181
 
74
182
  /* Dark Mode Support */
@@ -1,8 +1,12 @@
1
-
2
1
  .alert {
3
2
  box-shadow: none;
4
3
  }
5
4
 
5
+ .theme-admonition {
6
+ p {
7
+ line-height: 1.8;
8
+ }
9
+ }
6
10
  .alert--warning {
7
11
  --ifm-alert-background-color: var(--ifm-color-warning-contrast-background);
8
12
  --ifm-alert-background-color-highlight: #ffba0026;
@@ -19,7 +23,7 @@
19
23
  [data-theme='dark'] {
20
24
  .theme-admonition-tip,
21
25
  .theme-admonition-success {
22
- background-color: var(--color-nextflow-900);
26
+ background-color: var(--color-nextflow-1000);
23
27
  border-color: var(--color-nextflow-600);
24
28
  }
25
29
  }
@@ -33,7 +37,7 @@
33
37
  [data-theme='dark'] {
34
38
  .theme-admonition-note,
35
39
  .alert--info {
36
- background-color: var(--color-wave-900);
40
+ background-color: var(--color-wave-1000);
37
41
  border-color: var(--color-wave-600);
38
42
  }
39
43
  }
@@ -44,7 +48,7 @@
44
48
  }
45
49
  [data-theme='dark'] {
46
50
  .theme-admonition-warning {
47
- background-color: var(--color-multiqc-900);
51
+ background-color: var(--color-multiqc-1000);
48
52
  border-color: var(--color-multiqc-600);
49
53
  }
50
54
  }
@@ -56,7 +60,7 @@
56
60
 
57
61
  [data-theme='dark'] {
58
62
  .theme-admonition-danger {
59
- background-color: var(--color-fusion-900);
63
+ background-color: var(--color-fusion-1000);
60
64
  border-color: var(--color-fusion-600);
61
65
  }
62
66
  }
@@ -7,20 +7,23 @@ Platform API style overrides
7
7
 
8
8
  /* this is the class that wraps the main platform-api docs, so we nest overrides within */
9
9
  .plugin-id-platform-api {
10
+ --ifm-color-primary-light: var(--color-nextflow-500);
10
11
 
11
- .badge {
12
- color: var(--ifm-badge-color);
13
- }
14
- .theme-doc-version-badge {
15
- margin-bottom: 1rem;
12
+ .openapi-explorer__response-container,
13
+ .openapi-explorer__request-form,
14
+ .openapi-tabs__code-container:not(.openapi-tabs__code-container-inner) {
15
+ box-shadow: none;
16
16
  }
17
17
  .theme-admonition {
18
18
  margin: 1rem 0;
19
19
  }
20
20
  .theme-doc-version-badge {
21
+ margin-bottom: 1rem;
22
+ color: black;
23
+ }
24
+ .badge {
21
25
  font-weight: 500;
22
26
  }
23
-
24
27
  .openapi__method-endpoint-path {
25
28
  margin-left: 0.5rem;
26
29
  }
@@ -40,7 +43,7 @@ Platform API style overrides
40
43
  }
41
44
  }
42
45
  .openapi-right-panel__container {
43
- @media (min-width: 997px) {
46
+ @media (min-width: 997px) {
44
47
  padding-left: 1rem;
45
48
  }
46
49
  }
@@ -51,7 +54,7 @@ Platform API style overrides
51
54
  }
52
55
 
53
56
  .openapi-explorer__form-item-input {
54
- background: rgba(0,0,0,.05);
57
+ background: rgba(0, 0, 0, 0.05);
55
58
  }
56
59
  .tabs-container {
57
60
  ul {
@@ -88,7 +91,7 @@ Platform API style overrides
88
91
  }
89
92
  }
90
93
  &:hover {
91
- background: var(--color-blu-100);
94
+ background: var(--color-gray-100);
92
95
  border-radius: 4px;
93
96
  }
94
97
  &.post {
@@ -117,3 +120,24 @@ Platform API style overrides
117
120
  }
118
121
  }
119
122
  }
123
+
124
+ [data-theme='dark'].plugin-id-platform-api {
125
+ --openapi-tree-line-color: rgba(255, 255, 255, 0.6);
126
+ --ifm-toc-border-color: rgba(255, 255, 255, 0.6);
127
+ --ifm-color-primary-light: var(--color-nextflow-500);
128
+ .api-method {
129
+ .menu__link {
130
+ &:before {
131
+ color: white;
132
+ }
133
+ }
134
+ &:hover {
135
+ background: rgba(255, 255, 255, 0.1);
136
+ }
137
+ }
138
+ .theme-doc-version-badge {
139
+ color: white;
140
+ background: rgba(255, 255, 255, 0.4);
141
+ border-color: rgba(255, 255, 255, 0.7);
142
+ }
143
+ }
@@ -0,0 +1,6 @@
1
+ /* multiqc specific svg fix */
2
+ svg.excalidraw {
3
+ max-width: 100%;
4
+ height: 100%;
5
+ margin-bottom: 2rem;
6
+ }
@@ -1,3 +1,38 @@
1
1
  .search-page-wrapper {
2
2
  padding: 0 1rem;
3
- }
3
+ }
4
+
5
+ .search-page-wrapper .theme-layout-main {
6
+ max-width: 1080px;
7
+ margin: 0 auto;
8
+
9
+ svg {
10
+ display: none;
11
+ }
12
+
13
+ mark {
14
+ background: var(--color-nextflow-200)!important;
15
+ }
16
+ }
17
+
18
+ .search-page-wrapper .theme-layout-main {
19
+ h2 {
20
+ font-size: 1.8rem;
21
+ line-height: 1.5;
22
+
23
+ @media (min-width: 997px) {
24
+ font-size: 2.25rem;
25
+ }
26
+ }
27
+ }
28
+
29
+ [data-theme='dark'] {
30
+ --docsearch-key-gradient: rgba(255,255,255,.3)!important;
31
+ --docsearch-key-shadow: none!important;
32
+ --docsearch-muted-color: var(--color-nextflow-100) !important;
33
+ --docsearch-highlight-color: var(--color-nextflow-800)!important;
34
+ --docsearch-searchbox-shadow: var(--color-nextflow-600)!important;
35
+ --docsearch-modal-background: var(--ifm-color-gray-900)!important;
36
+ --docsearch-modal-shadow: var(--ifm-color-gray-900)!important;
37
+ --docsearch-footer-background: var(--ifm-color-gray-900)!important;
38
+ }
@@ -19,7 +19,7 @@ h6 {
19
19
  }
20
20
  .navbar__link--active {
21
21
  border-bottom: 4px solid var(--color-nextflow-600);
22
- padding-bottom: 0.1rem;
22
+ padding-bottom: 0.1rem;
23
23
  }
24
24
 
25
25
  .table-of-contents__link--active {
@@ -39,7 +39,7 @@ main prose styles
39
39
  /* H1 */
40
40
  h1 {
41
41
  font-size: 2rem;
42
- line-height: 1.1;
42
+ line-height: 1.5;
43
43
  margin-top: 0;
44
44
  margin-bottom: 1.5rem;
45
45
 
@@ -51,7 +51,7 @@ main prose styles
51
51
  /* H2 */
52
52
  h2 {
53
53
  font-size: 1.8rem;
54
- line-height: 1.2;
54
+ line-height: 1.5;
55
55
  margin-top: 2.5rem;
56
56
  margin-bottom: 1.25rem;
57
57
 
@@ -63,7 +63,7 @@ main prose styles
63
63
  /* H3 */
64
64
  h3 {
65
65
  font-size: 1.4rem;
66
- line-height: 1.3;
66
+ line-height: 1.5;
67
67
  margin-top: 2rem;
68
68
  margin-bottom: 1rem;
69
69
 
@@ -112,12 +112,15 @@ main prose styles
112
112
  p {
113
113
  margin-top: 1.25rem;
114
114
  margin-bottom: 1.25rem;
115
- line-height: 1.6;
115
+ line-height: 1.7;
116
116
  color: var(--ifm-color-content);
117
117
  }
118
+ a:not([class*='tag']) {
119
+ text-decoration: underline;
120
+ }
118
121
 
119
122
  /* Links */
120
- a:not(.btn):not([class*='btn-']):hover {
123
+ a:not(.btn):not([class*='btn-']):not([class*='tag']):hover {
121
124
  text-decoration: underline;
122
125
  &:hover {
123
126
  color: var(--ifm-color-primary);
@@ -184,15 +187,14 @@ main prose styles
184
187
  /* Inline code */
185
188
  code:not(pre code) {
186
189
  color: var(--ifm-code-color);
187
- background-color: var(--ifm-code-background);
188
- padding: 0.2rem 0.4rem;
190
+ background-color: white;
191
+ padding: 0.1rem 0.2rem;
189
192
  border-radius: 0.25rem;
190
193
  font-size: 0.875em;
191
194
  font-family: var(--ifm-font-family-monospace);
192
195
  border: 1px solid var(--color-gray-400);
193
196
  filter: none;
194
197
  box-shadow: none;
195
-
196
198
  &::before,
197
199
  &::after {
198
200
  content: none;
@@ -209,13 +211,15 @@ main prose styles
209
211
  background-color: var(--prism-background-color);
210
212
  box-shadow: none;
211
213
  filter: none;
214
+ max-width: 100%;
215
+ white-space: pre-wrap;
212
216
 
213
217
  code {
214
218
  color: var(--prism-color);
215
219
  background-color: transparent;
216
220
  padding: 0;
217
221
  border: none;
218
- font-size: 0.875rem;
222
+ font-size: 90%;
219
223
  line-height: 1.7;
220
224
  box-shadow: none;
221
225
  filter: none;
@@ -251,8 +255,9 @@ main prose styles
251
255
  margin-top: 2rem;
252
256
  margin-bottom: 2rem;
253
257
  border-collapse: collapse;
254
- font-size: 0.875rem;
258
+ /* font-size: 0.875rem; */
255
259
  line-height: 1.5;
260
+ background: rgba(255, 255, 255, 0.8);
256
261
  }
257
262
 
258
263
  thead {
@@ -339,4 +344,30 @@ main prose styles
339
344
  .admonition code:not(pre code) {
340
345
  color: #ef4444;
341
346
  }
347
+
348
+ thead {
349
+ background: #0000004d;
350
+ }
351
+ table {
352
+ background: rgba(255, 255, 255, 0.2);
353
+ }
354
+
355
+ table tr:nth-child(2n) {
356
+ background: #0003;
357
+ }
358
+ .markdown code:not(pre code) {
359
+ background: #0000004d;
360
+ }
361
+ }
362
+
363
+ .table-of-contents {
364
+ code {
365
+ padding: 0.25rem;
366
+ }
367
+
368
+ a {
369
+ &:hover {
370
+ color: var(--color-primary)!important;
371
+ }
372
+ }
342
373
  }
@@ -8,7 +8,7 @@
8
8
  text-transform: uppercase;
9
9
  display: flex;
10
10
  flex-direction: row;
11
- justify-content: flex-start;
11
+ justify-content: items-center;
12
12
  align-items: center;
13
13
  }
14
14
 
@@ -22,9 +22,10 @@
22
22
  }
23
23
 
24
24
  .admonitionIcon {
25
- display: inline-block;
26
- vertical-align: middle;
27
25
  margin-right: 0.4em;
26
+ display: flex;
27
+ justify-items: center;
28
+ align-items: center
28
29
  }
29
30
 
30
31
  .admonitionIcon svg {
@@ -49,7 +49,7 @@ function CardContainer({
49
49
  return (
50
50
  <Link
51
51
  href={href}
52
- className={clsx('card padding--lg', styles.cardContainer, className)}>
52
+ className={clsx('card p-8 no-underline! hover:no-underline!', styles.cardContainer, className)}>
53
53
  {children}
54
54
  </Link>
55
55
  );
@@ -71,14 +71,14 @@ function CardLayout({
71
71
  return (
72
72
  <CardContainer href={href} className={className}>
73
73
  <Heading
74
- as="h2"
75
- className={clsx('text--truncate', styles.cardTitle)}
74
+ as="h3"
75
+ className={clsx('text-[1.2rem]! text--truncate m-2!', styles.cardTitle)}
76
76
  title={title}>
77
77
  {icon} {title}
78
78
  </Heading>
79
79
  {description && (
80
80
  <p
81
- className={clsx('text--truncate', styles.cardDescription)}
81
+ className={clsx('text--truncate card-link opacity-80 m-0!', styles.cardDescription)}
82
82
  title={description}>
83
83
  {description}
84
84
  </p>
@@ -4,26 +4,29 @@
4
4
  --ifm-link-color: var(--ifm-color-emphasis-800);
5
5
  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
6
6
  --ifm-link-hover-decoration: none;
7
-
8
- box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
9
7
  border: 1px solid var(--ifm-color-emphasis-200);
8
+ border-radius: 0;
10
9
  transition: all var(--ifm-transition-fast) ease;
11
- transition-property: border, box-shadow;
10
+ }
11
+
12
+ .cardContainer p:hover {
13
+ text-decoration: none;
12
14
  }
13
15
 
14
16
  .cardContainer:hover {
15
17
  border-color: var(--ifm-color-primary);
16
- box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
17
18
  }
18
19
 
19
- .cardContainer *:last-child {
20
+ .cardContainer {
20
21
  margin-bottom: 0;
21
22
  }
22
23
 
23
24
  .cardTitle {
24
- font-size: 1.2rem;
25
+ font-size: 1rem;
26
+ font-weight: 500;
27
+ margin: 0!important;
25
28
  }
26
29
 
27
30
  .cardDescription {
28
- font-size: 0.8rem;
31
+ font-size: 0.9rem;
29
32
  }
@@ -21,7 +21,7 @@ function DocCardListItem({
21
21
  item: ComponentProps<typeof DocCard>['item'];
22
22
  }) {
23
23
  return (
24
- <article className={clsx(styles.docCardListItem, 'col col--6')}>
24
+ <article className={clsx(styles.docCardListItem, 'w-full m-0!')}>
25
25
  <DocCard item={item} />
26
26
  </article>
27
27
  );
@@ -34,7 +34,7 @@ export default function DocCardList(props: Props): ReactNode {
34
34
  }
35
35
  const filteredItems = filterDocCardListItems(items);
36
36
  return (
37
- <section className={clsx('row', className)}>
37
+ <section className={clsx('grid grid-cols-1 lg:grid-cols-2 gap-6', className)}>
38
38
  {filteredItems.map((item, index) => (
39
39
  <DocCardListItem key={index} item={item} />
40
40
  ))}
@@ -1,18 +1,34 @@
1
1
  import React, {type ReactNode} from 'react';
2
2
  import type {Props} from '@theme/Icon/AI';
3
3
 
4
- export default function IconAI(props: Props): ReactNode {
4
+ export default function IconAI({
5
+ lightFill = '#160F26',
6
+ darkFill = '#FFFFFF',
7
+ ...props
8
+ }: Props): ReactNode {
5
9
  return (
6
10
  <svg viewBox="0 0 32 34" fill="none" {...props}>
7
11
  <path
8
12
  d="M12.7857 13.406L16 1L19.2143 13.406L31 16.7895L19.2143 21.3008L16 32.5789L12.7857 21.3008L1 16.7895L12.7857 13.406Z"
9
- stroke="currentColor"
13
+ className="stroke-[var(--icon-stroke)] dark:stroke-[var(--icon-stroke-dark)]"
14
+ style={
15
+ {
16
+ '--icon-stroke': lightFill,
17
+ '--icon-stroke-dark': darkFill,
18
+ } as React.CSSProperties
19
+ }
10
20
  strokeLinejoin="round"
11
21
  strokeWidth="1.5"
12
22
  ></path>
13
23
  <path
14
24
  d="M26.2109 5.79327L27.0567 8.89478L27.9026 5.79327L31.0041 4.94741L27.9026 3.81959L27.0567 1.00004L26.2109 3.81959L23.1094 4.94741L26.2109 5.79327Z"
15
- stroke="currentColor"
25
+ className="stroke-[var(--icon-stroke)] dark:stroke-[var(--icon-stroke-dark)]"
26
+ style={
27
+ {
28
+ '--icon-stroke': lightFill,
29
+ '--icon-stroke-dark': darkFill,
30
+ } as React.CSSProperties
31
+ }
16
32
  strokeLinejoin="round"
17
33
  strokeWidth="1.5"
18
34
  ></path>
@@ -25,7 +25,7 @@ export default function NotFoundContent({className}: Props): ReactNode {
25
25
  404: Something has gone wrong with our dataflow. The page you are looking for does not exist.
26
26
  </Translate>
27
27
  </p>
28
- <a className="btn btn-secondary shadow-none border text-black" href="/">Back to docs homepage</a>
28
+ <a className="btn btn-secondary shadow-none border text-black no-underline!" href="/">Back to docs homepage</a>
29
29
 
30
30
  </div>
31
31
  </div>
@@ -10,7 +10,7 @@ export default function PaginatorNavLink(props: Props): ReactNode {
10
10
  return (
11
11
  <Link
12
12
  className={clsx(
13
- 'pagination-nav__link',
13
+ 'pagination-nav__link no-underline!',
14
14
  isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
15
15
  )}
16
16
  to={permalink}>
@@ -1767,7 +1767,10 @@ declare module '@theme/Logo' {
1767
1767
  declare module '@theme/Icon/AI' {
1768
1768
  import type {ComponentProps, ReactNode} from 'react';
1769
1769
 
1770
- export interface Props extends ComponentProps<'svg'> {}
1770
+ export interface Props extends React.SVGProps<SVGSVGElement> {
1771
+ lightFill?: string;
1772
+ darkFill?: string;
1773
+ }
1771
1774
 
1772
1775
  export default function IconAI(props: Props): ReactNode;
1773
1776
  }