Last active
September 26, 2018 18:36
-
-
Save Xkeeper0/cbd9a41ac7220980bbd1f29a87b74f18 to your computer and use it in GitHub Desktop.
some user css to make default-ish mastodon ui less terrible
This file contains hidden or 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 will probably do things you don't want, sorry | |
| Look for some other Pro Tips in the comments for how to make it better for you | |
| */ | |
| * { | |
| /* Fuck animations */ | |
| animation: none ; | |
| /* Fuck LARGE CAPITAL LETTERS */ | |
| text-transform: none ; | |
| /* Fuck more animations */ | |
| transition-property: none ; | |
| /* | |
| Unfortunately things like "transform" have to be allowed because | |
| things like the image switcher require it :( | |
| */ | |
| } | |
| .account__avatar { | |
| /* Give all avatars a dark background so clever people who | |
| upload a blank PNG don't look like they have a missing avatar */ | |
| background-color: rgba(0, 0, 0, .5); | |
| } | |
| .status__wrapper--filtered { | |
| /* uncomment this to hide the "Filtered" tombstones | |
| You might ask yourself, "why is this required when they're lit. useless" | |
| answer: gartgremel | |
| */ | |
| /*display: none;*/ | |
| } | |
| /* | |
| you can delete all of this until the next note if you want to remove tombstones | |
| this is all for a goofy joke | |
| */ | |
| .status__wrapper--filtered span { | |
| display: block; | |
| margin-top: -1.5em; | |
| text-indent: -9999px; | |
| } | |
| .status__wrapper--filtered span::after { | |
| content: 'peperony and chease'; | |
| display: block; | |
| text-indent: 0px; | |
| } | |
| /* | |
| stop removing here though, the rest is the ui fix shit | |
| */ | |
| /* Make the buttons look like, you know, BUTTONS */ | |
| .compose-form__buttons { | |
| display: block; | |
| } | |
| /* Wow! Actual depth! It's like I'm back in windows XP! */ | |
| .compose-form__buttons button { | |
| width: 100%; | |
| text-align: left; | |
| padding: 0 .2em 0 .5em; | |
| background: #ccc; | |
| color: black; | |
| font-size: 100%; | |
| margin-bottom: 0.3em; | |
| border-radius: 5px; | |
| border: 1px solid rgba(0,0,0,.3); | |
| box-shadow: -5px -5px 20px -12px inset black, 5px 5px 20px -5px inset white; | |
| } | |
| .compose-form__buttons button:after { | |
| padding: 0 0 0 .5em; | |
| } | |
| /* Make buttons like the 'Hide media behind warning' ones that are toggles look toggled when active */ | |
| .compose-form__buttons button.active { | |
| background: #888; | |
| box-shadow: -5px -5px 15px -7px inset white, 5px 5px 15px -5px inset black; | |
| } | |
| /* Make shit that has been hovered over / has focus stand out so you can tell wheretf your cursor is */ | |
| .compose-form__buttons button:focus, .compose-form__buttons button:hover { | |
| background: #aaa; | |
| box-shadow: -5px -5px 15px -7px inset black, 5px 5px 15px 0px inset white; | |
| } | |
| /* Give toggled buttons a slightly different 'hover/focus' state so they're still visibly different */ | |
| .compose-form__buttons button.active:focus, .compose-form__buttons button.active:hover { | |
| background: #999; | |
| box-shadow: -5px -5px 15px -9px inset white, 5px 5px 15px -7px inset black; | |
| } | |
| /* You can make this say whatever, it's the upload button */ | |
| .compose-form__upload-button-icon:after { | |
| content: 'Attach images or media'; | |
| } | |
| /* Similarly, this is the 'hide media' eyeball button | |
| Note that you don't need to press this if you fill out the subject/cw field, | |
| it will automatically be turned on when posted by the software itself */ | |
| .compose-form__sensitive-button__icon:after { | |
| content: 'Hide media behind warning'; | |
| } | |
| /* Post privacy is different in that the only way to tell what it is is the actual class of the icon inside of it, so we have to do a whole bunch of awful bullshit to make it work */ | |
| .privacy-dropdown__value-icon, .privacy-dropdown__value-icon button { | |
| width: 100% ; | |
| } | |
| .privacy-dropdown__value-icon i { | |
| width: 100%; | |
| text-align: left; | |
| padding-left: 0.2em; | |
| } | |
| /* Replace with your favorite font! Because we're hijacking the italic^Wicon element we can't rely on "inherit" :( | |
| */ | |
| .privacy-dropdown__value-icon i:after { | |
| font-family: Comic Sans MS; | |
| padding: 0 0 0 0.85em; | |
| width: 100%; | |
| } | |
| /* Public (visible to everyone + broadcast to local/federated timelines) */ | |
| .privacy-dropdown__value-icon i.fa-globe:after { | |
| content: 'Public'; | |
| } | |
| /* Private (visible only to followers) */ | |
| .privacy-dropdown__value-icon i.fa-lock:after { | |
| content: 'Private - Followers only'; | |
| } | |
| /* Direct message (sent only to accounts mentioned in the message) | |
| It is slightly blue here to make it stand out more when chosen | |
| */ | |
| .privacy-dropdown__value-icon i.fa-envelope:after { | |
| content: 'Direct Message'; | |
| color: #22a; | |
| } | |
| /* Unlisted (visible, but not posted to local/federated timelines) | |
| The opacity here is to make it faded out, so that you can tell at-a-glance | |
| if your privacy level is not the default, either from your own action | |
| or from replying to someone else's (more restricted) status | |
| Move the opacity: line to whichever level you use as the default | |
| */ | |
| .privacy-dropdown__value-icon i.fa-unlock-alt:after { | |
| content: 'Unlisted'; | |
| opacity: 0.5; | |
| } | |
| /* Make the cw input field always visible */ | |
| .spoiler-input { | |
| display: block; | |
| opacity: 1; | |
| height: auto; | |
| margin-bottom: 1em; | |
| } | |
| /* Give it a good title and explanation, because... */ | |
| .spoiler-input:before { | |
| display: block; | |
| margin-bottom: 0.3em; | |
| content: 'Subject / Content Warning:'; | |
| } | |
| /* ...we're hiding the "Write your warning here" message, since it's not really useful now | |
| I wanted to replace it with something useful like "pol / health / food, etc." to make it an | |
| actual placeholder, but that's not possible with just CSS */ | |
| .spoiler-input input::placeholder { | |
| opacity: 0; | |
| } | |
| /* Delete the now useless CW button. Filling in a subject/cw will automatically turn it on anyway */ | |
| button[aria-controls="cw-spoiler-input"] { | |
| display: none; | |
| } | |
| /* Always show the image options, not just when hovering, and make the background solid but still transparent instead of a gradient */ | |
| .compose-form__upload__actions, .compose-form__upload-description { | |
| opacity: 1; | |
| background: rgba(0,0,0,.6); | |
| } | |
| /* Give the text a nice outline so it's more visible against bright images */ | |
| .compose-form__upload__actions *, .compose-form__upload-description * { | |
| opacity: 1; | |
| text-shadow: -1px -1px 0 #000, | |
| 1px -1px 0 #000, | |
| -1px 1px 0 #000, | |
| 1px 1px 0 #000; | |
| } | |
| /* Make the options visibly active when hovered or focused so that you can tell where your cursor is (when tabbing around); adds a lighter background and makes the text white. on icosahedron.website they're normally green-ish, you may have to adjust this on your instance */ | |
| .compose-form__upload__actions *:focus, .compose-form__upload__actions *:hover, .compose-form__upload-description *:active, .compose-form__upload-description *:focus,.compose-form__upload-description input:hover, .compose-form__upload-description input:focus { | |
| opacity: 1; | |
| text-shadow: -1px -1px 0 #000, | |
| 1px -1px 0 #000, | |
| -1px 1px 0 #000, | |
| 1px 1px 0 #000; | |
| background: rgba(255, 255, 255, .3); | |
| color: white; | |
| } | |
| /* Give the description field some breathing room and make it stand out more so it's more visible. Kind of ironic that you have to do this to a field that's supposed to help people with bad vision but welcome to modern ui design */ | |
| .compose-form__upload-description input { | |
| background: black; | |
| margin: -0.2em; | |
| border: 1px solid #888; | |
| padding: 0.2em; | |
| } | |
| /* Make the "Write a description here" placeholder white on dim red to say "Hey, uh, you should really put something here" */ | |
| .compose-form__upload-description input::placeholder { | |
| color: white; | |
| background: rgba(255, 0, 0, .5); | |
| } | |
| /* with love, xkeeper / @xkeepah / @[email protected] */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment