You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2095 lines
38 KiB
2095 lines
38 KiB
@font-face |
|
{ |
|
font-family: "Open Sans"; |
|
src: url("OpenSans-Regular.ttf"); |
|
} |
|
@font-face |
|
{ |
|
font-family: "Open Sans"; |
|
src: url("OpenSans-Bold.ttf"); |
|
font-weight: bold; |
|
} |
|
@font-face |
|
{ |
|
font-family: "Symbola"; |
|
src: url("Symbola.ttf"); |
|
} |
|
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, textarea |
|
{ |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
font-size: 100%; |
|
font: inherit; |
|
vertical-align: baseline; |
|
box-sizing: border-box; |
|
font-family: 'Open Sans', sans-serif, Symbola; |
|
} |
|
textarea, input |
|
{ |
|
outline: none; |
|
} |
|
ol, ul, li |
|
{ |
|
list-style: none; |
|
} |
|
a |
|
{ |
|
text-decoration: none; |
|
} |
|
a:hover |
|
{ |
|
text-decoration: underline; |
|
} |
|
blockquote, q |
|
{ |
|
quotes: none; |
|
} |
|
blockquote:before, blockquote:after, |
|
q:before, q:after |
|
{ |
|
content: ''; |
|
content: none; |
|
} |
|
table |
|
{ |
|
border-collapse: collapse; |
|
border-spacing: 0; |
|
} |
|
html, body |
|
{ |
|
height: 100%; |
|
min-height: 100%; |
|
background: #ede9dc; |
|
} |
|
h3 |
|
{ |
|
font-size: 14px; |
|
color: rgba( 0, 0, 0, .5 ); |
|
} |
|
.clearfix:before, |
|
.clearfix:after |
|
{ |
|
display: block; |
|
content: ""; |
|
clear: both; |
|
} |
|
.isFollowing:after { |
|
color: #1a1; |
|
content: '\2714'; |
|
} |
|
|
|
/************************************* |
|
************** BUTTONS *************** |
|
**************************************/ |
|
|
|
button |
|
{ |
|
background: #45474d; |
|
color: rgba( 255, 255, 255, .8 ); |
|
border: none; |
|
padding: 5px 10px; |
|
cursor: pointer; |
|
} |
|
|
|
button:hover |
|
{ |
|
color: #fff; |
|
} |
|
|
|
button.disabled |
|
{ |
|
opacity: .4; |
|
} |
|
|
|
button.disabled:hover |
|
{ |
|
color: rgba( 255, 255, 255, .8 ); |
|
} |
|
|
|
button.follow, button.unfollow, .following-list button.private { |
|
color: rgba( 0, 0, 0, .4 ); |
|
background: none; |
|
border: solid 1px rgba( 0, 0, 0, .2 ); |
|
padding: 3px 15px; |
|
font-size: 12px; |
|
} |
|
|
|
.following-list .public-following { |
|
padding: 4px 16px; |
|
font-size: 12px; |
|
} |
|
|
|
.following-list .public-following:hover { |
|
color: rgba( 0, 0, 0, .4 ); |
|
background: none; |
|
border: solid 1px rgba( 0, 0, 0, .2 ); |
|
padding: 3px 15px; |
|
} |
|
|
|
button.follow:hover, button.unfollow:hover, .following-list button.private:hover { |
|
color: #fff; |
|
background: #45474d; |
|
} |
|
|
|
.follow-suggestions .follow, .follow-suggestions .unfollow { |
|
display: inline-block; |
|
float: right; |
|
margin-right: 10px; |
|
} |
|
|
|
/************************************* |
|
**************************** MENU ***** |
|
**************************************/ |
|
.userMenu |
|
{ |
|
width: 900px; |
|
position: fixed; |
|
left: 50%; |
|
margin: 0 0 0 -450px; |
|
height: 40px; |
|
background: #45474d; |
|
z-index: 2; |
|
} |
|
.userMenu.w1200 { |
|
width: 1200px; |
|
margin-left: -600px; |
|
} |
|
.userMenu:after |
|
{ |
|
content: ""; |
|
position: absolute; |
|
right: 0; |
|
width: 34px; |
|
height: 54px; |
|
background: url(../img/twister_mini.png) no-repeat right 5px; |
|
} |
|
.userMenu > ul |
|
{ |
|
} |
|
.userMenu > ul > li |
|
{ |
|
float: left; |
|
margin: 0; |
|
} |
|
.userMenu > ul > li > a |
|
{ |
|
line-height: 40px; |
|
height: 40px; |
|
padding: 0 20px 0 45px; |
|
display: inline-block; |
|
color: #fff; |
|
font-size: 14px; |
|
font-weight: bold; |
|
opacity: .7; |
|
transition: all .2s linear; |
|
position: relative; |
|
} |
|
.userMenu li > a:hover |
|
{ |
|
text-decoration: none; |
|
opacity: 1; |
|
} |
|
.userMenu li.current > a |
|
{ |
|
color: #fff; |
|
opacity: 1; |
|
} |
|
.userMenu li.userMenu-home > a |
|
{ |
|
background: url(../img/home.png) no-repeat 5px center; |
|
} |
|
.userMenu li.userMenu-home:hover > a |
|
{ |
|
background: url(../img/home.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-home.current > a |
|
{ |
|
background: url(../img/home.png) no-repeat 5px center #b43e34; |
|
} |
|
.userMenu li.userMenu-connections > a |
|
{ |
|
background: url(../img/connections.png) no-repeat 5px center; |
|
padding: 0 30px 0 20px; |
|
opacity: 1; |
|
} |
|
.userMenu li.userMenu-connections:hover > a |
|
{ |
|
background: url(../img/connections.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-connections.current > a |
|
{ |
|
background: url(../img/connections.png) no-repeat 5px center #b43e34; |
|
} |
|
.userMenu li.userMenu-network > a |
|
{ |
|
background: url(../img/network.png) no-repeat 5px center; |
|
} |
|
.userMenu li.userMenu-network:hover > a |
|
{ |
|
background: url(../img/network.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-network.current > a |
|
{ |
|
background: url(../img/network.png) no-repeat 5px center #b43e34; |
|
} |
|
.userMenu li.userMenu-messages > a |
|
{ |
|
background: url(../img/messages.png) no-repeat center center; |
|
padding: 0 25px 0 35px; |
|
opacity: 1; |
|
} |
|
.userMenu li.userMenu-messages:hover > a |
|
{ |
|
background: url(../img/messages.png) no-repeat center center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-messages.current > a |
|
{ |
|
background: url(../img/messages.png) no-repeat center center #b43e34; |
|
} |
|
.userMenu li.userMenu-profile > a |
|
{ |
|
background: url(../img/profile.png) no-repeat 5px center; |
|
} |
|
.userMenu li.userMenu-profile:hover > a |
|
{ |
|
background: url(../img/profile.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-profile.current > a |
|
{ |
|
background: url(../img/profile.png) no-repeat 5px center #b43e34; |
|
} |
|
.userMenu li.userMenu-config |
|
{ |
|
float: right; |
|
position: relative; |
|
margin-right: 40px; |
|
} |
|
.userMenu li.userMenu-search |
|
{ |
|
float: right; |
|
position: relative; |
|
} |
|
.userMenu li.userMenu-config > a |
|
{ |
|
background: url(../img/config.png) no-repeat 5px center; |
|
padding: 0 30px 0 45px; |
|
} |
|
.userMenu li.userMenu-config > a:after |
|
{ |
|
content: "▼"; |
|
position: absolute; |
|
font-size: 10px; |
|
transition: all .2 linear; |
|
} |
|
.userMenu li.userMenu-config:hover > a, |
|
.userMenu li.userMenu-config:active > a |
|
{ |
|
background: url(../img/config.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); |
|
} |
|
.userMenu li.userMenu-messages > a:empty |
|
{ |
|
padding: 0 20px 0 30px; |
|
opacity: .7; |
|
} |
|
.wrapper |
|
{ |
|
width: 900px; |
|
margin: 0 auto; |
|
background: #f8f5ee; |
|
padding: 55px 15px 15px 15px; |
|
position: relative; |
|
z-index: 1; |
|
min-height: 100%; |
|
} |
|
.wrapper.w1200 { |
|
width: 1200px; |
|
padding: 55px 7px 15px 7px; |
|
} |
|
.dashboard.left { |
|
width: 320px; |
|
position: fixed; |
|
top: 55px; |
|
} |
|
|
|
.dashboard.right { |
|
width: 320px; |
|
position: fixed; |
|
top: 55px; |
|
margin-left: 864px; |
|
} |
|
|
|
.module |
|
{ |
|
border: solid 1px rgba( 69, 71, 77, .1 ); |
|
background: #fff; |
|
} |
|
|
|
.dashboard .module { |
|
margin: 0 0 3%; |
|
} |
|
|
|
.messages-qtd |
|
{ |
|
position: absolute; |
|
background: #b43e34; |
|
color: #fff; |
|
padding: 3px; |
|
line-height: 12px; |
|
font-size: 8px; |
|
margin-top: 4px; |
|
} |
|
.userMenu-connections .messages-qtd |
|
{ |
|
margin: 4px 0 0 10px; |
|
} |
|
/******************************************************* |
|
****************** CONFIG SUBMENU & SEARCH RESULTS ***** |
|
*******************************************************/ |
|
.dialog-modal |
|
{ |
|
display: none; |
|
background: rgba( 255, 255, 255, 1 ); |
|
position: absolute; |
|
top: 45px; |
|
right: 10px; |
|
width: 250px; |
|
border: solid 1px rgba( 69, 71, 77, .1 ); |
|
border-right: solid 6px rgba( 227, 79, 66, .82 ); |
|
box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3); |
|
} |
|
.dialog-modal:after |
|
{ |
|
content:""; |
|
width: 1px; |
|
background: transparent; |
|
position: absolute; |
|
top: -10px; |
|
right: 30px; |
|
border-right: solid 10px transparent; |
|
border-left: solid 10px transparent; |
|
border-bottom: solid 10px rgba( 255, 255, 255, 1 ); |
|
} |
|
.userMenu-search .dialog-modal:after |
|
{ |
|
right: auto; |
|
left: 80px; |
|
} |
|
.direct-messages, |
|
.dropdown-menu-item |
|
{ |
|
display: block; |
|
padding: 10px; |
|
font-size: 12px; |
|
border-top: solid 1px rgba( 69, 71, 77, .1 ); |
|
color: rgba( 0, 0, 0, .7 ); |
|
} |
|
.direct-messages:hover, |
|
.userMenu-search-sugestions a:hover, |
|
.userMenu-search-profiles li:hover a |
|
{ |
|
background: #fefedf; |
|
} |
|
.userMenu-search-profiles button |
|
{ |
|
position: absolute; |
|
right: 5px; |
|
bottom: 5px; |
|
background: #fff; |
|
z-index: 2; |
|
} |
|
.userMenu-search input[type="text"] |
|
{ |
|
float: right; |
|
padding: 3px 10px; |
|
margin: 9px 20px 0 0; |
|
border-radius: 10px; |
|
border: none; |
|
height: 16px; |
|
font-size: 13px; |
|
} |
|
.userMenu-search-sugestions |
|
{ |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
} |
|
.userMenu-search-sugestions a |
|
{ |
|
color: rgba( 0, 0, 0, .7 ); |
|
padding: 5px 20px; |
|
font-size: 12px; |
|
display: block; |
|
} |
|
.userMenu-search-profiles a |
|
{ |
|
padding: 7px 4px; |
|
display: block; |
|
position: relative; |
|
z-index: 1; |
|
} |
|
.userMenu-search-profiles .mini-profile-info |
|
{ |
|
padding: 0; |
|
} |
|
.userMenu-search-profiles .mini-profile-photo |
|
{ |
|
width: 36px; |
|
height: 36px; |
|
margin: 0 5px; |
|
} |
|
.userMenu-search-profiles .mini-profile-name |
|
{ |
|
font-size: 12px; |
|
font-weight: bold; |
|
color: rgba( 0, 0, 0, .7 ); |
|
padding: 0 75px 0 15px; |
|
} |
|
/*********************************** |
|
********************* MINI PROFILE |
|
***********************************/ |
|
.mini-profile |
|
{ |
|
margin-bottom: 10px; |
|
} |
|
.mini-profile-info |
|
{ |
|
position: relative; |
|
padding: 5px; |
|
} |
|
.mini-profile-view |
|
{ |
|
display: block; |
|
color: rgba( 0, 0, 0, .5 ); |
|
font-size: 12px; |
|
position: absolute; |
|
top: 32px; |
|
left: 65px; |
|
z-index: 1; |
|
} |
|
.mini-profile-name |
|
{ |
|
padding: 10px 5px 30px 5px; |
|
display: block; |
|
position: relative; |
|
z-index: 2; |
|
} |
|
.following-list .mini-profile-name |
|
{ |
|
padding: 5px 5px 5px 5px; |
|
} |
|
.profile-data |
|
{ |
|
|
|
border-left: none; |
|
border-right: none; |
|
height: 60px; |
|
display: table; |
|
width: 100%; |
|
} |
|
.profile-data li |
|
{ |
|
border-right: solid 1px rgba( 69, 71, 77, .1 ); |
|
padding: 10px 15px 2px 10px; |
|
height: 100%; |
|
display: table-cell; |
|
} |
|
.profile-data li:last-child |
|
{ |
|
border-right: none; |
|
} |
|
.profile-data li a |
|
{ |
|
color: rgba( 0, 0, 0, .5 ); |
|
font-size: 13px; |
|
} |
|
.profile-data li a:hover |
|
{ |
|
color: #b43e34; |
|
} |
|
.profile-data li a span.posts-count, .profile-data li a span.following-count, .profile-data li a span.followers-count |
|
{ |
|
font-weight: bold; |
|
display: block; |
|
font-size: 16px; |
|
} |
|
.mini-profile-actions |
|
{ |
|
position: relative; |
|
width: auto; |
|
display: inline-block; |
|
} |
|
.mini-profile-actions span |
|
{ |
|
color: #e34f42; |
|
cursor: pointer; |
|
font-size: 12px; |
|
display: inline-block; |
|
transition: all .2s linear; |
|
} |
|
.mini-profile-actions ul |
|
{ |
|
height: 0; |
|
overflow: hidden; |
|
position: absolute; |
|
transition: height .2s linear; |
|
background: #fff; |
|
z-index: 3; |
|
} |
|
.mini-profile-actions:hover span |
|
{ |
|
} |
|
.mini-profile-actions:hover span:after |
|
{ |
|
} |
|
.mini-profile-actions:hover ul |
|
{ |
|
height: 118px; |
|
box-shadow: 0 2px 5px #65686f; |
|
} |
|
.mini-profile-actions ul li |
|
{ |
|
white-space: nowrap; |
|
color: rgba( 0, 0, 0, .7 ); |
|
font-size: 13px; |
|
cursor: pointer; |
|
padding: 5px; |
|
margin: 2px; |
|
} |
|
.mini-profile-actions ul li + li |
|
{ |
|
margin: 0 2px; |
|
} |
|
.mini-profile-actions:hover ul li:hover |
|
{ |
|
background: rgba( 0, 0, 0, .7 ); |
|
color: #fff; |
|
} |
|
.mini-profile-info a:hover |
|
{ |
|
text-decoration: none; |
|
} |
|
.who-follow |
|
{ |
|
height: auto; |
|
background-color: rgba(69, 71, 77, 0.1); |
|
overflow: hidden; |
|
font-size: 12px; |
|
} |
|
.show-more-followers { |
|
color: #f11; |
|
font-weight: bold; |
|
cursor: pointer; |
|
float: right; |
|
} |
|
.mini-follower-link |
|
{ |
|
display: inline-block; |
|
margin-right: 10px; |
|
} |
|
.mini-follower-link:before |
|
{ |
|
content: " \2027"; |
|
} |
|
/*********************************** |
|
********************* POST AREA **** |
|
***********************************/ |
|
.post-area-new { |
|
padding-bottom: 4px; |
|
} |
|
.post-area-new textarea |
|
{ |
|
resize: none; |
|
width: 445px; |
|
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-radius: 3px; |
|
border: solid 1px rgba(0, 0, 0, .3 ); |
|
margin-left: 55px; |
|
margin-bottom: 10px; |
|
padding: 4px; |
|
font-size: 13px; |
|
} |
|
|
|
.post-area-new textarea:focus { |
|
border: solid 1px rgba( 227, 79, 66, .5 ); |
|
} |
|
|
|
.mini-profile .post-area-new |
|
{ |
|
padding: 9px; |
|
} |
|
.mini-profile .post-area-new textarea |
|
{ |
|
margin-left: 0; |
|
width: 100%; |
|
} |
|
.post-area-new.open 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-submit |
|
{ |
|
background: #45474d; |
|
color: rgba( 255, 255, 255, .8 ); |
|
border: none; |
|
padding: 5px 10px; |
|
cursor: pointer; |
|
display: inline-block; |
|
margin-top: 4px; |
|
} |
|
.undo-unicode |
|
{ |
|
font-family: sans-serif, Symbola; |
|
} |
|
.post-area-new.open > .post-area-extras |
|
{ |
|
height: 35px; |
|
transition: all .6s linear; |
|
} |
|
.post-area-remaining |
|
{ |
|
font-size: 13px; |
|
} |
|
.post-area-remaining.warn |
|
{ |
|
color: #ff0000; |
|
} |
|
.post .show-more { |
|
font-size: 13px; |
|
font-weight: bold; |
|
margin-left: 60px; |
|
color: rgba(0, 0, 0, 0.5); |
|
} |
|
.post .show-more:before { |
|
content: '💭'; |
|
} |
|
/*********************************** |
|
********************* WHO TO FOLLOW |
|
***********************************/ |
|
.who-to-follow |
|
{ |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
} |
|
.who-to-follow h3 |
|
{ |
|
display: inline; |
|
} |
|
.twister-user |
|
{ |
|
clear: both; |
|
overflow: hidden; |
|
padding-bottom: 4px; |
|
margin-top: 4px; |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
border-top: solid 1px rgba( 69, 71, 77, .1 ); |
|
} |
|
.twister-user + .twister-user |
|
{ |
|
border-top: none; |
|
} |
|
.twister-user-photo |
|
{ |
|
margin: 5px; |
|
display: inline-block; |
|
float: left; |
|
vertical-align: middle; |
|
width: 48px; |
|
height: 48px; |
|
overflow: hidden; |
|
border-radius: 20%; |
|
/*transform: rotate( 45deg );*/ |
|
} |
|
.twister-user-info |
|
{ |
|
position: relative; |
|
} |
|
.twister-user-info span |
|
{ |
|
vertical-align: top; |
|
} |
|
.followers |
|
{ |
|
font-size: 12px; |
|
color: rgba( 0, 0, 0, .6 ); |
|
} |
|
.followed-by |
|
{ |
|
color: #e34f42; |
|
font-size: 13px; |
|
cursor: pointer; |
|
} |
|
.twister-user-name, |
|
.twister-by-user-name |
|
{ |
|
font-weight: bold; |
|
font-size: 14px; |
|
color: #e34f42; |
|
text-decoration: none; |
|
} |
|
.twister-user-tag |
|
{ |
|
font-style: italic; |
|
font-size: 12px; |
|
opacity: .6; |
|
margin-top: 4px; |
|
display: inline-block; |
|
letter-spacing: 0px; |
|
} |
|
.twister-user-remove{ |
|
float: right; |
|
font-size: 12px; |
|
margin: 5px; |
|
opacity: .5; |
|
text-decoration: none; |
|
font-weight: bold; |
|
cursor: pointer; |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
font-size: 120%; |
|
display: none; |
|
} |
|
.twister-user:hover .twister-user-remove{ |
|
display: inline-block; |
|
text-decoration: none; |
|
} |
|
.twister-user-remove:hover{ |
|
opacity: 1; |
|
} |
|
|
|
.refresh-toptrends, |
|
.twistday-reminder .refresh, |
|
.refresh-users, |
|
.view-all-users |
|
{ |
|
color: #e34f42; |
|
cursor: pointer; |
|
font-size: 12px; |
|
} |
|
|
|
/*********************************** |
|
************ TOP TRENDS ************ |
|
***********************************/ |
|
|
|
.module.toptrends { |
|
padding: 8px 4px; |
|
} |
|
|
|
ol.toptrends-list { |
|
margin: 0% 5% 5% 5%; |
|
padding: 5px; |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
border-top: solid 1px rgba( 69, 71, 77, .1 ); |
|
} |
|
|
|
.toptrends h3 { |
|
margin: 5% 0% 2% 5%; |
|
display: inline; |
|
} |
|
|
|
/*********************************** |
|
********* TWISTDAY REMINDER ******** |
|
***********************************/ |
|
|
|
.module.twistday-reminder { |
|
padding: 8px 4px; |
|
} |
|
|
|
.twistday-reminder h3 { |
|
margin: 5% 0% 2% 5%; |
|
display: inline; |
|
} |
|
|
|
.twistday-reminder h4 { |
|
margin: 1% 1% 1% 16%; |
|
font-size: 90%; |
|
color: rgba(0, 0, 0, 0.5); |
|
} |
|
|
|
.twistday-reminder a:hover { |
|
text-decoration: none; |
|
} |
|
|
|
.twistday-reminder .list { |
|
margin: 0% 5% 5% 5%; |
|
padding: 5px; |
|
} |
|
|
|
.twistday-reminder .twister-user-tag, |
|
.twistday-reminder .twister-user-full { |
|
display: block; |
|
margin: 0; |
|
text-align: center; |
|
} |
|
|
|
.twistday-reminder .twisterday { |
|
font-size: 80%; |
|
margin-left: 11%; |
|
} |
|
|
|
.twistday-reminder .twisterday:hover { |
|
cursor: pointer; |
|
} |
|
|
|
/*********************************** |
|
********************* POST BOARD *** |
|
***********************************/ |
|
.postboard |
|
{ |
|
margin-left: 335px; |
|
/*height: 150%;*/ |
|
background: rgba( 255, 255, 255, .5 ); |
|
border: solid 1px rgba( 69, 71, 77, .05 ); |
|
padding: 10px; |
|
} |
|
.w1200 .postboard { |
|
margin-left: 327px; |
|
width: 530px; |
|
} |
|
.postboard h2 |
|
{ |
|
font-weight: bold; |
|
line-height: 40px; |
|
color: rgba( 255, 255, 255, 1 ); |
|
font-variant: small-caps; |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
margin: 0 0 5px 0; |
|
padding-left: 10px; |
|
background: #e34f42; |
|
width: 100%; |
|
} |
|
.postboard h2.fixed |
|
{ |
|
z-index: 2; |
|
border-top: solid 4px #fbf9f6; |
|
} |
|
.postboard-posts |
|
{ |
|
position: relative; |
|
z-index: 1; |
|
} |
|
.postboard-news |
|
{ |
|
float: right; |
|
background: rgba( 0, 0, 0, .2 ); |
|
border: none; |
|
display: inline-block; |
|
margin: 0; |
|
color: rgba( 255, 255, 255, .8 ); |
|
padding: 0 15px; |
|
line-height: 40px; |
|
cursor: pointer; |
|
transition: all .2s linear; |
|
-moz-transition: all .2s linear; |
|
} |
|
.postboard-news:hover |
|
{ |
|
color: #fff; |
|
padding: 0 15px 0 25px; |
|
} |
|
.post, |
|
.post .post, |
|
.post .original.post, |
|
.post .post.open |
|
{ |
|
background: #fff; |
|
position: relative; |
|
margin: 0 0 1px 0; |
|
transition: background .1s linear; |
|
-moz-transition: background .1s linear; |
|
} |
|
.post.new |
|
{ |
|
background: #F7F8E0; |
|
} |
|
.post.open |
|
{ |
|
margin: 10px 0; |
|
} |
|
.postboard-posts > .post.open |
|
{ |
|
/*border-left: none; |
|
border-right: none; |
|
border-top: solid 2px #e34f42; |
|
border-bottom: solid 2px #e34f42;*/ |
|
border: none; |
|
} |
|
.postboard-posts > .post:after |
|
{ |
|
content: ""; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 0; |
|
height: 100%; |
|
background: #e34f42; |
|
transition: all .2s linear; |
|
} |
|
.postboard-posts > .post.open:after |
|
{ |
|
width: 5px; |
|
/*right: -5px;*/ |
|
} |
|
|
|
.post:hover |
|
{ |
|
background: #fefedf; |
|
cursor: pointer; |
|
} |
|
|
|
.post .expanded-post .original { |
|
background: #fefedf; |
|
} |
|
|
|
.post-photo, |
|
.mini-profile-photo |
|
{ |
|
margin: 5px; |
|
display: inline-block; |
|
float: left; |
|
vertical-align: middle; |
|
width: 48px; |
|
height: 48px; |
|
overflow: hidden; |
|
border-radius: 20%; |
|
/*transform: rotate( 45deg );*/ |
|
} |
|
.post-photo img, |
|
.mini-profile-photo img |
|
{ |
|
width: 48px; |
|
height: 48px; |
|
} |
|
.post-info span |
|
{ |
|
vertical-align: top; |
|
} |
|
.post-info-name, |
|
.mini-profile-name |
|
{ |
|
font-weight: bold; |
|
font-size: 14px; |
|
color: #e34f42; |
|
text-decoration: none; |
|
padding-left: 2px; |
|
} |
|
.post-info-tag |
|
{ |
|
font-style: italic; |
|
font-size: 12px; |
|
opacity: .6; |
|
margin-top: 4px; |
|
display: inline-block; |
|
letter-spacing: 0px; |
|
} |
|
.post-info-time |
|
{ |
|
float: right; |
|
font-size: 12px; |
|
margin: 5px; |
|
opacity: .5; |
|
text-decoration: none; |
|
} |
|
.post-text |
|
{ |
|
font-size: 13px; |
|
margin: 2px 10px 4px 60px; |
|
word-wrap: break-word; |
|
} |
|
.post-context |
|
{ |
|
font-size: 11px; |
|
margin: 2px 10px 4px 60px; |
|
} |
|
.post-text a, |
|
.post-context a, |
|
.mini-screen-name |
|
{ |
|
color: #e34f42; |
|
} |
|
.mini-screen-name |
|
{ |
|
font-size: 13px; |
|
top: 40px; |
|
} |
|
.post-retransmited-icon |
|
{ |
|
display: inline-block; |
|
width: 16px; |
|
height: 16px; |
|
background: url(../img/repost.png) no-repeat left center; |
|
vertical-align: middle; |
|
} |
|
.post-interactions |
|
{ |
|
margin: 2px 10px 10px 60px; |
|
text-align: right; |
|
height: 23px; |
|
} |
|
.post-interactions span, |
|
.post-expand |
|
{ |
|
color: #e34f42; |
|
cursor: pointer; |
|
font-size: 12px; |
|
} |
|
.post-expand |
|
{ |
|
position: absolute; |
|
left: 60px; |
|
padding-top: 3px; |
|
} |
|
.related .post-expand |
|
{ |
|
display: none; |
|
} |
|
.post-reply, |
|
.post-propagate, |
|
.post-favorite |
|
{ |
|
background: url(../img/reply.png) no-repeat left center; |
|
padding-left: 18px; |
|
margin-right: 3px; |
|
opacity: .7; |
|
display: none; |
|
} |
|
.post:hover .post-reply, |
|
.post:hover .post-propagate, |
|
.post:hover .post-favorite, |
|
.original.open .post-interactions .post-reply, |
|
.original.open .post-interactions .post-propagate, |
|
.original.open .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 |
|
{ |
|
display: inline-block; |
|
} |
|
.related.post:hover .post-reply, |
|
.related.post:hover .post-propagate, |
|
.related.post:hover .post-favorite |
|
{ |
|
display: inline-block; |
|
} |
|
.open .related .post-reply, |
|
.open .related .post-propagate, |
|
.open .related .post-favorite |
|
{ |
|
display: none!important; |
|
} |
|
.open .related:hover .post-reply, |
|
.open .related:hover .post-propagate, |
|
.open .related:hover .post-favorite |
|
{ |
|
display: inline-block!important; |
|
} |
|
.post-propagate |
|
{ |
|
background: url(../img/repost.png) no-repeat left center; |
|
} |
|
.post-favorite |
|
{ |
|
background: none; |
|
padding-left: 0; |
|
} |
|
.post-favorite:before |
|
{ |
|
content: "★"; |
|
} |
|
.post-reply:hover, |
|
.post-propagate:hover, |
|
.post-favorite:hover |
|
{ |
|
text-decoration: underline; |
|
opacity: 1; |
|
} |
|
.expanded-content |
|
{ |
|
display: none; |
|
padding: 5px 5px 0 5px; |
|
} |
|
.image-preview |
|
{ |
|
max-height: 500px; |
|
max-width: 495px; |
|
width: auto; |
|
display: block; |
|
margin: 0 auto 10px auto; |
|
} |
|
.preview-container |
|
{ |
|
max-height: 500px; |
|
width: 100%; |
|
text-align: center; |
|
overflow-y: auto; |
|
} |
|
.post-stats |
|
{ |
|
margin: 0 10px 0 55px; |
|
border-top: solid 1px rgba( 69, 71, 77, .1 ); |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
} |
|
.post-stats li |
|
{ |
|
display: inline-block; |
|
} |
|
.post-stats li.stat-count |
|
{ |
|
border-right: solid 1px rgba( 69, 71, 77, .1 ); |
|
padding-right: 10px; |
|
} |
|
.post-stats li.stat-count span |
|
{ |
|
display: block; |
|
font-weight: bold; |
|
color: rgba( 0, 0, 0, .5 ); |
|
font-size: 13px; |
|
} |
|
.post-stats li.stat-count span:last-child |
|
{ |
|
font-weight: normal; |
|
} |
|
.post-stats a |
|
{ |
|
position: relative; |
|
} |
|
.post-stats a img |
|
{ |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 100%; |
|
} |
|
.user-name-tooltip |
|
{ |
|
display: none; |
|
position: absolute; |
|
background: #e34f42; |
|
font-size: 12px; |
|
white-space: nowrap; |
|
padding: 3px 5px; |
|
color: #fff; |
|
top: -42px; |
|
left: 0px; |
|
border-radius: 5px; |
|
} |
|
.user-name-tooltip:after |
|
{ |
|
content: ""; |
|
position: absolute; |
|
width: 0; |
|
left: 4px; |
|
bottom: -5px; |
|
border-top: solid 5px #e34f42; |
|
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 #E34F42; |
|
margin-left: 2px; |
|
} |
|
/*********************************** |
|
******** LOGIN AND NETWORK PAGES *** |
|
***********************************/ |
|
.singleBlock |
|
{ |
|
background: rgba( 255, 255, 255, .5 ); |
|
border: solid 1px rgba( 69, 71, 77, .05 ); |
|
padding: 10px; |
|
} |
|
.singleBlock h2, .header-bold |
|
{ |
|
font-weight: bold; |
|
line-height: 40px; |
|
color: rgba( 255, 255, 255, 1 ); |
|
font-variant: small-caps; |
|
border-bottom: solid 1px rgba( 69, 71, 77, .1 ); |
|
margin: 0px 0px 12px 0px; |
|
padding-left: 5px; |
|
background: #e34f42; |
|
} |
|
.singleBlock h3 |
|
{ |
|
font-weight: bold; |
|
margin: 10px 20% 10px 10px; |
|
border-bottom: solid 1px rgba( 0, 0, 0, .2 ); |
|
padding-bottom: 10px; |
|
} |
|
.network.singleBlock ul |
|
{ |
|
padding-left: 20px; |
|
margin-left: 20px; |
|
} |
|
.network.singleBlock ul li |
|
{ |
|
line-height: 36px; |
|
font-size: 13px; |
|
list-style: circle; |
|
} |
|
.network.singleBlock button |
|
{ |
|
padding: 3px 10px; |
|
} |
|
.network.singleBlock ul li > span |
|
{ |
|
font-weight: bold; |
|
opacity: .7; |
|
} |
|
.singleBlock .spam-msg |
|
{ |
|
resize: none; |
|
width: 100%; |
|
display: block; |
|
border-radius: 3px; |
|
padding: 4px; |
|
font-size: 13px; |
|
height: 80px; |
|
border: solid 1px rgba( 227, 79, 66, .5 ); |
|
box-shadow: 0 0 10px rgba(0, 0, 0, .3 ); |
|
line-height: 20px; |
|
position: relative; |
|
margin-left: -20px; |
|
margin-bottom: 10px; |
|
} |
|
.highlight { |
|
background: rgba(255, 230, 0, 0.5); |
|
padding: 3px 5px; |
|
margin: -3px -5px; |
|
line-height: 1.7; |
|
border-radius: 3px; |
|
display:inline-block; |
|
} |
|
.connection-status |
|
{ |
|
border: 2px solid red; |
|
} |
|
.connection-status.connected |
|
{ |
|
border: 2px solid green; |
|
} |
|
.character-limit |
|
{ |
|
float: right; |
|
margin-right: 18px; |
|
} |
|
|
|
/************************************* |
|
************* LOGIN PAGE ************* |
|
**************************************/ |
|
|
|
.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: #fff; |
|
} |
|
|
|
.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: #fff; |
|
transition: background-color 100ms linear; |
|
border: solid 1px rgba( 227, 79, 66, .5 ); |
|
box-shadow: 0 0 10px rgba(0, 0, 0, .3 ); |
|
} |
|
|
|
.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; |
|
} |
|
|
|
/************************************* |
|
************* POPUP MODAL ************ |
|
**************************************/ |
|
|
|
.modal-blackout |
|
{ |
|
position: fixed; |
|
width: 100%; |
|
height: 100%; |
|
left: 0; |
|
top: 0; |
|
background: rgba( 0, 0, 0, .6 ); |
|
display: none; |
|
z-index: 3; |
|
} |
|
.modal-blackout.reply .post |
|
{ |
|
background: #ececed; |
|
padding: 10px 15px; |
|
} |
|
.modal-wrapper |
|
{ |
|
width: 580px; |
|
border-radius: 5px; |
|
overflow: hidden; |
|
position: absolute; |
|
top:10%; |
|
left: 50%; |
|
height: 80%; |
|
margin-left: -290px; |
|
box-shadow: 10px 12px 18px 0px rgba(0,0,0, .3); |
|
background: rgba( 255, 255,255, 1.0 ); |
|
z-index: 3; |
|
} |
|
|
|
.modal-content{ |
|
height: 100%; |
|
overflow-y: auto; |
|
} |
|
|
|
.modal-header |
|
{ |
|
position: relative; |
|
} |
|
.modal-header h3 |
|
{ |
|
padding: 5px 10px; |
|
font-weight: bold; |
|
background: #e34f42; |
|
color: #fff; |
|
} |
|
.modal-close |
|
{ |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
padding: 1px 10px; |
|
cursor: pointer; |
|
color: rgba( 255, 255, 255, .7 ); |
|
font-weight: bold; |
|
border-left: solid 1px rgba( 255, 255, 255, .3 ); |
|
transition: all .1s linear; |
|
} |
|
.modal-close:hover |
|
{ |
|
color: #fff; |
|
background: rgba( 0, 0, 0, .1 ); |
|
} |
|
.modal-back, |
|
.mark-all-as-read { |
|
position: absolute; |
|
right: 30px; |
|
top: 0; |
|
padding: 1px 10px; |
|
cursor: pointer; |
|
color: rgba( 255, 255, 255, .7 ); |
|
font-weight: bold; |
|
border-left: solid 1px rgba( 255, 255, 255, .3 ); |
|
transition: all .1s linear; |
|
display: none; |
|
} |
|
.modal-back:hover, |
|
.mark-all-as-read:hover { |
|
color: #fff; |
|
background: rgba( 0, 0, 0, .1 ); |
|
} |
|
.modal-buttons |
|
{ |
|
padding: 10px; |
|
text-align: right; |
|
} |
|
.modal-buttons button:last-child |
|
{ |
|
padding: 5px 20px; |
|
} |
|
|
|
/************************************* |
|
****************** DIRECT MESSAGES MODAL |
|
**************************************/ |
|
.directMessages .modal-wrapper |
|
{ |
|
overflow-y: auto; |
|
} |
|
.directMessages .modal-content |
|
{ |
|
height: auto; |
|
} |
|
.directMessages .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.direct-messages-list .post |
|
{ |
|
padding: 10px 30px 10px 15px; |
|
cursor: pointer; |
|
} |
|
.direct-messages-list .post:after |
|
{ |
|
content: "►"; |
|
position: absolute; |
|
right: 10px; |
|
top: 50%; |
|
margin: -6px 0 0 0; |
|
color: rgba( 0, 0, 0, .4 ); |
|
} |
|
.direct-messages-thread |
|
{ |
|
padding: 10px; |
|
} |
|
.direct-messages-thread .post |
|
{ |
|
min-height: 82px; |
|
margin-left: 65px; |
|
} |
|
.direct-messages-thread .post:after, |
|
.direct-messages-thread .post:nth-child(2n):after |
|
{ |
|
content: ""; |
|
width: 1px; |
|
background: transparent; |
|
position: absolute; |
|
top: 25px; |
|
} |
|
.direct-messages-thread .post:after |
|
{ |
|
border-top: solid 10px transparent; |
|
border-bottom: solid 10px transparent; |
|
border-right: solid 10px #ececed; |
|
left: -10px; |
|
} |
|
.direct-messages-thread .post-text |
|
{ |
|
margin: 2px 10px 4px 4px; |
|
word-wrap: break-word; |
|
} |
|
.direct-messages-thread .post-photo |
|
{ |
|
position: absolute; |
|
left: -65px; |
|
} |
|
.direct-messages-thread .post.sent |
|
{ |
|
margin-right: 60px; |
|
margin-left: 0; |
|
} |
|
.direct-messages-thread .post.sent:after |
|
{ |
|
border-top: solid 10px transparent; |
|
border-bottom: solid 10px transparent; |
|
border-right: none; |
|
border-left: solid 10px #ececed; |
|
right: -10px; |
|
left: auto; |
|
} |
|
.direct-messages-thread .post.sent .post-text |
|
{ |
|
margin: 2px 10px 4px 4px; |
|
} |
|
.direct-messages-thread .post.sent .post-photo |
|
{ |
|
position: absolute; |
|
right: -65px; |
|
left: auto; |
|
} |
|
.mark-all-as-read { |
|
right: 60px; |
|
} |
|
.mark-all-as-read:before { |
|
content: '\2714'; |
|
} |
|
/************************************* |
|
****************** NEW USER MODAL |
|
**************************************/ |
|
.new-user .modal-wrapper |
|
{ |
|
top: 50%; |
|
width: 720px; |
|
height: 400px; |
|
margin: -200px 0 0 -360px; |
|
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: rgba( .5, 0, 0, 1.0 ); |
|
font-weight: bold; |
|
} |
|
/************************************* |
|
****************** HASHTAG MODAL |
|
*************************************/ |
|
|
|
.hashtag-modal .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.hashtag-modal .postboard |
|
{ |
|
margin-left: 0; |
|
} |
|
/************************************* |
|
****************** CONVERSATION MODAL |
|
*************************************/ |
|
|
|
.conversation-modal .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.conversation-modal .postboard |
|
{ |
|
margin-left: 0; |
|
} |
|
/************************************* |
|
****************** FOLLOWING MODAL |
|
************************************/ |
|
|
|
.following-modal .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.following-modal ol |
|
{ |
|
margin: 5px; |
|
} |
|
.following-modal .open-profile-modal:hover |
|
{ |
|
text-decoration: none; |
|
} |
|
.following-modal .open-profile-modal img |
|
{ |
|
float: none; |
|
} |
|
.following-modal .open-profile-modal span |
|
{ |
|
vertical-align: middle; |
|
} |
|
.following-modal .open-profile-modal span:hover |
|
{ |
|
text-decoration: underline; |
|
} |
|
/************************************* |
|
******************* WHO TO FOLLOW MODAL |
|
*************************************/ |
|
.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 .open-profile-modal span |
|
{ |
|
vertical-align: middle; |
|
} |
|
.who-to-follow-modal .open-profile-modal span:hover |
|
{ |
|
text-decoration: underline; |
|
} |
|
.who-to-follow-modal .follow |
|
{ |
|
float: right; |
|
margin: -30px 10px 0 10px; |
|
} |
|
.who-to-follow-modal .twister-user-info span |
|
{ |
|
vertical-align: bottom; |
|
} |
|
.who-to-follow-modal .bio |
|
{ |
|
font-size: 12px; |
|
color: rgba( 0, 0, 0, .6 ); |
|
} |
|
|
|
/************************************* |
|
****************** POPUP PROMPT ****** |
|
**************************************/ |
|
|
|
.prompt-wrapper |
|
{ |
|
position: fixed; |
|
top: 50%; |
|
left: 50%; |
|
background: #fff; |
|
box-shadow: 10px 12px 18px 0px rgba(0,0,0, .3); |
|
z-index: 5; |
|
width: 600px; |
|
margin-left:-300px; |
|
} |
|
|
|
.prompt-wrapper .modal-header h3{ |
|
background: #E34F42; |
|
} |
|
|
|
/************************************* |
|
****** FOLLOWING-CONFIG PROMPT ******* |
|
**************************************/ |
|
|
|
.following-config-modal |
|
{ |
|
margin-top: -80px; |
|
} |
|
.following-config-modal .modal-content |
|
{ |
|
padding: 10px; |
|
text-align: center; |
|
} |
|
.following-config-modal .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.following-config-method-buttons |
|
{ |
|
padding: 10px; |
|
} |
|
|
|
/************************************* |
|
******** RETWIST POSTS PROMPT ******** |
|
**************************************/ |
|
|
|
.reTwist |
|
{ |
|
margin-top: -100px; |
|
} |
|
.reTwist .post-expand, |
|
.reTwist .post-interactions |
|
{ |
|
display: none; |
|
} |
|
.reTwist .post { |
|
margin: 5px; |
|
padding: 5px; |
|
min-height: 68px; |
|
} |
|
|
|
/************************************* |
|
****************** REPLY POSTS PROMPT |
|
**************************************/ |
|
|
|
.reply |
|
{ |
|
margin-top: -140px; |
|
} |
|
.reply .modal-buttons |
|
{ |
|
display: none; |
|
} |
|
.reply .post-expand, |
|
.reply .post-interactions |
|
{ |
|
display: none; |
|
} |
|
|
|
.reply .textcomplete-wrapper{ |
|
padding-top: 10px; |
|
} |
|
|
|
.reply .textcomplete-wrapper textarea{ |
|
margin: 10px; |
|
width: 580px; |
|
} |
|
|
|
.reply .post-area-extras |
|
{ |
|
margin-right: 10px; |
|
} |
|
|
|
.reply .post { |
|
margin: 10px; |
|
padding: 5px; |
|
min-height: 68px; |
|
} |
|
|
|
/************************************* |
|
**************** LOADER ************** |
|
**************************************/ |
|
|
|
.postboard-loading, .loading-roller { |
|
clear: both; |
|
text-align: center; |
|
} |
|
|
|
.postboard-loading div, .loading-roller div { |
|
display: inline-block; |
|
width: 120px; |
|
height: 10px; |
|
background-color: #b43e34; |
|
border-radius: 100px; |
|
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05); |
|
position: relative; |
|
margin: 10px 0 0 0; |
|
} |
|
|
|
.postboard-loading div:after, .loading-roller div:after { |
|
border-radius: 50px; |
|
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; |
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); |
|
} |
|
|
|
@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 ************* |
|
**************************************/ |
|
|
|
.options .module |
|
{ |
|
display: block; |
|
width: 720px; |
|
padding: 32px 40px; |
|
margin: 8px auto; |
|
background: #fff; |
|
} |
|
|
|
.options .container |
|
{ |
|
margin: 8px 0px 8px 16px; |
|
} |
|
|
|
.options .label { |
|
font-size: 13px; |
|
} |
|
|
|
.options .label-h { |
|
font-weight: bold; |
|
font-size: 14px; |
|
} |
|
|
|
.options button, .options input, .options select { |
|
font-size: 13px; |
|
} |
|
|
|
.options .module input, .options .module select { |
|
background: #f3f3f3; |
|
border: solid 1px #ccc; |
|
transition: box-shadow 0.3s, border 0.3s; |
|
} |
|
|
|
.options .module input:focus, .options .module select:focus { |
|
background: #fff; |
|
transition: background-color 100ms linear; |
|
border: solid 1px rgba( 227, 79, 66, .5 ); |
|
box-shadow: 0 0 10px rgba(0, 0, 0, .3 ); |
|
} |
|
|
|
.volValue, #filterLangAccuracyVal { |
|
font: 12px "Open Sans", sans-serif; |
|
} |
|
|
|
.suboptions { |
|
margin: 5px 30px; |
|
border: double 2px rgba( 69, 71, 77, .1 ); |
|
height: 0px; |
|
overflow: hidden; |
|
transition: height 1s linear; |
|
-webkit-transition: height 1s linear; |
|
-moz-transition: height 1s linear; |
|
-o-transition: height 1s linear; |
|
-ms-transition: height 1s linear; |
|
} |
|
|
|
.options input[type='checkbox'] { |
|
cursor: pointer; |
|
vertical-align: sub; |
|
} |
|
|
|
.options input[type='range'] { |
|
cursor: pointer; |
|
vertical-align: -16px; |
|
} |
|
|
|
.options #filterLangList { |
|
width: 80%; |
|
} |
|
|
|
.langFilterSimData { |
|
color: rgba( 0, 0, 0, .7 ); |
|
font: 10px "Open Sans", sans-serif; |
|
text-align: center; |
|
} |
|
|
|
.langFilterSimData em { |
|
color: rgba( 227, 79, 66, .7 ); |
|
} |
|
|
|
/************************************* |
|
*********** FOLLOWING PAGE *********** |
|
**************************************/ |
|
|
|
.following .header-bold { |
|
display: block; |
|
width: 100%; |
|
margin: 0px auto 12px auto; |
|
} |
|
|
|
.following-list |
|
{ |
|
overflow-y: auto; |
|
} |
|
|
|
.following ol.following-list > li{ |
|
width: 425px; |
|
height: 160px; |
|
margin: 5px; |
|
padding: 8px; |
|
float: left; |
|
border: solid 1px rgba( 69, 71, 77, .1 ); |
|
background: #fff; |
|
} |
|
|
|
.w1200 .following ol.following-list > li{ |
|
width: 385px; |
|
} |
|
|
|
.following ol.following-list > li:hover{ |
|
border: solid 1px rgba( 227, 79, 66, .5 ); |
|
} |
|
|
|
.following-list .mini-screen-name { |
|
position: absolute; |
|
top: 32px; |
|
} |
|
|
|
.following-list .following-config |
|
{ |
|
width: 100%; |
|
position: absolute; |
|
top: 64px; |
|
text-align: center; |
|
} |
|
|
|
.following-list .following-config button |
|
{ |
|
display: inline-block; |
|
} |
|
|
|
.following-list .mini-profile-actions |
|
{ |
|
position: absolute; |
|
top: 0; |
|
right: 8px; |
|
z-index: 10; |
|
} |
|
|
|
.following-list .swarm-status |
|
{ |
|
font: 12px "Open Sans", sans-serif; |
|
display: block; |
|
position: absolute; |
|
top: 120px; |
|
right: 8px; |
|
} |
|
|
|
/************************************* |
|
*********** AUTOCOMPLETING *********** |
|
**************************************/ |
|
|
|
ul.dropdown-menu { |
|
min-width: 160px; |
|
padding: 0; |
|
margin: 0; |
|
list-style: none; |
|
background-color: #fff; |
|
border-radius: 0px; |
|
border: solid 1px rgba( 69, 71, 77, .1 ); |
|
border-right: solid 4px rgba( 227, 79, 66, .82 ); |
|
box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2); |
|
} |
|
|
|
ul.dropdown-menu li { |
|
padding: 3px 20px; |
|
font: 13px/20px "Open Sans", sans-serif; |
|
white-space: nowrap; |
|
} |
|
|
|
ul.dropdown-menu li:hover, |
|
ul.dropdown-menu .active, ul.dropdown-menu .active a { |
|
background-color: #fefedf; |
|
text-decoration: none; |
|
cursor: pointer; |
|
}
|
|
|