UNPKG

tippy.js

Version:
975 lines (780 loc) 34.5 kB
.tippy-iOS{cursor:pointer!important}.tippy-notransition{transition:none!important}.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) !important; } .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; }