diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss index 7c2402ba..45238d99 100644 --- a/src/styles/components/_buddylist.scss +++ b/src/styles/components/_buddylist.scss @@ -20,41 +20,37 @@ */ #buddylist { + bottom: 0; position: absolute; - top: 0; right: 0; - bottom: 0; + top: 0; width: 285px; z-index: 50; } #buddylist:before { - position: absolute; - width: 25px; - height: 55px; - line-height: 55px; - margin: auto; - left: 0; - top: 0; - bottom: 0; - content: "\f100"; - font-family: 'FontAwesome'; - color: rgba(0,0,0,0.3); - font-size: 1.8em; - text-align: center; - cursor: pointer; - pointer-events: auto; background: $componentbg; border-left: 1px solid $bordercolor; border-top: 1px solid $bordercolor; border-bottom: 1px solid $bordercolor; - -webkit-border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-topleft: 6px; - -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; + bottom: 0; + color: rgba(0,0,0,0.3); + content: "\f100"; + cursor: pointer; display: none; + font-family: FontAwesome; + font-size: 1.8em; + height: 55px; + left: 0; + line-height: 55px; + margin: auto; + pointer-events: auto; + position: absolute; + text-align: center; + top: 0; + width: 25px; } .withBuddylist #buddylist:before { @@ -66,16 +62,16 @@ } .buddylist { - position: absolute; - left: 25px; - right: 0; - top: 0; + background: $componentbg; + border-top: 1px solid $bordercolor; bottom: 0; + left: 25px; overflow-x: hidden; overflow-y: auto; - border-top: 1px solid $bordercolor; - background: $componentbg; pointer-events: auto; + position: absolute; + right: 0; + top: 0; } .buddylist { @@ -90,39 +86,39 @@ } } .buddycontainer { - position: relative; pointer-events: auto; + position: relative; user-select: none; } .buddylistloading, .buddylistempty { - padding:.4em; - font-size: 1.4em; - text-align: center; + bottom: 0; + color: rgba(0,0,0,.3); display: none; - position: absolute; + font-size: 1.4em; + height: 2em; left: 0; + margin: auto; + padding:.4em; + position: absolute; right: 0; - bottom: 0; + text-align: center; top: 0; - margin: auto; - height: 2em; - color: rgba(0,0,0,0.3); } } .buddy { - overflow: hidden; - height: 66px; - display: block; + background: $sidepanebg; border-bottom: 1px solid $bordercolor; - position: relative; cursor: pointer; + display: block; + font-size: 13px; + height: 66px; + overflow: hidden; + position: relative; text-align: left; width: 100%; - font-size: 13px; - background: $sidepanebg; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + @include tap-highlight-color(rgba(0, 0, 0, 0)); } .buddy:hover { @@ -137,67 +133,65 @@ right: 0; } > .buddyimage { - float:left; + background: $actioncolor1; + border-radius: 2px; + float: left; height: 46px; - width: 46px; - overflow: hidden; margin: 10px; + overflow: hidden; position: relative; - border-radius: 2px; - background: $actioncolor1; text-align: center; + width: 46px; > i { - line-height: 46px; color: $actioncolor2; + line-height: 46px; } > img { - position: absolute; + bottom: 0; + display: block; left: 0; + position: absolute; right: 0; - bottom: 0; top: 0; - display: block; } } > .buddy1 { - position: absolute; - left: 65px; - white-space: nowrap; - overflow: hidden; - right: 4px; - height: 28px; color: $componentfg1; font-weight: bold; font-size: 14px; - top: 24px; + height: 28px; + left: 65px; + position: absolute; + overflow: hidden; + right: 4px; text-overflow: ellipsis; + top: 24px; + white-space: nowrap; } > .buddy2 { - position: absolute; + color: $componentfg2; left: 65px; - white-space: nowrap; overflow: hidden; + position: absolute; right: 0px; - color: $componentfg2; top: 33px; + white-space: nowrap; } } .buddy .buddyactions { - position: absolute; - right: -125px; - top: 0px; - bottom: 0px; background: rgba(255,255,255,0.5); - z-index: 5; + bottom: 0px; line-height: 66px; + position: absolute; + right: -125px; padding: 0 10px; + text-align: right; + top: 0px; transition-property: right; - -webkit-transition-property: right; transition-duration: .3s; - -webkit-transition-duration: .3s; white-space: nowrap; - text-align: right; + z-index: 5; i { font-size: 2em; } diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss index ed188269..ceb6ee47 100644 --- a/src/styles/global/_mixins.scss +++ b/src/styles/global/_mixins.scss @@ -10,3 +10,8 @@ @content; } } + +// not handled by autoprefixer +@mixin tap-highlight-color($color) { + -webkit-tap-highlight-color: $color; +}