Last active
July 8, 2016 19:33
-
-
Save electroflame/3bcac51b86619c9068d2109cbfea0be9 to your computer and use it in GitHub Desktop.
A simple Stylish adjustment for the new Unity Forums (as of July 2016).
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
/* | |
electroflame's Unity Forums CSS Fix | |
Version 1.05 | July 7th, 2016 | |
Notes: | |
Pop this CSS into a Stylish file (inside of any brackets, if you're doing a namespaced or domain-only file). | |
Requires the Stylish browser extension. | |
Additions/Insight: | |
dipsylala/MarcusWatson | |
vOidSenses/kebrus | |
*/ | |
/*Try to correct the font, if body-content font changes won't be applied.*/ | |
body { | |
font-family: Helvetica,Arial,sans-serif !important; | |
font: Helvetica,Arial,sans-serif !important; | |
} | |
/*Make the user avatars for posts larger*/ | |
.lia-quilt-forum-message .UserAvatar > img { | |
border-radius: 15%; | |
height: 100px; | |
width: 100px; | |
} | |
/*Add a slight box-shadow to the outer edges of the message scroll list.*/ | |
.linear-message-list.message-list { | |
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2); | |
} | |
.lia-panel-message, .lia-panel-message-content { | |
border: none !important; | |
} | |
/*Give even posts a slightly darker background color*/ | |
.lia-linear-display-message-view:nth-child(even) .lia-quilt-forum-message { | |
background-color: #FAFAFA !important; | |
} | |
/*Give accepted solutions a green background, to make it more obvious that they're the accepted answer*/ | |
.lia-linear-display-message-view .accepted-solution .lia-quilt-forum-message { | |
background-color: #e1fee1 !important; | |
} | |
/*Add a separator above signatures*/ | |
.UserSignature { | |
margin-top: 5px; | |
border-top: 1px #E1E1E1 solid !important; | |
} | |
/*Fix up the post fonts and coloring. We'll also remove the pretty stupid hyphenated word-wrap.*/ | |
.lia-message-body-content { | |
color: #333 !important; | |
font-family: Helvetica,Arial,sans-serif !important; | |
font: Helvetica,Arial,sans-serif !important; | |
hyphens: none !important; | |
-moz-hyphens: none !important; | |
} | |
/*Add a separator to the bottom of posts.*/ | |
.lia-message-body { | |
margin-bottom: 5px; | |
/*Set a min-height for posts, so the border is pushed to the bottom. | |
Posts seem to have some kind of min-height enforced somewhere already, | |
but the content is not affected by this (without this rule).*/ | |
min-height: 200px; | |
} | |
/*Fix the pre code text being giant*/ | |
.lia-message-body-content pre { | |
font-size: 14px !important; | |
} | |
/*Let's remove a bunch of the whitespace on posts*/ | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-header { | |
padding: 15px !important; | |
} | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-main .lia-quilt-column-main-right { | |
margin-bottom: 10px !important; | |
width: 83.3333% !important; | |
} | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-main .lia-quilt-column-main-left { | |
margin-right: -30px !important; | |
border-right: none !important; | |
} | |
.lia-component-author-rank-name { | |
white-space: normal !important; | |
} | |
/*Let's move the reply/quickreply/likes footer up into the main post area*/ | |
.lia-quilt-row.lia-quilt-row-footer .lia-quilt-column-alley.lia-quilt-column-alley-right { | |
margin-top: -50px !important; | |
padding: 5px; | |
/*Let's go ahead and style these controls to look like they actually belong here*/ | |
background-color: #EEE; | |
border-radius: 10px 0 0 0; | |
border-left: 1px #DDD solid; | |
border-top: 1px #DDD solid; | |
} | |
/*The Like button gets kind of lost in the new post controls design, so let's recolor it.*/ | |
.lia-button-image-kudos.lia-button-image-kudos-enabled .kudos-link { | |
background-color: #FFF; | |
} | |
/*Add a bit of padding to the bottom of the post content, so our reply/etc. controls don't overlap*/ | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-main { | |
padding-bottom: 45px !important; | |
} | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-footer { | |
padding: 0px !important; | |
} | |
/*Make the post controls take up the full width of the post, to try and prevent stacking*/ | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-footer > .lia-quilt-column-right { | |
width: 100% !important; | |
} | |
/*Bold the post control button text, to make them somewhat readable (includes the icons)*/ | |
.lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button, | |
.lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button:before { | |
font-weight: bold !important; | |
} | |
/*Make the post control buttons a bit smaller. | |
(Note: lia-button-wrapper lets us get at just the control buttons, and skip adding padding to the likes area)*/ | |
.lia-quilt-row.lia-quilt-row-footer .lia-button-wrapper .lia-button { | |
padding: 10px 20px !important; | |
} | |
/*Try to consolidate the bottom of the page pagination controls, and the All Topics/Next Topic controls*/ | |
.lia-menu-bar.lia-menu-bar-bottom.bottom-block { | |
margin-top: -45px !important;; | |
} | |
.lia-paging-full-wrapper.lia-paging-pager.lia-paging-full-left-position { | |
padding-top: 5px !important; | |
} | |
/*Add a small border to the header, to separate posts*/ | |
.lia-quilt-layout-two-column-message > .lia-quilt-row-header { | |
border-top: 1px #BBB solid !important; | |
} | |
/*Restyle the blockquotes so they're easily separated from a user's post, making them easier to read*/ | |
.lia-message-body-content blockquote, | |
.lia-note-body blockquote, | |
.lia-message-editor blockquote { | |
background-color: #f1f1f1 !important; | |
border-left: 5px #BBB solid !important; | |
border-bottom: 1px #BBB solid !important; | |
} | |
/*Hide the useless subject line above user posts*/ | |
.lia-panel-message-content .lia-message-subject { | |
display: none !important; | |
} | |
/*Keep the subject line on the first post only*/ | |
.first-message .lia-panel-message-content .lia-message-subject { | |
display: inline-block !important; | |
} | |
/*Underline the current page in the pagination controls.*/ | |
.lia-paging-full-pages li > .lia-link-disabled { | |
text-decoration: underline; | |
} | |
/*Don't underline the ellipses, but go ahead and bold them instead.*/ | |
.lia-paging-full-pages .lia-paging-page-ellipsis .lia-link-disabled { | |
text-decoration: none; | |
font-weight: bold; | |
} | |
/*Add a subtle box-shadow to embedded images, so they pop out a bit more*/ | |
.lia-message-image-wrapper > img { | |
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2); | |
} | |
/* Fixes upload to show 'Done' */ | |
.lia-media-uploader-dialog-body { | |
height: 80%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've added the 100% width rule -- great addition, @vOidSenses. I also made the buttons slightly smaller by default, to try and keep the controls from stacking. If stacking is still an issue, you might try selecting the button's text in your script and removing that for very small screens (so it's just the icons). Readability would take a hit, but they wouldn't stack at that point.
I'm still keeping the subject line hidden, but I wasn't aware of them also using that to display selected answers. This new version highlights accepted answer posts with a light green background, which is a fair trade-off, I think.
To be honest, this style wasn't designed with mobile in mind (to be brutally honest, the forum software wasn't, so there's only so much that can be done). This really needs some media selectors to change the size of some things on smaller screens -- if there's enough demand (or someone else want to take it on) we can get that done as well.