modal & search style

css/style.css

@@ -243,6 +243,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 
 /* '' */
 /* FONTS */
+/* usefull vars */
 * {
   outline: none !important;
   -moz-box-sizing: border-box;
@@ -437,6 +438,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   font-size: 0.7rem;
   line-height: 0.7rem;
 }
+button.light, a.button.light {
+  background: #eee;
+  border-color: #e1e1e1;
+  color: #222;
+  font-weight: 500;
+}
+button.light:hover, a.button.light:hover {
+  border-color: #aeaeae;
+}
 
 .userMenu {
   width: 100%;
@@ -556,6 +566,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   right: 0;
   bottom: 0;
   overflow: hidden;
+  -moz-border-radius: 20px 0 0 0;
+  -webkit-border-radius: 20px;
+  border-radius: 20px 0 0 0;
+  -moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
+  -webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
+  box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
 }
 .modal-wrapper .postboard {
   border: none;
@@ -727,11 +743,23 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 .modal-wrapper.directMessages .post-area-new {
   display: none;
   z-index: 5;
-  background: #222 !important;
+  background: #EBEBEB !important;
   position: absolute;
   bottom: 0;
   width: 100% !important;
   padding: 20px !important;
+  -moz-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
+  -webkit-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
+  box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
+}
+.modal-wrapper.directMessages #post-preview {
+  background: none;
+  border: none;
+  padding: 5px;
+  width: 100% !important;
+}
+.modal-wrapper.directMessages .post-area-extras span {
+  color: white;
 }
 .modal-wrapper.directMessages .modal-header h3 span {
   display: inline-block !important;
@@ -747,11 +775,10 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   background: #f0f0f0;
 }
 .modal-wrapper.directMessages .post-photo {
-  height: 48px;
+  width: 40px;
-  width: 48px;
 }
 .modal-wrapper.directMessages .post-text {
-  margin-left: 58px;
+  margin-left: 50px;
   font-size: 0.9rem;
 }
 .modal-wrapper.directMessages .post-info-name {
@@ -796,6 +823,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 .direct-messages-list li {
   position: relative;
   border-bottom: 1px solid #EBEBEB;
+  background: #FDFCFA;
 }
 
 .direct-messages-thread {
@@ -852,7 +880,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   float: left;
   word-wrap: break-word;
   max-width: 70%;
-  min-height: 48px;
+  min-height: 40px;
 }
 .direct-messages-thread .post .post-photo {
   position: absolute;
@@ -914,21 +942,20 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 
 .mini-following-info {
   border-bottom: 1px solid #EBEBEB;
-  line-height: 45px;
+  line-height: 40px;
 }
 .mini-following-info a {
   display: block;
   padding: 10px;
   width: 100%;
   color: #444;
-  background: #EBEBEB;
-}
-.mini-following-info a:hover {
   background: #FDFCFA;
 }
+.mini-following-info a:hover {
+  background: white;
+}
 .mini-following-info .mini-profile-photo {
-  height: 48px;
+  width: 40px;
-  width: 48px;
   line-height: 0;
   margin: 0 1rem 0 0;
   float: left;
@@ -958,11 +985,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   font-size: 0.8rem;
   line-height: 1rem;
   width: 80%;
+  padding-left: 60px;
 }
 .modal-wrapper.who-to-follow-modal button {
   position: absolute;
-  right: 0;
+  right: 10px;
-  top: 5%;
+  top: 10px;
 }
 .modal-wrapper.who-to-follow-modal .bio {
   color: rgba(0, 0, 0, 0.6);
@@ -1050,23 +1078,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 }
 
 .profile-card-photo {
-  height: 70px;
+  height: auto;
-  width: 70px;
+  width: 64px;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
   margin: 0 auto;
   display: block;
+  float: left;
 }
 
 .profile-card-photo.forEdition {
-  -moz-border-radius: 50%;
+  float: none;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  height: 75px;
-  margin: 0 auto;
-  display: block;
-  width: 75px;
 }
 
 .profile-bio {
@@ -1297,7 +1317,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   display: inline-block;
   float: left;
   vertical-align: middle;
-  width: 45px;
+  width: 40px;
 }
 .post-photo img {
   width: 100%;
@@ -1339,11 +1359,14 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 }
 
 .post-text {
-  margin: 0 0 0 55px;
+  margin: 0 0 0 50px;
   word-wrap: break-word;
-  min-height: 25px;
+  min-height: 20px;
   padding: 0;
 }
+.post-text a:hover {
+  text-decoration: underline;
+}
 
 .post-context {
   font-size: 11px;
@@ -1528,7 +1551,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 }
 
 .following {
-  width: 100%;
+  width: 40%;
+  margin-left: 30%;
   padding: 20px;
 }
 .following h2 {
@@ -1558,8 +1582,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   color: #444;
 }
 .following .mini-profile-photo {
-  height: 48px;
+  width: 40px;
-  width: 48px;
   line-height: 0;
   margin: 0 1rem 0 0;
   float: left;
@@ -1814,8 +1837,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 }
 .promoted-posts-only li {
   cursor: pointer;
-  display: inline-block;
+  display: block;
-  margin: 0 0 0 5px;
+  margin: 0;
   padding: 5px 15px;
   font-size: 0.9em;
   transition: color 0.1s linear;
@@ -1883,9 +1906,9 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
   display: none;
   background: #222;
   position: absolute;
-  top: 45px;
+  top: 46px;
-  right: -10px;
+  right: 0;
-  width: 250px;
+  width: 320px;
   overflow: hidden;
   -moz-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
@@ -1905,23 +1928,42 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
 ul.userMenu-search-profiles {
   width: 100%;
   padding: 0;
-  background: #FDFCFA;
 }
 ul.userMenu-search-profiles li {
   float: none;
   display: block;
   margin: 0;
+  cursor: pointer;
+  background: #FDFCFA;
   border-bottom: 1px solid #EBEBEB;
 }
-ul.userMenu-search-profiles .mini-profile-name {
+ul.userMenu-search-profiles li:hover {
+  background: white;
+}
+ul.userMenu-search-profiles li a {
+  display: block;
+  width: 100%;
   font-size: 12px;
+  font-weight: 400;
+  line-height: 40px;
   display: block;
   margin: 0;
   padding: 0;
+  color: #444;
+}
+ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b {
+  display: inline-block;
+  color: #444;
+  font-weight: 400;
+  font-size: 12px;
+}
+ul.userMenu-search-profiles .mini-screen-name b,
+ul.userMenu-search-profiles .mini-screen-name {
+  font-weight: 500;
 }
 ul.userMenu-search-profiles .mini-profile-photo {
-  width: 30px;
+  width: 40px;
-  height: 30px;
+  height: auto;
   margin: 10px;
   float: left;
 }
@@ -1930,24 +1972,25 @@ ul.userMenu-search-profiles .mini-profile-info {
   float: none;
 }
 ul.userMenu-search-profiles button {
-  padding: 3px 5px;
+  font-size: 1.4rem;
+  line-height: 25px;
+  height: 30px;
+  width: 40px;
+  text-align: center;
+  font-weight: 500;
+  padding: 0;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   position: absolute;
-  bottom: 10px;
+  top: 10px;
   right: 10px;
 }
-ul.userMenu-search-profiles button:after {
-  content: "";
-  font-family: "fontello";
-  font-size: 1.1rem;
-}
 
 .userMenu-search input[type="text"] {
   float: right;
   padding: 3px 10px;
-  margin: 9px 20px 0 0;
+  margin: 10px 20px 0 0;
   border: none;
   background: #EBEBEB;
   box-sizing: border-box;
@@ -2052,19 +2095,13 @@ ul.userMenu-search-profiles button:after {
 }
 
 .mini-profile-photo {
-  width: 70px;
+  width: 64px;
-  height: 70px;
+  height: auto;
-  overflow: hidden;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
   display: block;
   margin: auto;
 }
 .mini-profile-photo img {
-  min-width: 100%;
+  width: 100%;
-  min-height: 100%;
-  border-radius: 50%;
 }
 
 .profile-data {
@@ -2149,7 +2186,7 @@ ul.userMenu-search-profiles button:after {
   -moz-transition: height 0.3s linear;
   -o-transition: height 0.3s linear;
   -ms-transition: height 0.3s linear;
-  height: 48px;
+  height: 40px;
   border: none;
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -2162,13 +2199,17 @@ ul.userMenu-search-profiles button:after {
 
 #postboard-top {
   clear: both;
-  position: relative;
+  position: fixed;
+  top: 50px;
+  width: 30%;
   margin-bottom: 1px;
+  left: 0;
   transition: height 0.3s linear;
   padding: 10px 10px 5px 10px;
   background: white;
   overflow: hidden;
   display: none;
+  z-index: 120;
 }
 #postboard-top.hide {
   display: none !important;
@@ -2180,9 +2221,7 @@ ul.userMenu-search-profiles button:after {
   position: absolute;
   top: 10px;
   left: 10px;
-  width: 48px;
+  width: 40px;
-  height: 48px;
-  overflow: hidden;
 }
 #postboard-top .profile-photo img {
   width: 100%;
@@ -2307,7 +2346,7 @@ img.twister-user-photo {
   float: left;
   display: block;
   float: left;
-  width: 48px;
+  width: 40px;
   height: auto;
   margin: 0 10px;
   background: #EBEBEB;

js/theme_option.js

@@ -25,7 +25,7 @@ $(document).ready(function()
     $('.modal-back').html('');
     $('.twister-user-remove').html('');
     $('.profile-card-main').attr('style', '');
-    $('.userMenu-search-profiles button').html('').attr('title',polyglot.t('Follow'));
+    $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
     $('.mini-profile-actions span').html('');
     $('.promoted-posts-only').detach().appendTo($('.dashboard.left'));
     $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
@@ -47,21 +47,21 @@ $(document).ready(function()
         //active promoted posts tab
         $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
         $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
-        $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
+        //$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
         //active normal posts
         $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
         $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
-        $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
+        //$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
     });
 
 
 
     $(".userMenu-search-profiles .follow")
         .on("eventToggleFollow", function() {
-            $(this).text('').attr('title', polyglot.t('Follow'));
+            $(this).text('+').attr('title', polyglot.t('Follow'));
         })
         .on("eventToggleUnfollow", function() {
-            $(this).text('').attr('title', polyglot.t('Unfollow'));
+            $(this).text('-').attr('title', polyglot.t('Unfollow'));
         });
 
     if (/\/options.html$/i.test(document.location))

sass/base/_utils.sass

@@ -58,4 +58,11 @@ button, a.button
 		padding:  .5rem
 		font-weight: 700
 		font-size: .7rem 
-		line-height: .7rem
+		line-height: .7rem
+	&.light 
+		background: #eee
+		border-color: darken(#eee, 5%)
+		color: $main-color-dark
+		font-weight: 500
+		&:hover 
+			border-color: darken(#eee, 25%)

sass/base/_var.sass

@@ -35,3 +35,9 @@ $main-line-height  :  1.4rem
 $main-font-family: "Roboto", sans-serif
 $symbol-font-family: "fontello"
 $serif-font-family: "Droid", serif
+
+
+/* usefull vars */
+
+$mini-usr-img : 40px
+$usr-img : 64px

sass/layout/_dm.sass

@@ -2,15 +2,26 @@
 
 .modal-wrapper.directMessages
 	
-	
 	.post-area-new
 		display: none
 		z-index: 5
-		background: $main-color-dark !important
+		background: $bloc-background-color !important
 		position: absolute 
 		bottom: 0
 		width: 100% !important
 		padding: 20px!important
+		+box-shadow(0 -8px 13px rgba(#111, 0.1))
+	#post-preview 
+		background: none
+		border: none
+		padding: 5px
+		width: 100%!important
+
+	.post-area-extras
+		span 
+			color: white
+
+
 	.modal-header
 		h3 span
 			display: inline-block!important
@@ -24,10 +35,9 @@
 		background: #f0f0f0
 
 	.post-photo
-		height: 48px
+		width: $mini-usr-img
-		width: 48px
 	.post-text
-		margin-left: 58px
+		margin-left: $mini-usr-img + 10px
 		font-size: .9rem
 	.post-info-name
 		float: none
@@ -65,6 +75,7 @@
 	li 
 		position: relative
 		border-bottom: 1px solid $main-background-color
+		background: $bloc-light-color
 .direct-messages-thread
 	padding-bottom: 180px
 	
@@ -121,7 +132,7 @@
 			float: left
 			word-wrap: break-word
 			max-width: 70%
-			min-height: 48px
+			min-height: $mini-usr-img
 
 		.post-photo
 			position: absolute

sass/layout/_modal.sass

@@ -19,7 +19,8 @@ $header-modal-height : $menu-height
 	right: 0
 	bottom: 0
 	overflow: hidden
-
+	+border-radius(20px 0 0 0)
+	+box-shadow(-8px 0 13px rgba(#111, 0.2))
 	.postboard
 		border: none
 		padding: 0
@@ -231,7 +232,7 @@ $header-modal-height : $menu-height
 		display: none
 .mini-following-info
 	border-bottom: 1px solid $main-background-color
-	line-height: 45px
+	line-height: $mini-usr-img
 
 	a 
 		display: block 
@@ -239,12 +240,11 @@ $header-modal-height : $menu-height
 		width: 100%
 		@extend .clear-fix
 		color: $defaut-font-color
-		background: $bloc-background-color
+		background: $bloc-light-color
 		&:hover 
-			background: $bloc-light-color
+			background: white
 	.mini-profile-photo
-		height: 48px
+		width: $mini-usr-img
-		width: 48px
 		line-height: 0
 		margin: 0 $space 0 0
 		float: left
@@ -277,10 +277,11 @@ $header-modal-height : $menu-height
 		font-size: .8rem
 		line-height: 1rem
 		width: 80%
+		padding-left: $mini-usr-img + 20
 	button 
 		position: absolute 
-		right: 0
+		right: 10px
-		top: 5%
+		top: 10px
 		@extend .small	
 	.bio
 		color: rgba(0, 0, 0, 0.6)

sass/layout/_postboard.sass

@@ -3,7 +3,6 @@
 
 // vars for postboard 
 
-$avatar-width : 45px
 
 
 .postboard
@@ -80,7 +79,7 @@ $avatar-width : 45px
 	display: inline-block
 	float: left
 	vertical-align: middle
-	width: $avatar-width
+	width: $mini-usr-img
 	img
 		width: 100%
 		height: auto!important
@@ -116,11 +115,12 @@ $avatar-width : 45px
 		color: lighten($dark-grey,5%)
 
 .post-text
-	margin: 0 0 0 ($avatar-width +10)
+	margin: 0 0 0 ($mini-usr-img +10)
 	word-wrap: break-word
-	min-height: $avatar-width - 20
+	min-height: $mini-usr-img - 20
 	padding: 0
-
+	a:hover 
+		text-decoration: underline
 
 
 .post-context

sass/layout/_profile.sass

@@ -89,18 +89,13 @@ $modal-postboard-post-height: 100%
 		z-index: 1
 
 .profile-card-photo
-	height: 70px
+	height: auto
-	width: 70px 
+	width: $usr-img
-	+border-radius(50%)
 	margin: 0 auto
 	display: block
-
+	float: left
 .profile-card-photo.forEdition
-	+border-radius(50%)
+	float: none
-	height: 75px
-	margin: 0 auto
-	display: block
-	width: 75px
 
 .profile-bio
 	padding: 10px

sass/pages/_following.sass

@@ -1,6 +1,7 @@
 
 .following 
-	width: 100%
+	width: 40%
+	margin-left: 30%
 	padding: 20px
 	h2 
 		display: none
@@ -23,8 +24,7 @@
 
 
 	.mini-profile-photo
-		height: 48px
+		width: $mini-usr-img
-		width: 48px
 		line-height: 0
 		margin: 0 $space 0 0
 		float: left

sass/style.sass

@@ -32,8 +32,8 @@
 
 	li
 		cursor: pointer
-		display: inline-block
+		display: block
-		margin: 0 0 0 5px
+		margin: 0
 		padding: 5px 15px
 		font-size: .9em
 		transition: color .1s linear
@@ -102,9 +102,9 @@
 	display: none
 	background: $main-color-dark
 	position: absolute
-	top: 45px
+	top: $menu-height - 4
-	right: -10px
+	right: 0
-	width: 250px
+	width: 320px
 	overflow: hidden
 	+box-shadow(0 8px 33px rgba(#000, .3))
 
@@ -122,22 +122,41 @@
 ul.userMenu-search-profiles
 	width: 100%
 	padding: 0
-	background: $bloc-light-color
+	
 	
 	li
 		float: none
 		display: block
 		margin: 0
 		@extend .clear-fix
+		cursor: pointer
+		background: $bloc-light-color
 		border-bottom: 1px solid $main-background-color
-	.mini-profile-name
+		&:hover 
-		font-size: 12px
+			background: white
-		display: block
+
-		margin: 0
+		a
-		padding: 0
+			display: block 
+			width: 100%
+			font-size: 12px
+			font-weight: 400
+			line-height: $mini-usr-img
+			display: block
+			margin: 0
+			padding: 0
+			color: $defaut-font-color
+			span, b 
+				display: inline-block
+				color: $defaut-font-color
+				font-weight: 400
+				font-size: 12px
+
+	.mini-screen-name b,  
+	.mini-screen-name
+		font-weight: 500
 	.mini-profile-photo
-		width: 30px
+		width: $mini-usr-img
-		height: 30px
+		height: auto
 		margin: 10px
 		float: left
 	.mini-profile-info
@@ -145,15 +164,18 @@ ul.userMenu-search-profiles
 		float: none
 
 	button
-		padding: 3px 5px
+		font-size: 1.4rem
+		line-height: $mini-usr-img - 15
+		height: $mini-usr-img - 10
+		width: $mini-usr-img
+		text-align: center
+		font-weight: 500
+		padding: 0
 		+border-radius(2px)
 		@extend .extend-icon
-		&:after
+
-			content: ''
-			font-family: $symbol-font-family
-			font-size: 1.1rem
 		position: absolute
-		bottom: 10px
+		top: 10px 
 		right: 10px
 
 
@@ -161,7 +183,7 @@ ul.userMenu-search-profiles
 .userMenu-search input[type="text"]
 	float: right
 	padding: 3px 10px
-	margin: 9px 20px 0 0
+	margin: 10px 20px 0 0
 	border: none
 	background: $bloc-background-color
 	box-sizing: border-box
@@ -271,16 +293,12 @@ ul.userMenu-search-profiles
 
 
 .mini-profile-photo
-	width: 70px
+	width: $usr-img
-	height: 70px
+	height: auto
-	overflow: hidden
-	+border-radius(50%)
 	display: block
 	margin: auto
 	img
-		min-width: 100%
+		width: 100%
-		min-height: 100%
-		border-radius: (50%)
 
 
 
@@ -356,7 +374,7 @@ ul.userMenu-search-profiles
 		-moz-transition: height 0.3s linear
 		-o-transition: height 0.3s linear
 		-ms-transition: height 0.3s linear
-		height: 48px
+		height: $mini-usr-img
 		border: none
 		background: rgba(255, 255, 255, 1)
 		border: 1px solid rgba(0, 0, 0, 0.1)
@@ -367,14 +385,18 @@ ul.userMenu-search-profiles
 
 #postboard-top
 	clear: both
-	position: relative
+	position: fixed 
+	top: $menu-height
+	width: 30%
 	@extend .clear-fix
 	margin-bottom: 1px
+	left: 0
 	transition: height .3s linear
 	padding: 10px 10px 5px 10px
 	background: white
 	overflow: hidden
 	display: none
+	z-index: 120
 	&.hide
 		display: none!important
 	&.show
@@ -384,9 +406,7 @@ ul.userMenu-search-profiles
 		position: absolute
 		top: 10px
 		left: 10px
-		width: 48px
+		width: $mini-usr-img
-		height: 48px
-		overflow: hidden
 		img
 			width: 100%
 	.post-area
@@ -497,8 +517,7 @@ img.twister-user-photo
 	float: left
 	display: block
 	float: left
-
+	width: $mini-usr-img
-	width: 48px
 	height: auto
 	margin: 0 10px
 	background: $main-background-color