Last active
July 26, 2023 14:19
-
-
Save garciasantino/81b74e43b841f5cf5c117f553ba16660 to your computer and use it in GitHub Desktop.
AlliedDarkers 2.0 (edit) - Original theme by klippy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This version implements Borders to user image, archive dark theme, memberlist dark theme, show post dark theme, and more. | |
| // ==UserScript== | |
| // @name AlliedDarkers 2.0 (edit) | |
| // @namespace github.com/garciasantino | |
| // @match https://forums.alliedmods.net/* | |
| // @version 0.0.1 | |
| // @downloadURL https://gist.github.com/garciasantino/ee47955fdff34b8228e65fa25081680b/raw | |
| // @homepageURL https://github.com/garciasantino | |
| // @grant none | |
| // @run-at document-start | |
| // ==/UserScript== | |
| 'use strict'; | |
| const colors = { | |
| '1': '#0A0A0A', | |
| '2': '#212121', | |
| '3': '#303030', | |
| '4': '#424242', | |
| '5': '#545452', | |
| 'primary': '#006699', | |
| 'secondary': '#486DC6', | |
| 'text': '#CACACA', | |
| 'faded-text': '#AAAAAA', | |
| 'body': '#171717', | |
| 'page': '#1A1A1A', | |
| 'code-bg': '#CCCCCC', | |
| 'quote-bg': '#4A4A4A', | |
| 'new-post': '#ffa531', | |
| 'old-post': '#424242' | |
| }; | |
| const styles = { | |
| // Common for every page | |
| '$common': ` | |
| @import url('https://fonts.cdnfonts.com/css/montserrat'); | |
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&display=swap'); | |
| strong { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| a { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| a:link:hover { | |
| transition: .1s color !important; | |
| color: #005580 !important; | |
| } | |
| a:visited:hover { | |
| transition: .1s color !important; | |
| color: #005580 !important; | |
| } | |
| select { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .vbmenu_control { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .quote { | |
| border-radius: 10px; | |
| } | |
| .vbmenu_control a img { | |
| content: url('https://www.revistareder.com/ojs/public/site/images/admin/PayPal_reder_button1.png'); width: 74px; height: 21px; | |
| } | |
| li { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| p { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .smallfont { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .smalltext { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| td { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| body { | |
| background: ${colors['body']} !important; | |
| color: ${colors['text']} !important; | |
| } | |
| .page { | |
| background: ${colors['page']} !important; | |
| color: ${colors['text']} !important; | |
| } | |
| .page > div { | |
| padding: 0 10% 0px 10% !important; | |
| } | |
| a:link, a:visited { | |
| color: ${colors['primary']} !important; | |
| } | |
| .tborder { | |
| background: ${colors['3']} !important; | |
| border-spacing: 0 !important; | |
| border: none !important; | |
| } | |
| .tborder > tbody > tr > td { | |
| border-top: 2px solid ${colors['page']} !important; | |
| } | |
| .thead { | |
| background: ${colors['1']} !important; | |
| color: ${colors['text']} !important; | |
| } | |
| .tfoot { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| } | |
| .tcat { | |
| color: ${colors['secondary']} !important; | |
| background: ${colors['2']} !important; | |
| } | |
| .alt1, .alt2, .alt3, .alt4, .alt1Active { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| } | |
| .time { | |
| color: ${colors['secondary']} !important; | |
| } | |
| fieldset { | |
| border: 2px solid ${colors['4']} !important; | |
| } | |
| legend { | |
| color: ${colors['secondary']} !important; | |
| } | |
| .vbmenu_popup { | |
| background: ${colors['5']} !important; | |
| border: none !important; | |
| } | |
| .vbmenu_control, .vbmenu_option { | |
| background: ${colors['2']} !important; | |
| color: ${colors['primary']} !important; | |
| } | |
| code span { | |
| font-family: 'JetBrains Mono', sans-serif; | |
| } | |
| .bginput { | |
| background: ${colors['4']} !important; | |
| color: ${colors['faded-text']} !important; | |
| border: 1px solid ${colors['1']} !important; | |
| padding: 2px !important; | |
| } | |
| select { | |
| background-color: ${colors['4']} !important; | |
| color: ${colors['faded-text']} !important; | |
| border: 1px solid ${colors['1']} !important; | |
| padding: 2px !important; | |
| } | |
| optgroup[label], select option { | |
| background: ${colors['4']} !important; | |
| color: ${colors['faded-text']} !important; | |
| } | |
| .button { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| border: 1px solid ${colors['2']} !important; | |
| padding: 3px 8px 3px 8px !important; | |
| border-radius: 5px !important; | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .button:hover { | |
| border: 1px solid ${colors['primary']} !important; | |
| cursor: pointer; | |
| } | |
| .button.large { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| } | |
| .button.skype { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #0093ff !important; | |
| border: 1px solid #0093ff !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.skype:hover { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #0088ec !important; | |
| border: 1px solid #0088ec !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.yim { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #ff1321 !important; | |
| border: 1px solid #ff1321 !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.yim:hover { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #eb0c19 !important; | |
| border: 1px solid #eb0c19 !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.icq { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #36e13e !important; | |
| border: 1px solid #36e13e !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.msnm { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #75b6fb !important; | |
| border: 1px solid #75b6fb !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.msnm:hover { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #6caaec !important; | |
| border: 1px solid #6caaec !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.aim { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #ffcd21 !important; | |
| border: 1px solid #ffcd21 !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.aim:hover { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #eaba14 !important; | |
| border: 1px solid #eaba14 !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .button.icq:hover { | |
| font-size: 12px; | |
| padding-top: 4px !important; | |
| padding-bottom: 4px !important; | |
| background-color: #31d738 !important; | |
| border: 1px solid #31d738 !important; | |
| font-weight: bold !important; | |
| color: white !important; | |
| } | |
| .online-status { | |
| vertical-align: middle; | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| .online-status.online { | |
| background-color: #4BDE4B; | |
| } | |
| .online-status.offline { | |
| background-color: ${colors['5']}; | |
| } | |
| .smile { | |
| content: url('https://i.ibb.co/MVh73WY/smile.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .pirate { | |
| content: url('https://i.ibb.co/f12qZzp/grrr.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| img.proxied-img { | |
| border-radius: 5px; | |
| } | |
| .bee { | |
| content: url('https://i.ibb.co/9g5JLHx/bee.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .down { | |
| content: url('https://i.ibb.co/pyzm9T7/thumbs-down.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .twisted { | |
| content: url('https://i.ibb.co/dkyKnzq/twisted.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .blush { | |
| content: url('https://i.ibb.co/2MyY2FX/blushed.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .mad { | |
| content: url('https://i.ibb.co/fDsYW83/mad.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .cry { | |
| content: url('https://i.ibb.co/x3qMzkv/cry.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .rolleyes { | |
| content: url('https://i.ibb.co/d7Xwmg3/face-with-rolling-eyes.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .up { | |
| content: url('https://i.ibb.co/hM7QHmN/thumbs-up.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .evil { | |
| content: url('https://i.ibb.co/drXqwrK/evil.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .grinning { | |
| content: url('https://i.ibb.co/S77xNJc/grinning.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .shocked { | |
| content: url('https://i.ibb.co/bPtG9Wp/shocked.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .surprised { | |
| content: url('https://i.ibb.co/c3k9JR7/surprised.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .arrow { | |
| content: url('https://i.ibb.co/8sM6Cnx/arrow.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .idea { | |
| content: url('https://i.ibb.co/MhR88bM/idea.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .lol { | |
| content: url('https://i.ibb.co/94fr1wd/lol.gif'); width: 15px; height: 15px; display: initial; | |
| } | |
| .neutral { | |
| content: url('https://i.ibb.co/qBkKFQk/neutral.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .question { | |
| content: url('https://i.ibb.co/b2kVJr5/question.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .wink { | |
| content: url('https://i.ibb.co/XpzRVhW/wink.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .exclamation { | |
| content: url('https://i.ibb.co/x3fBF5N/exclamation.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .tongue { | |
| content: url('https://i.ibb.co/vQx0yZN/tongue.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .sad { | |
| content: url('https://i.ibb.co/BGtBY9F/sad.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .confused { | |
| content: url('https://i.ibb.co/bJxv5cy/confused.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .stupid { | |
| content: url('https://i.ibb.co/gymmhq6/stupid.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .cool { | |
| content: url('https://i.ibb.co/vD0q0T8/cool.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| .bacon { | |
| content: url('https://i.ibb.co/bPHmW7m/bacon.png'); width: 15px; height: 15px; display: initial; | |
| } | |
| #forum_logo { | |
| content: url('https://forums.alliedmods.net/images/misc/am-banner.svg') !important; | |
| } | |
| #collapseobj_forumhome_birthdays tr td a img { | |
| content: url('https://cdn.joypixels.com/emoji/joypixels/6.0/png/unicode/32/1f370.png'); | |
| } | |
| #collapseobj_forumhome_activeusers tr td a img { | |
| content: url('https://cdn.joypixels.com/emoji/joypixels/7.0/png/unicode/32/1f933.png'); | |
| } | |
| .plugin { | |
| content: url('https://forums.alliedmods.net/favicon.ico'); width: 16px; height: 16px; | |
| } | |
| .zip { | |
| content: url('https://i.ibb.co/k4bf0Qr/zip.png'); width: 16px; height: 16px; | |
| } | |
| .cfg { | |
| content: url('https://i.ibb.co/j6j8MtG/cfg.png'); width: 16px; height: 16px; | |
| } | |
| .inc { | |
| content: url('https://i.ibb.co/fYmbqQJ/inc.png'); width: 16px; height: 16px; | |
| } | |
| `, | |
| 'index': ` | |
| .home-links { | |
| color: ${colors['text']} !important; | |
| } | |
| .subforum-status { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| } | |
| .subforum-status.new { | |
| background-color: ${colors['new-post']}; | |
| } | |
| .subforum-status.old { | |
| background-color: ${colors['old-post']}; | |
| } | |
| `, | |
| 'forumdisplay': ` | |
| @keyframes thread-hot-anim { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } | |
| 40% { transform: translateY(-4px); } | |
| 60% { transform: translateY(-2px ); } | |
| } | |
| .thread-status { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .thread-hot { | |
| animation: thread-hot-anim 1.5s ease infinite; | |
| } | |
| `, | |
| 'threadstatus': ` | |
| .thread-status { | |
| display: inline-block; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| margin: 1px; | |
| } | |
| .thread-status.old { | |
| background: ${colors['old-post']}; | |
| } | |
| .thread-status.new { | |
| background: ${colors['new-post']}; | |
| } | |
| .thread-status.has-posts { | |
| width: 8px; | |
| height: 8px; | |
| background: #d85c5c; | |
| position: relative; | |
| left: -3px; | |
| top: -3px; | |
| } | |
| .thread-status.lock { | |
| background: #A0A0A0; | |
| } | |
| `, | |
| 'showthread': ` | |
| .ttop, .tinside, .tbottom { | |
| border: none !important; | |
| } | |
| .tinside .alt2, .tinside .alt3, .tbottom .alt2, .tbottom .alt3, .tbottom .thead, .ttop .alt2, .ttop .alt3, .ttop .thead { | |
| border-color: ${colors['4']} !important; | |
| } | |
| .bpost { | |
| background: ${colors['2']} !important; | |
| border: none !important; | |
| } | |
| .tinside legend, .tbottom legend, .ttop legend { | |
| color: ${colors['primary']} !important; | |
| } | |
| .tinside fieldset, .tbottom fieldset, .ttop fieldset { | |
| border-color: ${colors['4']} !important; | |
| } | |
| .tinside hr, .tbottom hr, .ttop hr { | |
| color: ${colors['4']} !important; | |
| } | |
| .tborder[id^=post] { | |
| padding-top: 6px; | |
| background: ${colors['2']} !important; | |
| } | |
| .smallfont img { | |
| border-radius: 5px !important; | |
| filter: drop-shadow(0 0 0.75rem black) !important; | |
| } | |
| table tbody tr .thead { | |
| background: #2B2B2B !important; | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| iframe { | |
| border-radius: 5px !important; | |
| box-shadow: 0 0 2px ${colors['1']} !important; | |
| } | |
| textarea { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| border: none !important; | |
| } | |
| .controlbar { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| border: none !important; | |
| } | |
| .vBulletin_editor { | |
| background: ${colors['3']} !important; | |
| border-radius: 5px !important; | |
| } | |
| #vB_Editor_QE_1_editor { | |
| border: none !important; | |
| } | |
| `, | |
| 'vb-editor': ` | |
| .panel { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| border: none !important; | |
| } | |
| .controlbar fieldset { | |
| border: none !important; | |
| } | |
| .controlbar textarea { | |
| border: 1px solid ${colors['1']} !important; | |
| resize: vertical; | |
| } | |
| .vBulletin_editor { | |
| border: 1px solid ${colors['1']} !important; | |
| } | |
| .panelsurround { | |
| background: ${colors['3']} !important; | |
| } | |
| `, | |
| 'newreply': ` | |
| #collapseobj_threadreview hr { | |
| color: ${colors['4']} !important; | |
| background: ${colors['4']} !important; | |
| } | |
| .panelsurround { | |
| background: ${colors['3']} !important; | |
| color: #000000; | |
| } | |
| .panel { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| padding: 10px; | |
| border: none !important; | |
| } | |
| textarea { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| padding: 10px; | |
| border: none !important; | |
| } | |
| `, | |
| 'memberlist': ` | |
| .panelsurround { | |
| background: ${colors['3']} !important; | |
| color: #000000; | |
| } | |
| .panel { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| padding: 10px; | |
| border: none !important; | |
| } | |
| `, | |
| 'showpost': ` | |
| div .alt2 { | |
| background: #1c2231 !important; | |
| border: 1px solid ${colors['1']} !important; | |
| border-radius: 10px; | |
| } | |
| .quote { | |
| background: ${colors['quote-bg']} !important; | |
| border: 1px solid ${colors['1']} !important; | |
| color: ${colors['faded-text']} !important; | |
| border-radius: 10px; | |
| } | |
| .smallfont img { | |
| border-radius: 5px !important; | |
| box-shadow: 0 0 2px ${colors['1']} !important; | |
| } | |
| `, | |
| 'sendmessage': ` | |
| .panelsurround { | |
| background: ${colors['2']} !important; | |
| color: #000000; | |
| } | |
| .panel { | |
| background: ${colors['3']} !important; | |
| color: ${colors['text']} !important; | |
| padding: 10px; | |
| border: none !important; | |
| } | |
| textarea { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| padding: 10px; | |
| border: none !important; | |
| } | |
| `, | |
| 'archive': ` | |
| ul { | |
| list-style-type: none; | |
| background: ${colors['3']} !important; | |
| } | |
| #content { | |
| margin-bottom: 8px; | |
| border: none !important; | |
| padding: 4px; | |
| padding-left: 24px; | |
| background: ${colors['3']} !important; | |
| } | |
| div.pda { | |
| float: right; | |
| background: ${colors['3']} !important; | |
| border-left: 1px solid ${colors['3']}; | |
| border-right: 1px solid ${colors['3']}; | |
| border-bottom: 1px solid ${colors['3']}; | |
| padding: 4px; | |
| } | |
| div.pagebody { | |
| background: ${colors['2']} !important; | |
| padding: 16px !important; | |
| border: none !important; | |
| } | |
| #navbar { | |
| background: ${colors['3']} !important; | |
| border: none !important; | |
| padding: 4px; | |
| } | |
| .smallfont img { | |
| border-radius: 5px !important; | |
| box-shadow: 0 0 2px ${colors['1']} !important; | |
| } | |
| `, | |
| 'bbcode': ` | |
| .quote { | |
| background: ${colors['quote-bg']} !important; | |
| border: 1px solid ${colors['1']} !important; | |
| color: ${colors['faded-text']} !important; | |
| border-radius: 10px; | |
| } | |
| div.alt2[dir=ltr], pre.alt2[dir=ltr] { | |
| background: ${colors['code-bg']} !important; | |
| border: 1px solid ${colors['1']} !important; | |
| color: black !important; | |
| } | |
| `, | |
| 'search': ` | |
| .panel { | |
| background: ${colors['2']} !important; | |
| color: ${colors['text']} !important; | |
| border: none !important; | |
| } | |
| ` | |
| }; | |
| const pageStyles = { | |
| '/index.php': ['threadstatus', 'index'], | |
| '/archive/index.php': ['archive'], | |
| '/memberlist.php': ['memberlist'], | |
| '/sendmessage.php': ['sendmessage'], | |
| '/showpost.php': ['showpost'], | |
| '/forumdisplay.php': ['threadstatus', 'forumdisplay'], | |
| '/showthread.php': ['showthread', 'vb-editor', 'bbcode'], | |
| '/member.php': [], | |
| '/showgroups.php': [], | |
| '/newreply.php': ['vb-editor', 'newreply', 'bbcode'], | |
| '/newthread.php': ['vb-editor'], | |
| '/private.php': ['vb-editor'], | |
| '/search.php': ['search'], | |
| '/subscription.php': ['vb-editor'], | |
| '/profile.php': ['vb-editor'], | |
| '/faq.php': ['vb-editor'] | |
| }; | |
| const imageReplaceMap = new Map(); | |
| imageReplaceMap.set('images/buttons/quote.gif', { | |
| text: 'Reply With Quote' | |
| }); | |
| imageReplaceMap.set('https://forums.alliedmods.net/images/buttons/multiquote_off.gif', { | |
| text: 'Multi-Quote' | |
| }); | |
| imageReplaceMap.set('images/buttons/quickreply.gif', { | |
| text: 'Quick Reply' | |
| }); | |
| imageReplaceMap.set('images/buttons/reply.svg', { | |
| text: 'Post Reply' | |
| }); | |
| imageReplaceMap.set('images/buttons/threadclosed.svg', { | |
| text: 'Locked' | |
| }); | |
| imageReplaceMap.set('images/buttons/edit.gif', { | |
| text: 'Edit' | |
| }); | |
| imageReplaceMap.set('images/buttons/report.svg', { | |
| text: 'Report Post' | |
| }); | |
| imageReplaceMap.set('images/buttons/newthread.gif', { | |
| text: 'New Topic', | |
| classes: ['large'] | |
| }); | |
| imageReplaceMap.set('images/buttons/reply.gif', { | |
| text: 'Post Reply', | |
| classes: ['large'] | |
| }); | |
| imageReplaceMap.set('images/buttons/newthread.svg', { | |
| text: 'New Topic', | |
| }); | |
| imageReplaceMap.set('images/statusicon/user_offline.svg', { | |
| notButton: true, | |
| classes: ['online-status', 'offline'] | |
| }); | |
| imageReplaceMap.set('images/statusicon/user_online.svg', { | |
| notButton: true, | |
| classes: ['online-status', 'online'] | |
| }); | |
| imageReplaceMap.set('images/statusicon/subforum_new.svg', { | |
| notButton: true, | |
| classes: ['subforum-status', 'new'] | |
| }); | |
| imageReplaceMap.set('images/statusicon/subforum_old.svg', { | |
| notButton: true, | |
| classes: ['subforum-status', 'old'] | |
| }); | |
| imageReplaceMap.set('images/smilies/bee.png', { | |
| notButton: true, | |
| classes: ['bee'] | |
| }); | |
| imageReplaceMap.set('images/smilies/twisted.gif', { | |
| notButton: true, | |
| classes: ['twisted'] | |
| }); | |
| imageReplaceMap.set('images/smilies/redface.gif', { | |
| notButton: true, | |
| classes: ['blush'] | |
| }); | |
| imageReplaceMap.set('images/smilies/cry.gif', { | |
| notButton: true, | |
| classes: ['cry'] | |
| }); | |
| imageReplaceMap.set('images/smilies/mad.gif', { | |
| notButton: true, | |
| classes: ['mad'] | |
| }); | |
| imageReplaceMap.set('images/smilies/rolleyes.gif', { | |
| notButton: true, | |
| classes: ['rolleyes'] | |
| }); | |
| imageReplaceMap.set('images/smilies/down.gif', { | |
| notButton: true, | |
| classes: ['down'] | |
| }); | |
| imageReplaceMap.set('images/smilies/pirate.gif', { | |
| notButton: true, | |
| classes: ['pirate'] | |
| }); | |
| imageReplaceMap.set('images/smilies/up.gif', { | |
| notButton: true, | |
| classes: ['up'] | |
| }); | |
| imageReplaceMap.set('images/smilies/smile.gif', { | |
| notButton: true, | |
| classes: ['smile'] | |
| }); | |
| imageReplaceMap.set('images/smilies/tongue.gif', { | |
| notButton: true, | |
| classes: ['tongue'] | |
| }); | |
| imageReplaceMap.set('images/smilies/eek.gif', { | |
| notButton: true, | |
| classes: ['shocked'] | |
| }); | |
| imageReplaceMap.set('images/smilies/surprised.gif', { | |
| notButton: true, | |
| classes: ['surprised'] | |
| }); | |
| imageReplaceMap.set('images/smilies/biggrin.gif', { | |
| notButton: true, | |
| classes: ['grinning'] | |
| }); | |
| imageReplaceMap.set('images/smilies/evil.gif', { | |
| notButton: true, | |
| classes: ['evil'] | |
| }); | |
| imageReplaceMap.set('images/smilies/wink.gif', { | |
| notButton: true, | |
| classes: ['wink'] | |
| }); | |
| imageReplaceMap.set('images/smilies/question.gif', { | |
| notButton: true, | |
| classes: ['question'] | |
| }); | |
| imageReplaceMap.set('images/smilies/arrow.gif', { | |
| notButton: true, | |
| classes: ['arrow'] | |
| }); | |
| imageReplaceMap.set('images/smilies/exclaim.gif', { | |
| notButton: true, | |
| classes: ['exclamation'] | |
| }); | |
| imageReplaceMap.set('images/smilies/lol.gif', { | |
| notButton: true, | |
| classes: ['lol'] | |
| }); | |
| imageReplaceMap.set('images/smilies/neutral.gif', { | |
| notButton: true, | |
| classes: ['neutral'] | |
| }); | |
| imageReplaceMap.set('images/smilies/idea.gif', { | |
| notButton: true, | |
| classes: ['idea'] | |
| }); | |
| imageReplaceMap.set('images/smilies/frown.gif', { | |
| notButton: true, | |
| classes: ['sad'] | |
| }); | |
| imageReplaceMap.set('images/smilies/confused.gif', { | |
| notButton: true, | |
| classes: ['confused'] | |
| }); | |
| imageReplaceMap.set('images/smilies/stupid.gif', { | |
| notButton: true, | |
| classes: ['stupid'] | |
| }); | |
| imageReplaceMap.set('images/smilies/cool.gif', { | |
| notButton: true, | |
| classes: ['cool'] | |
| }); | |
| imageReplaceMap.set('images/smilies/BACON.gif', { | |
| notButton: true, | |
| classes: ['bacon'] | |
| }); | |
| imageReplaceMap.set('images/attach/amxx.gif', { | |
| notButton: true, | |
| classes: ['plugin'] | |
| }); | |
| imageReplaceMap.set('images/attach/sma.gif', { | |
| notButton: true, | |
| classes: ['plugin'] | |
| }); | |
| imageReplaceMap.set('images/attach/cfg.gif', { | |
| notButton: true, | |
| classes: ['cfg'] | |
| }); | |
| imageReplaceMap.set('images/attach/zip.gif', { | |
| notButton: true, | |
| classes: ['zip'] | |
| }); | |
| imageReplaceMap.set('images/attach/inc.gif', { | |
| notButton: true, | |
| classes: ['inc'] | |
| }); | |
| imageReplaceMap.set('images/misc/im_icq.gif', { | |
| text: 'ICQ', | |
| classes: ['icq'] | |
| }); | |
| imageReplaceMap.set('images/misc/im_skype.gif', { | |
| text: 'Skype', | |
| classes: ['skype'] | |
| }); | |
| imageReplaceMap.set('images/misc/im_yahoo.gif', { | |
| text: 'YIM', | |
| classes: ['yim'] | |
| }); | |
| imageReplaceMap.set('images/misc/im_msn.gif', { | |
| text: 'msnm', | |
| classes: ['msnm'] | |
| }); | |
| imageReplaceMap.set('images/misc/im_aim.gif', { | |
| text: 'AIM', | |
| classes: ['aim'] | |
| }); | |
| // Transform path if needed | |
| let pathName = location.pathname; | |
| if(pathName === '/') { | |
| pathName = '/index.php'; | |
| } | |
| function mergeStyles(pagePath) { | |
| let finalStyle = styles['$common']; | |
| const stylesList = pageStyles[pagePath]; | |
| if(stylesList === undefined || !Array.isArray(stylesList) || stylesList.length === 0) { | |
| return finalStyle; | |
| } | |
| for(const style of stylesList) { | |
| if(styles[style] === undefined) { | |
| continue; | |
| } | |
| finalStyle += '\n' + styles[style]; | |
| } | |
| return finalStyle; | |
| } | |
| function applyStyles() { | |
| if(applyStyles.alreadyApplied === undefined) { | |
| const styleElement = document.createElement('style'); | |
| styleElement.appendChild(document.createTextNode(mergeStyles(pathName))); | |
| document.head.appendChild(styleElement); | |
| } | |
| applyStyles.alreadyApplied = true; | |
| } | |
| function doThreadIcons() { | |
| function addIcon(containerElement, status, title) { | |
| const statusElement = document.createElement('div'); | |
| statusElement.classList.add('thread-status', status); | |
| statusElement.setAttribute('title', title); | |
| containerElement.appendChild(statusElement); | |
| return statusElement; | |
| } | |
| let statusImgs = document.querySelectorAll('img[id*=_statusicon_]'); | |
| for(const imgElement of statusImgs) { | |
| const parentElement = imgElement.parentElement; | |
| const containerElement = document.createElement('div'); | |
| let hasStatus = false; | |
| if(imgElement.src.includes('new')) { // New posts | |
| addIcon(containerElement, 'new', 'New posts'); | |
| } else if(imgElement.src.includes('lock')) { // Closed | |
| addIcon(containerElement, 'lock', 'Closed'); | |
| } else { // No new posts | |
| addIcon(containerElement, 'old', 'No new posts'); | |
| } | |
| if(imgElement.src.includes('hot')) { // Hot | |
| containerElement.classList.add('thread-hot'); | |
| } | |
| if(imgElement.src.includes('dot')) { // User has posts | |
| addIcon(containerElement.firstElementChild, 'has-posts', imgElement.title); | |
| } | |
| imgElement.parentElement.replaceChild(containerElement, imgElement); | |
| } | |
| // Any remaining threads are deleted ones. Just hide the old image. | |
| statusImgs = document.querySelectorAll('img[src*=statusicon]:not([title])'); | |
| for(const imgElement of statusImgs) { | |
| imgElement.remove(); | |
| } | |
| } | |
| function onDocumentLoaded() { | |
| applyStyles(); | |
| for(const tuple of imageReplaceMap) { | |
| for(const element of document.querySelectorAll(`img[src="${tuple[0]}"]`)) { | |
| const replaceData = tuple[1]; | |
| let newElement; | |
| if(replaceData.notButton === true) { | |
| newElement = document.createElement('div'); | |
| } else { | |
| newElement = document.createElement('input'); | |
| newElement.setAttribute('type', 'button'); | |
| newElement.setAttribute('value', replaceData.text); | |
| newElement.setAttribute('title', element.getAttribute('alt')); | |
| newElement.classList.add('button'); | |
| } | |
| if(replaceData.classes !== undefined) { | |
| for(const className of replaceData.classes) { | |
| newElement.classList.add(className); | |
| } | |
| } | |
| element.parentNode.replaceChild(newElement, element); | |
| } | |
| } | |
| if(pathName === '/index.php' || pathName === '/forumdisplay.php' || pathName === '/search.php') { | |
| doThreadIcons(); | |
| } | |
| } | |
| /** | |
| * The code below makes sure that onDocumentLoaded() will be called | |
| * as soon as possible regardless of @run-at value, for the best experience. | |
| */ | |
| if(document.head !== null) { | |
| applyStyles(); | |
| } | |
| if(document.readyState === 'complete') { | |
| onDocumentLoaded(); | |
| } else { | |
| let onReadyStateChange; | |
| const onDOMContentLoaded = () => { | |
| onDocumentLoaded(); | |
| document.removeEventListener('DOMContentLoaded', onDOMContentLoaded); | |
| document.removeEventListener('readystatechange', onReadyStateChange); | |
| }; | |
| onReadyStateChange = () => { | |
| if(document.readyState === 'complete') { | |
| onDocumentLoaded(); | |
| document.removeEventListener('DOMContentLoaded', onDOMContentLoaded); | |
| document.removeEventListener('readystatechange', onReadyStateChange); | |
| } | |
| }; | |
| document.addEventListener('DOMContentLoaded', onDOMContentLoaded); | |
| document.addEventListener('readystatechange', onReadyStateChange); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment