twister HTML + Javascript User Interface
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.

1628 lines
30 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;
}
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;
}
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;
}
/*************************************
**************************** 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 );
}
/*************************************
**************************** MENU *****
**************************************/
.userMenu
{
width: 900px;
position: fixed;
left: 50%;
margin: 0 0 0 -450px;
height: 40px;
background: #45474d;
z-index: 2;
}
.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%;
}
.dashboard
{
width: 320px;
position: fixed;
top: 55px;
}
.module
{
border: solid 1px rgba( 69, 71, 77, .1 );
background: #fff;
}
.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;
box-shadow: 0 2px 5px #65686f;
border: solid 1px rgba( 69, 71, 77, .1 );
}
.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: #45474d;
color: #fff;
}
.userMenu-search-profiles li:hover span
{
color: #fff;
}
.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;
}
.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;
}
.profile-data li
{
border-right: solid 1px rgba( 69, 71, 77, .1 );
padding: 10px 15px 2px 10px;
float: left;
height: 100%;
}
.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: 14px;
display: inline-block;
width: 70px;
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;
}
/***********************************
********************* POST AREA ****
***********************************/
.post-area-new {
padding-bottom: 4px;
}
.post-area-new textarea
{
resize: none;
width: 445px;
display: block;
transition: all .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;
}
.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;
border: solid 1px rgba( 227, 79, 66, .5 );
box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
}
11 years ago
textarea.splited-post {
box-shadow: none!important;
animation-name: sent-part;
animation-duration: 0,5s;
animation-easing-function: linear;
-webkit-animation-name: sent-part;
-webkit-animation-duration: 0.5s;
-webkit-animation-easing-function: linear;
-moz-animation-name: sent-part;
-moz-animation-duration: 0.5s;
-moz-animation-easing-function: linear;
}
@keyframes sent-part {
from {
height: 0px;
}
to {
height: 80px;
}
}
.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;
}
.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;
}
/***********************************
********************* WHO TO FOLLOW
***********************************/
.who-to-follow
{
padding: 10px;
}
.who-to-follow h3
{
display: inline;
}
.twister-user
{
clear: both;
padding-bottom: 10px;
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%;
}
.twister-user-remove:hover
{
opacity: 1;
text-decoration: none;
}
.follow
{
background: none;
border: solid 1px rgba( 0, 0, 0 ,.2 );
padding: 3px 15px;
color: rgba( 0, 0, 0 ,.4 );
}
.follow:hover
{
color: rgba( 0, 0, 0 ,.7 );
}
.refresh-users,
.view-all-users
{
color: #e34f42;
cursor: pointer;
font-size: 12px;
border-left: solid 1px rgba( 69, 71, 77, .1 );
padding-left: 8px;
}
/***********************************
********************* POST BOARD ***
***********************************/
.postboard
{
margin-left: 335px;
/*height: 150%;*/
background: rgba( 255, 255, 255, .5 );
border: solid 1px rgba( 69, 71, 77, .05 );
padding: 10px;
}
.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: 5px;
background: #e34f42;
width: 513px;
}
.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.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,
.post .post
{
background: #ececed;
}
.post:hover
{
cursor: pointer;
}
.post.open:hover
{
background: #fff;
}
.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: 530px;
width: auto;
display: block;
margin: 0 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;
}
/***********************************
******** LOGIN AND NETWORK PAGES ***
***********************************/
.singleBlock
{
background: rgba( 255, 255, 255, .5 );
border: solid 1px rgba( 69, 71, 77, .05 );
padding: 10px;
}
.singleBlock 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: 15px 0 0 0;
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;
}
/*************************************
**************************** 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
{
position: absolute;
top: 50%;
left: 50%;
background: rgba( 255, 255, 255, 1.0 );
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 );
}
.modal-header
{
position: relative;
}
.modal-header h3
{
padding: 5px;
font-weight: bold;
background: #e34f42;
color: #fff;
}
.modal-close
{
position: absolute;
right: 0;
top: 0;
padding: 3px 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 {
position: absolute;
right: 30px;
top: 0;
padding: 3px 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
{
color: #fff;
background: rgba( 0, 0, 0, .1 );
}
.modal-buttons
{
padding: 10px;
text-align: right;
}
.modal-buttons button:last-child
{
padding: 5px 20px;
}
/*************************************
****************** RETWIST POSTS MODAL
**************************************/
.reTwist .modal-wrapper
{
width: 520px;
margin: -100px 0 0 -260px;
}
.reTwist .post-expand,
.reTwist .post-interactions
{
display: none;
}
/*************************************
****************** REPLY POSTS MODAL
**************************************/
.reply .modal-wrapper
{
width: 520px;
margin: -100px 0 0 -260px;
}
.reply .modal-buttons
{
display: none;
}
.reply .post-expand,
.reply .post-interactions
{
display: none;
}
/*************************************
****************** DIRECT MESSAGES MODAL
**************************************/
.directMessages .modal-wrapper
{
width: 540px;
height: 470px;
margin: -200px 0 0 -280px;
overflow-x: hidden;
}
.directMessages .modal-content
{
overflow-y: auto;
height: 300px;
}
.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;
}
/*************************************
****************** NEW USER MODAL
**************************************/
.new-user .modal-wrapper
{
width: 720px;
height: 400px;
margin: -200px 0 0 -280px;
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-wrapper
{
width: 560px;
height: 470px;
margin: -200px 0 0 -280px;
overflow: hidden;
}
.hashtag-modal .modal-content
{
overflow-y: auto;
height: 440px;
}
.hashtag-modal .modal-buttons
{
display: none;
}
.hashtag-modal .postboard
{
margin-left: 0;
}
/*************************************
****************** FOLLOWING MODAL
**************************************/
.following-modal .modal-wrapper
{
width: 560px;
height: 470px;
margin: -200px 0 0 -280px;
overflow-x: hidden;
}
.following-modal .modal-content
{
padding: 15px;
height: 400px;
overflow-y: auto;
}
.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;
}
/*************************************
****************** LOADER ************
**************************************/
.postboard-loading
{
text-align: right;
}
.postboard-loading 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
{
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 */
#playerVol {
float: right;
margin-right: 20px;
}
.volValue {
float: right;
margin-right: -163px;
font: 12px "Open Sans", sans-serif;
}
#notifyForm p, #choseLanguage p, #keysOpt p {
margin-top: 15px;
}
.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;
}
/* Autocomplite*/
.textcomplete-wrapper textarea {
display: inline;
}
ul.dropdown-menu {
position: absolute;
top: 23px;
left: 170px;
z-index: 100;
display: block;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #fff;
border: 1px solid rgba(0,0,0, .2);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0, .2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0, .2);
box-shadow: 0 5px 10px rgba(0,0,0, .2);
}
ul.dropdown-menu li {
line-height: 20px;
}
ul.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font: 13px/20px "Open Sans", sans-serif;
white-space: nowrap;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-ms-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}