1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .dash-segment-profile .segment-content:nth-child(2) { position:fixed; top:70px; z-index:6000; height:96px; width:300px; margin:0; left:-270px; transition:left .6s; } #plurk-dashboard #dash-additional-info { padding:10px; background:inherit; border-radius:10px; position:absolute; width:300px; left:0; top:106px; } #full_name { position:fixed; top:calc(70px + 5px); z-index:6001; left:calc(25px - 290px); transition:left .6s; } #plurk-dashboard #dash-profile .profile-info { position:fixed; bottom:calc(100vh - 70px - 96px + 5px); z-index:6001; left:calc(25px - 290px); transition:left .6s; } #plurk-dashboard #dash-profile .profile-icons { position:fixed; bottom:calc(100vh - 70px - 96px + 5px); z-index:6001; right:calc(100vw + 290px - 310px - 20px); transition:right .6s; } .dash-segment-profile:hover .segment-content:nth-child(2) { left:20px; } .dash-segment-profile:hover #full_name { left:25px; } #plurk-dashboard .dash-segment-profile:hover #dash-profile .profile-info { left:25px; } #plurk-dashboard .dash-segment-profile:hover #dash-profile .profile-icons { right:calc(100vw - 310px - 20px); } |
Direct link: https://paste.plurk.com/show/3A29rQDJbKed3jLH5uTL