handle tippy-tooltip styles

resources/css/tooltip.css

@@ -1,665 +0,0 @@
-.tippy-touch {
-  cursor: pointer !important
-}
-
-.tippy-notransition {
-  transition: none !important
-}
-
-.tippy-popper {
-  max-width: 800px;
-  -webkit-perspective: 800px;
-  perspective: 800px;
-  z-index: 9999;
-  outline: 0;
-  transition-timing-function: cubic-bezier(.165, .84, .44, 1);
-  pointer-events: none
-}
-
-.tippy-popper.html-template {
-  max-width: 96%;
-  max-width: calc(100% - 20px)
-}
-
-.tippy-popper[x-placement^=top] [x-arrow] {
-  border-top: 7px solid var(--ls-quaternary-background-color);
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
-  bottom: -7px;
-  margin: 0 9px
-}
-
-.tippy-popper[x-placement^=top] [x-arrow].arrow-small {
-  border-top: 5px solid var(--ls-quaternary-background-color);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  bottom: -5px
-}
-
-.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
-  border-top: 10px solid var(--ls-quaternary-background-color);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent;
-  bottom: -10px
-}
-
-.tippy-popper[x-placement^=top] [x-circle] {
-  -webkit-transform-origin: 0 33%;
-  transform-origin: 0 33%
-}
-
-.tippy-popper[x-placement^=top] [x-circle].enter {
-  -webkit-transform: scale(1) translate(-50%, -55%);
-  transform: scale(1) translate(-50%, -55%);
-  opacity: 1
-}
-
-.tippy-popper[x-placement^=top] [x-circle].leave {
-  -webkit-transform: scale(.15) translate(-50%, -50%);
-  transform: scale(.15) translate(-50%, -50%);
-  opacity: 0
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] {
-  background-color: #fff
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] {
-  border-top: 7px solid #fff;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small {
-  border-top: 5px solid #fff;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big {
-  border-top: 10px solid #fff;
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] {
-  background-color: var(--ls-secondary-background-color)
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] {
-  border-top: 7px solid var(--ls-secondary-background-color);
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
-  border-top: 5px solid var(--ls-secondary-background-color);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-top: 10px solid var(--ls-secondary-background-color);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=top] [data-animation=perspective] {
-  -webkit-transform-origin: bottom;
-  transform-origin: bottom
-}
-
-.tippy-popper[x-placement^=top] [data-animation=perspective].enter {
-  opacity: 1;
-  -webkit-transform: translateY(-10px) rotateX(0);
-  transform: translateY(-10px) rotateX(0)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=perspective].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0) rotateX(90deg);
-  transform: translateY(0) rotateX(90deg)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=fade].enter {
-  opacity: 1;
-  -webkit-transform: translateY(-10px);
-  transform: translateY(-10px)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=fade].leave {
-  opacity: 0;
-  -webkit-transform: translateY(-10px);
-  transform: translateY(-10px)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=shift].enter {
-  opacity: 1;
-  -webkit-transform: translateY(-10px);
-  transform: translateY(-10px)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=shift].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0);
-  transform: translateY(0)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=scale].enter {
-  opacity: 1;
-  -webkit-transform: translateY(-10px) scale(1);
-  transform: translateY(-10px) scale(1)
-}
-
-.tippy-popper[x-placement^=top] [data-animation=scale].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0) scale(0);
-  transform: translateY(0) scale(0)
-}
-
-.tippy-popper[x-placement^=bottom] [x-arrow] {
-  border-bottom: 7px solid var(--ls-quaternary-background-color);
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
-  top: -7px;
-  margin: 0 9px
-}
-
-.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small {
-  border-bottom: 5px solid var(--ls-quaternary-background-color);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  top: -5px
-}
-
-.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
-  border-bottom: 10px solid var(--ls-quaternary-background-color);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent;
-  top: -10px
-}
-
-.tippy-popper[x-placement^=bottom] [x-circle] {
-  -webkit-transform-origin: 0 -50%;
-  transform-origin: 0 -50%
-}
-
-.tippy-popper[x-placement^=bottom] [x-circle].enter {
-  -webkit-transform: scale(1) translate(-50%, -45%);
-  transform: scale(1) translate(-50%, -45%);
-  opacity: 1
-}
-
-.tippy-popper[x-placement^=bottom] [x-circle].leave {
-  -webkit-transform: scale(.15) translate(-50%, -5%);
-  transform: scale(.15) translate(-50%, -5%);
-  opacity: 0
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] {
-  background-color: #fff
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] {
-  border-bottom: 7px solid #fff;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small {
-  border-bottom: 5px solid #fff;
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big {
-  border-bottom: 10px solid #fff;
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] {
-  background-color: var(--ls-secondary-background-color)
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] {
-  border-bottom: 7px solid var(--ls-secondary-background-color);
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
-  border-bottom: 5px solid var(--ls-secondary-background-color);
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-bottom: 10px solid var(--ls-secondary-background-color);
-  border-right: 10px solid transparent;
-  border-left: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=perspective] {
-  -webkit-transform-origin: top;
-  transform-origin: top
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter {
-  opacity: 1;
-  -webkit-transform: translateY(10px) rotateX(0);
-  transform: translateY(10px) rotateX(0)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0) rotateX(-90deg);
-  transform: translateY(0) rotateX(-90deg)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=fade].enter {
-  opacity: 1;
-  -webkit-transform: translateY(10px);
-  transform: translateY(10px)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=fade].leave {
-  opacity: 0;
-  -webkit-transform: translateY(10px);
-  transform: translateY(10px)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=shift].enter {
-  opacity: 1;
-  -webkit-transform: translateY(10px);
-  transform: translateY(10px)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=shift].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0);
-  transform: translateY(0)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=scale].enter {
-  opacity: 1;
-  -webkit-transform: translateY(10px) scale(1);
-  transform: translateY(10px) scale(1)
-}
-
-.tippy-popper[x-placement^=bottom] [data-animation=scale].leave {
-  opacity: 0;
-  -webkit-transform: translateY(0) scale(0);
-  transform: translateY(0) scale(0)
-}
-
-.tippy-popper[x-placement^=left] [x-arrow] {
-  border-left: 7px solid var(--ls-quaternary-background-color);
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  right: -7px;
-  margin: 6px 0
-}
-
-.tippy-popper[x-placement^=left] [x-arrow].arrow-small {
-  border-left: 5px solid var(--ls-quaternary-background-color);
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  right: -5px
-}
-
-.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
-  border-left: 10px solid var(--ls-quaternary-background-color);
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  right: -10px
-}
-
-.tippy-popper[x-placement^=left] [x-circle] {
-  -webkit-transform-origin: 50% 0;
-  transform-origin: 50% 0
-}
-
-.tippy-popper[x-placement^=left] [x-circle].enter {
-  -webkit-transform: scale(1) translate(-50%, -50%);
-  transform: scale(1) translate(-50%, -50%);
-  opacity: 1
-}
-
-.tippy-popper[x-placement^=left] [x-circle].leave {
-  -webkit-transform: scale(.15) translate(-50%, -50%);
-  transform: scale(.15) translate(-50%, -50%);
-  opacity: 0
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] {
-  background-color: #fff
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
-  border-left: 7px solid #fff;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
-  border-left: 5px solid #fff;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
-  border-left: 10px solid #fff;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] {
-  background-color: var(--ls-secondary-background-color)
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
-  border-left: 7px solid var(--ls-secondary-background-color);
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
-  border-left: 5px solid var(--ls-secondary-background-color);
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-left: 10px solid var(--ls-secondary-background-color);
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=left] [data-animation=perspective] {
-  -webkit-transform-origin: right;
-  transform-origin: right
-}
-
-.tippy-popper[x-placement^=left] [data-animation=perspective].enter {
-  opacity: 1;
-  -webkit-transform: translateX(-10px) rotateY(0);
-  transform: translateX(-10px) rotateY(0)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=perspective].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0) rotateY(-90deg);
-  transform: translateX(0) rotateY(-90deg)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=fade].enter {
-  opacity: 1;
-  -webkit-transform: translateX(-10px);
-  transform: translateX(-10px)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=fade].leave {
-  opacity: 0;
-  -webkit-transform: translateX(-10px);
-  transform: translateX(-10px)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=shift].enter {
-  opacity: 1;
-  -webkit-transform: translateX(-10px);
-  transform: translateX(-10px)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=shift].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0);
-  transform: translateX(0)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=scale].enter {
-  opacity: 1;
-  -webkit-transform: translateX(-10px) scale(1);
-  transform: translateX(-10px) scale(1)
-}
-
-.tippy-popper[x-placement^=left] [data-animation=scale].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0) scale(0);
-  transform: translateX(0) scale(0)
-}
-
-.tippy-popper[x-placement^=right] [x-arrow] {
-  border-right: 7px solid var(--ls-quaternary-background-color);
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent;
-  left: -7px;
-  margin: 6px 0
-}
-
-.tippy-popper[x-placement^=right] [x-arrow].arrow-small {
-  border-right: 5px solid var(--ls-quaternary-background-color);
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  left: -5px
-}
-
-.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
-  border-right: 10px solid var(--ls-quaternary-background-color);
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
-  left: -10px
-}
-
-.tippy-popper[x-placement^=right] [x-circle] {
-  -webkit-transform-origin: -50% 0;
-  transform-origin: -50% 0
-}
-
-.tippy-popper[x-placement^=right] [x-circle].enter {
-  -webkit-transform: scale(1) translate(-50%, -50%);
-  transform: scale(1) translate(-50%, -50%);
-  opacity: 1
-}
-
-.tippy-popper[x-placement^=right] [x-circle].leave {
-  -webkit-transform: scale(.15) translate(-50%, -50%);
-  transform: scale(.15) translate(-50%, -50%);
-  opacity: 0
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] {
-  background-color: #fff
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
-  border-right: 7px solid #fff;
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
-  border-right: 5px solid #fff;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
-  border-right: 10px solid #fff;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] {
-  background-color: var(--ls-secondary-background-color)
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
-  border-right: 7px solid var(--ls-secondary-background-color);
-  border-top: 7px solid transparent;
-  border-bottom: 7px solid transparent
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
-  border-right: 5px solid var(--ls-secondary-background-color);
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent
-}
-
-.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
-  border-right: 10px solid var(--ls-secondary-background-color);
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent
-}
-
-.tippy-popper[x-placement^=right] [data-animation=perspective] {
-  -webkit-transform-origin: left;
-  transform-origin: left
-}
-
-.tippy-popper[x-placement^=right] [data-animation=perspective].enter {
-  opacity: 1;
-  -webkit-transform: translateX(10px) rotateY(0);
-  transform: translateX(10px) rotateY(0)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=perspective].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0) rotateY(90deg);
-  transform: translateX(0) rotateY(90deg)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=fade].enter {
-  opacity: 1;
-  -webkit-transform: translateX(10px);
-  transform: translateX(10px)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=fade].leave {
-  opacity: 0;
-  -webkit-transform: translateX(10px);
-  transform: translateX(10px)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=shift].enter {
-  opacity: 1;
-  -webkit-transform: translateX(10px);
-  transform: translateX(10px)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=shift].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0);
-  transform: translateX(0)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=scale].enter {
-  opacity: 1;
-  -webkit-transform: translateX(10px) scale(1);
-  transform: translateX(10px) scale(1)
-}
-
-.tippy-popper[x-placement^=right] [data-animation=scale].leave {
-  opacity: 0;
-  -webkit-transform: translateX(0) scale(0);
-  transform: translateX(0) scale(0)
-}
-
-.tippy-popper .tippy-tooltip.transparent-theme {
-  background-color: var(--ls-secondary-background-color)
-}
-
-.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] {
-  background-color: transparent
-}
-
-.tippy-popper .tippy-tooltip.light-theme {
-  color: #26323d;
-  box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
-  background-color: #fff
-}
-
-.tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
-  background-color: transparent
-}
-
-.tippy-tooltip {
-  position: relative;
-  color: var(--ls-primary-text-color);
-  border-radius: 4px;
-  text-align: center;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--ls-quaternary-background-color);
-}
-
-.tippy-tooltip--small {
-  padding: .25rem .5rem;
-  font-size: .8rem
-}
-
-.tippy-tooltip--big {
-  padding: .6rem 1.2rem;
-  font-size: 1.2rem
-}
-
-.tippy-tooltip[data-animatefill] {
-  overflow: hidden;
-  background-color: transparent
-}
-
-.tippy-tooltip[data-interactive] {
-  pointer-events: auto
-}
-
-.tippy-tooltip[data-inertia] {
-  transition-timing-function: cubic-bezier(.53, 2, .36, .85)
-}
-
-.tippy-tooltip [x-arrow] {
-  position: absolute;
-  width: 0;
-  height: 0
-}
-
-.tippy-tooltip [x-circle] {
-  position: absolute;
-  background-color: var(--ls-quaternary-background-color);
-  border-radius: 50%;
-  width: 130%;
-  width: calc(110% + 2rem);
-  left: 50%;
-  top: 50%;
-  z-index: -1;
-  overflow: hidden;
-  transition: all ease
-}
-
-.tippy-tooltip [x-circle]:before {
-  content: "";
-  padding-top: 90%;
-  float: left
-}
-
-@media (max-width: 450px) {
-  .tippy-popper {
-    max-width: 96%;
-    max-width: calc(100% - 20px)
-  }
-}
-
-.tippy-popper .tippy-tooltip.customized-theme * {
-  text-align: left;
-}
-
-.tippy-wrapper {
-  background-color: var(--ls-quaternary-background-color);
-}
-
-.tippy-hover {
-  cursor: pointer;
-}
-
-.tippy-popper .tippy-tooltip.monospace-theme {
-  font-family: 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
-}

