☰

Iwara UI Fix

An alternate style for 天音's Iwara 1-Click Filter script, also works as a standalone

À partir de 2020-03-03. Voir la dernière version.

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