made-in-akira/webdev/userstyles/Tootmorphism.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;
}