Mastodon Theme: TNG LCARS
antijingoist |
PRO |
11/20/22 06:09:25 PM UTC |
0 ⭐ |
2850 👁️ |
Never ⏰ |
[theme, Mastodon, star trek]
: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