API tools faq
paste
Advertisement
antijingoist

Mastodon Theme: LCARS

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