antijingoist icon

Mastodon Theme: TNG LCARS

antijingoist | PRO | 11/20/22 06:09:25 PM UTC | 0 ⭐ | 2850 👁️ | Never ⏰ | [theme, Mastodon, star trek]
CSS |

12.78 KB

|

Source Code

|

0 👍

/

0 👎

:root {
  --accent: #fecc66;
  --text_light: #efc414;
  --text_dark: #000;
  --text_accent: #000;
  --action_button: #fff;
  --text_link: #ece7bf;
  --bg: #000;
  --fav: yellow;
  --bg_fav: #383800;
  --warning: #b60100;
  --info: #ece7bf;
  --scroll: #96a0ff;
  --announcement: #ece7bf;
  --mDefault: #282c37;
  --text_mute: #bccdfa;
}
 
body:not(.admin), body.app-body, .tabs-bar__wrapper {
    background: var(--bg);
    color: var(--text_light);
}
 
.getting-started__wrapper, .tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
    background-color: var(--bg);    
}
 
.announcements__container {
    border-left: 5px solid var(--announcement);
}
 
.column-header__collapsible-inner, .setting-toggle__label {
    color: var(--text_light);
    background-color: var(--bg);
    border: none;
}
 
.drawer__header {
    background-color: var(--accent);
    color: var(--text_light);
    border-radius: 30px;
    border: none;
}
 
.drawer__tab:hover {
    background-color: black;
}
.drawer__inner__mastodon, .drawer__inner {
    background: black;
    border: none;
}
 
.column-subheading {
  background: black;
  color: var(--text_light);
  border: none;
  border-left: 15px solid var(--accent);
  border-right: 15px solid var(--accent);
  border-radius: 10px;
  text-align: right;
}
 
.column-link {
    border: none;
    color: var(--text_light);
    background: black;
}
 
a, .account__relationship button , .link-footer{
    color: var(--text_link);
}
 
.admin-wrapper a, .account__header__extra__links a {
    color: var(--mDefault);
}
 
.account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd, .account__header__bio .account__header__fields .verified dt {
  color: #4a905f;
}
 
.navigation-panel {
    background-color: var(--accent);
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
 
.navigation-panel hr {
    border: none;
}
 
.navigation-panel a.active {
 
}
 
.navigation-panel a.active::before {
    content: " ";
    padding: 1em 0;
    border-left: 10px solid var(--accent);
    transition-property: all;
    transition: .3s all;
}
 
.navigation-panel a {
    color: var(--text_light);
}
 
.columns-area__panels__pane {
    border-radius: 30px;
}
 
.ui-header {
  border-radius: 30px;
  background: var(--accent);
}
 
.navigation-panel__logo svg{
    display:none;
}
 
a.column-link--transparent {
    background-color: var(--bg);
    padding: 0;
    border-bottom: 3px solid var(--bg);
    border-top: 10px solid var(--bg);;
}
 
a.column-link--transparent i.column-link__icon {
    margin: 1.2em 1em;
    margin-right: 0;
}
 
a.column-link--transparent span::after {
    content: " ";
    border-left: 10px solid var(--accent);
    border-right: 30px solid var(--accent);
    border-radius: 0px 30px 30px 0px;
    padding: 2em 0.3em;
    position: relative;
    float: right;
}
 
a.column-link--transparent span {
  background: var(--bg);
  color: var(--text_light);
  min-width: 100%;
  margin: 2em auto;
 
}
 
.column-back-button, .column-header {
  background: var(--accent);
  border: none;
  flex-direction: row-reverse;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
 
.column-header>button {
    background: black;
    max-width: 30%;
    text-align: center;
    margin-left: auto;
    margin-right: 40px;
}
 
.column-header__buttons > button {
    background: black;
    color: var(--text_light);
}
 
.column-header>.column-header__back-button {
  color: var(--text_light);
}
 
 
.column-inline-form, .column>.scrollable, .error-column, .getting-started, .regeneration-indicator {
  background: transparent;
  border: none;
  color: var(--text_light);
}
 
.empty-column-indicator, .error-column {
  color: var(--accent);
  background: var(--bg);
}
 
.reply-indicator__content, .status__content, .status__prepend, .status__prepend .status__display-name strong, .account__display-name strong, .status__display-name strong, .navigation-bar strong, .detailed-status__display-name strong, .trends__item__name {
    color: var(--text_light);
}
 
.focusable:focus {
  background: none;
  border-right: 4px solid var(--accent);
}
 
.status {
    border-bottom: 10px solid var(--accent);
}
 
.status-card__title, .status-card__description {
    color: var(--text_light);
}
 
.status-card, .media-gallery__item {
    border: none;
    border-left: 16px solid var(--accent);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding-left: 7px;
}
 
.spoiler-button--minified {
    left: 28px;
}
 
a.status-card:hover {
    background: transparent;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
}
 
.detailed-status {
  background: var(--bg);
  border: 1px solid var(--accent);
}
 
.detailed-status__action-bar {
    background: var(--accent);
    border: none;
}
 
.status__action-bar > button,
.detailed-status__action-bar button {
    color: var(--action_button);
}
 
.status__action-bar > button.active,
.detailed-status__action-bar button.active {
    color: var(--text_light);
}
 
.icon-button.active {
    color: var(--text_light);   
}
 
button.icon-button i.fa-retweet {
      filter: hue-rotate(215deg) brightness(9);
}
 
.dropdown-menu {
    background: var(--bg);
    border-left: 10px solid var(--accent);
    border-top: 20px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    border-radius: 15px;
}
 
.dropdown-menu__item a, .dropdown-menu__item button {
  background: var(--bg);
  color: var(--accent);
}
 
.dropdown-menu__arrow {
    display: none;
}
 
.muted .status__content, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong, article .notification__message {
  color: var(--text_mute);
}
 
.account__section-headline button, .notification__filter-bar button, .notification__filter-bar, .account__section-headline {
    background: var(--bg);
    color: var(--text_light);
    border: none;
    transition: .3s all;
}
 
.notification__filter-bar button {
    font-size: bigger;
}
.account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
  border-left: 20px solid var(--accent);
  border-right: 20px solid var(--accent);
  color: var(--accent);
  border-radius: 20px;
  border-top: none ;
  border-bottom: none ;
  margin-top: 10px;
  color: var(--text_link);
}
 
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
  overflow: hidden;
  margin-top: 15px;
  padding-top: 0;
  padding-left: 5px;
  border-radius: 30px;
  border-left: 20px solid var(--accent);
  background: var(--bg);
}
 
