|
3 | 3 | {% block stylesheets %} |
4 | 4 | {{ parent() }} |
5 | 5 | <style> |
| 6 | + :root { |
| 7 | + --workflow-dialog-background: var(--gray-200); |
| 8 | + } |
| 9 | + .theme-dark { |
| 10 | + --workflow-dialog-background: var(--gray-900); |
| 11 | + } |
| 12 | +
|
6 | 13 | dialog { |
| 14 | + background: var(--workflow-dialog-background); |
7 | 15 | border: none; |
8 | 16 | border-radius: 6px; |
9 | 17 | box-shadow: var(--settings-modal-shadow); |
|
32 | 40 | } |
33 | 41 |
|
34 | 42 | dialog h2 { |
35 | | - margin-top: 0.2em |
| 43 | + box-shadow: none !important; |
| 44 | + color: var(--page-color); |
| 45 | + font-size: 18px; |
| 46 | + margin: 0 0 .5em; |
36 | 47 | } |
37 | 48 |
|
38 | 49 | dialog i.cancel { |
|
42 | 53 | } |
43 | 54 |
|
44 | 55 | dialog table { |
45 | | - border: 1px solid #ccc; |
| 56 | + background: var(--page-background); |
46 | 57 | border-collapse: collapse; |
| 58 | + border-radius: 4px; |
| 59 | + box-shadow: inset 0 0 0 1px var(--table-border-color); |
| 60 | + color: var(--page-color); |
47 | 61 | margin: 0 0 1em 0; |
48 | 62 | margin-bottom: 1em; |
49 | 63 | padding: 0; |
50 | | - table-layout: fixed; |
51 | 64 | } |
52 | 65 |
|
53 | 66 | dialog table tr { |
54 | | - background-color: #f8f8f8; |
55 | | - border: 1px solid #ddd; |
| 67 | + border: 1px solid var(--table-border-color); |
56 | 68 | padding: .35em; |
57 | 69 | } |
58 | 70 |
|
59 | 71 | dialog table th, |
60 | 72 | dialog table td { |
| 73 | + border: 1px solid var(--table-border-color); |
61 | 74 | padding: .625em; |
62 | | - text-align: center; |
| 75 | + text-align: left; |
63 | 76 | } |
64 | 77 |
|
65 | | - dialog table th { |
| 78 | + dialog table thead th { |
| 79 | + background: var(--table-header); |
| 80 | + border-top-left-radius: 4px; |
| 81 | + border-top-right-radius: 4px; |
66 | 82 | font-size: .85em; |
67 | | - letter-spacing: .1em; |
68 | | - text-transform: uppercase; |
69 | 83 | } |
70 | 84 |
|
71 | 85 | dialog menu { |
72 | | - padding: 0; |
73 | | - margin: 0; |
74 | | - display: flex; |
75 | | - align-items: center; |
76 | | - flex-direction: row; |
77 | | - vertical-align: middle; |
78 | | - justify-content: center; |
79 | | - } |
80 | | -
|
81 | | - dialog menu small { |
82 | | - margin-right: auto; |
83 | | - } |
84 | | - dialog menu small i { |
85 | | - margin-right: 3px; |
| 86 | + display: none; |
86 | 87 | } |
87 | 88 |
|
88 | 89 | @keyframes scale { |
|
133 | 134 | {% else %} |
134 | 135 | <script type="module"> |
135 | 136 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; |
| 137 | + const isDarkMode = document.querySelector('body').classList.contains('theme-dark'); |
136 | 138 | mermaid.initialize({ |
137 | 139 | flowchart: { useMaxWidth: false }, |
138 | 140 | securityLevel: 'loose', |
| 141 | + 'theme': 'base', |
| 142 | + 'themeVariables': { |
| 143 | + darkMode: isDarkMode, |
| 144 | + 'fontFamily': 'var(--font-family-system)', |
| 145 | + 'fontSize': 'var(--font-size-body)', |
| 146 | + // the properties below don't support CSS variables |
| 147 | + 'primaryColor': isDarkMode ? 'lightsteelblue' : 'aliceblue', |
| 148 | + 'primaryTextColor': isDarkMode ? '#000' : '#000', |
| 149 | + 'primaryBorderColor': isDarkMode ? 'steelblue' : 'lightsteelblue', |
| 150 | + 'lineColor': isDarkMode ? '#939393' : '#d4d4d4', |
| 151 | + 'secondaryColor': isDarkMode ? 'lightyellow' : 'lightyellow', |
| 152 | + 'tertiaryColor': isDarkMode ? 'lightSalmon' : 'lightSalmon', |
| 153 | + } |
139 | 154 | }); |
140 | 155 |
|
141 | 156 | {% for name, data in collector.workflows %} |
|
0 commit comments