910shim.user.js

// ==UserScript==
// @name 910CMX Interface Restoration Shim
// @namespace https://harjit-egs.tumblr.com/
// @include *community.910cmx.com/*
// @version 9.7
// @grant GM_addStyle
// ==/UserScript==

/*
 * The following is a stylesheet, minimally wrapped to allow Greasemonkey use.
 * It does nothing more and nothing less than installing CSS styling.
 * To use as a CSS stylesheet, remove GM_addStyle(" from the beginnings of
 * lines and ") and ') from the ends of lines, then remove the Greasemonkey
 * metadata block above.
 */

/*
 * Note that changes on the 910 side may break this stylesheet at any time.
 * If it breaks, disable it.
 */

/*
 * The following uses !important a lot.  This is because it is operates as a
 * custom override, and custom override is basically (all) what !important is good for.
 */

/* White text editor fix. */
GM_addStyle("ul.ipsList_reset li p { color: inherit !important; }")

/* Purple fix. */
GM_addStyle("html body .ipsAreaBackground_light div { background-color: inherit; }")
/* ...but don't damage the "Quote This" tooltips in the process. */
GM_addStyle(".ipsTooltip, html body .ipsAreaBackground_light div.ipsTooltip { background: #2a2a2a !important; }")

/* Visibility fix. */
GM_addStyle(".ipsPager_type, .ipsType_richText { color: black !important; }")
GM_addStyle(".ipsPager>div>a { background: #ebebeb; border-radius: 4px; }")

/* Why iframing a pulldown?  Why????  Visibility fix anyhow. */
GM_addStyle("html.cke_panel_container .cke_panel_listItem { color: white; }")
GM_addStyle("html.cke_panel_container .cke_panel_listItem a:focus, html.cke_panel_container .cke_panel_listItem a:hover, html.cke_panel_container .cke_panel_listItem a:active { color: black !important; }")

/* Give a consistent page BG. */
GM_addStyle("body, #ipsLayout_header header { background: #1d3652; }")
GM_addStyle(".ipsBreadcrumb, .ipsType_blendLinks, .ipsType_blendLinks .ipsType_light { background: transparent !important; }")
/* ...and sort out the camouflaged footer. */
GM_addStyle("#ipsLayout_footer #elFooterLinks a, #ipsLayout_footer #elCopyright, #ipsLayout_footer #elCopyright a { color: white; }")

/* More camouflage fixes, effective on profile pages. */
GM_addStyle(".cProfileRepScore { color: black !important; }")
GM_addStyle(".ipsPip { color: black; }")

/* More camouflage fixes, effective on blog pages. */
GM_addStyle("article header { background: inherit; }")
GM_addStyle("article header p.ipsType_blendLinks { color: inherit; }")
GM_addStyle("div.cBlogInfo { background: #f5f5f5; }")
GM_addStyle("div.cBlogInfo .ipsType_pageTitle { color: black; }")

/* Adjustments for settings page. */
GM_addStyle("#elSettingsTabs { background: #f5f5f5; }")
GM_addStyle("#elSettingsTabs .ipsComposeArea_editor div[data-role='mainEditorArea'] { background: white; }")
GM_addStyle("#ipsTabs_elSettingsTabs_setting_overview_panel ul.ipsList_reset li { border: none; }")

/* Sort out filling a white square out of the rounded corners. */
GM_addStyle(".ipsBox { border-radius: 4px; }")

