|
07.12.2014
|
|
Знаток
О пользователе
Сообщений: 58
ВкоптоКарма: 29
[#1]
|
Прототип нового дизайна
Если нашли ошибку, обязательно напишите, не забываем скриншоты
Прототип нового дизайна v2.0 bluid 10713
Код:
/* ~~~~~~~~~~~~~~~~~~~~~~ АВТОР: МАКСИМ ГУСЕВ ~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ФОН ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body,
#fmenu,
#side_bar,
#im_footer_filler,
#side_bar ol li .left_row {
background: #f0f2f5 !important;
}
#ads_page_wrap1,
#wrap1 {
background: #fff;
}
#header_wrap1 { /* прозрачность бордера у бара c ф.и.о и онлайн статусом */
border-color: rgba(100, 100, 100, 0.08) !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ШАПКА ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#page_header {
position: fixed;
z-index: 120;
width: inherit; /* в приложениях все четко */
height: 50px !important;
}
#page_header .back {
position: fixed !important;
left: 0px;
height: 50px !important;
background: #567ca4 !important;
}
#page_header .left{
background: #567ca4 url(/images/logo_vk_white.png) 0px 14px no-repeat !important;
margin: 0px 8px 0px 4px;
height: 50px !important;
}
#page_header .right {
display: none !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav {
padding: 0px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ЛОГО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top_logo_down {
background: #567ca4 url(/images/logo_vk_white.png) 0px 15px no-repeat !important;
height: 50px !important;
}
.top_home_link {
height: 50px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ССЫЛКИ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav a.top_nav_link {
color: #fff !important;
height: 50px !important;
line-height: 47px !important;
font-size: 13px !important;
padding: 0px 15px !important;
text-shadow: none !important;
font-weight: normal !important;
}
.head_nav a.top_nav_link:hover,
.head_nav a.top_nav_link.over,
#top_back_link:hover {
background-color: #51759b !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ НАЗАД ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top_back_link {
max-width: 149px !important;
padding-left: 25px !important;
background: url(/images/backlink.gif) no-repeat left -80px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ПОИСК ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#ts_wrap {
left: 146px !important;
height: 50px !important;
width: 170px !important;
}
#ts_wrap .ts_input_wrap {
top: 0px !important;
margin: 0px !important;
padding: 0px !important;
border-radius: none !important;
width: 170px;
}
#ts_wrap .ts {
background-color: rgba(255, 255, 255, 0) !important;
border-radius: none !important;
}
#ts_wrap .ts_input_wrap2 {
margin: 0px !important;
}
#ts_wrap .input_back {
padding: 17px 0px 17px 25px !important;
color: #92adc8 !important;
margin: 0px !important;
font-size: 13px;
}
#ts_wrap .input_back_content {
width: 141px !important;
}
#ts_wrap #ts_input {
border: 0px !important;
outline: none !important;
padding: 7px 7px 7px 27px !important;
margin: 11px 0px !important;
height: 14px !important;
width: 136px !important;
border-radius: 14px !important;
transition: background-color 0.05s, color 0.05s !important;
font-size: 13px !important;
background: #4b6d94 url(/images/icons/dev_head_magglass.png) 8px 8px no-repeat !important;
color: #d9e2ec !important;
}
#ts_wrap input#ts_input:focus {
background-color: #fff !important;
color: #2b2f33 !important;
}
#ts_cont_wrap {
top: 58px !important;
left: 146px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ ИКОНКА МУЗЫКИ ~~~~~~~~~~~~~~~~~~~~~~~~ */
.head_nav a.top_nav_link span#head_music_text {
color: #fff !important;
}
.head_nav a.top_nav_link span#head_music_text img { /* полоса загрузки */
margin-top: 20px !important;
margin-left: 8px !important;
}
.head_nav a.top_nav_link#head_music {
padding-right: 36px !important;
}
#head_play_btn {
top: 13px !important;
background: url(/images/icons/audio_iconsf.png) -144px -25px no-repeat !important;
}
a:hover #head_play_btn,
a.over #head_play_btn {
background-position: -144px -25px !important;
}
#head_play_btn.playing {
background-position: -162px -25px !important;
}
a:hover #head_play_btn.playing,
a.over #head_play_btn.playing {
background-position: -162px -25px !important;
}
a:hover #head_play_btn.over,
a:hover #head_play_btn.down,
a.over #head_play_btn.over,
a.over #head_play_btn.down {
background-position: -144px -25px !important;
}
a:hover #head_play_btn.playing.over,
a:hover #head_play_btn.playing.down,
a.over #head_play_btn.playing.over,
a.over #head_play_btn.playing.down {
background-position: -162px -25px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side_bar,
#stl_side,
#page_body {
margin-top: 50px;
}
.im_fixed_nav #page_body,
.audio_fixed_nav #page_body,
.im_fixed_nav #side_bar,
.audio_fixed_nav #side_bar {
margin-top: 0px;
}
#side_bar ol li .left_row:hover {
background: #E1E7ED !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~ ВСПЛЫВАЮЩИЕ МЕНЮ ~~~~~~~~~~~~~~~~~~~~~~~ */
.fmenu_item { /* выплывающего меню при прокрутки страницы */
line-height: 10px !important;
}
.fmenu_icon { /* прозрачный фон иконок всплывающего меню */
background-image: url(http://savepic.net/6230906.png) !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ОНЛАЙН ЧАТ ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.chat_onl_wrap,
.chat_active,
.chat_expand {
background: #d8dfe6 !important;
}
.chat_tab_wrap:hover {
background: #d0d9e1 !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ФОТО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.photos_period_fixed { /* отступ при прокрутке фотоальбома 6:50 16.12.2014 */
margin-top: 50px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ ОТКРЫТОЕ ФОТО ~~~~~~~~~~~~~~~~~~~~~~~~ */
.layers_shown .chat_onl_wrap {
background: #6B6B6B !important;
}
.layers_shown .chat_active,
.layers_shown .chat_expand {
background: #6B6B6B !important;
}
.layers_shown .chat_tab_wrap:hover {
background: #7B7B7B !important;
}
.layers_shown .chat_onl_icon {
background-position: -51px -44px!important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ АУДИО ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gp { /* отступ, когда с правой стороны */
top: 65px !important;
}
#gp.reverse { /* отступ, когда с левой стороны */
top: auto !important;
}
/* ~~~~~~~~~~~~ КНОПКИ ВВЕРХ, ВНИЗ И НАЗАД НА СТРАНИЦАХ ~~~~~~~~~~~~ */
#stl_bg {
padding-top: 68px !important;
width: 114px !important;
}
#stl_text {
height: 15px !important;
color: #466a94 !important;
font-size: 12px !important;
margin: 0 0 0 19px !important;
padding: 0px 24px !important;
background: url(/images/dev_toplink.png) no-repeat left 0px !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.stl_active.over_fast #stl_bg {
background-color: #dce2e8 !important;
}
#stl_left .down {
background-position: left -15px !important;
}
#stl_left .back {
background-position: left -30px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~ ЭЛЕМЕНТЫ ВЫДЕЛЕНИЯ ~~~~~~~~~~~~~~~~~~~~~~ */
.checkbox div {
background: url(/images/icons/dev_check.png) 0px 0px no-repeat !important;
background-size: 14px 70px !important;
}
.checkbox:hover div {
background-position: 0px -28px !important;
}
.checkbox.disabled:hover div {
background-position: 0px 0px !important;
}
.checkbox.on div {
background-position: 0px -14px !important;
}
.checkbox.on:hover div {
background-position: 0px -42px !important;
}
.checkbox.disabled.on:hover div {
background-position: 0px -14px !important;
}
.checkbox_container table td .checkbox_on,
.checkbox_container table td .checkbox_off,
.checkbox_container table td .checkbox_on_over,
.checkbox_container table td .checkbox_off_over {
background: transparent url(/images/icons/dev_check.png) 0px 0px no-repeat !important;
background-size: 14px 70px !important;
}
.checkbox_container table td .checkbox_on {
background-position: 0 -14px!important;
}
.checkbox_container table td .checkbox_off_over {
background-position: 0px -42px!important;
}
.checkbox_container table td .checkbox_on_over {
background-position: 0 -42px!important;
}
.checkbox_container.disabled td.checkbox div.checkbox_on_over {
background-position: 0 -14px !important;
}
.checkbox_container.disabled td.checkbox div.checkbox_off_over {
background-position: 0 0 !important;
}
.like_tt .bottom .checkbox div { /* для репоста */
background: url(/images/icons/like_icons_bl.png) -2px 0 no-repeat !important;
width: 14px !important;
height: 12px !important;
}
.radiobtn div {
background: url(/images/icons/dev_radio.png) 0px 0px no-repeat !important;
background-size: 14px 70px !important;
}
.radiobtn div,
.radiobtn_container table td .radiobtn_on div,
.radiobtn_container table td .radiobtn_off div,
.radiobtn_container table td .radiobtn_on_over div,
.radiobtn_container table td .radiobtn_off_over div {
background: url(/images/icons/dev_radio.png) 0px 0px no-repeat !important;
background-size: 14px 70px !important;
}
.radiobtn:hover div {
background-position: 0px -28px !important;
}
.radiobtn.disabled:hover div {
background-position: 0px 0px !important;
}
.radiobtn_hover div {
background-position: 0px -28px !important;
}
.radiobtn.on div {
background-position: 0px -14px !important;
}
.radiobtn.on:hover div {
background-position: 0px -42px !important;
}
.radiobtn.disabled.on:hover div {
background-position: 0px -14px !important;
}
.radiobtn.on.radiobtn_hover div {
background-position: 0px -42px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ НАПОМИНАНИЯ ~~~~~~~~~~~~~~~~~~~~~~~~ */
.left_hide { /* кнопка «закрыть» для напоминания */
background: url(http://savepic.net/6241146.png) no-repeat center center !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ РЕКЛАМА ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#left_ads,
#group_recom_wrap,
.ads_ads_news_wrap { /* скрываем 3 рекламных блока */
display: none !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FIREFOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@-moz-document domain("vk.com") {
.im_fixed_nav #side_bar,
.audio_fixed_nav #side_bar { /*левое меню */
top: 50px !important;
}
.im_fixed_nav #im_nav_wrap,
.audio_fixed_nav #ac { /* контент */
top: 50px !important;
}
.im_fixed_nav #right_bar,
.audio_fixed_nav #right_bar { /*правый бар */
top: 55px !important;
}
#audio_wrap.audio_wrap,
#audios_list.audios_list { /* аудио смешение фикс */
margin-top: 10px;
}
.layers_shown #page_header { /* при затемнение фото и т.д. */
top: 0px;
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ VKOPT ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#side_bar { /* при фиксации левого меню */
top: 0px !important;
}
.im_fixed_nav #side_bar,
.audio_fixed_nav #side_bar { /* при фиксации левого меню */
top: 50px !important;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* в разработке */
#im_footer_sh { /* тень в сообщениях */
border-bottom: 1px solid #e5e7ea;
}
#login_relogin_wrap { /* перелогин */
padding-top: 60px !important;
}
.login_appdevices_promo{ /* логин, вход */
background: #fff !important;
}
Изменения в v2.0 [636]:
Исправлено:
* Отображения плеера
Добавлено:
+ Корректное отображения плеера с левой стороны
Изменения в v2.0 [10115]:
Исправлено:
* при открытии/закрытии во весь экран, шапка оставалась на месте до момента клика, короче не фокусировалось.
* поиск правильная фиксация, при возвращение на страницу длинное название дергалось
* правильное отображения кнопки в шапке воспроизвести/пауза
* перерисована иконка и набор иконок в меню, на прозрачный фон
* теперь аудио плеер отображается на страницах «сообщения» «музыка» корректно
* в фотоальбомах добавлен отступ для периода
* фикс для файрфокса, при открытии фото
* чистка кода, устранения ошибок, код стал меньше и многое другое
Добавлено:
+ скрываем блок «реклама»
+ 2 картинки
Изменения в v2.0 [10337]:
Исправлено:
* при открытии/закрытии во весь экран, шапка оставалась на месте до момента клика, короче не фокусировалось.
* поиск правильная фиксация, при возвращение на страницу длинное название дергалось
* правильное отображения кнопки в шапке воспроизвести/пауза
* перерисована иконка и набор иконок в меню, на прозрачный фон
* теперь аудио плеер отображается на страницах «сообщения» «музыка» корректно
* в фотоальбомах добавлен отступ для периода
* фикс для файрфокса, при открытии фото
* чистка кода, устранения ошибок, код стал меньше и многое другое
Добавлено:
+ скрываем блок «реклама»
+ 2 картинки
Изменения в v2.0 [10409]:
Исправлено:
* firefox добавлен параметр "top" только при клике на фото и т.д.
Добавлено:
+ при фиксации левого меню в vkopt устранен отступ "top"
Изменения в v2.0 [10713]:
Исправлено:
* теперь шапка корректно отображается в приложениях "width:inherit"
* корректное отображение тени в сообщение футера
* мелкие исправления
Добавлено:
+ ads_page_wrap1 фон контента на страницах /ads
+ Вход под другой учетной записью. добавлен отступ
Последний раз редактировалось verazub; 18.12.2014 в 11:18.
|
Оффлайн
|
|
5 пользователя(ей) сказали cпасибо:
|
|
08.12.2014
|
|
ПсИХ=)))
О пользователе
Сообщений: 3,954
ВкоптоКарма: 8,647
[#2]
|
verazub, меня тут недавно просили добавить в Менеджер тем тему на основе дизайна из /dev.
Может интересно будет, может скоопирируетесь.
|
Оффлайн
|
|
08.12.2014
|
|
Опытный
О пользователе
Сообщений: 2,037
ВкоптоКарма: 1,352
[#3]
|
Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...
|
Оффлайн
|
|
08.12.2014
|
|
Знаток
TC
О пользователе
Сообщений: 58
ВкоптоКарма: 29
[#4]
|
Цитата:
Сообщение от Вэлл
verazub, меня тут недавно просили добавить в Менеджер тем тему на основе дизайна из /dev.
Может интересно будет, может скоопирируетесь.
|
мне бы тот кто разбирается в js...
Цитата:
Сообщение от IkaR49
Лично я себе удалил фон, сделав его белым и сижу радуюсь :3
Просто с синеватым фоном всё казалось что сижу на мобильной версии. Он меня как-то угнетал...
|
А я привык :-)
|
Оффлайн
|
|
09.12.2014
|
|
Знаток
TC
О пользователе
Сообщений: 58
ВкоптоКарма: 29
[#5]
|
Да да очень скоро будет
|
Оффлайн
|
|
Пользователь сказал cпасибо:
|
|
10.12.2014
|
|
Мимо проходил, заглянул)
О пользователе
Сообщений: 17
ВкоптоКарма: 13
[#6]
|
verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу
|
Оффлайн
|
|
Пользователь сказал cпасибо:
|
|
11.12.2014
|
|
Знаток
TC
О пользователе
Сообщений: 58
ВкоптоКарма: 29
[#7]
|
Цитата:
Сообщение от SmowiN
verazub, как переместить плеер аудио вниз? а то скрывает его шапкой походу
|
Исправил ошибку, в первом посте новый код. Завтра код полностью обновлю, есть жесткая ошибка в устранении её надо переписать 1/4 кода, спасибо за комментарий :-)
По делу:
Скриншот который я на пост выше выкладывал в разработке, пока что на стадии «мои группы» и «моя страница» сделал, все очень долго идет, для каждого объекта надо менять размер, а ведь еще страницы «приложения», «сообщения», «новости» и т.д. да помимо этого код протестовать придется, в разных браузерах при разных расстановках, а пока большое количество багов не устраню, код не выйдет, а возможно вообще не выйдет, к тому времени уже обновят дизайн сайта.
Последний раз редактировалось verazub; 11.12.2014 в 01:33.
|
Оффлайн
|
|
11.12.2014
|
|
Прижился
О пользователе
Сообщений: 94
ВкоптоКарма: 38
[#8]
|
Создай репо где нибудь (GitHub), помогу немного
|
Оффлайн
|
|
3 пользователя(ей) сказали cпасибо:
|
|
16.12.2014
|
|
Мимо проходил, заглянул)
О пользователе
Сообщений: 4
ВкоптоКарма: 0
[#9]
|
Добавь эту строку чтоб было более красифше
Код HTML:
#im_footer_filler { background: #F0F2F5; }
Последний раз редактировалось [ru]letik; 18.12.2014 в 10:30.
|
Оффлайн
|
|
17.12.2014
|
|
Знаток
TC
О пользователе
Сообщений: 58
ВкоптоКарма: 29
[#10]
|
Цитата:
Сообщение от Omeha2
Создай репо где нибудь (GitHub), помогу немного
|
Время нету, да еще и разбираться надо там
Цитата:
Сообщение от [ru]letik
Добавь эту строку чтоб было более красифше
Код HTML:
#im_footer_filler { background: #F0F2F5; }
|
спасибо
обновил код, много маленьких фиксов, смотрите первый пост bluid [10115]
Последний раз редактировалось verazub; 17.12.2014 в 08:51.
|
Оффлайн
|
|
Пользователь сказал cпасибо:
|
|
Нижняя навигация
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
Ваши права в разделе
|
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 16:23.
|