@jswork/wsui-tippy
Version:
Theme for tippyjs style.
186 lines (175 loc) • 5.28 kB
CSS
/*!
* name: @jswork/wsui-tippy
* description: Theme for tippyjs style.
* homepage: https://github.com/afeiship/tippy-tippy
* version: 1.0.10
* date: 2021-04-05 22:00:12
* license: MIT
*/
/*tippy-components Start*/
.tippy-button {
-webkit-tap-highlight-color: transparent;
font-family: inherit;
line-height: 1.15;
overflow: visible;
text-transform: none;
background: white;
color: #5183f5;
border: 2px dashed #5183f5;
will-change: opacity;
font-size: 16px;
font-weight: 600;
padding: 10px 16px;
border-radius: 4px;
transition: background 0.2s ease 0s, color 0.1s ease 0s;
margin: 5px; }
.tippy-button.is-small {
border-width: 1px;
font-weight: 400;
font-size: 14px;
padding: 4px 10px;
border-radius: 3px; }
.tippy-button.is-active, .tippy-button:hover {
background: #5183f5;
color: white; }
.tippy-navbar {
display: block;
width: 250px;
color: white;
overflow-y: auto;
box-shadow: rgba(0, 32, 64, 0.25) 4px 0px 32px 0px;
-webkit-backdrop-filter: blur(15px) saturate(180%);
backdrop-filter: blur(15px) saturate(180%);
background: linear-gradient(rgba(121, 148, 198, 0.6), #565791); }
.tippy-navbar li {
line-height: 1.6; }
.tippy-navbar li > a {
display: flex;
padding-left: 25px;
padding: 4px 25px;
font-size: 17px;
border: 1px dashed transparent;
text-decoration: none;
transition: all 0.3s;
color: #fff; }
.tippy-navbar li > a:hover {
border-bottom-color: transparent;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(255, 255, 255, 0.15); }
.tippy-navbar li > a:active {
border: 1px dashed #fff; }
.tippy-navbar li > a.is-active {
font-weight: 600;
background: #fff;
color: #7761d1; }
.tippy-title {
line-height: 1.15;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 0;
word-break: break-word;
display: inline-block;
text-shadow: white -2px 2px 0px, white -4px 3px 0px;
color: #7761d1;
padding: 10px 0px;
transition: color 0.3s ease 0s;
font-size: 64px; }
.tippy-title:before {
content: "";
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: calc(15% + 40px);
margin-left: -25px;
background: linear-gradient(45deg, #fff2df, #99ffec, #faa7ff);
z-index: -1;
transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
border-radius: 3px; }
.tippy-code {
background: rgba(69, 0, 179, 0.1);
color: #4e1cc7;
font-family: Menlo, "Dank Mono", Inconsolata, "Operator Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-weight: bold;
padding: 0.15em 0.4em;
border-radius: 0.25em;
line-height: inherit;
font-size: 90%; }
.tippy-blockquote {
line-height: 1.15;
-webkit-tap-highlight-color: transparent;
color: #333333;
border-radius: 0px 8px 8px 0px;
padding: 14px 20px;
transition: border 0.3s, background 0.3s;
border-left: 8px solid #ffc56d;
background: #fff6e7; }
.tippy-blockquote.is-hoverable:hover {
border-left-color: #ffb13a;
background: #fff2dd; }
.tippy-blockquote.is-primary {
border-left-color: #5183f5;
background: #f5f8fe; }
.tippy-blockquote.is-primary.is-hoverable:hover {
border-left-color: #2161f2;
background: #f0f4fe; }
.tippy-anchor {
color: #5183f5;
text-decoration: none;
font-weight: bold;
border-bottom: 2px solid #e2eafd; }
.tippy-anchor:hover {
background: #f0f4fe;
border-bottom: 2px solid #2161f2; }
.tippy-banner {
position: relative;
z-index: 0;
background-image: radial-gradient(circle at 0% 20%, #a09eff, #4884f0, #b3e0fa);
background-repeat: no-repeat;
background-size: cover;
padding: 25px 0;
text-align: center;
overflow: hidden;
color: white; }
.tippy-banner:before {
content: "";
position: absolute;
top: -50px;
display: block;
background-image: url(https://atomiks.github.io/tippyjs/static/bubbles-4989859a4b6961599ff97c983f6f5947.svg);
background-size: cover;
width: 100%;
height: 100%;
z-index: -1; }
.tippy-banner .is-wave {
margin: -9% 0 -32px; }
.tippy-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.95);
color: #7761d1;
font-weight: bold;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px; }
.tippy-tag {
color: #4e1cc7;
background: #ede6fc;
border: 1px dashed #cbbaf5;
font-family: Menlo, "Dank Mono", Inconsolata, "Operator Mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
padding: 0.35em 0.5em;
border-radius: 0.25em;
line-height: inherit;
font-size: 14px;
cursor: pointer;
transition: background 0.3s; }
.tippy-tag:hover {
background: #cbbaf5; }
.tippy-tag.is-small {
padding: 0.15em 0.5em;
font-size: 12px; }
.tippy-block {
background: #eeeefa;
padding: 25px 16px;
border-radius: 8px; }
/*tippy-components End*/