.compose-form__publish-button-wrapper > button {
  border-radius: 0;
}
 
.button {
  background-color: var(--accent);
  margin: 0;    
}
 
.button:active, .button:focus {
  transform: scale(0.5);
  transition: .25s all;
  margin: 0;
}
 
.panel-container {
   border-top-left-radius: 30px;
   border-left: 30px solid #58e;
}
.panel-title-container {
   border-right: 30px solid #58e;
   border-radius: 30px;
   background: #58e;
}
 
div.panel-title {
  background: #58e;
 
}
 
div.panel-title h2 {
   text-align: right;
    position: relative;
    padding: 8px;
    background: var(--bg);
    margin-right: 0;
    margin-left: auto !important;
   font-weight: bold; font-size: larger;
   color: #8ff;
   text-transform: uppercase;
}
 
.columns-area__panels {
  min-height: calc(100vh - 55px);
  flex-direction: row-reverse;
}
 
.audio-player, .compose-form .spoiler-input__input, .compose-form__autosuggest-wrapper, .compose-form__poll-wrapper select, .poll__option input[type=text], .report-dialog-modal__textarea, .search__input, .setting-text {
    border: none;
  border-bottom: 1px solid var(--accent);
  background: var(--bg);
  color: var(--text_light);
}
 
input::placeholder {
    color: var(--text_light);
}
 
.compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper {
  background: var(--accent);
  color: var(--text_accent);
  border: none;
}
 
.compose-form .compose-form__warning {
  color: var(--text_light);
 
}
 
.compose-form button, .compose-form .character-counter {
    color: var(--text_accent);
}
 
.compose-form .text-icon-button.active {
    color: black;
}
 
.compose-form .autosuggest-textarea__suggestions__item.selected {
    background-color: var(--accent);
}
 
.compose-form .autosuggest-textarea__suggestions__item {
    background-color: black;
}
 
.trends__item__sparkline {
    background: white;
}
 
.load-more {
    color: var(--text_link);
}
 
.column-header__wrapper .announcements {
  z-index: 1;
  position: relative;
  background: transparent;
  border: none;
  border-bottom: 5px solid var(--accent);
}
 
