+++ /dev/null
-.popover {
- background-color: rgba(0, 0, 0, .4);
- border: 3px solid transparent;
- border-radius: 3px;
- opacity: 0;
- position: absolute;
- top: 0;
- vertical-align: middle;
- visibility: hidden;
- width: 400px !important;
- z-index: 500;
-
- .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
-
- transition: visibility 0s linear .3s, opacity .3s linear;
-
- &.active {
- opacity: 1;
- visibility: visible;
-
- transition-delay: 0s;
- }
-
- &.disableAnimation {
- transition: none !important;
-
- > .popoverContent {
- transition: none !important;
- }
-
- > .elementPointer > span {
- transition: none !important;
- }
- }
-
- > .popoverContent {
- background-color: @wcfContainerBackgroundColor;
- border-radius: 3px;
- box-sizing: border-box;
- color: @wcfColor;
- max-height: 300px + (@wcfGapSmall + @wcfGapSmall);
- min-height: 16px + (@wcfGapSmall + @wcfGapSmall);
- opacity: 1;
- overflow: hidden;
- padding: @wcfGapSmall @wcfGapMedium;
-
- transition: opacity .3s linear;
-
- &:not(.loading) {
- ~ .fa-spinner {
- display: none;
- }
-
- ~ .elementPointer {
- > span {
- border-color: @wcfContainerBackgroundColor transparent;
- border-style: solid;
- border-width: 0 5px 5px;
- left: -5px;
- opacity: 1;
- position: absolute;
- top: 3px;
-
- transition: opacity .3s linear;
- }
-
- &.flipVertical > span {
- border-width: 5px 5px 0;
- bottom: 3px;
- top: auto;
- }
- }
- }
-
- &.loading {
- opacity: 0;
- transition: height .3s linear, opacity 0s;
-
- ~ .elementPointer > span {
- opacity: 0;
-
- transition: opacity 0s;
- }
- }
- }
-
- > .elementPointer {
- border-color: rgba(0, 0, 0, .4) transparent;
- border-style: solid;
- border-width: 0 6px 6px;
- top: -2px;
-
- &.flipVertical {
- border-width: 6px 6px 0;
- bottom: -2px;
- top: auto;
- }
- }
-
- > .fa-spinner {
- color: rgba(255, 255, 255, 1);
- left: 50%;
- margin-left: -14px;
- margin-top: -14px;
- position: absolute;
- top: 50%;
-
- .textShadow(black);
- }
-}