Greasy Fork is available in English.

[alpha] Убрать новый дизайн VK.com (CSS)

Удаляем новое оформление ВКонтакта, возвращая старый дизайн. (Тест версии css из сети)

  1. // ==UserScript==
  2. // @name [alpha] Убрать новый дизайн VK.com (CSS)
  3. // @version 2.5.41
  4. // @description Удаляем новое оформление ВКонтакта, возвращая старый дизайн. (Тест версии css из сети)
  5. // @author ICP
  6. //= = ^^^ Автор, версия и название скрипта ^^^
  7. // @match *://vk.com/*
  8. //= = ^^^ Перехватываемые URL ^^^
  9. // @exclude *://vk.com/notifier.php*
  10. // @exclude *://vk.com/al_*
  11. // @exclude *://vk.com/upload_fails.php
  12. // @exclude *://vk.com/ads_rotate.php*
  13. // @exclude *://vk.com/share.php*
  14. //= = ^^^ Исключённые URL, перехват которых запрещён ^^^
  15. // @run-at document-end
  16. // @grant GM_xmlhttpRequest
  17. //= = ^^^ Включение скрипта при старте загрузки документа ^^^
  18. // @connect userstyles.org
  19. // @namespace ICP
  20. // @require http://code.jquery.com/jquery-3.1.0.min.js
  21. // ==/UserScript==
  22. (function() {
  23. console.time('Инициализация и загрузка CSS.');
  24. document.querySelector("link[rel*='icon']").href = "http://vkontakte.ru/images/favicon.ico"; // замена иконки VK на привычное В
  25. unsafeWindow.setFavIcon = function(sup){ // Перехватываем и заменяем иконку сайта, если требуется (меняем только основную, остальные логируем)
  26. return function() {
  27. if (arguments[0].search(/\/fav_logo\.ico/i) != -1) {
  28. debugLog("Подменяем - "+arguments[0]);
  29. arguments[0]="http://vkontakte.ru/images/favicon.ico";
  30. } else debugLog("Без замены - "+arguments[0]);
  31. return sup.apply(this, arguments);
  32. };
  33. }(setFavIcon);
  34.  
  35. unsafeWindow.addEvent = function(sup){ // При обновлении контекста страницы должно проверять на нужность сжатия колонки, при обновлении страницы внедриться и сработать не успеваеттрогаю)
  36. return function() {
  37. if (arguments[1] === 'blur' && arguments[0] instanceof HTMLDivElement)
  38. {
  39. FindCont = inWin("div.page_gif_large[ResMin!=true], div.page_album_wrap[ResMin!=true], div.reply_text div.page_post_sized_thumbs[ResMin!=true], div.copy_quote > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_thumb_wrap[ResMin!=true]");
  40. for(var i=0;i<FindCont.length;i++) {
  41. var Factor=FindCont[i].parentNode.offsetWidth/FindCont[i].offsetWidth;
  42. zWin(FindCont[i], Factor+0.01);
  43. $("div[ResMin!=true],a[ResMin!=true]", FindCont[i]).each(function() {
  44. var inCont = this;
  45. zWin(inCont, Factor);
  46. return true;
  47. });
  48. }
  49. }
  50. return sup.apply(this, arguments);
  51. };
  52. }(addEvent);
  53.  
  54. var addCSS = function () {/*
  55. body {
  56. background: #FFFFFF; // Выбеливаем фон
  57. }
  58.  
  59. body:before {
  60. color: rgba(0,0,0,.20); // Изменение цвета объявленной альфы на чёрный, с прозрачностью 80%
  61. }
  62.  
  63.  
  64. .ui_search {
  65. padding: 7px 7px 7px;
  66. margin: 1px; // форма ввода поиска
  67. }
  68.  
  69. .im-page.im-page_classic .im-page--dcontent {
  70. padding-top: 17px; // Смещение списка диалогов, был частично закрыт даже при пустом баре
  71. }
  72.  
  73. .page_square_photo {
  74. width: 150px;
  75. margin-left: 0px; // стыковка фотостатусов в единый блок
  76. }
  77.  
  78. .nim-dialog:not(.nim-dialog_deleted).nim-dialog_unread.nim-dialog_classic {
  79. background: #85f78a; // Изменение фоновой подсветки непрочитанных диалогов
  80. }
  81.  
  82. .nim-dialog.nim-dialog_unread .nim-dialog--unread {
  83. display: block !important;
  84. border-radius: 5px;
  85. background: #72b693; // Кол-во непрочитанных
  86. }
  87.  
  88. .nim-dialog.nim-dialog_unread-out:not(.nim-dialog_failed) .nim-dialog--unread {
  89. display: block !important;
  90. background: rgba(200,147,173,.9);
  91. border-radius: 50% !important; // Знак непрочитанного своего
  92. }
  93.  
  94. .nim-dialog.nim-dialog_unread-out:not(.nim-dialog_failed) .nim-dialog--text-preview {
  95. background: rgba(200,255,200,.9); // Фон непрочитанного своего
  96. }
  97.  
  98. .wide_column_left .narrow_column_wrap {
  99. position: fixed; // Оформление групп
  100. }
  101.  
  102. .ui_rmenu {
  103. width: 607px; // калибровка верхнего меню настроек
  104. }
  105.  
  106. .wide_column_left .narrow_column_wrap {
  107. position: relative; // включена навигация настроек (автор почему-то её выключил)
  108. }
  109.  
  110. .scroll_fix {
  111. overflow-x: overlay; // Если страница не помещается (приложения), дать горизонтальный скролл
  112. }
  113.  
  114. ._im_ui_peers_list {
  115. display: block; // Восстанавливаю панель открытых диалогов. Которую зачем-то скрыли в .44
  116. }
  117.  
  118. .im-page_history-show + .im-right-menu ._im_ui_peers_list {
  119. top: 35px; // Смещение панели открытых на подходящее место внутри диалога
  120. }
  121.  
  122. .im-page.im-page_classic .im-page--header-chat {
  123. height: 0; // Убираем сделанный невидимым - блок шапки, руки надо отрывать за такую вёрстку.
  124. }
  125.  
  126. .im-page .im-page--header-inner {
  127. height: 0; // И второй
  128. }
  129.  
  130. .page_square_photo {
  131. background-size: 99px;
  132. width: 99px;
  133. height: 99px;
  134. zoom: 1;
  135. -moz-transform: scale(1); // Исправляем масштабирование фотостатусов на странице
  136. }
  137.  
  138. .im-mess-stack .im-mess-stack--content .im-mess-stack--pname {
  139. top: 0px;
  140. padding-top: 11px;
  141. height: 0px; // Исправление контейнера сообщения диалога
  142. }
  143.  
  144. .im-dialog-select .im-dialog-select--btn, #ui_rmenu_fav {
  145. height: 13px; // Исправление размеров кнопок зведы сплюсом.
  146. }
  147.  
  148. .im-dialog-select .im-dialog-select--btn, #ui_rmenu_fav {
  149. padding: 6px 16px 7px; // Исправление размеров кнопок зведы сплюсом.
  150. }
  151.  
  152. .im-create .im-create--dcontent {
  153. width: 100% !important; // Ширина списка добавляемых в беседу
  154. }
  155.  
  156. .im-create.im-create_classic .im-create--dcontent .ui_scroll_content {
  157. width: 103%;
  158. margin-left: -1%;
  159. -webkit-column-count: 2;
  160. -webkit-column-gap: 1px;
  161. -moz-column-count: 2;
  162. -moz-column-gap: 1px;
  163. column-count: 2;
  164. column-gap: 1px; // Два столбца для +, по порядку (пары строк) - размеры, Chrome и Safari 3, Firefox 3.5+, Opera 11+ и новые
  165. }
  166.  
  167. .page_post_sized_thumbs, .post_thumbed_media {
  168. zoom: 100%;
  169. -moz-transform: scale(1);
  170. -moz-transform-origin: left center; // Подключил масштабирование, отключаю зум глючный
  171. }
  172.  
  173. #public .narrow_column.fixed, #group .narrow_column.fixed, #profile .narrow_column.fixed {
  174. position: absolute !important; // Что-б не мешал расширению столбца контекста.
  175. }
  176.  
  177. .img_small {
  178. margin: 0 2px 3px 0 !important;
  179. padding-top: 0px; // Изменение шаблона для уменьшенных
  180. }
  181.  
  182. .wall_post_tex {
  183. width: auto; // фикс ширины текстовой части при расширении
  184. }
  185. /* Окончание добавленного CSS*/}.toString().slice(15,-1); // Добавление многострочной переменной, для редактирования и изменения подключаемого стиля.
  186.  
  187. GM_xmlhttpRequest({ // Загрузка CSS
  188. method: "GET", // Метод
  189. url: 'http://userstyles.org/styles/128986.css', // Адрес
  190. onload: function(event) { // Если получен
  191. console.timeEnd('Инициализация и загрузка CSS.'); // Значение секундомера в лог
  192. console.time('Формирование и вставка CSS');
  193. var VK_CURRENT_CSS_CODE = event.responseText.slice(32,-1); // Отделяем чистый CSS
  194. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/(body:before[\s\S]{1,10}content:.{1,10}alpha).{0,50}(";|';)/i, '$1$2'); // чистим избыточную инфу
  195. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/(@-moz-document.*)/i, '/*$1*/'); // Стайлесный хлам
  196. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/{\s?/g, ' {\n\t'); // восстанавливаем после минимизации - оформляем начала правил
  197. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/;(?!base64)/g, ';\n\t'); // восстанавливаем после минимизации - разделяем строки
  198. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/(})\s?/g, ';\n$1\n\n'); // восстанавливаем после минимизации - завершение правила
  199. VK_CURRENT_CSS_CODE = VK_CURRENT_CSS_CODE.replace(/(.*:)(?!image\/)(.*;)/g, '$1 $2'); // восстанавливаем после минимизации - отделяем значение
  200. var head = document.getElementsByTagName('html')[0]; // определение действующего html-а, должно работать в любом браузере
  201. var styleElement = document.createElement("style"); // Создайм стиль
  202. styleElement.type = 'text/css'; // Тип
  203. styleElement.appendChild(document.createTextNode('/*--- Применение старого стиля ---*/\n'+VK_CURRENT_CSS_CODE+"\n"+addCSS)); // Собираем вместе
  204. head.appendChild(styleElement); // вставляем метатег внешнего стиля
  205. console.timeEnd('Формирование и вставка CSS'); // Значение секундомера в лог
  206. debugLog('Стиль добавлен! - '+window.location.href); // Рапортуем в лог с указанием URL функцией ВК, с указанием тайм-лайн кода.
  207. }
  208. });
  209.  
  210. var nonZoom = true;
  211. var Factor,FindCont;
  212. document.onscroll = function () { // Сравнение высоты и прокрутки, расширение/сужение если требуется, где надо
  213. var cc=ge("narrow_column");
  214. if (!cc) return;
  215. if (cur.module=="profile" || cur.module=="groups" || cur.module=="public" || cur.module=="event") cc.setAttribute("style", "display: fixed;");
  216. if (cc.offsetHeight && (cur.module=="profile" || cur.module=="groups" || cur.module=="public" || cur.module=="event")) {
  217. if(cc.offsetHeight<=-cc.getBoundingClientRect().top) {
  218. if (nonZoom) {
  219. ge("wide_column").style.width="597px";
  220. nonZoom = false;
  221. $("[ResMin=true]").each(function() {zWin(this, 1);});
  222. }
  223. } else if (!nonZoom) {
  224. ge("wide_column").style.width="397px";
  225. nonZoom = true;
  226. $("div.page_gif_large[ResMin=false], div.page_album_wrap[ResMin=false], div.reply_text div.page_post_sized_thumbs[ResMin=false], div.copy_quote > div.page_post_sized_thumbs[ResMin=false], div._wall_post_cont > div.page_post_sized_thumbs[ResMin=false], div._wall_post_cont > div.page_post_thumb_wrap[ResMin=false]").each(function() {
  227. for(var i=0;i<FindCont.length;i++) {
  228. var Factor=this[i].parentNode.offsetWidth/this[i].offsetWidth;
  229. zWin(this[i], Factor+0.01);
  230. $("[ResMin=false]", this[i]).each(function() {
  231. var inCont = this;
  232. zWin(inCont, Factor);
  233. return true;
  234. });
  235. }
  236. });
  237. }
  238. if (nonZoom) {
  239. FindCont = inWin("div.page_gif_large[ResMin!=true], div.page_album_wrap[ResMin!=true], div.reply_text div.page_post_sized_thumbs[ResMin!=true], div.copy_quote > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_thumb_wrap[ResMin!=true]");
  240. for(var i=0;i<FindCont.length;i++) {
  241. var Factor=FindCont[i].parentNode.offsetWidth/FindCont[i].offsetWidth;
  242. zWin(FindCont[i], Factor+0.01);
  243. $("div[ResMin!=true],a[ResMin!=true]", FindCont[i]).each(function() {
  244. var inCont = this;
  245. zWin(inCont, Factor);
  246. return true;
  247. });
  248. }
  249. }
  250. return;
  251. }
  252. };
  253.  
  254. function zWin(c, Factor) {
  255. if (c.matches('div[class *= video]')) return;
  256. if (c.getAttribute('ResMin') !== nonZoom || (nonZoom && c.getAttribute('ResMin') !== false))
  257. if(Factor<1) {
  258. var w, h;
  259. if(!c.hasAttribute("OiginalSize")) {
  260. w=c.offsetWidth;
  261. h=c.offsetHeight;
  262. c.setAttribute("OiginalSize", w+","+h);
  263. } else {
  264. sz=c.getAttribute("OiginalSize").split(",");
  265. w=parseInt(sz[0]);
  266. h=parseInt(sz[1]);
  267. }
  268. c.setAttribute("ResMin", true);
  269. c.style.width=Math.round(w*Factor)+"px";
  270. c.style.height=Math.round(h*Factor)+"px";
  271. c.classList.add("img_small");
  272. } else if(c.hasAttribute("OiginalSize")) {
  273. sz=c.getAttribute("OiginalSize").split(",");
  274. c.style.width=sz[0]+"px";
  275. c.style.height=sz[1]+"px";
  276. c.setAttribute("ResMin", false);
  277. c.classList.remove("img_small");
  278. }
  279. }
  280.  
  281. setTimeout(function(){
  282. FindCont = inWin("div.page_gif_large[ResMin!=true], div.page_album_wrap[ResMin!=true], div.reply_text div.page_post_sized_thumbs[ResMin!=true], div.copy_quote > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_sized_thumbs[ResMin!=true], div._wall_post_cont > div.page_post_thumb_wrap[ResMin!=true]");
  283. for(var i=0;i<FindCont.length;i++) {
  284. var Factor=FindCont[i].parentNode.offsetWidth/FindCont[i].offsetWidth;
  285. zWin(FindCont[i], Factor+0.01);
  286. $("div[ResMin!=true],a[ResMin!=true]", FindCont[i]).each(function() {
  287. var inCont = this;
  288. zWin(inCont, Factor);
  289. return true;
  290. });
  291. }
  292. }, 1000);
  293.  
  294. })();
  295.  
  296. function inWin(s) {
  297. var scrollTop = $(window).scrollTop()<500?0:$(window).scrollTop()-500;
  298. var windowHeight = $(window).height()+1000;
  299. var currentEls = $(s);
  300. var result = [];
  301. currentEls.each(function(){
  302. var el = $(this);
  303. var offset = el.offset();
  304. if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
  305. result.push(this);
  306. });
  307. return $(result);
  308. }