balm-ui/components/tooltip/tooltip.css

A modular and customizable UI library based on Material Design and Vue 3

.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top,.mdc-tooltip__surface{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-tooltip__surface{background-color:rgba(0,0,0,.6);color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);overflow-wrap:anywhere;word-break:break-all;word-break:var(--mdc-tooltip-word-break,normal)}.mdc-tooltip{z-index:9}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s cubic-bezier(0,0,.2,1) 0s,transform .15s cubic-bezier(0,0,.2,1) 0s}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms cubic-bezier(.4,0,1,1) 0s}.mdc-tooltip__title{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))}.mdc-tooltip__content{color:rgba(0,0,0,.6)}.mdc-tooltip__content-link{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-tooltip{display:none;position:fixed}.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-bottom,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-top,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__surface{background-color:#fff}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--hide,.mdc-tooltip--showing,.mdc-tooltip--shown{display:inline-flex}.mdc-tooltip--hide.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--shown.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;box-sizing:border-box;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);line-height:16px;max-height:40vh;max-width:200px;min-height:24px;min-width:40px;overflow:hidden;padding:4px 8px;text-align:center;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-tooltip__surface:before{border:1px solid transparent;border-radius:inherit;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media screen and (forced-colors:active){.mdc-tooltip__surface:before{border-color:CanvasText}}.mdc-tooltip--rich .mdc-tooltip__surface{align-items:flex-start;border-radius:4px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;line-height:20px;max-width:320px;min-height:24px;min-width:40px;position:relative}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-elevation-overlay{height:100%;left:0;top:0;width:100%}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl],[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{display:block;line-height:20px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);margin:0 8px;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-tooltip__surface .mdc-tooltip__title:before{content:"";display:inline-block;height:24px;vertical-align:0;width:0}.mdc-tooltip__surface .mdc-tooltip__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);margin:8px;max-width:184px;text-align:left;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl],[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content{text-align:right}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-tooltip__content{align-self:stretch;max-width:304px}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip--rich-actions,.mdc-tooltip__content,.mdc-tooltip__title{z-index:1}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{opacity:1;transform:scale(1)}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top{height:24px;position:absolute;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208);width:24px}.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay,.mdc-tooltip__caret-surface-top .mdc-elevation-overlay{height:100%;left:0;top:0;width:100%}.mdc-tooltip__caret-surface-bottom{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);outline:1px solid transparent;z-index:-1}@media screen and (forced-colors:active){.mdc-tooltip__caret-surface-bottom{outline-color:CanvasText}}