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

fixes + responsive

nin-v2
myleneb 9 years ago
parent
8d70e256bd
commit
7d831da6b2
9 changed files with 161 additions and 90 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. 130
      css/style.css
  2. 3
      js/theme_option.js
  3. 3
      sass/base/_fonts.sass
  4. 15
      sass/layout/_dm.sass
  5. 2
      sass/layout/_menu.sass
  6. 2
      sass/layout/_modal.sass
  7. 7
      sass/layout/_postboard.sass
  8. 2
      sass/layout/_prompt.sass
  9. 75
      sass/layout/_responsive.sass

130
css/style.css
Unescape View File

@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -107,7 +107,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, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-context span:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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 {
.ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before, .post-context span:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user 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;
@ -125,7 +125,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -125,7 +125,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
padding: 0 3px;
}
.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-context span:after, .post-interactions span:after, .post-stats li.stat-count:after, ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .show-more-followers:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user 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 {
.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage:after, .post-context span:after, .post-interactions span:after, .post-stats li.stat-count:after, ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .show-more-followers:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user 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;
}
@ -205,6 +205,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @@ -205,6 +205,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: "";
}
.ion-right:after, .direct-messages-list .post:after {
content: "";
}
/* FONTS */
* {
outline: none !important;
@ -418,7 +422,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -418,7 +422,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
left: 0;
margin: 0;
background-color: #3E3C42;
z-index: 40;
z-index: 20;
}
.userMenu > ul {
-moz-box-sizing: border-box;
@ -583,7 +587,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -583,7 +587,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.modal-wrapper {
background: #F3F2F0;
z-index: 4;
z-index: 100;
width: 34%;
position: fixed;
-moz-box-sizing: border-box;
@ -779,7 +783,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -779,7 +783,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
/*********** POPUP PROMPT ************ */
.prompt-wrapper {
background: #FDFCFA;
z-index: 5;
z-index: 200;
position: fixed;
top: 50%;
left: 50%;
@ -915,19 +919,30 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -915,19 +919,30 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
cursor: pointer;
}
.direct-messages-list .post:after {
content: "";
font-family: "Ionicons";
position: absolute;
right: 5px;
right: 25px;
top: 50%;
font-size: 1.1em;
margin: -6px 0 0 0;
color: rgba(0, 0, 0, 0.4);
display: none;
opacity: 0;
-moz-transition-property: right, opacity;
-o-transition-property: right, opacity;
-webkit-transition-property: right, opacity;
transition-property: right, opacity;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.direct-messages-list .post:hover:after {
display: block;
opacity: 1;
right: 5px;
}
.direct-messages-list .post:hover {
background: white;
@ -1249,17 +1264,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover { @@ -1249,17 +1264,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
top: 0;
z-index: 120;
}
#postboard-top.on, #postboard-top, #postboard-top.fixed {
-moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
-webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
}
#postboard-top.fixed {
position: fixed;
width: 362px;
top: 52px;
z-index: 120;
}
#postboard-top .profile-photo {
position: absolute;
@ -2602,61 +2610,93 @@ ul.dropdown-menu li > li > a { @@ -2602,61 +2610,93 @@ ul.dropdown-menu li > li > a {
margin-right: auto;
}
.userMenu > ul {
background-image: none;
}
.userMenu .userMenu-profile {
display: none;
}
.userMenu li.userMenu-search > input {
width: 150px;
}
.prompt-wrapper {
width: 98%;
left: 1%;
margin-left: 0;
}
.dashboard.left {
top: 52px;
float: none;
top: 0;
margin-top: 0;
min-height: 122px;
width: 100%;
}
.dashboard.left > .module {
top: 52px;
float: none;
width: 100%;
position: fixed;
top: 52px;
z-index: 2;
z-index: 10;
}
.promoted-posts-only {
.dashboard.left .mini-profile-info {
display: none;
}
.postboard {
float: none;
width: 100%;
.mini-profile-indicators li {
width: 25%;
margin: 0;
top: 122px;
left: 0;
z-index: 1;
float: left;
}
.modal-wrapper .postboard {
top: auto;
.who-follow {
display: none;
}
.mini-profile-info {
.promoted-posts-only {
display: none;
}
.mini-profile-indicators li {
width: 25%;
float: left;
.wrapper {
padding-top: 0;
}
.postboard {
width: 100%;
float: none;
left: 0;
z-index: 5;
top: 0;
position: relative;
z-index: 2;
margin-top: 0;
}
.modal-wrapper .postboard {
top: auto;
}
#postboard-top {
position: fixed;
bottom: 0;
width: 100%;
top: auto;
margin: 0;
-moz-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
width: 100%;
-moz-box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0 -5px 13px rgba(17, 17, 17, 0.2);
}
.userMenu .userMenu-profile {
display: none;
.modal-wrapper {
width: 90%;
}
}
@media (max-width: 360px) {
.userMenu li.userMenu-search > input {
width: 100px;
}
.userMenu ul {
background-image: none;
.dialog-modal {
right: -50px;
width: 290px;
}
}

3
js/theme_option.js
Unescape View File

@ -12,8 +12,7 @@ $(document).ready(function() @@ -12,8 +12,7 @@ $(document).ready(function()
reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
$( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300);

3
sass/base/_fonts.sass
Unescape View File

@ -133,3 +133,6 @@ @@ -133,3 +133,6 @@
.ion-search:after
content: "\f21f"
.ion-right:after
content: "\f125"

15
sass/layout/_dm.sass
Unescape View File

@ -51,20 +51,23 @@ @@ -51,20 +51,23 @@
.direct-messages-list .post
padding: 20px
cursor: pointer
@extend .ion-after
@extend .ion-right
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 5px
right: 25px
top: 50%
font-size: 1.1em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
opacity: 0
+transition-property(right, opacity)
+transition-duration(.2s)
+transition-timing-function(ease-out)
.direct-messages-list
.post:hover:after
display: block
opacity: 1
right: 5px
.post:hover
background: white
li

2
sass/layout/_menu.sass
Unescape View File

@ -12,7 +12,7 @@ $menuBgColor : $dark-grey @@ -12,7 +12,7 @@ $menuBgColor : $dark-grey
//background-color: #FFAF1C
//+background-image(linear-gradient(to right , $color-green, #5E80A2) )
background-color: $menuBgColor
z-index: 40
z-index: 20
> ul
@extend .clear-fix
+box-sizing(border-box)

2
sass/layout/_modal.sass
Unescape View File

@ -13,7 +13,7 @@ $header-modal-height : $menu-height @@ -13,7 +13,7 @@ $header-modal-height : $menu-height
.modal-wrapper
background: $bloc-background-color
z-index: 4
z-index: 100
width: 34%
position: fixed
+box-sizing(border-box)

7
sass/layout/_postboard.sass
Unescape View File

@ -8,20 +8,13 @@ @@ -8,20 +8,13 @@
background: white
overflow: hidden
background: $bloc-light-color
@extend .on
+transition-property( top)
+transition-duration(.1s)
+transition-timing-function(ease-out)
top: 0
&.on
+box-shadow(1px 2px 2px rgba(#111, 0.1))
z-index: 120
&.fixed
position: fixed
width: $rightWidth
top: $menu-height
@extend .on
.profile-photo
position: absolute
top: 10px

2
sass/layout/_prompt.sass
Unescape View File

@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
.prompt-wrapper
background: $bloc-light-color
z-index: 5
z-index: 200
position: fixed
top: 50%
left: 50%

75
sass/layout/_responsive.sass
Unescape View File

@ -29,42 +29,75 @@ @@ -29,42 +29,75 @@
margin: 0 auto 50px auto
float: none
margin-right: auto
.userMenu
> ul
background-image: none
.userMenu-profile
display: none
.userMenu li.userMenu-search > input
width: 150px
.prompt-wrapper
width: 98%
left: 1%
margin-left: 0
.dashboard
&.left
top: $menu-height
float: none
top: 0
margin-top: 0
min-height: $menu-height + 70px
width: 100%
> .module
width: 100%
position: fixed
top: $menu-height
z-index: 2
.promoted-posts-only
display: none
.postboard
float: none
width: 100%
margin: 0
top: $menu-height +70
left: 0
z-index: 1
.modal-wrapper &
top: auto
position: fixed
z-index: 10
.mini-profile-info
display: none
.mini-profile-indicators li
width: 25%
margin: 0
float: left
.who-follow
display: none
.promoted-posts-only
display: none
.wrapper
padding-top: 0
.postboard
width: 100%
float: none
left: 0
z-index: 5
top: 0
position: relative
z-index: 2
margin-top: 0
.modal-wrapper &
top: auto
#postboard-top
position: fixed
bottom: 0
width: 100%
top: auto
margin: 0
+box-shadow(0px -5px 13px rgba(17, 17, 17, 0.2))
.userMenu .userMenu-profile
display: none
.userMenu ul
background-image: none
width: 100%
+box-shadow(0 -5px 13px rgba(#111, 0.2))
.modal-wrapper
width: 90%
@media (max-width: 360px)
.userMenu li.userMenu-search > input
width: 100px
.dialog-modal
right: -50px
width: 290px
Write Preview
Loading…
Cancel
Save