API tools faq
paste
Advertisement
antijingoist

Mastodon Theme: TNG LCARS

antijingoist
Nov 20th, 2022
2,451
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.78 KB | Source Code | 0 0
raw download clone embed print report
  1. :root {
  2.   --accent: #fecc66;
  3.   --text_light: #efc414;
  4.   --text_dark: #000;
  5.   --text_accent: #000;
  6.   --action_button: #fff;
  7.   --text_link: #ece7bf;
  8.   --bg: #000;
  9.   --fav: yellow;
  10.   --bg_fav: #383800;
  11.   --warning: #b60100;
  12.   --info: #ece7bf;
  13.   --scroll: #96a0ff;
  14.   --announcement: #ece7bf;
  15.   --mDefault: #282c37;
  16.   --text_mute: #bccdfa;
  17. }
  18.  
  19. body:not(.admin), body.app-body, .tabs-bar__wrapper {
  20.     background: var(--bg);
  21.     color: var(--text_light);
  22. }
  23.  
  24. .getting-started__wrapper, .tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
  25.     background-color: var(--bg);   
  26. }
  27.  
  28. .announcements__container {
  29.     border-left: 5px solid var(--announcement);
  30. }
  31.  
  32. .column-header__collapsible-inner, .setting-toggle__label {
  33.     color: var(--text_light);
  34.     background-color: var(--bg);
  35.     border: none;
  36. }
  37.  
  38. .drawer__header {
  39.     background-color: var(--accent);
  40.     color: var(--text_light);
  41.     border-radius: 30px;
  42.     border: none;
  43. }
  44.  
  45. .drawer__tab:hover {
  46.     background-color: black;
  47. }
  48. .drawer__inner__mastodon, .drawer__inner {
  49.     background: black;
  50.     border: none;
  51. }
  52.  
  53. .column-subheading {
  54.   background: black;
  55.   color: var(--text_light);
  56.   border: none;
  57.   border-left: 15px solid var(--accent);
  58.   border-right: 15px solid var(--accent);
  59.   border-radius: 10px;
  60.   text-align: right;
  61. }
  62.  
  63. .column-link {
  64.     border: none;
  65.     color: var(--text_light);
  66.     background: black;
  67. }
  68.  
  69. a, .account__relationship button , .link-footer{
  70.     color: var(--text_link);
  71. }
  72.  
  73. .admin-wrapper a, .account__header__extra__links a {
  74.     color: var(--mDefault);
  75. }
  76.  
  77. .account__header__bio .account__header__fields .verified a, .account__header__bio .account__header__fields .verified dd, .account__header__bio .account__header__fields .verified dt {
  78.   color: #4a905f;
  79. }
  80.  
  81. .navigation-panel {
  82.     background-color: var(--accent);
  83.     border-top-left-radius: 30px;
  84.     border-bottom-left-radius: 30px;
  85. }
  86.  
  87. .navigation-panel hr {
  88.     border: none;
  89. }
  90.  
  91. .navigation-panel a.active {
  92.  
  93. }
  94.  
  95. .navigation-panel a.active::before {
  96.     content: " ";
  97.     padding: 1em 0;
  98.     border-left: 10px solid var(--accent);
  99.     transition-property: all;
  100.     transition: .3s all;
  101. }
  102.  
  103. .navigation-panel a {
  104.     color: var(--text_light);
  105. }
  106.  
  107. .columns-area__panels__pane {
  108.     border-radius: 30px;
  109. }
  110.  
  111. .ui-header {
  112.   border-radius: 30px;
  113.   background: var(--accent);
  114. }
  115.  
  116. .navigation-panel__logo svg{
  117.     display:none;
  118. }
  119.  
  120. a.column-link--transparent {
  121.     background-color: var(--bg);
  122.     padding: 0;
  123.     border-bottom: 3px solid var(--bg);
  124.     border-top: 10px solid var(--bg);;
  125. }
  126.  
  127. a.column-link--transparent i.column-link__icon {
  128.     margin: 1.2em 1em;
  129.     margin-right: 0;
  130. }
  131.  
  132. a.column-link--transparent span::after {
  133.     content: " ";
  134.     border-left: 10px solid var(--accent);
  135.     border-right: 30px solid var(--accent);
  136.     border-radius: 0px 30px 30px 0px;
  137.     padding: 2em 0.3em;
  138.     position: relative;
  139.     float: right;
  140. }
  141.  
  142. a.column-link--transparent span {
  143.   background: var(--bg);
  144.   color: var(--text_light);
  145.   min-width: 100%;
  146.   margin: 2em auto;
  147.  
  148. }
  149.  
  150. .column-back-button, .column-header {
  151.   background: var(--accent);
  152.   border: none;
  153.   flex-direction: row-reverse;
  154.   border-top-right-radius: 30px;
  155.   border-bottom-right-radius: 30px;
  156. }
  157.  
  158. .column-header>button {
  159.     background: black;
  160.     max-width: 30%;
  161.     text-align: center;
  162.     margin-left: auto;
  163.     margin-right: 40px;
  164. }
  165.  
  166. .column-header__buttons > button {
  167.     background: black;
  168.     color: var(--text_light);
  169. }
  170.  
  171. .column-header>.column-header__back-button {
  172.   color: var(--text_light);
  173. }
  174.  
  175.  
  176. .column-inline-form, .column>.scrollable, .error-column, .getting-started, .regeneration-indicator {
  177.   background: transparent;
  178.   border: none;
  179.   color: var(--text_light);
  180. }
  181.  
  182. .empty-column-indicator, .error-column {
  183.   color: var(--accent);
  184.   background: var(--bg);
  185. }
  186.  
  187. .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 {
  188.     color: var(--text_light);
  189. }
  190.  
  191. .focusable:focus {
  192.   background: none;
  193.   border-right: 4px solid var(--accent);
  194. }
  195.  
  196. .status {
  197.     border-bottom: 10px solid var(--accent);
  198. }
  199.  
  200. .status-card__title, .status-card__description {
  201.     color: var(--text_light);
  202. }
  203.  
  204. .status-card, .media-gallery__item {
  205.     border: none;
  206.     border-left: 16px solid var(--accent);
  207.     border-top-left-radius: 4px;
  208.     border-bottom-left-radius: 4px;
  209.     padding-left: 7px;
  210. }
  211.  
  212. .spoiler-button--minified {
  213.     left: 28px;
  214. }
  215.  
  216. a.status-card:hover {
  217.     background: transparent;
  218.     border-top: 1px solid var(--accent);
  219.     border-bottom: 1px solid var(--accent);
  220. }
  221.  
  222. .detailed-status {
  223.   background: var(--bg);
  224.   border: 1px solid var(--accent);
  225. }
  226.  
  227. .detailed-status__action-bar {
  228.     background: var(--accent);
  229.     border: none;
  230. }
  231.  
  232. .status__action-bar > button,
  233. .detailed-status__action-bar button {
  234.     color: var(--action_button);
  235. }
  236.  
  237. .status__action-bar > button.active,
  238. .detailed-status__action-bar button.active {
  239.     color: var(--text_light);
  240. }
  241.  
  242. .icon-button.active {
  243.     color: var(--text_light);  
  244. }
  245.  
  246. button.icon-button i.fa-retweet {
  247.       filter: hue-rotate(215deg) brightness(9);
  248. }
  249.  
  250. .dropdown-menu {
  251.     background: var(--bg);
  252.     border-left: 10px solid var(--accent);
  253.     border-top: 20px solid var(--accent);
  254.     border-bottom: 2px solid var(--accent);
  255.     border-radius: 15px;
  256. }
  257.  
  258. .dropdown-menu__item a, .dropdown-menu__item button {
  259.   background: var(--bg);
  260.   color: var(--accent);
  261. }
  262.  
  263. .dropdown-menu__arrow {
  264.     display: none;
  265. }
  266.  
  267. .muted .status__content, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong, article .notification__message {
  268.   color: var(--text_mute);
  269. }
  270.  
  271. .account__section-headline button, .notification__filter-bar button, .notification__filter-bar, .account__section-headline {
  272.     background: var(--bg);
  273.     color: var(--text_light);
  274.     border: none;
  275.     transition: .3s all;
  276. }
  277.  
  278. .notification__filter-bar button {
  279.     font-size: bigger;
  280. }
  281. .account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
  282.   border-left: 20px solid var(--accent);
  283.   border-right: 20px solid var(--accent);
  284.   color: var(--accent);
  285.   border-radius: 20px;
  286.   border-top: none ;
  287.   border-bottom: none ;
  288.   margin-top: 10px;
  289.   color: var(--text_link);
  290. }
  291.  
  292. .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
  293.   overflow: hidden;
  294.   margin-top: 15px;
  295.   padding-top: 0;
  296.   padding-left: 5px;
  297.   border-radius: 30px;
  298.   border-left: 20px solid var(--accent);
  299.   background: var(--bg);
  300. }
  301.  
  302. .compose-form__publish-button-wrapper > button {
  303.   border-radius: 0;
  304. }
  305.  
  306. .button {
  307.   background-color: var(--accent);
  308.   margin: 0;   
  309. }
  310.  
  311. .button:active, .button:focus {
  312.   transform: scale(0.5);
  313.   transition: .25s all;
  314.   margin: 0;
  315. }
  316.  
  317. .panel-container {
  318.    border-top-left-radius: 30px;
  319.    border-left: 30px solid #58e;
  320. }
  321. .panel-title-container {
  322.    border-right: 30px solid #58e;
  323.    border-radius: 30px;
  324.    background: #58e;
  325. }
  326.  
  327. div.panel-title {
  328.   background: #58e;
  329.  
  330. }
  331.  
  332. div.panel-title h2 {
  333.    text-align: right;
  334.     position: relative;
  335.     padding: 8px;
  336.     background: var(--bg);
  337.     margin-right: 0;
  338.     margin-left: auto !important;
  339.    font-weight: bold; font-size: larger;
  340.    color: #8ff;
  341.    text-transform: uppercase;
  342. }
  343.  
  344. .columns-area__panels {
  345.   min-height: calc(100vh - 55px);
  346.   flex-direction: row-reverse;
  347. }
  348.  
  349. .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 {
  350.     border: none;
  351.   border-bottom: 1px solid var(--accent);
  352.   background: var(--bg);
  353.   color: var(--text_light);
  354. }
  355.  
  356. input::placeholder {
  357.     color: var(--text_light);
  358. }
  359.  
  360. .compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper {
  361.   background: var(--accent);
  362.   color: var(--text_accent);
  363.   border: none;
  364. }
  365.  
  366. .compose-form .compose-form__warning {
  367.   color: var(--text_light);
  368.  
  369. }
  370.  
  371. .compose-form button, .compose-form .character-counter {
  372.     color: var(--text_accent);
  373. }
  374.  
  375. .compose-form .text-icon-button.active {
  376.     color: black;
  377. }
  378.  
  379. .compose-form .autosuggest-textarea__suggestions__item.selected {
  380.     background-color: var(--accent);
  381. }
  382.  
  383. .compose-form .autosuggest-textarea__suggestions__item {
  384.     background-color: black;
  385. }
  386.  
  387. .trends__item__sparkline {
  388.     background: white;
  389. }
  390.  
  391. .load-more {
  392.     color: var(--text_link);
  393. }
  394.  
  395. .column-header__wrapper .announcements {
  396.   z-index: 1;
  397.   position: relative;
  398.   background: transparent;
  399.   border: none;
  400.   border-bottom: 5px solid var(--accent);
  401. }
  402.  
  403. @media screen and (max-width: 1174px){
  404.     .ui__header {
  405.         border-radius: 30px;
  406.         border-bottom-left-radius: 0;
  407.         background-color: var(--accent);
  408.         border: none;
  409.     }
  410.    
  411.     .ui__header__logo {
  412.         display:none;
  413.     }
  414.    
  415.     .ui__header__links {
  416.         width: 100%;
  417.         flex-direction: row-reverse;
  418.         justify-content: space-between;
  419.     }
  420.    
  421.     .ui__header__links a.button {
  422.         background: black;
  423.         border-radius: 40px;
  424.         padding: 0 1em;
  425.     }
  426.    
  427.     .ui__header__links a.button > span {
  428.         padding: 1em;
  429.         line-height: 2.5em;
  430.         border-left: 5px solid var(--accent);
  431.     }
  432.    
  433.     .ui__header__links a.button:active {
  434.         background-color: var(--accent);
  435.     }
  436.  
  437.     .navigation-panel {
  438.         border-top-left-radius: 0;
  439.     }
  440.    
  441.     .column-back-button {
  442.         border: none;
  443.         position: absolute;
  444.         top: -48px;
  445.         border-radius: 30px;
  446.         background: black;
  447.         width: auto;
  448.         color: var(--text_accent);
  449.         padding: 13px 26px;
  450.         margin-right: 10px;
  451.         line-height: 1em;
  452.     }
  453.    
  454.     .column-header {
  455.         background: transparent;
  456.     }
  457.    
  458.     .column-header > button {
  459.         border-radius: 0 0px 10px 10px;
  460.         background-color: var(--accent);
  461.         color: var(--text_accent);
  462.     }
  463.    
  464.     .column-back-button button {
  465.         background: black;
  466.         max-width: 40%;
  467.         text-align: right;
  468.     }
  469.    
  470.     .ui {
  471.         /*flex-direction: column-reverse;*/
  472.     }
  473.    
  474.     .explore__search-header {
  475.         background: transparent;
  476.     }
  477.    
  478.     .column-header__buttons {
  479.         border-bottom-right-radius: 15px;
  480.         overflow: hidden;
  481.     }
  482.    
  483.     .tabs-bar__wrapper, .tabs-bar__portal, .column-header__wrapper {
  484.         background-color: transparent;
  485.        
  486.     }
  487.    
  488. }
  489.  
  490. .about__meta, .about__meta h4 {
  491.     background-color: black;
  492.     color: var(--text_light);
  493.     border: none;
  494. }
  495.  
  496. .about__meta__column {
  497.     border-left: 10px solid var(--accent);
  498.     border-radius: 10px 0px 0px 10px;
  499. }
  500.  
  501. .about__meta__divider {
  502.     display: none;
  503. }
  504.  
  505.  
  506. .status:has( button.icon-button.star-icon.active ) {
  507.     background-color: var(--bg_fav);
  508.     border-radius:10px;
  509.     transition: 0.25s all;
  510. }
  511.  
  512. button.icon-button.star-icon.active {
  513.     color: var(--fav);
  514. }
  515.  
  516. .about__header h1 {
  517.   border-left: 30px solid var(--accent);
  518.   border-right: 30px solid var(--accent);
  519.   border-radius: 30px;
  520. }
  521.  
  522. .about__header p {
  523.     color: var(--text_light);
  524. }
  525.  
  526. .about__section__body {
  527.     border: none;
  528.     border-left: 30px solid var(--accent);
  529.     border-radius: 0px 0px 0px 30px;
  530. }
  531.  
  532. .about__section [role="button"] {
  533.     color: black;
  534.     background-color: var(--accent);
  535.     border: none;
  536.     border-radius: 30px 30px 30px 30px;
  537.     text-align: right;
  538.     padding-right: 4em;
  539. }
  540.  
  541. .about__section.active [role="button"] {
  542.     border-radius: 30px 30px 30px 0px;
  543. }
  544.  
  545. .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   {
  546.     color: var(--text_light);
  547. }
  548.  
  549. .dismissable-banner, .dismissable-banner__message, .follow_requests-unlocked_explanation {
  550.     color: var(--text_light);
  551.     border: none;
  552.     background: black;
  553. }
  554.  
  555. .dismissable-banner {
  556.     border-left: 10px solid var(--info);
  557.     border-top: 20px solid var(--info);
  558.     border-radius: 10px;
  559. }
  560.  
  561. .dismissable-banner__action .icon-button {
  562.     color: var(--info);
  563. }
  564.  
  565. body, button, h1,h2,h3,h4,h5,h6 {
  566.     font-family: opendyslexic;
  567. }
  568.  
  569. ::-webkit-scrollbar-corner {
  570.   background: transparent;
  571. }
  572.  
  573. ::-webkit-scrollbar-thumb {
  574.   background: var(--scroll);
  575.   border: 0 #000;
  576.   border-radius: 50px;
  577. }
  578.  
  579. ::-webkit-scrollbar-track {
  580.   border: 0 #f000;
  581.   border-radius: 0;
  582.   background: black;
  583. }
  584.  
  585. @keyframes vloader {
  586.     0% {
  587.         transform: translateX(0) scaleY(0.0);
  588.         opacity: 0;
  589.     }
  590.    
  591.     50% {
  592.         transform: translateX(0) scaleY(0.0);
  593.         opacity: 0.9;
  594.     }
  595.    
  596.    
  597.  
  598.     100% {
  599.         transform: translateX(0) scaleY(1);
  600.         opacity: 1.0;
  601.     }
  602. }
  603.  
  604. @keyframes loader {
  605.     0% {
  606.         transform: translateX(0) scaleX(0.0);
  607.         opacity: 0;
  608.     }
  609.    
  610.     50% {
  611.         transform: translateX(0) scaleX(0.0);
  612.         opacity: 0.5;
  613.     }
  614.    
  615.    
  616.  
  617.     100% {
  618.         transform: translateX(0) scaleX(1);
  619.         opacity: 1.0;
  620.     }
  621. }
Tags: theme Mastodon star trek
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!