☰

Iwara UI Fix + 1-Click Filter Xtension

An extension to 天音's Iwara 1-Click Filter script, also works as a standalone

Verze ze dne 01. 03. 2020. Zobrazit nejnovější verzi.

  1. // ==UserScript==
  2. // @name         Iwara UI Fix + 1-Click Filter Xtension
  3. // @namespace    none
  4. // @version      1.0
  5. // @description  An extension to 天音's Iwara 1-Click Filter script, also works as a standalone
  6. // @author       Nothson
  7. // @match        https://*.iwara.tv/*
  8. // @grant        none
  9. // @run-at       document-start
  10. // ==/UserScript==
  11.  
  12. /*
  13. 	--- Iwara UI Fix + 1-Click Filter Xtension by Nothson : https://iwara.tv/users/Nothson ---
  14.  
  15. 		Mainly for scratching the Iwara's UI/UX itches I have.
  16. 		I'm not a senior web dev so plz don't scold me if the code below looks messy to you.
  17.  
  18. 		1 Mar 2020
  19.  
  20. 		- Added like percentage
  21. 		- Polaroid print style for video/image cards
  22. 		- Repositioned the card stats & icons
  23. 		- Added flairs, shown on the right of the card stats
  24. 			- Fire Icon: % like reaches the threshold (based on view count) + 200 views or more
  25. 			- Star Icon: % like reaches the threshold + 20k views or more
  26. 			- Lock Icon: Private video
  27. 			- Grid Icon: Multiple images
  28. 			- Screen Icon: External player (YouTube, Vimeo, etc.)
  29. 		- Card transitions on hover + extra transitions for some flairs
  30. 		- Added block backgrounds on many regions + made paddings and margins consistent
  31. 		- Fixed video player seek head
  32. 		- Changed forum post timestamp text color
  33. 		- Fixed user profile background, user lists (following/followers), and layout
  34. 		- Perhaps a few more things I did but couldn't remember, idk
  35.  
  36. 		Expected to run after Erono's Iwara 1-Click Filter Script: https://greasyfork.org/scripts/393957
  37. 		However, this script works as a standalone UI fix as well
  38. 		Tested on the latest version of Firefox & Chrome, plus responsive
  39. */
  40.  
  41. if (document) {
  42. 	document.children[0].setAttribute('hidden', '');
  43. }
  44.  
  45. window.addEventListener('load', async function() {
  46. 	let timestamp = new Date().getTime();	// Debug
  47. 	let baseScriptRecommended = false;
  48. 	if (!document.head.querySelector('#css_custom')) {	// 1-Click Filter not installed, add required CSS rules
  49. 		baseScriptRecommended = true;
  50. 		let baseCSS = document.createElement('style');
  51. 		baseCSS.innerHTML = `
  52. 			/* ads */
  53. 			/*
  54. 			.block-extra-content, .extra-content-block {display: none;}
  55. 			*/
  56.  
  57. 			/* fix page */
  58. 			body {background-color: #eee;}
  59. 			section#content > .container {background-color: #eee; padding: 10px;}
  60. 			.container {width: unset;}
  61. 			@media (min-width: 1300px) {.container {width: 1300px;}}
  62.  
  63. 			/* fix overflow */
  64. 			#block-system-main, .row {margin-left: 0; margin-right: 0;}
  65. 			.col-sm-3, .col-sm-6, .col-sm-9, .col-xs-6, .col-sm-12 {padding-left: 0; padding-right: 0;}
  66. 			.view-videos .view-content .views-row, .view-images .view-content .views-row {padding-bottom: 0px;}
  67.  
  68. 			/* compact page */
  69. 			.view-content .col-sm-3, .view-content .col-sm-6 {width: 50%; float: left;}
  70. 			@media (min-width: 768px) {
  71. 			.view-content .col-sm-3 {width: 25%;}
  72. 			}
  73.  
  74. 			/* card style */
  75. 			.node.node-teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin: 4px;}
  76. 			.node.node-teaser .icon-bg, .node.node-teaser .private-video {width: calc(100% - 10px);}
  77. 			.node.node-teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  78. 			.node.node-teaser h3.title {font-size: 1em; line-height: 1em; height: 3em; margin-bottom: 0px; overflow: hidden;}
  79. 			.node.node-teaser .username {display: block; white-space: nowrap; overflow: hidden;}
  80. 			.node.node-teaser .field-item {min-height: 2em;}
  81. 			.node.node-video .content {margin: 4px;}
  82. 			.sidebar .block.block-views,
  83. 			.sidebar .block.block-facetapi,
  84. 			.sidebar .block.block-mainblocks   {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 8px; margin: 4px 4px 8px 4px;}
  85. 			.sidebar .node.node-sidebar_teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 2px; padding: 4px; margin: 2px;}
  86. 			.sidebar .node.node-sidebar_teaser .icon-bg, .node.node-sidebar_teaser .private-video {width: calc(100% - 8px);}
  87. 			.sidebar .node.node-sidebar_teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  88. 			.item-list ul.pager li {margin: 0; padding: 0;}
  89. 			.item-list ul.pager li.pager-current,
  90. 			.item-list ul.pager li.pager-ellipsis,
  91. 			.item-list ul.pager li > a {background: #fafafa; border: 1px solid #ccc; border-radius: 8px; padding: 4px 16px; margin: 0px; display: inline-block;}
  92.  
  93. 			/* video style for external link (youtube) */
  94. 			/*
  95. 			.node.node-teaser .field-type-video-embed-field {border: 4px solid #c33; background-color: #000;}
  96. 			.node.node-teaser .field-type-video-embed-field .field-items {overflow: hidden;}
  97. 			.node.node-teaser .field-type-video-embed-field .field-items .field-item {margin: -4px;}
  98. 			*/
  99.  
  100. 			/* image style in subscriptions page */
  101. 			.view-subscriptions .field-type-image {border: 1px solid #ccc; background-color: #fff; padding: 5px;}
  102. 			.view-subscriptions .field-type-image .field-items {overflow: hidden;}
  103. 			.view-subscriptions .field-type-image .field-items .field-item {margin: -6px;}
  104.  
  105. 			/* search and playist */
  106. 			.node-wide_teaser {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 4px; margin: 4px;}
  107. 			.node-wide_teaser {width: unset; word-break: break-all; min-height: 170px;}
  108. 			.node-wide_teaser .col-sm-2 {width: 230px; padding: 4px;}
  109. 			.node-wide_teaser .col-sm-10 {width: calc(100% - 230px); padding: 4px;}
  110. 			.node-wide_teaser .field-name-field-video {border: 1px solid #999;}
  111. 			.node-wide_teaser .field-name-field-video-url {border: 1px solid #999; position: absolute; top: 0px; left: -230px; margin: 4px;}
  112. 			@media (max-width: 768px) {.node-wide_teaser .field-name-field-video-url {display: none;}}
  113. 			.node-wide_teaser .field-name-field-images .field-item {display: unset;}
  114. 			.node-wide_teaser .field-name-field-images .field-item > a > img {width: calc(100%/3 - 8px); border: 1px solid #aaa; padding: 4px; margin: 4px;}
  115. 			.node-wide_teaser .field-name-field-images .field-item > video {width: calc(100%/1 - 8px); margin: 4px; border: 1px solid #aaa; padding: 4px; height: auto;}
  116. 			.node-wide_teaser .node-info {padding: 4px;}
  117. 			.node-wide_teaser .node-info .submitted {display: inline-block; width: 100%;}
  118. 			.node-wide_teaser .node-info .submitted h1.title {font-size: 28px; position: unset; margin: unset;}
  119. 			ul.facetapi-facetapi-tagcloud li > a {white-space: normal;}
  120. 			ul.facetapi-facetapi-tagcloud .element-invisible {display: none;}
  121.  
  122. 			/* footer */
  123. 			#wrapper {margin-bottom: unset; padding-bottom: unset;}
  124. 			footer {height: unset;}
  125. 			footer .block {width: 25%; float: left;}
  126. 			footer .block.block-forum {width: 50%;}
  127. 			footer .copyright {float: unset;}
  128.  
  129. 			/* video player */
  130. 			/* expand volume and seekbar height */
  131. 			.video-js .vjs-volume-bar {margin: 1em 0em;}
  132. 			.video-js .vjs-volume-bar.vjs-slider-horizontal, .video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {height: 1em;}
  133. 			.video-js .vjs-progress-holder, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-play-progress {height: 1em;}
  134. 		`;
  135. 		baseCSS.id = 'css_custom';
  136. 		document.head.appendChild(baseCSS);
  137. 	}
  138. 	
  139. 	let cards = document.querySelectorAll('.node-teaser, .node-sidebar_teaser');
  140. 	Math.logn = function logn (val, base) {
  141. 		return Math.log(val) / Math.log(base);
  142. 	}
  143. 	function kilo2Number (text) {
  144. 		if (text.match('k') == null) {
  145. 			return {value: parseInt(text), isKilo: false};
  146. 		}
  147. 		else {
  148. 			return {value: parseFloat(text.replace('k', '')) * 1000, isKilo: true};
  149. 		}
  150. 	}
  151. 	function getFlair (viewCount, likePercentage, card) {
  152. 		if (card.querySelector('.private-video')) {
  153. 			return 'lock';
  154. 		}
  155. 		else if ((card.className.match('node-sidebar_teaser') && card.children.length > 2) || card.children.length > 4) {
  156. 			return 'share';
  157. 		}
  158. 		else {
  159. 			let viewPower = Math.logn(viewCount, 6);
  160. 			let likeThreshold = 8 - viewPower;
  161. 			if (viewCount < 200) {
  162. 				return '';
  163. 			}
  164. 			else if (viewCount < 20000) {
  165. 				return (likePercentage > likeThreshold) ? 'fire' : '';
  166. 			}
  167. 			else {
  168. 				return (likePercentage > likeThreshold) ? 'star' : '';
  169. 			}
  170. 		}
  171. 	}
  172.  
  173. 	// HTML Mod
  174. 	cards.forEach(card => {
  175. 		let icons = card.querySelector('.icon-bg');
  176. 		if (icons) {	// Rearrange stat icons, add like percentage and flairs
  177. 			if ((card.className.match('node-sidebar_teaser') && card.children.length > 1) || card.children.length > 3) {
  178. 				card.insertBefore(icons, card.children[2]);
  179. 			}
  180. 			else {
  181. 				card.insertBefore(icons, card.children[1]);
  182. 			}
  183. 			if (card.className.match('node-image') && icons.children.length == 3) {
  184. 					icons.appendChild(icons.children[1]);
  185. 					icons.appendChild(icons.children[0]);
  186. 			}
  187. 			else if (icons.children.length == 2) {
  188. 				icons.appendChild(icons.children[0]);
  189. 			}
  190.  
  191. 			let likeNode = icons.querySelector('.glyphicon-heart');
  192. 			if (likeNode && !(card.className.match('node-image') && card.className.match('node-sidebar_teaser'))) {
  193. 				likeNode = likeNode.nextSibling;
  194. 				let viewNode = icons.querySelector('.glyphicon-eye-open').nextSibling;
  195. 				let likeTxt = likeNode.wholeText.trim();
  196. 				let like = kilo2Number(likeTxt);
  197. 				let viewCount = kilo2Number(viewNode.wholeText.trim());
  198. 				let likePercentage = parseFloat(like.value / viewCount.value * 100).toFixed(2);
  199. 				if (!card.className.match('node-sidebar_teaser')) {
  200. 					likeNode.nodeValue = ' ' + likeTxt;
  201. 					let likePercentageHTML = document.createElement('div');
  202. 					likePercentageHTML.className += 'right-icon likes-icon like-percentage';
  203. 					if (like.isKilo || viewCount.isKilo) {
  204. 						likePercentageHTML.innerText = '(~' + likePercentage + '%)';
  205. 					}
  206. 					else {
  207. 						likePercentageHTML.innerText = '(' + likePercentage + '%)';
  208. 					}
  209. 					likeNode.parentElement.parentElement.appendChild(likePercentageHTML);
  210. 				}
  211. 				if (card.className.match('node-video')) {
  212. 					let flair = getFlair(viewCount.value, likePercentage, card);
  213. 					if (flair) {
  214. 						card.className += ' flair-' + flair;
  215. 						let flairNode = document.createElement('div');
  216. 						flairNode.setAttribute('class', 'left-icon flair-icon');
  217. 						flairNode.innerHTML = '<i class="glyphicon glyphicon-' + flair + '" title="Flair"></i>';
  218. 						icons.appendChild(flairNode);
  219. 					}
  220. 				}
  221. 			}
  222. 		}
  223. 		else {
  224. 			let blankFooter = document.createElement('div');
  225. 			blankFooter.setAttribute('class', 'icon-bg');
  226. 			card.appendChild(blankFooter);
  227. 		}
  228.  
  229. 		if (!card.querySelector('a > img')) {	// Fix inconsistent height of the cards with no thumbnail
  230. 			let title = card.querySelector('.title');
  231. 			let blankImage = document.createElement('a');
  232. 			blankImage.setAttribute('href', title.getAttribute('href'));
  233. 			blankImage.setAttribute('title', title.innerText);
  234. 			blankImage.className += ' blankimg';
  235. 			blankImage.innerHTML = '<img width="220" height="150"></img>';
  236. 			card.querySelector('.field-items > .field-item').appendChild(blankImage);
  237. 		}
  238. 	});
  239.  
  240. 	let contentInfo = document.querySelector('body.node-type-video .node.node-video .node-info .node-views, body.node-type-image .node.node-image .node-info .node-views');
  241. 	if (contentInfo) {	// Add like percentage for a video/image page
  242. 		let heartIcon = contentInfo.querySelector('.glyphicon.glyphicon-heart');
  243. 		if (heartIcon) {
  244. 			let eyeIcon = contentInfo.querySelector('.glyphicon.glyphicon-eye-open');
  245. 			let viewCount = parseInt(eyeIcon.nextSibling.nodeValue.replace(',', ''));
  246. 			let like = parseInt(heartIcon.nextSibling.nodeValue.replace(',', ''));
  247. 			let likePercentage = parseFloat(like / viewCount * 100).toFixed(4);
  248. 			heartIcon.nextSibling.nodeValue = ' ' + like + ' (' + likePercentage + '%)';
  249. 			contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-heart'));
  250. 			contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-eye-open').previousSibling);
  251. 		}
  252. 	}
  253.  
  254. 	let copyrightNode = document.querySelector('footer .copyright');
  255. 	if (copyrightNode) {	// Add script credits
  256. 		let innerHTMLExt = '<br><u><b><a href="https://ecchi.iwara.tv/images/iwara-1-click-filter">Iwara 1-Click Filter</a></b></u> by <u><b><a href="https://iwara.tv/users/erono">Erono</a></b></u> + <b>Xtension</b> by <u><b><a href="https://iwara.tv/users/nothson">Nothson</a></b></u>';
  257. 		if (baseScriptRecommended) {
  258. 			innerHTMLExt = '<br><b>Iwara UI Fix</b> by <u><b><a href="https://iwara.tv/users/nothson">Nothson</a></b></u><br><b>Note:</b> Iwara 1-Click Filter is not installed, disabled, or it was set to run after this script. Check out <u><b><a href="https://greasyfork.org/scripts/393957">this page</a></b></u> or <b>script execution order</b>.';
  259. 		}
  260. 		copyrightNode.innerHTML = copyrightNode.firstChild.nodeValue + innerHTMLExt;
  261. 	}
  262. 	
  263. 	let addForumCommentElement = document.querySelectorAll('#forum-comments h2.comment-form, #forum-comments noscript, #forum-comments #comment-form');
  264. 	if (addForumCommentElement.length > 0) {	// Wrap forum's "Add new comment" section in a block
  265. 		let commentBlock = document.createElement('div');
  266. 		commentBlock.id = 'add-forum-comment-block';
  267. 		addForumCommentElement.forEach(elem => {
  268. 			commentBlock.appendChild(elem);
  269. 		});
  270. 		document.getElementById('forum-comments').appendChild(commentBlock);
  271. 	}
  272. 	// CSS Override
  273. 	let styleOverride = document.createElement('style');
  274. 	styleOverride.id = 'xtension-css';
  275. 	styleOverride.innerHTML = `
  276. 		.node.node-teaser,
  277. 		.node.node-sidebar_teaser,
  278. 		.node.node-teaser i,
  279. 		.node.node-sidebar_teaser i,
  280. 		.node.node-teaser img,
  281. 		.node.node-sidebar_teaser img {
  282. 			transition: 0.15s!important;
  283. 		}
  284.  
  285. 		/*
  286. 		.node.node-teaser img,
  287. 		.node.node-sidebar_teaser img {
  288. 			filter: contrast(0)!important;
  289. 		}
  290. 		*/
  291.  
  292. 		.node.node-teaser h3.title,
  293. 		.node.node-sidebar_teaser h3.title {
  294. 			height: auto!important;
  295. 			white-space: nowrap!important;
  296. 			text-overflow: ellipsis!important;
  297. 		}
  298.  
  299. 		.node.node-teaser:hover,
  300. 		.node.node-sidebar_teaser:hover {
  301. 			box-shadow: 3pt 12pt 12pt -6pt #0004;
  302. 			transform: rotate3d(0.9, -0.1, 0.1, 3deg) scale(1.02);
  303. 			z-index: 42;
  304. 		}
  305.  
  306. 		.node.node-teaser.flair-fire:hover,
  307. 		.node.node-sidebar_teaser.flair-fire:hover {
  308. 			border-color: #f40a;
  309. 		}
  310.  
  311. 		.node.node-teaser.flair-star:hover,
  312. 		.node.node-sidebar_teaser.flair-star:hover {
  313. 			transform: rotate3d(-0.9, 0.1, -0.2, 4.5deg) scale(1.04);
  314. 			filter: drop-shadow(-0.2em -0.2em 2em #ffe8);
  315. 			outline: 0.32em solid #fe8;
  316. 			border: 0;
  317. 		}
  318.  
  319. 		.views-responsive-grid.views-responsive-grid-horizontal.views-columns-2 > * {
  320. 			margin-bottom: 0;
  321. 		}
  322.  
  323. 		.node.node-teaser .icon-bg,
  324. 		.node.node-sidebar_teaser .icon-bg {
  325. 			width: 100%!important;
  326. 			position: unset;
  327. 			margin-top: 0.4em;
  328. 			padding: 0;
  329. 		}
  330.  
  331. 		.node.node-sidebar_teaser .icon-bg {
  332. 			min-height: 1.35em;
  333. 		}
  334.  
  335. 		.node:hover .icon-bg {
  336. 			background: unset!important;
  337. 		}
  338.  
  339. 		.node.node-teaser .left-icon,
  340. 		.node.node-sidebar_teaser .left-icon {
  341. 			color: inherit;
  342. 			margin-left: 0.1em;
  343. 			font-size: 0.8em;
  344. 			filter: unset!important;
  345.  
  346. 		}
  347.  
  348. 		.node.node-teaser .right-icon,
  349. 		.node.node-sidebar_teaser .right-icon {
  350. 			float: left!important;
  351. 			color: inherit;
  352. 			margin-left: 0.5em;
  353. 			font-size: 0.8em;
  354. 			filter: unset!important;
  355. 		}
  356.  
  357. 		.node-image.node-sidebar_teaser .right-icon:first-of-type {
  358. 			margin-left: 0;
  359. 		}
  360.  
  361. 		.node.node-teaser .left-icon.multiple-icon,
  362. 		.node.node-sidebar_teaser .left-icon.multiple-icon {
  363. 			float: right!important;
  364. 			color: inherit;
  365. 			margin-left: 0.5em;
  366. 			font-size: 0.8em;
  367. 			filter: unset!important;
  368. 		}
  369.  
  370. 		.node.node-teaser .left-icon.flair-icon,
  371. 		.node.node-sidebar_teaser .left-icon.flair-icon {
  372. 			float: right!important;
  373. 			color: inherit;
  374. 			margin-right: 0.1em;
  375. 			font-size: 0.8em;
  376. 			filter: unset!important;
  377. 		}
  378.  
  379. 		.node.node-teaser .right-icon.like-percentage,
  380. 		.node.node-sidebar_teaser .right-icon.like-percentage {
  381. 			margin-left: 0.3em;
  382. 		}
  383.  
  384. 		.node.node-teaser h3.title {
  385. 			width: 100%;
  386. 			height: 2em;
  387. 		}
  388.  
  389. 		.node.node-teaser.flair-lock:hover [title="Flair"],
  390. 		.node.node-sidebar_teaser.flair-lock:hover [title="Flair"] {
  391. 			color: #bbbf;
  392. 		}
  393.  
  394. 		.node.node-teaser.flair-fire:hover [title="Flair"],
  395. 		.node.node-sidebar_teaser.flair-fire:hover [title="Flair"] {
  396. 			color: #f40f;
  397. 			filter: drop-shadow(0.12em -0.16em 0 #f806) drop-shadow(-0.12em -0.04em 0.06em #fd08);
  398. 		}
  399.  
  400. 		.node.node-teaser.flair-star:hover [title="Flair"] {
  401. 			color: #fd4f;
  402. 			transform: rotate(18deg) scale(3.2);
  403. 			filter: drop-shadow(1pt 0.5pt 0.5pt #0002) drop-shadow(-0.04em -0.04em 0.1em #ffd8) drop-shadow(0.08em 0.08em 0.02em #fb0f);
  404. 		}
  405.  
  406. 		.node.node-sidebar_teaser.flair-star:hover [title="Flair"] {
  407. 			color: #fd4f;
  408. 			transform: rotate(18deg) scale(2.4);
  409. 			filter: drop-shadow(1pt 0.5pt 0.5pt #0002) drop-shadow(-0.04em -0.04em 0.1em #ffd8) drop-shadow(0.12em 0.12em 0.01em #fb0f);
  410. 		}
  411.  
  412. 		.node.node-video.node-teaser.flair-lock:hover > div > div div > a > img,
  413. 		.node.node-video.node-sidebar_teaser.flair-lock:hover > div div > div > a > img {
  414. 			filter: grayscale(1);
  415. 		}
  416.  
  417. 		.node.node-video.node-teaser.flair-fire:hover > div > div div > a > img,
  418. 		.node.node-video.node-sidebar_teaser.flair-fire:hover > div > div div > a > img {
  419. 			filter: sepia(0.3) contrast(1.25) hue-rotate(-15deg) saturate(1.25);
  420. 		}
  421.  
  422. 		.node.node-video.node-teaser.flair-star:hover > div > div div > a > img,
  423. 		.node.node-video.node-sidebar_teaser.flair-star:hover > div > div div > a > img {
  424. 			filter: sepia(0.5) brightness(1.1) contrast(1.25) saturate(1.5);
  425. 		}
  426.  
  427. 		.node.node-teaser .blankimg,
  428. 		.node.node-sidebar_teaser .blankimg {
  429. 			display: block;
  430. 			border: #ccc 0.5pt dashed;
  431. 		}
  432.  
  433. 		.node.node-teaser .blankimg > img,
  434. 		.node.node-sidebar_teaser .blankimg > img {
  435. 			filter: opacity(0);
  436. 		}
  437.  
  438. 		.video-js .vjs-play-progress:before {
  439. 			top: -40%;
  440. 			color: #fffd;
  441. 			font-size: 1.8em;
  442. 			box-shadow: 0 8pt 8pt -4pt #0006;
  443. 		}
  444.  
  445. 		.video-js .vjs-volume-level:before {
  446. 			display: none;
  447. 		}
  448.  
  449. 		body.front #wrapper > section > .container,
  450. 		body.page-node-add form,
  451. 		body.page-node-edit form,
  452. 		body.page-user-friends #content > .container,
  453. 		body.page-user-liked #content > .container,
  454. 		body.page-subscriptions #content > .container,
  455. 		body.page-my-content #content > .container,
  456. 		body.page-messages #content > .container,
  457. 		body.page-user-edit form,
  458. 		body.page-comment #content > .container,
  459. 		body.page-forum #content > .container,
  460. 		body.node-type-video .node.node-video > .content,
  461. 		body.node-type-image .node.node-image > .content,
  462. 		#comments,
  463. 		#add-forum-comment-block,
  464. 		.region.region-content .view-id-profile,
  465. 		.node.node-journal,
  466. 		[class*="block-views"],
  467. 		.sidebar .block.block-facetapi,
  468. 		.sidebar .block.block-mainblocks {
  469. 			background-color: #fafafa;
  470. 			border: 1px solid #ccc;
  471. 			border-radius: 4px!important;
  472. 			padding: 0.8em!important;
  473. 			margin: 0.5em 0.5em 1em 0.5em!important;
  474. 		}
  475.  
  476. 		body.page-user #content {
  477. 			background-attachment: fixed;
  478. 		}
  479.  
  480. 		body.page-user- #content > .container {
  481. 			background-color: #eee8;
  482. 		}
  483.  
  484. 		body.page-user [class*="block-views"],
  485. 		body.page-user .sidebar .block.block-views,
  486. 		#block-mainblocks-user-connect,
  487. 		body.page-user #comments {
  488. 			background-color: #fafafad0;
  489. 		}
  490.  
  491. 		body.page-node-add form,
  492. 		body.page-node-edit form {
  493. 			background-color: #ffffff;
  494. 		}
  495.  
  496. 		body.front #wrapper > section > .container,
  497. 		body.page-user-friends #content > .container,
  498. 		body.page-user-liked #content > .container,
  499. 		body.page-subscriptions #content > .container,
  500. 		body.page-my-content #content > .container,
  501. 		body.page-messages #content > .container,
  502. 		body.page-user-edit form,
  503. 		body.page-comment #content > .container,
  504. 		body.page-forum #content > .container {
  505. 			margin-left: auto!important;
  506. 			margin-right: auto!important;
  507. 		}
  508.  
  509. 		body.node-type-video .node.node-video .node-info .node-views .glyphicon.glyphicon-heart,
  510. 		body.node-type-image .node.node-image .node-info .node-views .glyphicon.glyphicon-heart {
  511. 			margin-left: 0.5em;
  512. 		}
  513.  
  514. 		.node.node-wide_teaser {
  515. 			padding: 0.8em!important;
  516. 			margin: 0.5em 0.5em 1em 0.5em!important;
  517. 		}
  518.  
  519. 		.forum-post {
  520. 			margin: 0.5em 0.5em 1em 0.5em!important;
  521. 		}
  522.  
  523. 		.forum-post > .panel-heading > .text-muted {
  524. 			color: #0008;
  525. 		}
  526.  
  527. 		body.node-type-video .node.node-video > .content,
  528. 		body.node-type-image .node.node-image > .content {
  529. 			padding: 0!important;
  530. 		}
  531.  
  532. 		body.node-type-video .node.node-video > .content > .node-buttons,
  533. 		body.node-type-image .node.node-image > .content > .node-buttons {
  534. 			margin-bottom: 0;
  535. 		}
  536.  
  537. 		body.node-type-video .node.node-video > .content > .well {
  538. 			max-width: 100%!important;
  539. 			margin: 0;
  540. 		}
  541.  
  542. 		.node-journal #comments {
  543. 			border: unset;
  544. 		}
  545.  
  546. 		.view-profile.view-display-id-block {
  547. 			background-color: unset;
  548. 			padding: unset;
  549. 			box-shadow: unset;
  550. 		}
  551.  
  552. 		#block-views-profile-block {
  553. 			background-color: #fafafa;
  554. 			box-shadow: 2pt 8pt 8pt -4pt #0004;
  555. 		}
  556.  
  557. 		.region.region-sidebar .view-id-profile .views-responsive-grid > .views-row > div img,
  558. 		.region.region-content .view-id-profile .views-responsive-grid > .views-row > div img {
  559. 			border-radius: 50%;
  560. 			overflow: hidden;
  561. 			border: #0001 0.2em solid;
  562. 		}
  563.  
  564. 		h1 {
  565. 			padding: 0.25em;
  566. 			margin: 0;
  567. 		}
  568.  
  569. 		#comments > h2.title {
  570. 			padding: 0.4em;
  571. 			margin-bottom: 0.8em;
  572. 		}
  573. 		
  574. 		#add-forum-comment-block > h2 {
  575. 			padding: 0.4em 0;
  576. 		}
  577. 		`;
  578. 	document.head.appendChild(styleOverride);
  579. 	
  580. 	// done: unhide the root tag
  581. 	console.log('[Debug] Nothson\'s UI Fix exec time: ' + (new Date().getTime() - timestamp) + ' ms');	// Debug
  582. 	document.children[0].removeAttribute('hidden');
  583. }, true);