From 49f2721908b9ce4320a51134f6986281c266208f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Fri, 2 Mar 2018 01:08:56 -0500 Subject: [PATCH] Tweak collapse/expand icon design - Animate the caret similarly to previews and status messages - Tweak margins to center things a bit - Remove unused CSS attributes --- client/css/style.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 3748c88c..c3986f6c 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -564,7 +564,7 @@ kbd { #sidebar .chan, #sidebar .chan-placeholder { display: block; - padding: 8px 25px; + padding: 8px 16px 8px 32px; transition: color 0.2s; width: 100%; } @@ -710,24 +710,20 @@ kbd { #sidebar .network .collapse-network { border-radius: 3px; - width: 25px; + width: 32px; height: 34px; float: left; opacity: 0.4; transition: opacity 0.2s, background-color 0.2s, transform 0.2s; } -#sidebar .network .collapse-network::before { - font-weight: normal; - display: inline-block; - line-height: 16px; - text-align: center; - content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */ - color: #fff; +#sidebar .network.collapsed .collapse-network { + transform: rotate(-90deg); } -#sidebar .network.collapsed .collapse-network::before { - content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */ +#sidebar .network .collapse-network::before { + content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */ + color: #fff; } #sidebar .collapse-network:hover {