☰

Twitter for Mastodon

Makes Mastodon look like Twitter.

  1. /* ==UserStyle==
  2. @name           Twitter for Mastodon
  3. @version        1.0.4
  4. @description    Makes Mastodon look like Twitter.
  5. @preprocessor   stylus
  6.  
  7.  -- AUTHOR STUFF --
  8. @namespace      Freeplay
  9. @author         Freeplay (https://freeplay.codeberg.page/)
  10. @homepageURL    https://codeberg.org/Freeplay/UserStyles
  11. @supportURL     https://codeberg.org/Freeplay/UserStyles/issues
  12.  
  13. @var select theme "Theme" ["dim:Dim", "light:Light", "black:Lights out", "custom:Custom - Edit inside script"]
  14. @var color themeColor "Theme Color" rgb(32, 160, 239)
  15. @var checkbox noBorders "No Borders" 0
  16.  
  17. ==/UserStyle== */
  18.  
  19.  
  20.  
  21.  
  22. /*      \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\		
  23. 		!! If you aren't on one of the instances below, add your instance URL below !!
  24. 		//////////////////////////////////////////////////////////////////////////////		*/
  25. @-moz-document domain("mstdn.social"), domain("mastodon.social"), domain("mastodon.online") {	
  26.  
  27. 	:root {
  28. 		
  29. 		/* OTHER SETTINGS */
  30. 		--column-width: 597.5px;
  31. 		
  32. 		--theme: themeColor;
  33. 		--theme-transparent: rgba( themeColor, .1);
  34. 		
  35. 		if theme == custom { 
  36. 			
  37. 			/*** EDIT YOUR CUSTOM COLORS HERE ***/ // You can copy & paste values from other themes below to edit
  38. 			
  39. 			--color-primary: #15202b;
  40. 			--color-secondary: #192734;
  41. 			--color-tertiary: #253341;
  42.  
  43. 			--color-text: rgb(217, 217, 217);
  44. 			--color-text-muted: rgb(136, 153, 166);
  45.  
  46. 			--color-hover: rgba(255,255,255,0.03);
  47.  
  48. 			--border: 1px solid rgb(47, 51, 54);
  49.  
  50. 			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
  51. 			
  52. 			
  53. 		} else if theme == dim { 
  54.  
  55. 			/*** DIM COLORS ***/
  56.  
  57. 			--color-primary: #15202b;
  58. 			--color-secondary: #192734;
  59. 			--color-tertiary: #253341;
  60.  
  61. 			--color-text: white;
  62. 			--color-text-muted: rgb(136, 153, 166);
  63.  
  64. 			--color-hover: rgba(255,255,255,0.03);
  65.  
  66. 			--border: 1px solid rgb(56, 68, 77);
  67.  
  68. 			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
  69. 			
  70. 			
  71. 		} else if theme == light { 
  72.  
  73. 			/*** LIGHT COLORS ***/
  74.  
  75. 			--color-primary: white;
  76. 			--color-secondary: #f7f9fa;
  77. 			--color-tertiary: #ebeef0;
  78.  
  79. 			--color-text: rgb(15, 20, 25);
  80. 			--color-text-muted: rgb(91, 112, 131);
  81.  
  82. 			--color-hover: rgba(0,0,0,0.03);
  83.  
  84. 			--border: 1px solid rgb(235, 238, 240);
  85.  
  86. 			--shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;
  87. 			
  88. 			
  89. 		} else if theme == black {
  90. 			
  91. 			/*** LIGHTS OUT COLORS ***/
  92.  
  93. 			--color-primary: #000;
  94. 			--color-secondary: #15181c;
  95. 			--color-tertiary: #202327;
  96.  
  97. 			--color-text: white;
  98. 			--color-text-muted: rgb(110, 118, 125);
  99.  
  100. 			--color-hover: rgba(255,255,255,0.03);
  101.  
  102. 			--border: 1px solid rgb(56, 68, 77);
  103.  
  104. 			--shadow: rgba(255, 255, 255, 0.2) 0px 0px 15px, rgba(255, 255, 255, 0.15) 0px 0px 3px 1px;
  105. 			
  106. 			
  107. 		}
  108. 		
  109. 		if noBorders {
  110. 			--border: none !important;
  111. 		}
  112. 		
  113. 	}
  114. 	
  115. 	body {
  116. 		background-color: var(--color-primary);
  117. 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  118. 		font-size: 15px;
  119. 	}
  120. 	
  121. 	/* TEXT */
  122. 	h1, .getting-started__trends h4 {
  123. 		font-size: 19px !important;
  124. 		font-weight: 800 !important;
  125. 		color: var(--color-text) !important;
  126. 	}
  127. 	
  128. 	/* OTHER GLOBAL STUFF */
  129. 	button, .icon-button {
  130. 		border-radius: 100px !important;
  131. 		overflow: hidden;
  132. 	}
  133. 	.account__avatar, .account__avatar-overlay > div {
  134. 		border-radius: 100%;
  135. 	}
  136. 	
  137. 	.column-header__collapsible-inner, .column-back-button,
  138. 	.filter-form,
  139. 	.empty-column-indicator, .error-column, .follow_requests-unlocked_explanation,
  140. 	.drawer__inner.darker,
  141. 	.column-inline-form,
  142. 	.tabs-bar__link,
  143.  	.flex-spacer, .getting-started, .getting-started__wrapper {
  144. 		background-color: var(--color-primary);
  145. 	}
  146. 	.column-header__collapsible {
  147. 		border-top: var(--border);
  148. 	}
  149. 	input, select {
  150. 		background-color: var(--color-tertiary) !important;
  151. 		border-radius: 100px !important;
  152. 		color: var(--color-text) !important;
  153. 		border: 1px solid transparent !important;
  154. 	}
  155. 	input:focus {
  156. 		border: var(--border) !important;
  157. 		border-color: var(--theme) !important;
  158. 		background-color: var(--color-primary) !important;
  159. 	}
  160. 	hr {
  161. 		border-top: var(--border) !important;
  162. 	}
  163. 	
  164. 	/*** LEFT SIDEBAR ***/
  165. 	.search {
  166. 		margin: 0 10px !important;
  167. 		margin-bottom: 10px !important;
  168. 	}
  169. 	.search__input {
  170. 		border-radius: 100px;
  171. 		background-color: var(--color-tertiary);
  172. 		padding: 10px 20px !important;
  173. 		color: var(--color-text) !important;
  174. 	}
  175. 	.search__input::placeholder {
  176. 		color: var(--color-text-muted);
  177. 		opacity: 1;
  178. 	}
  179. 	.search__icon .fa-times-circle {
  180. 		top: 15px !important;
  181. 	}
  182. 	.search__icon .fa-search {
  183. 		top: 12px !important
  184. 	}
  185. 	.search .search__icon i {
  186. 		color: var(--color-text-muted) !important;
  187. 	}
  188. 	.search:focus-within i {
  189. 		color: var(--theme) !important;
  190. 	}
  191. 	.search:focus-within i.active {
  192. 		opacity: 1 !important;
  193. 	}
  194. 	.search__icon .active {
  195. 		opacity: .5 !important;
  196. 	}
  197. 	
  198. 	.navigation-bar {
  199. 		padding: 10px !important;
  200. 		margin: 20px 10px !important;
  201. 		margin-top: 10px !important;
  202. 		min-height: 0 !important;
  203. 		flex: none !important;
  204. 		border-radius: 100px;
  205. 		transition: background-color .2s;
  206. 	}
  207. 	.navigation-bar:hover {
  208. 		background-color: rgba(29,161,242,0.1);
  209. 	}
  210. 	.navigation-bar .account__avatar {
  211. 		width: 39px !important;
  212. 		height: 39px !important;
  213. 		background-size: 39px !important;
  214. 	}
  215. 	.navigation-bar__profile {
  216. 		margin-left: 10px !important;
  217. 	}
  218. 	.navigation-bar a {
  219. 		font-weight: 400;
  220. 		font-size: 15px;
  221. 		color: var(--color-text-muted);
  222. 	}
  223. 	.navigation-bar a strong {
  224. 		font-weight: 700;
  225. 		font-size: 15px;
  226. 		color: var(--color-text);
  227. 	}
  228. 	.navigation-bar__actions {
  229. 		margin-right: 5px;
  230. 	}
  231. 	
  232. 	
  233. 	.reply-indicator {
  234. 		background-color: var(--color-primary);
  235. 		color: var(--color-text) !important;
  236. 		padding: 0 !important;
  237. 		border: var(--border);
  238. 		border-radius: 16px;
  239. 	}
  240. 	.reply-indicator__header {
  241. 		border-bottom: var(--border);
  242. 		padding: 10px;
  243. 	}
  244. 	.reply-indicator__display-name {
  245. 		color: var(--color-text) !important;
  246. 	}
  247. 	.reply-indicator__display-name .account__avatar {
  248. 		width: 24px !important;
  249. 		height: 24px !important;
  250. 		background-size: 24px !important;
  251. 	}
  252. 	.reply-indicator__content {
  253. 		color: white !important;
  254. 		padding: 0 10px;
  255. 		padding-bottom: 5px;
  256. 		font-size: 14px;
  257. 	}
  258. 	.attachment-list.compact {
  259. 		padding: 10px;
  260. 		padding-top: 0;
  261. 		margin-top: -5px;
  262. 		padding-bottom: 5px;
  263. 	}
  264. 	
  265. 	.compose-form {
  266. 		padding-top: 0 !important;
  267. 	}
  268. 	.compose-form__warning {
  269. 		border: var(--border) !important;
  270. 		border-radius: 16px !important;
  271. 		padding: 10px !important;
  272. 		background-color: var(--color-primary) !important;
  273. 		color: var(--color-text) !important;
  274. 		box-shadow: none !important;
  275. 	}
  276. 	.compose-form__warning a {
  277. 		color: var(--theme) !important;
  278. 	}
  279. 	.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea, .compose-form__modifiers, .compose-form__buttons-wrapper, .compose-form__modifiers {
  280. 		background-color: var(--color-secondary) !important;
  281. 		color: var(--color-text) !important;
  282. 	}
  283. 	.compose-form__modifiers > div:not(.compose-form__upload-wrapper) {
  284. 		margin: 10px;
  285. 		border: var(--border) !important;
  286. 		border-radius: 16px;
  287. 	}
  288. 	.compose-form__uploads-wrapper:not(:empty) {
  289. 		border: var(--border);
  290. 		border-radius: 16px;
  291. 		overflow: hidden;
  292. 		padding: 0 !important;
  293. 		margin: 10px !important;
  294. 		grid-gap: 4px;
  295. 	}
  296. 	.compose-form__upload {
  297. 		margin: 0 !important;
  298. 	}
  299. 	.compose-form__poll-wrapper, .poll__footer {
  300. 		border: none !important;
  301. 	}
  302. 	.compose-form__autosuggest-wrapper {
  303. 		border-radius: 16px 16px 0 0 !important;
  304. 	}
  305. 	.compose-form__buttons-wrapper {
  306. 		border-radius: 0 0 16px 16px !important;
  307. 		border-top: var(--border);
  308. 	}
  309. 	.compose-form__publish-button-wrapper button {
  310. 		font-size: 15px !important;
  311. 		font-weight: 700;
  312. 		min-height: 39px;
  313. 		text-transform: capitalize;
  314. 	}
  315. 	.autosuggest-textarea__suggestions {
  316. 		background-color: var(--color-primary) !important;
  317. 		color: var(--color-text) !important;
  318. 		font-size: 15px !important;
  319. 		line-height: 1.3125 !important;
  320. 		box-shadow: var(--shadow) !important;
  321. 		border-radius: 4px !important;
  322. 		padding: 0 !important;
  323. 	}
  324. 	.autosuggest-textarea__suggestions__item {
  325. 		padding: 10px 15px !important;
  326. 		border-radius: 0 !important;
  327. 		border-bottom: var(--border);
  328. 	}
  329. 	.autosuggest-textarea__suggestions__item .display-name bdi {
  330. 		font-weight: 700;
  331. 	}
  332. 	.compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover {
  333. 		background-color: var(--color-hover) !important;
  334. 	}
  335. 	
  336. 	.getting-started__footer {
  337. 		font-size: 13px;
  338. 		line-height: 19.6833px;
  339. 		font-weight: 400;
  340. 	}
  341. 	.getting-started__footer a {
  342. 		color: var(--color-text-muted);
  343. 	}
  344. 	
  345. 	/*** MAIN SECTION ***/
  346. 	.columns-area__panels__main {
  347. 		padding: 0;
  348. 		margin: 0 20px;
  349. 		width: var(--column-width);
  350. 		max-width: calc(100vw - 17px);
  351. 		border: var(--border);
  352. 		border-top-width: 0;
  353. 		border-bottom-width: 0;
  354. 		min-height: 100vh;
  355. 	}
  356. 	.column > .scrollable, .search-results {
  357. 		background: transparent;
  358. 		padding-bottom: calc(100vh - 56px);
  359. 	}
  360. 	.tabs-bar__wrapper {
  361. 		padding-top: 0 !important;
  362. 		font-weight: 800;
  363. 		border-bottom: var(--border);
  364. 		background-color: var(--color-primary) !important;
  365. 	}
  366. 	.tabs-bar {
  367. 		position: fixed;
  368. 		bottom: 0;
  369. 		max-width: calc( var(--column-width) - 2px );
  370. 		border-top: var(--border);
  371. 		margin-bottom: 0 !important;
  372. 		background-color: var(--color-primary) !important;
  373. 	}
  374. 	.tabs-bar__link {
  375. 		border-bottom: none !important;
  376. 		color: var(--color-text);
  377. 	}
  378. 	.tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
  379. 		background-color: var(--color-hover) !important;
  380. 	}
  381. 	.tabs-bar__link.active {
  382. 		border-bottom: 2px solid var(--theme) !important;
  383. 	}
  384. 	.tabs-bar__wrapper button {
  385. 		font-size: 19px;
  386. 		background: transparent !important;
  387. 	}
  388. 	.floating-action-button {
  389. 		bottom: 60px;
  390. 	}
  391. 	
  392. 	.column-header, .notification__filter-bar {
  393. 		background-color: var(--color-primary) !important;
  394. 		height: 53px;
  395. 	}
  396. 	.column-header__buttons {
  397. 		height: 53px;
  398. 	}
  399. 	.column-header__buttons button {
  400. 		background-color: transparent !important;
  401. 	}
  402. 	.column-header__icon {
  403. 		display: none;
  404. 	}
  405. 	
  406. 	/* Status */
  407. 	article, .scrollable > div > div[tabindex="-1"], .search-results > div > div:not(.trends__header), .entry > .status  {
  408. 		transition: background .2s;
  409. 	}
  410. 	article:hover, .scrollable > div > div[tabindex="-1"]:hover, .search-results > div > div:hover, .entry > .status:hover, .focusable:focus,
  411. 	.item-list .column-link:hover {
  412. 		background: var(--color-hover) !important;
  413. 		background-color: var(--color-hover) !important;
  414. 	}
  415. 	.status {
  416. 		padding: 8px 15px !important;
  417. 		padding-left: 72px !important;
  418. 		border-bottom: var(--border) !important;
  419. 	}
  420. 	.status__info {
  421. 		display: flex;
  422. 	}
  423. 	.status__relative-time {
  424. 		order: 2;
  425. 		flex-grow: 1;
  426. 		display: flex;
  427. 		color: var(--color-text-muted);
  428. 	}
  429. 	.status__relative-time::before {
  430. 		content: "·";
  431. 		margin-right: 5px;
  432. 		margin-left: 5px;
  433. 	}
  434. 	.status__display-name {
  435. 		padding-right: 0 !important;
  436. 	}
  437. 	.status__display-name strong {
  438. 		color: var(--color-text) !important;
  439. 	}
  440. 	.status__visibility-icon {
  441. 		order: 2;
  442. 		margin-left: auto;
  443. 	}
  444. 	.status__prepend {
  445. 		padding-top: 8px !important;
  446. 	}
  447. 	.status__prepend > span, .status__prepend > span strong  {
  448. 		font-size: 13px;
  449. 		line-height: 1.3125;
  450. 		font-weight: 700;
  451. 		color: var(--color-text-muted) !important;
  452. 	}
  453. 	.columns-area--mobile .status__avatar {
  454. 		top: 10px;
  455. 		left: 15px;
  456. 		height: 49px;
  457. 		width: 49px;
  458. 	}
  459. 	.status .account__avatar {
  460. 		height: 49px !important;
  461. 		width: 49px !important;
  462. 		background-size: 49px !important;
  463. 	}
  464. 	.display-name strong {
  465. 		font-weight: 700 !important;
  466. 		line-height: 1.3125;
  467. 		font-size: 15px;
  468. 	}
  469. 	.display-name__account {
  470. 		font-size: 15px;
  471. 		line-height: 1.3125;
  472. 		color: var(--color-text-muted);
  473. 	}
  474. 	.status__content {
  475. 		color: var(--color-text);
  476. 		margin-left: -75px;
  477. 		padding-left: 75px;
  478. 		margin-right: -15px;
  479. 		padding-right: 15px;
  480. 	}
  481. 	.status__content a {
  482. 		color: var(--theme);
  483. 	}
  484. 	a.status-card {
  485. 		border: var(--border);
  486. 		transition: background-color .2s;
  487. 	}
  488. 	a.status-card:hover {
  489. 		background-color: var(--color-hover) !important;
  490. 	}
  491. 	.media-gallery, .video-player, .status-card, .audio-player {
  492. 		border-radius: 16px;
  493. 		border: var(--border) !important;
  494. 	}
  495. 	.audio-player .video-player__seek {
  496. 		margin: 10px 15px;
  497. 	}
  498. 	.status__action-bar {
  499. 		justify-content: space-between;
  500. 		max-width: calc( var(--column-width) - 175px )
  501. 	}
  502. 	.status__action-bar > * {
  503. 		margin-right: 0;
  504. 	}
  505. 	.detailed-status__display-name .display-name {
  506. 		margin-top: 3px;
  507. 	}
  508. 	.detailed-status__display-name strong {
  509. 		color: var(--color-text);
  510. 	}
  511. 	.detailed-status, .detailed-status__action-bar {
  512. 		background: var(--color-primary);
  513. 		border-top: var(--border);
  514. 		border-bottom: var(--border);
  515. 	}
  516. 	.detailed-status .status__content {
  517. 		font-size: 23px !important;
  518. 		line-height: 1.3125;
  519. 	}
  520. 	.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
  521. 		color: var(--color-text);
  522. 		background: transparent;
  523. 		border: var(--border);
  524. 		font-weight: 600;
  525. 		padding: 0 6px !important;
  526. 		font-size: 11px;
  527. 		text-decoration: none !important;
  528. 		text-transform: uppercase;
  529. 		margin-top: -2px;
  530. 	}
  531. 	.status__content__read-more-button {
  532. 		margin-top: 6px;
  533. 		padding: 0 !important;
  534. 		padding-left: 75px !important;
  535. 		margin-left: -75px;
  536. 		border-radius: 0 !important;
  537. 		width: calc(100% + 90px);
  538. 		height: 40px;
  539. 		text-decoration: none !important;
  540. 		font-size: 15px !important;
  541. 		line-height: 1.3125 !important;
  542. 		font-weight: 400 !important;
  543. 		text-align: left !important;
  544. 		transition: background-color .2s;
  545. 	}
  546. 	.status__content__read-more-button:hover {
  547. 		background-color: var(--color-hover);
  548. 	}
  549. 	
  550.  
  551. 	
  552. 	
  553. 	/* Account Header */
  554. 	.account__header > div, .account__section-headline {
  555. 		background-color: var(--color-primary) !important;
  556. 	}
  557. 	.account__header__image {
  558. 		height: 100%;
  559. 	}
  560. 	.account__header__image img {
  561. 		height: calc((1 / 3) * 600px  );
  562. 	}
  563. 	.account__header__tabs .account__avatar, .account__header__tabs .avatar {
  564. 		width: 135px !important;
  565. 		height: 135px !important;
  566. 		background-size: 135px !important;
  567. 	}
  568. 	.account__header__tabs .avatar {
  569. 		margin-top: -40px;
  570. 	}
  571. 	.account__header__tabs .account__avatar {
  572. 		border: 4px solid var(--color-primary) !important;
  573. 		border-radius: 100%;
  574. 	}
  575. 	.account__header__bar {
  576. 		border-bottom: none;
  577. 	}
  578. 	.account__header__fields {
  579. 		border: none !important;
  580. 		padding: 0 14px !important;
  581. 		display: flex;
  582. 		flex-wrap: wrap;
  583. 	}
  584. 	.account__header__bio .account__header__fields a {
  585. 		color: var(--theme);
  586. 	}
  587. 	.account__header__fields dl {
  588. 		margin: 4px;
  589. 		width: auto !important;
  590. 		border-radius: 100px;
  591. 		border: var(--border);
  592. 		border-bottom: var(--border) !important;
  593. 	}
  594. 	.account__header__fields dl > * {
  595. 		padding: 8px 14px;
  596. 		padding-right: 8px;
  597. 		width: auto !important;
  598. 		flex: none;
  599. 	}
  600. 	.account__header__fields dt {
  601. 		background: none;
  602. 		color: var(--color-text) !important;
  603. 	}
  604. 	.account__header__fields dd {
  605. 		padding: 8px 14px;
  606. 		padding-left: 0;
  607. 		color: var(--color-text-muted);
  608. 	}
  609. 	.account__header__fields .verified {
  610. 		border: none;
  611. 		border-radius: 100px !important;
  612. 		padding-left: 14px;
  613. 	}
  614. 	.account__header__account-note {
  615. 		border: none !important;
  616. 		padding-top: 10px;
  617. 	}
  618. 	.account__header__account-note label {
  619. 		display: none;
  620. 	}
  621. 	.account__header__content {
  622. 		padding-top: 8px !important;
  623. 		color: var(--color-text) !important;
  624. 	}
  625. 	.account__header__extra__links a {
  626. 		color: var(--color-text-muted);
  627. 	}
  628. 	.account__header__extra__links strong span {
  629. 		color: var(--color-text) !important;
  630. 	}
  631. 	.account__header__extra__links span {
  632. 		color: var(--color-text-muted);
  633. 	}
  634. 	.account__section-headline {
  635. 		border-bottom: var(--border);
  636. 	}
  637. 	.account__section-headline a, .notification__filter-bar button {
  638. 		background: 0;
  639. 		border-radius: 0 !important;
  640. 		font-weight: 700;
  641. 	}
  642. 	.account__section-headline a.active, .notification__filter-bar button.active {
  643. 		border-bottom: 2px solid var(--theme);
  644. 		color: var(--theme);
  645. 	}
  646. 	.account__section-headline a.active::before, .account__section-headline a.active::after,
  647. 	.notification__filter-bar button::before, .notification__filter-bar button::after {
  648. 		content: none !important;
  649. 	}
  650. 	
  651. 	/* LISTS PAGE */
  652. 	.item-list .column-link {
  653. 		border-radius: 0 !important;
  654. 		font-size: 15px;
  655. 		padding: 15px 20px !important;
  656. 		height: auto !important;
  657. 		background: var(--color-primary);
  658. 		border-bottom: var(--border);
  659. 	}
  660. 	.item-list .column-link__icon {
  661. 		margin-right: 15px;
  662. 	}
  663. 	.item-list .column-link__icon::before, .item-list .column-link__icon {
  664. 		height: unset !important;
  665. 		width: unset !important;
  666. 	}
  667. 	.column-back-button {
  668. 		border-bottom: var(--border);
  669. 		border-radius: 0 !important;
  670. 	}
  671. 	
  672. 	/* Other */
  673. 	.load-more {
  674. 		border-radius: 0 !important;
  675. 	}
  676. 	.load-more:hover {
  677. 		background-color: var(--color-hover) !important;
  678. 	}
  679. 	
  680. 	
  681. 	/*** RIGHT SIDEBAR ***/
  682. 	.navigation-panel {
  683. 		margin: 0 !important;
  684. 		padding-top: 20px;
  685. 		max-height: calc(100vh - 20px);
  686. 		scrollbar-color: var(--color-secondary) var(--color-primary) !important;
  687. 		overflow-x: hidden;
  688. 	}
  689. 	.column-link {
  690. 		font-size: 19px;
  691. 		font-weight: 700;
  692. 		padding: 8.5px 10px;
  693. 		line-height: normal;
  694. 		border-radius: 100px;
  695. 		color: var(--color-text);
  696. 		white-space: nowrap;
  697. 		background-color: transparent;
  698. 		transition: background-color .2s;
  699. 	}
  700. 	.column-link span {
  701. 		margin: 0 15px 0 20px;
  702. 		margin-left: 0 !important;
  703. 		color: var(--color-text) !important;
  704. 		line-height: 1.3125;
  705. 		position: relative;
  706. 	}
  707. 	.icon-with-badge__badge {
  708. 		left: 12px !important;
  709. 		top: -6px !important;
  710. 		border-radius: 100px;
  711. 	}
  712. 	.column-link:hover span, .column-link:hover .column-link__icon, .column-link.active span {
  713. 		color: var(--theme) !important;
  714. 	}
  715. 	.column-link span::before {
  716. 		content: "";
  717. 		position: absolute;
  718. 		top: -10px;
  719. 		left: -55px;
  720. 		bottom: -10px;
  721. 		right: -20px;
  722. 		border-radius: 100px;
  723. 		transition: background-color .2s;
  724. 	}
  725. 	.column-link:hover span::before {
  726. 		background-color: var(--theme-transparent);
  727. 	}
  728. 	.column-link__icon {
  729. 		margin-right: 20px !important;
  730. 	}
  731. 	.column-link.active .column-link__icon {
  732. 		color: var(--theme);
  733. 	}
  734. 	.column-link__icon, .column-link__icon::before {
  735. 		width: 26.25px;
  736. 		height: 26.25px;
  737. 		display: inline-block;
  738. 		margin-right: 0;
  739. 	}
  740. 	
  741. 	.getting-started__trends {
  742. 		background-color: var(--color-secondary);
  743. 		border-radius: 16px;
  744. 		margin: 15px 0;
  745. 	}
  746. 	.getting-started__trends h4 {
  747. 		text-transform: capitalize;
  748. 		padding: 10px 15px;
  749. 		border-bottom: none;
  750. 		line-height: 1.3125;
  751. 		font-weight: 800;
  752. 		color: var(--color-text);
  753. 	}
  754. 	.getting-started__trends .trends__item {
  755. 		padding: 10px 15px;
  756. 		border-top: var(--border);
  757. 	}
  758. 	.getting-started__trends .trends__item a {
  759. 		font-weight: 700;
  760. 		color: var(--color-text);
  761. 	}
  762. 	
  763. 	/*** POPUPS ***/
  764. 	.actions-modal, .block-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal,
  765. 	.block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
  766. 		background-color: var(--color-primary);
  767. 		color: var(--color-text) !important;
  768. 	}
  769. 	.block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar {
  770. 		border-top: var(--border);
  771. 	}
  772. 	
  773. 	
  774. 	.dropdown-menu, .privacy-dropdown__dropdown {
  775. 		box-shadow: var(--shadow);
  776. 		background-color: var(--color-primary);
  777. 	}
  778. 	.dropdown-menu__arrow.bottom {
  779. 		border-bottom-color: var(--color-primary) !important;
  780. 	}
  781. 	.dropdown-menu__arrow.top {
  782. 		border-top-color: var(--color-primary) !important;
  783. 	}
  784. 	.dropdown-menu__item a, .privacy-dropdown__option {
  785. 		background-color: var(--color-primary);
  786. 		color: var(--color-text);
  787. 		font-size: 15px;
  788. 		line-height: 1.3125;
  789. 		padding: 15px;
  790. 		font-weight: 400;
  791. 		transition: background-color .2s;
  792. 	}
  793. 	.privacy-dropdown__option__content strong {
  794. 		color: var(--color-text) !important
  795. 	}
  796. 	.dropdown-menu__item a:hover, .privacy-dropdown__option:hover {
  797. 		background-color: var(--color-hover) !important;
  798. 	}
  799. 	.privacy-dropdown__option.active {
  800. 		background-color: var(--theme) !important;
  801. 	}
  802. 	.dropdown-menu__separator {
  803. 		border-bottom: var(--border);
  804. 		margin: 2px 0;
  805. 	}
  806. 	
  807. 	
  808. 	.emoji-mart {
  809. 		width: 311px !important;
  810. 	}
  811. 	.emoji-mart-scroll {
  812. 		max-height: 300px !important;
  813. 		height: 100% !important;
  814. 		padding: 10px !important;
  815. 	}
  816. 	.emoji-mart-category-label {
  817. 		margin: 10px -10px;
  818. 		top: -10px !important;
  819. 	}
  820. 	.emoji-mart-category:nth-child(2) {
  821. 		margin-top: -20px !important
  822. 	}
  823. 	.emoji-picker-dropdown__menu, .emoji-mart-search, .emoji-mart-scroll, .emoji-mart-category-label span, .emoji-mart-bar {
  824. 		background-color: var(--color-primary) !important;
  825. 		color: var(--color-text) !important;
  826. 	}
  827. 	.emoji-mart-bar {
  828. 		border-bottom: var(--border);
  829. 	}
  830. 	.emoji-mart-anchor-selected {
  831. 		color: var(--theme) !important;
  832. 	}
  833. 	.emoji-mart-anchor-bar {
  834. 		background-color: var(--theme) !important;
  835. 	}
  836. 	.emoji-mart-category-label span {
  837. 		font-size: 19px;
  838. 		line-height: 1.3125;
  839. 		font-weight: 700;
  840. 		border-top: var(--border);
  841. 		border-bottom: var(--border);
  842. 		padding: 10px 15px;
  843. 	}
  844. 	
  845. 	
  846. 	.search-popout {
  847. 		margin: 10px;
  848. 		border-radius: 4px;
  849. 		box-shadow: var(--shadow);
  850. 	}
  851. 	.search-popout, .search-popout em {
  852. 		background-color: var(--color-primary) !important;
  853. 		color: var(--color-text) !important;
  854. 	}
  855. 	
  856. 	/*** ADVANCED VIEW ***/
  857. 	.drawer {
  858. 		background-color: var(--color-primary);
  859. 		margin: 0 !important;
  860. 		padding: 0 !important;
  861. 		padding-top: 10px !important;
  862. 		border-right: var(--border);
  863. 	}
  864. 	.drawer__header {
  865. 		margin: 10px;
  866. 		margin-top: 0;
  867. 		border-radius: 100px;
  868. 		overflow: hidden;
  869. 		padding: 0 10px;
  870. 		background-color: var(--color-secondary);
  871. 	}
  872. 	.drawer__inner__mastodon {
  873. 		background-color: var(--color-primary);
  874. 		
  875. 	}
  876. 	.layout-multiple-columns .column {
  877. 		border-right: var(--border);
  878. 		margin: 0 !important; 
  879. 		padding: 0 !important;
  880. 		padding-top: 5px;
  881. 	}
  882. 	.layout-multiple-columns .column:last-of-type {
  883. 		border-right: none !important;
  884. 	}
  885. 	.layout-multiple-columns .compose-form .autosuggest-textarea__textarea {
  886. 		border-radius: 16px !important;
  887. 	}
  888. 	
  889. 	.drawer__inner {
  890. 		background-color: var(--color-primary) !important;
  891. 	}
  892. 	
  893. 	
  894. 	.layout-multiple-columns .getting-started__trends {
  895. 		margin: 10px;
  896. 	}
  897. 	
  898. }