☰

Old Twitter (black)

Old style Twitter layout.

  1. // ==UserScript==
  2. // @name          Old Twitter (black)
  3. // @namespace     http://userstyles.org
  4. // @description	  Old style Twitter layout.
  5. // @version       1.6.1
  6. // @author        NeosTest
  7. // @homepage      http://www.neostest.tk/
  8. // @include       http://twitter.com/*
  9. // @include       https://twitter.com/*
  10. // @include       http://*.twitter.com/*
  11. // @include       https://*.twitter.com/*
  12. // @run-at        document-start
  13. // @icon          data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACdAAAAnQBpZ4gxgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAfLSURBVGiB7VltbF11HX5%2B53%2FPubdr18aWhr0Uw2whQg0sZgPiMFyCUadpsn24FU00k5ihBkVN%2FKB8oNX4QQETQzRhoiH6wUjDiw4lyj4QXsbIaNwGEmcWGGwrjDu29bb3peec%2F%2FP4YW1tu9uub1tDwi%2F55X9ycm%2FO8%2Fyf39v5H5OED7IFKw1gqfYhgZW2zKV%2BoJkZACsUCgYAxWLR2tvbBQADAwMCIC0gMe1SJnFvb68bHh7OmVmzc241gFXe%2B4hkDKCcJMlIFEUjLS0ttUcffdRPA2pmhUIhKBaL9uyzz1ISzyMw40d%2BITsxl5mZbd26NXLOXUbyBgC3A7iWZAfJZkklkm%2BTfA3AE5L2NTQ0FJ9%2B%2BumkUCjY66%2B%2F7pqbm5u89y1mdlkQBK%2Ft3bu3Oo2AmdmOHTuyw8PDH%2FPeu2w2%2B3Z3d%2FfIvffey6WCz%2BfzjU1NTZ0k7wLwVUlZkpCEmauk2Hv%2FSJqmD5nZyTiOc2EYXpam6WcA3C7phSiK7nnppZfOSNIkgf7%2B%2FuCVV15Z65y7H8Bmkt8huW%2Fz5s3DiyVhZtbT09OQpunGIAgelnTNbMCnEJi4%2Fneapi%2Ba2fUkr5W0WtKomW2L43jfoUOHKpI0WYV2797tzOxyAF8E0BkEwW8zmcyn9u%2Ff39Lf37%2BoarVz586M977DzH5G8hqSuJB77yeuuwHsJHkjydUkRfIxksVKpbKqu7s7NDObBBZFUcbMugCsHr%2B1HsCuMAy3DA4Ott56662Z8Qoy790vFovNkgqSbpkP%2BDmc3vtnSL4ax%2FHXoij6McnVAM4RMDNrbGyMJF01A8c6SQ875wptbW0fLRQKufmqkc%2FnXblcXivpbpK2RAIVSTd57%2B%2BTdBeAfyVJkgD4fwg1NTWZmTXVwXK5pAfTNL2%2FWq1uPHjw4Ec2bdoUXkiN9vb2kOTVJNuXCB4km8arFUj%2B3nv%2FfEtLS3VaDoRhmAJ4exY8DsB259xjkr6ybt26zm3btrXceeedYX9%2FfzCTjJlZqVRqMLMbZ8T1vL3Of7z3%2FiGSvxobG3tncHAwBaaU0d7e3qharW5xzu3B3COGN7P9kv5E8gVJJ83szMjISJzP59nX14dCoWCjo6Nr4zjeJWlrnQoz73X8OgHwQBAEvxsbGzt25MiReKJHTR0lfBAEQ5IOm9k1cxBwkm4CcBOAkwD2eO%2F%2FnMvl3tq7d%2B9IPp%2BvViqVsVqt1iipGUC9ErkgApLeJPl4tVo9fvTo0Unw0xQwM9u%2BfXur9%2F7bZvaTOQjUA5NKOua9Py7pDUn%2F9d6flLQDwM3LQOCgmX3p8OHDRyRNGzEmFejr67PBwcFqJpP5K8kvjO%2FweTYLmIykDeP%2BaZITRDlLk1poCJ11ziUAzhttJgm8%2FPLLYS6X%2BwSAFjN7RNKVANbMtuvzBBEsBwFJp7z3Sb0NnewDYRhGaZreQvIpST8ws5MAxibAL0MpXLR779%2FjuYn1PAWCcYAqFoupmb0FIAJwtaTrAWQXUOYumgM4JmmsngKTIRTHcQrgDQA1ALn5Sr6EuJ7vmnrv92ez2drU6jNNAQDo6enx2Wz2PQDPr3TITHVJJ5xz7x09ejSdNQcAoK%2BvT7lc7n3v%2FQMkyysNfIofIHkWQN2RfpKAJHV2dlajKDpE8mGeG19XGjwk7alUKqV6CQzUeSfu7e2NRkdHryD5LZLfJRmuVA4AOG1mn3%2F33XcPSornVGDCBgYGEgDHJf2a5D0kT6zU7qdp%2BmSSJEMA6sY%2FUOdYRZLMLMnn87GZnRgnchvJLZJyl1CBUhAEf8hms6dnC5%2B6BACgUChYsVhsIvkgydYVCqG%2FkXyzWCxOG94uGELjYaQkSUZI%2Fv1CMi%2FTrD%2FTSyR3NTQ0nMIs1WdOAgBE8kyapr%2Fx3l%2FqHJCkX0ZR9J%2BhoaG6zWuqzXoyZ2a2cePGlmw2e7OkXSTXXqJQ%2Boek742MjLwxW%2BWZjwKQpAMHDpTCMHzRe3%2BHpP28%2BL3huKSfrlq16hiAutPnvBWYokSwZcuWxlqttj5N09tIfkPSBp57ybZlVKAi6ZvOuaeGh4fPXih05k1gnIR1d3eHAFolXSXpBklfl3QtSVsGAiWSPwTwl3K5fEoz3rrmslmP1yeOwQFYV1dXxjnXkiTJlQDukFQg2bgcOSDpfQDfB%2FDPhYIHxhWYeipdLBaD5uZmF8dxVKvVGrz3zc65dpI9AO4g2b6MSXwCwN0AnhsdHT29UPCTBDZs2JBbs2bN%2BnK5vMo51yqpg%2BR6AB8n%2BUlJnSSblrFJpQCeAfDzIAheLZVKw4sBDwAZM7PrrrvOxXH8WefcjyRdcRFK49QB7TCA%2B4IgeK5UKg0BqGr8Y8ViLJCk1tbWMTMb8N73SvqjpLPL3ZxIDgH4hXPuy865x0ul0psAKksBD0w%2FFwo6OjqybW1trUmSdEj6HMltJLslRYtU4CSAfSSf9N4fNLN3yuXyGQBzzjeLIjB5wyzo6uoKM5lME4A27%2F3l3vtNJG8cL5vtkhpIZiWFkhKSFZKjks5Kep%2FnRvA9ZvZaEARFMzt7%2BvTpKgC%2F1B2%2FIIEpRAxA0NXVlSGZi%2BO4KYqixjiOc0EQhCQzJJ33nt77xDkXe%2B%2FjNE3HwjCsSSqfOnWqBsBjgV8el4VAHTITjinrVNPM9WKBnobtEjzjotoH%2Fkv9hwRW2v4Hzfz1NBYlTUUAAAAASUVORK5CYII%3D
  14. // ==/UserScript==
  15. (function() {
  16. var css = ".global-nav .container {\n\
  17.         		max-width: 918px !important;\n\
  18.         		/*max-width: 936px !important;*/\n\
  19.             }\n\
  20.             .global-nav {\n\
  21. 				height: 39px !important;\n\
  22.             }\n\
  23.             .topbar {\n\
  24. 				height: 39px !important;\n\
  25.             }\n\
  26.             #global-actions > li{\n\
  27. 				height: 39px !important;\n\
  28.             }\n\
  29.            .global-nav-inner {\n\
  30.                 background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_bgs.png') fixed !important;\n\
  31.                 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset !important;\n\
  32.                 height: 39px !important;\n\
  33.             }\n\
  34.             #global-actions > li > a{\n\
  35. 				transition: none !important;\n\
  36.             }\n\
  37.             .bird-topbar-etched{\n\
  38. 				transition: none !important;\n\
  39. 			}\n\
  40. 			.pushing-state .pushstate-spinner{\n\
  41. 				background:url('https://abs.twimg.com/a/1391236451/img/t1/spinner-medium.gif') no-repeat 0 0 !important;\n\
  42. 				margin-top: 8px !important;\n\
  43. 			}\n\
  44.             .nav > li {\n\
  45.                 color: #d0d0d0 !important;\n\
  46.             }\n\
  47.             #global-actions > li:hover > a, #global-actions > li.active > a {\n\
  48.                 /*background: radial-gradient(ellipse at center,  #4f4f4f 20%,#161616 80%) !important;*/\n\
  49.                 background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_bgs.png') #3D3D3D 0px -50px fixed !important;\n\
  50.                 height: 39px !important;\n\
  51.                 /*46px*/\n\
  52.             }\n\
  53.             #global-actions > li.active > a {\n\
  54.                 box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset !important;\n\
  55.             }\n\
  56.             #global-actions > li > a {\n\
  57.                 border-bottom: none !important;\n\
  58.             }\n\
  59.             .tweet .time{\n\
  60. 				float: right !important;\n\
  61.             }\n\
  62.             .tweet .time:before{\n\
  63. 				content: '' !important;\n\
  64.             }\n\
  65.             .ProfileTweet--high .ProfileTweet-text{\n\
  66.             	font-size: 14px !important;\n\
  67.             	line-height: 22px !important;\n\
  68.             }\n\
  69.             .ProfileTweet--low .ProfileTweet-text{\n\
  70.             	font-size: 14px !important;\n\
  71.             	line-height: 22px !important;\n\
  72.             }\n\
  73.             .ProfileTweet-text{\n\
  74.             	font-size: 14px !important;\n\
  75.             	line-height: 22px !important;\n\
  76.             }\n\
  77.             .ProfileCanopy--large, .ProfileCanopy--large .ProfileCanopy-header{\n\
  78. 				height: 175px !important;\n\
  79.             }\n\
  80.             .ProfileCanopy.is-locked .ProfileCanopy-inner{\n\
  81.             	position: relative !important;\n\
  82.             }\n\
  83.             .ProfileCanopy.is-locked{\n\
  84.             	margin-top: 116px !important;\n\
  85.             }\n\
  86.             .ProfilePage .AppContent{\n\
  87.             	padding: 39px 0px 0px !important;\n\
  88.             }\n\
  89.             .ProfileCanopy.is-locked .ProfileCanopy-avatar{\n\
  90.             	visibility: visible !important;\n\
  91.             	display: block !important;\n\
  92.             	bottom: -87px !important;\n\
  93.             }\n\
  94.             body.ms-windows{\n\
  95.             	font-family: Arial,sans-serif !important;\n\
  96.             }\n\
  97.             \n\
  98.             .global-nav .form-search .search-input {\n\
  99.                 background: none repeat scroll 0 0 #CCCCCC !important;\n\
  100.                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15) !important;\n\
  101.                 color: rgba(48, 48, 48, 0.75) !important;\n\
  102.                 font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif !important;\n\
  103.                 /*font-size: 13px !important;*/\n\
  104.                 height: 14px !important;\n\
  105.                 font-weight: normal !important;\n\
  106.                 line-height: 1 !important;\n\
  107.                 padding: 5px 10px !important;\n\
  108.                 transition: none 0s ease 0s !important;\n\
  109.             }\n\
  110.             .global-nav .search-icon .Icon{\n\
  111. 				margin-top: 0px !important;\n\
  112. 				color: rgba(78, 78, 78, 0.75) !important;\n\
  113.             }\n\
  114.             \n\
  115.             .global-nav .form-search .search-input.focus {\n\
  116.                 background-color: #ddd !important;\n\
  117.                 box-shadow: 0 0 3px rgba(0, 0, 0, 0.15) !important;\n\
  118.                 color: #333333 !important;\n\
  119.                 outline: 0 none !important;\n\
  120.                 padding: 5px 10px !important;\n\
  121.                 text-shadow: 0 1px 0 #FFFFFF !important;\n\
  122.             }\n\
  123.             \n\
  124.             .global-nav .search-input::-moz-placeholder {\n\
  125.                 color: #666666 !important;\n\
  126.             }\n\
  127.             \n\
  128.             .global-nav .search-icon {\n\
  129.                 right: -2px !important;\n\
  130.                 top: 2px !important;\n\
  131.             }\n\
  132.             .stats a strong {\n\
  133. 				font-size: 16px !important;\n\
  134. 				font-weight: bold !important;\n\
  135. 				color: rgb(41, 47, 51) !important;\n\
  136.             }\n\
  137.             #content-main-heading {\n\
  138.     			color: rgb(41, 47, 51) !important;\n\
  139. 			    font-size: 20px !important;\n\
  140. 			    font-weight: bold !important\n\
  141. 			}\n\
  142. 			.wrapper, .wrapper-narrow, .wrapper-permalink {\n\
  143. 				background: url(\"https://abs.twimg.com/a/1391236451/img/t1/wash-white-30.png\") repeat scroll 0% 0% transparent !important;\n\
  144. 			}\n\
  145. 			#global-tweet-dialog .modal-footer {\n\
  146. 				background: #EDEDED !important;\n\
  147. 			}\n\
  148. 			.modal-header {\n\
  149. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_bgs.png') 0px 200px !important;\n\
  150. 				height: 17px !important;\n\
  151. 			}\n\
  152. 			.twttr-dialog-header {\n\
  153. 				padding: 8px 15px 8px !important;\n\
  154. 			}\n\
  155. 			.modal-content {\n\
  156. 				position: relative;\n\
  157. 				background-color: rgb(255, 255, 255);\n\
  158. 				border-radius: 6px 6px 6px 6px;\n\
  159. 				background-clip: padding-box;\n\
  160. 				box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;\n\
  161. 			}\n\
  162. 			.modal-title {\n\
  163. 				font-weight: bold !important;\n\
  164. 				color: #CDCDCD !important;\n\
  165. 			}\n\
  166. 			.home-tweet-box, .dm-tweetbox, .inline-reply-tweetbox{\n\
  167. 				background: #EDEDED !important;\n\
  168. 			}\n\
  169. 			.Icon--home {\n\
  170. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') 0px -48px !important;\n\
  171. 			}\n\
  172. 			#global-nav-home:hover .Icon--home {\n\
  173. 				background-position: 0px -78px !important;\n\
  174. 			}\n\
  175. 			#global-nav-home.active .Icon--home {\n\
  176. 				background-position: 0px -108px !important;\n\
  177. 			}\n\
  178. 			.Icon--notifications {/*.Icon--connect*/\n\
  179. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') -78px -48px !important;\n\
  180. 			}\n\
  181. 			.people:hover .Icon--notifications {/*.Icon--connect*/\n\
  182. 				background-position: -78px -78px !important;\n\
  183. 			}\n\
  184. 			.people.active .Icon--notifications {/**.Icon--connect*/\n\
  185. 				background-position: -78px -108px !important;\n\
  186. 			}\n\
  187. 			.Icon--discover {\n\
  188. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') -39px -48px !important;\n\
  189. 			}\n\
  190. 			.topics:hover .Icon--discover {\n\
  191. 				background-position: -39px -78px !important;\n\
  192. 			}\n\
  193. 			.topics.active .Icon--discover {\n\
  194. 				background-position: -39px -108px !important;\n\
  195. 			}\n\
  196. 			.Icon--me {\n\
  197. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') -120px -48px !important;\n\
  198. 			}\n\
  199. 			.profile:hover .Icon--me {\n\
  200. 				background-position: -120px -78px !important;\n\
  201. 			}\n\
  202. 			.profile.active .Icon--me {\n\
  203. 				background-position: -120px -108px !important;\n\
  204. 			}\n\
  205. 			.Icon--bird {\n\
  206. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') -39px -0px !important;\n\
  207. 			}\n\
  208. 			.Icon--large.Icon--tweet {\n\
  209. 				background: url('https://abs.twimg.com/a/1391236451/img/t1/twitter_web_sprite_icons.png') -198px -47px !important;\n\
  210. 			}\n\
  211. 			#global-new-tweet-button {\n\
  212. 				background-image: linear-gradient(#53ABE6, #1778B6) !important; /*0, 132, 180*/\n\
  213. 				opacity: 1 !important;\n\
  214. 				padding: 2px 5px 2px 8px !important;\n\
  215. 				margin: 0px !important;\n\
  216. 				margin-top: 6px !important;\n\
  217. 				height: 28px !important;\n\
  218. 				/*box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.5) inset;*/\n\
  219. 				box-shadow: -1px -1px 0px #2A2A2A,  0 1px 0px #444444, inset 0px -1px 0px rgba(0, 0, 0, 0.5), inset 0px 1px 1px rgba(189, 189, 189, 0.8);\n\
  220. 				border: 1px solid black !important;\n\
  221. 			}\n\
  222. 			#global-new-tweet-button:hover, #global-new-tweet-button:active {\n\
  223. 				border-color: white !important;\n\
  224. 				background-color: #1778B6 !important;\n\
  225. 				transition: none !important;\n\
  226. 			}\n\
  227. 			.bird-topbar-etched {\n\
  228. 				margin-top: 11px !important;\n\
  229. 			}\n\
  230. 			.Icon--home:before, .Icon--notifications:before, .Icon--connect:before, .Icon--discover:before, .Icon--me:before, .Icon--bird:before, .Icon--large.Icon--tweet:before {\n\
  231. 				content: '' !important;\n\
  232. 			}\n\
  233. 			.nav > li .Icon.Icon--home, .nav > li .Icon.Icon--notifications, .nav > li .Icon.Icon--connect, .nav > li .Icon.Icon--discover, .nav > li .Icon.Icon--me{\n\
  234. 				margin: 8px 0px 0px 10px !important;\n\
  235. 			}\n\
  236. 			.nav > li > a .text{\n\
  237. 				margin-top: 14px !important;\n\
  238. 				font-weight: bold !important;\n\
  239. 				color: #C8C8C8 !important;\n\
  240. 			}\n\
  241. 			.nav > li .Icon.Icon--dm{\n\
  242. 				margin-top: -8px !important;\n\
  243. 			}\n\
  244. 			.nav > li .Icon.Icon--cog{\n\
  245. 				margin-top: 8px !important;\n\
  246. 			}\n\
  247. 			.Gallery-content{\n\
  248. 				background: #181818 !important;\n\
  249. 			}\n\
  250. 			.Gallery-media{\n\
  251. 				padding: 5px;\n\
  252. 			}\n\
  253. 			.GalleryTweet{\n\
  254. 				background: #181818 !important;\n\
  255. 				color: #CDCDCD !important;\n\
  256. 				border-top-color: #3D3D3D !important;\n\
  257. 			}\n\
  258. 			.Gallery .modal-header{\n\
  259. 				border-bottom: none !important;\n\
  260. 			}\n\
  261. 			.trends, .Footer {\n\
  262. 				clear: both !important;\n\
  263. 			}";
  264.  
  265. if (typeof GM_addStyle != "undefined") {
  266. 	GM_addStyle(css);
  267. } else if (typeof PRO_addStyle != "undefined") {
  268. 	PRO_addStyle(css);
  269. } else if (typeof addStyle != "undefined") {
  270. 	addStyle(css);
  271. } else {
  272. 	var node = document.createElement("style");
  273. 	node.type = "text/css";
  274. 	node.appendChild(document.createTextNode(css));
  275. 	var heads = document.getElementsByTagName("head");
  276. 	if (heads.length > 0) {
  277. 		heads[0].appendChild(node); 
  278. 	} else {
  279. 		// no head yet, stick it whereever
  280. 		document.documentElement.appendChild(node);
  281. 	}
  282. }
  283. })();
  284.  
  285. /*Element.prototype.remove = function() {
  286.     this.parentElement.removeChild(this);
  287. }
  288. NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  289.     for(var i = 0, len = this.length; i < len; i++) {
  290.         if(this[i] && this[i].parentElement) {
  291.             this[i].parentElement.removeChild(this[i]);
  292.         }
  293.     }
  294. }*/
  295.  
  296. /*var script = document.createElement('script'); 
  297. script.type = "text/javascript"; 
  298. script.innerHTML = "b.fn.hover=function(){return}";
  299. document.getElementsByTagName('head')[0].appendChild(script);*/
  300.  
  301. function $Class(classname, node){
  302. 	//if(!node) node = document.getElementsByTagName('body')[0];
  303. 	if(!node) node = document;
  304. 	var a = [];
  305. 	var re = new RegExp('\\b' + classname + '\\b');
  306. 	var els = node.getElementsByTagName("*");
  307. 	for(var i=0,j=els.length; i<j; i++)
  308. 	if(re.test(els[i].className))a.push(els[i]);
  309. 	return a;
  310. }
  311.  
  312. function exscript(clearInterval2){
  313. 	for(i = 1; i <= $Class('roaming-module').length; i++){
  314.     	$Class('roaming-module')[i].className = $Class('roaming-module')[i].className.replace(/roaming\-module/, '');
  315.     }
  316.     var afterCSS = document.createElement('style');
  317.     afterCSS.innerHTML = "\n\
  318.             body.three-col .wrapper {\n\
  319.         		max-width: 890px !important;\n\
  320.         	}\n\
  321.         	body.three-col .content-main {\n\
  322. 				float: right !important;\n\
  323. 				margin: 0px !important;\n\
  324.         	}";
  325.  
  326. 	if(!clearInterval2)
  327. 	    document.getElementById('timeline').appendChild(afterCSS);
  328. 	else
  329. 	    document.lastChild.appendChild(afterCSS);
  330. 	
  331. 	setTimeout(function(){
  332. 		console.log($Class('Footer')[0].nextSibling);
  333. 		if($Class('Footer')[0].nextSibling){
  334. 			$Class('Footer')[0].parentNode.insertBefore($Class('wtf-module')[0], $Class('Footer')[0]);
  335. 		}
  336.  
  337. 	}, 1000);
  338.  
  339.     if(clearInterval2)
  340.     	clearInterval(readyStateNewPage);
  341. }
  342.  
  343. var readyStateNewPage = null;
  344. var invertInterval = null;
  345.  
  346. readyStateCheckInterval = setInterval(function() {
  347.     if (document.readyState === "interactive") {
  348.  
  349. 		exscript();
  350.  
  351. 		var url = document.location.toString();
  352. 		
  353.       	document.querySelector('html').addEventListener('DOMNodeInserted', function(ev){
  354. 	 	var new_url = document.location.toString();
  355. 			if (url == new_url) return; // already checked or processed
  356. 				url = new_url;
  357.  
  358. 			var readyStateNewPage = setInterval(function(){
  359. 				if($Class('roaming-module').length === 2)
  360. 					exscript(true);
  361. 			}, 10);
  362. 		});
  363.         
  364.         clearInterval(readyStateCheckInterval);
  365.     }
  366. }, 10);