tippy.js
Version:
Vanilla JS Tooltip Library
975 lines (780 loc) • 34.5 kB
CSS
.tippy-iOS{cursor:pointer }.tippy-notransition{transition:none }.tippy-popper{max-width:350px;-webkit-perspective:700px;perspective:700px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none;line-height:1.4}.tippy-popper[x-placement^=top] .tippy-backdrop{border-radius:40% 40% 0 0}.tippy-popper[x-placement^=top] .tippy-roundarrow{bottom:-8px;-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-popper[x-placement^=top] .tippy-arrow{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 6px;-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-backdrop{-webkit-transform-origin:0 90%;transform-origin:0 90%}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(6) translate(-50%,25%);transform:scale(6) translate(-50%,25%);opacity:1}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(1) translate(-50%,25%);transform:scale(1) translate(-50%,25%);opacity:0}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible]{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible]{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:translateY(0) rotateX(60deg);transform:translateY(0) rotateX(60deg)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible]{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible]{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible]{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(0) scale(.5);transform:translateY(0) scale(.5)}.tippy-popper[x-placement^=bottom] .tippy-backdrop{border-radius:0 0 30% 30%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow{top:-8px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(0);transform:rotate(0)}.tippy-popper[x-placement^=bottom] .tippy-arrow{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 6px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-backdrop{-webkit-transform-origin:0 -90%;transform-origin:0 -90%}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(6) translate(-50%,-125%);transform:scale(6) translate(-50%,-125%);opacity:1}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(1) translate(-50%,-125%);transform:scale(1) translate(-50%,-125%);opacity:0}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible]{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible]{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:translateY(0) rotateX(-60deg);transform:translateY(0) rotateX(-60deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible]{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible]{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible]{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(0) scale(.5);transform:translateY(0) scale(.5)}.tippy-popper[x-placement^=left] .tippy-backdrop{border-radius:50% 0 0 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow{right:-16px;-webkit-transform-origin:33.33333333% 50%;transform-origin:33.33333333% 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-popper[x-placement^=left] .tippy-arrow{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:3px 0;-webkit-transform-origin:0 50%;transform-origin:0 50%}.tippy-popper[x-placement^=left] .tippy-backdrop{-webkit-transform-origin:100% 0;transform-origin:100% 0}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(6) translate(40%,-50%);transform:scale(6) translate(40%,-50%);opacity:1}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(1.5) translate(40%,-50%);transform:scale(1.5) translate(40%,-50%);opacity:0}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible]{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible]{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:translateX(0) rotateY(-60deg);transform:translateX(0) rotateY(-60deg)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible]{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible]{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible]{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(0) scale(.5);transform:translateX(0) scale(.5)}.tippy-popper[x-placement^=right] .tippy-backdrop{border-radius:0 50% 50% 0}.tippy-popper[x-placement^=right] .tippy-roundarrow{left:-16px;-webkit-transform-origin:66.66666666% 50%;transform-origin:66.66666666% 50%}.tippy-popper[x-placement^=right] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-popper[x-placement^=right] .tippy-arrow{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:3px 0;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.tippy-popper[x-placement^=right] .tippy-backdrop{-webkit-transform-origin:-100% 0;transform-origin:-100% 0}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(6) translate(-140%,-50%);transform:scale(6) translate(-140%,-50%);opacity:1}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(1.5) translate(-140%,-50%);transform:scale(1.5) translate(-140%,-50%);opacity:0}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible]{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible]{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:translateX(0) rotateY(60deg);transform:translateX(0) rotateY(60deg)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible]{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible]{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible]{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(0) scale(.5);transform:translateX(0) scale(.5)}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.9rem;padding:.3rem .6rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip[data-size=small]{padding:.2rem .4rem;font-size:.75rem}.tippy-tooltip[data-size=large]{padding:.4rem .8rem;font-size:1rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-animatefill] .tippy-content{transition:-webkit-clip-path cubic-bezier(.46,.1,.52,.98);transition:clip-path cubic-bezier(.46,.1,.52,.98);transition:clip-path cubic-bezier(.46,.1,.52,.98),-webkit-clip-path cubic-bezier(.46,.1,.52,.98)}.tippy-tooltip[data-interactive],.tippy-tooltip[data-interactive] path{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow,.tippy-roundarrow{position:absolute;width:0;height:0}.tippy-roundarrow{width:24px;height:8px;fill:#333;pointer-events:none}.tippy-backdrop{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:26%;left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop:after{content:"";float:left;padding-top:100%}body:not(.tippy-iOS) .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(100% 100% at 50% 50%);clip-path:ellipse(100% 100% at 50% 50%)}body:not(.tippy-iOS) .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(5% 50% at 50% 50%);clip-path:ellipse(5% 50% at 50% 50%)}body:not(.tippy-iOS) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(135% 100% at 0 50%);clip-path:ellipse(135% 100% at 0 50%)}body:not(.tippy-iOS) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(40% 100% at 0 50%);clip-path:ellipse(40% 100% at 0 50%)}body:not(.tippy-iOS) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{-webkit-clip-path:ellipse(135% 100% at 100% 50%);clip-path:ellipse(135% 100% at 100% 50%)}body:not(.tippy-iOS) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{-webkit-clip-path:ellipse(40% 100% at 100% 50%);clip-path:ellipse(40% 100% at 100% 50%)}@media (max-width:360px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-tooltip.light-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.translucent-theme .tippy-arrow{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.translucent-theme .tippy-arrow{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.translucent-theme .tippy-arrow{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.translucent-theme .tippy-arrow{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-tooltip.translucent-theme,.tippy-tooltip.translucent-theme .tippy-backdrop{background-color:rgba(0,0,0,.7)}.tippy-tooltip.translucent-theme .tippy-roundarrow{fill:rgba(0,0,0,.7)}.tippy-tooltip.translucent-theme[data-animatefill]{background-color:transparent}/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
html {
box-sizing: border-box;
font-size: 0.9375em; }
*,
*::before,
*::after {
box-sizing: inherit; }
body {
background: linear-gradient(90deg, #5733ea, #4894ff 70%, #a5bcff);
font-family: 'Nunito Sans', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #324b64;
line-height: 1.7; }
ul {
padding-left: 20px; }
a {
color: #115ed8;
text-decoration: none; }
a:hover {
color: rgb(46, 126, 255);
text-decoration: underline; }
a.is-white {
color: white;
text-decoration: underline;
font-weight: 700; }
a.is-white:hover {
color: cyan; }
.focus-visible {
box-shadow: 0 0 0 4px rgba(115, 165, 255, 0.5) ; }
.container {
max-width: 1170px;
padding: 0 4%;
margin: 0 auto; }
.table-wrapper {
position: relative;
overflow-x: auto;
margin: 0 -5.5%;
-webkit-overflow-scrolling: touch; }
@media (min-width: 768px) {
.table-wrapper {
max-width: 100%;
margin: 0; } }
@media (min-width: 1050px) {
.table-wrapper {
overflow-x: visible; } }
.emoji {
position: relative;
vertical-align: -17%;
width: 40px;
margin-right: 4px; }
.table {
text-align: left;
border-collapse: collapse;
max-width: calc(100% - 1px); }
.table tr:nth-child(even) {
background-color: #f9fafb; }
.table th {
position: -webkit-sticky;
position: sticky;
top: 0;
background: #787f96;
color: white;
padding: 8px 15px;
font-size: 90%;
border: none;
z-index: 10; }
.table tbody {
border: 1px solid #e6e9f5;
border-top: none; }
.table td {
padding: 8px 15px; }
.table td:nth-child(3) {
min-width: 175px; }
.table td:last-child {
min-width: 250px; }
.blockquote {
margin-left: 0;
padding-left: 10px;
border-left: 5px solid #eee;
opacity: 0.7;
font-size: 90%; }
.tippy {
background: rgba(255, 202, 223, .5);
color: #d22489;
outline: 0;
border-bottom: 1px solid #f27da6;
padding: 0 4px;
font-weight: 600;
cursor: help; }
.tippy-tooltip.rounded-theme {
border-radius: 10px; }
.tippy-tooltip.gradient-theme {
font-weight: bold; }
.tippy-tooltip.gradient-theme .tippy-backdrop {
background: radial-gradient(circle at 67% 60%, #95d8ff, #363cff, #9c24ff, red); }
.tippy-tooltip.honeybee-theme {
background-color: yellow;
border: 2px solid orange;
color: #333;
font-weight: bold; }
.tippy-tooltip.secondary-theme {
max-width: 250px; }
@media (min-width: 768px) {
html {
font-size: 1em; } }
.header {
color: white;
text-align: center;
padding: 24px 0; }
.header__logo {
position: relative;
top: -200px;
height: 75px; }
.header__heading-wrapper {
text-align: center; }
.header__heading {
position: relative;
display: inline-block;
font-weight: 300;
font-size: 60px;
margin: 0;
background: -webkit-linear-gradient(0deg, #a5ffd1, #fff7bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.header__version {
position: absolute;
top: 5px;
right: -50px;
font-size: 14px;
color: #016ec1;
-webkit-text-fill-color: #016ec1;
font-weight: bold;
line-height: 1.75;
padding: 0 6px;
background: white;
border-radius: 4px;
box-shadow: 0 8px 16px -2px rgba(0, 32, 128, .25); }
.header__slogan {
font-weight: 300;
font-size: 24px;
margin-bottom: 32px; }
@media (min-width: 768px) {
.header__slogan {
margin-bottom: 48px; } }
.header__items {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
will-change: transform;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: scale-in 1s ease forwards;
animation: scale-in 1s ease forwards; }
.header__item {
margin: 0 16px 24px;
font-size: 20px; }
.header__item:first-child {
background: -webkit-linear-gradient(0deg, #a5ffd1, #fff7bf);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; }
.header__item.has-github-button {
width: 121px;
height: 28px;
margin: 0 auto 24px; }
.header__item.has-github-button a {
color: white; }
.header__item p {
margin: 0; }
.header__button {
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 4px;
padding: 10px 20px;
text-decoration: none;
background: rgba(255, 255, 255, .1);
color: #dbfffe;
transition: all 0.15s; }
.header__button:hover {
background: white;
color: #016ec1;
box-shadow: 0 8px 16px -2px rgba(0, 32, 128, .25);
text-decoration: none; }
.header__button:hover .icon {
stroke: orange; }
.header__icon {
width: 1.25em;
height: 1.25em;
margin-right: 0.5em; }
.header__icon.is-code {
stroke: pink; }
.header__icon.is-power {
width: 1.25em;
height: 1.25em;
stroke: #ffeaaa; }
.header__docs {
background: white;
color: #115ed8;
padding: 8px 16px;
border-radius: 4px;
font-size: 16px; }
@media (min-width: 700px) {
.header {
padding: 48px 0; }
.header__items {
flex-direction: row; }
.header__item.has-github-button {
position: relative;
margin: 0 16px 24px; } }
.main {
margin-top: 24px; }
.main > .container {
max-width: 1100px;
padding: 4% 0;
margin-bottom: 48px; }
.main__body {
background: white; }
@media (min-width: 768px) {
.main > .container {
padding: 36px; } }
@media (min-width: 1050px) {
.main > .container {
border-radius: 10px; } }
.section {
margin: 0 5%;
font-size: 18px;
padding-bottom: 24px; }
@media (min-width: 768px) {
.section {
margin: 0; } }
@media (min-width: 992px) {
.section {
margin: 0 25px; } }
.section:not(:last-child) {
border-bottom: 1px solid #e9ebf5;
margin-bottom: 24px; }
.section__heading {
display: inline-block;
margin-top: 12px;
margin-bottom: 12px;
font-size: 36px;
font-weight: 600;
line-height: 1.2;
color: #9079ff;
background: -webkit-linear-gradient(45deg, #5884ff, #49b3ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
.section__heading-wrapper {
text-align: center; }
.section__icon-wrapper {
display: block;
width: 75px;
text-align: center;
margin: 0 auto; }
.section__icon-wrapper.is-top {
margin: -15% auto 0; }
.section__icon-wrapper > .icon {
width: 100px;
height: 100px; }
.section__icon {
width: 75px;
height: 75px; }
.section__subheading {
font-size: 24px;
font-weight: 600;
margin-bottom: 0; }
.section__subheading a {
color: inherit; }
.section__tag {
border: 1px solid;
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
vertical-align: middle;
text-transform: uppercase;
margin-left: 8px; }
.section__result {
background: #f8f9fd;
box-shadow: 0 0 0 1px #dfe6ff;
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 16px; }
.section__result-text {
margin: 0 0 8px;
color: #7e8fb9;
font-weight: 600;
line-height: 1; }
.section h3 {
font-weight: 700;
font-size: 24px;
margin-bottom: 12px;
margin-top: 36px; }
.section h4 {
margin-bottom: 10px; }
.section p:not(.section__result-text) {
margin-top: 12px; }
.section#demo {
text-align: center;
margin-top: 24px; }
.section#demo p {
max-width: 700px;
margin: 0 auto 24px; }
.section__emoji > .emoji {
width: 1.25em;
height: 1.25em;
vertical-align: text-top;
margin-right: 0.5em; }
@media (min-width: 768px) {
.section__icon-wrapper.is-top {
margin-top: -80px; } }
.feature {
margin-bottom: 48px; }
.feature__heading {
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
margin-top: 12px; }
.feature h3 {
font-weight: 600;
margin-top: 24px;
font-size: 28px; }
.feature__icon {
display: inline-flex;
justify-content: center;
align-items: center;
background: linear-gradient(#ffffff, #f3f8ff);
border-radius: 25%;
border: 1px solid #e8efff;
border-bottom-color: #d8e2f9;
width: 64px;
height: 64px;
margin: 0 auto;
box-shadow: 0 4px 8px -1px rgba(0, 32, 128, .1); }
.feature__icon .emoji {
position: relative;
width: 36px;
height: 36px;
stroke: #5477f5;
margin: 0; }
.feature .btn {
margin: 0 10px;
margin-bottom: 20px; }
.btn {
border: none;
background: linear-gradient(135deg, #73a5ff, #5477f5);
color: white;
padding: 8px 16px;
border-radius: 4px;
box-shadow: 0 4px 8px -1px rgba(0, 32, 128, .2), 0 8px 24px -2px rgba(0, 128, 255, .1);
font-size: 20px;
transition: all 0.2s;
outline: 0;
will-change: opacity; }
.btn:hover, .btn.tippy-active {
opacity: 0.8; }
.btn.focus-visible {
box-shadow: 0 0 0 4px rgba(115, 165, 255, 0.5); }
code,
pre {
font-family: Menlo, Consolas, 'Liberation Mono', Courier, monospace; }
.code-wrapper {
position: relative; }
.code-wrapper::after {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Nunito Sans', sans-serif;
padding: 0 8px;
font-size: 14px;
font-weight: 800;
position: absolute;
top: -10px;
right: -6px;
z-index: 1;
line-height: 2;
border-radius: 4px;
text-transform: uppercase; }
.code-wrapper[data-lang='html']::after {
content: 'html';
background: linear-gradient(135deg, #ff8792, #ff4c9f); }
.code-wrapper[data-lang='shell']::after {
content: 'shell';
background: linear-gradient(135deg, #a1a6c9, #7d80a2); }
.code-wrapper[data-lang='js']::after {
content: 'js';
background: linear-gradient(135deg, #ffd07a, #ff9133); }
.code-wrapper[data-lang='css']::after {
content: 'css';
background: linear-gradient(135deg, #7983ff, #5f9de9); }
code:not([class*='language-']) {
background: #edf1fb;
padding: 4px 8px;
font-size: 0.8em;
color: #4760f0;
font-weight: bold; }
code.prop {
background: none;
border: none;
color: inherit;
font-weight: bold;
font-size: 16px;
padding-left: 0; }
code.prop a {
color: inherit; }
code[class*='language-'],
pre[class*='language-'] {
color: #cee6ff;
background: none;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 2;
font-size: 16px;
-webkit-overflow-scrolling: touch;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none; }
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none; } }
/* Code blocks */
pre[class*='language-'] {
overflow: auto;
padding: 16px 5.5%;
margin-left: -5.5%;
margin-right: -5.5%; }
@media (min-width: 768px) {
pre[class*='language-'] {
border-radius: 4px;
margin-left: 0;
margin-right: 0;
padding: 16px 24px; } }
pre.is-option {
margin: 0;
padding: 0; }
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #1c2640; }
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal; }
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #868ed6; }
.token.selector,
.token.constant {
color: #ffdaa1; }
.token.attr-name {
color: #ffc6a1; }
.token.boolean {
color: #ffa3d5; }
.token.punctuation {
color: #69c9e8; }
.namespace {
opacity: 0.7; }
.token.tag {
color: #ff8dbb; }
.token.property {
color: #58bfff; }
.token.number,
.token.symbol,
.token.deleted {
color: #ff9f57; }
.token.string,
.language-css .token.string,
.token.url,
.token.attr-value,
.token.char,
.token.builtin,
.token.inserted {
color: #4ef2d0; }
.token.operator,
.token.entity,
.style .token.string {
color: #ecd6ba;
text-shadow: 0 1px 3px rgba(236, 214, 186, .5); }
.token.important,
.token.atrule,
.token.keyword {
color: #aca9ff; }
.token.function {
color: #58bfff; }
.token.regex,
.token.variable {
color: #00a8d4; }
.token.bold {
font-weight: bold; }
.token.italic {
font-style: italic; }
.token.entity {
cursor: help; }
.badge {
font-size: 80%;
border: 1px solid #adcaee;
color: #607ca8;
padding: 2px 8px;
border-radius: 4px;
vertical-align: text-top; }