diff --git a/src/App.scss b/src/App.scss index abe1c9d..4f271b7 100644 --- a/src/App.scss +++ b/src/App.scss @@ -223,3 +223,78 @@ $number-of-channels: 3; .react-contexify__item__content svg { margin: 4px 0.6em 0 0; } + +// Because react tooltip and empty show plans get very broken. +.__react_component_tooltip { + color: #fff; + background: #222; + border: 1px solid transparent; + + &.place-top { + margin-top: -10px; + } + &.place-top::before { + border-top: 8px solid transparent; + } + &.place-top::after { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + bottom: -6px; + left: 50%; + margin-left: -8px; + border-top-color: #222; + border-top-style: solid; + border-top-width: 6px; + } + + &.place-bottom { + margin-top: 10px; + } + &.place-bottom::before { + border-bottom: 8px solid transparent; + } + &.place-bottom::after { + border-left: 8px solid transparent; + border-right: 8px solid transparent; + top: -6px; + left: 50%; + margin-left: -8px; + border-bottom-color: #222; + border-bottom-style: solid; + border-bottom-width: 6px; + } + + &.place-left { + margin-left: -10px; + } + &.place-left::before { + border-left: 8px solid transparent; + } + &.place-left::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + right: -6px; + top: 50%; + margin-top: -4px; + border-left-color: #222; + border-left-style: solid; + border-left-width: 6px; + } + + &.place-right { + margin-left: 10px; + } + &.place-right::before { + border-right: 8px solid transparent; + } + &.place-right::after { + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + left: -6px; + top: 50%; + margin-top: -4px; + border-right-color: #222; + border-right-style: solid; + border-right-width: 6px; + } +}