/** * Friends bar style sheet * * @author Pierre HUBERT */ /** * For computers / tablets (any size) */ @media screen and (min-width: 513px) { #friendsList { position: fixed; right: 0px; border-left: 1px black solid; z-index: 999; top: 0px; height: 100%; padding-top: 50px; } #friendsList:hover { z-index: 1001; } } /** * For big screens */ @media screen and (min-width: 1200px) { #friendsList { width: 230px !important; transition: right 1s; right: -175px; background-color: #fff3ff80; display: block !important; } #friendsList:hover { background-color: #ffffff; right: 0px; } /** * Hide friend button toggle */ .friendToggleButton { display: none !important; } } /** * For small screens / tablets */ @media screen and (max-width: 1200px) and (min-width: 513px) { #friendsList { right: 0px; background-color: #ffffff; } } /** * Common to small screen / tablets / smartphones */ @media screen and (max-width: 1200px) { #friendsList { display: none; } #friendsList.visible-bar { display: block; z-index: 1001; } } /** * Very small computers / tablets / smartphones */ @media screen and (max-width: 513px) { #friendsList { background-color: #ffffff; padding-top: 50px; position: fixed; height: 100%; width: 100% !important; top: 0px; left: 0px; } } #friendsList ul { padding-left: 0px; } #friendsList li { list-style: none; } #friendsList li:hover { background: #f4f4f4; text-decoration: none; } #friendsList .account-image { margin: auto 10px auto auto; max-width: 40px; height: 40px; border-radius: 50%; visibility: visible } #friendsList h4 { padding: 0; margin: 0 0 0 45px; color: #444444; font-size: 15px; position: relative; } #friendsList a { border-bottom: 1px solid #f4f4f4; display: block; white-space: nowrap; padding: 5px 5px 5px 5px; }