atproto blogging
nonbinary.computer
1/* Hover Card Styles */
2.hover-card {
3 position: relative;
4 display: inline-block;
5}
6
7.hover-card-trigger {
8 display: inline-block;
9}
10
11.hover-card-content {
12 position: absolute;
13 z-index: 1000;
14 min-width: 200px;
15 padding: 5px;
16 border: 1px solid var(--light, var(--primary-color-6))
17 var(--dark, var(--primary-color-7));
18 border-radius: 0.5rem;
19 animation: hover-card-fade-in 0.1s ease-out;
20 background: var(--light, var(--primary-color))
21 var(--dark, var(--primary-color-5));
22
23 /* Semi transparent shadow effect in light mode */
24 box-shadow: var(--light, 0 2px 10px #0000001a) var(--dark, none);
25}
26
27/* Positioning based on side */
28.hover-card-content[data-side="top"] {
29 position: absolute;
30 bottom: 100%;
31 left: 50%;
32 margin-bottom: 10px;
33 transform: translateX(-50%);
34}
35
36.hover-card-content[data-side="right"] {
37 position: absolute;
38 top: 50%;
39 left: 100%;
40 margin-left: 10px;
41 transform: translateY(-50%);
42}
43
44.hover-card-content[data-side="bottom"] {
45 position: absolute;
46 top: 100%;
47 left: 50%;
48 margin-top: 10px;
49 transform: translateX(-50%);
50}
51
52.hover-card-content[data-side="left"] {
53 position: absolute;
54 top: 50%;
55 right: 100%;
56 margin-right: 10px;
57 transform: translateY(-50%);
58}
59
60/* Alignment styles for top and bottom */
61.hover-card-content[data-side="top"][data-align="start"],
62.hover-card-content[data-side="bottom"][data-align="start"] {
63 left: 0;
64 transform: none;
65}
66
67.hover-card-content[data-side="top"][data-align="center"],
68.hover-card-content[data-side="bottom"][data-align="center"] {
69 left: 50%;
70 transform: translateX(-50%);
71}
72
73.hover-card-content[data-side="top"][data-align="end"],
74.hover-card-content[data-side="bottom"][data-align="end"] {
75 right: 0;
76 left: auto;
77 transform: none;
78}
79
80/* Alignment styles for left and right */
81.hover-card-content[data-side="left"][data-align="start"],
82.hover-card-content[data-side="right"][data-align="start"] {
83 top: 0;
84 transform: none;
85}
86
87.hover-card-content[data-side="left"][data-align="center"],
88.hover-card-content[data-side="right"][data-align="center"] {
89 top: 50%;
90 transform: translateY(-50%);
91}
92
93.hover-card-content[data-side="left"][data-align="end"],
94.hover-card-content[data-side="right"][data-align="end"] {
95 top: auto;
96 bottom: 0;
97 transform: none;
98}
99
100/* Animation */
101@keyframes hover-card-fade-in {
102 from {
103 opacity: 0;
104 }
105
106 to {
107 opacity: 1;
108 }
109}
110
111/* State styles */
112.hover-card[data-disabled="true"] .hover-card-trigger {
113 color: var(--secondary-color-5);
114}
115
116.hover-card-content[data-state="closed"] {
117 display: none;
118}