/* Sundry tweaks. */
GM_addStyle("#ipsLayout_header header { padding-bottom: /*220px*/ 140px; }")
GM_addStyle(".ipsLayout_container { padding-left: 0; padding-right: 0; }")
GM_addStyle("#ipsLayout_mainArea > .ipsHr { margin-top: 0; margin-bottom: 0; }")
GM_addStyle("#ipsLayout_mainArea > .ipsList_inline { margin-top: 1em; margin-bottom: 1em; }")
GM_addStyle(".ipsApp .ipsButton_link.ipsButton_medium { color: #1d3652; margin: 0px; height: 34px; line-height: 34px; box-sizing: content-box; padding-left: 0.5ex; padding-right: 0.5ex; }")
GM_addStyle("#elUserNav { background: linear-gradient( to bottom, #333, black ); width: 100%; display: block !important; position: static !important; height: 38px !important; text-align: right; border-radius: 4px; padding: 0 15px; }")
GM_addStyle("#elLogo { position: absolute; top: 45px; background-image: url(http://i.imgur.com/FaNiVin.png); width: 650px; height: 99px; height: 99px; margin: 0; padding: 0; }")
GM_addStyle("#elLogo img { display: none; }")
GM_addStyle("#ipsLayout_header, #ipsLayout_body, #ipsLayout_footer { padding: 0; margin: 40px auto; width: 84%; }")
GM_addStyle(".ipsNavBar_primary>ul>li>a { padding-left: 15px !important; padding-right: 15px !important; }")
GM_addStyle(".ipsPageHeader_info { color: white; }")
GM_addStyle("#elProfileTabContent .ipsAreaBackground_light { background: inherit; }")

/*
 *
 *
 * Adjustments for tablets, phablets and mobiles below (width<980px).
 *
 * Some differences to bear in mind (in the site CSS) include 
 * the removal of the tab bar, and the addition of another bar
 * with up-one-level, "unread", "search" and "menu" buttons 
 * above the user bar.  The user bar contents would normally be 
 * hidden but, by a happy accident, the above styles cause that 
 * bar to appear in an aesthetically appropriate format on a
 * tablet or phablet size display.  Several actions are available 
 * through the menu button, including logging out, marking
 * forum read, inbox and notifications, and the links which would 
 * otherwise be tabs.
 */

/* At 979px, tab bar disappears per site CSS, therefore remove the gap. */
GM_addStyle("@media screen and (max-width: 979px) { #ipsLayout_header header { padding-bottom: 50px; } }")

/* At 750px, the header image becomes too wide, so change it to a centered logo without text. */
GM_addStyle("@media screen and (max-width: 750px) { #elLogo { display: block; width: 100%; text-align: center; background: transparent; } }")
GM_addStyle("@media screen and (max-width: 750px) { #elLogo img { display: block; width: 0; height: 0; font-size: 0px; margin: auto; } }")
GM_addStyle("@media screen and (max-width: 750px) { #elLogo img:before { display: block; content: ''; background-image: url(http://i.imgur.com/FaNiVin.png); width: 135px; height: 99px; margin: 0; margin-left: -85px; padding: 0; } }")
GM_addStyle("@media screen and (max-width: 750px) { #ipsLayout_header, #ipsLayout_body, #ipsLayout_footer { margin: 0 !important; width: 100% !important; } }")
GM_addStyle("@media screen and (max-width: 750px) { #ipsLayout_header header { padding-bottom: 100px; } }")
GM_addStyle(".ipsSideMenu .ipsSideMenu_mainTitle a { color: white; }")

/*
 * Notifications and inbox are also provided in mobile-bar menu,
 * but no issues arise from also leaving them in the user-bar for
 * tablets.  Smaller mobile displays can cause the user-bar
 * content to overflow, so remove them then.
 */
GM_addStyle("@media screen and (max-width: 410px) { #elUserNav li.cNotifications.cUserNav_icon, #elUserNav li.cInbox.cUserNav_icon, #elUserNav li.elUserNav_sep { display: none; } }")

/* 
 * Override a bonkers !important rule in the mobile stylesheet.
 * In this case, the !important and the elevated specificity
 * (naming an ID) are both DEFINITELY required.  No @rule
 * needed as has no effect on desktop stylesheet.
 */
GM_addStyle("#ipsLayout_mainArea article.ipsType_break.ipsContained { display: block !important; }")