twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

rewrite styling of retwisters avatars of an expanded twist

nin-v2
Simon Grim 6 years ago
parent
bb23ef34d9
commit
792b8ecf73
3 changed files with 51 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      css/style.css
  2. 5
      sass/layout/_modal.sass
  3. 45
      sass/layout/_postboard.sass

58
css/style.css
Unescape View File

@ -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
Unescape View File

@ -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

45
sass/layout/_postboard.sass
Unescape View File

@ -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
font-size: 12px vertical-align: middle
float: left .stat-count
line-height: 20px font-size: 12px
@extend .ion-shuffle padding-right: 4px
@extend .ion border-right: solid 1px $light-grey
&:before div:last-child
margin-right: 0 display: none
span:last-child .avatar-row
display: none padding: 4px
a
a display: inline-block
position: relative position: relative
text-decoration: none margin-right: 2px
display: inline-block
width: 20px
height: 20px
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

Write Preview
Loading…
Cancel
Save