viewof style = isDesktop
? collapsedCSS('CSS')`
@import url('${tippyPrefix}/dist/tippy.css');
@import url('${tippyPrefix}/animations/shift-away.css');
.wrapper {
max-width: calc(100vw - 340px)
}
.extract {
right: 0;
width: 300px;
position: absolute;
margin-top: -1.5em;
font-size: .8em
}
.extract p:first-of-type {
margin-top: 0;
}
.extract p:last-of-type {
margin-bottom: 0;
}
.ref {
visibility: hidden;
position: absolute;
}
.always {
display: inline-flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: black;
position: relative;
min-width: 1.5em;
min-height: 1.5em;
border: none;
border-radius: 0.75em;
font-size: 17px;
font-family: "Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype,Times New Roman,"Droid Serif",Times,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
cursor: pointer;
}
.always:hover,
.always[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}
.tippy-content {
padding: 0.75em;
font-size: 15px;
}
.tippy-content .katex {
font-size: 1.4em;
}
.tippy-content p:first-of-type {
margin-top: 0;
}
.tippy-content p:last-of-type {
margin-bottom: 0;
}
.tippy-box.light-border-theme {
font-size: 1em;
border-radius: 0.5em;
box-shadow: 4px 4px 14px -2px rgba(0, 8, 16, .15);
}
.tippy-box[data-theme~='gradient'] {
background: linear-gradient(130deg, #507bf4, #c8008c);
box-shadow: 0 8px 12px #c9a0ff;
}
`
: collapsedCSS('CSS (Mobile)')`
@import url('${tippyPrefix}/dist/tippy.css');
@import url('${tippyPrefix}/themes/light-border.css');
@import url('${tippyPrefix}/animations/shift-away.css');
.tippy-box.light-border-theme {
font-size: 1em;
border-radius: 0.5em;
box-shadow: 4px 4px 14px -2px rgba(0, 8, 16, .15);
}
.tippy-content {
padding: 0.75em;
}
.tippy-content p:first-of-type {
margin-top: 0;
}
.tippy-content p:last-of-type {
margin-bottom: 0;
}
.tippy-content .katex {
font-size: 1.4em;
}
.ref {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ddd;
color: black;
position: relative;
bottom: 1px;
width: 1.5em;
height: 1.5em;
border: none;
border-radius: 0.75em;
font-size: 0.75em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
cursor: pointer;
}
.ref:focus,
.ref[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}
.always {
display: inline-flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: black;
position: relative;
min-width: 1.5em;
min-height: 1.5em;
border: none;
border-radius: 0.75em;
font-size: 17px;
font-family: "Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype,Times New Roman,"Droid Serif",Times,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
cursor: pointer;
}
.always:hover,
.always[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}
.tippy-box[data-theme~='gradient'] {
background: linear-gradient(130deg, #507bf4, #c8008c);
box-shadow: 0 8px 12px #c9a0ff;
font-size: 1.1em;
}
`