mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-08 09:24:25 +03:00
261 lines
13 KiB
CSS
261 lines
13 KiB
CSS
/* -------------------------------------------------------------------
|
|
ОСНОВНЫЕ СТИЛИ
|
|
------------------------------------------------------------------- */
|
|
|
|
body {
|
|
font-size: 12px;
|
|
font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
line-height: 18px;
|
|
color: #000;
|
|
background-color: #fbfcfc;
|
|
}
|
|
|
|
|
|
|
|
/* Ссылки
|
|
---------------------------------------------------- */
|
|
a { color: #3f8ad7; }
|
|
a:hover { color: #f00; }
|
|
|
|
a.link-dashed { border-bottom: 1px dashed #5055b2; text-decoration: none; }
|
|
a.link-dashed:hover { border-color: #f00; }
|
|
|
|
a.link-dotted { text-decoration: none; border-bottom: 1px dotted #5055b2; }
|
|
a.link-dotted:hover { border-color: #f00; }
|
|
|
|
|
|
|
|
/* Заголовки
|
|
---------------------------------------------------- */
|
|
h2.page-header { color: #333; font-size: 27px; line-height: 1em; font-weight: normal; margin-bottom: 20px; }
|
|
h2.page-header span { color: #aaa; }
|
|
h2.page-header i { vertical-align: middle; }
|
|
|
|
h2.header-table { margin-bottom: 10px; font-size: 22px; font-weight: normal; }
|
|
h2.header-table a { color: #275ec2; }
|
|
h2.header-table span { color: #949aa1; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Шапка сайта
|
|
---------------------------------------------------- */
|
|
#header .site-name { font-size: 25px; line-height: 1em; text-transform: lowercase; float: left; padding-top: 11px; margin-right: 30px; margin-left: 18px; }
|
|
#header .site-name a { color: #fff; text-decoration: none; }
|
|
#header .site-name a:hover { color: #eee; }
|
|
|
|
#header .new-messages { float: right; color: #f9de7e; font-size: 11px; margin-right: 11px; margin-top: 18px; line-height: 1em; text-decoration: none; }
|
|
#header .new-messages i { position: relative; }
|
|
|
|
#header .dropdown-user {
|
|
min-width: 89px;
|
|
height: 51px;
|
|
line-height: 47px;
|
|
float: right;
|
|
position: relative;
|
|
padding-right: 60px;
|
|
padding-left: 54px;
|
|
|
|
background: #353535;
|
|
background: -moz-linear-gradient(top, #353535 0%, #020202 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(100%,#020202));
|
|
background: -webkit-linear-gradient(top, #353535 0%,#020202 100%);
|
|
background: -o-linear-gradient(top, #353535 0%,#020202 100%);
|
|
background: -ms-linear-gradient(top, #353535 0%,#020202 100%);
|
|
background: linear-gradient(top, #353535 0%,#020202 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#020202',GradientType=0 );
|
|
}
|
|
#header .dropdown-user.opened { background: #1d1d1d; }
|
|
#header .dropdown-user .dropdown-user-trigger { position: absolute; top: 0; right: 0; width: 36px; height: 51px; border-left: 1px solid #272727; cursor: pointer; }
|
|
#header .dropdown-user .dropdown-user-trigger i { position: absolute; top: 23px; left: 14px; height: 0; width: 0; border: 4px solid transparent; border-top-color: #949aa1; }
|
|
#header .dropdown-user .dropdown-user-trigger:hover,
|
|
#header .dropdown-user.opened .dropdown-user-trigger { background: #093357; }
|
|
#header .dropdown-user .dropdown-user-trigger:hover i,
|
|
#header .dropdown-user.opened .dropdown-user-trigger i { border-top-color: #fff; }
|
|
#header .dropdown-user .username { color: #cfcfcf; font-size: 11px; text-decoration: underline; }
|
|
#header .dropdown-user .username:hover { color: #aaa; }
|
|
#header .dropdown-user .avatar { position: absolute; top: 11px; left: 13px; width: 30px; height: 30px; }
|
|
|
|
.dropdown-user-menu { position: absolute; background: #1d1d1d; border: none; border-top: 1px solid #000; border-radius: 0 0 10px 10px; box-shadow: 0 0 7px rgba(0, 0, 0, .5); z-index: 30; }
|
|
.dropdown-user-menu li { border-bottom: 1px solid #000; border-top: 1px solid #393939; position: relative; }
|
|
.dropdown-user-menu li:last-child { border-bottom: none; }
|
|
.dropdown-user-menu li:last-child a { border-radius: 0 0 10px 10px; }
|
|
.dropdown-user-menu li.item-stat { padding: 20px 17px; font-size: 11px; background: #191919 url(../images/dropdown-user-shadow.png) left bottom repeat-x; }
|
|
.dropdown-user-menu li.item-stat .rating { color: #9dd868; margin-right: 21px; }
|
|
.dropdown-user-menu li.item-stat .rating i { position: relative; top: 2px; }
|
|
.dropdown-user-menu li.item-stat .strength { color: #93d3f2; }
|
|
.dropdown-user-menu li.item-stat .arrow { position: relative; top: 3px; }
|
|
.dropdown-user-menu li.item-stat .icon-synio-star-small { position: relative; top: 2px; }
|
|
.dropdown-user-menu li.item-stat .icon-synio-strength { position: relative; top: 1px; }
|
|
.dropdown-user-menu li a { display: block; height: 50px; padding: 0 10px 0 55px; line-height: 50px; color: #fff; text-decoration: none; }
|
|
.dropdown-user-menu li a:hover { background: #093357; color: #fff; }
|
|
.dropdown-user-menu li .item-icon { position: absolute; top: 15px; left: 17px; width: 21px; height: 21px; background: url(../images/icons-synio.png) no-repeat; }
|
|
.dropdown-user-menu li.item-messages .item-icon { background-position: 0 0; }
|
|
.dropdown-user-menu li.item-profile .item-icon { background-position: -23px 0; }
|
|
.dropdown-user-menu li.item-settings .item-icon { background-position: -46px 0; }
|
|
.dropdown-user-menu li.item-create .item-icon { background-position: -69px 0; }
|
|
.dropdown-user-menu li.item-signout .item-icon { background-position: -92px 0; }
|
|
.dropdown-user-menu li.item-messages .new { position: absolute; top: 15px; right: 7px; cursor: pointer; color: #fff; border-radius: 15px; border: 2px solid #eabe21; line-height: 1em; padding: 2px 7px 3px; }
|
|
|
|
#header .auth { float: right; line-height: 49px; font-size: 11px; margin-right: 24px; }
|
|
#header .auth li { float: left; margin-left: 23px; }
|
|
#header .auth li a { color: #cfcfcf; text-decoration: none; }
|
|
#header .auth li a.sign-in { color: #7dc6ff; }
|
|
|
|
|
|
|
|
/* Футер
|
|
---------------------------------------------------- */
|
|
#footer .copyright { float: right; width: 255px; }
|
|
#footer .copyright .design-by { overflow: hidden; line-height: 15px; margin-top: 30px; }
|
|
#footer .copyright .design-by img { float: left; margin-right: 10px; margin-top: 3px; }
|
|
#footer .copyright .design-by div { font-size: 10px; color: #8b9191; margin-top: 1px; }
|
|
#footer a { color: #000; }
|
|
#footer a:hover { color: #333; }
|
|
#footer .footer-list { float: left; width: 138px; padding-right: 20px; }
|
|
#footer .footer-list li { margin-bottom: 3px; }
|
|
#footer .footer-list .footer-list-header { font-size: 12px; font-weight: bold; margin-bottom: 11px; }
|
|
#footer .footer-list a { color: #4c4c4c; }
|
|
|
|
|
|
|
|
/* Навигация
|
|
---------------------------------------------------- */
|
|
#nav .button.button-write { float: right; margin-left: 35px; margin-top: 2px; }
|
|
#nav .search-header { float: right; }
|
|
#nav .search-header .search-header-show { font-size: 11px; margin-top: 4px; }
|
|
#nav .search-header .search-header-show a { color: #878e96; border-color: #878e96; }
|
|
#nav .search-header .search-header-show a:hover { color: #f00; border-color: #f00; }
|
|
#nav .search-header .search-header-form { position: relative; top: 1px; }
|
|
#nav .search-header .search-header-form .input-text { padding-right: 25px; width: 290px; }
|
|
#nav .search-header .search-header-form .input-submit { position: absolute; top: 6px; right: 5px; width: 16px; height: 16px; border: none; background: url(../images/icons-synio.png) -115px -55px no-repeat; }
|
|
|
|
|
|
|
|
/* Stat
|
|
---------------------------------------------------- */
|
|
.stat-performance { width: 910px; margin: 0 auto 20px; padding: 15px 20px; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
|
|
.stat-performance table { }
|
|
.stat-performance table td { width: 200px; vertical-align: top; }
|
|
.stat-performance h4 { font-weight: bold; }
|
|
|
|
|
|
|
|
/* Userfeed
|
|
---------------------------------------------------- */
|
|
.userfeed-get-more {display:block; width:90%; margin:0px auto; text-align:center; height:2.5em; padding-top:1em;}
|
|
.userfeed-get-more:hover { background: #f0f7fd;}
|
|
.userfeed_loading {background: #F7F7F7 url(../images/loader.gif) no-repeat center;}
|
|
|
|
|
|
|
|
/* Stream
|
|
---------------------------------------------------- */
|
|
.stream-get-more {
|
|
display: block; text-align: center; padding: 12px 0; color: #258fa7; text-decoration: none;
|
|
background: #eefbfc;
|
|
background: -moz-linear-gradient(top, #eefbfc 0%, #d3edf8 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eefbfc), color-stop(100%,#d3edf8));
|
|
background: -webkit-linear-gradient(top, #eefbfc 0%,#d3edf8 100%);
|
|
background: -o-linear-gradient(top, #eefbfc 0%,#d3edf8 100%);
|
|
background: -ms-linear-gradient(top, #eefbfc 0%,#d3edf8 100%);
|
|
background: linear-gradient(top, #eefbfc 0%,#d3edf8 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eefbfc', endColorstr='#d3edf8',GradientType=0 );
|
|
}
|
|
.stream-get-more:hover { background: #eefbfc; color: #258fa7; }
|
|
.stream_loading { background: #f7f7f7 url(../images/loader.gif) no-repeat center; }
|
|
.stream-comment-preview { position: relative; padding: 5px 10px 6px; background: #fefef1; color: #363636; margin-top: 13px; font-size: 11px; border-radius: 3px; box-shadow: 0 2px 4px #e8e8c0 inset; }
|
|
.stream-comment-preview:after { display: block; content: ""; position: absolute; top: -12px; left: 15px; width: 0; height: 0; border-width: 6px; border-color: transparent transparent #e8e8c0 transparent; border-style: solid; }
|
|
|
|
.stream-list { margin: 0 0 20px; }
|
|
.stream-list li { margin-bottom: 23px; min-height: 48px; _height: 48px; border-bottom: 1px solid #e7ebed; padding: 0 0 20px 60px; position: relative; }
|
|
.stream-list li:last-child { border: none; }
|
|
.stream-list li .info { color: #b9c2c2; font-size: 11px; line-height: 1em; margin-bottom: 8px; }
|
|
.stream-list li .info a { color: #275ec2; }
|
|
.stream-list li .info .date { color: #818189; }
|
|
.stream-list li .avatar { position: absolute; top: 0; left: 0; }
|
|
.stream-list li .user-avatar { margin-left: 3px; }
|
|
|
|
|
|
|
|
/* Userfields
|
|
---------------------------------------------------- */
|
|
.userfield-list { width: 450px; }
|
|
.userfield-list li { background: #eee; margin-bottom: 1px; padding: 10px 10px; overflow: hidden; zoom: 1; line-height: 12px; color: #777; }
|
|
.userfield-list li .userfield-actions { float: right; }
|
|
.userfield-list li .userfield_admin_name { font-weight: bold; color: #333; }
|
|
|
|
.userfield-add { text-decoration: none; border-bottom: 1px dashed #70AAE0; }
|
|
.userfield-add:hover { color: #333; border-color: #333; }
|
|
|
|
|
|
|
|
/* Talk
|
|
---------------------------------------------------- */
|
|
.talk-search { padding: 15px; background: #f8fbfe; border-radius: 5px; margin-bottom: 35px; }
|
|
.talk-search header { position: relative; min-height: 27px; }
|
|
.talk-search header .close { position: absolute; top: 3px; right: 0; font-size: 11px; cursor: pointer; }
|
|
.talk-search .talk-search-content { display: none; padding-top: 15px; border-top: 1px solid #fff; }
|
|
.talk-search .talk-search-content p { margin-bottom: 25px; }
|
|
.talk-search.opened header { border-bottom: 1px solid #e8eef5; padding-bottom: 15px; }
|
|
.talk-search.opened .talk-search-content { display: block; }
|
|
|
|
.talk-search.talk-friends header .close { left: 0; right: auto; }
|
|
.talk-search.talk-friends .friend-list { margin-bottom: 15px; font-weight: bold; }
|
|
.talk-search.talk-friends .friend-list li { margin-bottom: 5px; }
|
|
|
|
.talk-blacklist-form { padding: 15px; background: #f8fbfe; border-radius: 5px; margin-bottom: 15px; }
|
|
|
|
|
|
/* Registration form
|
|
---------------------------------------------------- */
|
|
.registration-form .form-item:last-child { margin-bottom: 0; }
|
|
.registration-form dl.form-item dd { position: relative; width: 355px; }
|
|
.registration-form dl.form-item dd .form-item-help { width: 100px; height: 20px; position: absolute; top: 1px; right: 0; background: url(../images/dots.png) 0 12px repeat-x; }
|
|
.registration-form dl.form-item dd .form-item-help i { background-color: #f8fbfe; }
|
|
.registration-form dl.form-item dd .form-item-help i.icon-ok-green { position: absolute; top: 3px; right: 0; }
|
|
|
|
|
|
|
|
/* Misc
|
|
---------------------------------------------------- */
|
|
.avatar-edit { margin-bottom: 15px; }
|
|
.avatar-edit img { vertical-align: bottom; }
|
|
.avatar-edit label { margin-top: 10px; }
|
|
|
|
.drafts { float: right; font-size: 11px; color: #275ec2; }
|
|
|
|
.poll-create { padding: 15px 20px; margin-bottom: 20px; background: #f7f7f7; }
|
|
|
|
.question-list { margin-bottom: 15px; }
|
|
.question-list li { margin-bottom: 5px; }
|
|
.question-list li .input-text { margin-right: 10px; }
|
|
|
|
.content-error { padding: 110px 160px; }
|
|
.content-error h2.page-header { font-weight: bold; font-size: 30px; margin-bottom: 35px; }
|
|
.content-error a { color: #727a90; }
|
|
.content-error a:hover { color: #f00; }
|
|
|
|
.help {
|
|
display: none;
|
|
position: relative;
|
|
padding: 10px 7px 13px;
|
|
background: #fefef1;
|
|
color: #363636;
|
|
margin-top: 13px;
|
|
font-size: 11px;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 5px #e8e8c0 inset;
|
|
}
|
|
.help:before { display: block; content: ""; position: absolute; top: -12px; left: 15px; width: 0; height: 0; border-width: 6px; border-color: transparent transparent #F2F2DD transparent; border-style: solid; }
|
|
.help .help-col { float: left; width: 230px; padding: 0 10px; }
|
|
.help .help-col.help-wide { float: none; width: 96%; }
|
|
.help .help-item { margin-bottom: 20px; }
|
|
.help .help-item:last-child { margin-bottom: 0; }
|
|
.help .help-item h4 { font-family: Verdana, sans-serif; font-size: 11px; color: #727a90; font-weight: bold; }
|
|
.help .help-item h4 a { color: #727a90; border-bottom: 1px dotted #727a90; }
|
|
.help .help-item h4 a { color: #727a90; border-bottom: 1px dotted #727a90; }
|
|
.link-dotted.help-link { font-size: 11px; color: #000; border-color: #000; }
|