Browse Source

rewrite styling of retwisters avatars of an expanded twist

nin-v2
Simon Grim 6 years ago
parent
commit
792b8ecf73
  1. 58
      css/style.css
  2. 5
      sass/layout/_modal.sass
  3. 37
      sass/layout/_postboard.sass

58
css/style.css

@ -114,7 +114,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
font-weight: normal; font-weight: normal;
font-style: 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; display: inline-block;
font-family: "Ionicons"; font-family: "Ionicons";
speak: none; speak: none;
@ -128,11 +128,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-moz-osx-font-smoothing: grayscale; -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; 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; display: none;
} }
@ -148,7 +148,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; 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: ""; content: "";
} }
@ -906,6 +906,14 @@ button.light:hover, a.button.light:hover {
padding: 4px; padding: 4px;
} }
.avatar.tiny {
width: 20px;
height: 20px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.twister-user { .twister-user {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -1989,35 +1997,28 @@ button.light:hover, a.button.light:hover {
.post-stats { .post-stats {
float: left; float: left;
clear: left; clear: left;
height: 34px;
} }
.post-stats li { .post-stats > div {
display: inline-block; display: inline-block;
line-height: 16px;
vertical-align: middle;
} }
.post-stats li.stat-count { .post-stats .stat-count {
font-size: 12px; font-size: 12px;
float: left; padding-right: 4px;
line-height: 20px; border-right: solid 1px #C3C3C3;
} }
.post-stats li.stat-count:before { .post-stats .stat-count div:last-child {
margin-right: 0;
}
.post-stats li.stat-count span:last-child {
display: none; display: none;
} }
.post-stats a { .post-stats .avatar-row {
position: relative; padding: 4px;
text-decoration: none;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 2px 0 0;
} }
.post-stats a img { .post-stats .avatar-row a {
width: 20px; display: inline-block;
height: 20px; position: relative;
-moz-border-radius: 3px; margin-right: 2px;
-webkit-border-radius: 3px;
border-radius: 3px;
} }
.post .new-replies-available { .post .new-replies-available {
@ -2034,9 +2035,6 @@ button.light:hover, a.button.light:hover {
border-color: #687b40; border-color: #687b40;
} }
.avatar-row {
margin-left: 5px;
}
.avatar-row a:hover .user-name-tooltip { .avatar-row a:hover .user-name-tooltip {
display: block; display: block;
} }
@ -2052,7 +2050,7 @@ button.light:hover, a.button.light:hover {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
color: #fff; color: #fff;
top: -32px; top: -28px;
left: -10px; left: -10px;
} }
.avatar-row .user-name-tooltip:after { .avatar-row .user-name-tooltip:after {
@ -2060,7 +2058,7 @@ button.light:hover, a.button.light:hover {
position: absolute; position: absolute;
width: 0; width: 0;
left: 13px; left: 13px;
bottom: -5px; bottom: -4px;
border-top: solid 5px #222; border-top: solid 5px #222;
border-left: solid 5px transparent; border-left: solid 5px transparent;
border-right: solid 5px transparent; border-right: solid 5px transparent;

5
sass/layout/_modal.sass

@ -273,6 +273,11 @@ $header-modal-height : $menu-height
text-align: center text-align: center
padding: 4px padding: 4px
.avatar.tiny
width: 20px
height: 20px
+border-radius(3px)
.twister-user .twister-user
position: relative position: relative
box-sizing: border-box box-sizing: border-box

37
sass/layout/_postboard.sass

@ -304,31 +304,23 @@
.post-stats .post-stats
float: left float: left
clear: left clear: left
li height: 34px
> div
display: inline-block display: inline-block
&.stat-count line-height: 16px
vertical-align: middle
.stat-count
font-size: 12px font-size: 12px
float: left padding-right: 4px
line-height: 20px border-right: solid 1px $light-grey
@extend .ion-shuffle div:last-child
@extend .ion
&:before
margin-right: 0
span:last-child
display: none display: none
.avatar-row
padding: 4px
a a
position: relative
text-decoration: none
display: inline-block display: inline-block
width: 20px position: relative
height: 20px margin-right: 2px
margin: 0 2px 0 0
img
width: 20px
height: 20px
+border-radius(3px)
.post .post
.new-replies-available .new-replies-available
@ -343,7 +335,6 @@
//what appears on top of .avatar-row img on hover //what appears on top of .avatar-row img on hover
.avatar-row .avatar-row
margin-left: 5px
a:hover a:hover
.user-name-tooltip .user-name-tooltip
display: block display: block
@ -358,14 +349,14 @@
padding: 5px padding: 5px
+border-radius(3px) +border-radius(3px)
color: #fff color: #fff
top: -32px top: -28px
left: -10px left: -10px
&:after &:after
content: "" content: ""
position: absolute position: absolute
width: 0 width: 0
left: 13px left: 13px
bottom: -5px bottom: -4px
border-top: solid 5px $main-color-dark border-top: solid 5px $main-color-dark
border-left: solid 5px transparent border-left: solid 5px transparent
border-right: solid 5px transparent border-right: solid 5px transparent

Loading…
Cancel
Save