From 792b8ecf73ee63919331850f4fc0091554e4c5c0 Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Thu, 1 Nov 2018 00:49:41 +0500 Subject: [PATCH] rewrite styling of retwisters avatars of an expanded twist --- css/style.css | 58 ++++++++++++++++++------------------- sass/layout/_modal.sass | 5 ++++ sass/layout/_postboard.sass | 45 ++++++++++++---------------- 3 files changed, 51 insertions(+), 57 deletions(-) diff --git a/css/style.css b/css/style.css index 53a3470..886e16f 100644 --- a/css/style.css +++ b/css/style.css @@ -114,7 +114,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, font-weight: normal; font-style: normal; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before, .ion-after:after, .isFollowing:after, .direct-messages-list .post:after { display: inline-block; font-family: "Ionicons"; speak: none; @@ -128,11 +128,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, -moz-osx-font-smoothing: grayscale; } -.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .post-stats li.stat-count:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { +.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .mini-profile .post-area .modal-header span:before, .minimize-modal:before, .prompt-wrapper .switch-mode:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-rt-icon:before, .post-interactions span:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .mini-profile-indicators .userMenu-groupmessages a:before, .mini-profile-indicators .userMenu-collapsePosts a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .view-all-users:before { padding: 0 3px; } -.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .mini-profile .post-area .modal-header span:after, .minimize-modal:after, .prompt-wrapper .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-rt-icon:after, .post-interactions span:after, .post-stats li.stat-count:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { +.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .mini-profile .post-area .modal-header span:after, .minimize-modal:after, .prompt-wrapper .switch-mode:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-rt-icon:after, .post-interactions span:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .mini-profile-indicators .userMenu-groupmessages a:after, .mini-profile-indicators .userMenu-collapsePosts a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .view-all-users:after, .ion-after:before, .isFollowing:before, .direct-messages-list .post:before { display: none; } @@ -148,7 +148,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, content: ""; } -.ion-shuffle:before, .prompt-wrapper .switch-mode:before, .post-rt-icon:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { +.ion-shuffle:before, .prompt-wrapper .switch-mode:before, .post-rt-icon:before, .post-interactions span.post-propagate:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { content: ""; } @@ -906,6 +906,14 @@ button.light:hover, a.button.light:hover { padding: 4px; } +.avatar.tiny { + width: 20px; + height: 20px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + .twister-user { position: relative; box-sizing: border-box; @@ -1989,35 +1997,28 @@ button.light:hover, a.button.light:hover { .post-stats { float: left; clear: left; + height: 34px; } -.post-stats li { +.post-stats > div { display: inline-block; + line-height: 16px; + vertical-align: middle; } -.post-stats li.stat-count { +.post-stats .stat-count { font-size: 12px; - float: left; - line-height: 20px; + padding-right: 4px; + border-right: solid 1px #C3C3C3; } -.post-stats li.stat-count:before { - margin-right: 0; -} -.post-stats li.stat-count span:last-child { +.post-stats .stat-count div:last-child { display: none; } -.post-stats a { - position: relative; - text-decoration: none; - display: inline-block; - width: 20px; - height: 20px; - margin: 0 2px 0 0; +.post-stats .avatar-row { + padding: 4px; } -.post-stats a img { - width: 20px; - height: 20px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; +.post-stats .avatar-row a { + display: inline-block; + position: relative; + margin-right: 2px; } .post .new-replies-available { @@ -2034,9 +2035,6 @@ button.light:hover, a.button.light:hover { border-color: #687b40; } -.avatar-row { - margin-left: 5px; -} .avatar-row a:hover .user-name-tooltip { display: block; } @@ -2052,7 +2050,7 @@ button.light:hover, a.button.light:hover { -webkit-border-radius: 3px; border-radius: 3px; color: #fff; - top: -32px; + top: -28px; left: -10px; } .avatar-row .user-name-tooltip:after { @@ -2060,7 +2058,7 @@ button.light:hover, a.button.light:hover { position: absolute; width: 0; left: 13px; - bottom: -5px; + bottom: -4px; border-top: solid 5px #222; border-left: solid 5px transparent; border-right: solid 5px transparent; diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 0cb91a3..539c3a9 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -273,6 +273,11 @@ $header-modal-height : $menu-height text-align: center padding: 4px +.avatar.tiny + width: 20px + height: 20px + +border-radius(3px) + .twister-user position: relative box-sizing: border-box diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 10f898a..ee5f8cd 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -304,31 +304,23 @@ .post-stats float: left clear: left - li + height: 34px + > div display: inline-block - &.stat-count - font-size: 12px - float: left - line-height: 20px - @extend .ion-shuffle - @extend .ion - &:before - margin-right: 0 - span:last-child - display: none - - a - position: relative - text-decoration: none - display: inline-block - width: 20px - height: 20px - margin: 0 2px 0 0 - - img - width: 20px - height: 20px - +border-radius(3px) + line-height: 16px + vertical-align: middle + .stat-count + font-size: 12px + padding-right: 4px + border-right: solid 1px $light-grey + div:last-child + display: none + .avatar-row + padding: 4px + a + display: inline-block + position: relative + margin-right: 2px .post .new-replies-available @@ -343,7 +335,6 @@ //what appears on top of .avatar-row img on hover .avatar-row - margin-left: 5px a:hover .user-name-tooltip display: block @@ -358,14 +349,14 @@ padding: 5px +border-radius(3px) color: #fff - top: -32px + top: -28px left: -10px &:after content: "" position: absolute width: 0 left: 13px - bottom: -5px + bottom: -4px border-top: solid 5px $main-color-dark border-left: solid 5px transparent border-right: solid 5px transparent