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
Split 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, @@ -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, @@ -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, @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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 { @@ -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;

5
sass/layout/_modal.sass
Unescape View File

@ -273,6 +273,11 @@ $header-modal-height : $menu-height @@ -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

45
sass/layout/_postboard.sass
Unescape View File

@ -304,31 +304,23 @@ @@ -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 @@ @@ -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 @@ @@ -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

Write Preview
Loading…
Cancel
Save