src/main/frontend/tippy-tooltip.css

@@ -0,0 +1,87 @@
+.tippy-popper {
+  max-width: 800px;
+}
+
+.tippy-popper[x-placement^=top] [x-arrow],
+.tippy-popper[x-placement^=top] [x-arrow].arrow-small,
+.tippy-popper[x-placement^=top] [x-arrow].arrow-big {
+  border-top-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle],
+.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle],
+.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle],
+.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle],
+.tippy-popper .tippy-tooltip.transparent-theme {
+  background-color: var(--ls-secondary-background-color);
+}
+
+.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow],
+.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
+.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
+  border-top-color: var(--ls-secondary-background-color);
+}
+
+.tippy-popper[x-placement^=bottom] [x-arrow],
+.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small,
+.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
+  border-bottom-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow],
+.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
+.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
+  border-bottom-color: var(--ls-secondary-background-color);
+}
+
+.tippy-popper[x-placement^=left] [x-arrow],
+.tippy-popper[x-placement^=left] [x-arrow].arrow-small,
+.tippy-popper[x-placement^=left] [x-arrow].arrow-big {
+  border-left-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow],
+.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
+.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
+  border-left-color: var(--ls-secondary-background-color);
+}
+
+.tippy-popper[x-placement^=right] [x-arrow],
+.tippy-popper[x-placement^=right] [x-arrow].arrow-small,
+.tippy-popper[x-placement^=right] [x-arrow].arrow-big {
+  border-right-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow],
+.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small,
+.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
+  border-right-color: var(--ls-secondary-background-color);
+}
+
+.tippy-tooltip {
+  color: var(--ls-primary-text-color);
+  font-size: inherit;
+  padding: 0;
+  will-change: auto;
+  background-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-tooltip [x-circle] {
+  will-change: auto;
+}
+
+.tippy-popper .tippy-tooltip.customized-theme * {
+  text-align: left;
+}
+
+.tippy-wrapper {
+  background-color: var(--ls-quaternary-background-color);
+}
+
+.tippy-hover {
+  cursor: pointer;
+}
+
+.tippy-popper .tippy-tooltip.monospace-theme {
+  font-family: 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
+}

tailwind.all.css

@@ -13,11 +13,11 @@
 @import "codemirror/lib/codemirror.css";
 @import "codemirror/theme/solarized.css";
 @import "codemirror/addon/hint/show-hint.css";
+@import "react-tippy/dist/tippy.css";
 @import "resources/css/animation.css";
 @import "resources/css/table.css";
 @import "resources/css/datepicker.css";
 @import "resources/css/highlight.css";
-@import "resources/css/tooltip.css";
 @import "resources/css/common.css";
 @import "resources/css/srs_cards.css";
 @import "resources/css/tabler-extension.css";