|
|
@charset "UTF-8"; |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-Regular.ttf"); font-weight: 400; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-Medium.ttf"); font-weight: 500; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-Bold.ttf"); font-weight: 700; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-Black.ttf"); font-weight: 900; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-Italic.ttf"); font-weight: 400; font-style: italic; } |
|
|
@font-face { font-family: "Droid"; src: url("fonts/DroidSerif-Italic.ttf"); font-weight: 400; font-style: italic; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-MediumItalic.ttf"); font-weight: 500; font-style: italic; } |
|
|
@font-face { font-family: "Roboto"; src: url("fonts/roboto/Roboto-BoldItalic.ttf"); font-weight: 700; font-style: italic; } |
|
|
@font-face { font-family: "Bemio"; src: url("fonts/BemioItalic.otf"); } |
|
|
/****** fontello ****** */ |
|
|
@font-face { font-family: "fontello"; src: url("fonts/fontello/fontello.eot?7584488"); src: url("fonts/fontello/fontello.eot?7584488#iefix") format("embedded-opentype"), url("fonts/fontello/fontello.woff?7584488") format("woff"), url("fonts/fontello/fontello.ttf?7584488") format("truetype"), url("fonts/fontello/fontello.svg?7584488#fontello") format("svg"); 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, ul.userMenu-search-profiles .modal-back: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-users:before, .modal-close:before, .mark-all-as-read:before, .modal-back:before, .icon-down-after:after { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 3px; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: 2px; } |
|
|
|
|
|
.icon-search:before { content: "\e800"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-mail:before, .mini-profile-indicators .userMenu-messages a:before { content: "\e801"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-heart:before { content: "\e802"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-star:before, .post-favorite:before { content: "\e803"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-user:before, .mini-profile-indicators .userMenu-user a:before { content: "\e804"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-camera:before { content: "\e805"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-ok:before, .mark-all-as-read:before { content: "\e806"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-cancel:before, .twister-user-remove:before, .modal-close:before { content: "\e807"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-plus:before, .mini-profile-actions span:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .modal-back:before { content: "\e808"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-minus:before { content: "\e809"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-down:before { content: "\e80a"; } |
|
|
|
|
|
.icon-down-after:after { content: "\e80a"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-lock:before { content: "\e80b"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-quote:before { content: "\e80c"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-comment:before, .post-reply:before { content: "\e80d"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-chat:before, .post .show-more:before { content: "\e80e"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-left:before, .modal-back:before { content: "\e80f"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-right:before { content: "\e810"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-up:before { content: "\e811"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-cog:before, .userMenu li.userMenu-config > a:before { content: "\e812"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-doc:before { content: "\e813"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-arrows:before, .refresh-users:before { content: "\e814"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-twistagain:before, .post-context span:before, .post-propagate:before { content: "\e815"; } |
|
|
|
|
|
/* '' */ |
|
|
.icon-bell:before, .mini-profile-indicators .userMenu-connections a:before { content: "\e816"; } |
|
|
|
|
|
/* '' */ |
|
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } |
|
|
|
|
|
html { line-height: 1; } |
|
|
|
|
|
ol, ul { list-style: none; } |
|
|
|
|
|
table { border-collapse: collapse; border-spacing: 0; } |
|
|
|
|
|
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } |
|
|
|
|
|
q, blockquote { quotes: none; } |
|
|
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } |
|
|
|
|
|
a img { border: none; } |
|
|
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } |
|
|
|
|
|
/* FONTS */ |
|
|
.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right: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 ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after { content: ""; display: table; clear: both; } |
|
|
|
|
|
.userMenu { width: 100%; position: fixed; left: 0; margin: 0; height: 50px; background: #66686b; z-index: 2; } |
|
|
.userMenu ul { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 1180px; max-width: 100%; margin: auto; background: url('../img/twister_logo.png?1408727145') no-repeat 50% 50%; background-size: 20px; } |
|
|
.userMenu ul li { float: left; margin: 0 20px 0 0; position: relative; display: block; } |
|
|
.userMenu ul li > a { line-height: 50px; height: 50px; padding: 0 0.5em; display: inline-block; color: rgba(255, 255, 255, 0.5); font-size: 1.1em; transition: all 0.2s linear; position: relative; font-weight: 500; border-bottom: 3px solid transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
|
|
.userMenu ul li > a:hover { color: white; } |
|
|
.userMenu ul li.current > a { color: white; border-bottom: 3px solid #b4c669; } |
|
|
|
|
|
/* Menu specific entries */ |
|
|
.userMenu li.userMenu-home a span.label { display: block !important; } |
|
|
.userMenu li.userMenu-home .menu-news { position: absolute; top: 6px; right: -6px; background: #b4c669; color: white; padding: 1px 3px; line-height: 12px; display: none; font-size: 9px; font-weight: 700; border-radius: 2px; } |
|
|
.userMenu li.userMenu-home .menu-news.show { display: block; } |
|
|
.userMenu li.userMenu-dhtindicator, .userMenu li.userMenu-connections, .userMenu li.userMenu-messages { display: none !important; } |
|
|
.userMenu li.userMenu-config, .userMenu li.userMenu-search { float: right; position: relative; margin-right: 0; color: white; } |
|
|
.userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a { color: #66686b; } |
|
|
.userMenu li.userMenu-search { padding-top: 5px; } |
|
|
.userMenu li.userMenu-config > a { font-size: 1.5em; } |
|
|
|
|
|
/************************************ ****************** PROFILE MODAL ************************************* */ |
|
|
.profile-modal .modal-wrapper { width: 980px; max-width: 98%; position: absolute; top: 50%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 550px; margin: -275px 0 0 -490px; } |
|
|
.profile-modal .modal-wrapper h3 { display: none; } |
|
|
.profile-modal .profile-data { display: block; margin: auto; padding-top: 0; } |
|
|
.profile-modal .profile-data li { display: inline; margin: 0 5px; float: none; } |
|
|
.profile-modal .profile-data li a { display: inline; } |
|
|
.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; } |
|
|
.profile-modal .modal-content { height: 100%; overflow: hidden; padding: 0 15px 0 0; } |
|
|
.profile-modal .modal-content #profile-posts { padding: 0; } |
|
|
.profile-modal .modal-content .postboard { margin-left: 0; height: 505px; bottom: 0; position: relative; float: right; width: 535px !important; overflow: auto; } |
|
|
.profile-modal .modal-content .postboard-posts { display: block; } |
|
|
.profile-modal .modal-content .postboard-posts .post { padding: 0; } |
|
|
.profile-modal .modal-content .post-interactions { margin: 2px 10px 3px 60px; } |
|
|
.profile-modal .modal-content .profile-card { margin: 0; padding: 0; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
/* Profile card */ |
|
|
.profile-card { height: 100%; background: white; } |
|
|
|
|
|
.profile-card-main { position: relative; text-align: center; word-wrap: break-word; transition: all 0.2s linear; background: none !important; padding: 10px; } |
|
|
.profile-card-main h1 { font-size: 22px; font-weight: bold; display: inline-block; padding-top: 10px; } |
|
|
.profile-card-main:before { content: ""; border: solid 0px white; transition: all 0.2s linear; position: absolute; left: 1px; top: 1px; right: 1px; bottom: 1px; z-index: 0; } |
|
|
.profile-card-main * { position: relative; z-index: 1; } |
|
|
|
|
|
.profile-card-photo { height: 75px; margin: 0 auto; display: block; width: auto; } |
|
|
|
|
|
.profile-card-photo.forEdition { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; height: 75px; margin: 0 auto; display: block; width: 75px; } |
|
|
|
|
|
.profile-bio { padding: 10px; font-style: italic; text-align: center; } |
|
|
|
|
|
.profile-card { float: left; width: 400px; position: relative; padding: 15px; } |
|
|
.profile-card .direct-messages-with-user, .profile-card .follow, .profile-card .profileUnfollow, .profile-card .follow { display: inline-block; position: static; } |
|
|
.profile-card .isFollowing:after { font-size: 15px; position: absolute; } |
|
|
.profile-card .profileUnfollow { background: #aaaaaa; } |
|
|
.profile-card .twister-user-info { text-align: center; width: 100%; padding: 0; } |
|
|
.profile-card .follow { background: #b4c669; } |
|
|
.profile-card .known-followers { text-align: center; clear: both; width: 100%; } |
|
|
|
|
|
#msngrswr { display: none; text-align: center; margin: 10px 0; } |
|
|
|
|
|
.profile-extra-contact { display: none; margin: 0 15px 0 0; font-weight: 500; background: #f3f2f1; padding: 2px 8px 3px 8px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } |
|
|
|
|
|
.bitmessage-ctc, .tox-ctc { font-size: 13px; line-height: 15px; cursor: pointer; color: #66686b; } |
|
|
.bitmessage-ctc:hover, .tox-ctc:hover { color: #b4c669; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.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; /* EDITION PROFILE */ } |
|
|
|
|
|
.forEdition.profile-card { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: auto; background: #f3f2f1; } |
|
|
.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: #f3f2f1; } |
|
|
.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; } |
|
|
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus { background: white; border-color: #aaaaaa; } |
|
|
|
|
|
.input-description { width: 90%; } |
|
|
|
|
|
.input-name { font-size: 20px; } |
|
|
|
|
|
.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city { display: inline-block; } |
|
|
.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: 0.9em; } |
|
|
|
|
|
.profile-edition-buttons { text-align: right; } |
|
|
|
|
|
.selectable_theme.theme_calm { display: none; } |
|
|
|
|
|
/************ POST BOARD ************ */ |
|
|
.postboard, .following { padding-left: 330px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 850px; } |
|
|
|
|
|
.postboard-posts { position: relative; z-index: 1; clear: both; } |
|
|
|
|
|
.postboard-news { font-size: 12px; box-sizing: border-box; position: relative; margin-bottom: 1px; cursor: pointer; padding: 10px; font-weight: 900; clear: both; color: white; text-align: center; text-transform: uppercase; background: #b4c669; } |
|
|
|
|
|
.post, .following li { background: white; box-sizing: border-box; position: relative; margin-bottom: 1px; transition: margin 0.4s ease-out; -moz-transition: margin 0.4s ease-out; } |
|
|
.post .post, .post .original.post, .post .post.open, .post .mini-profile .post.post-area-new, .mini-profile .post .post.post-area-new, .post #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .post .post.post-area-new, .following li .post, .following li .original.post, .following li .post.open, .following li .mini-profile .post.post-area-new, .mini-profile .following li .post.post-area-new, .following li #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .following li .post.post-area-new { background: white; position: relative; margin-bottom: 1px; } |
|
|
|
|
|
.module.open .post, .mini-profile .module.post-area-new .post, #postboard-top .post-area .module.post-area-new .post { color: #414244; } |
|
|
|
|
|
.post:hover { color: #414244; } |
|
|
|
|
|
.post-data { padding: 10px; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.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; } |
|
|
.postboard-posts > .post:after { content: ""; position: absolute; right: 0; top: 0; width: 0; height: 100%; transition: all 0.2s linear; } |
|
|
.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; } |
|
|
|
|
|
.post:hover { cursor: pointer; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.post-photo { margin: 0; display: inline-block; float: left; vertical-align: middle; width: 48px; height: 48px; overflow: hidden; } |
|
|
.post-photo img { width: 100%; height: 100%; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.post-info-name:hover { text-decoration: none; color: #aaaaaa; } |
|
|
|
|
|
.post-info-tag { font-size: 12px; opacity: 0.6; margin-top: 4px; display: inline-block; } |
|
|
|
|
|
.post-info-time { float: right; font-size: 11px; line-height: 14px; text-decoration: none; color: #b3b5b7; } |
|
|
.post-info-time:hover { color: #727578; } |
|
|
|
|
|
.post-text { margin: 0 0 0 58px; word-wrap: break-word; min-height: 25px; padding: 0; } |
|
|
|
|
|
.post-context { font-size: 11px; line-height: 11px; margin: 0 0 1em 0; color: #b3b5b7; } |
|
|
.post-context span:before { 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; } |
|
|
|
|
|
.mini-screen-name { font-size: 13px; color: #66686b; } |
|
|
|
|
|
.post-retransmited-icon { display: none; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.post-expand { color: #b3b5b7; cursor: pointer; font-size: 12px; position: absolute; left: 10px; bottom: 10px; } |
|
|
.post-expand:hover { color: #727578; } |
|
|
|
|
|
.post-favorite { display: none !important; } |
|
|
|
|
|
.post .show-more { display: inline-block; float: right; font-size: 12px; color: #b3b5b7; } |
|
|
.post .show-more:hover { color: #727578; } |
|
|
|
|
|
.expanded-content.show-pic { display: block; } |
|
|
|
|
|
.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite { color: #b3b5b7; } |
|
|
.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover { color: #727578; } |
|
|
|
|
|
.related .post-expand { display: none; margin: 0; } |
|
|
|
|
|
.post-reply, .post-propagate, .post-favorite { padding-left: 10px; display: none; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.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; } |
|
|
.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; } |
|
|
|
|
|
.post-reply:hover, .post-propagate:hover, .post-favorite:hover { color: #727578; } |
|
|
|
|
|
.expanded-content { display: none; padding: 5px 5px 0 5px; } |
|
|
|
|
|
.image-preview { width: 100%; display: block; margin: auto; } |
|
|
|
|
|
.preview-container { max-height: 500px; width: 100%; text-align: center; overflow-y: auto; background: black; } |
|
|
|
|
|
.post-stats { float: left; } |
|
|
.post-stats li { display: inline-block; } |
|
|
.post-stats li.stat-count { font-weight: 700; font-size: 11px; float: left; line-height: 20px; color: llighten(#66686b, 30%); } |
|
|
.post-stats li.stat-count span:last-child { padding-right: 5px; } |
|
|
.post-stats a { 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; } |
|
|
|
|
|
.user-name-tooltip { display: none; position: absolute; background: #6d7073; font-size: 12px; white-space: nowrap; padding: 3px 5px; color: white; top: -42px; left: 0px; } |
|
|
.user-name-tooltip:after { content: ""; position: absolute; width: 0; left: 4px; bottom: -5px; border-top: solid 5px #6d7073; border-left: solid 5px transparent; border-right: solid 5px transparent; } |
|
|
|
|
|
.post-stats a:hover .user-name-tooltip { display: inline-block; } |
|
|
|
|
|
.post-replies .sub-replies { border-left: solid 3px #b4c669; margin-left: 1px; } |
|
|
|
|
|
/* MODAL */ |
|
|
.modal-content .postboard { width: auto !important; padding: 0; clear: none !important; position: relative; } |
|
|
.modal-content .post-text { margin: 0 0 0 40px; } |
|
|
.modal-content .post-photo { width: 30px; height: 30px; } |
|
|
.modal-content .post-photo img { width: 100%; height: 100%; } |
|
|
|
|
|
.following { width: 100% !important; } |
|
|
|
|
|
.following-list li { text-align: center; float: left; width: 30%; padding: 13px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; margin: 0 2% 2% 0; } |
|
|
|
|
|
.following .mini-profile { margin-bottom: 10px; } |
|
|
|
|
|
.following .mini-profile-info { position: relative; } |
|
|
|
|
|
.following .mini-profile-photo { margin: 0 auto 10px auto; display: block; width: 64px; height: 64px; overflow: hidden; background: #e2e1de; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.following .mini-profile-name { font-weight: 900; font-size: 1em; line-height: 1em; padding: 0; text-decoration: none; display: block; color: inherit; display: inline; } |
|
|
|
|
|
.following .mini-screen-name { color: inherit; display: block; margin-bottom: 10px; } |
|
|
|
|
|
.following button, .following .mini-profile-actions span, .mini-profile-actions .following span, .following .modal-back { display: inline-block; margin: 5px 0; } |
|
|
.following button.unfollow, .following .mini-profile-actions span.unfollow, .mini-profile-actions .following span.unfollow, .following .unfollow.modal-back { background-color: #aaaaaa; } |
|
|
.following button.public-following, .following .mini-profile-actions span.public-following, .mini-profile-actions .following span.public-following, .following .public-following.modal-back { background-color: #b4c669; } |
|
|
|
|
|
.mini-profile-actions { position: absolute; width: auto; top: 0; right: -16px; display: inline-block; } |
|
|
.mini-profile-actions span { cursor: pointer !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } |
|
|
.mini-profile-actions span:before { margin: 0; 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: #66686b; z-index: 3; } |
|
|
.mini-profile-actions:hover ul { padding: 8px; height: 112px; } |
|
|
.mini-profile-actions ul li { text-align: left; margin: 0; background: #66686b; white-space: nowrap; color: #aaaaaa; 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; } |
|
|
|
|
|
.following .who-follow { height: auto; background-color: rgba(69, 71, 77, 0.1); overflow: hidden; font-size: 12px; } |
|
|
|
|
|
.following .show-more-followers { color: #ff1111; font-weight: bold; cursor: pointer; float: right; } |
|
|
|
|
|
.following .mini-follower-link { display: inline-block; margin-right: 10px; } |
|
|
.following .mini-follower-link:before { content: " \2027"; } |
|
|
|
|
|
.following a.open-profile-modal { display: inline; text-align: center; color: #66686b; } |
|
|
.following a.open-profile-modal:hover { color: #aaaaaa; } |
|
|
|
|
|
.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; } |
|
|
|
|
|
.following .mini-profile .post-area-new { padding: 9px; } |
|
|
.following .mini-profile .post-area-new textarea { margin-left: 0; width: 100%; } |
|
|
|
|
|
.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); } |
|
|
|
|
|
.following textarea.splited-post { box-shadow: none !important; height: 28px; } |
|
|
|
|
|
.following .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; } |
|
|
.following .splited-post-counter:before { content: "\2026"; } |
|
|
|
|
|
.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; padding: 5px 10px; cursor: pointer; 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; } |
|
|
.following .post-area-remaining.warn { color: red; } |
|
|
|
|
|
.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: "💭"; } |
|
|
|
|
|
.swarm-status { display: none !important; } |
|
|
|
|
|
.following-modal .modal-wrapper { width: 200px; } |
|
|
.following-modal h2 { display: none; } |
|
|
|
|
|
.mini-following-info { width: 45px; height: 45px; text-align: center; background: white; margin: 1%; float: left; } |
|
|
.mini-following-info .mini-screen-name, .mini-following-info .mini-following-name { display: none; } |
|
|
.mini-following-info .mini-profile-photo { height: 45px; width: 45px; border-radius: 0; } |
|
|
|
|
|
/********* LOGIN AND NETWORK PAGES ****** */ |
|
|
.network.singleBlock ul { padding-left: 20px; } |
|
|
.network.singleBlock ul li { line-height: 36px; font-size: 13px; } |
|
|
.network.singleBlock .module { width: 46%; float: left; margin: 0 1% 0 0; padding: 1.5%; background: white; } |
|
|
.network.singleBlock h2 { 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; } |
|
|
|
|
|
.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: 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: ""; display: inline-block; height: 0.8em; width: 0.8em; margin-right: 0.8em; background: #ef5d43; color: white; } |
|
|
span.connection-status.connected:before { background: #b4c669; } |
|
|
|
|
|
.character-limit { float: right; margin-right: 18px; } |
|
|
|
|
|
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty { color: #333333; font-weight: 700; } |
|
|
|
|
|
* { outline: none !important; } |
|
|
|
|
|
li { list-style: none; } |
|
|
|
|
|
html, body { height: 100%; min-height: 100%; background: #e2e1de; color: #66686b; font: 0.95em/1.3em "Roboto", sans-serif; font-weight: 400; } |
|
|
|
|
|
br { display: block; } |
|
|
|
|
|
img { background: #e2e1de; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } |
|
|
|
|
|
a { text-decoration: none; color: #aaaaaa; } |
|
|
a:hover { color: #b4c669; text-decoration: none; } |
|
|
|
|
|
p { padding: 5px 0; } |
|
|
|
|
|
h2, h3 { font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; line-height: 1.8em; } |
|
|
|
|
|
textarea, input[type=text] { font: 0.95em/1.3em "Roboto", sans-serif; font-weight: 400; } |
|
|
|
|
|
/* isFollowing */ |
|
|
.isFollowing:after { color: #b4c669; content: "\e806"; 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; } |
|
|
|
|
|
/************* BUTTONS *********** */ |
|
|
button, .mini-profile-actions span, .modal-back, 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: #66686b; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: none; font-family: "fontello", "Roboto"; cursor: pointer; } |
|
|
button:hover, .mini-profile-actions span:hover, .modal-back:hover, a.button:hover { background: #aaaaaa; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } |
|
|
button.disabled, .mini-profile-actions span.disabled, .disabled.modal-back, a.button.disabled { opacity: 0.5; background-color: #999999; } |
|
|
button.disabled:hover, .mini-profile-actions span.disabled:hover, .disabled.modal-back:hover, a.button.disabled:hover { color: white; } |
|
|
|
|
|
.options { position: relative; } |
|
|
.options .label { font-weight: 700; } |
|
|
.options label { cursor: pointer; } |
|
|
.options input[type=radio] { display: none !important; visibility: hidden; opacity: 0; } |
|
|
.options .postboard-display div { clear: both; } |
|
|
.options .postboard-display div div { float: left; clear: none; padding: 10px; } |
|
|
.options .postboard-display div div .label { font-weight: 400; } |
|
|
.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 .sounds, .options input#t-4:checked ~ .tab-content .keys, .options input#t-5:checked ~ .tab-content .postboard-display, .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; padding: 5px 15px; color: #aaaaaa; background: #f3f2f1; } |
|
|
.options label.tabs:hover { color: #66686b; } |
|
|
.options input:checked + label.tabs { background: white; color: #66686b; } |
|
|
|
|
|
.promoted-posts-only { margin: 0 0; float: right; } |
|
|
.promoted-posts-only li { cursor: pointer; display: inline-block; margin: 0 0 0 5px; padding: 5px 15px; font-size: 0.9em; transition: color 0.1s linear; } |
|
|
.promoted-posts-only li.active { color: #66686b; background: white; cursor: default; } |
|
|
.promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover { color: #66686b; } |
|
|
.promoted-posts-only li.disabled { color: #aaaaaa; background: #f3f2f1; } |
|
|
|
|
|
/* Wrapper and blocks */ |
|
|
.wrapper { max-width: 100%; width: 1180px; margin: 0 auto; padding-top: 70px; position: relative; z-index: 1; min-height: 100%; } |
|
|
|
|
|
.dashboard.left, .dashboard.right { width: 300px; position: fixed; top: 0; padding-top: 70px; height: 100%; } |
|
|
.dashboard.right { display: block; position: absolute; right: 0; } |
|
|
.dashboard.right .module { position: fixed; height: 100%; } |
|
|
|
|
|
/********* CONFIG SUBMENU & SEARCH RESULTS *********** */ |
|
|
.dialog-modal { display: none; background: #66686b; position: absolute; top: 45px; right: -10px; width: 250px; overflow: hidden; } |
|
|
|
|
|
.userMenu-search .dialog-modal:after { right: auto; left: 150px; } |
|
|
|
|
|
.direct-messages, .dropdown-menu-item { display: block; padding: 10px; } |
|
|
|
|
|
ul.userMenu-search-profiles { width: 100%; padding: 0; background: white; } |
|
|
ul.userMenu-search-profiles li { float: none; display: block; padding: 5px 10px; margin: 0; border-bottom: 1px solid #e2e1de; } |
|
|
ul.userMenu-search-profiles .mini-profile-name { font-size: 12px; display: block; margin: 0; padding: 0; } |
|
|
ul.userMenu-search-profiles .mini-profile-photo { width: 30px; height: 30px; margin: 0 10px 0 0; float: left; } |
|
|
ul.userMenu-search-profiles .mini-profile-info { width: 100%; float: none; } |
|
|
ul.userMenu-search-profiles button, ul.userMenu-search-profiles .mini-profile-actions span, .mini-profile-actions ul.userMenu-search-profiles span, ul.userMenu-search-profiles .modal-back { background-color: #66686b; padding: 3px; } |
|
|
ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .mini-profile-actions span:after, .mini-profile-actions ul.userMenu-search-profiles span:after, ul.userMenu-search-profiles .modal-back:after { content: ""; font-family: "fontello"; } |
|
|
|
|
|
.userMenu-search input[type="text"] { float: right; padding: 3px 10px; margin: 9px 20px 0 0; border: none; background: white; box-sizing: border-box; } |
|
|
|
|
|
.userMenu-search-sugestions a { 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: white; } |
|
|
.mini-profile a.button { background: #aaaaaa; margin: 1em auto; } |
|
|
.mini-profile .post-area { margin-top: 1px; margin-bottom: 20px; padding: 0.5em; background: #f3f2f1; } |
|
|
.mini-profile .post-area-new { padding: 0; display: none; margin: 0; } |
|
|
.mini-profile .post-area-new textarea { width: 100%; } |
|
|
|
|
|
.mini-profile-indicators { margin: 0 0 1em 0; background-color: #f3f2f1; } |
|
|
.mini-profile-indicators li { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 100px; float: left; font-size: 0.8em; position: relative; padding: 0; } |
|
|
.mini-profile-indicators li a { position: relative; color: #66686b; display: block; -moz-transition-property: color; -o-transition-property: color; -webkit-transition-property: color; transition-property: color; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; padding: 1em 0; } |
|
|
.mini-profile-indicators li a:hover { background-color: white; } |
|
|
.mini-profile-indicators li a:before { font-size: 2.2em; display: block !important; text-align: center !important; margin: auto !important; padding-top: 0.2em; } |
|
|
|
|
|
.messages-qtd { position: absolute; top: 10px; right: 25px; background: #b4c669; color: white; padding: 1px 3px; line-height: 12px; font-size: 0.8em; font-weight: 700; border-radius: 2px; } |
|
|
|
|
|
.mini-profile-view { display: none; } |
|
|
|
|
|
.mini-profile-name { color: #66686b; font-size: 1.3em; font-weight: 700; padding: 10px 0; display: block; margin: auto; } |
|
|
.mini-profile-name:hover { color: #aaaaaa; } |
|
|
|
|
|
.mini-profile-photo { width: 80px; height: 80px; overflow: hidden; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; margin: auto; } |
|
|
.mini-profile-photo img { min-width: 100%; min-height: 100%; border-radius: 50%; } |
|
|
|
|
|
.profile-data { clear: both; padding: 1em 0; text-align: center; background: white; } |
|
|
.profile-data li { display: block; float: left; width: 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
|
|
.profile-data li.current a { border-bottom: 3px solid #b4c669; } |
|
|
.profile-data li a { color: #66686b; display: inline-block; font-size: 13px; padding-bottom: 3px; } |
|
|
.profile-data li a:hover { color: #aaaaaa; } |
|
|
.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; } |
|
|
|
|
|
.mini-profile-info a:hover { text-decoration: none; } |
|
|
|
|
|
.who-follow { display: block; position: absolute; bottom: 50px; text-align: center; padding: 10px; font-size: 12px; background: white; z-index: 10; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } |
|
|
|
|
|
.show-more-followers { font-weight: 700; display: block; cursor: pointer; float: right; color: #66686b; } |
|
|
|
|
|
.mini-follower-link { display: inline-block; margin: 1px; line-height: 12px; } |
|
|
.mini-follower-link.isFollowing:after { display: none; } |
|
|
.mini-follower-link:after { content: "·"; font-weight: 900; color: #66686b; margin-left: 1px; } |
|
|
|
|
|
/**************** 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; width: 100%; 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: none; background: white; border: 1px solid rgba(0, 0, 0, 0.1); padding: 3px; margin: 5px 0; } |
|
|
|
|
|
#postboard-top { clear: both; position: relative; margin-bottom: 1px; transition: height 0.3s linear; padding: 10px 10px 5px 10px; background: white; overflow: hidden; } |
|
|
#postboard-top.hide { display: none !important; } |
|
|
#postboard-top.show { display: block; } |
|
|
#postboard-top .profile-photo { position: absolute; top: 10px; left: 10px; width: 48px; height: 48px; overflow: hidden; } |
|
|
#postboard-top .profile-photo img { width: 100%; } |
|
|
#postboard-top .post-area { overflow: hidden; width: 100%; padding-left: 58px; padding-right: 0; display: inline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: right; } |
|
|
#postboard-top .post-area .post-area-new textarea { margin: 0 0 5px 0; } |
|
|
|
|
|
.post-area-new.open textarea, .mini-profile .post-area-new textarea, #postboard-top .post-area .post-area-new textarea { height: 80px; } |
|
|
|
|
|
textarea.splited-post { box-shadow: none !important; height: 28px; } |
|
|
|
|
|
.splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; } |
|
|
.splited-post-counter:before { content: "\2026"; } |
|
|
|
|
|
.post-area-extras { overflow: hidden; height: 0; text-align: right; } |
|
|
|
|
|
.post-area-new.open > .post-area-extras, .mini-profile .post-area-new > .post-area-extras, #postboard-top .post-area .post-area-new > .post-area-extras { height: auto; transition: all 0.6s linear; } |
|
|
|
|
|
.post-area-remaining { padding-right: 3px; } |
|
|
.post-area-remaining.warn { color: red; } |
|
|
|
|
|
/***** WHO TO FOLLOW ****** */ |
|
|
.who-to-follow { width: inherit; margin-bottom: 20px; } |
|
|
.who-to-follow small { display: none; } |
|
|
.who-to-follow h3 { float: left; } |
|
|
.who-to-follow ol { clear: both; } |
|
|
|
|
|
.twister-user { clear: both; width: 100%; position: relative; margin: 0 0 1px 0; width: 100%; box-sizing: border-box; float: right; background: white; } |
|
|
|
|
|
.twister-user-photo { display: inline-block; float: left; vertical-align: middle; width: 48px; height: auto; overflow: hidden; margin: 10px; background: #e2e1de; } |
|
|
|
|
|
.twister-user-info { width: 80%; } |
|
|
|
|
|
.followers { font-size: 12px; color: #66686b; } |
|
|
.followers label, .followers a { display: block; } |
|
|
|
|
|
.followed-by { color: #aaaaaa; font-size: 12px; cursor: pointer; display: block; } |
|
|
|
|
|
.twister-user-name, .twister-by-user-name { font-weight: bold; font-size: 14px; color: #aaaaaa; text-decoration: none; } |
|
|
|
|
|
.twister-user-tag { font-size: 12px; line-height: 14px; opacity: 0.8; display: inline-block; letter-spacing: 0px; } |
|
|
|
|
|
.twister-user-remove { font-size: 13px; opacity: 0.2; text-decoration: none; cursor: pointer; position: absolute; padding: 5px; top: -5px; right: -5px; display: inline-block; } |
|
|
|
|
|
.twister-user:hover .twister-user-remove { text-decoration: none; } |
|
|
|
|
|
.twister-user-remove:hover { opacity: 1; } |
|
|
|
|
|
button.follow, .mini-profile-actions span.follow, .follow.modal-back { position: absolute; bottom: 10px; right: 10px; background: #b4c669; } |
|
|
button.follow:hover, .mini-profile-actions span.follow:hover, .follow.modal-back:hover { background: #aaaaaa; } |
|
|
|
|
|
.refresh-users { color: #66686b; 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: #66686b; 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-users:hover, .view-all-users:hover { color: #b4c669; text-decoration: none; background-color: transparent; } |
|
|
|
|
|
/**********TOP TRENDS************** */ |
|
|
ol.toptrends-list { margin: 0; margin-bottom: 10px; } |
|
|
ol.toptrends-list li { display: inline-block; } |
|
|
ol.toptrends-list a { color: #aaaaaa; padding: 3px 8px; display: inline-block; background: #f3f2f1; text-transform: uppercase; font-size: 11px; margin: 3px; font-weight: 500; } |
|
|
ol.toptrends-list a:hover { background: white; color: #66686b; } |
|
|
|
|
|
/********** POPUP MODAL************ */ |
|
|
.modal-blackout { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(170, 170, 170, 0.8); display: none; z-index: 3; } |
|
|
|
|
|
.modal-wrapper { position: absolute; top: 50%; left: 50%; overflow: hidden; } |
|
|
.modal-wrapper .post-area-new { padding: 10px; } |
|
|
|
|
|
.modal-content { background: #f3f2f1; padding: 20px; } |
|
|
.modal-content .postboard h2 { position: fixed; z-index: 2; margin-top: -60px; margin-left: -60px; width: 100px; width: 520px; } |
|
|
.modal-content .postboard h2 span { display: none; } |
|
|
.modal-content .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; } |
|
|
|
|
|
.modal-header { position: relative; background: #66686b; height: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } |
|
|
.modal-header h3 { font-size: 0.8em; line-height: 40px; float: left; font-weight: 900; padding-left: 10px; color: white; display: block !important; } |
|
|
|
|
|
.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: left; cursor: pointer; font-size: 1.3em; line-height: 40px; padding: 0 5px; color: #aaaaaa; transition: all 0.1s linear; display: none; } |
|
|
|
|
|
.modal-back:hover, .mark-all-as-read:hover { color: #b4c669; } |
|
|
|
|
|
.modal-back { margin: 0; background: #b4c669; display: none !important; float: left; } |
|
|
|
|
|
.modal-buttons { padding: 10px; text-align: right; } |
|
|
|
|
|
/*********** RETWIST POSTS MODAL ********* */ |
|
|
.reTwist .modal-wrapper { width: 520px; top: 20%; margin: 0 0 0 -260px; } |
|
|
.reTwist .post-expand, .reTwist .post-interactions { display: none; } |
|
|
|
|
|
/******** REPLY POSTS MODAL************** */ |
|
|
.reply .modal-wrapper { width: 520px; top: 20%; margin: 0 0 0 -260px; } |
|
|
.reply .modal-buttons, .reply .post-expand, .reply .post-interactions { display: none; } |
|
|
|
|
|
/***** DIRECT MESSAGES MODAL********* */ |
|
|
.directMessages .post-area-new { display: none; padding: 20px; z-index: 5; background: #e2e1de; } |
|
|
.directMessages .post-area-new .modal-header h3 span { display: inline !important; } |
|
|
.directMessages .modal-wrapper { width: 520px; height: 490px; top: 10%; margin: 0 0 0 -260px; overflow-x: hidden; } |
|
|
.directMessages .modal-content { overflow-y: auto; height: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 520px; } |
|
|
.directMessages .modal-buttons { display: none; } |
|
|
.directMessages .post-photo { height: 48px; width: 48px; } |
|
|
.directMessages .post-text { margin-left: 58px; font-size: 0.9em; } |
|
|
.directMessages .post-info-name { float: none; } |
|
|
.directMessages .post-info-tag { line-height: 1em; padding: 0; display: inline; font-size: 80%; margin: 0 0 0 1em; } |
|
|
|
|
|
.direct-messages-list .post { padding: 10px 30px 10px 15px; cursor: pointer; } |
|
|
.direct-messages-list .post:after { content: ""; font-family: "fontello"; position: absolute; right: 10px; top: 50%; font-size: 1.2em; 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 .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: #aaaaaa; } |
|
|
.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************* */ |
|
|
.new-user .modal-wrapper { width: 520px; height: 600px; top: 10%; margin: 0 0 0 -260px; overflow-x: hidden; overflow-y: hidden; } |
|
|
.new-user .modal-content { margin: 10px 10px 10px 10px; } |
|
|
.new-user .modal-buttons, .new-user .modal-close { display: none; } |
|
|
.new-user .text { margin: 0 0 15px 0; } |
|
|
.new-user .emphasis { font-size: 18px; text-align: center; } |
|
|
.new-user .secret-key { color: black; font-weight: bold; } |
|
|
|
|
|
/******* HASHTAG MODAL********** */ |
|
|
.hashtag-modal .modal-wrapper { width: 520px; height: 600px; top: 10%; margin: 0 0 0 -260px; overflow: hidden; } |
|
|
.hashtag-modal .modal-content { overflow-y: auto; height: 500px; } |
|
|
.hashtag-modal .modal-buttons { display: none; } |
|
|
.hashtag-modal .postboard { padding: 0; } |
|
|
|
|
|
/***** CONVERSATION MODAL********** */ |
|
|
.conversation-modal .modal-wrapper { position: absolute; width: 520px; height: 575px; top: 10%; margin: 0 0 0 -260px; overflow: hidden; background: white; } |
|
|
.conversation-modal .modal-content { overflow-y: auto; height: 90%; } |
|
|
.conversation-modal .modal-buttons { display: none; } |
|
|
.conversation-modal .postboard { padding: 0; } |
|
|
|
|
|
/***** FOLLOWING MODAL****** */ |
|
|
.following-modal .modal-wrapper { width: 520px; top: 10%; height: 400px; margin: 0 0 0 -260px; overflow-x: hidden; } |
|
|
.following-modal .modal-content { height: 300px; overflow-y: auto; padding: 0; } |
|
|
.following-modal .modal-buttons { display: none; } |
|
|
.following-modal ol { margin: 5px; } |
|
|
.following-modal .open-profile-modal:hover { text-decoration: none; } |
|
|
|
|
|
/****** WHO TO FOLLOW MODAL****** */ |
|
|
.who-to-follow-modal .modal-wrapper { width: 520px; top: 10%; height: 455px; margin: 0 0 0 -260px; overflow-x: hidden; } |
|
|
.who-to-follow-modal .modal-content { padding: 15px; height: 400px; overflow-y: auto; } |
|
|
.who-to-follow-modal .modal-buttons { display: none; } |
|
|
.who-to-follow-modal ol { margin: 5px; } |
|
|
.who-to-follow-modal .open-profile-modal:hover { text-decoration: none; } |
|
|
.who-to-follow-modal .twister-user { position: relative; padding: 5px; } |
|
|
.who-to-follow-modal .twister-user-photo { position: relative; left: 0; float: left; display: block; } |
|
|
.who-to-follow-modal .twister-user-info { position: relative; padding-left: 70px; width: auto; } |
|
|
.who-to-follow-modal .bio { color: rgba(0, 0, 0, 0.6); font-style: italic; } |
|
|
|
|
|
/****** LOADER ************ */ |
|
|
.postboard-loading { text-align: center; } |
|
|
.postboard-loading div { display: inline-block; width: 120px; height: 10px; background-color: #aaaaaa; position: relative; margin: 10px 0 0 0; } |
|
|
.postboard-loading div: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; } } |
|
|
@-webkit-keyframes slide { 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; } } |
|
|
/* Options */ |
|
|
.suboptions { margin: 5px 30px; border: double 2px rgba(69, 71, 77, 0.1); height: 0px; padding: 0 !important; overflow: hidden; float: right; transition: height 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; font-size: 0.9em; line-height: 0.9em; font-style: italic; } |
|
|
.suboptions div { float: none !important; } |
|
|
.suboptions span { font-style: normal; } |
|
|
|
|
|
/* Autocomplite */ |
|
|
.textcomplete-wrapper textarea { display: inline; } |
|
|
|
|
|
ul.dropdown-menu { position: absolute; top: 23px; left: 155px; z-index: 100; display: block; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: white; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } |
|
|
ul.dropdown-menu li { line-height: 20px; } |
|
|
ul.dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; white-space: nowrap; -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; } |
|
|
|
|
|
@media (max-width: 1200px) { .wrapper { width: 900px; } |
|
|
.dashboard.right { display: none; } |
|
|
.userMenu ul { width: 900px; } |
|
|
.postboard { width: 100%; } |
|
|
.following-list li { width: 47%; float: left; margin: 0 2% 2% 0; font-size: 80%; } } |
|
|
@media (max-width: 900px) { .profile-modal .modal-wrapper { margin-left: 0; left: 1%; } } |
|
|
@media (max-width: 600px) { .dashboard.left, .postboard { position: static; width: 100%; } |
|
|
.postboard { margin: 0; padding: 10px; } |
|
|
.who-to-follow, .toptrends { display: none; } |
|
|
.mini-profile .post-area, .mini-profile .post-area-new { display: none; } |
|
|
.following-list li { width: 98%; float: none; margin: 2% 1%; } }
|
|
|
|
