diff --git a/README.md b/README.md index 9fbf780..e567296 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,14 @@ Theme Nin v2 for twister-html ============================= -Nin is a clean and flat theme for [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on [twister-html](https://github.com/miguelfreitas/twister-html) +Nin is a clean and flat theme [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on the html client [twister-html](https://github.com/miguelfreitas/twister-html) +This is experimental by now. +Maproad + + +-- cleaning sass +-- + diff --git a/css/fonts/OpenSans-Bold.ttf b/css/fonts/OpenSans-Bold.ttf deleted file mode 120000 index 1d555bc..0000000 --- a/css/fonts/OpenSans-Bold.ttf +++ /dev/null @@ -1 +0,0 @@ -../../../css/OpenSans-Bold.ttf \ No newline at end of file diff --git a/css/fonts/OpenSans-Regular.ttf b/css/fonts/OpenSans-Regular.ttf deleted file mode 120000 index 40aabc0..0000000 --- a/css/fonts/OpenSans-Regular.ttf +++ /dev/null @@ -1 +0,0 @@ -../../../css/OpenSans-Regular.ttf \ No newline at end of file diff --git a/css/fonts/Symbola.ttf b/css/fonts/Symbola.ttf deleted file mode 120000 index c60fea3..0000000 --- a/css/fonts/Symbola.ttf +++ /dev/null @@ -1 +0,0 @@ -../../../css/Symbola.ttf \ No newline at end of file diff --git a/css/style.css b/css/style.css index 193bc4c..49740ac 100644 --- a/css/style.css +++ b/css/style.css @@ -51,7 +51,7 @@ font-weight: normal; font-style: normal; } -[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button: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, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after { +[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button: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, .icon-down-after:after { font-family: "fontello"; font-style: normal; font-weight: normal; @@ -102,7 +102,7 @@ } /* '' */ -.icon-cancel:before, .twister-user-remove:before, .modal-close:before { +.icon-cancel:before, .modal-close:before, .twister-user-remove:before { content: ""; } @@ -242,59 +242,59 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, display: block; } -.col, .postboard, .following, .following-list li, .network.singleBlock .module, .dashboard.left, .dashboard.right, .follow-suggestions li, .profile-data li, .twister-user { +.col, .following, .following-list li, .login .module, .network.singleBlock .module, .twister-user { float: left; - margin: 0 2% 0 0; + margin: 0 2.5% 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -.col.last, .last.postboard, .following, .following-list li.last, .following-list li.following, .following-list li:nth-child(4n), .following-list .network.singleBlock li.module:nth-child(4n), .network.singleBlock .following-list li.module:nth-child(4n), .network.singleBlock .last.module, .network.singleBlock .module.following, .network.singleBlock .module:last-child, .network.singleBlock .module.dashboard.right, .network.singleBlock .follow-suggestions li.module:nth-child(4n), .follow-suggestions .network.singleBlock li.module:nth-child(4n), .network.singleBlock .module.twister-user:nth-child(4n), .last.dashboard.left, .dashboard.left.following, .dashboard.right, .follow-suggestions li.last, .follow-suggestions li.following, .follow-suggestions li:nth-child(4n), .profile-data li.last, .profile-data li.following, .profile-data li:last-child, .last.twister-user, .twister-user:nth-child(4n) { +.col.last, .following, .following-list li.last, .following-list li.following, .following-list li:nth-child(4n), .following-list li.dashboard.right, .following-list .network.singleBlock li.module:nth-child(4n), .network.singleBlock .following-list li.module:nth-child(4n), .login .last.module, .login .module.following, .login .module.dashboard.right, .network.singleBlock .last.module, .network.singleBlock .module.following, .network.singleBlock .module:last-child, .network.singleBlock .module.dashboard.right, .network.singleBlock .module.twister-user:nth-child(4n), .col.dashboard.right, .dashboard.right.following, .dashboard.right.twister-user, .last.twister-user, .twister-user:nth-child(4n) { margin-right: 0; } .col-1 { - width: 6.5%; + width: 6.04167%; } .col-2 { - width: 15%; + width: 14.58333%; } -.col-3, .following-list li, .dashboard.left, .dashboard.right, .follow-suggestions li, .twister-user { - width: 23.5%; +.col-3, .following-list li, .twister-user { + width: 23.125%; } -.col-4, .dashboard.right, .profile-data li { - width: 32%; +.col-4 { + width: 31.66667%; } -.col-5, .postboard { - width: 40.5%; +.col-5 { + width: 40.20833%; } -.col-6, .network.singleBlock .module { - width: 49%; +.col-6, .login .module, .network.singleBlock .module { + width: 48.75%; } .col-7 { - width: 57.5%; + width: 57.29167%; } .col-8 { - width: 66%; + width: 65.83333%; } .col-9, .following { - width: 74.5%; + width: 74.375%; } .col-10 { - width: 83%; + width: 82.91667%; } .col-11 { - width: 91.5%; + width: 91.45833%; } .col-12 { @@ -302,27 +302,204 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } /* FONTS */ -.clear-fix:after, .col:after, .postboard:after, .following:after, .following-list li:after, .network.singleBlock .module:after, .dashboard.left:after, .dashboard.right:after, .follow-suggestions li:after, .profile-data li:after, .twister-user:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-bio .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow.module li:after, .who-to-follow ol:after, .twistday-reminder:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after { +* { + outline: none !important; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, body { + height: 100%; + min-height: 100%; + color: #444; + position: absolute; + width: 100%; +} + +html { + font-size: 15px; + background-color: #e9e9e9; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZTllOWU5Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlOWU5ZTkiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #aaaaaa), color-stop(25%, #e9e9e9), color-stop(50%, #e9e9e9), color-stop(75%, #e9e9e9), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(bottom, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); + background-image: -webkit-linear-gradient(bottom, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); + background-image: linear-gradient(to top right, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); + background-attachment: fixed; +} + +body { + font-size: 1rem; + line-height: 1.4rem; + font-family: "Roboto", sans-serif; + font-weight: 400; +} + +a { + text-decoration: none; + color: #B4C669; +} +a:hover, a:active { + color: #B4C669; + text-decoration: none; +} +a i { + text-decoration: underline; + font-style: normal; +} + +i, em { + font-style: italic; +} + +strong, b { + font-weight: 600; +} + +h1 { + font-size: 1.1em; + text-transform: uppercase; + letter-spacing: 0.07em; + font-weight: 700; + line-height: 1.1em; +} + +h2 { + font-size: 1.1em; + text-transform: uppercase; + letter-spacing: 0.07em; + font-weight: 400; + line-height: 1.1em; +} + +h3 { + font-size: 1.1em; + font-weight: 400; + line-height: 1.1em; +} + +br { + display: block; +} + +textarea, input { + background: white; + display: block; + border: none; +} + +/* isFollowing */ +.isFollowing:after { + color: #B4C669; + content: ""; + font-family: "fontello"; + padding-left: 2px; + display: inline; + font-size: 10px; + vertical-align: top; + line-height: 10px; +} +.isFollowing:after:hover { + text-decoration: none !important; +} +h3 .isFollowing:after { + display: none; +} + +.box-shadow, .modal-wrapper, .prompt-wrapper, .open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new, .dialog-modal, .mini-profile, .who-to-follow.module, .toptrends.module, .twistday-reminder, ul.dropdown-menu { + -moz-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); + -webkit-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); + box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); +} + +.clear-fix:after, .col:after, .following:after, .following-list li:after, .login .module:after, .network.singleBlock .module:after, .twister-user:after, .userMenu ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow.module li:after, .who-to-follow ol:after, .twistday-reminder:after { content: ""; display: table; clear: both; } +/************** BUTTONS *********** */ +button, .mini-profile-actions span, a.button { + padding: 0.6rem 1rem; + display: inline-block; + line-height: 0.75rem; + letter-spacing: 0.07rem; + font-size: 0.75rem; + position: relative; + z-index: 10; + font-weight: 300; + margin: 2px; + text-transform: uppercase; + -moz-transition-property: background, border-color; + -o-transition-property: background, border-color; + -webkit-transition-property: background, border-color; + transition-property: background, border-color; + -moz-transition-duration: 0.1s; + -o-transition-duration: 0.1s; + -webkit-transition-duration: 0.1s; + transition-duration: 0.1s; + color: #444; + background: #F8F8F8; + border: 1px solid #ebebeb; + font-family: "fontello", "Roboto", sans-serif; + cursor: pointer; +} +button:hover, .mini-profile-actions span:hover, a.button:hover { + border-color: #d2d2d2; +} +button.disabled, .mini-profile-actions span.disabled, a.button.disabled { + opacity: 0.5; + color: #999; + background-color: white; +} +button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disabled:hover { + color: #666; + -moz-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); + -webkit-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); + box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); +} +button.color-1, .modal-content button.postboard-news, .modal-content .mini-profile-actions span.postboard-news, .mini-profile-actions .modal-content span.postboard-news, button.follow, .mini-profile-actions span.follow, .mini-profile-actions span.color-1, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow { + background: #00AA8B; + border-color: #009076; + color: white; + font-weight: 500; +} +button.color-1:hover, .modal-content button.postboard-news:hover, .modal-content .mini-profile-actions span.postboard-news:hover, .mini-profile-actions .modal-content span.postboard-news:hover, button.follow:hover, .mini-profile-actions span.follow:hover, .mini-profile-actions span.color-1:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover { + border-color: #005d4c; +} +button.color-2, button.unfollow, .mini-profile-actions span.unfollow, .mini-profile-actions span.color-2, a.button.color-2, a.button.unfollow { + background: #C3C3C3; + border-color: #b6b6b6; + color: white; + font-weight: 500; +} +button.color-2:hover, button.unfollow:hover, .mini-profile-actions span.unfollow:hover, .mini-profile-actions span.color-2:hover, a.button.color-2:hover, a.button.unfollow:hover { + border-color: #9d9d9d; +} +button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .mini-profile-actions span, .mini-profile-actions .modal-wrapper.who-to-follow-modal span, .mini-profile-actions span.small, a.button.small { + padding: 0.3rem 0.5rem; + font-weight: 700; + font-size: 0.6rem; + line-height: 0.6rem; +} + .userMenu { width: 100%; position: fixed; + height: 50px; left: 0; margin: 0; - background: #596073; + background-color: #F5F5F5; z-index: 2; } .userMenu ul { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - width: 96%; - max-width: 100%; - margin: auto; + width: 100%; + max-width: 75%; + margin: 0; background: url('../img/logo.png?1437893891') no-repeat 50% 50%; background-size: 20px; } @@ -336,20 +513,19 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, line-height: 50px; padding: 0 0.5em; display: inline-block; - color: rgba(255, 255, 255, 0.7) !important; - font-size: 1.2em; + color: rgba(68, 68, 68, 0.7) !important; + font-size: 1em; position: relative; - font-weight: 400; + font-weight: 500; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .userMenu ul li > a:hover { - color: white !important; + color: #444 !important; } .userMenu ul li.current a { - color: white !important; - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); + color: #444 !important; } /* Menu specific entries */ @@ -389,7 +565,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, float: right; position: relative; margin-right: 0; - color: white; + color: #444; } .userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a { color: #596073; @@ -407,1187 +583,1436 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, border-color: #596073; } .userMenu li.userMenu-config > a { - font-size: 1.5em; + font-size: 1.5rem; } -/************************************* - ******************* PROFILE MODAL - ************************************** */ -.profile-modal .profile-data { - display: block; - margin: auto; - padding-top: 0; +/*********** POPUP MODAL ************* */ +.modal-wrapper { + background: white; + z-index: 3000; + width: 25%; + position: fixed; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 100%; + right: 0; + bottom: 0; + overflow: hidden; } -.profile-modal .profile-data li { - display: inline; - margin: 0 5px; - float: none; +.modal-wrapper .post-area-new { + padding: 10px; } -.profile-modal .profile-data li a { - display: inline; + +.modal-blackout { + background: transparent; + z-index: -1; + position: fixed; + left: 0; + top: 0; + width: 0; + height: 0; } -.profile-modal .profile-data li a span.posts-count, .profile-modal .profile-data li a span.following-count, .profile-modal .profile-data li a span.followers-count { - display: inline-block; - padding-right: 5px; + +.modal-content { + background: #f3f3f3; + overflow-y: auto; } -.profile-modal .modal-content { - overflow: hidden; - padding: 0; - position: relative; +.modal-content .postboard-news { + position: absolute; + display: block; + right: 0; + z-index: 20; } -.profile-modal .modal-content #profile-posts { - padding: 0; +.modal-content h2 span { + display: none; } -.profile-modal .modal-content .postboard { - width: 100%; - height: 100%; + +.modal-header { position: relative; + background: #00AA8B; + height: 50px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border-bottom: 1px solid #f3f3f3; } -.profile-modal .modal-content .postboard-posts { - display: block; - height: 100%; - overflow-y: auto; +.modal-header h3 { + padding-left: 20px; + line-height: 50px; + font-weight: 500; + font-size: 1rem; + color: white; } -.profile-modal .modal-content .postboard-posts .post { - padding: 0; - margin-bottom: 1px; + +.modal-close { + position: absolute; + right: 10px; + top: 0; + font-size: 14px; + line-height: 50px; + cursor: pointer; + color: rgba(255, 255, 255, 0.7); } -.profile-modal .modal-content .post-interactions { - margin: 2px 10px 3px 60px; +.modal-close:hover { + color: white; } -.profile-modal .modal-content .profile-card { - margin: 0; - padding: 0; +.modal-close b { + display: none; } -.profile-modal h2.profile-screen-name { - display: block; - letter-spacing: 0; - text-transform: none; - color: #b3b5b7; - padding: 5px 0; - margin: 0; - font-size: 13px; - line-height: 13px; +.mark-all-as-read { + float: right; + cursor: pointer; + font-size: 1.3em; + line-height: 50px; + padding: 0 5px; + color: white; + transition: all 0.1s linear; + display: none; } -/* Profile card */ -.profile-card { - width: 100%; - background: white; - border-bottom: 1px solid #f3f3f3; - padding: 15px; +.modal-back:hover, .mark-all-as-read:hover { + color: white; } -.profile-card-main { - position: relative; - text-align: center; - word-wrap: break-word; - transition: all 0.2s linear; - background: none !important; - padding: 10px; +.modal-back { + position: absolute; + right: 35px; + top: 0; + font-size: 14px; + line-height: 50px; + cursor: pointer; + color: rgba(255, 255, 255, 0.7); } -.profile-card-main h1 { - font-size: 22px; - font-weight: bold; - display: inline-block; - padding-top: 10px; +.modal-back:hover { + color: white; } -.profile-card-main:before { - content: ""; - border: solid 0px #fff; - transition: all 0.2s linear; - position: absolute; - left: 1px; - top: 1px; - right: 1px; - bottom: 1px; - z-index: 0; +.modal-back b { + display: none; } -.profile-card-main * { + +/* MODAL */ +.modal-content { + width: 100%; +} +.modal-content .postboard { + padding: 0; + clear: none !important; position: relative; - z-index: 1; + width: 100%; + margin: auto; } - -.profile-card-photo { - height: 70px; - width: 70px; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - margin: 0 auto; +.modal-content .postboard h2 { display: block; } - -.profile-card-photo.forEdition { - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; - height: 75px; - margin: 0 auto; - display: block; - width: 75px; +.modal-content .post-text { + margin: 0 0 0 40px; } - -.profile-bio { - padding: 10px; - font-style: italic; - text-align: center; +.modal-content .post-photo { + width: 30px; + height: 30px; } -.profile-bio .direct-messages-with-user, .profile-bio .follow, .profile-bio .unfollow { - display: inline-block; - position: static; +.modal-content .post-photo img { + width: 100%; + height: 100%; } -.profile-bio .isFollowing:after { - font-size: 15px; - position: absolute; + +/*********** POPUP PROMPT ************ */ +.prompt-wrapper { + background: white; + z-index: 5; + position: fixed; + top: 50%; + left: 50%; + width: 600px; + margin-left: -300px; } -.profile-bio .unfollow { - background: #aaa; +.prompt-wrapper .modal-buttons { + padding: 10px; + text-align: right; } -.profile-bio .twister-user-info { - text-align: center; - width: 100%; - padding: 0; +.prompt-wrapper .modal-buttons button:last-child, .prompt-wrapper .modal-buttons .mini-profile-actions span:last-child, .mini-profile-actions .prompt-wrapper .modal-buttons span:last-child { + padding: 5px 20px; } -.profile-bio .follow { - background: #B4C669; + +/************ FOLLOWING-CONFIG MODAL ********* */ +.prompt-wrapper.following-config-modal { + margin-top: -100px; } -.profile-bio .known-followers { +.prompt-wrapper.following-config-modal .modal-content { + padding: 10px; text-align: center; - clear: both; - width: 100%; } - -#msngrswr { +.prompt-wrapper.following-config-modal .modal-buttons { display: none; - text-align: center; - margin: 10px 0; } - -.profile-extra-contact { - display: none; - margin: 0 15px 0 0; - font-weight: 500; - background: #f3f3f3; - padding: 2px 8px 3px 8px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; +.prompt-wrapper.following-config-modal h2 { + text-transform: none; } -.bitmessage-ctc, .tox-ctc { - font-size: 13px; - line-height: 15px; - cursor: pointer; - color: #596073; -} -.bitmessage-ctc:hover, .tox-ctc:hover { - color: #B4C669; +.following-config-method-buttons .public-following { + background-color: #B4C669; + margin: 0px 2px; + padding: 6px 16px; } -.bitmessage-ctc:after, .tox-ctc:after { - font-family: "fontello"; - content: ""; - font-style: normal; - font-weight: normal; - speak: none; - display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; - font-variant: normal; - text-transform: none; - line-height: 1em; +/************ RETWIST POSTS MODAL ********* */ +.prompt-wrapper.reTwist.prompt-wrapper { + margin-top: -110px; } - -.profile-modal .profile-tox, .profile-modal .profile-bitmessage { - display: inline-block; - margin-right: 5px; - font-size: 13px; +.prompt-wrapper.reTwist .modal-content { + padding: 20px 15px; } -.profile-modal .profile-tox:hover, .profile-modal .profile-bitmessage:hover { - color: #B4C669; +.prompt-wrapper.reTwist .modal-buttons .modal-propagate { + background-color: #B4C669; } - -.profile-modal .modal-buttons { +.prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions { display: none; - /* EDITION PROFILE */ } -.forEdition.profile-card { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: auto; - background: #f3f3f3; -} -.forEdition.profile-card .profile-card-main { - margin: 0; - width: 330px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 10px; - background: #f3f3f3; +/********* REPLY POSTS MODAL************** */ +.prompt-wrapper.reply.prompt-wrapper { + margin-top: -110px; } -.forEdition.profile-card .profile-card-main input { - display: block; - margin: 5px auto; - background: white; - border: 1px solid #e7e8e9; - padding: 6px 4px; - margin-bottom: 4px; - text-align: center; - transition: all 0.2s linear; +.prompt-wrapper.reply .modal-buttons, .prompt-wrapper.reply .post-expand, .prompt-wrapper.reply .post-interactions { + display: none; } -.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus { - background: white; - border-color: #aaa; +.prompt-wrapper.reply .post-area { + padding-bottom: 6px; } -.input-description { - width: 90%; +/****** DIRECT MESSAGES MODAL********* */ +.modal-wrapper.directMessages .post-area-new { + display: none; + z-index: 5; + background: #e9e9e9; + position: absolute; + bottom: 0; + width: 100%; + padding: 0 !important; } - -.input-name { - font-size: 20px; +.modal-wrapper.directMessages .post-area-new .modal-header h3 span { + display: inline !important; } - -.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city { - display: inline-block; +.modal-wrapper.directMessages .modal-content { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; } -.forEdition .profile-card-main .input-tox, .forEdition .profile-card-main .input-bitmessage { - width: 90%; - margin-top: 10px; +.modal-wrapper.directMessages .post-photo { + height: 48px; + width: 48px; } -.forEdition .profile-card-main h2 { - text-transform: none; - font-weight: 700; +.modal-wrapper.directMessages .post-text { + margin-left: 58px; font-size: 0.9em; } - -.profile-edition-buttons { - text-align: right; +.modal-wrapper.directMessages .post-info-name { + float: none; } - -.selectable_theme.theme_calm { +.modal-wrapper.directMessages .post-info-tag { + line-height: 1em; + padding: 0; + display: inline; + font-size: 80%; + margin: 0 0 0 1em; +} +.modal-wrapper.directMessages .post-info-sent { + position: absolute; + left: 50%; + top: 10px; display: none; } -/************* POST BOARD ************ */ -.postboard .postboard-posts { - position: relative; - z-index: 1; - clear: both; +.direct-messages-list .post { + padding: 20px; + cursor: pointer; } -.postboard .postboard-news { +.direct-messages-list .post:after { + content: ""; + font-family: "fontello"; + position: absolute; + right: 5px; + top: 50%; + font-size: 1.1em; + margin: -6px 0 0 0; + color: rgba(0, 0, 0, 0.4); display: none; } -.modal-content .postboard .postboard-news { - line-height: 30px; - position: absolute; - right: 0; - top: 40px; - font-weight: 900; - display: block; - padding: 0 20px; - color: white; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); - background: #B4C669; + +.direct-messages-list .post:hover:after { display: block; } -.postboard .post { - background: white; - box-sizing: border-box; - position: relative; - margin-bottom: 1px; - transition: margin 0.4s ease-out; - -moz-transition: margin 0.4s ease-out; + +.direct-messages-thread { + padding-bottom: 150px; } -.postboard .post .post, .postboard .post .original.post, .postboard .post .post.open, .postboard .post .mini-profile .post.post-area-new, .mini-profile .postboard .post .post.post-area-new, .postboard .post #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .postboard .post .post.post-area-new { +.direct-messages-thread .post { + background: none; + left: 0; + margin: 0px 10px 20px 10px; + cursor: default; +} +.direct-messages-thread .post .post-info-time { + float: none; + display: block; + text-align: center; + font-size: 10px; + margin: 10px 0; + cursor: default; +} +.direct-messages-thread .post .post-info-time:hover { + color: #aaa; +} +.direct-messages-thread .post .post-text:after, .direct-messages-thread .post .post-text:nth-child(2n):after { + content: ""; + width: 1px; + background: transparent; + position: absolute; + top: 10px; + white-space: normal; +} +.direct-messages-thread .post .post-text:after { + border-top: solid 7px transparent; + border-bottom: solid 7px transparent; + border-right: solid 7px white; + left: -7px; +} +.direct-messages-thread .post .post-text { background: white; + margin-right: 60px; + margin-left: 60px; position: relative; + display: inline-block; + max-width: 300px; + font-size: 0.9em; + padding: 5px 10px; + z-index: 4; + float: left; + word-wrap: break-word; + max-width: 60%; + min-height: 15px; } - -.module.open .post, .mini-profile .module.post-area-new .post, #postboard-top .post-area .module.post-area-new .post { - color: #414244; +.direct-messages-thread .post .post-photo { + position: absolute; + left: 0; + top: 10px; } - -.post:hover { - color: #414244; +.direct-messages-thread .post.sent .post-text:after { + border-top: solid 7px transparent; + border-bottom: solid 7px transparent; + border-right: none; + border-left: solid 7px white; + right: -7px; + left: auto; } - -.post-data { - padding: 15px; +.direct-messages-thread .post.sent .post-text { + float: right; } - -.post.open .original, .mini-profile .post.post-area-new .original, #postboard-top .post-area .post.post-area-new .original, .post.open .related, .mini-profile .post.post-area-new .related, #postboard-top .post-area .post.post-area-new .related { - margin-bottom: 1px; +.direct-messages-thread .post.sent .post-photo { + position: absolute; + right: 0; + left: auto; } -.postboard-posts > .post { - -moz-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); - -webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); - box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); +/********* NEW USER MODAL************* */ +.modal-wrapper.new-user .modal-content { + padding: 25px; } -.postboard-posts > .post.open, .mini-profile .postboard-posts > .post.post-area-new, #postboard-top .post-area .postboard-posts > .post.post-area-new { - margin-top: 20px; - margin-bottom: 20px; +.modal-wrapper.new-user .modal-close { + display: none; } -.postboard-posts > .post:after { - content: ""; - position: absolute; - right: 0; - top: 0; - width: 0; - height: 100%; - transition: all 0.2s linear; +.modal-wrapper.new-user .text { + margin: 0 0 15px 0; } -.postboard-posts > .post.open:after, .mini-profile .postboard-posts > .post.post-area-new:after, #postboard-top .post-area .postboard-posts > .post.post-area-new:after { - width: 5px; +.modal-wrapper.new-user .emphasis { + text-align: center; } - -.post:hover { - cursor: pointer; +.modal-wrapper.new-user .secret-key { + display: block; + margin-top: 8px; + color: black; + font-weight: bold; + font-size: 110%; } -.open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new { - background: none; +/******** HASHTAG MODAL********** */ +.modal-wrapper.hashtag-modal .postboard { + padding: 0; } -.open:hover, .mini-profile .post-area-new:hover, #postboard-top .post-area .post-area-new:hover { - background: none; + +/****** CONVERSATION MODAL********** */ +.modal-wrapper.conversation-modal .postboard { + padding: 0; } -.post-photo { - margin: 0; - display: inline-block; - float: left; - vertical-align: middle; - width: 48px; - height: 48px; - overflow: hidden; +/****** FOLLOWING MODAL****** */ +.modal-wrapper.following-modal .modal-content { + padding: 0; } -.post-photo img { - width: 100%; - height: 100%; +.modal-wrapper.following-modal ol { + margin: 5px; } - -.post-info-name { - font-weight: 700; - font-size: 1em; - line-height: 14px; - color: inherit; +.modal-wrapper.following-modal .open-profile-modal:hover { text-decoration: none; - display: inline-block; - padding-left: 10px; - float: left; +} +.modal-wrapper.following-modal .postboard h2 { + display: none; } -.post-info-name:hover { +/******* WHO TO FOLLOW MODAL****** */ +.modal-wrapper.who-to-follow-modal .modal-content { + padding: 15px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.modal-wrapper.who-to-follow-modal ol { + margin: 5px; +} +.modal-wrapper.who-to-follow-modal .open-profile-modal:hover { text-decoration: none; - color: black; } - -.post-info-tag { - font-size: 12px; - opacity: 0.6; - margin-top: 4px; - display: inline-block; +.modal-wrapper.who-to-follow-modal .twister-user { + position: relative; + padding: 5px; } - -.post-info-time { +.modal-wrapper.who-to-follow-modal .twister-user-info { + text-align: left; + font-size: 0.8rem; + line-height: 1rem; + width: 80%; +} +.modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .mini-profile-actions span, .mini-profile-actions .modal-wrapper.who-to-follow-modal span { position: absolute; - font-size: 11px; - line-height: 14px; - text-decoration: none; - top: 11px; - right: 11px; - color: #b3b5b7; + right: 0; + top: 5%; } -.post-info-time:hover { - color: #727578; +.modal-wrapper.who-to-follow-modal .bio { + color: rgba(0, 0, 0, 0.6); + font-style: italic; + padding: 0.5rem; } -.post-text { - margin: 0 0 0 68px; - word-wrap: break-word; - min-height: 30px; +/************************************* + ******************* PROFILE MODAL + ************************************** */ +.profile-modal .modal-content { + overflow: hidden; padding: 0; + position: relative; } -.post-text samp { - background: #eee; +.profile-modal .modal-content #profile-posts { + padding: 0; } - -.post-context { - font-size: 11px; - line-height: 11px; - margin: 0 0 1em 0; - color: #b3b5b7; +.profile-modal .modal-content .postboard { + width: 100%; + height: 100%; + position: relative; } -.post-context span:before { +.profile-modal .modal-content .postboard-posts { display: block; - float: left; - background: #B4C669; - text-align: center; - padding: 1px 2px 2px 2px; - line-height: 9px; - font-size: 9px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - color: white; - margin-right: 0.4em; + height: 100%; + overflow-y: auto; +} +.profile-modal .modal-content .postboard-posts .post { + padding: 0; + margin-bottom: 1px; +} +.profile-modal .modal-content .post-interactions { + margin: 2px 10px 3px 60px; +} +.profile-modal .modal-content .profile-card { + margin: 0; + padding: 0; } -.mini-screen-name { +.profile-modal h2.profile-screen-name { + display: block; + letter-spacing: 0; + text-transform: none; + color: #919191; + padding: 5px 0; + margin: 0; font-size: 13px; - color: #66686B; + line-height: 13px; } -.post-retransmited-icon { - display: none; +/* Profile card */ +.profile-card { + width: 100%; + background: white; + border-bottom: 1px solid #f3f3f3; + padding: 15px; } -.post-interactions { - margin: 10px 0 3px 0; - text-align: right; - height: 12px; - line-height: 12px; -} -.post-interactions span { - color: #b3b5b7; - cursor: pointer; - font-size: 12px; - line-height: 12px; +.profile-card-main { + position: relative; + text-align: center; + word-wrap: break-word; + transition: all 0.2s linear; + background: none !important; + padding: 10px; } - -.post-expand { - color: #b3b5b7; - cursor: pointer; - font-size: 12px; +.profile-card-main:before { + content: ""; + border: solid 0px #fff; + transition: all 0.2s linear; position: absolute; - left: 10px; - bottom: 10px; + left: 1px; + top: 1px; + right: 1px; + bottom: 1px; + z-index: 0; } -.post-expand:hover { - color: #727578; +.profile-card-main * { + position: relative; + z-index: 1; } -.post-favorite { - display: none !important; +.profile-card-photo { + height: 70px; + width: 70px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + margin: 0 auto; + display: block; } -.post .show-more { - display: inline-block; - float: right; - font-size: 12px; - color: #b3b5b7; +.profile-card-photo.forEdition { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + height: 75px; + margin: 0 auto; + display: block; + width: 75px; } -.post .show-more:hover { - color: #727578; + +.profile-bio { + padding: 10px; + font-style: italic; + text-align: center; + font-size: 0.8em; } -.expanded-content.show-pic { - display: block; +.profile-card-buttons { + text-align: center; + padding: 0 0 1rem 0; } -.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite { - color: #b3b5b7; +.isFollowing:after { + font-size: 15px; + position: absolute; } -.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover { - color: #727578; + +.twister-user-info { + text-align: center; + width: 100%; + padding: 0; } -.related .post-expand { - display: none; - margin: 0; +.known-followers { + text-align: center; + clear: both; + width: 100%; } -.post-reply, .post-propagate, .post-favorite { - padding-left: 10px; +#msngrswr { display: none; + text-align: center; + margin: 10px 0; } -.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite { - display: inline-block; +.profile-extra-contact { + display: none; + margin: 0 15px 0 0; + font-weight: 500; + background: #f3f3f3; + padding: 2px 8px 3px 8px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; } -.open .related .post-reply, .mini-profile .post-area-new .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .open .related .post-propagate, .mini-profile .post-area-new .related .post-propagate, #postboard-top .post-area .post-area-new .related .post-propagate, .open .related .post-favorite, .mini-profile .post-area-new .related .post-favorite, #postboard-top .post-area .post-area-new .related .post-favorite { - display: none !important; +.bitmessage-ctc, .tox-ctc { + font-size: 13px; + line-height: 15px; + cursor: pointer; + color: #596073; } -.open .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .open .related:hover .post-propagate, .mini-profile .post-area-new .related:hover .post-propagate, #postboard-top .post-area .post-area-new .related:hover .post-propagate { - display: inline-block !important; +.bitmessage-ctc:hover, .tox-ctc:hover { + color: #B4C669; } -.post-reply:hover, .post-propagate:hover, .post-favorite:hover { - color: #727578; +.bitmessage-ctc:after, .tox-ctc:after { + font-family: "fontello"; + content: ""; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; } -.expanded-content { +.profile-modal .profile-tox, .profile-modal .profile-bitmessage { + display: inline-block; + margin-right: 5px; + font-size: 13px; +} +.profile-modal .profile-tox:hover, .profile-modal .profile-bitmessage:hover { + color: #B4C669; +} + +.profile-modal .modal-buttons { display: none; - padding: 5px 5px 0 5px; + /* EDITION PROFILE */ } -.image-preview { - width: 100%; +.forEdition.profile-card { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: auto; + background: #f3f3f3; +} +.forEdition.profile-card .profile-card-main { + margin: 0; + width: 330px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 10px; + background: #f3f3f3; +} +.forEdition.profile-card .profile-card-main input { display: block; - margin: auto; + margin: 5px auto; + background: white; + border: 1px solid #c4c4c4; + padding: 6px 4px; + margin-bottom: 4px; + text-align: center; + transition: all 0.2s linear; +} +.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus { + background: white; + border-color: #aaa; } -.preview-container { - max-height: 500px; - width: 100%; - text-align: center; - overflow-y: auto; - background: black; +.input-description { + width: 90%; } -.post-stats { - float: left; +.input-name { + font-size: 20px; } -.post-stats li { + +.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city { display: inline-block; } -.post-stats li.stat-count { +.forEdition .profile-card-main .input-tox, .forEdition .profile-card-main .input-bitmessage { + width: 90%; + margin-top: 10px; +} +.forEdition .profile-card-main h2 { + text-transform: none; font-weight: 700; - font-size: 11px; + font-size: 0.9em; +} + +.profile-edition-buttons { + text-align: right; +} + +.selectable_theme.theme_calm { + display: none; +} + +/************* POST BOARD ************ */ +.postboard { float: left; - line-height: 20px; - color: llighten(#66686B, 30%); + width: 50%; + padding: 20px; } -.post-stats li.stat-count span:last-child { - padding-right: 5px; +.postboard h2 { + display: none; } -.post-stats a { +.postboard .postboard-posts { position: relative; - text-decoration: none; - display: inline-block; - width: 20px; - height: 20px; - margin: 0 1px 0 0; -} -.post-stats a img { - width: 20px; - height: 20px; + z-index: 1; + clear: both; } - -.user-name-tooltip { +.postboard .postboard-news { display: none; - position: absolute; - background: #60677c; - font-size: 12px; - white-space: nowrap; - padding: 3px 5px; - color: #fff; - top: -42px; - left: 0px; } -.user-name-tooltip:after { - content: ""; - position: absolute; - width: 0; - left: 4px; - bottom: -5px; - border-top: solid 5px #60677c; - border-left: solid 5px transparent; - border-right: solid 5px transparent; +.postboard .post { + background: white; + position: relative; + margin-bottom: 1px; + -moz-transition-property: margin; + -o-transition-property: margin; + -webkit-transition-property: margin; + transition-property: margin; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.postboard .post .post, .postboard .post .original.post, .postboard .post .post.open, .postboard .post .mini-profile .post.post-area-new, .mini-profile .postboard .post .post.post-area-new, .postboard .post #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .postboard .post .post.post-area-new { + position: relative; } -.post-stats a:hover .user-name-tooltip { - display: inline-block; +.module.open .post, .mini-profile .module.post-area-new .post, #postboard-top .post-area .module.post-area-new .post { + color: #1e1e1e; } -.post-replies .sub-replies { - border-left: solid 3px #B4C669; - margin-left: 1px; +.post:hover { + color: #1e1e1e; } -/* MODAL */ -.modal-content { - width: 100%; +.post-data { + padding: 1rem; } -.modal-content .postboard { - padding: 0; - clear: none !important; - position: relative; - width: 100%; - margin: auto; -} -.modal-content .post-text { - margin: 0 0 0 40px; + +.post.open .original, .mini-profile .post.post-area-new .original, #postboard-top .post-area .post.post-area-new .original, .post.open .related, .mini-profile .post.post-area-new .related, #postboard-top .post-area .post.post-area-new .related { + margin-bottom: 1px; } -.modal-content .post-photo { - width: 30px; - height: 30px; + +.postboard-posts > .post.open, .mini-profile .postboard-posts > .post.post-area-new, #postboard-top .post-area .postboard-posts > .post.post-area-new { + margin-top: 1rem; + margin-bottom: 1rem; } -.modal-content .post-photo img { - width: 100%; +.postboard-posts > .post:after { + content: ""; + position: absolute; + right: 0; + top: 0; + width: 0; height: 100%; + transition: all 0.2s linear; } - -.following-list li { - text-align: center; - margin-bottom: 2%; - padding: 50px 0; +.postboard-posts > .post.open:after, .mini-profile .postboard-posts > .post.post-area-new:after, #postboard-top .post-area .postboard-posts > .post.post-area-new:after { + width: 5px; } -.following .mini-profile { - margin-bottom: 10px; +.post:hover { + cursor: pointer; } -.following .mini-profile-info { - position: relative; +.open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new { + background: none; +} +.open:hover, .mini-profile .post-area-new:hover, #postboard-top .post-area .post-area-new:hover { + background: none; } -.following .mini-profile-photo { - margin: 0 auto 10px auto; - display: block; - width: 64px; - height: 64px; +.post-photo { + margin: 0; + display: inline-block; + float: left; + vertical-align: middle; + width: 48px; + height: 48px; overflow: hidden; - background: #e9e9e9; } - -.following .mini-profile-view { - display: inline; - color: rgba(0, 0, 0, 0.5); - font-size: 12px; - position: absolute; - top: 32px; - left: 65px; - z-index: 1; +.post-photo img { + width: 100%; + height: 100%; } -.following .mini-profile-name { - font-weight: 900; - font-size: 1em; - line-height: 1em; - padding: 0; - text-decoration: none; - display: block; +.post-info-name { + font-weight: 600; color: inherit; - display: inline; + text-decoration: none; + display: inline-block; + float: left; + margin-left: 10px; } -.following .mini-screen-name { - color: inherit; - display: block; - margin-bottom: 10px; +.post-info-name:hover { + text-decoration: none; + color: black; } -.following button, .following .mini-profile-actions span, .mini-profile-actions .following span { +.post-info-tag { + font-size: 12px; + opacity: 0.6; + margin-top: 4px; display: inline-block; - margin: 5px 0; -} -.following button.unfollow, .following .mini-profile-actions span.unfollow, .mini-profile-actions .following span.unfollow { - background-color: #aaa; -} -.following button.public-following, .following .mini-profile-actions span.public-following, .mini-profile-actions .following span.public-following { - background-color: #B4C669; } -.mini-profile-actions { +.post-info-time { position: absolute; - width: auto; - top: 0; - right: -16px; - display: inline-block; + font-size: 11px; + line-height: 14px; + text-decoration: none; + top: 11px; + right: 11px; + color: #919191; } -.mini-profile-actions span { - cursor: pointer !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; +.post-info-time:hover { + color: #515151; } -.mini-profile-actions span:before { - margin: 0; + +.post-text { + margin: 0 0 0 58px; + word-wrap: break-word; + min-height: 48px; padding: 0; - line-height: 1em; - font-size: 10px; } -.mini-profile-actions ul { - height: 0; - overflow: hidden; - position: absolute; - top: 2em; - right: -2em; - transition: height 0.4s linear; - transition: padding-top 0.1s linear; - background: #596073; - z-index: 3; +.post-text samp { + background: #f3f3f3; + font-size: 0.9rem; + line-height: 0.9rem; + display: inline-block; + padding: 5px 8px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + color: #333; + font-weight: 500; + font-family: monospace; } -.mini-profile-actions:hover ul { - padding: 8px; - height: 112px; + +.post-context { + font-size: 11px; + line-height: 11px; + margin: 0 0 1em 0; + color: #919191; } -.mini-profile-actions ul li { - text-align: left; - margin: 0; - background: #596073; - white-space: nowrap; - color: #aaa; - font-size: 12px; - line-height: 12px; - cursor: pointer; +.post-context:before { display: block; - float: none; - width: auto; - padding: 8px; + float: left; + background: #B4C669; + text-align: center; + padding: 1px 2px 2px 2px; + line-height: 9px; + font-size: 9px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + color: white; + margin-right: 0.4em; } -.mini-profile-actions:hover ul li:hover { - color: #B4C669; + +.mini-screen-name { + font-size: 13px; + color: #444; } -.following .who-follow { - height: auto; - background-color: rgba(69, 71, 77, 0.1); - overflow: hidden; - font-size: 12px; +.post-retransmited-icon { + display: none; } -.following .show-more-followers { - color: #f11; - font-weight: bold; +.post-interactions { + margin: 10px 0 3px 0; + text-align: right; + height: 12px; + line-height: 12px; +} +.post-interactions span { + color: #919191; cursor: pointer; - float: right; + font-size: 12px; + line-height: 12px; } -.following .mini-follower-link { - display: inline-block; - margin-right: 10px; +.post-expand { + color: #919191; + cursor: pointer; + font-size: 12px; + position: absolute; + left: 10px; + bottom: 10px; } -.following .mini-follower-link:before { - content: " ‧"; +.post-expand:hover { + color: #515151; } -.following a.open-profile-modal { - display: inline; - text-align: center; - color: #66686B; +.post-reply, .post-propagate, .post-favorite { + padding-left: 10px; + display: none; } -.following a.open-profile-modal:hover { - color: #aaa; +.post-reply:hover, .post-propagate:hover, .post-favorite:hover { + color: #515151; } -.following .post-area-new { - padding-bottom: 4px; -} -.following .post-area-new textarea { - resize: none; - width: 445px; - display: block; - transition: all 0.3s linear; - -webkit-transition: height 0.3s linear; - -moz-transition: height 0.3s linear; - -o-transition: height 0.3s linear; - -ms-transition: height 0.3s linear; - height: 28px; - border-radius: 3px; - border: solid 1px rgba(0, 0, 0, 0.3); - margin-left: 55px; - margin-bottom: 10px; - padding: 4px; - font-size: 13px; +.post-favorite { + display: none !important; } -.following .mini-profile .post-area-new { - padding: 9px; +.post .show-more { + display: inline-block; + float: right; + font-size: 12px; + color: #919191; } -.following .mini-profile .post-area-new textarea { - margin-left: 0; - width: 100%; +.post .show-more:hover { + color: #515151; } -.following .post-area-new.open textarea, .following .mini-profile .post-area-new textarea, .mini-profile .following .post-area-new textarea, .following #postboard-top .post-area .post-area-new textarea, #postboard-top .post-area .following .post-area-new textarea { - height: 80px; - border: solid 1px rgba(227, 79, 66, 0.5); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +.expanded-content.show-pic { + display: block; } -.following textarea.splited-post { - box-shadow: none !important; - height: 28px; -} - -.following .splited-post-counter { - color: rgba(0, 0, 0, 0.3); - font-weight: bold; +.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite { + color: #919191; } -.following .splited-post-counter:before { - content: "…"; +.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover { + color: #515151; } -.following .post-area-extras { - overflow: hidden; - height: 0; - text-align: right; +.related .post-expand { + display: none; + margin: 0; } -.following .post-submit { - background: #45474d; - color: rgba(255, 255, 255, 0.8); - border: none; - padding: 5px 10px; - cursor: pointer; +.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite { display: inline-block; - margin-top: 4px; -} - -.following .post-area-new.open > .post-area-extras, .following .mini-profile .post-area-new > .post-area-extras, .mini-profile .following .post-area-new > .post-area-extras, .following #postboard-top .post-area .post-area-new > .post-area-extras, #postboard-top .post-area .following .post-area-new > .post-area-extras { - height: 35px; - transition: all 0.6s linear; } -.following .post-area-remaining { - font-size: 13px; +.open .related .post-reply, .mini-profile .post-area-new .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .open .related .post-propagate, .mini-profile .post-area-new .related .post-propagate, #postboard-top .post-area .post-area-new .related .post-propagate, .open .related .post-favorite, .mini-profile .post-area-new .related .post-favorite, #postboard-top .post-area .post-area-new .related .post-favorite { + display: none !important; } -.following .post-area-remaining.warn { - color: #ff0000; +.open .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .open .related:hover .post-propagate, .mini-profile .post-area-new .related:hover .post-propagate, #postboard-top .post-area .post-area-new .related:hover .post-propagate { + display: inline-block !important; } -.following .post .show-more { - font-size: 13px; - font-weight: bold; - margin-left: 60px; - color: rgba(0, 0, 0, 0.5); -} -.following .post .show-more:before { - content: "💭"; +.expanded-content { + display: none; + padding: 5px 5px 0 5px; } -.swarm-status { - display: none !important; +.image-preview { + width: 100%; + display: block; + margin: auto; } -.mini-following-info { - width: 45px; - height: 45px; +.preview-container { + max-height: 500px; + width: 100%; text-align: center; - background: white; - margin: 1%; + overflow-y: auto; + background: black; +} + +.post-stats { float: left; } -.mini-following-info .mini-screen-name, .mini-following-info .mini-following-name { - display: none; +.post-stats li { + display: inline-block; } -.mini-following-info .mini-profile-photo { - height: 45px; - width: 45px; - border-radius: 0; +.post-stats li.stat-count { + font-weight: 700; + font-size: 11px; + float: left; + line-height: 20px; + color: llighten(#444, 30%); } - -.login .header-bold { - display: block; - width: 720px; - margin: 0px auto 12px auto; +.post-stats li.stat-count span:last-child { + padding-right: 5px; } - -.login .module { - display: block; - width: 720px; - padding: 32px 40px; - margin: 8px auto; - background: white; +.post-stats a { + position: relative; + text-decoration: none; + display: inline-block; + width: 20px; + height: 20px; + margin: 0 1px 0 0; } - -.login .module p { - margin-bottom: 5px; +.post-stats a img { + width: 20px; + height: 20px; } -.login .module input { - padding: 5px 10px; - background: #f3f3f3; - border: solid 1px #dcdcdc; - transition: box-shadow 0.3s, border 0.3s; - font-size: 14px; +.user-name-tooltip { + display: none; + position: absolute; + background: #60677c; + font-size: 12px; + white-space: nowrap; + padding: 3px 5px; + color: #fff; + top: -42px; + left: 0px; +} +.user-name-tooltip:after { + content: ""; + position: absolute; + width: 0; + left: 4px; + bottom: -5px; + border-top: solid 5px #60677c; + border-left: solid 5px transparent; + border-right: solid 5px transparent; } -.login .module input:focus, -.login .module select:focus { - background: white; - transition: background-color 100ms linear; - border-bottom: solid 2px #B4C669; +.post-stats a:hover .user-name-tooltip { + display: inline-block; } -.login .module select { - height: 30px; - padding: 3px 30px 3px 10px; - margin: 0; - border: 1px solid #ccc; - font-size: 14px; +.post-replies .sub-replies { + border-left: solid 3px #B4C669; + margin-left: 1px; } -.login .module span.availability { - margin-left: 10px; - color: #45474d; +.following-list li { + text-align: center; + margin-bottom: 2%; + padding: 50px 0; } -.with-nickname, .import-secret-key, .create-user { - margin-top: 10px; +.following .mini-profile { + margin-bottom: 10px; } -.login .module:nth-child(2) div, -.login .module:nth-child(3) div:nth-child(2), -.login .secret-key-import, -.login .username-import { - margin-top: 20px; - margin-bottom: 20px; - margin-left: 16px; +.following .mini-profile-info { + position: relative; } -.login .create-user, -.login .import-secret-key { +.following .mini-profile-photo { + margin: 0 auto 10px auto; display: block; - margin-left: auto; - margin-right: 16px; + width: 64px; + height: 64px; + overflow: hidden; + background: #e9e9e9; } -/********** LOGIN AND NETWORK PAGES ****** */ -.network.singleBlock ul { - padding-left: 20px; -} -.network.singleBlock ul li { - line-height: 36px; - font-size: 13px; -} -.network.singleBlock .module { - padding: 1.5%; - background: white; +.following .mini-profile-view { + display: inline; + color: rgba(0, 0, 0, 0.5); + font-size: 12px; + position: absolute; + top: 32px; + left: 65px; + z-index: 1; } -.network.singleBlock h2 { + +.following .mini-profile-name { + font-weight: 900; + font-size: 1em; + line-height: 1em; + padding: 0; + text-decoration: none; display: block; -} -.network.singleBlock h3 { - font-weight: 500; - text-transform: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - margin: 20px 0 10px 0; + color: inherit; + display: inline; } -.singleBlock .spam-msg { - resize: none; - width: 100%; +.following .mini-screen-name { + color: inherit; display: block; - border-radius: 3px; - padding: 4px; - font-size: 13px; - height: 80px; - border: solid 1px rgba(0, 0, 0, 0.1); - line-height: 20px; - position: relative; - margin-left: -20px; margin-bottom: 10px; } -.highlight { - background: white; - padding: 5px 8px; - line-height: 1.7; - display: inline-block; -} - -span.connection-status { - line-height: 1em; - font-weight: 500; - font-size: 1em; -} -span.connection-status:before { - content: ""; +.following button, .following .mini-profile-actions span, .mini-profile-actions .following span { display: inline-block; - height: 0.8em; - width: 0.8em; - margin-right: 0.8em; - background: #EF5D43; - color: white; + margin: 5px 0; } -span.connection-status.connected:before { - background: #B4C669; +.following button.unfollow, .following .mini-profile-actions span.unfollow, .mini-profile-actions .following span.unfollow { + background-color: #aaa; } - -.character-limit { - float: right; - margin-right: 18px; +.following button.public-following, .following .mini-profile-actions span.public-following, .mini-profile-actions .following span.public-following { + background-color: #B4C669; } -.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty { - color: #333; - font-weight: 700; +.mini-profile-actions { + position: absolute; + width: auto; + top: 0; + right: -16px; + display: inline-block; } - -* { - outline: none !important; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; +.mini-profile-actions span { + cursor: pointer !important; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; } - -li { - list-style: none; +.mini-profile-actions span:before { + margin: 0; + padding: 0; + line-height: 1em; + font-size: 10px; } - -html, body { - height: 100%; - min-height: 100%; - background: #e9e9e9; - color: #66686B; - font: 0.95em/1.3em "Roboto", sans-serif; - font-weight: 400; +.mini-profile-actions ul { + height: 0; + overflow: hidden; + position: absolute; + top: 2em; + right: -2em; + transition: height 0.4s linear; + transition: padding-top 0.1s linear; + background: #596073; + z-index: 3; } - -br { +.mini-profile-actions:hover ul { + padding: 8px; + height: 112px; +} +.mini-profile-actions ul li { + text-align: left; + margin: 0; + background: #596073; + white-space: nowrap; + color: #aaa; + font-size: 12px; + line-height: 12px; + cursor: pointer; display: block; + float: none; + width: auto; + padding: 8px; +} +.mini-profile-actions:hover ul li:hover { + color: #B4C669; } -img { - background: #e9e9e9; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; +.following .who-follow { + height: auto; + background-color: rgba(69, 71, 77, 0.1); + overflow: hidden; + font-size: 12px; } -a { - text-decoration: none; - color: #B4C669; +.following .show-more-followers { + color: #f11; + font-weight: bold; + cursor: pointer; + float: right; } -a:hover, a:active { - color: #B4C669; - text-decoration: none; + +.following .mini-follower-link { + display: inline-block; + margin-right: 10px; } -a:hover i, a:active i { - text-decoration: underline; +.following .mini-follower-link:before { + content: " ‧"; } -p { - padding: 5px 0; +.following a.open-profile-modal { + display: inline; + text-align: center; + color: #444; +} +.following a.open-profile-modal:hover { + color: #aaa; } -h2, h3 { - font-size: 1.1em; - text-transform: uppercase; - letter-spacing: 0.07em; - font-weight: 400; - line-height: 1.8em; +.following .post-area-new { + padding-bottom: 4px; +} +.following .post-area-new textarea { + resize: none; + width: 445px; + display: block; + transition: all 0.3s linear; + -webkit-transition: height 0.3s linear; + -moz-transition: height 0.3s linear; + -o-transition: height 0.3s linear; + -ms-transition: height 0.3s linear; + height: 28px; + border-radius: 3px; + border: solid 1px rgba(0, 0, 0, 0.3); + margin-left: 55px; margin-bottom: 10px; + padding: 4px; + font-size: 13px; } -h3 { - font-weight: 700; - font-size: 1em; +.following .mini-profile .post-area-new { + padding: 9px; +} +.following .mini-profile .post-area-new textarea { + margin-left: 0; + width: 100%; } -textarea, input[type=text] { - font: 0.95em/1.3em "Roboto", sans-serif; - font-weight: 400; +.following .post-area-new.open textarea, .following .mini-profile .post-area-new textarea, .mini-profile .following .post-area-new textarea, .following #postboard-top .post-area .post-area-new textarea, #postboard-top .post-area .following .post-area-new textarea { + height: 80px; + border: solid 1px rgba(227, 79, 66, 0.5); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } -/* isFollowing */ -.isFollowing:after { - color: #B4C669; - content: ""; - font-family: "fontello"; - padding-left: 2px; - display: inline; - font-size: 10px; - vertical-align: top; - line-height: 10px; +.following textarea.splited-post { + box-shadow: none !important; + height: 28px; } -.isFollowing:after:hover { - text-decoration: none !important; + +.following .splited-post-counter { + color: rgba(0, 0, 0, 0.3); + font-weight: bold; } -h3 .isFollowing:after { - display: none; +.following .splited-post-counter:before { + content: "…"; } -/************** BUTTONS *********** */ -button, .mini-profile-actions span, a.button { - padding: 6px 8px; - font-size: 13px; - display: inline-block; - line-height: 1em; - font-weight: 500; - margin: 0; - float: none; - text-shadow: 2px 2px 0 transparent; - -moz-transition-property: background; - -o-transition-property: background; - -webkit-transition-property: background; - transition-property: background; - -moz-transition-duration: 0.1s; - -o-transition-duration: 0.1s; - -webkit-transition-duration: 0.1s; - transition-duration: 0.1s; - color: white; - background-color: #6F8E97; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; +.following .post-area-extras { + overflow: hidden; + height: 0; + text-align: right; +} + +.following .post-submit { + background: #45474d; + color: rgba(255, 255, 255, 0.8); border: none; - font-family: "fontello", "Roboto"; + padding: 5px 10px; cursor: pointer; + display: inline-block; + margin-top: 4px; } -button:hover, .mini-profile-actions span:hover, a.button:hover { - background: #B4C669; - text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); + +.following .post-area-new.open > .post-area-extras, .following .mini-profile .post-area-new > .post-area-extras, .mini-profile .following .post-area-new > .post-area-extras, .following #postboard-top .post-area .post-area-new > .post-area-extras, #postboard-top .post-area .following .post-area-new > .post-area-extras { + height: 35px; + transition: all 0.6s linear; } -button.disabled, .mini-profile-actions span.disabled, a.button.disabled { - opacity: 0.5; - background-color: #999; + +.following .post-area-remaining { + font-size: 13px; } -button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disabled:hover { - color: white; +.following .post-area-remaining.warn { + color: #ff0000; } -.options { - position: relative; -} -.options button, .options .mini-profile-actions span, .mini-profile-actions .options span, .options input, .options select { +.following .post .show-more { font-size: 13px; + font-weight: bold; + margin-left: 60px; + color: rgba(0, 0, 0, 0.5); } -.options label { - cursor: pointer; -} -.options .label-h { - font-weight: 700; +.following .post .show-more:before { + content: "💭"; } -.options input[type=radio] { + +.swarm-status { display: none !important; - visibility: hidden; - opacity: 0; } -.options input[type='checkbox'] { - cursor: pointer; - vertical-align: sub; + +.mini-following-info { + width: 45px; + height: 45px; + text-align: center; + background: white; + margin: 1%; + float: left; } -.options input[type='range'] { - cursor: pointer; - vertical-align: -16px; +.mini-following-info .mini-screen-name, .mini-following-info .mini-following-name { + display: none; } -.options .container { - margin: 5px 0px 5px 12px; +.mini-following-info .mini-profile-photo { + height: 45px; + width: 45px; + border-radius: 0; } -.options .tab-content { + +.login .header-bold { + display: block; + width: 720px; + margin: 0px auto 12px auto; +} +.login .module { background: white; - position: relative; - padding: 20px; + padding: 1rem; } -.options .tab-content > div { - position: absolute; - top: 0; - left: 0; - height: auto; - width: 100%; - z-index: -1; - opacity: 0; - visibility: hidden; +.login .module p { + margin-bottom: 5px; } -.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users { - position: relative; - z-index: 10; - opacity: 1; - visibility: visible; +.login .module input { + padding: 5px 10px; + background: #f3f3f3; + border: solid 1px #dcdcdc; + transition: box-shadow 0.3s, border 0.3s; + font-size: 14px; } -.options label.tabs { - text-align: center; +.login .module input:focus, .login .module select:focus { + background: white; + transition: background-color 100ms linear; + border-bottom: solid 2px #B4C669; +} +.login .module select { + height: 30px; + padding: 3px 30px 3px 10px; + margin: 0; + border: 1px solid #ccc; + font-size: 14px; +} +.login .module span.availability { + margin-left: 10px; + color: #45474d; +} +.login .module:nth-child(2) div, +.login .module:nth-child(3) div:nth-child(2), +.login .secret-key-import, +.login .username-import { + margin-top: 20px; + margin-bottom: 20px; + margin-left: 16px; +} +.login .create-user, +.login .import-secret-key { + display: block; + margin-left: auto; + margin-right: 16px; +} +.login .with-nickname, .login .import-secret-key, .login .create-user { + margin-top: 10px; +} + +/********** LOGIN AND NETWORK PAGES ****** */ +.network.singleBlock ul { + line-height: 2rem; + padding: 2rem; +} +.network.singleBlock .module { + background: white; + -moz-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); + -webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); + box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); + margin-bottom: 50px; +} +.network.singleBlock .module:last-child h2 { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0YzY2OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #b4c669), color-stop(100%, #5e80a2)); + background-image: -moz-linear-gradient(left, #b4c669, #5e80a2); + background-image: -webkit-linear-gradient(left, #b4c669, #5e80a2); + background-image: linear-gradient(to right, #b4c669, #5e80a2); +} +.network .spam-msg { + resize: none; + width: 100%; + display: block; + padding: 1rem; + height: 180px; + border: solid 1px rgba(0, 0, 0, 0.1); + position: relative; + margin: 1rem 0; + font-family: "Roboto", sans-serif; +} +.network .highlight { + font-size: 1.2rem; + display: block; + margin: 1rem 0; +} +.network span.connection-status { + font-weight: 500; +} +.network span.connection-status:before { + content: ""; + display: inline-block; + height: 0.8em; + width: 0.8em; + margin-right: 0.8em; + background: #EF5D43; + color: white; +} +.network span.connection-status.connected:before { + background: #B4C669; +} +.network .character-limit { + float: right; + margin-right: 1rem; +} +.network .connections span, .network .known-peers, .network .dht-nodes, .network .blocks, .network .last-block-time, .network .mining-difficulty { + color: #B4C669; + font-weight: 700; + font-family: Arial; + font-size: 95%; +} +.network h2 { + font-weight: 400; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0YzY2OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #b4c669), color-stop(100%, #5e80a2)); + background-image: -moz-linear-gradient(right, #b4c669, #5e80a2); + background-image: -webkit-linear-gradient(right, #b4c669, #5e80a2); + background-image: linear-gradient(to left, #b4c669, #5e80a2); + padding: 1rem 2rem; + color: white; +} +.network h3 { + font-weight: 600; + margin-top: 2rem; + padding: 0 1.5rem; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} +.network h3:after { + display: block; + content: ""; + height: 1px; + width: 100%; + background: rgba(95, 129, 161, 0.5); + margin-top: 1rem; +} + +.options { + position: relative; +} +.options button, .options .mini-profile-actions span, .mini-profile-actions .options span, .options input, .options select { + font-size: 13px; +} +.options label { + cursor: pointer; +} +.options .label-h { + font-weight: 700; +} +.options input[type=radio] { + display: none !important; + visibility: hidden; + opacity: 0; +} +.options input[type='checkbox'] { + cursor: pointer; + vertical-align: sub; +} +.options input[type='range'] { + cursor: pointer; + vertical-align: -16px; +} +.options .container { + margin: 5px 0px 5px 12px; +} +.options .tab-content { + background: white; + position: relative; + padding: 20px; +} +.options .tab-content > div { + position: absolute; + top: 0; + left: 0; + height: auto; + width: 100%; + z-index: -1; + opacity: 0; + visibility: hidden; +} +.options input#tab_language:checked ~ .tab-content .language, .options input#t-2:checked ~ .tab-content .theme, .options input#t-3:checked ~ .tab-content .notifications, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .appearance, .options input#t-6:checked ~ .tab-content .users { + position: relative; + z-index: 10; + opacity: 1; + visibility: visible; +} +.options label.tabs { + text-align: center; width: auto; display: inline-block !important; margin: 0 5px 0 0; @@ -1630,21 +2055,22 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab /* Wrapper and blocks */ .wrapper { - width: 96%; + width: 100%; max-width: 100%; - margin: 0 auto; - padding-top: 70px; + margin: 0; + padding-top: 50px; position: relative; z-index: 1; min-height: 100%; } .dashboard.left, .dashboard.right { + float: left; + width: 25%; position: relative; } .dashboard.right { height: 0; - background: #ededed; } /********** CONFIG SUBMENU & SEARCH RESULTS *********** */ @@ -1656,8 +2082,6 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab right: -10px; width: 250px; overflow: hidden; - border-bottom: solid 2px #B4C669; - box-shadow: 8px 10px 15px 0px rgba(0, 0, 0, 0.3); } .userMenu-search .dialog-modal:after { @@ -1736,31 +2160,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- clear: both; } -.follow-suggestions button .follow .unfollow, .follow-suggestions .mini-profile-actions span .follow .unfollow, .mini-profile-actions .follow-suggestions span .follow .unfollow { - position: absolute; - bottom: 10px; - right: 10px; -} -.follow-suggestions button .follow .unfollow:hover, .follow-suggestions .mini-profile-actions span .follow .unfollow:hover, .mini-profile-actions .follow-suggestions span .follow .unfollow:hover { - background-color: #aaa; -} -.follow-suggestions button .follow, .follow-suggestions .mini-profile-actions span .follow, .mini-profile-actions .follow-suggestions span .follow { - background-color: #B4C669; -} -.follow-suggestions button .unfollow, .follow-suggestions .mini-profile-actions span .unfollow, .mini-profile-actions .follow-suggestions span .unfollow { - background-color: #596073; -} -.follow-suggestions li { - position: relative; - box-sizing: border-box; - background: white; - min-height: 100px; - margin-bottom: 20px; -} -.follow-suggestions li:nth-child(4n+1) { - clear: left; -} - /***************** MINI PROFILE ****************************** */ .mini-profile .mini-profile-info { position: relative; @@ -1779,6 +2178,9 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- background: #f3f3f3; } .mini-profile .post-area-new { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; padding: 0; margin: 0; } @@ -1801,7 +2203,7 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- border-top: 1px solid #e9e9e9; } .mini-profile-indicators li a { - color: #66686B; + color: #444; display: block; padding: 1em 0; } @@ -1835,7 +2237,7 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- } .mini-profile-name { - color: #66686B; + color: #444; font-size: 1.3em; font-weight: 700; padding: 10px 0; @@ -1869,16 +2271,12 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- background: white; } .profile-data li { - display: block; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.profile-data li.current a { - border-bottom: 3px solid #B4C669; + display: inline; + margin: 0 5px; + float: none; } .profile-data li a { - color: #66686B; + color: #444; display: inline-block; font-size: 13px; padding-bottom: 3px; @@ -1887,9 +2285,11 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- color: #aaa; } .profile-data li a span.posts-count, .profile-data li a span.following-count, .profile-data li a span.followers-count { - font-weight: 900; - display: block; - line-height: 15px; + display: inline-block; + padding-right: 5px; +} +.profile-data li a:last-child { + display: none; } .mini-profile-info a:hover { @@ -1916,7 +2316,7 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- display: block; cursor: pointer; float: right; - color: #66686B; + color: #444; } .mini-follower-link { @@ -1937,7 +2337,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- /***************** POST AREA ************** */ .post-area-new textarea { resize: none; - box-shadow: none !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -1956,7 +2355,7 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- margin: 5px 0; } .post-area-new textarea:focus { - border-bottom: solid 2px #B4C669; + border-bottom: solid 1px #B4C669; } #postboard-top { @@ -1997,8 +2396,13 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini- box-sizing: border-box; float: right; } +#postboard-top .post-area .post-area-new { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} #postboard-top .post-area .post-area-new textarea { - margin: 0 0 5px 0; + margin: 0 0 10px 0; } .post-area-new.open textarea, .mini-profile .post-area-new textarea, #postboard-top .post-area .post-area-new textarea { @@ -2036,28 +2440,6 @@ textarea.splited-post { color: #ff0000; } -/******* WHO TO FOLLOW MODAL****** */ -.modal-wrapper.who-to-follow-modal .modal-content { - padding: 15px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.modal-wrapper.who-to-follow-modal ol { - margin: 5px; -} -.modal-wrapper.who-to-follow-modal .open-profile-modal:hover { - text-decoration: none; -} -.modal-wrapper.who-to-follow-modal .twister-user { - position: relative; - padding: 5px; -} -.modal-wrapper.who-to-follow-modal .bio { - color: rgba(0, 0, 0, 0.6); - font-style: italic; -} - /******** WHO TO FOLLOW ******* */ .who-to-follow.module { margin-bottom: 20px; @@ -2099,14 +2481,6 @@ textarea.splited-post { min-height: auto; border-bottom: 1px solid #f3f3f3; } -.twister-user .twister-user-info { - width: 80%; -} -.twister-user button, .twister-user .mini-profile-actions span, .mini-profile-actions .twister-user span { - position: absolute; - right: 0; - top: 5%; -} img.twister-user-photo { -moz-border-radius: 50%; @@ -2125,7 +2499,7 @@ img.twister-user-photo { .followers { font-size: 12px; - color: #66686B; + color: #444; } .followers label, .followers a { display: inline-block; @@ -2253,355 +2627,6 @@ ol.toptrends-list a:hover { display: none; } -/*********** POPUP MODAL ************* */ -.modal-wrapper { - background: white; - z-index: 3000; - width: 100%; - position: absolute; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - height: 100%; - left: 0; - top: 0; - overflow: hidden; -} -.modal-wrapper .post-area-new { - padding: 10px; -} - -.modal-blackout { - background: transparent; - z-index: -1; - position: fixed; - left: 0; - top: 0; - width: 0; - height: 0; -} - -.modal-content { - background: #f3f3f3; - overflow-y: auto; -} -.modal-content .postboard h2 { - position: fixed; - z-index: 2; - margin-top: -60px; - margin-left: -60px; -} -.modal-content .postboard h2 span { - display: none; -} - -.modal-header { - position: relative; - background: #596073; - height: 40px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - border-bottom: 1px solid #f3f3f3; -} -.modal-header h3 { - padding-left: 20px; - color: white; - line-height: 40px; -} - -.modal-close { - position: absolute; - right: 10px; - top: 0; - font-size: 14px; - line-height: 40px; - cursor: pointer; - color: rgba(255, 255, 255, 0.7); -} -.modal-close:hover { - color: white; -} -.modal-close b { - display: none; -} - -.mark-all-as-read { - float: right; - cursor: pointer; - font-size: 1.3em; - line-height: 40px; - padding: 0 5px; - color: white; - transition: all 0.1s linear; - display: none; -} - -.modal-back:hover, .mark-all-as-read:hover { - color: white; -} - -.modal-back { - position: absolute; - right: 35px; - top: 0; - font-size: 14px; - line-height: 40px; - cursor: pointer; - color: rgba(255, 255, 255, 0.7); -} -.modal-back:hover { - color: white; -} -.modal-back b { - display: none; -} - -/*********** POPUP PROMPT ************ */ -.prompt-wrapper { - background: white; - z-index: 5; - position: fixed; - top: 50%; - left: 50%; - width: 600px; - margin-left: -300px; - box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); -} -.prompt-wrapper .modal-buttons { - padding: 10px; - text-align: right; -} -.prompt-wrapper .modal-buttons button:last-child, .prompt-wrapper .modal-buttons .mini-profile-actions span:last-child, .mini-profile-actions .prompt-wrapper .modal-buttons span:last-child { - padding: 5px 20px; -} - -/************ FOLLOWING-CONFIG MODAL ********* */ -.prompt-wrapper.following-config-modal { - margin-top: -100px; -} -.prompt-wrapper.following-config-modal .modal-content { - padding: 10px; - text-align: center; -} -.prompt-wrapper.following-config-modal .modal-buttons { - display: none; -} -.prompt-wrapper.following-config-modal h2 { - text-transform: none; -} - -.following-config-method-buttons .public-following { - background-color: #B4C669; - margin: 0px 2px; - padding: 6px 16px; -} - -/************ RETWIST POSTS MODAL ********* */ -.prompt-wrapper.reTwist.prompt-wrapper { - margin-top: -110px; -} -.prompt-wrapper.reTwist .modal-content { - padding: 20px 15px; -} -.prompt-wrapper.reTwist .modal-buttons .modal-propagate { - background-color: #B4C669; -} -.prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions { - display: none; -} - -/********* REPLY POSTS MODAL************** */ -.prompt-wrapper.reply.prompt-wrapper { - margin-top: -110px; -} -.prompt-wrapper.reply .modal-buttons, .prompt-wrapper.reply .post-expand, .prompt-wrapper.reply .post-interactions { - display: none; -} -.prompt-wrapper.reply .post-area { - padding-bottom: 6px; -} - -/****** DIRECT MESSAGES MODAL********* */ -.modal-wrapper.directMessages .post-area-new { - display: none; - z-index: 5; - background: #e9e9e9; - position: absolute; - bottom: 0; - width: 100%; - padding: 0 !important; -} -.modal-wrapper.directMessages .post-area-new .modal-header h3 span { - display: inline !important; -} -.modal-wrapper.directMessages .modal-content { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 100%; -} -.modal-wrapper.directMessages .post-photo { - height: 48px; - width: 48px; -} -.modal-wrapper.directMessages .post-text { - margin-left: 58px; - font-size: 0.9em; -} -.modal-wrapper.directMessages .post-info-name { - float: none; -} -.modal-wrapper.directMessages .post-info-tag { - line-height: 1em; - padding: 0; - display: inline; - font-size: 80%; - margin: 0 0 0 1em; -} -.modal-wrapper.directMessages .post-info-sent { - position: absolute; - left: 50%; - top: 10px; - display: none; -} - -.direct-messages-list .post { - padding: 20px; - cursor: pointer; -} -.direct-messages-list .post:after { - content: ""; - font-family: "fontello"; - position: absolute; - right: 5px; - top: 50%; - font-size: 1.1em; - margin: -6px 0 0 0; - color: rgba(0, 0, 0, 0.4); - display: none; -} - -.direct-messages-list .post:hover:after { - display: block; -} - -.direct-messages-thread { - padding-bottom: 150px; -} -.direct-messages-thread .post { - background: none; - left: 0; - margin: 0px 10px 20px 10px; - cursor: default; -} -.direct-messages-thread .post .post-info-time { - float: none; - display: block; - text-align: center; - font-size: 10px; - margin: 10px 0; - cursor: default; -} -.direct-messages-thread .post .post-info-time:hover { - color: #aaa; -} -.direct-messages-thread .post .post-text:after, .direct-messages-thread .post .post-text:nth-child(2n):after { - content: ""; - width: 1px; - background: transparent; - position: absolute; - top: 10px; - white-space: normal; -} -.direct-messages-thread .post .post-text:after { - border-top: solid 7px transparent; - border-bottom: solid 7px transparent; - border-right: solid 7px white; - left: -7px; -} -.direct-messages-thread .post .post-text { - background: white; - margin-right: 60px; - margin-left: 60px; - position: relative; - display: inline-block; - max-width: 300px; - font-size: 0.9em; - padding: 5px 10px; - z-index: 4; - float: left; - word-wrap: break-word; - max-width: 60%; - min-height: 15px; -} -.direct-messages-thread .post .post-photo { - position: absolute; - left: 0; - top: 10px; -} -.direct-messages-thread .post.sent .post-text:after { - border-top: solid 7px transparent; - border-bottom: solid 7px transparent; - border-right: none; - border-left: solid 7px white; - right: -7px; - left: auto; -} -.direct-messages-thread .post.sent .post-text { - float: right; -} -.direct-messages-thread .post.sent .post-photo { - position: absolute; - right: 0; - left: auto; -} - -/********* NEW USER MODAL************* */ -.modal-wrapper.new-user .modal-content { - padding: 25px; -} -.modal-wrapper.new-user .modal-close { - display: none; -} -.modal-wrapper.new-user .text { - margin: 0 0 15px 0; -} -.modal-wrapper.new-user .emphasis { - text-align: center; -} -.modal-wrapper.new-user .secret-key { - display: block; - margin-top: 8px; - color: black; - font-weight: bold; - font-size: 110%; -} - -/******** HASHTAG MODAL********** */ -.modal-wrapper.hashtag-modal .postboard { - padding: 0; -} - -/****** CONVERSATION MODAL********** */ -.modal-wrapper.conversation-modal .postboard { - padding: 0; -} - -/****** FOLLOWING MODAL****** */ -.modal-wrapper.following-modal .modal-content { - padding: 0; -} -.modal-wrapper.following-modal ol { - margin: 5px; -} -.modal-wrapper.following-modal .open-profile-modal:hover { - text-decoration: none; -} -.modal-wrapper.following-modal .postboard h2 { - display: none; -} - /******* LOADER ************ */ .postboard-loading, .loading-roller { clear: both; @@ -2753,7 +2778,6 @@ ul.dropdown-menu { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: solid 2px #B4C669; - box-shadow: 8px 10px 10px 0px rgba(0, 0, 0, 0.2); } ul.dropdown-menu li > li > a { padding: 3px 20px; @@ -2791,65 +2815,65 @@ ul.dropdown-menu li > li > a { @media (max-width: 600px) { .col-1 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-2 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } - .col-3, .following-list li, .dashboard.left, .dashboard.right, .follow-suggestions li, .twister-user { + .col-3, .following-list li, .twister-user { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } - .col-4, .dashboard.right, .profile-data li { + .col-4 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } - .col-5, .postboard { + .col-5 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } - .col-6, .network.singleBlock .module { + .col-6, .login .module, .network.singleBlock .module { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-7 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-8 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-9, .following { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-10 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-11 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } .col-12 { width: 100%; - margin: 0 2% 2% 0; + margin: 0 2.5% 2.5% 0; } - .col, .postboard, .following, .following-list li, .network.singleBlock .module, .dashboard.left, .dashboard.right, .follow-suggestions li, .profile-data li, .twister-user { + .col, .following, .following-list li, .login .module, .network.singleBlock .module, .twister-user { float: none; padding: 0 20px; } diff --git a/js/theme_option.js b/js/theme_option.js index a6467a7..6b940a1 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -5,7 +5,6 @@ $(document).ready(function() $('.right').css('height', windowHeight - 100); $('.module.who-to-follow').detach().appendTo($('.dashboard.left')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.left')); - }); @@ -112,8 +111,8 @@ function openModal(modal) { .append(modal.content); else modal.content = modal.self.find('.modal-content'); - modal.self.prependTo('.right').fadeIn('fast'); - $('html, body').animate({scrollTop:0},300); + modal.self.prependTo('body').fadeIn('fast'); + if (modal.classBase === '.modal-wrapper') { modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); diff --git a/sass/_commons.sass b/sass/_commons.sass index 1ca583a..7846403 100644 --- a/sass/_commons.sass +++ b/sass/_commons.sass @@ -1,97 +1,85 @@ * - outline: none!important - +box-sizing(border-box) + outline: none!important + +box-sizing(border-box) -li - list-style: none html, body - height: 100% - min-height: 100% - background: $main-background-color - color: $defaut-font-color - font: .95em/1.3em $main-font-family - font-weight: 400 + height: 100% + min-height: 100% + color: $defaut-font-color + position: absolute + width: 100% -br - display: block +html + font-size: $global-font-size + background-color: $main-background-color + +background-image(linear-gradient(to top right, #aaa, $main-background-color,$main-background-color,$main-background-color, #aaa) ) + background-attachment: fixed + +body + font-size: $main-font-size + line-height : $main-line-height + font-family : $main-font-family + font-weight: 400 + -img - background: $main-background-color - +border-radius(2px) a - text-decoration: none - color: $main-color-color - &:hover, &:active - color: $main-color-color - text-decoration: none - i - text-decoration: underline - -p - padding: 5px 0 - - -h2, h3 - font-size: 1.1em - text-transform: uppercase - letter-spacing: 0.07em - font-weight: 400 - line-height: 1.8em - margin-bottom: 10px - -h3 - font-weight: 700 - font-size: 1em - -textarea, input[type=text] - font: .95em/1.3em $main-font-family - font-weight: 400 - + text-decoration: none + color: $main-color-color + &:hover, &:active + color: $main-color-color + text-decoration: none + i + text-decoration: underline + font-style: normal + +i, em + font-style: italic + +strong, b + font-weight: 600 + +h1 + font-size: 1.1em + text-transform: uppercase + letter-spacing: 0.07em + font-weight: 700 + line-height: 1.1em + +h2 + font-size: 1.1em + text-transform: uppercase + letter-spacing: 0.07em + font-weight: 400 + line-height: 1.1em + +h3 + font-size: 1.1em + font-weight: 400 + line-height: 1.1em + +br + display: block + +textarea, input + background: white + display: block + border: none /* isFollowing */ .isFollowing:after - color: $main-color-color - content: '\e806' - font-family: 'fontello' - padding-left: 2px - display: inline - font-size: 10px - vertical-align: top - line-height: 10px - &:hover - text-decoration: none!important - h3 & - display: none - -/************** BUTTONS ************/ - -button, a.button - padding: 6px 8px - font-size: 13px - display: inline-block - line-height: 1em - font-weight: 500 - margin: 0 - float: none - text-shadow: 2px 2px 0 rgba(black,0) - +transition-property(background) - +transition-duration(.1s) - color: white - background-color: #6F8E97 - +border-radius(2px) - border: none - font-family: 'fontello', 'Roboto' - cursor: pointer - &:hover - background: $main-color-color - text-shadow: 2px 2px 0 rgba(black,.1) - &.disabled - opacity: .5 - background-color: #999 - &:hover - color: $bloc-background-color - + color: $main-color-color + content: '\e806' + font-family: $symbol-font-family + padding-left: 2px + display: inline + font-size: 10px + vertical-align: top + line-height: 10px + &:hover + text-decoration: none!important + h3 & + display: none diff --git a/sass/_grid.sass b/sass/_grid.sass deleted file mode 100644 index a73abdf..0000000 --- a/sass/_grid.sass +++ /dev/null @@ -1,50 +0,0 @@ -.clear-fix:after - content: '' - display: table - clear: both - -// grille ultra-simple pour projets ultra-simples -$grid_width : 100% // largeur de la grille en % -$grid_max_width : 1080px // largeur max. en px -$grid_cols : 12 // nombre de colonnes -$grid_gut : 0 // largeur de la goutière en % -$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols -$grid_col_push : $grid_width/$grid_cols -$class-col : col !default -$class-push : push !default - -// contenant -.wrap - width: $grid_width - max-width: $grid_max_width - margin: 0 auto - background : transparent - position: relative - z-index: 10 - +box-sizing(border-box) - @extend .clear-fix -.col - float: left - margin: 0 $grid_gut 0 0 - +box-sizing(border-box) - @extend .clear-fix -@for $i from 1 through $grid_cols - $j: $i - 1 - .#{$class-col}-#{$i} - width: ($i * $grid_col) + ($j * $grid_gut) - .#{$class-col}-#{$i}-full - width: ($i * $grid_col_push) - float: left - margin: 0 - +box-sizing(border-box) - @extend .clear-fix - .#{$class-push}-#{$i} - margin-left: ($i * $grid_col) + ($i * $grid_gut) - - -.col.last, .#{$class-col}-#{$grid_cols} - margin-right: 0 -.col.first - clear : left - - diff --git a/sass/_login.sass b/sass/_login.sass index 350832c..9f17944 100644 --- a/sass/_login.sass +++ b/sass/_login.sass @@ -1,55 +1,56 @@ -.login .header-bold - display: block - width: 720px - margin: 0px auto 12px auto - -.login .module - display: block - width: 720px - padding: 32px 40px - margin: 8px auto - background: white - -.login .module p - margin-bottom: 5px - -.login .module input - padding: 5px 10px - background: #f3f3f3 - border: solid 1px #dcdcdc - transition: box-shadow 0.3s, border 0.3s - font-size: 14px - -.login .module input:focus, -.login .module select:focus - background: white - transition: background-color 100ms linear - border-bottom: solid 2px $color-green - -.login .module select - height: 30px - padding: 3px 30px 3px 10px - margin: 0 - border: 1px solid #ccc - font-size: 14px - -.login .module span.availability - margin-left: 10px - color: #45474d - -.with-nickname, .import-secret-key, .create-user - margin-top: 10px - -.login .module:nth-child(2) div, -.login .module:nth-child(3) div:nth-child(2), -.login .secret-key-import, -.login .username-import - margin-top: 20px - margin-bottom: 20px - margin-left: 16px - -.login .create-user, -.login .import-secret-key - display: block - margin-left: auto - margin-right: 16px +.login + + .header-bold + display: block + width: 720px + margin: 0px auto 12px auto + + .module + background: white + @extend .col + @extend .col-6 + padding: $space + + p + margin-bottom: 5px + + input + padding: 5px 10px + background: #f3f3f3 + border: solid 1px #dcdcdc + transition: box-shadow 0.3s, border 0.3s + font-size: 14px + + input:focus, select:focus + background: white + transition: background-color 100ms linear + border-bottom: solid 2px $color-green + + select + height: 30px + padding: 3px 30px 3px 10px + margin: 0 + border: 1px solid #ccc + font-size: 14px + + span.availability + margin-left: 10px + color: #45474d + + + + .module:nth-child(2) div, + .module:nth-child(3) div:nth-child(2), + .secret-key-import, + .username-import + margin-top: 20px + margin-bottom: 20px + margin-left: 16px + + .create-user, + .import-secret-key + display: block + margin-left: auto + margin-right: 16px + .with-nickname, .import-secret-key, .create-user + margin-top: 10px \ No newline at end of file diff --git a/sass/_menu.sass b/sass/_menu.sass index 76c4ac1..b3284d2 100755 --- a/sass/_menu.sass +++ b/sass/_menu.sass @@ -1,90 +1,96 @@ +// vars for the menu + +$menu-height : 50px +$menu-font-color: $defaut-font-color .userMenu - width: 100% - position: fixed - left: 0 - margin: 0 - //+background-image(radial-gradient(at top , $color-green, #6F8E97,$color-blue) ) - background: $main-color-dark - z-index: 2 - ul - @extend .clear-fix - +box-sizing(border-box) - width: $site-width - max-width: 100% - margin: auto - background: image-url("logo.png") no-repeat 50% 50% - background-size: 20px - li - float: left - margin: 0 20px 0 0 - position: relative - display: block - > a - line-height: 50px - padding: 0 .5em - display: inline-block - color: rgba(white, 0.7)!important - font-size: 1.2em - position: relative - font-weight: 400 - +box-sizing(border-box) - &:hover - color: white!important - &.current a - color: white!important - +text-shadow(1px 1px 0 rgba(#000,.2)) + width: 100% + position: fixed + height: $menu-height + left: 0 + margin: 0 + background-color: #F5F5F5 + //+background-image(radial-gradient(at top , $color-green,$color-blue) ) + + z-index: 2 + ul + @extend .clear-fix + +box-sizing(border-box) + width: 100% + max-width: 75% + margin: 0 + background: image-url("logo.png") no-repeat 50% 50% + background-size: 20px + li + float: left + margin: 0 20px 0 0 + position: relative + display: block + > a + line-height: $menu-height + padding: 0 .5em + display: inline-block + color: rgba($menu-font-color, 0.7)!important + font-size: 1em + position: relative + font-weight: 500 + +box-sizing(border-box) + &:hover + color: $menu-font-color!important + &.current a + color: $menu-font-color!important + //+text-shadow(1px 1px 0 rgba(#000,.2)) /* Menu specific entries */ .userMenu li - &.userMenu-home - a span.label - display: block!important - text-align: center - .menu-news - position: absolute - text-align: center - display: none - top: 6px - right: -6px - background: $main-color-color - color: #fff - width: 15px - height: 15px - line-height: 15px - font-size: 10px - padding: 3px - font-weight: 900 - +border-radius(50%) - +box-sizing(content-box) - +text-shadow(1px 1px 0 rgba(#000, .3)) - &.show - display: block + &.userMenu-home + a span.label + display: block!important + text-align: center + .menu-news + position: absolute + text-align: center + display: none + top: 6px + right: -6px + background: $main-color-color + color: #fff + width: 15px + height: 15px + line-height: 15px + font-size: 10px + padding: 3px + font-weight: 900 + +border-radius(50%) + +box-sizing(content-box) + +text-shadow(1px 1px 0 rgba(#000, .3)) + &.show + display: block - &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages - display: none!important + &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages + display: none!important - &.userMenu-config, &.userMenu-search - float: right - position: relative - margin-right: 0 - color: white - + a - color: $main-color-dark - &.userMenu-search - margin: 3px - > input - border: 1px solid $main-color-light - line-height: 12px - font-size: 12px - padding: 7px - &:focus - border-color: $main-color-dark - &.userMenu-config > a - @extend .icon-cog - @extend .extend-icon - font-size: 1.5em + &.userMenu-config, &.userMenu-search + float: right + position: relative + margin-right: 0 + color: $menu-font-color + + a + color: $main-color-dark + &.userMenu-search + margin: 3px + > input + border: 1px solid $main-color-light + line-height: 12px + font-size: 12px + padding: 7px + &:focus + border-color: $main-color-dark + &.userMenu-config > a + @extend .icon-cog + @extend .extend-icon + font-size: 1.5rem diff --git a/sass/_modal.sass b/sass/_modal.sass new file mode 100644 index 0000000..1f951a7 --- /dev/null +++ b/sass/_modal.sass @@ -0,0 +1,408 @@ + + +/*********** POPUP MODAL **************/ + + +// vars modal + +$header-modal-height : $menu-height + + +.modal-wrapper + background: white + z-index: 3000 + width: 25% + position: fixed + +box-sizing(border-box) + @extend .box-shadow + height: 100% + right: 0 + bottom: 0 + overflow: hidden + .post-area-new + padding: 10px + +.modal-blackout + background: rgba(0, 0, 0, 0) + z-index: -1 + position: fixed + left: 0 + top: 0 + width: 0 + height: 0 + +.modal-content + @extend .clear-fix + background: $background-light + overflow-y: auto + .postboard-news + position: absolute + display: block + right: 0 + z-index: 20 + @extend .color-1 + h2 span + display: none + + + + + +.modal-header + position: relative + background: $color-blue + height: $header-modal-height + +box-sizing(border-box) + @extend .clear-fix + border-bottom: 1px solid $background-light + + h3 + padding-left: 20px + line-height: $header-modal-height + font-weight: 500 + font-size: 1rem + color: white + +.modal-close + @extend .extend-icon + @extend .icon-cancel + position: absolute + right: 10px + top: 0 + font-size: 14px + line-height: $header-modal-height + cursor: pointer + color: rgba(white , 0.7) + &:hover + color: white + b + display: none + +.mark-all-as-read + float: right + cursor: pointer + font-size: 1.3em + line-height: $header-modal-height + padding: 0 5px + color: white + transition: all .1s linear + display: none +.modal-back:hover, .mark-all-as-read:hover + color: white + +.mark-all-as-read + @extend .extend-icon + @extend .icon-ok + + +.modal-back + @extend .extend-icon + @extend .icon-left + position: absolute + right: 35px + top: 0 + font-size: 14px + line-height: $header-modal-height + cursor: pointer + color: rgba(white , 0.7) + &:hover + color: white + b + display: none + + + + + + +/* MODAL */ +.modal-content + width: 100% + .postboard + padding: 0 + clear: none!important + position: relative + width: 100% + margin: auto + h2 + display: block + .post-text + margin: 0 0 0 40px + .post-photo + width: 30px + height: 30px + img + width: 100% + height: 100% + //+border-radius(50%) + + + +/*********** POPUP PROMPT *************/ + +.prompt-wrapper + background: rgba( 255, 255,255, 1.0 ) + z-index: 5 + position: fixed + top: 50% + left: 50% + width: 600px + margin-left: -300px + @extend .box-shadow + .modal-buttons + padding: 10px + text-align: right + button:last-child + padding: 5px 20px + +/************ FOLLOWING-CONFIG MODAL **********/ + +.prompt-wrapper.following-config-modal + margin-top: -100px + .modal-content + padding: 10px + text-align: center + .modal-buttons + display: none + h2 + text-transform: none +.following-config-method-buttons + .public-following + background-color: $color-green + margin: 0px 2px + padding: 6px 16px + +/************ RETWIST POSTS MODAL **********/ + +.prompt-wrapper.reTwist + &.prompt-wrapper + margin-top: -110px + .modal-content + padding: 20px 15px + .modal-buttons + .modal-propagate + background-color: $color-green + .post-expand, .post-interactions + display: none + +/********* REPLY POSTS MODAL***************/ + +.prompt-wrapper.reply + &.prompt-wrapper + margin-top: -110px + .modal-buttons, .post-expand, .post-interactions + display: none + .post-area + padding-bottom: 6px + +/****** DIRECT MESSAGES MODAL**********/ + +.modal-wrapper.directMessages + + .post-area-new + display: none + z-index: 5 + background: $main-background-color + position: absolute + bottom: 0 + width: 100% + padding: 0!important + .modal-header + h3 span + display: inline!important + + .modal-content + +box-sizing(border-box) + width: 100% + + .post-photo + height: 48px + width: 48px + .post-text + margin-left: 58px + font-size: .9em + .post-info-name + float: none + .post-info-tag + line-height: 1em + padding: 0 + display: inline + font-size: 80% + margin: 0 0 0 1em + .post-info-sent + position: absolute + left: 50% + top: 10px + display: none + +.direct-messages-list .post + padding: 20px + cursor: pointer + &:after + content: "" + font-family: $symbol-font-family + position: absolute + right: 5px + top: 50% + font-size: 1.1em + margin: -6px 0 0 0 + color: rgba(0, 0, 0, 0.4) + display: none + +.direct-messages-list + .post:hover:after + display: block + +.direct-messages-thread + padding-bottom: 150px + .post + @extend .clear-fix + background: none + left: 0 + margin: 0px 10px 20px 10px + cursor: default + .post-info-time + float: none + display: block + text-align: center + font-size: 10px + margin: 10px 0 + cursor: default + &:hover + color: $main-color-light + + + .post-text:after, .post-text:nth-child(2n):after + content: "" + width: 1px + background: transparent + position: absolute + top: 10px + white-space: normal + + .post-text:after + border-top: solid 7px transparent + border-bottom: solid 7px transparent + border-right: solid 7px white + left: -7px + + .post-text + background: white + margin-right: 60px + margin-left: 60px + position: relative + display: inline-block + max-width: 300px + font-size: .9em + padding: 5px 10px + z-index: 4 + float: left + word-wrap: break-word + max-width: 60% + min-height: 15px + + .post-photo + position: absolute + left: 0 + top: 10px + + + + .post.sent + + .post-text:after + border-top: solid 7px transparent + border-bottom: solid 7px transparent + border-right: none + border-left: solid 7px white + right: -7px + left: auto + .post-text + float: right + .post-photo + position: absolute + right: 0 + left: auto + + + + + +/********* NEW USER MODAL**************/ + +.modal-wrapper.new-user + + .modal-content + padding: 25px + .modal-close + display: none + .text + margin: 0 0 15px 0 + .emphasis + text-align: center + .secret-key + display: block + margin-top: 8px + color: rgba(0.5, 0, 0, 1) + font-weight: bold + font-size: 110% + +/******** HASHTAG MODAL***********/ + +.modal-wrapper.hashtag-modal + + .postboard + padding: 0 + +/****** CONVERSATION MODAL***********/ + +.modal-wrapper.conversation-modal + + .postboard + padding: 0 + +/****** FOLLOWING MODAL*******/ + +.modal-wrapper.following-modal + + .modal-content + padding: 0 + ol + margin: 5px + .open-profile-modal + &:hover + text-decoration: none + .postboard + h2 + display: none + + +/******* WHO TO FOLLOW MODAL*******/ + +.modal-wrapper.who-to-follow-modal + .modal-content + padding: 15px + +box-sizing(border-box) + ol + margin: 5px + .open-profile-modal + &:hover + text-decoration: none + .twister-user + position: relative + padding: 5px + + .twister-user-info + text-align: left + font-size: .8rem + line-height: 1rem + width: 80% + button + position: absolute + right: 0 + top: 5% + @extend .small + .bio + color: rgba(0, 0, 0, 0.6) + font-style: italic + padding: .5rem diff --git a/sass/_network.sass b/sass/_network.sass index de96b76..85bd151 100755 --- a/sass/_network.sass +++ b/sass/_network.sass @@ -1,69 +1,81 @@ /********** LOGIN AND NETWORK PAGES *******/ -.network.singleBlock - @extend .clear-fix - ul - padding-left: 20px - li - line-height: 36px - font-size: 13px +.network + &.singleBlock + @extend .clear-fix - .module - @extend .col - @extend .col-6 - padding: 1.5% - background: $bloc-background-color - &:last-child - @extend .last - h2 - display: block + ul + line-height: 2rem + padding: 2rem - h3 - font-weight: 500 - text-transform: none - border-bottom: 1px solid rgba(black, 0.2) - margin: 20px 0 10px 0 + .module + @extend .col + @extend .col-6 + background: $bloc-background-color + +box-shadow(0 1px 1px rgba(#555, .1)) + margin-bottom: 50px + &:last-child + @extend .last + h2 + +background-image(linear-gradient(to right , $color-green, #5E80A2) ) -.singleBlock .spam-msg - resize: none - width: 100% - display: block - border-radius: 3px - padding: 4px - font-size: 13px - height: 80px - border: solid 1px rgba(0, 0, 0, 0.1) - line-height: 20px - position: relative - margin-left: -20px - margin-bottom: 10px -.highlight - background: $bloc-background-color - padding: 5px 8px - line-height: 1.7 - display: inline-block + .spam-msg + resize: none + width: 100% + display: block + padding: $space + height: 180px + border: solid 1px rgba(0, 0, 0, 0.1) + position: relative + margin: $space 0 + font-family: $main-font-family -span.connection-status - line-height: 1em - font-weight: 500 - font-size: 1em - &:before - content: "" - display: inline-block - height: .8em - width: .8em - margin-right: .8em - background: $color-red - color: white - &.connected:before - background: $main-color-color -.character-limit - float: right - margin-right: 18px + .highlight + font-size: 1.2rem + display: block + margin: $space 0 -.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty - color: #333 - font-weight: 700 + span.connection-status + font-weight: 500 + &:before + content: "" + display: inline-block + height: .8em + width: .8em + margin-right: .8em + background: $color-red + color: white + &.connected:before + background: $main-color-color + + .character-limit + float: right + margin-right: $space + + .connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty + color: $main-color-color + font-weight: 700 + font-family: Arial + font-size: 95% + h2 + font-weight: 400 + +background-image(linear-gradient(to left , $color-green, #5E80A2) ) + padding: 1rem 2rem + color: white + + + h3 + font-weight: 600 + margin-top: 2*$space + padding: 0 1.5rem + +box-sizing(content-box) + &:after + display: block + content: '' + height: 1px + width: 100% + background: rgba(#5F81A1,.5) + margin-top: $space diff --git a/sass/_postboard.sass b/sass/_postboard.sass index c8c3f61..1c147d2 100755 --- a/sass/_postboard.sass +++ b/sass/_postboard.sass @@ -1,333 +1,313 @@ /************* POST BOARD *************/ + +// vars for postboard + +$avatar-width : 48px + + .postboard - @extend .col - @extend .col-5 - - - .postboard-posts - position: relative - z-index: 1 - clear: both - - .postboard-news - display: none - .modal-content & - line-height: 30px - position: absolute - right: 0 - top: 40px - font-weight: 900 - display: block - padding: 0 20px - color: white - +text-shadow(1px 1px 1px rgba(black, .1)) - background: $main-color-color - display: block - - - - .post - background: $bloc-background-color - box-sizing: border-box - position: relative - margin-bottom: 1px - transition: margin .4s ease-out - -moz-transition: margin .4s ease-out - - .post, .original.post, .post.open - background: $bloc-background-color - position: relative + float: left + width: 50% + padding: 20px + h2 + display: none + .postboard-posts + position: relative + z-index: 1 + clear: both + + .postboard-news + display: none + + .post + background: $bloc-background-color + position: relative + margin-bottom: 1px + +transition-property(margin) + +transition-duration(.4s) + +transition-timing-function(ease-out) + + .post, .original.post, .post.open + position: relative .module.open - .post - color: darken($defaut-font-color, 15%) + .post + color: darken($defaut-font-color, 15%) + .post:hover - color: darken($defaut-font-color, 15%) + color: darken($defaut-font-color, 15%) .post-data - padding: 15px + padding: $space .post.open - .original, .related - margin-bottom: 1px + .original, .related + margin-bottom: 1px + .postboard-posts > .post - +box-shadow(0 1px 1px rgba(#555, .1)) - &.open - margin-top: 20px - margin-bottom: 20px - &:after - content: "" - position: absolute - right: 0 - top: 0 - width: 0 - height: 100% - transition: all .2s linear - &.open:after - width: 5px + + &.open + margin-top: $space + margin-bottom: $space + + &:after + content: "" + position: absolute + right: 0 + top: 0 + width: 0 + height: 100% + transition: all .2s linear + &.open:after + width: 5px .post:hover - cursor: pointer + cursor: pointer .open - background: none - &:hover - background: none - -.post-photo - margin: 0 - display: inline-block - float: left - vertical-align: middle - width: 48px - height: 48px - overflow: hidden - img - width: 100% - height: 100% - //+border-radius(50%) + background: none + @extend .box-shadow + &:hover + background: none +.post-photo + margin: 0 + display: inline-block + float: left + vertical-align: middle + width: $avatar-width + height: $avatar-width + overflow: hidden + img + width: 100% + height: 100% + //+border-radius(50%) .post-info-name - font-weight: 700 - font-size: 1em - line-height: 14px - color: inherit - text-decoration: none - display: inline-block - padding-left: 10px - float: left + font-weight: 600 + color: inherit + text-decoration: none + display: inline-block + float: left + margin-left: 10px .post-info-name:hover - text-decoration: none - color: black + text-decoration: none + color: black .post-info-tag - font-size: 12px - opacity: .6 - margin-top: 4px - display: inline-block + font-size: 12px + opacity: .6 + margin-top: 4px + display: inline-block .post-info-time - position: absolute - font-size: 11px - line-height: 14px - text-decoration: none - top: 11px - right: 11px - color: lighten($dark-grey,30%) - &:hover - color: lighten($dark-grey,5%) + position: absolute + font-size: 11px + line-height: 14px + text-decoration: none + top: 11px + right: 11px + color: lighten($dark-grey,30%) + &:hover + color: lighten($dark-grey,5%) .post-text - margin: 0 0 0 68px - word-wrap: break-word - min-height: 30px - padding: 0 - samp - background: #eee + margin: 0 0 0 ($avatar-width +10) + word-wrap: break-word + min-height: $avatar-width + padding: 0 + samp + background: $background-light + font-size: .9rem + line-height: .9rem + display: inline-block + padding: 5px 8px + +border-radius(2px) + color: #333 + font-weight: 500 + font-family: monospace .post-context - font-size: 11px - line-height: 11px - margin: 0 0 1em 0 - color: lighten($dark-grey,30%) - span - @extend .icon-twistagain - @extend .extend-icon - &:before - display: block - float: left - background: $main-color-color - text-align: center - padding: 1px 2px 2px 2px - line-height: 9px - font-size: 9px - +border-radius(3px) - color: white - margin-right: .4em + font-size: 11px + line-height: 11px + margin: 0 0 1em 0 + color: lighten($dark-grey,30%) + span + @extend .icon-twistagain + @extend .extend-icon + &:before + display: block + float: left + background: $main-color-color + text-align: center + padding: 1px 2px 2px 2px + line-height: 9px + font-size: 9px + +border-radius(3px) + color: white + margin-right: .4em .mini-screen-name - font-size: 13px - color: $dark-grey - + font-size: 13px + color: $dark-grey .post-retransmited-icon - display: none + display: none .post-interactions - margin: 10px 0 3px 0 - text-align: right - height: 12px - line-height: 12px - span - color: lighten($dark-grey,30%) - cursor: pointer - font-size: 12px - line-height: 12px + margin: 10px 0 3px 0 + text-align: right + height: 12px + line-height: 12px + span + color: lighten($dark-grey,30%) + cursor: pointer + font-size: 12px + line-height: 12px .post-expand - color: lighten($dark-grey,30%) - cursor: pointer - font-size: 12px - position: absolute - left: 10px - bottom: 10px - &:hover - color: lighten($dark-grey,5%) + color: lighten($dark-grey,30%) + cursor: pointer + font-size: 12px + position: absolute + left: 10px + bottom: 10px + &:hover + color: lighten($dark-grey,5%) + +.post-reply, .post-propagate, .post-favorite + @extend .extend-icon + padding-left: 10px + display: none + &:hover + color: lighten($dark-grey,5%) .post-reply - @extend .extend-icon - @extend .icon-comment + @extend .icon-comment .post-propagate - @extend .extend-icon - @extend .icon-twistagain + @extend .icon-twistagain .post-favorite - display: none!important - @extend .extend-icon - @extend .icon-star + display: none!important + @extend .icon-star -.post .show-more - display: inline-block - float: right - font-size: 12px - color: lighten($dark-grey,30%) - @extend .extend-icon - @extend .icon-chat - &:hover - color: lighten($dark-grey,5%) +.post + .show-more + display: inline-block + float: right + font-size: 12px + color: lighten($dark-grey,30%) + @extend .extend-icon + @extend .icon-chat + &:hover + color: lighten($dark-grey,5%) .expanded-content.show-pic - display: block + display: block .expanded-post - .post-expand, .post-reply, .post-propagate, .post-favorite - color: lighten($dark-grey,30%) - &:hover - color: lighten($dark-grey,5%) + + .post-expand, .post-reply, .post-propagate, .post-favorite + color: lighten($dark-grey,30%) + &:hover + color: lighten($dark-grey,5%) .related .post-expand - display: none - margin: 0 + display: none + margin: 0 -.post-reply, .post-propagate, .post-favorite - padding-left: 10px - display: none .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover - .post-reply, .post-propagate, .post-favorite - display: inline-block + .post-reply, .post-propagate, .post-favorite + display: inline-block .open .related - .post-reply, .post-propagate, .post-favorite - display: none!important - &:hover - .post-reply, .post-propagate/*, .post-favorite*/ - display: inline-block!important + .post-reply, .post-propagate, .post-favorite + display: none!important + &:hover + .post-reply, .post-propagate/*, .post-favorite*/ + display: inline-block!important + -.post-reply:hover, .post-propagate:hover, .post-favorite:hover - color: lighten($dark-grey,5%) .expanded-content - display: none - padding: 5px 5px 0 5px - @extend .clear-fix + display: none + padding: 5px 5px 0 5px + @extend .clear-fix .image-preview - width: 100% - display: block - margin: auto + width: 100% + display: block + margin: auto .preview-container - max-height: 500px - width: 100% - text-align: center - overflow-y: auto - background: black + max-height: 500px + width: 100% + text-align: center + overflow-y: auto + background: black .post-stats - float: left - li - display: inline-block - &.stat-count - font-weight: 700 - font-size: 11px - float: left - line-height: 20px - color: llighten($dark-grey,30%) - span:last-child - padding-right: 5px - a - position: relative - text-decoration: none - display: inline-block - width: 20px - height: 20px - margin: 0 1px 0 0 - img - width: 20px - height: 20px + float: left + li + display: inline-block + &.stat-count + font-weight: 700 + font-size: 11px + float: left + line-height: 20px + color: llighten($dark-grey,30%) + span:last-child + padding-right: 5px + a + position: relative + text-decoration: none + display: inline-block + width: 20px + height: 20px + margin: 0 1px 0 0 + img + width: 20px + height: 20px .user-name-tooltip - display: none - position: absolute - background: lighten($main-color-dark,3%) - font-size: 12px - white-space: nowrap - padding: 3px 5px - color: #fff - top: -42px - left: 0px - &:after - content: "" - position: absolute - width: 0 - left: 4px - bottom: -5px - border-top: solid 5px lighten($main-color-dark,3%) - border-left: solid 5px transparent - border-right: solid 5px transparent + display: none + position: absolute + background: lighten($main-color-dark,3%) + font-size: 12px + white-space: nowrap + padding: 3px 5px + color: #fff + top: -42px + left: 0px + &:after + content: "" + position: absolute + width: 0 + left: 4px + bottom: -5px + border-top: solid 5px lighten($main-color-dark,3%) + border-left: solid 5px transparent + border-right: solid 5px transparent .post-stats a:hover .user-name-tooltip - display: inline-block + display: inline-block .post-replies .sub-replies - border-left: solid 3px $main-color-color - margin-left: 1px - - - - - -/* MODAL */ -.modal-content - width: 100% - .postboard - padding: 0 - clear: none!important - position: relative - width: 100% - margin: auto - .post-text - margin: 0 0 0 40px - .post-photo - width: 30px - height: 30px - img - width: 100% - height: 100% - //+border-radius(50%) + border-left: solid 3px $main-color-color + margin-left: 1px + diff --git a/sass/_profile.sass b/sass/_profile.sass index f8cf127..88a8b76 100755 --- a/sass/_profile.sass +++ b/sass/_profile.sass @@ -14,237 +14,222 @@ $modal-postboard-post-height: 100% ***************************************/ .profile-modal - .profile-data - display: block - margin: auto - padding-top: 0 - - @extend .clear-fix - li - display: inline - margin: 0 5px - float: none - a - display: inline - span - &.posts-count, &.following-count, &.followers-count - display: inline-block - padding-right: 5px - - .modal-content - overflow: hidden - padding: 0 - position: relative - #profile-posts - padding: 0 - - .postboard - width: 100% - height: 100% - position: relative - - - .postboard-posts - display: block - height: $modal-postboard-post-height - overflow-y: auto - .postboard-posts .post - padding: 0 - margin-bottom: 1px - .post-interactions - margin: 2px 10px 3px 60px - .profile-card - margin: 0 - padding: 0 + + + .modal-content + overflow: hidden + padding: 0 + position: relative + #profile-posts + padding: 0 + + .postboard + width: 100% + height: 100% + position: relative + + + .postboard-posts + display: block + height: $modal-postboard-post-height + overflow-y: auto + .postboard-posts .post + padding: 0 + margin-bottom: 1px + .post-interactions + margin: 2px 10px 3px 60px + .profile-card + margin: 0 + padding: 0 .profile-modal - h2.profile-screen-name - display: block - letter-spacing: 0 - text-transform: none - color: lighten($dark-grey, 30%) - padding: 5px 0 - margin: 0 - font-size: 13px - line-height: 13px + h2.profile-screen-name + display: block + letter-spacing: 0 + text-transform: none + color: lighten($dark-grey, 30%) + padding: 5px 0 + margin: 0 + font-size: 13px + line-height: 13px /* Profile card*/ .profile-card - width: 100% - background: white - border-bottom: 1px solid $background-light - padding: $modal-gut + width: 100% + background: white + border-bottom: 1px solid $background-light + padding: $modal-gut .profile-card-main - position: relative - text-align: center - word-wrap: break-word - transition: all .2s linear - background: none!important - padding: 10px - - - h1 - font-size: 22px - font-weight: bold - display: inline-block - padding-top: 10px - - &:before - content: "" - border: solid 0px #fff - transition: all .2s linear - position: absolute - left: 1px - top: 1px - right: 1px - bottom: 1px - z-index: 0 - * - position: relative - z-index: 1 + position: relative + text-align: center + word-wrap: break-word + transition: all .2s linear + background: none!important + padding: 10px + + + + &:before + content: "" + border: solid 0px #fff + transition: all .2s linear + position: absolute + left: 1px + top: 1px + right: 1px + bottom: 1px + z-index: 0 + * + position: relative + z-index: 1 .profile-card-photo - height: 70px - width: 70px - +border-radius(50%) - margin: 0 auto - display: block + height: 70px + width: 70px + +border-radius(50%) + margin: 0 auto + display: block .profile-card-photo.forEdition - +border-radius(50%) - height: 75px - margin: 0 auto - display: block - width: 75px + +border-radius(50%) + height: 75px + margin: 0 auto + display: block + width: 75px .profile-bio - padding: 10px - font-style: italic - text-align: center + padding: 10px + font-style: italic + text-align: center + font-size: .8em + +.profile-card-buttons + text-align: center + padding: 0 0 $space 0 + + +.isFollowing:after + font-size: 15px + position: absolute + +.follow + @extend .color-1 +.unfollow + @extend .color-2 - .direct-messages-with-user, .follow, .unfollow - display: inline-block - position: static - .isFollowing:after - font-size: 15px - position: absolute - .unfollow - background: $main-color-light +.twister-user-info + @extend .clear-fix + text-align: center + width: 100% + padding: 0 - .twister-user-info - @extend .clear-fix - text-align: center - width: 100% - padding: 0 - .follow - background: $main-color-color - .known-followers - text-align: center - clear: both - width: 100% +.known-followers + text-align: center + clear: both + width: 100% #msngrswr - display: none - text-align: center - margin: 10px 0 + display: none + text-align: center + margin: 10px 0 .profile-extra-contact - display: none - margin: 0 15px 0 0 - font-weight: 500 - background: $background-light - padding: 2px 8px 3px 8px - +border-radius(2px) + display: none + margin: 0 15px 0 0 + font-weight: 500 + background: $background-light + padding: 2px 8px 3px 8px + +border-radius(2px) .bitmessage-ctc, .tox-ctc - font-size: 13px - line-height: 15px - cursor: pointer - color: $main-color-dark - &:hover - color: $main-color-color + font-size: 13px + line-height: 15px + cursor: pointer + color: $main-color-dark + &:hover + color: $main-color-color .bitmessage-ctc:after, .tox-ctc:after - font-family: $symbol-font-family - content: '' - font-style: normal - font-weight: normal - speak: none - display: inline-block - text-decoration: inherit - width: 1em - text-align: center - font-variant: normal - text-transform: none - line-height: 1em + font-family: $symbol-font-family + content: '' + font-style: normal + font-weight: normal + speak: none + display: inline-block + text-decoration: inherit + width: 1em + text-align: center + font-variant: normal + text-transform: none + line-height: 1em .profile-modal - .profile-tox, .profile-bitmessage - display: inline-block - margin-right: 5px - font-size: 13px - &:hover - color: $main-color-color + .profile-tox, .profile-bitmessage + display: inline-block + margin-right: 5px + font-size: 13px + &:hover + color: $main-color-color .profile-modal .modal-buttons - display: none + display: none - /* EDITION PROFILE*/ + /* EDITION PROFILE*/ .forEdition.profile-card - +box-sizing(border-box) - @extend .clear-fix - width: auto - background: $background-light - .profile-card-main - margin: 0 - width: 330px - +box-sizing(border-box) - padding: 10px - background: $background-light - input - display: block - margin: 5px auto - background: white - border: 1px solid lighten($dark-grey, 50%) - padding: 6px 4px - margin-bottom: 4px - text-align: center - transition: all .2s linear - &:hover, &:focus - background: white - border-color: $main-color-light + +box-sizing(border-box) + @extend .clear-fix + width: auto + background: $background-light + .profile-card-main + margin: 0 + width: 330px + +box-sizing(border-box) + padding: 10px + background: $background-light + input + display: block + margin: 5px auto + background: white + border: 1px solid lighten($dark-grey, 50%) + padding: 6px 4px + margin-bottom: 4px + text-align: center + transition: all .2s linear + &:hover, &:focus + background: white + border-color: $main-color-light .input-description - width: 90% + width: 90% .input-name - font-size: 20px + font-size: 20px .forEdition .profile-card-main - .input-website, .input-city - display: inline-block - .input-tox, .input-bitmessage - width: 90% - margin-top: 10px - h2 - text-transform: none - font-weight: 700 - font-size: .9em + .input-website, .input-city + display: inline-block + .input-tox, .input-bitmessage + width: 90% + margin-top: 10px + h2 + text-transform: none + font-weight: 700 + font-size: .9em .profile-edition-buttons - text-align: right + text-align: right .selectable_theme.theme_calm - display: none + display: none diff --git a/sass/_utils.sass b/sass/_utils.sass index 3dda2af..21a01a9 100755 --- a/sass/_utils.sass +++ b/sass/_utils.sass @@ -1,5 +1,62 @@ + + + +.box-shadow + +box-shadow(0 8px 13px rgba(#333, .1)) + .clear-fix &:after // clearfix content: "" display: table - clear: both \ No newline at end of file + clear: both + + + +/************** BUTTONS ************/ + +button, a.button + padding: .6rem 1rem + display: inline-block + line-height: .75rem + letter-spacing: 0.07rem + font-size: .75rem + position: relative + z-index: 10 + font-weight: 300 + margin: 2px + text-transform: uppercase + +transition-property(background, border-color) + +transition-duration(.1s) + color: #444 + background: #F8F8F8 + border: 1px solid darken( #F8F8F8 , 5%) + font-family: $symbol-font-family, $main-font-family + cursor: pointer + &:hover + border-color: darken( #F8F8F8 , 15%) + &.disabled + opacity: .5 + color: #999 + background-color: $bloc-background-color + &:hover + color: #666 + +box-shadow(1px 1px 0 rgba(#444, .3)) + &.color-1 + background: $color-blue + border-color: darken($color-blue, 5%) + color: white + font-weight: 500 + &:hover + border-color: darken($color-blue, 15%) + &.color-2 + background: #C3C3C3 + border-color: darken(#C3C3C3, 5%) + color: white + font-weight: 500 + &:hover + border-color: darken(#C3C3C3, 15%) + &.small + padding: .3rem .5rem + font-weight: 700 + font-size: .6rem + line-height: .6rem \ No newline at end of file diff --git a/sass/_var.sass b/sass/_var.sass index 888327e..8a491ad 100755 --- a/sass/_var.sass +++ b/sass/_var.sass @@ -1,10 +1,13 @@ //these are the main variables used in the sass file -$grid_width : 100% // largeur de la grille en % -$grid_max_width : 96% // largeur max. en px -$grid_cols : 12 // nombre de colonnes -$grid_gut : 2% // largeur de la goutière en % + +// G R I D + +$grid_width : 100% // grid width % +$grid_max_width : 100% // max width +$grid_cols : 12 // cols number +$grid_gut : 2.5% // gut width % $grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols $class-col : col !default @@ -21,12 +24,12 @@ $class-col : col !default width: ($i * $grid_col) + ($j * $grid_gut) +// vars used for the website $site-width : $grid_max_width $gut-width : $grid_gut -$indicators-width : 55px -$postboard-modal-width : auto - +$space : 1rem +// colors $light-grey: #e9e9e9 $dark-blue: #38434E @@ -34,8 +37,8 @@ $color-yellow: #E6953C $color-pink: #BF6B6C $color-green: #B4C669 $color-red: #EF5D43 -$color-blue: #446CB3 -$dark-grey : #66686B +$color-blue: #00AA8B +$dark-grey : #444 $main-color-light: #aaa $main-color-dark: #596073 @@ -47,10 +50,13 @@ $background-light: lighten($main-background-color, 4% ) $defaut-font-color: $dark-grey +$global-font-size : 15px +$main-font-size : 1rem +$main-line-height : 1.4rem + /* FONTS */ $main-font-family: "Roboto", sans-serif $symbol-font-family: "fontello" -$serif-font-family: "Droid" -$alt-font-family : "Laranja", serif \ No newline at end of file +$serif-font-family: "Droid", serif diff --git a/sass/style.sass b/sass/style.sass index 178e198..b1f5d48 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -2,15 +2,22 @@ @import compass @import 'compass/reset' @import 'compass/utilities' + +// utils + @import _var +@import _commons @import _utils + +// layout @import _menu +@import _modal @import _profile @import _postboard @import _following @import _login @import _network -@import _commons + @import _tabs @@ -18,26 +25,26 @@ .promoted-posts-only - margin: 0 0 - @extend .clear-fix - float: right + margin: 0 0 + @extend .clear-fix + float: right - li - cursor: pointer - display: inline-block - margin: 0 0 0 5px - padding: 5px 15px - font-size: .9em - transition: color .1s linear - &.active - color: $main-color-dark - background: white - cursor: default - &:hover, &.disabled:hover - color: $main-color-dark - &.disabled - color: $main-color-light - background: $background-light + li + cursor: pointer + display: inline-block + margin: 0 0 0 5px + padding: 5px 15px + font-size: .9em + transition: color .1s linear + &.active + color: $main-color-dark + background: white + cursor: default + &:hover, &.disabled:hover + color: $main-color-dark + &.disabled + color: $main-color-light + background: $background-light @@ -46,24 +53,23 @@ /* Wrapper and blocks */ .wrapper - width: $site-width - max-width: 100% - margin: 0 auto - padding-top: 70px - position: relative - z-index: 1 - min-height: 100% + width: $site-width + max-width: 100% + margin: 0 + padding-top: $menu-height + position: relative + z-index: 1 + min-height: 100% .dashboard - &.left, &.right - @extend .col - @extend .col-3 - position: relative - &.right - @extend .last - height: 0 - background: #ededed - @extend .col-4 + &.left, &.right + float: left + width: 25% + position: relative + &.right + @extend .last + height: 0 + @@ -74,340 +80,311 @@ /********** CONFIG SUBMENU & SEARCH RESULTS ************/ .dialog-modal - display: none - background: $main-color-dark - position: absolute - top: 45px - right: -10px - width: 250px - overflow: hidden - border-bottom: solid 2px $main-color-color - box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3) + display: none + background: $main-color-dark + position: absolute + top: 45px + right: -10px + width: 250px + overflow: hidden + @extend .box-shadow .userMenu-search .dialog-modal:after - right: auto - left: 150px + right: auto + left: 150px .direct-messages, .dropdown-menu-item - display: block - padding: 10px + display: block + padding: 10px ul.userMenu-search-profiles - width: 100% - padding: 0 - background: white - li - float: none - display: block - padding: 5px 10px - margin: 0 - @extend .clear-fix - border-bottom: 1px solid $main-background-color - .mini-profile-name - font-size: 12px - display: block - margin: 0 - padding: 0 - .mini-profile-photo - width: 30px - height: 30px - margin: 0 10px 0 0 - float: left - .mini-profile-info - width: 100% - float: none - - button - padding: 3px - @extend .extend-icon - &:after - content: '' - font-family: $symbol-font-family - .follow .unfollow - position: absolute - bottom: 10px - right: 10px - &:hover - background-color: $main-color-light - .follow - background-color: $main-color-color - @extend .icon-plus - .unfollow - background-color: $main-color-dark - @extend .icon-minus + width: 100% + padding: 0 + background: white + li + float: none + display: block + padding: 5px 10px + margin: 0 + @extend .clear-fix + border-bottom: 1px solid $main-background-color + .mini-profile-name + font-size: 12px + display: block + margin: 0 + padding: 0 + .mini-profile-photo + width: 30px + height: 30px + margin: 0 10px 0 0 + float: left + .mini-profile-info + width: 100% + float: none + + button + padding: 3px + @extend .extend-icon + &:after + content: '' + font-family: $symbol-font-family + .follow .unfollow + position: absolute + bottom: 10px + right: 10px + &:hover + background-color: $main-color-light + .follow + background-color: $main-color-color + @extend .icon-plus + .unfollow + background-color: $main-color-dark + @extend .icon-minus .userMenu-search input[type="text"] - float: right - padding: 3px 10px - margin: 9px 20px 0 0 - border: none - background: $bloc-background-color - box-sizing: border-box + float: right + padding: 3px 10px + margin: 9px 20px 0 0 + border: none + background: $bloc-background-color + box-sizing: border-box .userMenu-search-sugestions a - color: rgba(0, 0, 0, 0.7) - padding: 10x 20px - display: block - clear: both - - -.follow-suggestions - button - .follow .unfollow - position: absolute - bottom: 10px - right: 10px - &:hover - background-color: $main-color-light - .follow - background-color: $main-color-color - .unfollow - background-color: $main-color-dark - li - position: relative - box-sizing: border-box - background: $bloc-background-color - @extend .clear-fix - @extend .col - @extend .col-3 - min-height: 100px - margin-bottom: 20px - &:nth-child(4n) - @extend .last - &:nth-child(4n+1) - clear: left + color: rgba(0, 0, 0, 0.7) + padding: 10x 20px + display: block + clear: both + + + /***************** MINI PROFILE *******************************/ .mini-profile - .mini-profile-info - position: relative - text-align: center - background: $bloc-background-color - padding: 20px 0 - a.button - background: $main-color-light - margin: 1em auto - .post-area - margin-top: 1px - margin-bottom: 20px - padding: .5em - background: $background-light - @extend .clear-fix - .post-area-new - @extend .open - padding: 0 - margin: 0 - textarea - width: 100% + @extend .box-shadow + .mini-profile-info + position: relative + text-align: center + background: $bloc-background-color + padding: 20px 0 + + a.button + background: $main-color-light + margin: 1em auto + .post-area + margin-top: 1px + margin-bottom: 20px + padding: .5em + background: $background-light + @extend .clear-fix + .post-area-new + @extend .open + +box-shadow(none) + padding: 0 + margin: 0 + textarea + width: 100% .mini-profile-indicators - margin: 0 - text-align: center - @extend .clear-fix - background-color: lighten($background-light,4%) - - li - +box-sizing(border-box) - display: block - position: relative - font-size: .8em - border-top: 1px solid $main-background-color - - a - color: $dark-grey - display: block - padding: 1em 0 - &:hover - text-decoration: underline - - &:before - display: none!important - - .userMenu-connections a - @extend .icon-bell - @extend .extend-icon - .userMenu-messages a - @extend .icon-mail - @extend .extend-icon - .userMenu-user a - @extend .icon-user - @extend .extend-icon + margin: 0 + text-align: center + @extend .clear-fix + background-color: lighten($background-light,4%) + + li + +box-sizing(border-box) + display: block + position: relative + font-size: .8em + border-top: 1px solid $main-background-color + + a + color: $dark-grey + display: block + padding: 1em 0 + &:hover + text-decoration: underline + + &:before + display: none!important + + .userMenu-connections a + @extend .icon-bell + @extend .extend-icon + .userMenu-messages a + @extend .icon-mail + @extend .extend-icon + .userMenu-user a + @extend .icon-user + @extend .extend-icon .messages-qtd - position: absolute - top: 50% - margin-top: -11px - right: 11px - background: $main-color-color - +text-shadow(1px 1px 0 rgba(#000,.2)) - color: #fff - width: 25px - height: 25px - line-height: 25px - font-size: 10px - font-weight: 900 - +border-radius(50%) + position: absolute + top: 50% + margin-top: -11px + right: 11px + background: $main-color-color + +text-shadow(1px 1px 0 rgba(#000,.2)) + color: #fff + width: 25px + height: 25px + line-height: 25px + font-size: 10px + font-weight: 900 + +border-radius(50%) .mini-profile-view - display: none + display: none .mini-profile-name - color: $dark-grey - font-size: 1.3em - font-weight: 700 - padding: 10px 0 - display: block - margin: auto - &:hover - color: $main-color-light + color: $dark-grey + font-size: 1.3em + font-weight: 700 + padding: 10px 0 + display: block + margin: auto + &:hover + color: $main-color-light .mini-profile-photo - width: 70px - height: 70px - overflow: hidden - +border-radius(50%) - display: block - margin: auto - img - min-width: 100% - min-height: 100% - border-radius: (50%) + width: 70px + height: 70px + overflow: hidden + +border-radius(50%) + display: block + margin: auto + img + min-width: 100% + min-height: 100% + border-radius: (50%) .profile-data - @extend .clear-fix - clear: both - padding: 0 0 1em 0 - text-align: center - background: $bloc-background-color - - li - display: block - @extend .col - @extend .col-4 - +box-sizing(border-box) - &.current a - border-bottom: 3px solid $main-color-color - &:last-child - @extend .last - a - color: $dark-grey - display: inline-block - font-size: 13px - padding-bottom: 3px - &:hover - color: $main-color-light - span - &.posts-count, &.following-count, &.followers-count - font-weight: 900 - display: block - line-height: 15px - - - + @extend .clear-fix + clear: both + padding: 0 0 1em 0 + text-align: center + background: $bloc-background-color + + li + display: inline + margin: 0 5px + float: none + a + color: $dark-grey + display: inline-block + font-size: 13px + padding-bottom: 3px + &:hover + color: $main-color-light + span + &.posts-count, &.following-count, &.followers-count + display: inline-block + padding-right: 5px + &:last-child + display: none .mini-profile-info a:hover - text-decoration: none + text-decoration: none .who-follow - display: block - position: absolute - bottom: 10px - text-align: center - padding: 10px - font-size: 12px - background: lighten($background-light, 5%) - z-index: 10 - +transition(all .2s linear) + display: block + position: absolute + bottom: 10px + text-align: center + padding: 10px + font-size: 12px + background: lighten($background-light, 5%) + z-index: 10 + +transition(all .2s linear) .show-more-followers - font-weight: 700 - display: block - cursor: pointer - float: right - color: $dark-grey + font-weight: 700 + display: block + cursor: pointer + float: right + color: $dark-grey .mini-follower-link - display: inline-block - margin: 1px - line-height: 12px - &.isFollowing:after - display: none - &:after - content: '·' - font-weight: 900 - color: $main-color-dark - margin-left: 1px + display: inline-block + margin: 1px + line-height: 12px + &.isFollowing:after + display: none + &:after + content: '·' + font-weight: 900 + color: $main-color-dark + margin-left: 1px /***************** POST AREA ***************/ .post-area-new - textarea - resize: none - box-shadow: none!important - +box-sizing(border-box) - width: 100% - display: block - transition: all .3s linear - -webkit-transition: height 0.3s linear - -moz-transition: height 0.3s linear - -o-transition: height 0.3s linear - -ms-transition: height 0.3s linear - height: 28px - border: none - background: rgba(255, 255, 255, 1) - border: 1px solid rgba(0, 0, 0, 0.1) - padding: 3px - margin: 5px 0 - &:focus - border-bottom: solid 2px $color-green + textarea + resize: none + +box-sizing(border-box) + width: 100% + display: block + transition: all .3s linear + -webkit-transition: height 0.3s linear + -moz-transition: height 0.3s linear + -o-transition: height 0.3s linear + -ms-transition: height 0.3s linear + height: 28px + border: none + background: rgba(255, 255, 255, 1) + border: 1px solid rgba(0, 0, 0, 0.1) + padding: 3px + margin: 5px 0 + &:focus + border-bottom: solid 1px $main-color-color #postboard-top - clear: both - position: relative - @extend .clear-fix - margin-bottom: 1px - transition: height .3s linear - padding: 10px 10px 5px 10px - background: white - overflow: hidden - display: none - &.hide - display: none!important - &.show - display: block - - .profile-photo - position: absolute - top: 10px - left: 10px - width: 48px - height: 48px - overflow: hidden - img - width: 100% - .post-area - overflow: hidden - @extend .clear-fix - width: 100% - padding-left: 58px - padding-right: 0 - display: inline - +box-sizing(border-box) - float: right - .post-area-new - @extend .open - textarea - margin: 0 0 5px 0 + clear: both + position: relative + @extend .clear-fix + margin-bottom: 1px + transition: height .3s linear + padding: 10px 10px 5px 10px + background: white + overflow: hidden + display: none + &.hide + display: none!important + &.show + display: block + + .profile-photo + position: absolute + top: 10px + left: 10px + width: 48px + height: 48px + overflow: hidden + img + width: 100% + .post-area + overflow: hidden + @extend .clear-fix + width: 100% + padding-left: 58px + padding-right: 0 + display: inline + +box-sizing(border-box) + float: right + .post-area-new + @extend .open + +box-shadow(none) + textarea + margin: 0 0 10px 0 @@ -416,732 +393,375 @@ ul.userMenu-search-profiles .post-area-new.open textarea - height: 80px + height: 80px textarea.splited-post - box-shadow: none!important - height: 28px + box-shadow: none!important + height: 28px .splited-post-counter - color: rgba(0, 0, 0, 0.3) - font-weight: bold - &:before - content: '\2026' + color: rgba(0, 0, 0, 0.3) + font-weight: bold + &:before + content: '\2026' .post-area-extras - overflow: hidden - height: 0 - text-align: right + overflow: hidden + height: 0 + text-align: right .post-area-new.open > .post-area-extras - height: auto - transition: all .6s linear + height: auto + transition: all .6s linear .post-area-remaining - padding-right: 3px - &.warn - color: #ff0000 - - - + padding-right: 3px + &.warn + color: #ff0000 -/******* WHO TO FOLLOW MODAL*******/ -.modal-wrapper.who-to-follow-modal - .modal-content - padding: 15px - +box-sizing(border-box) - ol - margin: 5px - .open-profile-modal - &:hover - text-decoration: none - .twister-user - position: relative - padding: 5px - .bio - color: rgba(0, 0, 0, 0.6) - font-style: italic - - /******** WHO TO FOLLOW ********/ .who-to-follow - &.module - margin-bottom: 20px - background: white - padding: 20px - width: 100% - li - width: 100% - min-height: auto - border-bottom: 1px solid $main-background-color - margin: 0 - padding-bottom: 10px - margin-top: 10px - &:last-child - border: none - @extend .clear-fix - button - position: absolute - right: 0 - top: 20% - - - small - display: none - h3 - float: left - ol - @extend .clear-fix - clear: both + &.module + margin-bottom: 20px + background: white + padding: 20px + width: 100% + @extend .box-shadow + li + width: 100% + min-height: auto + border-bottom: 1px solid $main-background-color + margin: 0 + padding-bottom: 10px + margin-top: 10px + &:last-child + border: none + @extend .clear-fix + button + position: absolute + right: 0 + top: 20% + + + small + display: none + h3 + float: left + ol + @extend .clear-fix + clear: both .twister-user - position: relative - box-sizing: border-box - background: $bloc-background-color - @extend .clear-fix - @extend .col - @extend .col-3 - width: 100% - min-height: auto - border-bottom: 1px solid $background-light - &:nth-child(4n) - @extend .last - .twister-user-info - width: 80% - button - position: absolute - right: 0 - top: 5% + position: relative + box-sizing: border-box + background: $bloc-background-color + @extend .clear-fix + @extend .col + @extend .col-3 + width: 100% + min-height: auto + border-bottom: 1px solid $background-light + &:nth-child(4n) + @extend .last + img.twister-user-photo - +border-radius(50%) - float: left - vertical-align: middle - display: block - float: left - vertical-align: middle - width: 48px - height: 48px - margin: 10px - background: $main-background-color + +border-radius(50%) + float: left + vertical-align: middle + display: block + float: left + vertical-align: middle + width: 48px + height: 48px + margin: 10px + background: $main-background-color .followers - font-size: 12px - color: $dark-grey - label, a - display: inline-block + font-size: 12px + color: $dark-grey + label, a + display: inline-block .followed-by - color: $main-color-light - font-size: 12px - cursor: pointer - display: block + color: $main-color-light + font-size: 12px + cursor: pointer + display: block .twister-user-name, .twister-by-user-name - font-weight: bold - font-size: 14px - color: $main-color-light - text-decoration: none + font-weight: bold + font-size: 14px + color: $main-color-light + text-decoration: none .twister-user-tag - font-size: 12px - line-height: 14px - opacity: .8 - display: inline-block - letter-spacing: 0px + font-size: 12px + line-height: 14px + opacity: .8 + display: inline-block + letter-spacing: 0px .twister-user-remove - font-size: 13px - opacity: .2 - text-decoration: none - cursor: pointer - position: absolute - padding: 5px - top: -5px - right: -5px - display: inline-block - @extend .icon-cancel - @extend .extend-icon + font-size: 13px + opacity: .2 + text-decoration: none + cursor: pointer + position: absolute + padding: 5px + top: -5px + right: -5px + display: inline-block + @extend .icon-cancel + @extend .extend-icon .twister-user:hover .twister-user-remove - text-decoration: none + text-decoration: none .twister-user-remove:hover - opacity: 1 + opacity: 1 .refresh-toptrends, .twistday-reminder .refresh, .refresh-users - @extend .icon-arrows - @extend .extend-icon - color: $main-color-dark - cursor: pointer - font-size: 11px - font-weight: 500 - text-transform: none - letter-spacing: 0 - float: right - display: block - padding: 4px - margin: 0 0 0 15px - position: relative + @extend .icon-arrows + @extend .extend-icon + color: $main-color-dark + cursor: pointer + font-size: 11px + font-weight: 500 + text-transform: none + letter-spacing: 0 + float: right + display: block + padding: 4px + margin: 0 0 0 15px + position: relative .view-all-users - color: $main-color-dark - cursor: pointer - font-size: 11px - font-weight: 500 - text-transform: none - letter-spacing: 0 - float: right - display: block - padding: 4px - margin: 0 0 0 15px - position: relative + color: $main-color-dark + cursor: pointer + font-size: 11px + font-weight: 500 + text-transform: none + letter-spacing: 0 + float: right + display: block + padding: 4px + margin: 0 0 0 15px + position: relative .refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover - color: $main-color-color - text-decoration: none - background-color: transparent + color: $main-color-color + text-decoration: none + background-color: transparent /***********TOP TRENDS***************/ .toptrends - &.module - margin: 0 0 20px 0 - background: white - padding: 20px - small - display: none - h3 - float: left + &.module + margin: 0 0 20px 0 + background: white + padding: 20px + @extend .box-shadow + small + display: none + h3 + float: left ol.toptrends-list - margin: 0 - margin-bottom: 10px - clear: both - - li - display: inline-block - - a - color: $main-color-light - padding: 3px 8px - display: inline-block - background: $background-light - text-transform: uppercase - font-size: 11px - margin: 3px - font-weight: 500 - - &:hover - background: white - color: $main-color-dark + margin: 0 + margin-bottom: 10px + clear: both + + li + display: inline-block + + a + color: $main-color-light + padding: 3px 8px + display: inline-block + background: $background-light + text-transform: uppercase + font-size: 11px + margin: 3px + font-weight: 500 + + &:hover + background: white + color: $main-color-dark /********* TWISTDAY REMINDER *******/ .twistday-reminder - width: 100% - background: white - @extend .clear-fix - padding: 20px - small - display: none - - -/*********** POPUP MODAL **************/ - -.modal-wrapper - background: white - z-index: 3000 - width: 100% - position: absolute - +box-sizing(border-box) - height: 100% - left: 0 - top: 0 - overflow: hidden - .post-area-new - padding: 10px - -.modal-blackout - background: rgba(0, 0, 0, 0) - z-index: -1 - position: fixed - left: 0 - top: 0 - width: 0 - height: 0 - -.modal-content - @extend .clear-fix - background: $background-light - overflow-y: auto - .postboard h2 - position: fixed - z-index: 2 - margin-top: -60px - margin-left: -60px - span - display: none - - - - -.modal-header - position: relative - background: $main-color-dark - height: 40px - +box-sizing(border-box) - @extend .clear-fix - border-bottom: 1px solid $background-light - - h3 - padding-left: 20px - color: white - line-height: 40px - -.modal-close - @extend .extend-icon - @extend .icon-cancel - position: absolute - right: 10px - top: 0 - font-size: 14px - line-height: 40px - cursor: pointer - color: rgba(white , 0.7) - &:hover - color: white - b - display: none - -.mark-all-as-read - float: right - cursor: pointer - font-size: 1.3em - line-height: 40px - padding: 0 5px - color: white - transition: all .1s linear - display: none -.modal-back:hover, .mark-all-as-read:hover - color: white - -.mark-all-as-read - @extend .extend-icon - @extend .icon-ok - - -.modal-back - @extend .extend-icon - @extend .icon-left - position: absolute - right: 35px - top: 0 - font-size: 14px - line-height: 40px - cursor: pointer - color: rgba(white , 0.7) - &:hover - color: white - b - display: none - -/*********** POPUP PROMPT *************/ - -.prompt-wrapper - background: rgba( 255, 255,255, 1.0 ) - z-index: 5 - position: fixed - top: 50% - left: 50% - width: 600px - margin-left: -300px - box-shadow: 0 0 30px rgba( 0, 0, 0, .6 ) - .modal-buttons - padding: 10px - text-align: right - button:last-child - padding: 5px 20px - -/************ FOLLOWING-CONFIG MODAL **********/ - -.prompt-wrapper.following-config-modal - margin-top: -100px - .modal-content - padding: 10px - text-align: center - .modal-buttons - display: none - h2 - text-transform: none -.following-config-method-buttons - .public-following - background-color: $color-green - margin: 0px 2px - padding: 6px 16px - -/************ RETWIST POSTS MODAL **********/ - -.prompt-wrapper.reTwist - &.prompt-wrapper - margin-top: -110px - .modal-content - padding: 20px 15px - .modal-buttons - .modal-propagate - background-color: $color-green - .post-expand, .post-interactions - display: none - -/********* REPLY POSTS MODAL***************/ - -.prompt-wrapper.reply - &.prompt-wrapper - margin-top: -110px - .modal-buttons, .post-expand, .post-interactions - display: none - .post-area - padding-bottom: 6px - -/****** DIRECT MESSAGES MODAL**********/ - -.modal-wrapper.directMessages - - .post-area-new - display: none - z-index: 5 - background: $main-background-color - position: absolute - bottom: 0 - width: 100% - padding: 0!important - .modal-header - h3 span - display: inline!important - - .modal-content - +box-sizing(border-box) - width: 100% - - .post-photo - height: 48px - width: 48px - .post-text - margin-left: 58px - font-size: .9em - .post-info-name - float: none - .post-info-tag - line-height: 1em - padding: 0 - display: inline - font-size: 80% - margin: 0 0 0 1em - .post-info-sent - position: absolute - left: 50% - top: 10px - display: none - -.direct-messages-list .post - padding: 20px - cursor: pointer - &:after - content: "" - font-family: $symbol-font-family - position: absolute - right: 5px - top: 50% - font-size: 1.1em - margin: -6px 0 0 0 - color: rgba(0, 0, 0, 0.4) - display: none - -.direct-messages-list - .post:hover:after - display: block - -.direct-messages-thread - padding-bottom: 150px - .post - @extend .clear-fix - background: none - left: 0 - margin: 0px 10px 20px 10px - cursor: default - .post-info-time - float: none - display: block - text-align: center - font-size: 10px - margin: 10px 0 - cursor: default - &:hover - color: $main-color-light - - - .post-text:after, .post-text:nth-child(2n):after - content: "" - width: 1px - background: transparent - position: absolute - top: 10px - white-space: normal - - .post-text:after - border-top: solid 7px transparent - border-bottom: solid 7px transparent - border-right: solid 7px white - left: -7px - - .post-text - background: white - margin-right: 60px - margin-left: 60px - position: relative - display: inline-block - max-width: 300px - font-size: .9em - padding: 5px 10px - z-index: 4 - float: left - word-wrap: break-word - max-width: 60% - min-height: 15px - - .post-photo - position: absolute - left: 0 - top: 10px - - - - .post.sent - - .post-text:after - border-top: solid 7px transparent - border-bottom: solid 7px transparent - border-right: none - border-left: solid 7px white - right: -7px - left: auto - .post-text - float: right - .post-photo - position: absolute - right: 0 - left: auto - - - -/********* NEW USER MODAL**************/ - -.modal-wrapper.new-user - - .modal-content - padding: 25px - .modal-close - display: none - .text - margin: 0 0 15px 0 - .emphasis - text-align: center - .secret-key - display: block - margin-top: 8px - color: rgba(0.5, 0, 0, 1) - font-weight: bold - font-size: 110% - -/******** HASHTAG MODAL***********/ - -.modal-wrapper.hashtag-modal - - .postboard - padding: 0 - -/****** CONVERSATION MODAL***********/ - -.modal-wrapper.conversation-modal - - .postboard - padding: 0 - -/****** FOLLOWING MODAL*******/ - -.modal-wrapper.following-modal - - .modal-content - padding: 0 - ol - margin: 5px - .open-profile-modal - &:hover - text-decoration: none - .postboard - h2 - display: none + width: 100% + background: white + @extend .box-shadow + @extend .clear-fix + padding: 20px + small + display: none + + /******* LOADER *************/ .postboard-loading, .loading-roller - clear: both - text-align: center - div - display: inline-block - width: 120px - height: 10px - background-color: $main-color-light - position: relative - margin: 10px 0 0 0 - &:after - content: "" - position: absolute - background-color: white - left: 2px - top: 2px - bottom: 2px - z-index: 999 - animation-name: slide - animation-duration: 1.5s - animation-easing-function: linear - animation-iteration-count: infinite - -webkit-animation-name: slide - -webkit-animation-duration: 1.5s - -webkit-animation-easing-function: linear - -webkit-animation-iteration-count: infinite - -moz-animation-name: slide - -moz-animation-duration: 1.5s - -moz-animation-easing-function: linear - -moz-animation-iteration-count: infinite + clear: both + text-align: center + div + display: inline-block + width: 120px + height: 10px + background-color: $main-color-light + position: relative + margin: 10px 0 0 0 + &:after + content: "" + position: absolute + background-color: white + left: 2px + top: 2px + bottom: 2px + z-index: 999 + animation-name: slide + animation-duration: 1.5s + animation-easing-function: linear + animation-iteration-count: infinite + -webkit-animation-name: slide + -webkit-animation-duration: 1.5s + -webkit-animation-easing-function: linear + -webkit-animation-iteration-count: infinite + -moz-animation-name: slide + -moz-animation-duration: 1.5s + -moz-animation-easing-function: linear + -moz-animation-iteration-count: infinite @keyframes slide - 0% - right: 60px - left: 2px - 5% - left: 2px - 50% - right: 2px - left: 60px - 55% - right: 2px - 100% - right: 60px - left: 2px + 0% + right: 60px + left: 2px + 5% + left: 2px + 50% + right: 2px + left: 60px + 55% + right: 2px + 100% + right: 60px + left: 2px @-webkit-keyframes slide - 0% - right: 100px - left: 2px - 5% - left: 2px - 50% - right: 2px - left: 100px - 55% - right: 2px - 100% - right: 100px - left: 2px + 0% + right: 100px + left: 2px + 5% + left: 2px + 50% + right: 2px + left: 100px + 55% + right: 2px + 100% + right: 100px + left: 2px @-moz-keyframes slide - 0% - right: 60px - left: 2px - 5% - left: 2px - 50% - right: 2px - left: 60px - 55% - right: 2px - 100% - right: 60px - left: 2px + 0% + right: 60px + left: 2px + 5% + left: 2px + 50% + right: 2px + left: 60px + 55% + right: 2px + 100% + right: 60px + left: 2px /* Options*/ .options - .appearance div - clear: both - div - float: left - clear: none - padding: 10px - .label - font-weight: 400 - - #filterLangList - width: 90% - - #filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div - float: none - padding: 0px 4px + .appearance div + clear: both + div + float: left + clear: none + padding: 10px + .label + font-weight: 400 + + #filterLangList + width: 90% + + #filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div + float: none + padding: 0px 4px .suboptions - margin: 5px 30px - border: double 2px rgba(69, 71, 77, 0.1) - height: 0px - padding: 0!important - overflow: hidden - float: right - transition: height .3s linear - -webkit-transition: height .3s linear - -moz-transition: height .3s linear - -o-transition: height .3s linear - -ms-transition: height .3s linear - font-size: .9em - line-height: .9em - font-style: italic - div - float: none!important - span - font-style: normal + margin: 5px 30px + border: double 2px rgba(69, 71, 77, 0.1) + height: 0px + padding: 0!important + overflow: hidden + float: right + transition: height .3s linear + -webkit-transition: height .3s linear + -moz-transition: height .3s linear + -o-transition: height .3s linear + -ms-transition: height .3s linear + font-size: .9em + line-height: .9em + font-style: italic + div + float: none!important + span + font-style: normal /********** AUTOCOMPLETING *********/ .textcomplete-wrapper textarea - display: inline + display: inline ul.dropdown-menu - min-width: 160px - padding: 5px 0 7px - margin: 2px 0 0 - list-style: none - background-color: #fff - border: 1px solid rgba(0, 0, 0, 0.2) - border-bottom: solid 2px #B4C669 - box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2) - li - > li > a - padding: 3px 20px - white-space: nowrap - transition: all 100ms + min-width: 160px + padding: 5px 0 7px + margin: 2px 0 0 + list-style: none + background-color: #fff + border: 1px solid rgba(0, 0, 0, 0.2) + border-bottom: solid 2px #B4C669 + @extend .box-shadow + li + > li > a + padding: 3px 20px + white-space: nowrap + transition: all 100ms /* Language filter messages */ .langFilterSimData - color: rgba( 0, 0, 0, .7 ) - font: 10px "Open Sans", sans-serif - text-align: center + color: rgba( 0, 0, 0, .7 ) + font: 10px "Open Sans", sans-serif + text-align: center .langFilterSimData em - color: #B4C669 + color: #B4C669 @import _responsive