diff --git a/abort.html b/abort.html index a136425..67526c8 100644 --- a/abort.html +++ b/abort.html @@ -3,7 +3,18 @@ Aborting... - + diff --git a/css/img/ajax-loader.gif b/css/img/ajax-loader.gif new file mode 100644 index 0000000..fd1a189 Binary files /dev/null and b/css/img/ajax-loader.gif differ diff --git a/css/img/config.png b/css/img/config.png new file mode 100644 index 0000000..1fc05c7 Binary files /dev/null and b/css/img/config.png differ diff --git a/css/img/connections.png b/css/img/connections.png new file mode 100644 index 0000000..7e908a7 Binary files /dev/null and b/css/img/connections.png differ diff --git a/css/img/edit.png b/css/img/edit.png new file mode 100644 index 0000000..9314c8e Binary files /dev/null and b/css/img/edit.png differ diff --git a/css/img/genericPerson.png b/css/img/genericPerson.png new file mode 100644 index 0000000..c005cda Binary files /dev/null and b/css/img/genericPerson.png differ diff --git a/css/img/grayed_avatar_placeholder_24.png b/css/img/grayed_avatar_placeholder_24.png new file mode 100644 index 0000000..5238e05 Binary files /dev/null and b/css/img/grayed_avatar_placeholder_24.png differ diff --git a/css/img/home.png b/css/img/home.png new file mode 100644 index 0000000..c5cacfe Binary files /dev/null and b/css/img/home.png differ diff --git a/css/img/icons-18-black.png b/css/img/icons-18-black.png new file mode 100644 index 0000000..7916463 Binary files /dev/null and b/css/img/icons-18-black.png differ diff --git a/css/img/icons-18-white.png b/css/img/icons-18-white.png new file mode 100644 index 0000000..3419b81 Binary files /dev/null and b/css/img/icons-18-white.png differ diff --git a/css/img/icons-36-black.png b/css/img/icons-36-black.png new file mode 100644 index 0000000..043bfcd Binary files /dev/null and b/css/img/icons-36-black.png differ diff --git a/css/img/icons-36-white.png b/css/img/icons-36-white.png new file mode 100644 index 0000000..12455c9 Binary files /dev/null and b/css/img/icons-36-white.png differ diff --git a/css/img/loader.gif b/css/img/loader.gif new file mode 100644 index 0000000..d784bb4 Binary files /dev/null and b/css/img/loader.gif differ diff --git a/css/img/messages.png b/css/img/messages.png new file mode 100644 index 0000000..cd7c5ad Binary files /dev/null and b/css/img/messages.png differ diff --git a/css/img/network.png b/css/img/network.png new file mode 100644 index 0000000..3f28248 Binary files /dev/null and b/css/img/network.png differ diff --git a/css/img/profile.png b/css/img/profile.png new file mode 100644 index 0000000..8c1ce91 Binary files /dev/null and b/css/img/profile.png differ diff --git a/css/img/reply.png b/css/img/reply.png new file mode 100644 index 0000000..e9f38be Binary files /dev/null and b/css/img/reply.png differ diff --git a/css/img/repost.png b/css/img/repost.png new file mode 100644 index 0000000..445682e Binary files /dev/null and b/css/img/repost.png differ diff --git a/css/img/spinner-medium.gif b/css/img/spinner-medium.gif new file mode 100644 index 0000000..9c7ebfc Binary files /dev/null and b/css/img/spinner-medium.gif differ diff --git a/css/img/spinner-small.gif b/css/img/spinner-small.gif new file mode 100644 index 0000000..6e5bace Binary files /dev/null and b/css/img/spinner-small.gif differ diff --git a/css/img/spinner.gif b/css/img/spinner.gif new file mode 100644 index 0000000..6e5bace Binary files /dev/null and b/css/img/spinner.gif differ diff --git a/css/img/tornado_avatar.png b/css/img/tornado_avatar.png new file mode 100644 index 0000000..e48b4b1 Binary files /dev/null and b/css/img/tornado_avatar.png differ diff --git a/css/img/twister_mini.png b/css/img/twister_mini.png new file mode 100644 index 0000000..abe3801 Binary files /dev/null and b/css/img/twister_mini.png differ diff --git a/css/img/wash-white-30.png b/css/img/wash-white-30.png new file mode 100644 index 0000000..8ee20c1 Binary files /dev/null and b/css/img/wash-white-30.png differ diff --git a/css/orange/OpenSans-Bold.ttf b/css/orange/OpenSans-Bold.ttf new file mode 100644 index 0000000..fd79d43 Binary files /dev/null and b/css/orange/OpenSans-Bold.ttf differ diff --git a/css/orange/OpenSans-Italic.ttf b/css/orange/OpenSans-Italic.ttf new file mode 100644 index 0000000..c90da48 Binary files /dev/null and b/css/orange/OpenSans-Italic.ttf differ diff --git a/css/orange/OpenSans-Regular.ttf b/css/orange/OpenSans-Regular.ttf new file mode 100644 index 0000000..db43334 Binary files /dev/null and b/css/orange/OpenSans-Regular.ttf differ diff --git a/css/orange/OpenSansCondensed300.ttf b/css/orange/OpenSansCondensed300.ttf new file mode 100644 index 0000000..97c355b Binary files /dev/null and b/css/orange/OpenSansCondensed300.ttf differ diff --git a/css/orange/profile.css b/css/orange/profile.css new file mode 100644 index 0000000..458260d --- /dev/null +++ b/css/orange/profile.css @@ -0,0 +1,238 @@ +/************************************** +********************* PROFILE PHOTO *** +***************************************/ +.profile-card +{ + padding: 7px; + background: rgba( 255, 255, 255, .5 ); + border: solid 1px rgba( 69, 71, 77, .05 ); + position: relative; +} +.profile-card-main +{ + width: 540px; + text-align: center; + position: relative; + transition: all .2s linear; +} +.profile-card-main:before +{ + content: ""; + border: solid 0px #fff; + transition: all .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 +{ + width: 74px; + height: 74px; + border: solid 6px #45474d; + border-radius: 40%; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + box-sizing: content-box; + float:left; + top: 50%; + background-color: #a12a28; + +} +.profile-card-main h1 +{ + font-size: 24px; + font-weight: bold; + color: #fff; +} +.profile-card-main h2 +{ + color: #fff; +} +.profile-card .direct-messages, +.profile-card .direct-messages-with-user, +.profile-card .follow +{ + display: block; + position: absolute; + bottom: 20px; + right: 10px; + padding: 10px; + font-size: 12px; + width: 120px; + text-align: center; + color: rgba( 0, 0, 0, .7 ); + background: rgba( 0, 0, 0, .1 ); + border: none; + transition: all .2s linear; +} +.profile-card .follow +{ + right: 135px; +} +.profile-card .direct-messages:hover, +.profile-card .direct-messages-with-user:hover, +.profile-card .follow:hover +{ + background: rgba( 0, 0, 0, .3 ); +} +.profile-card.forEdition +{ + margin: 0 auto; + width: 540px; +} +.forEdition .profile-card-photo +{ + border: solid 2px #fff; + position: relative; + cursor: pointer; + transition: all .2s linear; +} +.forEdition .profile-card-main:hover:after, +.forEdition .profile-card-photo:after +{ + content: ""; + width: 36px; + height: 36px; + position: absolute; + top: 10px; + right: 10px; + background: url(../img/edit.png) no-repeat right top; +} +.forEdition .profile-card-main:hover:before +{ + border: solid 5px #fff; +} +.forEdition .profile-card-main h2 +{ + margin-bottom: 8px; +} +.forEdition .profile-card-main input +{ + display: block; + margin: 0 auto; + background: rgba( 0, 0, 0, .1 ); + border: none; + padding: 6px 4px; + color: #fff; + margin-bottom: 4px; + text-align: center; + transition: all .2s linear; +} +.forEdition .profile-card-main input:hover, +.forEdition .profile-card-main input:focus, +.forEdition .profile-card-photo:hover +{ + background: rgba( 0, 0, 0, .3 ); +} +.input-description +{ + width: 90%; +} +.input-name +{ + font-size: 20px; +} +.forEdition .profile-card-main .input-website, +.forEdition .profile-card-main .input-city +{ + display: inline-block; +} +.profile-edition-buttons +{ + padding: 10px; + text-align: right; +} +/************************************* +****************** PROFILE MODAL +**************************************/ +.profile-modal .modal-wrapper +{ + width: 580px; + border-radius: 5px; + overflow: hidden; + position: absolute; + top:10%; + height: 80%; + margin-left: -300px; + +} +.profile-modal .modal-content +{ + padding: 3px; + height: 90%; +} +.profile-modal .profile-data +{ + display: inline-block; + margin-left: -4px; + border-bottom: 0; +} +.profile-modal .postboard +{ + margin-left: 0; + padding: 5px 0 5px 0; + height: 75%; +} +.profile-modal .postboard h2 +{ + width: auto; +} +.profile-modal .postboard-posts +{ + display: block; + height: 90%; + overflow: auto; +} +.profile-modal .profile-card-main +{ + background: #45474d; + color: white; + width:100%; +} +.profile-modal .profile-card-main a { + color: #8bb9e0; +} +.profile-modal .postboard-posts .post +{ + padding: 0; +} +.profile-modal .post-interactions +{ + margin: 2px 10px 3px 60px; +} +.profile-modal .profile-card +{ + margin: 0; + padding: 0; +} +/* +.profile-card-main +{ + height: 200px; +} +*/ +.profile-modal .direct-messages, +.profile-modal .direct-messages-with-user, +.profile-modal .follow +{ + bottom: 10px; +} + +h1.profile-name { + display: inline; +} +h2.profile-screen-name { + display: inline; +} + +.profile-modal .modal-buttons { + display: none; +} \ No newline at end of file diff --git a/css/orange/style.css b/css/orange/style.css new file mode 100644 index 0000000..714bf9a --- /dev/null +++ b/css/orange/style.css @@ -0,0 +1,1574 @@ +@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 ); +} +/************************************* +**************************** 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 ); +} +.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; +} +.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; +} + +/* 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; +} diff --git a/following.html b/following.html index a57e6d4..ce35159 100644 --- a/following.html +++ b/following.html @@ -3,8 +3,18 @@ Following - - + diff --git a/home.html b/home.html index 81c8481..b805c63 100644 --- a/home.html +++ b/home.html @@ -3,9 +3,6 @@ twister - - - @@ -30,6 +27,20 @@ + @@ -37,7 +48,8 @@ - + + + + + + +
@@ -445,5 +525,15 @@ + + diff --git a/login.html b/login.html index 8f7c6f9..9c4d538 100644 --- a/login.html +++ b/login.html @@ -3,7 +3,18 @@ twister login - + diff --git a/network.html b/network.html index 37089eb..9652ddd 100644 --- a/network.html +++ b/network.html @@ -3,7 +3,18 @@ Network status - + diff --git a/options.html b/options.html index e4860d1..d5c1299 100644 --- a/options.html +++ b/options.html @@ -3,7 +3,18 @@ twister login - + @@ -22,6 +33,13 @@ @@ -114,7 +132,22 @@
- +
+
+

Theme

+
+ +
+
+
+ + diff --git a/profile-edit.html b/profile-edit.html index dd8243f..648cc84 100644 --- a/profile-edit.html +++ b/profile-edit.html @@ -2,8 +2,18 @@ Edit profile - - +