@media screen and (max-width: 1174px){
    .ui__header {
        border-radius: 30px;
        border-bottom-left-radius: 0;
        background-color: var(--accent);
        border: none;
    }
    
    .ui__header__logo {
        display:none;
    }
    
    .ui__header__links {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .ui__header__links a.button {
        background: black;
        border-radius: 40px;
        padding: 0 1em;
    }
    
    .ui__header__links a.button > span {
        padding: 1em;
        line-height: 2.5em;
        border-left: 5px solid var(--accent);
    }
    
    .ui__header__links a.button:active {
        background-color: var(--accent);
    }
 
    .navigation-panel {
        border-top-left-radius: 0;
    }
    
    .column-back-button {
        border: none;
        position: absolute;
        top: -48px;
        border-radius: 30px;
        background: black;
        width: auto;
        color: var(--text_accent);
        padding: 13px 26px;
        margin-right: 10px;
        line-height: 1em;
    }
    
    .column-header {
        background: transparent;
    }
    
    .column-header > button {
        border-radius: 0 0px 10px 10px;
        background-color: var(--accent);
        color: var(--text_accent);
    }
    
    .column-back-button button {
        background: black;
        max-width: 40%;
        text-align: right;
    }
    
    .ui {
        /*flex-direction: column-reverse;*/
    }
    
    .explore__search-header {
        background: transparent;
    }
    
    .column-header__buttons {
        border-bottom-right-radius: 15px;
        overflow: hidden;
    }
    
    .tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
        background-color: transparent;
        
    }
    
}
 
.about__meta, .about__meta h4 {
    background-color: black;
    color: var(--text_light);
    border: none;
}
 
.about__meta__column {
    border-left: 10px solid var(--accent);
    border-radius: 10px 0px 0px 10px;
}
 
.about__meta__divider {
    display: none;
}
 
 
.status:has( button.icon-button.star-icon.active ) {
    background-color: var(--bg_fav);
    border-radius:10px;
    transition: 0.25s all;
}
 
button.icon-button.star-icon.active {
    color: var(--fav);
}
 
.about__header h1 {
  border-left: 30px solid var(--accent);
  border-right: 30px solid var(--accent);
  border-radius: 30px;
}
 
.about__header p {
    color: var(--text_light);
}
 
.about__section__body {
    border: none;
    border-left: 30px solid var(--accent);
    border-radius: 0px 0px 0px 30px;
}
 
.about__section [role="button"] {
    color: black;
    background-color: var(--accent);
    border: none;
    border-radius: 30px 30px 30px 30px;
    text-align: right;
    padding-right: 4em;
}
 
.about__section.active [role="button"] {
    border-radius: 30px 30px 30px 0px;
}
 
.conversation__content__relative-time, .conversation__content__names, .rules-list, .about__footer, .link-footer p, .prose, .prose b, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, .prose strong, .prose ul>li:before   {
    color: var(--text_light);
}
 
.dismissable-banner, .dismissable-banner__message, .follow_requests-unlocked_explanation {
    color: var(--text_light);
    border: none;
    background: black;
}
 
.dismissable-banner {
    border-left: 10px solid var(--info);
    border-top: 20px solid var(--info);
    border-radius: 10px;
}
 
.dismissable-banner__action .icon-button {
    color: var(--info);
}
 
body, button, h1,h2,h3,h4,h5,h6 {
    font-family: opendyslexic;
}
 
::-webkit-scrollbar-corner {
  background: transparent;
}
 
::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border: 0 #000;
  border-radius: 50px;
}
 
::-webkit-scrollbar-track {
  border: 0 #f000;
  border-radius: 0;
  background: black;
}
 
@keyframes vloader {
    0% {
        transform: translateX(0) scaleY(0.0);
        opacity: 0;
    }
    
    50% { 
        transform: translateX(0) scaleY(0.0);
        opacity: 0.9;
    }
    
    
 
    100% {
        transform: translateX(0) scaleY(1);
        opacity: 1.0;
    }
}
 
@keyframes loader {
    0% {
        transform: translateX(0) scaleX(0.0);
        opacity: 0;
    }
    
    50% { 
        transform: translateX(0) scaleX(0.0);
        opacity: 0.5;
    }
    
    
 
    100% {
        transform: translateX(0) scaleX(1);
        opacity: 1.0;
    }
}

Comments