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. let friendsList = document.querySelector('body.page-user-friends table.table');
  376. if (friendsList) { // Accept/reject all friends buttons
  377. let acceptReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Accept"]');
  378. let rejectReqButton = friendsList.querySelectorAll('tr.warning button[data-original-title="Reject"]');
  379. let doAllReqButtonsArea = null;
  380. if (acceptReqButton.length > 1) {
  381. doAllReqButtonsArea = friendsList.querySelector('tr:first-child th:last-child');
  382. 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>';
  383. document.getElementById('accept-all-friends').addEventListener('click', function acceptAllFriends () {
  384. if (confirm("Accept all pending friend requests?")) {
  385. while (doAllReqButtonsArea.lastElementChild) {
  386. doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  387. }
  388. acceptReqButton.forEach(e => {e.click();});
  389. }
  390. }, false);
  391. document.getElementById('reject-all-friends').addEventListener('click', function rejectAllFriends () {
  392. if (confirm("Reject all pending friend requests?")) {
  393. while (doAllReqButtonsArea.lastElementChild) {
  394. doAllReqButtonsArea.removeChild(doAllReqButtonsArea.lastElementChild);
  395. }
  396. rejectReqButton.forEach(e => {e.click();});
  397. }
  398. }, false);
  399. }
  400. }
  401.  
  402. document.addEventListener('click', function modifyVideoPlayer (event) {
  403. let videoPlayerRoot = document.querySelector('#video-player.video-js');
  404. if (
  405. videoPlayerRoot &&
  406. (event.target.className.match('vjs-big-play-button') || event.target.className.match('vjs-poster'))
  407. ) {
  408. document.removeEventListener('click', modifyVideoPlayer);
  409. let videoControlBar = videoPlayerRoot.querySelector('.vjs-control-bar');
  410.  
  411. // Fix replay button HTML structure (which makes the size inconsistent), along with reordering it
  412. let videoResButton = videoControlBar.querySelector('.vjs-resolution-button');
  413. let videoFullscreenButton = videoControlBar.querySelector('.vjs-fullscreen-control');
  414. let videoReplayButton = videoControlBar.querySelector('.vjs-loop-button');
  415. if (videoReplayButton) {
  416. videoReplayButton.innerHTML = '';
  417. videoReplayButton.className = 'vjs-icon-replay vjs-control vjs-button';
  418. }
  419. videoControlBar.insertBefore(videoReplayButton, videoResButton);
  420.  
  421. // Add toggle fullscreen fit mode button to the video player
  422. let videoFitButton = document.createElement('button');
  423. videoFitButton.className = 'vjs-icon-square vjs-control vjs-button';
  424. videoFitButton.setAttribute('type', 'button');
  425. videoFitButton.setAttribute('aria-live', 'polite');
  426. videoFitButton.innerHTML = '<span class="vjs-control-text">Fullscreen Fit Mode</span>';
  427. videoControlBar.insertBefore(videoFitButton, videoFullscreenButton);
  428. videoFitButton.addEventListener ('click', function toggleVideoFitMode () {
  429. if (videoPlayerRoot.className.match('alt-fit')) {
  430. videoPlayerRoot.className = videoPlayerRoot.className.replace(' alt-fit', '');
  431. videoFitButton.className = videoFitButton.className.replace(' vjs-control-active', '');
  432. }
  433. else {
  434. videoPlayerRoot.className += ' alt-fit';
  435. videoFitButton.className += ' vjs-control-active';
  436. }
  437. }, false);
  438. }
  439. }, false);
  440.  
  441. // CSS Override
  442. styleOverride.innerHTML += `
  443. .node.node-teaser,
  444. .node.node-sidebar_teaser,
  445. .node.node-teaser i,
  446. .node.node-sidebar_teaser i,
  447. .node.node-teaser img,
  448. .node.node-sidebar_teaser img {
  449. transition: 0.15s!important;
  450. }
  451.  
  452. /*
  453. .node.node-teaser img,
  454. .node.node-sidebar_teaser img {
  455. filter: contrast(0)!important;
  456. }
  457. */
  458.  
  459. .node.node-teaser h3.title,
  460. .node.node-sidebar_teaser h3.title {
  461. height: auto!important;
  462. white-space: nowrap!important;
  463. text-overflow: ellipsis!important;
  464. }
  465.  
  466. .node.node-teaser:hover,
  467. .node.node-sidebar_teaser:hover {
  468. background: #fff;
  469. opacity: 1!important;
  470. box-shadow: 3pt 12pt 12pt -6pt #0004;
  471. transform: rotate3d(0.9, -0.1, 0.1, 3deg) scale(1.02);
  472. z-index: 42;
  473. }
  474.  
  475. .node.node-teaser.flair-fire:hover,
  476. .node.node-sidebar_teaser.flair-fire:hover {
  477. transform: rotate3d(0.9, -0.1, 0.1, -4.5deg) scale(1.02);
  478. border-color: #f40a;
  479. }
  480.  
  481. .node.node-teaser.flair-star:hover,
  482. .node.node-sidebar_teaser.flair-star:hover {
  483. transform: rotate3d(-0.9, 0.1, -0.2, 4.5deg) scale(1.04);
  484. filter: drop-shadow(-0.2em -0.2em 2em #ffe8);
  485. outline: 0.32em solid #fe8;
  486. border: 0;
  487. border-radius: 0;
  488. }
  489.  
  490. .views-responsive-grid.views-responsive-grid-horizontal.views-columns-2 > * {
  491. margin-bottom: 0;
  492. }
  493.  
  494. .node.node-teaser .icon-bg,
  495. .node.node-sidebar_teaser .icon-bg {
  496. width: 100%!important;
  497. position: unset;
  498. margin-top: 0.4em;
  499. padding: 0;
  500. }
  501.  
  502. .node.node-sidebar_teaser .icon-bg {
  503. min-height: 1.35em;
  504. }
  505.  
  506. .node:hover .icon-bg {
  507. background: unset!important;
  508. }
  509.  
  510. .node.node-teaser .left-icon,
  511. .node.node-sidebar_teaser .left-icon {
  512. color: inherit;
  513. margin-left: 0.1em;
  514. font-size: 0.8em;
  515. filter: unset!important;
  516.  
  517. }
  518.  
  519. .node.node-teaser .right-icon,
  520. .node.node-sidebar_teaser .right-icon {
  521. float: left!important;
  522. color: inherit;
  523. margin-left: 0.5em;
  524. font-size: 0.8em;
  525. filter: unset!important;
  526. }
  527.  
  528. .node-image.node-sidebar_teaser .right-icon:first-of-type {
  529. margin-left: 0;
  530. }
  531.  
  532. .node.node-teaser .left-icon.multiple-icon,
  533. .node.node-sidebar_teaser .left-icon.multiple-icon {
  534. float: right!important;
  535. color: inherit;
  536. margin-left: 0.5em;
  537. font-size: 0.8em;
  538. filter: unset!important;
  539. }
  540.  
  541. .node.node-teaser .left-icon.flair-icon,
  542. .node.node-sidebar_teaser .left-icon.flair-icon {
  543. float: right!important;
  544. color: inherit;
  545. margin-right: 0.1em;
  546. font-size: 0.8em;
  547. filter: unset!important;
  548. }
  549.  
  550. .node.node-teaser .right-icon.like-percentage,
  551. .node.node-sidebar_teaser .right-icon.like-percentage {
  552. margin-left: 0.3em;
  553. }
  554. .right-icon.ratio-icon {
  555. display: none;
  556. }
  557.  
  558. .node.node-teaser h3.title {
  559. width: 100%;
  560. height: 2em;
  561. }
  562.  
  563. .node.node-teaser.flair-lock:hover [title="Flair"],
  564. .node.node-sidebar_teaser.flair-lock:hover [title="Flair"] {
  565. color: #bbbf;
  566. }
  567.  
  568. .node.node-teaser.flair-fire:hover [title="Flair"],
  569. .node.node-sidebar_teaser.flair-fire:hover [title="Flair"] {
  570. color: #f40f;
  571. filter: drop-shadow(0.12em -0.16em 0 #f806) drop-shadow(-0.12em -0.04em 0.06em #fd08);
  572. }
  573.  
  574. .node.node-teaser.flair-star:hover [title="Flair"] {
  575. color: #fd4f;
  576. transform: rotate(18deg) scale(3.2);
  577. 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);
  578. }
  579.  
  580. .node.node-sidebar_teaser.flair-star:hover [title="Flair"] {
  581. color: #fd4f;
  582. transform: rotate(18deg) scale(2.4);
  583. 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);
  584. }
  585.  
  586. .node.node-video.node-teaser.flair-lock:hover > div > div div > a > img,
  587. .node.node-video.node-sidebar_teaser.flair-lock:hover > div div > div > a > img {
  588. filter: grayscale(1);
  589. }
  590.  
  591. .node.node-video.node-teaser.flair-fire:hover > div > div div > a > img,
  592. .node.node-video.node-sidebar_teaser.flair-fire:hover > div > div div > a > img {
  593. filter: sepia(0.3) contrast(1.25) hue-rotate(-15deg) saturate(1.25);
  594. }
  595.  
  596. .node.node-video.node-teaser.flair-star:hover > div > div div > a > img,
  597. .node.node-video.node-sidebar_teaser.flair-star:hover > div > div div > a > img {
  598. filter: sepia(0.5) brightness(1.1) contrast(1.25) saturate(1.5);
  599. }
  600.  
  601. .node.node-teaser .blankimg,
  602. .node.node-sidebar_teaser .blankimg {
  603. display: block;
  604. border: #ccc 0.5pt dashed;
  605. }
  606.  
  607. .node.node-teaser .blankimg a,
  608. .node.node-sidebar_teaser .blankimg a {
  609. filter: opacity(0);
  610. }
  611.  
  612. .node-video.node-full .video-js .vjs-poster, .node-video.node-full video .vjs-poster {
  613. background-size: contain;
  614. }
  615.  
  616. .node-video.node-full .video-js, .node-video.node-full video {
  617. max-height: 90vh;
  618. }
  619.  
  620. .node-video.node-full .vjs-fullscreen video {
  621. max-height: unset;
  622. }
  623.  
  624. .node-video.node-full .vjs-fullscreen.alt-fit video {
  625. object-fit: cover;
  626. }
  627.  
  628. #video-player.video-js > .vjs-control-bar {
  629. font-size: 1.2em;
  630. }
  631.  
  632. .video-js .vjs-play-progress:before {
  633. top: -56%;
  634. color: #fffd;
  635. font-size: 1.4em;
  636. box-shadow: 0 8pt 8pt -4pt #0006;
  637. }
  638.  
  639. .video-js .vjs-volume-level:before {
  640. display: none;
  641. }
  642.  
  643. #video-player.video-js > .vjs-control-bar > .vjs-icon-square {
  644. display: none;
  645. }
  646.  
  647. #video-player.video-js.vjs-fullscreen > .vjs-control-bar > .vjs-icon-square {
  648. display: inline-block;
  649. }
  650.  
  651. .video-js .vjs-fullscreen-control {
  652. transform: scale(1.25);
  653. }
  654.  
  655. .video-js button.vjs-control-active {
  656. color: #8bcba1;
  657. }
  658.  
  659. .video-js div.vjs-mouse-display, .video-js div.vjs-play-progress {
  660. font-family: inherit;
  661. }
  662.  
  663. .vjs-play-progress::before {
  664. font-family: VideoJS;
  665. }
  666.  
  667. body.front #wrapper > section > .container,
  668. body.page-node-add form,
  669. body.page-node-edit form,
  670. body.page-user-friends #content > .container,
  671. body.page-user-liked #content > .container,
  672. body.page-subscriptions #content > .container,
  673. body.page-my-content #content > .container,
  674. body.page-messages #content > .container,
  675. body.page-user-edit form,
  676. body.page-comment #content > .container,
  677. body.page-forum #content > .container,
  678. body.node-type-video .node.node-video > .content,
  679. body.node-type-image .node.node-image > .content,
  680. #comments,
  681. #add-forum-comment-block,
  682. .region.region-content .view-id-profile,
  683. .node.node-journal,
  684. [class*="block-views"],
  685. .sidebar .block.block-facetapi,
  686. .sidebar .block.block-mainblocks,
  687. .region.region-sidebar .extra-content-block {
  688. background-color: #fafafa;
  689. border: 1px solid #ccc;
  690. border-radius: 4px!important;
  691. padding: 0.8em!important;
  692. margin: 0.5em 0.5em 1em 0.5em!important;
  693. }
  694.  
  695. body.page-user #content {
  696. background-attachment: fixed;
  697. }
  698.  
  699. body.page-user- #content > .container {
  700. background-color: #eee8;
  701. }
  702.  
  703. body.page-user [class*="block-views"],
  704. body.page-user .sidebar .block.block-views,
  705. #block-mainblocks-user-connect,
  706. body.page-user #comments {
  707. background-color: #fafafad0;
  708. }
  709.  
  710. body.page-user.page-user- #block-views-profile-block .field-content.role-admin > img {
  711. border: #f88 6pt solid;
  712. filter: drop-shadow(2pt 2pt 2pt #c444);
  713. }
  714.  
  715. body.page-user.page-user- #block-views-profile-block .field-content.role-mod > img {
  716. border: #8af 6pt solid;
  717. filter: drop-shadow(2pt 2pt 2pt #48c4);
  718. }
  719.  
  720. body.page-node-add form,
  721. body.page-node-edit form {
  722. background-color: #ffffff;
  723. }
  724.  
  725. body.front #wrapper > section > .container,
  726. body.page-user-friends #content > .container,
  727. body.page-user-liked #content > .container,
  728. body.page-subscriptions #content > .container,
  729. body.page-my-content #content > .container,
  730. body.page-messages #content > .container,
  731. body.page-user-edit form,
  732. body.page-comment #content > .container,
  733. body.page-forum #content > .container {
  734. margin-left: auto!important;
  735. margin-right: auto!important;
  736. }
  737. body.page-user-friends tr:first-child th:last-child {
  738. text-align: right;
  739. }
  740.  
  741. body.page-user-friends #accept-all-friends,
  742. body.page-user-friends #reject-all-friends {
  743. position: relative;
  744. }
  745.  
  746. body.page-user-friends #reject-all-friends {
  747. margin-left: 4px;
  748. }
  749.  
  750. body.page-user-friends #accept-all-friends span:first-child {
  751. transform: translateX(-3px);
  752. filter: drop-shadow(3px 0 0 #2ecc71);
  753. z-index: 1;
  754. }
  755.  
  756. body.page-user-friends #reject-all-friends span:first-child {
  757. transform: translateX(-3px);
  758. filter: drop-shadow(3px 0 0 #e74c3c);
  759. z-index: 1;
  760. }
  761.  
  762. body.page-user-friends #accept-all-friends span:last-child,
  763. body.page-user-friends #reject-all-friends span:last-child {
  764. position: absolute;
  765. top: 29%;
  766. left: 40%;
  767. color: #fffa;
  768. }
  769.  
  770. body.page-forum #content > .container .panel-group > * {
  771. margin-top: 1em;
  772. }
  773.  
  774. body.node-type-video .node.node-video .node-info .node-views .glyphicon.glyphicon-heart,
  775. body.node-type-image .node.node-image .node-info .node-views .glyphicon.glyphicon-heart {
  776. margin-left: 0.5em;
  777. }
  778.  
  779. .node.node-wide_teaser {
  780. padding: 0.8em!important;
  781. margin: 0.5em 0.5em 1em 0.5em!important;
  782. }
  783.  
  784. .forum-post {
  785. margin: 0.5em 0.5em 1em 0.5em!important;
  786. }
  787.  
  788. .forum-post > .panel-heading > .text-muted {
  789. color: #0008;
  790. }
  791.  
  792. body.node-type-video .node.node-video > .content,
  793. body.node-type-image .node.node-image > .content {
  794. padding: 0!important;
  795. }
  796.  
  797. body.node-type-video .node.node-video > .content > .node-buttons,
  798. body.node-type-image .node.node-image > .content > .node-buttons {
  799. margin-bottom: 0;
  800. }
  801.  
  802. body.node-type-video .node.node-video > .content > .well {
  803. max-width: 100%!important;
  804. margin: 0;
  805. }
  806.  
  807. .node-journal #comments {
  808. border: unset;
  809. }
  810.  
  811. .view-profile.view-display-id-block {
  812. background-color: unset;
  813. padding: unset;
  814. box-shadow: unset;
  815. }
  816.  
  817. #block-views-profile-block {
  818. background-color: #fafafa;
  819. box-shadow: 2pt 8pt 8pt -4pt #0004;
  820. }
  821.  
  822. .region.region-sidebar .view-id-profile .views-responsive-grid > .views-row > div img,
  823. .region.region-content .view-id-profile .views-responsive-grid > .views-row > div img {
  824. border-radius: 50%;
  825. overflow: hidden;
  826. border: #0001 0.2em solid;
  827. }
  828.  
  829. h1 {
  830. padding: 0.25em;
  831. margin: 0;
  832. }
  833.  
  834. #comments > h2.title {
  835. padding: 0.4em;
  836. margin-bottom: 0.8em;
  837. }
  838.  
  839. #add-forum-comment-block > h2,
  840. .extra-content-block {
  841. padding: 0.6em 0;
  842. }
  843.  
  844. .region.region-sidebar .extra-content-block {
  845. background-color: #0000;
  846. border: 0;
  847. overflow: hidden;
  848. }
  849.  
  850. .region.region-sidebar .extra-content-block iframe {
  851. transform: translateX(-8.75pt);
  852. }
  853.  
  854. .extra-content-block > center + br,
  855. body.node-type-video #block-extra-content-extra-content-block-5,
  856. body.node-type-video #block-extra-content-extra-content-block-8 {
  857. display: none;
  858. }
  859.  
  860. .pager {
  861. border-top: 0;
  862. }
  863.  
  864. #forum > div.view > div.row:first-of-type > div:first-of-type,
  865. #forum > div.view > div.row:nth-of-type(3) > div:first-of-type {
  866. width: unset;
  867. float: left;
  868. margin: 1.25em 0;
  869. }
  870.  
  871. #forum > div.view > div.row:first-of-type > div:last-of-type,
  872. #forum > div.view > div.row:nth-of-type(3) > div:last-of-type {
  873. width: unset;
  874. float: right;
  875. }
  876.  
  877. .forum-node-create-links {
  878. width: unset;
  879. }
  880.  
  881. #forum .pager {
  882. text-align: right;
  883. }
  884.  
  885. #forum-comments .pager li {
  886. margin: unset;
  887. padding: unset;
  888. }
  889.  
  890. div.item-list ul.pager > li,
  891. div.item-list ul.pager > li.pager-current,
  892. div.item-list ul.pager > li.pager-ellipsis,
  893. div.item-list ul.pager > li > a {
  894. margin: 0.2em 0;
  895. padding: 0;
  896. border: 0.05em #0000 solid;
  897. transition: 0.15s;
  898. }
  899.  
  900. div.item-list ul.pager > li > a,
  901. div.item-list ul.pager > li.pager-current,
  902. div.item-list ul.pager > li.pager-ellipsis {
  903. border-radius: 1em;
  904. padding: 0 0.6em;
  905. border: 0.05em #0002 solid;
  906. }
  907.  
  908. div.item-list ul.pager > li.pager-ellipsis {
  909. border: 0.05em #0000 solid;
  910. background: #0000;
  911. }
  912.  
  913. div.item-list ul.pager > li.pager-current,
  914. #forum-comments div.item-list ul.pager > li.pager-current {
  915. border: 0.05em #16a085c0 solid;
  916. margin: 0 0.1em;
  917. padding: 0 0.6em;
  918. background: #16a085c0;
  919. color: #fafafa;
  920. }
  921.  
  922. div.item-list ul.pager > li > a:hover {
  923. border: 0.05em solid;
  924. }
  925.  
  926. body.page-user-603563 #block-views-profile-block .field-content {
  927. position: relative;
  928. filter: drop-shadow(0.1em 0.3em 0.4em #0002);
  929. }
  930.  
  931. body.page-user-603563 #block-views-profile-block .field-content > img {
  932. width: 75%;
  933. margin: 3%;
  934. transform-origin: 48%;
  935. border: 0;
  936. border-radius: 0;
  937. clip-path: circle(50% at center);
  938. }
  939.  
  940. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(1) {
  941. position: absolute;
  942. filter: contrast(0) brightness(0);
  943. transform: scale(1.05);
  944. }
  945.  
  946. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(2) {
  947. position: absolute;
  948. filter: contrast(0) sepia(1) saturate(3) brightness(1.7);
  949. animation: special-border 3.7s infinite linear;
  950. }
  951.  
  952. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(3) {
  953. position: absolute;
  954. filter: contrast(0) sepia(1) saturate(7) brightness(1.5) hue-rotate(120deg);
  955. animation: special-border 1.2s -0.41s infinite linear;
  956. }
  957.  
  958. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(4) {
  959. position: absolute;
  960. filter: contrast(0) sepia(1) saturate(7) brightness(1.2) hue-rotate(240deg);
  961. animation: special-border 2.5s -0.83s infinite linear;
  962. }
  963.  
  964. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(5) {
  965. position: absolute;
  966. filter: contrast(0) brightness(2);
  967. animation: special-border 0.7s -0.24s infinite linear;
  968. }
  969.  
  970. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(6) {
  971. position: absolute;
  972. }
  973.  
  974. body.page-user-603563 #block-views-profile-block .field-content > img:nth-child(7) {
  975. visibility: hidden;
  976. }
  977.  
  978. @keyframes special-border {
  979. 0% {transform: translate(2%, 0) rotateZ(40deg) scale(1.03);}
  980. 100% {transform: translate(2%, 0) rotateZ(400deg) scale(1.03);}
  981. }
  982. `;
  983. document.head.appendChild(styleOverride);
  984. }
  985. }, true);