oppi.li
1/* styles are based on node_modules/tippy.js/dist/tippy.css */
2
3/* class to hide tippy target elements on page load */
4.tippy-target {
5 display: none !important;
6}
7
8/* show target element once it's been moved by tippy.js */
9.tippy-content .tippy-target {
10 display: unset !important;
11}
12
13[data-tippy-root] {
14 max-width: calc(100vw - 32px);
15}
16
17.tippy-box {
18 position: relative;
19 background-color: var(--color-body);
20 color: var(--color-secondary-dark-6);
21 border: 1px solid var(--color-secondary);
22 border-radius: var(--border-radius);
23 font-size: 1rem;
24}
25
26.tippy-content {
27 position: relative;
28 padding: 1rem; /* if you need different padding, use different data-theme */
29 z-index: 1;
30}
31
32/* bare theme, no styling at all, except box-shadow */
33.tippy-box[data-theme="bare"] {
34 border: none;
35 box-shadow: 0 6px 18px var(--color-shadow);
36}
37
38.tippy-box[data-theme="bare"] .tippy-content {
39 padding: 0;
40 background: transparent;
41}
42
43/* tooltip theme for text tooltips */
44
45.tippy-box[data-theme="tooltip"] {
46 background-color: var(--color-tooltip-bg);
47 color: var(--color-tooltip-text);
48 border: none;
49}
50
51.tippy-box[data-theme="tooltip"] .tippy-content {
52 padding: 0.5rem 1rem;
53}
54
55.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
56.tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
57 fill: var(--color-tooltip-bg);
58}
59
60/* menu theme for .ui.menu */
61
62.tippy-box[data-theme="menu"] {
63 background-color: var(--color-menu);
64 color: var(--color-text);
65 box-shadow: 0 6px 18px var(--color-shadow);
66}
67
68.tippy-box[data-theme="menu"] .tippy-content {
69 padding: 4px 0;
70}
71
72.tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
73 fill: var(--color-menu);
74}
75
76.tippy-box[data-theme="menu"] .item {
77 display: flex;
78 align-items: center;
79 padding: 9px 18px;
80 color: inherit;
81 text-decoration: none;
82 gap: 10px;
83}
84
85.tippy-box[data-theme="menu"] .item:hover {
86 background: var(--color-hover);
87}
88
89.tippy-box[data-theme="menu"] .item:focus {
90 background: var(--color-active);
91}
92
93/* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
94
95.tippy-box[data-theme="box-with-header"] {
96 box-shadow: 0 6px 18px var(--color-shadow);
97}
98
99.tippy-box[data-theme="box-with-header"] .tippy-content {
100 background: var(--color-box-body);
101 border-radius: var(--border-radius);
102 padding: 0;
103}
104
105.tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
106 fill: var(--color-box-body);
107}
108
109.tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
110 fill: var(--color-box-header);
111}
112
113.tippy-box[data-placement^="top"] > .tippy-svg-arrow {
114 bottom: 0;
115}
116
117.tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
118.tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
119 top: 16px;
120 transform: rotate(180deg);
121}
122
123.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
124 top: 0;
125}
126
127.tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
128 bottom: 16px;
129}
130
131.tippy-box[data-placement^="left"] > .tippy-svg-arrow {
132 right: 0;
133}
134
135.tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
136.tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
137 transform: rotate(90deg);
138 top: calc(50% - 3px);
139 left: 11px;
140}
141
142.tippy-box[data-placement^="right"] > .tippy-svg-arrow {
143 left: 0;
144}
145
146.tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
147.tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
148 transform: rotate(-90deg);
149 top: calc(50% - 3px);
150 right: 11px;
151}
152
153.tippy-svg-arrow {
154 width: 16px;
155 height: 16px;
156 text-align: initial;
157}
158
159.tippy-svg-arrow,
160.tippy-svg-arrow > svg {
161 position: absolute;
162}
163
164.tippy-svg-arrow-outer {
165 fill: var(--color-secondary);
166}
167
168.tippy-svg-arrow-inner {
169 fill: var(--color-body);
170}