diff options
Diffstat (limited to 'subprojects/docs/src/components/UseCases/index.module.css')
-rw-r--r-- | subprojects/docs/src/components/UseCases/index.module.css | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/subprojects/docs/src/components/UseCases/index.module.css b/subprojects/docs/src/components/UseCases/index.module.css new file mode 100644 index 00000000..c8ffc0af --- /dev/null +++ b/subprojects/docs/src/components/UseCases/index.module.css | |||
@@ -0,0 +1,104 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2024 The Refinery Authors | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | :global(.uchighlight) { | ||
8 | fill: var(--refinery-highlight); | ||
9 | } | ||
10 | |||
11 | :global(.ucdraw) { | ||
12 | fill: #303846; | ||
13 | } | ||
14 | |||
15 | :global(.ucstroke) { | ||
16 | stroke: #303846; | ||
17 | } | ||
18 | |||
19 | [data-theme='dark'] :global(.ucdraw) { | ||
20 | fill: var(--ifm-color-emphasis-700); | ||
21 | } | ||
22 | |||
23 | [data-theme='dark'] :global(.ucstroke) { | ||
24 | stroke: var(--ifm-color-emphasis-700); | ||
25 | } | ||
26 | |||
27 | .use-case { | ||
28 | position: relative; | ||
29 | display: flex; | ||
30 | overflow: hidden; | ||
31 | flex-direction: column-reverse; | ||
32 | align-content: justify; | ||
33 | width: 100%; | ||
34 | background: var(--ifm-card-background-color); | ||
35 | box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); | ||
36 | border: 1px solid var(--ifm-color-emphasis-200); | ||
37 | border-radius: var(--ifm-card-border-radius); | ||
38 | margin-bottom: 2rem; | ||
39 | transition: all var(--ifm-transition-fast) ease; | ||
40 | transition-property: border, box-shadow; | ||
41 | --ifm-link-color: var(--ifm-color-emphasis-800); | ||
42 | --ifm-link-hover-color: var(--ifm-color-emphasis-700); | ||
43 | } | ||
44 | |||
45 | .use-case:hover, | ||
46 | .use-case:focus-within { | ||
47 | border-color: var(--ifm-color-primary); | ||
48 | box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%); | ||
49 | } | ||
50 | |||
51 | .use-case__content { | ||
52 | display: flex; | ||
53 | overflow: hidden; | ||
54 | flex-direction: column; | ||
55 | align-items: center; | ||
56 | padding: 1rem; | ||
57 | } | ||
58 | |||
59 | .use-case__content svg { | ||
60 | width: 100%; | ||
61 | max-width: 600px; | ||
62 | height: auto; | ||
63 | transform: scale(1); | ||
64 | transition: transform var(--ifm-transition-fast) ease; | ||
65 | } | ||
66 | |||
67 | .use-case:hover svg, | ||
68 | .use-case:focus-within svg { | ||
69 | transform: scale(1.414); | ||
70 | } | ||
71 | |||
72 | .use-case__title { | ||
73 | margin: 0; | ||
74 | padding: 1rem; | ||
75 | background: var(--ifm-background-surface-color); | ||
76 | font-weight: 400; | ||
77 | } | ||
78 | |||
79 | .use-case__title b, | ||
80 | .use-case__title span { | ||
81 | display: inline-block; | ||
82 | } | ||
83 | |||
84 | [data-theme='dark'] .use-case__title { | ||
85 | background: var(--ifm-color-emphasis-200); | ||
86 | } | ||
87 | |||
88 | .use-case__link:hover > * { | ||
89 | text-decoration: underline; | ||
90 | } | ||
91 | |||
92 | .use-case__link::before { | ||
93 | content: ' '; | ||
94 | position: absolute; | ||
95 | top: 0; | ||
96 | left: 0; | ||
97 | z-index: 99; | ||
98 | width: 100%; | ||
99 | height: 100%; | ||
100 | } | ||
101 | |||
102 | .row--bottom { | ||
103 | margin-bottom: -2rem; | ||
104 | } | ||