UiAlignment.set(_tooltip, element, {
horizontal: 'center',
+ verticalOffset: 4,
pointer: true,
pointerClassNames: ['inverse'],
vertical: 'top'
.boxMenuDepth1 {
background-color: $wcfHeaderMenuDropdownBackground;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ border-radius: 0 0 3px 3px;
padding: 5px 0;
position: absolute;
visibility: hidden;
.badge,
a.badge {
background-color: $wcfContentText;
- border-radius: 3px;
+ border-radius: 2px;
color: $wcfContentBackground;
display: inline-block;
padding: 2px 6px;
.button,
a.button { // a.button is required to override link formatting, such as drop-down buttons
background-color: $wcfButtonBackground;
- border-radius: 0;
+ border-radius: 2px;
border-width: 0;
color: $wcfButtonText;
cursor: pointer;
}
&:first-child .button {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
}
&:last-child .button {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
}
.button {
> li {
animation: wcfPageActionOut .3s;
animation-fill-mode: forwards;
+ display: flex;
// required to animate 'max-width' properly when removing items
max-width: 400px;
}
> a {
- background-color: rgba(0, 0, 0, .6);
+ background-color: rgba(0, 0, 0, .7);
+ border-radius: 2px;
color: rgba(224, 224, 224, 1);
padding: 5px 10px;
> .icon {
- color: rgba(224, 224, 224, 1);
+ color: inherit;
}
}
&.dropdownOpen > a {
background-color: rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 1);
-
- > .icon {
- color: rgba(255, 255, 255, 1);
- }
}
}
}
.balloonTooltip {
background-color: $wcfTooltipBackground;
+ border-radius: 2px;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
color: $wcfTooltipText;
max-width: 300px;
padding: 5px 10px;
@include wcfFontSmall;
> .elementPointer {
- border-color: $wcfTooltipBackground transparent;
- border-style: solid;
- border-width: 0 5px 5px;
-
- &.flipVertical {
- border-width: 5px 5px 0;
- }
+ display: none;
}
- @include boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-
&.active {
visibility: visible;
> .userProfileButtonMenu {
background-color: $wcfHeaderMenuDropdownBackground;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ border-radius: 0 0 3px 3px;
padding: 5px 0;
position: absolute;
right: 0;