253 lines
7.5 KiB
CSS
253 lines
7.5 KiB
CSS
/* ==UserStyle==
|
|
@name Tootmorphism
|
|
@namespace put ur mastodon place here
|
|
@version i forgor
|
|
@author lavender software, akira division
|
|
==/UserStyle== */
|
|
/*
|
|
* cabby cabbage
|
|
*/
|
|
|
|
/* this is very rude of me i should've commented this code
|
|
umm. sorry!!!! it's not even organized,,,
|
|
i guess because i never expected anyone Else to look at it*/
|
|
|
|
/*
|
|
.app-body.layout-single-column{
|
|
background: #27222f!important;
|
|
}
|
|
*/
|
|
|
|
/*hides filtered status*/
|
|
.status__wrapper--filtered {
|
|
display: none!important;
|
|
}
|
|
/*toot bg, including notifications, expanded statuses, and the TL*/
|
|
.notification, .status__wrapper, .detailed-status, .detailed-status__action-bar {
|
|
box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important;
|
|
border-radius: 10px!important;
|
|
margin: 5px!important;
|
|
background: #383144!important;
|
|
transition: all 0.2s!important;
|
|
}
|
|
/*toot hover*/
|
|
.notification:hover, .status__wrapper:hover, .detailed-status:hover, .detailed-status__action-bar:hover {
|
|
box-shadow: inset 0 -50px 100px #17131d, 0px 0px 10px #000, inset 0px -3px 0px #000f, inset 0px 2px 0px #625776!important;
|
|
border-radius: 10px!important;
|
|
margin: 5px!important;
|
|
background: #4b435a!important;
|
|
}
|
|
/*removes that 1px line between statuses*/
|
|
.status{
|
|
border-bottom: none!important;
|
|
}
|
|
/* do not know what this does
|
|
.column > .scrollable {
|
|
background: #1e1a24!important;
|
|
}
|
|
*/
|
|
|
|
/* drag 'n drop upload screeny. i think. */
|
|
.modal-root__overlay{
|
|
backdrop-filter: blur(5px)!important;
|
|
transition: all .5s!important;
|
|
}
|
|
|
|
/*big shadow from the main column for aesthetic purposes*/
|
|
.columns-area__panels__main{
|
|
box-shadow: 0px 0px 150px #0e0c11!important;
|
|
padding: 0px!important;
|
|
margin-left: 30px!important;
|
|
margin-right: 30px!important;
|
|
}
|
|
/*when someone posts there's this "$name just posted" thingy. but with this uuserstyle that message is too close to the actual toot. this fixes that*/
|
|
.columns-area--mobile .notification__message {
|
|
padding-bottom: 10px!important;
|
|
}
|
|
|
|
/*toot button ('block')*/
|
|
.button.button--block {
|
|
background: linear-gradient(#a288bd, #5f526c 90%, #a288bd)!important;
|
|
box-shadow: 0px 0px 5px #000f, 0px 0px 5px #000f, inset 0px 3px 3px #ddd5e6aa, inset 0px -3px 3px #807591!important;
|
|
text-shadow: 2px 2px 10px #4e415b;
|
|
margin-left: 0px!important;
|
|
margin-bottom: 13px!important;
|
|
transition: all 0.2s!important;
|
|
}
|
|
/*toot button - hover*/
|
|
.button.button--block:hover {
|
|
box-shadow: 0px 0px 5px #000f, 0px 0px 5px #000f, inset 0px 50px 50px #fff5, inset 0px 3px 3px #ddd5e6aa, inset 0px -3px 3px #807591!important;
|
|
text-shadow: 2px 2px 10px #4e415b, 2px 2px 10px #4e415b, 2px 2px 20px #4e415b;
|
|
transition: all 0.2s!important;
|
|
}
|
|
/*toot button - clicky*/
|
|
.button.button--block:active {
|
|
box-shadow: inset 0 0 50px #000, 0 0 5px #000!important;
|
|
transition: all 0.2s!important;
|
|
}
|
|
|
|
.autosuggest-textarea__textarea {
|
|
background-color: #fff0!important;
|
|
}
|
|
|
|
.compose-form__uploads-wrapper:empty {
|
|
display: none !important;
|
|
background: linear-gradient(0deg, #a99cb7, #ddd5e6)!important;
|
|
}
|
|
|
|
.compose-form .compose-form__buttons-wrapper {
|
|
background: linear-gradient(0deg, #ddd5e6, #f9f9f9) !important;
|
|
box-shadow: 0px 0px 5px #000;
|
|
}
|
|
.reply-indicator{
|
|
background: linear-gradient(0deg, #a99cb7, #ddd5e6, #f9f9f9) !important;
|
|
box-shadow: inset 0px -3px 10px #807591!important;
|
|
}
|
|
|
|
/*write box*/
|
|
.compose-form__autosuggest-wrapper{
|
|
box-shadow: inset 0px 0px 40px #ddd5e6!important;
|
|
padding-bottom: 10px;
|
|
transition: all .2s;
|
|
}
|
|
.compose-form__autosuggest-wrapper:focus-within{
|
|
box-shadow: inset 0px 0px 20px 0px#ddd5e6!important;
|
|
padding-bottom: 10px;
|
|
transition: all .2s;
|
|
}
|
|
|
|
|
|
.reply-indicator__content a{
|
|
color: #76509c!important;
|
|
}
|
|
|
|
.icon-button.inverted, .text-icon-button, .attachment-list__list {
|
|
color: #807591!important;
|
|
}
|
|
ul.attachment-list__list li a i.fa.fa-link, ul.attachment-list__list, .attachment-list__list a{
|
|
color:#807591!important;
|
|
}
|
|
|
|
/*thanks to neumorphism.io css gen*/
|
|
.text-icon-button, .privacy-dropdown, .compose-form__poll-button, .compose-form__upload-button{
|
|
box-shadow: 3px 3px 6px #bebebe,
|
|
-3px -3px 6px #ffffff;
|
|
border-radius: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
.text-icon-button:hover, .privacy-dropdown:hover, .compose-form__poll-button:hover, .compose-form__upload-button:hover{
|
|
box-shadow: 0px 0px 0px, inset 0px 0px 50px #ffffff!important;
|
|
transition: all 0.2s !important;
|
|
border-radius: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
|
|
.search {
|
|
border-radius: 4px!important;
|
|
margin-left: 10px!important;
|
|
margin-right: 10px!important;
|
|
|
|
}
|
|
.search__input{
|
|
border-radius: 5px!important;
|
|
box-shadow: inset 0px 3px 5px #0e0b11, 0px 1px 2px #ddd5e622!important;
|
|
background: linear-gradient(#16121b, #27232c)!important;
|
|
transition: all 0.2s!important;
|
|
}
|
|
|
|
|
|
.column-header, .column-header__button {
|
|
background: linear-gradient(0deg, #2a253155, #423a5022)!important;
|
|
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important;
|
|
}
|
|
.tabs-bar__wrapper{
|
|
background: linear-gradient(0deg, #e4cbff22, #2a253199, #64548278, #e4cbff59)!important;
|
|
backdrop-filter: blur(5px)!important;
|
|
box-shadow: 0px 5px 10px #000a, 0px -20px 0px #1b1821!important;
|
|
border-radius: 5px!important;
|
|
}
|
|
.tabs-bar__wrapper{
|
|
padding-top: 0px!important;
|
|
position:sticky!important;top: 10px!important;
|
|
margin-top: 10px!important;
|
|
}
|
|
.column-back-button{
|
|
color: #fff!important;
|
|
text-shadow: 0px -1px 2px #0e0c11!important;
|
|
transition: all .3s!important;
|
|
background: linear-gradient(0deg, #2a253122, #423a5022)!important;
|
|
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important;
|
|
}
|
|
|
|
.column-header__back-button{
|
|
color: #fff!important;
|
|
text-shadow: 0px -1px 2px #0e0c11!important;
|
|
transition: all .3s!important;
|
|
}
|
|
.column-header__back-button:hover{
|
|
text-shadow: 0px 0px 20px#fff, 0px 0px 40px#fff, 0px -1px 2px #0e0c11!important;
|
|
transition: all .3s!important;
|
|
}
|
|
|
|
|
|
|
|
|
|
.column-link {
|
|
background: linear-gradient(180deg, #27222f, #1d1a22)!important;
|
|
border-radius: 5px!important;
|
|
margin: 2px!important;
|
|
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.9)!important;
|
|
}
|
|
|
|
.column-link.active, .column-link.active:hover,
|
|
.column-header__button.active {
|
|
background: linear-gradient(0deg, #2a2531, #625776)!important;
|
|
text-shadow: 0 -1px 1px #0006, 0 2px 10px!important;
|
|
color: #fff!important;
|
|
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important;
|
|
transition: all .3s!important;
|
|
border-radius: 5px!important;
|
|
margin: 0px!important;
|
|
}
|
|
|
|
.column-link:hover {
|
|
background: linear-gradient(180deg, #484155, #34303c)!important;
|
|
text-shadow: 0 -1px 1px #0006, 0 2px 12px, 0 2px 55px!important;
|
|
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1)!important;
|
|
transition: all 0.2s!important;
|
|
padding-left: 12px!important;
|
|
margin-left: 0px!important;
|
|
}
|
|
.column-link:active {
|
|
background: linear-gradient(180deg, #27222f, #1d1a22)!important;
|
|
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6)!important;
|
|
transition: all .1s!important;
|
|
}
|
|
|
|
.icon-with-badge__badge {
|
|
border: 2px!important;
|
|
padding: 1px 5px!important;
|
|
filter: drop-shadow(0 0 5px #a288bd)!important;;
|
|
}
|
|
|
|
.navigation-panel {
|
|
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4))!important;
|
|
}
|
|
|
|
|
|
.icon-button.star-icon.active {
|
|
color: #ffac33!important;
|
|
text-shadow: 0px 0px 1px #000a, 0px 0px 20px, 0px 0px 10px, 0px 0px 30px #ffac33aa;
|
|
}
|
|
|
|
.icon-button.active[aria-label="Unboost"] i {
|
|
filter: drop-shadow(0 0 1px #0002) drop-shadow(0 0 20px #8bb82d) drop-shadow(0 0 10px #8bb82d)!important;
|
|
}
|
|
|
|
.webkit-scrollbar-track:hover {
|
|
background: #383144;
|
|
}
|
|
|
|
|
|
|