changed transition of .action-menu and .damage-monitor elements from sliding to fading

This commit is contained in:
Tobias 2023-08-29 21:13:42 +02:00
parent 5977740c43
commit 5158ce2486

View File

@ -1,10 +1,10 @@
$fg: deeppink; $fg: deeppink; // #ff1493
$fg-bright: lightpink; $fg-bright: lightpink; // #ffb6c1
$fg-dark: #b3005f; $fg-dark: #b3005f;
$bg: cyan; $bg: cyan; // #00ffff
$bg-bright: lightcyan; $bg-bright: lightcyan; // #e0ffff
$bg-dark: darkcyan; $bg-dark: darkcyan; // #008b8b
@font-face { @font-face {
font-family: "Electrolize"; font-family: "Electrolize";
@ -260,7 +260,10 @@ header.navbar {
} }
.damage-dropdown, .damage-dropdown,
.actions-dropdown { display: inline-block; } .actions-dropdown {
display: inline-block;
position: relative;
}
.damage-monitor, .damage-monitor,
.actions-menu { .actions-menu {
@ -272,16 +275,28 @@ header.navbar {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
position: absolute; position: absolute;
top: calc(100% - 2px); // top: calc(100% - 2px);
transition: transform .25s ease-in-out; // transition: transform .25s ease-in-out;
z-index: 200; z-index: 200;
right: 50%;
transform: translateX(50%);
opacity: 0%;
transition: opacity .2s ease-in-out, visibility .2s;
visibility: hidden;
} }
.damage-monitor { left: calc(100vw - 1em); } //.damage-monitor { left: calc(100vw - 1em); }
.actions-menu { left: calc(100vw + 3.5em); } //.actions-menu { left: calc(100vw + 3.5em); }
.seen { transform: translateX(-100vw); } //.seen { transform: translateX(-100vw); }
.seen {
visibility: visible;
opacity: 100%;
}
.damage-monitor { .damage-monitor {
button { button {