diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 09b8cbb7..fd827806 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -176,7 +176,7 @@ "avatar " "stats "; - padding: 0.5em; + /*padding: 0.5em;*/ border: 2px solid #222; border-left-width: 0; } @@ -212,7 +212,8 @@ .construct-list .skills button { flex: 1; - border-width: 0px; + /*border: 1px solid #222;*/ + border: none; } .construct-list .specs { @@ -333,19 +334,45 @@ margin-bottom: 0.5em; } -button.equipping { - animation: equip-skill 1s infinite ease-in-out alternate; +.equipping { + position: relative; } -@keyframes equip-skill { - 0% { - background-color: black; - box-shadow: inset 0 0 0 0 whitesmoke; +.equipping::before { + content: ''; + position: absolute; + top: 2px; + left: 50%; + width: 100%; + height: 2px; + transform-origin: center; + background-color: whitesmoke; + animation: equipping-skill 1s infinite linear alternate; + opacity: 0; +} + +.equipping::after, .equip-spec::after { + content: ''; + position: absolute; + bottom: 2px; + left: 50%; + width: 100%; + height: 2px; + transform-origin: center; + background-color: whitesmoke; + animation: equipping-skill 1s infinite linear alternate; + opacity: 0; + animation-delay: 0.75s +} + +@keyframes equipping-skill { + from { + transform: translate(-50%, 0) scaleX(0); } - 100% { - background-color: #181818; - box-shadow: inset 0.5em 0 0 0 whitesmoke; + to { + transform: translate(-50%, 0) scaleX(0.75); + opacity: 1; } } @@ -355,22 +382,10 @@ button.equipping { } .equip-spec { - animation: equip-spec 1s infinite ease-in-out alternate; + position: relative; + stroke: #333; } -@keyframes equip-spec { - 0% { - color: #333; - stroke: #333; - } - - 100% { - color: #7a7a7a; - stroke: #7a7a7a; - } -} - - .equip .specs figcaption { font-size: 75%; } diff --git a/client/src/components/instance.equip.jsx b/client/src/components/instance.equip.jsx index 6755c1c9..1ecc1866 100644 --- a/client/src/components/instance.equip.jsx +++ b/client/src/components/instance.equip.jsx @@ -106,7 +106,7 @@ function Equipment(props) { return (
skillClick(e, i)} onMouseOver={e => hoverInfo(e, item)} > {shapes[item]()} -
{item}
+
{item ? item : '-'}
); }