Authoroperatorrazz
LicenseNo License
Categorymastodon.gamedev.place
Created
Updated
Size3.3 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Get rid of that white compose box on Mastodon and use this dark one!
MINOR EDIT REQUIRED - To use on your Mastodon server instance, on line 11, replace "YourMastodonInstance" with the instance that your Mastodon server is on. For example, if your Mastodon profile is FrostedFlakes@mastodon.online, replace "YourMastodonInstance" with "mastodon.online".
Still in beta, styles aren't 100% complete yet.
Beta 0.1 - Initial Release
/* ==UserStyle==
@name Mastodon Dark Compose Box
@namespace github.com/openstyles/stylus
@version 0.1
@description Dark Compose Box for Mastodon
@author OperatorRazz
==/UserStyle== */
@-moz-document domain("mastodon.gamedev.place"),
domain("mastodon.social"),
domain("mastodon.online"),
domain("YourMastodonInstance"){
/* Compose Toot Styling */
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input,
.compose-form .compose-form__modifiers,
.compose-form .compose-form__buttons-wrapper,
#upload-modal__description {
color: #fff !important;
background-color: #1F232B;
}
/* Privacy Option Styling */
.privacy-dropdown__dropdown {
color: #fff;
background-color: #1F232B;
}
.privacy-dropdown__dropdown strong {
color: #fff
}
.emoji-mart-search,
.emoji-mart-scroll {
color: #fff;
background-color: #1F232B;
}
/* Language Option Styling */
.language-dropdown__dropdown__results__item:active,
.language-dropdown__dropdown__results__item:focus,
.language-dropdown__dropdown__results__item:hover {
background-color: #323844;
}
.language-dropdown__dropdown__results__item {
color: #fff;
}
/* Emoji Picker Styling */
.emoji-mart-bar:first-child {
background-color: #1F232B;
}
.emoji-mart-category-label span {
background-color: #323844;
}
.emoji-mart-category .emoji-mart-emoji:hover::before {
background-color: #323844;
}
.emoji-picker-dropdown__menu {
background-color: #1a1e27;
box-shadow: 2px 4px 15px rgba(0, 0, 0, .4);
}
.emoji-picker-dropdown__modifiers__menu {
background-color: #323844;
}
/* Poll Styling */
.compose-form__poll-wrapper,
.compose-form__poll-wrapper .poll__footer {
border-top: 1px solid #323844;
}
.poll__option input[type="text"] {
color: #fff;
background-color: #323844;
border: 1px solid #4a556b;
}
.compose-form__poll-wrapper select {
color: #fff;
background-color: #323844;
border: 1px solid #4a556b;
}
/* More Options Styling */
.dropdown-menu,
.dropdown-menu__item a,
.dropdown-menu__item button {
color: #fff;
background-color: #4a556b;
}
.dropdown-menu__separator {
border-bottom: 1px solid #323844;
}
/* Popup Modal Styling */
.actions-modal,
.block-modal,
.boost-modal,
.compare-history-modal,
.confirmation-modal,
.mute-modal,
.report-modal,
.report-modal__comment .setting-text-label {
color: #fff;
background-color: #1f232B;
}
.setting-text__wrapper {
border: 1px solid #323844;
}
.report-modal__container {
border-top: 1px solid #323844;
}
.report-modal__comment {
border-right: 1px solid #323844;
}
.block-modal__action-bar,
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
background-color: #242831
}
}