☰

Iwara UI Fix

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

  1. // ==UserScript==
  2. // @name         Iwara UI Fix
  3. // @namespace    none
  4. // @version      1.11
  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. 		21 Jul 2020
  21.  
  22. 		- Added fullscreen fit mode button in the video player
  23. 			- The button only appears in fullscreen, as a square icon on the bottom right
  24. 			- Alternate fit mode fits the video by minimum dimension, good for some videos wider than your screen
  25. 			- Do note that this mode doesn't work well with videos with black paddings.
  26. 		- Various video player adjustments
  27. 			- +20% UI size
  28. 			- Loop button size & reordering some buttons
  29. 			- Font for floating time texts
  30. 			- Colored active toggle buttons (for clarity)
  31. 		- Known issue: After loading the page, if you play the video too quickly, the video player isn't properly modified. I'll look into that later.
  32.  
  33. 		19 Jul 2020
  34.  
  35. 		- Fixed video height in fullscreen
  36.  
  37. 		21 Apr 2020
  38.  
  39. 		- Added drop shadow under the profile picture borders
  40. 		- Fixed video player size for vertical videos, it should look better in landscape screen/view like desktop monitor
  41. 		- Now also clears 1-Click Filter's transparency on hover
  42.  
  43. 		25 Mar 2020
  44.  
  45. 		- Changed external player flair detection (thanks once again, Erono!)
  46. 		- Now, the accept/reject all friend requests button should actually work. I just lacked test subjects back then.
  47.  
  48. 		10 Mar 2020
  49.  
  50. 		- On hover, 1-Click Filter's thumbnail background colors are now cleared to white
  51. 		- Fixed page number spacing and responsive scaling in forums and forum posts
  52. 		- Updated 1-Click Filter style conflict detection
  53.  
  54. 		8 Mar 2020
  55.  
  56. 		- Improved page number styles
  57. 		- Added accept/reject all friend requests in friends page (with confirmation dialog)
  58. 			- The buttons only appear if there are more than 1 pending request in the page
  59.  
  60. 		4 Mar 2020
  61.  
  62. 		- In the cards (video/image page or sidebar), improved view count and likes formatting (k and M prefix, decimals)
  63.  
  64. 		3 Mar 2020
  65.  
  66. 		- Changed the approach to replace the blank images, there were some corner cases that make errors
  67. 		- Added profile picture border for special roles (profile page only) + unique animated border for my own
  68. 		- Added script version number at the bottom of the page
  69.  
  70. 		2 Mar 2020
  71.  
  72. 		- Now, this script has conflicts with Iwara 1-Click Filter version 1.6 and newer
  73. 			- See the note at the bottom of any Iwara page for the workaround
  74.  
  75. 		1 Mar 2020
  76.  
  77. 		- Added like percentage
  78. 		- Polaroid print style for video/image cards
  79. 		- Repositioned the card stats & icons
  80. 		- Added flairs, shown on the right of the card stats
  81. 			- Fire Icon: % like reaches the threshold (based on view count) + 200 views or more
  82. 			- Star Icon: % like reaches the threshold + 20k views or more
  83. 			- Lock Icon: Private video
  84. 			- Grid Icon: Multiple images
  85. 			- Screen Icon: External player (YouTube, Vimeo, etc.)
  86. 		- Card transitions on hover + extra transitions for some flairs
  87. 		- Added block backgrounds on many regions + made paddings and margins consistent
  88. 		- Fixed video player seek head
  89. 		- Changed forum post timestamp text color
  90. 		- Fixed user profile background, user lists (following/followers), and layout
  91. 		- Perhaps a few more things I did but couldn't remember, idk
  92.  
  93. 		Expected to run after Erono's Iwara 1-Click Filter Script: https://greasyfork.org/scripts/393957
  94. 		However, this script works as a standalone UI fix as well
  95. 		Tested on the latest version of Firefox & Chrome, plus responsive
  96. */
  97.  
  98. window.addEventListener('load', async function() {
  99. 	if (!window.location.href.match('://i.iwara.tv')) {
  100. 		let oneClickFilterConflict = document.head.querySelector('#css_custom') || document.head.querySelector('#css_likes') || document.head.querySelector('#css_colors');
  101.  
  102. 		let baseCSS = document.createElement('style');	// Add original CSS rules from 1-Click Filter
  103. 		baseCSS.innerHTML = `
  104. 			/* fix page */
  105. 			body {background-color: #eee;}
  106. 			section#content > .container {background-color: #eee; padding: 10px;}
  107. 			.container {width: unset;}
  108. 			@media (min-width: 1300px) {.container {width: 1300px;}}
  109.  
  110. 			/* fix overflow */
  111. 			#block-system-main, .row {margin-left: 0; margin-right: 0;}
  112. 			.col-sm-3, .col-sm-6, .col-sm-9, .col-xs-6, .col-sm-12 {padding-left: 0; padding-right: 0;}
  113. 			.view-videos .view-content .views-row, .view-images .view-content .views-row {padding-bottom: 0px;}
  114.  
  115. 			/* compact page */
  116. 			.view-content .col-sm-3, .view-content .col-sm-6 {width: 50%; float: left;}
  117. 			@media (min-width: 768px) {
  118. 			.view-content .col-sm-3 {width: 25%;}
  119. 			}
  120.  
  121. 			/* card style */
  122. 			.node.node-teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin: 4px;}
  123. 			.node.node-teaser .icon-bg, .node.node-teaser .private-video {width: calc(100% - 10px);}
  124. 			.node.node-teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  125. 			.node.node-teaser h3.title {font-size: 1em; line-height: 1em; height: 3em; margin-bottom: 0px; overflow: hidden;}
  126. 			.node.node-teaser .username {display: block; white-space: nowrap; overflow: hidden;}
  127. 			.node.node-teaser .field-item {min-height: 2em;}
  128. 			.node.node-video .content {margin: 4px;}
  129. 			.sidebar .block.block-views,
  130. 			.sidebar .block.block-facetapi,
  131. 			.sidebar .block.block-mainblocks   {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 8px; margin: 4px 4px 8px 4px;}
  132. 			.sidebar .node.node-sidebar_teaser {background-color: #ffffff; border: 1px solid #ccc; border-radius: 2px; padding: 4px; margin: 2px;}
  133. 			.sidebar .node.node-sidebar_teaser .icon-bg, .node.node-sidebar_teaser .private-video {width: calc(100% - 8px);}
  134. 			.sidebar .node.node-sidebar_teaser .icon-bg .likes-icon {filter: drop-shadow(0px 0px 2px #000);}
  135. 			.item-list ul.pager li {margin: 0; padding: 0;}
  136. 			.item-list ul.pager li.pager-current,
  137. 			.item-list ul.pager li.pager-ellipsis,
  138. 			.item-list ul.pager li > a {background: #fafafa; border: 1px solid #ccc; border-radius: 8px; padding: 4px 16px; margin: 0px; display: inline-block;}
  139.  
  140. 			/* video style for external link (youtube) */
  141. 			/*
  142. 			.node.node-teaser .field-type-video-embed-field {border: 4px solid #c33; background-color: #000;}
  143. 			.node.node-teaser .field-type-video-embed-field .field-items {overflow: hidden;}
  144. 			.node.node-teaser .field-type-video-embed-field .field-items .field-item {margin: -4px;}
  145. 			*/
  146.  
  147. 			/* image style in subscriptions page */
  148. 			.view-subscriptions .field-type-image {border: 1px solid #ccc; background-color: #fff; padding: 5px;}
  149. 			.view-subscriptions .field-type-image .field-items {overflow: hidden;}
  150. 			.view-subscriptions .field-type-image .field-items .field-item {margin: -6px;}
  151.  
  152. 			/* search and playist */
  153. 			.node-wide_teaser {background-color: #fafafa; border: 1px solid #ccc; border-radius: 4px; padding: 4px; margin: 4px;}
  154. 			.node-wide_teaser {width: unset; word-break: break-all; min-height: 170px;}
  155. 			.node-wide_teaser .col-sm-2 {width: 230px; padding: 4px;}
  156. 			.node-wide_teaser .col-sm-10 {width: calc(100% - 230px); padding: 4px;}
  157. 			.node-wide_teaser .field-name-field-video {border: 1px solid #999;}
  158. 			.node-wide_teaser .field-name-field-video-url {border: 1px solid #999; position: absolute; top: 0px; left: -230px; margin: 4px;}
  159. 			@media (max-width: 768px) {.node-wide_teaser .field-name-field-video-url {display: none;}}
  160. 			.node-wide_teaser .field-name-field-images .field-item {display: unset;}
  161. 			.node-wide_teaser .field-name-field-images .field-item > a > img {width: calc(100%/3 - 8px); border: 1px solid #aaa; padding: 4px; margin: 4px;}
  162. 			.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;}
  163. 			.node-wide_teaser .node-info {padding: 4px;}
  164. 			.node-wide_teaser .node-info .submitted {display: inline-block; width: 100%;}
  165. 			.node-wide_teaser .node-info .submitted h1.title {font-size: 28px; position: unset; margin: unset;}
  166. 			ul.facetapi-facetapi-tagcloud li > a {white-space: normal;}
  167. 			ul.facetapi-facetapi-tagcloud .element-invisible {display: none;}
  168.  
  169. 			/* footer */
  170. 			#wrapper {margin-bottom: unset; padding-bottom: unset;}
  171. 			footer {height: unset;}
  172. 			footer .block {width: 25%; float: left;}
  173. 			footer .block.block-forum {width: 50%;}
  174. 			footer .copyright {float: unset;}
  175.  
  176. 			/* video player */
  177. 			/* expand volume and seekbar height */
  178. 			.video-js .vjs-volume-bar {margin: 1em 0em;}
  179. 			.video-js .vjs-volume-bar.vjs-slider-horizontal, .video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {height: 1em;}
  180. 			.video-js .vjs-progress-holder, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-play-progress {height: 0.7em;}
  181. 		`;
  182. 		baseCSS.id = 'xtension-base-css';
  183. 		document.head.appendChild(baseCSS);
  184.  
  185. 		let cards = document.querySelectorAll('.node-teaser, .node-sidebar_teaser');
  186. 		let styleOverride = document.createElement('style');
  187. 		styleOverride.id = 'xtension-css';
  188.  
  189. 		function logn (val, base) {
  190. 			return Math.log(val) / Math.log(base);
  191. 		}
  192.  
  193. 		function kilo2Number (text) {
  194. 			if (text.match('k') == null) {
  195. 				return {value: parseInt(text), isKilo: false};
  196. 			}
  197. 			else {
  198. 				return {value: parseFloat(text.replace('k', '')) * 1000, isKilo: true};
  199. 			}
  200. 		}
  201.  
  202. 		function number2Prefixed(value) {
  203. 			if (value < 999) {
  204. 				return value;
  205. 			}
  206. 			else if (value < 99999) {
  207. 				return (value / 1000).toFixed(1) + 'k';
  208. 			}
  209. 			else if (value < 999999) {
  210. 				return Math.floor(value / 1000) + 'k';
  211. 			}
  212. 			else {
  213. 				return (value / 1000000).toFixed(1) + 'M';
  214. 			}
  215. 		}
  216.  
  217. 		function getFlair (viewCount, likePercentage, card) {
  218. 			if (card.querySelector('.private-video')) {
  219. 				return 'lock';
  220. 			}
  221. 			else if (card.querySelector('.field-type-video-embed-field')) {
  222. 				return 'share';
  223. 			}
  224. 			else {
  225. 				let likeThreshold = 8 - logn(viewCount, 6);
  226. 				if (viewCount < 200) {
  227. 					return '';
  228. 				}
  229. 				else if (viewCount < 20000) {
  230. 					return (likePercentage > likeThreshold) ? 'fire' : '';
  231. 				}
  232. 				else {
  233. 					return (likePercentage > likeThreshold) ? 'star' : '';
  234. 				}
  235. 			}
  236. 		}
  237.  
  238. 		// HTML Mod
  239. 		cards.forEach(card => {
  240. 			let icons = card.querySelector('.icon-bg');
  241. 			if (icons) {	// Rearrange stat icons, add like percentage and flairs
  242. 				if ((card.className.match('node-sidebar_teaser') && card.children.length > 1) || card.children.length > 3) {
  243. 					card.insertBefore(icons, card.children[2]);
  244. 				}
  245. 				else {
  246. 					card.insertBefore(icons, card.children[1]);
  247. 				}
  248. 				if (card.className.match('node-image') && icons.children.length == 3) {
  249. 						icons.appendChild(icons.children[1]);
  250. 						icons.appendChild(icons.children[0]);
  251. 				}
  252. 				else if (icons.children.length == 2) {
  253. 					icons.appendChild(icons.children[0]);
  254. 				}
  255.  
  256. 				let likeNode = icons.querySelector('.glyphicon-heart');
  257. 				if (likeNode && !(card.className.match('node-image') && card.className.match('node-sidebar_teaser'))) {
  258. 					likeNode = likeNode.nextSibling;
  259. 					let viewNode = icons.querySelector('.glyphicon-eye-open').nextSibling;
  260. 					let viewNodeTxt = viewNode.wholeText.trim();
  261. 					let likeNodeTxt = likeNode.wholeText.trim();
  262. 					let like = kilo2Number(likeNodeTxt);
  263. 					let viewCount = kilo2Number(viewNodeTxt);
  264. 					let likePercentage = (viewCount == 0) ? 0 : parseFloat(like.value / viewCount.value * 100).toFixed(2);
  265. 					viewNode.parentElement.setAttribute('title', viewNodeTxt);
  266. 					viewNode.nodeValue = ' ' + number2Prefixed(viewCount.value);
  267. 					if (likeNode) {
  268. 						likeNode.parentElement.setAttribute('title', likeNodeTxt);
  269. 						likeNode.nodeValue = ' ' + number2Prefixed(like.value);
  270. 					}
  271. 					if (!card.className.match('node-sidebar_teaser')) {
  272. 						let likePercentageHTML = document.createElement('div');
  273. 						likePercentageHTML.className += 'right-icon likes-icon like-percentage';
  274. 						if (like.isKilo || viewCount.isKilo) {
  275. 							likePercentageHTML.innerText = '(~' + likePercentage + '%)';
  276. 						}
  277. 						else {
  278. 							likePercentageHTML.innerText = '(' + likePercentage + '%)';
  279. 						}
  280. 						likeNode.parentElement.parentElement.appendChild(likePercentageHTML);
  281. 					}
  282. 					if (card.className.match('node-video')) {
  283. 						let flair = getFlair(viewCount.value, likePercentage, card);
  284. 						if (flair) {
  285. 							card.className += ' flair-' + flair;
  286. 							let flairNode = document.createElement('div');
  287. 							flairNode.setAttribute('class', 'left-icon flair-icon');
  288. 							flairNode.innerHTML = '<i class="glyphicon glyphicon-' + flair + '" title="Flair"></i>';
  289. 							icons.appendChild(flairNode);
  290. 						}
  291. 					}
  292. 				}
  293. 			}
  294. 			else {
  295. 				let blankFooter = document.createElement('div');
  296. 				blankFooter.setAttribute('class', 'icon-bg');
  297. 				card.appendChild(blankFooter);
  298. 			}
  299.  
  300. 			let thumbnail = card.querySelector('a > img');
  301. 			if (!thumbnail) {	// Fix inconsistent height of the cards with no thumbnail
  302. 				let imgArea = card.firstElementChild;
  303. 				let title = card.querySelector('h3.title > a');
  304. 				if (!title) {
  305. 					title = card.querySelector('.field-item > a');
  306. 				}
  307. 				let url = (title) ? title.getAttribute('href') : '';
  308. 				imgArea.innerHTML = '<div class="field blankimg"><div class="field-items"><div class="field-item"><a' +
  309. 					(url ? ' href="' + url + '"' : '') +
  310. 					(title ? ' title="' + title.innerText + '"' : '') +
  311. 					'>' + 
  312. 					(card.className.match('node-sidebar_teaser') ? '<img width="141" height="84"></img>' : '<img width="220" height="150"></img>') +
  313. 					'</a></div></div></div>';
  314. 			}
  315. 		});
  316.  
  317. 		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');
  318. 		if (contentInfo) {	// Add like percentage for a video/image page
  319. 			let heartIcon = contentInfo.querySelector('.glyphicon.glyphicon-heart');
  320. 			if (heartIcon) {
  321. 				let eyeIcon = contentInfo.querySelector('.glyphicon.glyphicon-eye-open');
  322. 				let viewCount = parseInt(eyeIcon.nextSibling.nodeValue.replace(/,/g, ''));
  323. 				let like = parseInt(heartIcon.nextSibling.nodeValue.replace(/,/g, ''));
  324. 				let likePercentage = (viewCount == 0) ? 0 : parseFloat(like / viewCount * 100).toFixed(4);
  325. 				heartIcon.nextSibling.nodeValue = ' ' + like + ' (' + likePercentage + '%)';
  326. 				contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-heart'));
  327. 				contentInfo.appendChild(contentInfo.querySelector('.glyphicon.glyphicon-eye-open').previousSibling);
  328. 			}
  329. 		}
  330.  
  331. 		let copyrightNode = document.querySelector('footer .copyright');
  332. 		if (copyrightNode) {	// Add script credits
  333. 			let innerHTMLExt = '<br><u><b><a href="https://greasyfork.org/en/scripts/397126">Iwara UI Fix</a></b></u> version ' + GM_info.script.version + ' by <u><b><a href="/users/nothson">Nothson</a></b></u><br><b>Note:</b> <u><b><a href="/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.';
  334. 			if (!oneClickFilterConflict) {
  335. 				innerHTMLExt = '<br><u><b><a href="https://greasyfork.org/en/scripts/397126">Iwara UI Fix</a></b></u> version ' + GM_info.script.version + ' by <u><b><a href="/users/nothson">Nothson</a></b></u><br><i>Based on CSS rules from <u><b><a href="/images/iwara-1-click-filter">Iwara 1-Click Filter</a></b></u> (version 1.5) by <u><b><a href="/users/erono">Erono</a></b></u></i>.';
  336. 			}
  337. 			copyrightNode.innerHTML = copyrightNode.firstChild.nodeValue + innerHTMLExt;
  338. 		}
  339.  
  340. 		let addForumCommentElement = document.querySelectorAll('#forum-comments h2.comment-form, #forum-comments noscript, #forum-comments #comment-form');
  341. 		if (addForumCommentElement.length > 0) {	// Wrap forum's "Add new comment" section in a block
  342. 			let commentBlock = document.createElement('div');
  343. 			commentBlock.id = 'add-forum-comment-block';
  344. 			addForumCommentElement.forEach(elem => {
  345. 				commentBlock.appendChild(elem);
  346. 			});
  347. 			document.getElementById('forum-comments').appendChild(commentBlock);
  348. 		}
  349.  
  350. 		let creatorProfileCard = document.querySelector('body.page-user.page-user- #block-views-profile-block .field-content');
  351. 		if (creatorProfileCard) {
  352. 			if (document.body.className.match('page-user-603563')) {	// My special profile pic border + tooltip
  353. 				creatorProfileCard.innerHTML = creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML + creatorProfileCard.innerHTML;
  354. 				creatorProfileCard.children[5].setAttribute('src', 'https://i.imgur.com/fQZC1bB.png');
  355. 				creatorProfileCard.setAttribute('title', 'The creator of "Iwara UI Fix"');
  356. 			}
  357. 			else {	// User role profile pic border
  358. 				let role = document.querySelector('body.page-user.page-user- #content div.content > div.profile > div:last-child > ul > li');
  359. 				if (role) {
  360. 					switch (role.innerText) {
  361. 						case 'administrator':
  362. 							creatorProfileCard.className += ' role-admin';
  363. 							creatorProfileCard.setAttribute('title', 'Administrator');
  364. 							break;
  365. 						case 'moderator':
  366. 							creatorProfileCard.className += ' role-mod';
  367. 							creatorProfileCard.setAttribute('title', 'Moderator');
  368. 							break;
  369. 					}
  370. 					role = role.parentElement.parentElement;
  371. 					role.parentElement.removeChild(role);
  372. 				}
  373. 			}
  374. 		}
  375. 		
  376. 		let friendsList = document.querySelector('body.page-user-friends table.table');
  377. 		if (friendsList) {	// Accept/reject all friends buttons
  378. 			let acceptReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Accept"]');
  379. 			let rejectReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Reject"]');
  380. 			let doAllReqButtonsArea = null;
  381. 			if (acceptReqButton.length > 1) {
  382. 				doAllReqButtonsArea = friendsList.querySelector('tr:first-child th:last-child');
  383. 				doAllReqButtonsArea.innerHTML = '<button id="accept-all-friends" class="btn btn-xs btn-success accept-friend" title="Accept all pending requests"><span class="glyphicon glyphicon-ok"></span><span class="glyphicon glyphicon-ok"></span></button><button id="reject-all-friends" class="btn btn-xs btn-danger remove-friend" title="Reject all pending requests"><span class="glyphicon glyphicon-remove"></span><span class="glyphicon glyphicon-remove"></span></button>';
  384. 				document.getElementById('accept-all-friends').addEventListener('click', function acceptAllFriends () {
  385. 					if (confirm("Accept all pending friend requests?")) {
  386. 						while (doAllReqButtonsArea.lastElementChild) {
  387. 							doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  388. 						}
  389. 						acceptReqButton.forEach(e => {e.click();});
  390. 					}
  391. 				}, false);
  392. 				document.getElementById('reject-all-friends').addEventListener('click', function rejectAllFriends () {
  393. 					if (confirm("Reject all pending friend requests?")) {
  394. 						while (doAllReqButtonsArea.lastElementChild) {
  395. 							doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  396. 						}
  397. 						rejectReqButton.forEach(e => {e.click();});
  398. 					}
  399. 				}, false);
  400. 			}
  401. 		}
  402.  
  403. 		document.addEventListener('click', function modifyVideoPlayer (event) {
  404. 			let videoPlayerRoot = document.querySelector('#video-player.video-js');
  405. 			if (
  406. 				videoPlayerRoot &&
  407. 				(event.target.className.match('vjs-big-play-button') || event.target.className.match('vjs-poster'))
  408. 			) {
  409. 				document.removeEventListener('click', modifyVideoPlayer);
  410. 				let videoControlBar = videoPlayerRoot.querySelector('.vjs-control-bar');
  411.  
  412. 				// Fix replay button HTML structure (which makes the size inconsistent), along with reordering it
  413. 				let videoResButton = videoControlBar.querySelector('.vjs-resolution-button');
  414. 				let videoFullscreenButton = videoControlBar.querySelector('.vjs-fullscreen-control');
  415. 				let videoReplayButton = videoControlBar.querySelector('.vjs-loop-button');
  416. 				if (videoReplayButton) {
  417. 					videoReplayButton.innerHTML = '';
  418. 					videoReplayButton.className = 'vjs-icon-replay vjs-control vjs-button';
  419. 				}
  420. 				videoControlBar.insertBefore(videoReplayButton, videoResButton);
  421.  
  422. 				// Add toggle fullscreen fit mode button to the video player
  423. 				let videoFitButton = document.createElement('button');
  424. 				videoFitButton.className = 'vjs-icon-square vjs-control vjs-button';
  425. 				videoFitButton.setAttribute('type', 'button');
  426. 				videoFitButton.setAttribute('aria-live', 'polite');
  427. 				videoFitButton.innerHTML = '<span class="vjs-control-text">Fullscreen Fit Mode</span>';
  428. 				videoControlBar.insertBefore(videoFitButton, videoFullscreenButton);
  429. 				videoFitButton.addEventListener ('click', function toggleVideoFitMode () {
  430. 					if (videoPlayerRoot.className.match('alt-fit')) {
  431. 						videoPlayerRoot.className = videoPlayerRoot.className.replace(' alt-fit', '');
  432. 						videoFitButton.className = videoFitButton.className.replace(' vjs-control-active', '');
  433. 					}
  434. 					else {
  435. 						videoPlayerRoot.className += ' alt-fit';
  436. 						videoFitButton.className += ' vjs-control-active';
  437. 					}
  438. 				}, false);
  439. 			}
  440. 		}, false);
  441.  
  442. 		// CSS Override
  443. 		styleOverride.innerHTML += `
  444. 			.node.node-teaser,
  445. 			.node.node-sidebar_teaser,
  446. 			.node.node-teaser i,
  447. 			.node.node-sidebar_teaser i,
  448. 			.node.node-teaser img,
  449. 			.node.node-sidebar_teaser img {
  450. 				transition: 0.15s!important;
  451. 			}
  452.  
  453. 			/*
  454. 			.node.node-teaser img,
  455. 			.node.node-sidebar_teaser img {
  456. 				filter: contrast(0)!important;
  457. 			}
  458. 			*/
  459.  
  460. 			.node.node-teaser h3.title,
  461. 			.node.node-sidebar_teaser h3.title {
  462. 				height: auto!important;
  463. 				white-space: nowrap!important;
  464. 				text-overflow: ellipsis!important;
  465. 			}
  466.  
  467. 			.node.node-teaser:hover,
  468. 			.node.node-sidebar_teaser:hover {
  469. 				background: #fff;
  470. 				opacity: 1!important;
  471. 				box-shadow: 3pt 12pt 12pt -6pt #0004;
  472. 				transform: rotate3d(0.9, -0.1, 0.1, 3deg) scale(1.02);
  473. 				z-index: 42;
  474. 			}
  475.  
  476. 			.node.node-teaser.flair-fire:hover,
  477. 			.node.node-sidebar_teaser.flair-fire:hover {
  478. 				transform: rotate3d(0.9, -0.1, 0.1, -4.5deg) scale(1.02);
  479. 				border-color: #f40a;
  480. 			}
  481.  
  482. 			.node.node-teaser.flair-star:hover,
  483. 			.node.node-sidebar_teaser.flair-star:hover {
  484. 				transform: rotate3d(-0.9, 0.1, -0.2, 4.5deg) scale(1.04);
  485. 				filter: drop-shadow(-0.2em -0.2em 2em #ffe8);
  486. 				outline: 0.32em solid #fe8;
  487. 				border: 0;
  488. 				border-radius: 0;
  489. 			}
  490.  
  491. 			.views-responsive-grid.views-responsive-grid-horizontal.views-columns-2 > * {
  492. 				margin-bottom: 0;
  493. 			}
  494.  
  495. 			.node.node-teaser .icon-bg,
  496. 			.node.node-sidebar_teaser .icon-bg {
  497. 				width: 100%!important;
  498. 				position: unset;
  499. 				margin-top: 0.4em;
  500. 				padding: 0;
  501. 			}
  502.  
  503. 			.node.node-sidebar_teaser .icon-bg {
  504. 				min-height: 1.35em;
  505. 			}
  506.  
  507. 			.node:hover .icon-bg {
  508. 				background: unset!important;
  509. 			}
  510.  
  511. 			.node.node-teaser .left-icon,
  512. 			.node.node-sidebar_teaser .left-icon {
  513. 				color: inherit;
  514. 				margin-left: 0.1em;
  515. 				font-size: 0.8em;
  516. 				filter: unset!important;
  517.  
  518. 			}
  519.  
  520. 			.node.node-teaser .right-icon,
  521. 			.node.node-sidebar_teaser .right-icon {
  522. 				float: left!important;
  523. 				color: inherit;
  524. 				margin-left: 0.5em;
  525. 				font-size: 0.8em;
  526. 				filter: unset!important;
  527. 			}
  528.  
  529. 			.node-image.node-sidebar_teaser .right-icon:first-of-type {
  530. 				margin-left: 0;
  531. 			}
  532.  
  533. 			.node.node-teaser .left-icon.multiple-icon,
  534. 			.node.node-sidebar_teaser .left-icon.multiple-icon {
  535. 				float: right!important;
  536. 				color: inherit;
  537. 				margin-left: 0.5em;
  538. 				font-size: 0.8em;
  539. 				filter: unset!important;
  540. 			}
  541.  
  542. 			.node.node-teaser .left-icon.flair-icon,
  543. 			.node.node-sidebar_teaser .left-icon.flair-icon {
  544. 				float: right!important;
  545. 				color: inherit;
  546. 				margin-right: 0.1em;
  547. 				font-size: 0.8em;
  548. 				filter: unset!important;
  549. 			}
  550.  
  551. 			.node.node-teaser .right-icon.like-percentage,
  552. 			.node.node-sidebar_teaser .right-icon.like-percentage {
  553. 				margin-left: 0.3em;
  554. 			}
  555. 			
  556. 			.right-icon.ratio-icon {
  557. 				display: none;
  558. 			}
  559.  
  560. 			.node.node-teaser h3.title {
  561. 				width: 100%;
  562. 				height: 2em;
  563. 			}
  564.  
  565. 			.node.node-teaser.flair-lock:hover [title="Flair"],
  566. 			.node.node-sidebar_teaser.flair-lock:hover [title="Flair"] {
  567. 				color: #bbbf;
  568. 			}
  569.  
  570. 			.node.node-teaser.flair-fire:hover [title="Flair"],
  571. 			.node.node-sidebar_teaser.flair-fire:hover [title="Flair"] {
  572. 				color: #f40f;
  573. 				filter: drop-shadow(0.12em -0.16em 0 #f806) drop-shadow(-0.12em -0.04em 0.06em #fd08);
  574. 			}
  575.  
  576. 			.node.node-teaser.flair-star:hover [title="Flair"] {
  577. 				color: #fd4f;
  578. 				transform: rotate(18deg) scale(3.2);
  579. 				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);
  580. 			}
  581.  
  582. 			.node.node-sidebar_teaser.flair-star:hover [title="Flair"] {
  583. 				color: #fd4f;
  584. 				transform: rotate(18deg) scale(2.4);
  585. 				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);
  586. 			}
  587.  
  588. 			.node.node-video.node-teaser.flair-lock:hover > div > div div > a > img,
  589. 			.node.node-video.node-sidebar_teaser.flair-lock:hover > div div > div > a > img {
  590. 				filter: grayscale(1);
  591. 			}
  592.  
  593. 			.node.node-video.node-teaser.flair-fire:hover > div > div div > a > img,
  594. 			.node.node-video.node-sidebar_teaser.flair-fire:hover > div > div div > a > img {
  595. 				filter: sepia(0.3) contrast(1.25) hue-rotate(-15deg) saturate(1.25);
  596. 			}
  597.  
  598. 			.node.node-video.node-teaser.flair-star:hover > div > div div > a > img,
  599. 			.node.node-video.node-sidebar_teaser.flair-star:hover > div > div div > a > img {
  600. 				filter: sepia(0.5) brightness(1.1) contrast(1.25) saturate(1.5);
  601. 			}
  602.  
  603. 			.node.node-teaser .blankimg,
  604. 			.node.node-sidebar_teaser .blankimg {
  605. 				display: block;
  606. 				border: #ccc 0.5pt dashed;
  607. 			}
  608.  
  609. 			.node.node-teaser .blankimg a,
  610. 			.node.node-sidebar_teaser .blankimg a {
  611. 				filter: opacity(0);
  612. 			}
  613.  
  614. 			.node-video.node-full .video-js .vjs-poster, .node-video.node-full video .vjs-poster {
  615. 				background-size: contain;
  616. 			}
  617.  
  618. 			.node-video.node-full .video-js, .node-video.node-full video {
  619. 				max-height: 90vh;
  620. 			}
  621.  
  622. 			.node-video.node-full .vjs-fullscreen video {
  623. 				max-height: unset;
  624. 			}
  625.  
  626. 			.node-video.node-full .vjs-fullscreen.alt-fit video {
  627. 				object-fit: cover;
  628. 			}
  629.  
  630. 			#video-player.video-js > .vjs-control-bar {
  631. 				font-size: 1.2em;
  632. 			}
  633.  
  634. 			.video-js .vjs-play-progress:before {
  635. 				top: -56%;
  636. 				color: #fffd;
  637. 				font-size: 1.4em;
  638. 				box-shadow: 0 8pt 8pt -4pt #0006;
  639. 			}
  640.  
  641. 			.video-js .vjs-volume-level:before {
  642. 				display: none;
  643. 			}
  644.  
  645. 			#video-player.video-js > .vjs-control-bar > .vjs-icon-square {
  646. 				display: none;
  647. 			}
  648.  
  649. 			#video-player.video-js.vjs-fullscreen > .vjs-control-bar > .vjs-icon-square {
  650. 				display: inline-block;
  651. 			}
  652.  
  653. 			.video-js .vjs-fullscreen-control {
  654. 				transform: scale(1.25);
  655. 			}
  656.  
  657. 			.video-js button.vjs-control-active {
  658. 				color: #8bcba1;
  659. 			}
  660.  
  661. 			.video-js div.vjs-mouse-display, .video-js div.vjs-play-progress {
  662. 				font-family: inherit;
  663. 			}
  664.  
  665. 			.vjs-play-progress::before {
  666. 				font-family: VideoJS;
  667. 			}
  668.  
  669. 			body.front #wrapper > section > .container,
  670. 			body.page-node-add form,
  671. 			body.page-node-edit form,
  672. 			body.page-user-friends #content > .container,
  673. 			body.page-user-liked #content > .container,
  674. 			body.page-subscriptions #content > .container,
  675. 			body.page-my-content #content > .container,
  676. 			body.page-messages #content > .container,
  677. 			body.page-user-edit form,
  678. 			body.page-comment #content > .container,
  679. 			body.page-forum #content > .container,
  680. 			body.node-type-video .node.node-video > .content,
  681. 			body.node-type-image .node.node-image > .content,
  682. 			#comments,
  683. 			#add-forum-comment-block,
  684. 			.region.region-content .view-id-profile,
  685. 			.node.node-journal,
  686. 			[class*="block-views"],
  687. 			.sidebar .block.block-facetapi,
  688. 			.sidebar .block.block-mainblocks,
  689. 			.region.region-sidebar .extra-content-block {
  690. 				background-color: #fafafa;
  691. 				border: 1px solid #ccc;
  692. 				border-radius: 4px!important;
  693. 				padding: 0.8em!important;
  694. 				margin: 0.5em 0.5em 1em 0.5em!important;
  695. 			}
  696.  
  697. 			body.page-user #content {
  698. 				background-attachment: fixed;
  699. 			}
  700.  
  701. 			body.page-user- #content > .container {
  702. 				background-color: #eee8;
  703. 			}
  704.  
  705. 			body.page-user [class*="block-views"],
  706. 			body.page-user .sidebar .block.block-views,
  707. 			#block-mainblocks-user-connect,
  708. 			body.page-user #comments {
  709. 				background-color: #fafafad0;
  710. 			}
  711.  
  712. 			body.page-user.page-user- #block-views-profile-block .field-content.role-admin > img {
  713. 				border: #f88 6pt solid;
  714. 				filter: drop-shadow(2pt 2pt 2pt #c444);
  715. 			}
  716.  
  717. 			body.page-user.page-user- #block-views-profile-block .field-content.role-mod > img {
  718. 				border: #8af 6pt solid;
  719. 				filter: drop-shadow(2pt 2pt 2pt #48c4);
  720. 			}
  721.  
  722. 			body.page-node-add form,
  723. 			body.page-node-edit form {
  724. 				background-color: #ffffff;
  725. 			}
  726.  
  727. 			body.front #wrapper > section > .container,
  728. 			body.page-user-friends #content > .container,
  729. 			body.page-user-liked #content > .container,
  730. 			body.page-subscriptions #content > .container,
  731. 			body.page-my-content #content > .container,
  732. 			body.page-messages #content > .container,
  733. 			body.page-user-edit form,
  734. 			body.page-comment #content > .container,
  735. 			body.page-forum #content > .container {
  736. 				margin-left: auto!important;
  737. 				margin-right: auto!important;
  738. 			}
  739. 			
  740. 			body.page-user-friends tr:first-child th:last-child {
  741. 				text-align: right;
  742. 			}
  743.  
  744. 			body.page-user-friends #accept-all-friends,
  745. 			body.page-user-friends #reject-all-friends {
  746. 				position: relative;
  747. 			}
  748.  
  749. 			body.page-user-friends #reject-all-friends {
  750. 				margin-left: 4px;
  751. 			}
  752.  
  753. 			body.page-user-friends #accept-all-friends span:first-child {
  754. 				transform: translateX(-3px);
  755. 				filter: drop-shadow(3px 0 0 #2ecc71);
  756. 				z-index: 1;
  757. 			}
  758.  
  759. 			body.page-user-friends #reject-all-friends span:first-child {
  760. 				transform: translateX(-3px);
  761. 				filter: drop-shadow(3px 0 0 #e74c3c);
  762. 				z-index: 1;
  763. 			}
  764.  
  765. 			body.page-user-friends #accept-all-friends span:last-child,
  766. 			body.page-user-friends #reject-all-friends span:last-child {
  767. 				position: absolute;
  768. 				top: 29%;
  769. 				left: 40%;
  770. 				color: #fffa;
  771. 			}
  772.  
  773. 			body.page-forum #content > .container .panel-group > * {
  774. 				margin-top: 1em;
  775. 			}
  776.  
  777. 			body.node-type-video .node.node-video .node-info .node-views .glyphicon.glyphicon-heart,
  778. 			body.node-type-image .node.node-image .node-info .node-views .glyphicon.glyphicon-heart {
  779. 				margin-left: 0.5em;
  780. 			}
  781.  
  782. 			.node.node-wide_teaser {
  783. 				padding: 0.8em!important;
  784. 				margin: 0.5em 0.5em 1em 0.5em!important;
  785. 			}
  786.  
  787. 			.forum-post {
  788. 				margin: 0.5em 0.5em 1em 0.5em!important;
  789. 			}
  790.  
  791. 			.forum-post > .panel-heading > .text-muted {
  792. 				color: #0008;
  793. 			}
  794.  
  795. 			body.node-type-video .node.node-video > .content,
  796. 			body.node-type-image .node.node-image > .content {
  797. 				padding: 0!important;
  798. 			}
  799.  
  800. 			body.node-type-video .node.node-video > .content > .node-buttons,
  801. 			body.node-type-image .node.node-image > .content > .node-buttons {
  802. 				margin-bottom: 0;
  803. 			}
  804.  
  805. 			body.node-type-video .node.node-video > .content > .well {
  806. 				max-width: 100%!important;
  807. 				margin: 0;
  808. 			}
  809.  
  810. 			.node-journal #comments {
  811. 				border: unset;
  812. 			}
  813.  
  814. 			.view-profile.view-display-id-block {
  815. 				background-color: unset;
  816. 				padding: unset;
  817. 				box-shadow: unset;
  818. 			}
  819.  
  820. 			#block-views-profile-block {
  821. 				background-color: #fafafa;
  822. 				box-shadow: 2pt 8pt 8pt -4pt #0004;
  823. 			}
  824.  
  825. 			.region.region-sidebar .view-id-profile .views-responsive-grid > .views-row > div img,
  826. 			.region.region-content .view-id-profile .views-responsive-grid > .views-row > div img {
  827. 				border-radius: 50%;
  828. 				overflow: hidden;
  829. 				border: #0001 0.2em solid;
  830. 			}
  831.  
  832. 			h1 {
  833. 				padding: 0.25em;
  834. 				margin: 0;
  835. 			}
  836.  
  837. 			#comments > h2.title {
  838. 				padding: 0.4em;
  839. 				margin-bottom: 0.8em;
  840. 			}
  841.  
  842. 			#add-forum-comment-block > h2,
  843. 			.extra-content-block {
  844. 				padding: 0.6em 0;
  845. 			}
  846.  
  847. 			.region.region-sidebar .extra-content-block {
  848. 				background-color: #0000;
  849. 				border: 0;
  850. 				overflow: hidden;
  851. 			}
  852.  
  853. 			.region.region-sidebar .extra-content-block iframe {
  854. 				transform: translateX(-8.75pt);
  855. 			}
  856.  
  857. 			.extra-content-block > center + br,
  858. 			body.node-type-video #block-extra-content-extra-content-block-5, 
  859. 			body.node-type-video #block-extra-content-extra-content-block-8 {
  860. 				display: none;
  861. 			}
  862.  
  863. 			.pager {
  864. 				border-top: 0;
  865. 			}
  866.  
  867. 			#forum > div.view > div.row:first-of-type > div:first-of-type,
  868. 			#forum > div.view > div.row:nth-of-type(3) > div:first-of-type {
  869. 				width: unset;
  870. 				float: left;
  871. 				margin: 1.25em 0;
  872. 			}
  873.  
  874. 			#forum > div.view > div.row:first-of-type > div:last-of-type,
  875. 			#forum > div.view > div.row:nth-of-type(3) > div:last-of-type {
  876. 				width: unset;
  877. 				float: right;
  878. 			}
  879.  
  880. 			.forum-node-create-links {
  881. 				width: unset;
  882. 			}
  883.  
  884. 			#forum .pager {
  885. 				text-align: right;
  886. 			}
  887.  
  888. 			#forum-comments .pager li {
  889. 				margin: unset;
  890. 				padding: unset;
  891. 			}
  892.  
  893. 			div.item-list ul.pager > li,
  894. 			div.item-list ul.pager > li.pager-current,
  895. 			div.item-list ul.pager > li.pager-ellipsis,
  896. 			div.item-list ul.pager > li > a {
  897. 				margin: 0.2em 0;
  898. 				padding: 0;
  899. 				border: 0.05em #0000 solid;
  900. 				transition: 0.15s;
  901. 			}
  902.  
  903. 			div.item-list ul.pager > li > a,
  904. 			div.item-list ul.pager > li.pager-current,
  905. 			div.item-list ul.pager > li.pager-ellipsis {
  906. 				border-radius: 1em;
  907. 				padding: 0 0.6em;
  908. 				border: 0.05em #0002 solid;
  909. 			}
  910.  
  911. 			div.item-list ul.pager > li.pager-ellipsis {
  912. 				border: 0.05em #0000 solid;
  913. 				background: #0000;
  914. 			}
  915.  
  916. 			div.item-list ul.pager > li.pager-current,
  917. 			#forum-comments div.item-list ul.pager > li.pager-current {
  918. 				border: 0.05em #16a085c0 solid;
  919. 				margin: 0 0.1em;
  920. 				padding: 0 0.6em;
  921. 				background: #16a085c0;
  922. 				color: #fafafa;
  923. 			}
  924.  
  925. 			div.item-list ul.pager > li > a:hover {
  926. 				border: 0.05em solid;
  927. 			}
  928.  
  929. 			body.page-user-603563 #block-views-profile-block .field-content {
  930. 				position: relative;
  931. 				filter: drop-shadow(0.1em 0.3em 0.4em #0002);
  932. 			}
  933.  
  934. 			body.page-user-603563 #block-views-profile-block .field-content > img {
  935. 				width: 75%;
  936. 				margin: 3%;
  937. 				transform-origin: 48%;
  938. 				border: 0;
  939. 				border-radius: 0;
  940. 				clip-path: circle(50% at center);
  941. 			}
  942.  
  943. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(1) {
  944. 				position: absolute;
  945. 				filter: contrast(0) brightness(0);
  946. 				transform: scale(1.05);
  947. 			}
  948.  
  949. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(2) {
  950. 				position: absolute;
  951. 				filter: contrast(0) sepia(1) saturate(3) brightness(1.7);
  952. 				animation: special-border 3.7s infinite linear;
  953. 			}
  954.  
  955. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(3) {
  956. 				position: absolute;
  957. 				filter: contrast(0) sepia(1) saturate(7) brightness(1.5) hue-rotate(120deg);
  958. 				animation: special-border 1.2s -0.41s infinite linear;
  959. 			}
  960.  
  961. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(4) {
  962. 				position: absolute;
  963. 				filter: contrast(0) sepia(1) saturate(7) brightness(1.2) hue-rotate(240deg);
  964. 				animation: special-border 2.5s -0.83s infinite linear;
  965. 			}
  966.  
  967. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(5) {
  968. 				position: absolute;
  969. 				filter: contrast(0) brightness(2);
  970. 				animation: special-border 0.7s -0.24s infinite linear;
  971. 			}
  972.  
  973. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(6) {
  974. 				position: absolute;
  975. 			}
  976.  
  977. 			body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(7) {
  978. 				visibility: hidden;
  979. 			}
  980.  
  981. 			@keyframes special-border {
  982. 				0% {transform: translate(2%, 0) rotateZ(40deg) scale(1.03);}
  983. 				100% {transform: translate(2%, 0) rotateZ(400deg) scale(1.03);}
  984. 			}
  985. 			`;
  986. 		document.head.appendChild(styleOverride);
  987. 	}
  988. }, true);