toootim-wide-style.css

 @-moz-document url-prefix("https://mastodon.social/web"), url-prefix("https://mastodon.xyz/web"), url-prefix("https://social.tchncs.de/web"), url-prefix("https://awoo.space/web"), url-prefix("https://icosahedron.website/web"), url-prefix("https://aleph.land/web"), url-prefix("https://maly.io/web"), url-prefix("https://witches.town/web"), url-prefix("https://tooot.im/web") {
 // My personal look for tooot.im, Based on https://userstyles.org/styles/140852/mastodon-flat-dark-and-colourful
.button {
    background-color: #d03010;
  }
  .button:hover,
  .button:focus,
  .button:active,
  .button:disabled {
    background-color: #E0401B;
  }
  
  .ui {
    background-color: #322;
  }
  
  .drawer .drawer__header, .column-header, .column-icon {
    background-color: #322;
  }
  
  .column-icon {
    color: #eee;
    transition: all 200ms;
  }
  .column-icon:hover {
    color: #fff;
  }
  .column-icon.collapsable {
    background-color: #FBC02D;
    color: #fff;
    font-size: 20px !important;
    padding-bottom: 13px !important;
  }
  .column-settings--outer, .column-settings--section, .setting-toggle {
    background-color: #FBC02D;
    color: #fff;
  }
  .setting-text,
  .setting-text:hover,
  .setting-text:focus {
    color: #fff;
    border-bottom: 2px solid #fff;
  }
  .react-toggle--checked .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
    background-color: #140000;
  }
  .react-toggle--checked .react-toggle-thumb {
    border-color: #322;
  }
  
  .drawer .drawer__header .drawer__tab {
    color: #FBC02D;
  }
  .drawer .drawer__header a:hover {
    background-color: #322;
    color: #FBC94B;
  }
  
  .search__input {
    background-color: #140000;
    transition: all 200ms;
    color: #fff;
  }
  .search__input:hover,
  .search__input:focus {
    background-color: #eee;
    color: #000;
  }
  
  .drawer__inner {
    background-color: #322;
  }
  .navigation-bar {
    color: #eee;
  }
  .navigation-bar strong {
    font-size: 14px;
    margin-top: 2px;
  }
  
  .search-results__header {
    background-color: #322;
    color: #eee;
    text-transform: capitalize;
  }
  .drawer__inner.darker {
    background-color: #322;
  }
  .account__display-name {
    outline: none;
  }
  .display-name span {
    color: #ddd;
  }
  .icon-button:hover,
  .icon-button:focus,
  .icon-button:active,
  .icon-button.active {
    color: #fff
  }
  
  .status__prepend,
  .status,
  .column>.scrollable {
    background-color: #322;
    color: #fff;
    border-bottom: 0;
  }
  
  .notification__message {
    color: #ccc;
  }
  
  .status .status__relative-time {
    color: #ccc;
  }
  
  .status__content a .fa,
  .status__content a .fa:hover {
    color: #FBC02D;
  }
  
  .status__content a, 
  .reply-indicator__content a,
  .getting-started a,
  .muted .status__content a,
  .account__header .account__header__username {
    color: #FBC02D;
  }
  
  .muted .status__display-name strong {
    color: #ccc;
  }
  
  .status__prepend .status__display-name strong {
    color: #fff;
    outline: none;
  }
  
  .muted .status__content p {
    color: #ccc;
  }
  
  .column-link, .column {
    background-color: #322; 
  }
  
  .account__action-bar,
  .account__action-bar__tab,
  .detailed-status__action-bar {
    border: 0;
    background: #322;
  }
  
  .account {
    border-bottom: 0;
  }
  
  .column-back-button {
    background-color: #322;
    color: #de371b;
  }

  .status__content .status__content__spoiler-link, .reply-indicator__content .status__content__spoiler-link {
    background: #3d2929;
}
  .autosuggest-textarea__suggestions {
	background: #fff;
}
  .autosuggest-textarea__suggestions__item:hover {
    background: #FBC02D;
	color: #fff;
}
  .autosuggest-textarea__suggestions__item.selected {
    background: #FBC02D;
    color: #fff;
}
  .reply-indicator {
    background: #3d2929;
}
  .reply-indicator__content {
color: #fff
}
.reply-indicator .reply-indicator__display-name {
    color: #fff
}
  .detailed-status {
	background: #322;
}
  .account__header {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    background: #322;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
}
  .account__header>div {
	background: linear-gradient( to bottom, rgba(51, 34, 34, 0.10), #322);
}
.icon-button.inverted {
    color: #fbc02d
}
.icon-button.inverted.active {
    color: #fbc02d 
}
 
.icon-button.inverted:hover, .icon-button.inverted:active, .icon-button.inverted:focus {
    color: #fbc94b 
}
.compose-form__buttons {
    background: #3d2929;
}
.text-icon-button.active {
    color: #de37fb
}
.privacy-dropdown__option.active {
	background: #fbc02d;
}
.privacy-dropdown__option:hover {
	background: #fbc02d;
}
.privacy-dropdown__option.active:hover {
	background: #fbc02d;
}
.button {
	box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    transition: box-shadow 0.1s ease-in-out;
	transition: transform 0.1s ease-in-out
  }
  .button:hover {
	box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
	transform: scale(1.05);
  }
  .button:focus,
  .button:active,
  .button:disabled {
	box-shadow: 0px 2px 3px rgba(0,0,0,0.7);
	transform: scale(0.93);
  }
   .drawer {
      width: 23vw;
            }
   .column {
      width: 25vw;
            }

}