|
4 | 4 | cursor: default; |
5 | 5 | position: relative; |
6 | 6 | overflow: hidden; |
7 | | - transition: 0.14s ease-in; |
8 | | - |
9 | | - /* Light theme */ |
10 | | - border: 1px solid var(--mantine-color-gray-2); |
11 | | - background: linear-gradient( |
12 | | - 135deg, |
13 | | - var(--mantine-color-white) 0%, |
14 | | - var(--mantine-color-gray-0) 100% |
15 | | - ); |
16 | | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
17 | | -} |
18 | | - |
19 | | -/* Dark theme */ |
20 | | -[data-mantine-color-scheme='dark'] .root { |
21 | | - border: 1px solid var(--mantine-color-dark-4); |
22 | | - background: linear-gradient( |
23 | | - 135deg, |
24 | | - var(--mantine-color-dark-6) 0%, |
25 | | - var(--mantine-color-dark-7) 100% |
26 | | - ); |
27 | | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); |
28 | | -} |
29 | | - |
30 | | -.root::before { |
31 | | - content: ''; |
32 | | - position: absolute; |
33 | | - top: 0; |
34 | | - left: 0; |
35 | | - right: 0; |
36 | | - height: 2px; |
37 | | - background: linear-gradient(90deg, var(--mantine-color-cyan-4), var(--mantine-color-cyan-8)); |
38 | | - opacity: 0; |
39 | | - transition: 0.24s ease-in-out; |
40 | | -} |
41 | | - |
42 | | -.root:hover { |
43 | | - transform: translateY(-2px); |
44 | | - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); |
45 | | - border-color: var(--mantine-color-cyan-5); |
46 | | - transition: 0.24s ease-out; |
47 | | -} |
48 | | - |
49 | | -[data-mantine-color-scheme='dark'] .root:hover { |
50 | | - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); |
51 | | - border-color: var(--mantine-color-cyan-5); |
52 | | -} |
53 | | - |
54 | | -.root:hover::before { |
55 | | - opacity: 1; |
56 | 7 | } |
57 | 8 |
|
58 | 9 | .icon { |
|
65 | 16 | overflow: hidden; |
66 | 17 | min-width: 56px; |
67 | 18 | min-height: 56px; |
68 | | - backdrop-filter: blur(8px); |
69 | 19 | } |
70 | 20 |
|
71 | 21 | .textEmphasis { |
|
0 commit comments