new whatsapp css

Download Raw Clone


  1. :root {
  2. --dark: #272C35;
  3. --darker: #1F232A;
  4. --light: #D1D1D1;
  5. --lighter: #E9E9E9;
  6. --accent: #7289DA;
  7. --icon: #E1E1E1;
  8. --shadow: rgba(0, 0, 0, 0.10);
  9. --mred: #A3525B;
  10. --mgreen: #70A352;
  11. --mblue: #527AA3;
  12. --hover-delay: 0.8s;
  13. --image: url(https://media.discordapp.net/attachments/310799529161129984/417408747812552715/zilesanamin.jpg);
  14. --emojiOpacity: 0.75;
  15. --version: "WhatsApp by Mew v1.5.1";
  16. --message: "Updated on 27th of September. ";
  17. --changes: "See the changelog at: https://github.com/vednoc/onyx/releases";
  18. }
  19. /* Body reset. */
  20. body {
  21. font-family: '/*[[customFonts]]*/', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Lucida Grande', 'Arial', 'Ubuntu', 'Cantarell', 'Fira Sans', sans-serif;
  22. background: none;
  23. background-color: var(--dark);
  24. }
  25. /* Scrollbar track. */
  26. *::-webkit-scrollbar-track {
  27. background-color: var(--shadow);
  28. }
  29. /* Scrollbar thumb. */
  30. *::-webkit-scrollbar-thumb {
  31. background-color: var(--accent);
  32. }
  33. * {
  34. scrollbar-width: thin;
  35. scrollbar-color: var(--accent) var(--shadow);
  36. }
  37. /* Highlight selection. */
  38. ::selection {
  39. color: var(--light) !important;
  40. background-color: var(--accent) !important;
  41. }
  42. ::-moz-selection {
  43. color: var(--light) !important;
  44. background-color: var(--accent) !important;
  45. }
  46. /* Input placeholders. */
  47. ::placeholder {
  48. color: var(--lighter) !important;
  49. }
  50. ::-moz-placeholder {
  51. color: var(--lighter) !important;
  52. }
  53. ::-webkit-input-placeholder {
  54. color: var(--lighter) !important;
  55. }
  56. /* Progress. */
  57. progress[value]::-webkit-progress-bar {
  58. background: var(--darker);
  59. }
  60. /* Value. */
  61. progress[value]::-webkit-progress-value {
  62. background: var(--accent);
  63. }
  64. progress {
  65. background: var(--darker);
  66. }
  67. ::-moz-progress-bar {
  68. background: var(--accent) !important;
  69. }
  70. /* App wrapper. */
  71. #app .app {
  72. background: none;
  73. background-color: var(--dark);
  74. }
  75. /* Log-in page. */
  76. .landing-wrapper::before {
  77. opacity: 0.6;
  78. background-color: var(--accent) !important;
  79. }
  80. .landing-window {
  81. border-radius: 4px !important;
  82. border: 1px solid var(--shadow);
  83. box-shadow: 0 8px 32px 0 var(--shadow) !important;
  84. background-color: var(--darker) !important;
  85. }
  86. .landing-main+div {
  87. background-color: var(--darker) !important;
  88. }
  89. .landing-main+div img:not(:hover) {
  90. opacity: 0.3;
  91. }
  92. /* Text color. */
  93. .landing-main * {
  94. color: var(--light);
  95. }
  96. /* Reload QR code. */
  97. ._1MOym {
  98. background-color: var(--darker) !important;
  99. }
  100. ._3PxOr rect {
  101. fill: var(--dark) !important;
  102. }
  103. /* Fix QR code. */
  104. .landing-wrapper div[data-ref] {
  105. border-radius: 0;
  106. filter: contrast(150%) !important;
  107. outline: 4px solid white !important;
  108. }
  109. /* Loader. */
  110. #startup svg>circle {
  111. stroke: var(--lighter) !important;
  112. }
  113. /* Logo colors. */
  114. span._3PxOr svg path:nth-child(1) {
  115. fill: var(--dark) !important;
  116. }
  117. /* Landing page. */
  118. .app .iFKgT {
  119. border: none;
  120. background-color: var(--dark) !important;
  121. }
  122. /* Image. */
  123. .app .iFKgT [data-asset-intro-image] {
  124. max-width: 200px;
  125. max-height: 200px;
  126. border-radius: 50%;
  127. filter: opacity(/*[[emojiOpacity]]*/
  128. );
  129. transition: opacity 1s ease !important;
  130. }
  131. /* Text color. */
  132. .app .iFKgT * {
  133. color: var(--light);
  134. }
  135. /* Accent bar. */
  136. .app .iFKgT::after {
  137. border-top-color: var(--accent) !important;
  138. }
  139. /* Hide the text. */
  140. .iFKgT ._3mkas {
  141. font-size: 0px;
  142. }
  143. /** Theme note. */
  144. .app .iFKgT ._3mkas::before {
  145. display: block;
  146. margin-bottom: -20px;
  147. font-size: 16px;
  148. content: var(--message) var(--changes) !important;
  149. }
  150. /** Theme info. */
  151. .app .iFKgT ._3mkas::after {
  152. display: block;
  153. margin-top: 10px;
  154. padding-top: 10px;
  155. font-size: 16px;
  156. content: var(--version) !important;
  157. border-top: 1px solid var(--darker);
  158. }
  159. /* Left drawer. */
  160. #app .app #side {
  161. background-color: var(--darker);
  162. }
  163. /* Chat list. */
  164. #side>header {
  165. background-color: var(--darker) !important;
  166. }
  167. /* Enable notifications. */
  168. #side ._2GB6m {
  169. background-color: var(--accent) !important;
  170. }
  171. /* Low battery. */
  172. #side ._2t3oV {
  173. background-color: var(--mred) !important;
  174. }
  175. /* Phone not connected. */
  176. #side ._1puWZ {
  177. background-color: var(--mred) !important;
  178. }
  179. /* Text color. */
  180. #side ._2GB6m *, #side ._1puWZ * {
  181. color: var(--lighter);
  182. }
  183. /* Global -> Search. */
  184. ._2HS9r {
  185. border-bottom: 0px solid var(--dark);
  186. background-color: var(--darker) !important;
  187. background-color: transparent !important;
  188. }
  189. /* Label background. */
  190. .ZP8RM label, .ZP8RM._19OGD {
  191. border: 0px solid var(--dark);
  192. background-color: var(--dark) !important;
  193. }
  194. /* Input element. */
  195. .ZP8RM ._183ES, .ZP8RM label input {
  196. color: var(--light);
  197. background-color: transparent;
  198. }
  199. .ZP8RM::after, .ZP8RM>div::after {
  200. border-color: var(--darker) !important;
  201. background-color: var(--dark) !important;
  202. }
  203. /* New group and group info buttons. */
  204. ._1w-mX, ._70TS5, ._11p3Q, .r7sRK, ._8-yzK {
  205. /* box-shadow: 0 0 8px -1px var(--shadow) !important; */
  206. color: var(--accent) !important;
  207. background-color: transparent !important;
  208. }
  209. /* Hide borders. */
  210. ._2DxRd, ._39cGk {
  211. border-color: var(--shadow) !important;
  212. }
  213. /* Input text color. */
  214. ._44uDJ {
  215. color: var(--light) !important;
  216. }
  217. /* Search results. */
  218. #side ._1AKfk {
  219. color: var(--accent);
  220. background-color: var(--dark);
  221. }
  222. /* Matching results. */
  223. #side .matched-text {
  224. color: var(--accent) !important;
  225. }
  226. /* Contacts wrapper. */
  227. #pane-side, ._11GZy ._2UaNq {
  228. background-color: transparent !important;
  229. }
  230. /* Contacts. */
  231. ._2UaNq, ._11GZy ._26JG5 {
  232. transition: 200ms ease-in-out;
  233. background-color: transparent !important;
  234. }
  235. /* On event. */
  236. ._2UaNq._3mMX1, ._2UaNq:hover {
  237. background-color: var(--dark) !important;
  238. }
  239. /* Text color. */
  240. ._2UaNq *:not(#z) {
  241. color: var(--light) !important;
  242. }
  243. /* Borders. */
  244. ._2UaNq::after, ._2WP9Q {
  245. border-color: transparent !important;
  246. }
  247. /* Avatar wrapper background. */
  248. ._3RWII {
  249. box-shadow: 0 0 8px -1px var(--shadow) !important;
  250. background-color: transparent !important;
  251. }
  252. /* New message indicator. */
  253. #side .P6z4j {
  254. color: var(--lighter) !important;
  255. background-color: var(--accent) !important;
  256. }
  257. /* Settings. */
  258. ._11GZy, ._1KDYa {
  259. background-color: var(--darker) !important;
  260. }
  261. /* Header color. */
  262. ._11GZy header, ._1KDYa header {
  263. min-height: 50px;
  264. height: auto;
  265. background-color: var(--darker) !important;
  266. }
  267. /* Send contacts. #42 */
  268. .WOXAS {
  269. background-color: transparent !important;
  270. }
  271. /* Footer. */
  272. ._21bWq, ._22oFl {
  273. background-color: var(--accent) !important;
  274. }
  275. /* Reset header height. */
  276. ._11GZy header>div:first-child {
  277. padding: 12px 0 !important;
  278. height: auto;
  279. }
  280. /* Reset header title in left/right drawers. */
  281. ._11GZy ._1xGbt {
  282. margin-top: 2px !important;
  283. font-size: 16px;
  284. }
  285. /* Transparent sections. */
  286. ._11GZy ._1CRb5, ._1KDYa ._2LSbZ {
  287. box-shadow: none !important;
  288. background-color: transparent !important;
  289. }
  290. /* Highlighted sections. */
  291. ._11GZy ._3hhmj ._1CkkN {
  292. background-color: var(--darker) !important;
  293. }
  294. /* Change profile picture. */
  295. ._11GZy .WX_XW, ._11GZy ._2Lbqu, ._1JS2G {
  296. background-color: rgba(0, 0, 0, 0.5) !important;
  297. }
  298. /* Text color. */
  299. ._11GZy * {
  300. color: var(--light);
  301. }
  302. /* Input element. */
  303. ._5UNoc ._3hnO5 {
  304. border-color: var(--accent) !important;
  305. }
  306. /* Wrapper background. */
  307. ._3979j {
  308. background-color: transparent !important;
  309. }
  310. /* Take a new profile picture. */
  311. ._2HyTU, ._22aOT {
  312. background-color: var(--darker) !important;
  313. }
  314. /* Confirm button. */
  315. ._2HyTU ._1g8sv, ._22aOT ._1g8sv {
  316. box-shadow: 0 2px 4px 0 var(--shadow) !important;
  317. background-color: var(--accent) !important;
  318. }
  319. /* Zoom in/out. */
  320. ._1DKwn {
  321. box-shadow: 0 2px 4px 0 var(--shadow) !important;
  322. background-color: var(--dark) !important;
  323. }
  324. /* Option/select elements. */
  325. select {
  326. color: var(--light);
  327. border-color: var(--accent);
  328. }
  329. select option {
  330. background-color: var(--dark);
  331. }
  332. /* Archived chat image. */
  333. ._2fq0t ._2Lev2 {
  334. background-color: var(--dark) !important;
  335. }
  336. /* Body. */
  337. ._2fq0t ._2sNbV ._1CkkN, ._2fq0t ._2sNbV ._2EXPL {
  338. background-color: transparent;
  339. }
  340. /* On event. TODO: Fixed, but it might still overlap somewhere. */
  341. .k1feT ._2sNbV>._1CkkN:hover, ._2fq0t ._2sNbV ._1CkkN:hover {
  342. background-color: var(--dark);
  343. }
  344. /* New group. */
  345. ._2fq0t ._39pS- {
  346. background-color: transparent !important;
  347. }
  348. /* Header. */
  349. ._2fq0t ._1AKfk {
  350. background-color: var(--darker) !important;
  351. }
  352. /* On event. */
  353. .k1feT ._2fq0t ._2EXPL._1f1zm, .k1feT ._2fq0t ._2EXPL:hover {
  354. background-color: var(--dark) !important;
  355. }
  356. /* Search element */
  357. ._66JgU ._3_3Rs {
  358. border-bottom: none !important;
  359. }
  360. ._66JgU ._3_3Rs input, ._66JgU ._3_3Rs ::placeholder {
  361. color: var(--lighter) !important;
  362. }
  363. /** Context/dropdown menu. */
  364. ._2hHc6 {
  365. background-color: var(--darker) !important;
  366. box-shadow: 0 4px 16px 0 var(--shadow) !important;
  367. }
  368. ._2hHc6 li:hover, ._2hHc6 li:hover div {
  369. color: var(--accent) !important;
  370. background-color: var(--dark) !important;
  371. }
  372. ._2hHc6 div, ._1ArIP div {
  373. color: var(--light);
  374. }
  375. /* Middle drawer. */
  376. #main {
  377. background-color: var(--dark);
  378. }
  379. /* Fix parent-element. #43 */
  380. ._1ays2 {
  381. display: flex !important;
  382. flex-direction: column !important;
  383. }
  384. /* Doodle background. TODO: Plans for the future. */
  385. /*[[doodles]]*/
  386. /* Main -> Group description. */
  387. ._3jzsh {
  388. background-color: var(--darker) !important;
  389. }
  390. /* Text colors. */
  391. ._3jzsh ._3GIEC, ._3jzsh ._6xQdq {
  392. color: var(--lighter) !important;
  393. }
  394. /* Jump to present button. */
  395. ._3KRbU {
  396. box-shadow: 0 4px 8px 2px var(--shadow) !important;
  397. background-color: var(--darker) !important;
  398. }
  399. /* Number of messages. */
  400. ._3KRbU>span>span {
  401. background-color: var(--accent) !important;
  402. }
  403. /* Header. */
  404. #main header {
  405. border: none;
  406. background-color: var(--dark);
  407. }
  408. /* Text color. */
  409. #main header ._1WBXd * {
  410. color: var(--light);
  411. }
  412. /* Header text color. #22 */
  413. #main>header>div span[title] {
  414. color: var(--light);
  415. }
  416. /* Header separator. */
  417. #main>header::after {
  418. border-bottom-color: var(--darker);
  419. background-color: transparent;
  420. }
  421. /* Footer. */
  422. #main footer {
  423. border-top: 1px solid var(--darker);
  424. background-color: var(--darker);
  425. }
  426. /* Input wrapper. */
  427. #main footer>div {
  428. color: var(--light);
  429. border: none;
  430. /* border-bottom: 2px solid var(--dark); */
  431. background-color: var(--dark);
  432. }
  433. /* Input element. */
  434. #main footer>div:nth-child(1)>div:nth-child(2) {
  435. border: none !important;
  436. color: var(--light);
  437. background-color: var(--darker) !important;
  438. }
  439. /* Unknown contact. */
  440. ._2Pown {
  441. color: var(--light) !important;
  442. border-color: var(--darker) !important;
  443. background-color: var(--dark) !important;
  444. box-shadow: 0 -1px 0 0 inset var(--darker) !important;
  445. }
  446. /* Buttons. */
  447. ._2ZZub {
  448. color: var(--lighter) !important;
  449. background-color: var(--darker) !important;
  450. }
  451. ._2ZZub:hover {
  452. color: var(--light) !important;
  453. box-shadow: 0 2px 4px 0 var(--shadow) !important;
  454. }
  455. /* Shared contact button colors. */
  456. .Ir_Ne {
  457. color: var(--accent) !important;
  458. }
  459. /* Shared contact text. */
  460. .AVd_p {
  461. color: var(--lighter) !important;
  462. }
  463. /* View contact. */
  464. ._1VwzF {
  465. background-color: transparent !important;
  466. }
  467. /* Hide 'Type a message' once focused. */
  468. ._3FeAD.focused div[style] {
  469. color: transparent !important;
  470. }
  471. /* Placeholder text color. */
  472. ._3FeAD div[style] {
  473. transition: color 0.15s ease;
  474. color: var(--lighter) !important;
  475. }
  476. /* Right drawer. */
  477. /* .app ._3HZor ._2fq0t {
  478. background-color: var(--darker); } */
  479. /* Border-color. */
  480. .app ._3HZor {
  481. border-left-color: transparent !important;
  482. }
  483. /* Header. */
  484. .app ._3HZor header {
  485. background-color: var(--darker);
  486. }
  487. /* Fix header text vertical position. */
  488. .app ._3HZor ._1pYs5 {
  489. margin-top: 4px !important;
  490. }
  491. /* Text color. */
  492. .app ._3HZor header div {
  493. color: var(--light);
  494. }
  495. /* Mute/starred messages. */
  496. ._3_-Si+._3_-Si ._2x2XP {
  497. border-color: var(--darker) !important;
  498. }
  499. /* Group info sections. */
  500. .app ._3HZor ._26JG5, .app ._3HZor ._2UaNq {
  501. /*box-shadow: 0 1px 3px shadow /**/
  502. box-shadow: none;
  503. background-color: transparent;
  504. }
  505. .app ._3HZor ._26JG5:hover {
  506. background-color: var(--dark) !important;
  507. }
  508. /* Fix borders. */
  509. .app ._3HZor ._27Ie2, .app ._3HZor ._26JG5::before {
  510. border-color: transparent !important;
  511. }
  512. /* User's name. */
  513. .app ._3HZor span {
  514. color: var(--light);
  515. }
  516. .app ._3HZor ._23Un5 {
  517. color: var(--mred);
  518. }
  519. /** Username colors in group chat. */
  520. .app [class*="color-"] span {
  521. color: inherit !important;
  522. }
  523. /* Group options. */
  524. .app ._3HZor ._1CRb5 ._2EXPL, .app ._3HZor ._1CRb5 ._1CkkN {
  525. transition: 200ms ease-in-out;
  526. background-color: transparent;
  527. }
  528. /* On event. */
  529. .app ._3HZor ._1CRb5 ._2EXPL._3xj48:hover, .app ._3HZor ._1CRb5 ._1CkkN:hover {
  530. background-color: var(--dark);
  531. }
  532. /* Text color. */
  533. .app ._3HZor ._1CRb5 ._2EXPL * {
  534. color: var(--light);
  535. }
  536. /* Admin color. */
  537. .app ._3HZor .FPZFa {
  538. border-color: var(--accent);
  539. }
  540. /* Search messages. TODO: Apply this to all search elements. */
  541. .a5vst, .a5vst .ZP8RM._19OGD
  542. /*, ._3HZor ._1iMEz._3sdhb*/
  543. {
  544. background-color: var(--darker) !important;
  545. }
  546. /* Input wrapper. */
  547. .a5vst label {
  548. border: 0px solid var(--dark) !important;
  549. background-color: var(--dark) !important;
  550. }
  551. .a5vst .ZP8RM::after {
  552. border: none !important;
  553. background-color: var(--dark) !important;
  554. }
  555. .a5vst label input {
  556. background-color: transparent !important;
  557. }
  558. /* Search messages body. */
  559. .YAPQk {
  560. background-color: var(--darker) !important;
  561. }
  562. /* Matching results. */
  563. ._3HZor .matched-text {
  564. color: var(--accent) !important;
  565. }
  566. /* On event. */
  567. .YAPQk ._1f1zm>._3j7s9, .YAPQk ._3j7s9:hover {
  568. background-color: var(--dark) !important;
  569. }
  570. /* Search messages. */
  571. #pane-side ._2EXPL {
  572. background-color: transparent !important;
  573. }
  574. /* Starred messages. */
  575. ._1WMT2 .tail:not(.PJFFv) {
  576. background-color: var(--dark) !important;
  577. }
  578. /* Borders. */
  579. ._1WMT2::before, ._1WMT2::after {
  580. display: none !important;
  581. }
  582. /* Selected message. */
  583. ._1WMT2._2V_Wj, ._1WMT2._2nA3s, ._1WMT2:hover {
  584. transition: 200ms ease-in-out !important;
  585. background-color: var(--dark) !important;
  586. }
  587. /* Remove tails. */
  588. ._1WMT2 .tail-container {
  589. display: none !important;
  590. }
  591. /* Date text color. */
  592. ._1WMT2 ._2V2qB {
  593. color: var(--lighter) !important;
  594. }
  595. /* Message info. */
  596. #app .app>div:nth-child(2) ._2rGVQ {
  597. background-color: var(--dark) !important;
  598. }
  599. /* Doodle image. */
  600. #app .app>div:nth-child(2) [data-asset-chat-background="true"] {
  601. filter: invert(100%) opacity(0.8) !important;
  602. }
  603. /* Read by. */
  604. #app .app>div:nth-child(2) ._2AJf5, #app .app>div:nth-child(2) ._19xqi {
  605. box-shadow: none !important;
  606. background-color: transparent !important;
  607. }
  608. /* Read by text color. */
  609. #app .app>div:nth-child(2) ._2AJf5 span {
  610. color: var(--accent) !important;
  611. }
  612. /* Forwarded message info. #44 */
  613. ._1NZZN, ._3XHR- {
  614. border-color: var(--dark) !important;
  615. background-color: transparent !important;
  616. box-shadow: none !important;
  617. }
  618. ._1w7vp {
  619. color: var(--light) !important;
  620. }
  621. /* Media/docs/links section. */
  622. ._27U_m, .yrOIH {
  623. border-bottom: 1px solid var(--dark);
  624. background-color: var(--darker) !important;
  625. }
  626. /* Active indicator. */
  627. ._27U_m::before {
  628. background-color: var(--accent) !important;
  629. }
  630. /* Text color. */
  631. ._26Nvu, ._27U_m .Y1iVg {
  632. color: var(--lighter) !important;
  633. }
  634. /* Selected links. */
  635. ._27U_m .Y1iVg._3caqI {
  636. color: var(--light) !important;
  637. }
  638. /* Selected image. */
  639. ._2Ji5m {
  640. border-color: var(--darker) !important;
  641. }
  642. /** Media viewer. */
  643. ._1iNsf, ._2KgjI {
  644. background-color: transparent !important;
  645. }
  646. /* Pseudo-element background. */
  647. ._1iNsf::before, ._2KgjI::before {
  648. content: "";
  649. position: absolute;
  650. top: 0;
  651. right: 0;
  652. bottom: 0;
  653. left: 0;
  654. background-color: var(--dark);
  655. opacity: 0.8;
  656. z-index: -1;
  657. }
  658. /* Chevron/preloader background. */
  659. ._3yth3 {
  660. box-shadow: 0 2px 4px -1px var(--shadow) !important;
  661. background-color: var(--darker) !important;
  662. }
  663. /* Header. */
  664. ._1iNsf>div:first-child, ._2KgjI>div:first-child {
  665. box-shadow: 0 1px 0 0 var(--darker);
  666. background-color: var(--dark) !important;
  667. }
  668. /* Inner element. */
  669. ._1iNsf>div:first-child>div>div, ._2KgjI>div:first-child>div>div {
  670. background-color: transparent !important;
  671. }
  672. /* Text color. */
  673. ._1iNsf>div:first-child>div>div *, ._2KgjI>div:first-child>div>div * {
  674. color: var(--light);
  675. }
  676. /* Footer. */
  677. ._2n0jo {
  678. border-color: var(--darker) !important;
  679. background-color: var(--dark) !important;
  680. }
  681. /* Selected image. */
  682. ._2AP3i .cJP5q {
  683. border: none !important;
  684. transform: scale(1) !important;
  685. outline: 3px solid var(--accent) !important
  686. }
  687. ._2AP3i ._1LdNS:hover:not(.cJP5q):not(#spec) {
  688. outline: 3px solid var(--accent) !important;
  689. }
  690. /* Highlight message bubbles. #29 */
  691. div.message-in.velocity-animating>div>div, div.message-out.velocity-animating>div>div {
  692. background-color: var(--accent) !important
  693. }
  694. .velocity-animating>.tail>.tail-container {
  695. border-top-color: var(--accent) !important
  696. }
  697. /* Bubble colors. #49 #54 */
  698. .message-in>div:not(.a81-s)>div, .message-out>div:not(.a81-s)>div {
  699. background-color: var(--darker) !important;
  700. }
  701. ._2v02G {
  702. color: var(--lighter) !important;
  703. }
  704. /* Message text color. */
  705. .message-in .selectable-text, .message-out .selectable-text, .quoted-mention, ._1upWv {
  706. color: var(--light) !important;
  707. }
  708. /* Voice messages. */
  709. ::-moz-range-thumb {
  710. background-color: var(--accent) !important
  711. }
  712. ::-moz-range-track {
  713. background-color: var(--lighter) !important
  714. }
  715. ._7sUPO {
  716. background-color: var(--accent) !important
  717. }
  718. ._1FWQp {
  719. color: var(--light) !important
  720. }
  721. /* Use accent color for links. #20 */
  722. a[href].selectable-text {
  723. color: var(--accent) !important;
  724. }
  725. /* Forwarded message. */
  726. ._15aTv {
  727. color: var(--lighter) !important;
  728. }
  729. /* Show more. */
  730. ._1Jc9f {
  731. color: var(--accent) !important
  732. }
  733. /* Deleted message. */
  734. ._3uHCS {
  735. color: var(--lighter) !important
  736. }
  737. span[class][data-icon="recalled-out"] svg path {
  738. fill: red !important
  739. }
  740. /* Phone numbers of users that aren't your contacts. */
  741. #main ._1F9Ap {
  742. color: var(--lighter) !important;
  743. }
  744. /* Mentions. */
  745. .matched-mention, .matched-mention .at-symbol {
  746. color: var(--accent) !important;
  747. }
  748. /* Message meta text color. */
  749. [class*="message-"] div>div:last-child span {
  750. color: var(--light);
  751. }
  752. /* Image/gif/video meta wrapper. */
  753. .KYpDv ._1DZAH {
  754. bottom: 8px;
  755. padding: 2px 5px;
  756. border-radius: 4px;
  757. background-color: var(--shadow);
  758. }
  759. /* Text color. */
  760. .KYpDv ._1DZAH ._3EFt_ {
  761. margin-top: 0px;
  762. color: var(--lighter);
  763. }
  764. /* Message options for images. */
  765. ._3EQsG._1eJVc {
  766. background: none !important;
  767. }
  768. /* Smooth transition. */
  769. .message span:last-child div {
  770. transition: 50ms ease-in-out !important;
  771. }
  772. /* Typing... */
  773. span._2ZAIy {
  774. color: var(--accent) !important;
  775. }
  776. /* System messages. */
  777. .a7otO {
  778. box-shadow: 0 2px 8px 0px var(--shadow) !important;
  779. border-bottom: 3px solid var(--shadow) !important;
  780. background-color: var(--darker) !important;
  781. }
  782. /* Text color and shadows. */
  783. .a7otO * {
  784. text-shadow: none !important;
  785. color: var(--lighter) !important;
  786. }
  787. /* New message. */
  788. #main ._3Xx0y {
  789. border: none !important;
  790. background-color: var(--darker) !important;
  791. }
  792. /* X unread messages. */
  793. #main ._3Xx0y span {
  794. box-shadow: 0 0 8px 0 var(--shadow) !important;
  795. color: var(--light) !important;
  796. background-color: var(--dark) !important;
  797. }
  798. /* Loader. */
  799. ._2sOZc {
  800. box-shadow: 0 2px 4px -1px var(--shadow) !important;
  801. background-color: var(--darker) !important;
  802. }
  803. /* Document embeds. */
  804. ._3a29n, ._1mrMQ {
  805. background-color: var(--dark) !important;
  806. }
  807. /* Embeds description */
  808. .HNuTV {
  809. background-color: var(--dark) !important;
  810. }
  811. /* Link embeds. */
  812. ._3qblR, ._1SsXF {
  813. box-shadow: 0 0 0 1px var(--dark) !important;
  814. background-color: var(--dark) !important;
  815. }
  816. /* Thumbnail. */
  817. ._3_nIn {
  818. background-color: var(--darker) !important;
  819. }
  820. /* Reply section. (= */
  821. footer ._1ebw2 {
  822. box-shadow: 0 0px 8px 0 var(--darker) !important;
  823. background-color: var(--darker) !important;
  824. }
  825. /* Fix margins. */
  826. footer ._1ebw2>div:first-child {
  827. margin: 0 0 5px 10px !important;
  828. background-color: transparent !important;
  829. }
  830. /* Reply content. */
  831. footer ._1ebw2>div:first-child>div {
  832. background-color: var(--dark) !important;
  833. }
  834. /* Close button. */
  835. footer ._1ebw2>div:last-child {
  836. position: relative;
  837. margin: 0 8px 5px 8px !important;
  838. background-color: transparent !important;
  839. }
  840. /* Make the button larger. */
  841. footer ._1ebw2>div:last-child>div svg {
  842. padding: 18px;
  843. border-radius: 6px;
  844. background-color: var(--dark);
  845. }
  846. /* Mention group members. */
  847. ._2j-wI, .XSeqj {
  848. color: var(--light);
  849. border-left: none !important;
  850. background-color: var(--darker) !important;
  851. }
  852. /* Wrapper. */
  853. ._2j-wI .XSeqj {
  854. transition: 300ms ease-in-out !important;
  855. background-color: transparent !important;
  856. }
  857. /* Active. */
  858. ._2j-wI .XSeqj._1Yz8K, ._2j-wI .XSeqj:hover {
  859. background-color: var(--accent) !important;
  860. }
  861. /* Select messages. */
  862. #main ._2AqZl {
  863. background-color: var(--shadow);
  864. }
  865. /* Hover over messages. */
  866. #main .qTFAl {
  867. transition: 0.15s ease !important;
  868. }
  869. /* Selected message. */
  870. #main .qTFAl:hover, #main .qTFAl._3Z2tD {
  871. background-color: var(--shadow) !important;
  872. }
  873. /* Selected icon. */
  874. ._15wNI {
  875. border-color: var(--accent) !important;
  876. background-color: var(--accent) !important;
  877. }
  878. /* Checkmark. */
  879. ._15wNI ._1ygtt {
  880. border-bottom-color: var(--light);
  881. border-right-color: var(--light);
  882. }
  883. /* Footer/control/options. */
  884. #main ._1hhkM {
  885. background-color: var(--darker);
  886. }
  887. /* Bubble tails -- experimental. */
  888. .tail .tail-container {
  889. width: 0px !important;
  890. height: 10px !important;
  891. z-index: 0 !important;
  892. border-top: 12px solid var(--darker);
  893. background: none !important;
  894. }
  895. .message-in>.tail>.tail-container {
  896. left: -10px !important;
  897. top: 0px;
  898. border-left: 10px solid transparent;
  899. border-radius: 5px 0 0 0;
  900. }
  901. .message-out>.tail>.tail-container {
  902. right: -10px !important;
  903. top: 0px;
  904. border-right: 10px solid transparent;
  905. border-radius: 0 5px 0 0;
  906. }
  907. /* Disable tails everywhere. */
  908. /*[[tails]]*/
  909. /* Disable tails everywhere except in chat. */
  910. .starred-msg-wrapper .tail-container, .message-gallery .tail-container, .MS-DH .tail-container {
  911. display: none !important;
  912. }
  913. /* Rounded corners. */
  914. .message-gallery.tail-override-left, .MS-DH .tail-override-left {
  915. border-radius: 7.5px !important;
  916. }
  917. /** Stickers. */
  918. ._1rK-b {
  919. background: none !important;
  920. }
  921. /* Sender. */
  922. ._3Mf7Z {
  923. background-color: var(--darker) !important;
  924. }
  925. /* Time/status. */
  926. ._3qAvH {
  927. background-color: var(--darker) !important;
  928. }
  929. ._3qAvH * {
  930. color: var(--light) !important;
  931. }
  932. /* Message options. */
  933. ._15CAo {
  934. background: linear-gradient(90deg, transparent, var(--darker) 40%) !important;
  935. }
  936. /* Reset sticker menu background. */
  937. .a81-s>div+span>div {
  938. background: none !important;
  939. }
  940. /* Context menu buttons. */
  941. [data-js-context-icon='true'] {
  942. background-image: none !important;
  943. background: none !important;
  944. }
  945. [data-js-context-icon='true']+div {
  946. background: var(--darker) !important;
  947. }
  948. /* Emoji/gif/stickers menu. */
  949. .QChXd, ._20KNO, .RxbUw, ._2PpWQ>div {
  950. background-color: var(--dark) !important;
  951. }
  952. /* Temporary fix for emoji container. */
  953. #main footer>div:nth-child(2)>div {
  954. border: 0;
  955. }
  956. /* Nib. */
  957. .iqJMX {
  958. background-color: var(--dark) !important;
  959. }
  960. /* Emoji tabs. */
  961. ._2avTY {
  962. background: var(--darker) !important;
  963. }
  964. /* Tab indicator. */
  965. ._2avTY .Orl3a, ._1Wbpa {
  966. background-color: var(--accent) !important;
  967. }
  968. /* Active button. */
  969. ._1oNFt.-XQxp path {
  970. fill: var(--accent) !important;
  971. }
  972. /* Search emojis. */
  973. ._2Qm0c, ._2Qm0c label {
  974. box-shadow: none !important;
  975. background-color: var(--dark) !important;
  976. }
  977. /* Text color. */
  978. ._2Qm0c input {
  979. color: var(--light) !important;
  980. }
  981. /* Gif preloader background. */
  982. ._2x9yi {
  983. /* border: 2px dashed ; */
  984. background-color: var(--darker) !important;
  985. }
  986. /* Preview. */
  987. ._1drQ- {
  988. background-color: var(--dark) !important;
  989. }
  990. /* Header. */
  991. ._1drQ- header {
  992. background-color: var(--accent) !important;
  993. }
  994. /* Text color. */
  995. ._1drQ- header *, ._1drQ- .media-body * {
  996. color: var(--lighter) !important;
  997. }
  998. /* Footer. */
  999. ._1drQ- .media-collection {
  1000. background-color: var(--darker);
  1001. }
  1002. /* Button. */
  1003. ._1drQ- .media-collection .btn-fill, ._1drQ- ._3hV1n {
  1004. color: var(--lighter);
  1005. background-color: var(--accent) !important;
  1006. }
  1007. /* Emoji-wanna-be-round. */
  1008. .emojik {
  1009. opacity: var(--emojiOpacity);
  1010. transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04);
  1011. clip-path: circle(47%) !important;
  1012. }
  1013. /* Selected emoji. */
  1014. .emojik:focus, .emojik:hover, .emojik.selected {
  1015. box-shadow: none !important;
  1016. opacity: 1;
  1017. transform: scale(1.15);
  1018. }
  1019. /* Emoji quick selection. */
  1020. ._2mlOb {
  1021. border: 0 !important;
  1022. border-bottom: 1px solid var(--darker) !important;
  1023. background-color: var(--darker) !important;
  1024. }
  1025. /* Emoji race color popup. */
  1026. ._1gFYk {
  1027. background-color: var(--dark) !important;
  1028. }
  1029. /* Separator. */
  1030. ._1gFYk ul li:first-child {
  1031. border-right: 1px solid var(--darker) !important;
  1032. }
  1033. /* Emoji menu triangle. */
  1034. ._1gFYk .iqJMX {
  1035. background-color: var(--dark) !important;
  1036. }
  1037. /* Backdrop. */
  1038. ._3Fq9Y, #startup, #initial_startup {
  1039. background-color: var(--dark) !important;
  1040. }
  1041. /* Modal. */
  1042. ._3Fq9Y ._3RiLE, ._3gUiM ._2dA13 ._1CnF3, ._2dA13 ._18wuJ, ._2dA13 .IuYNx {
  1043. box-shadow: 0 0 0 1px var(--darker), 0 8px 16px 0px var(--shadow) !important;
  1044. background-color: var(--darker) !important;
  1045. }
  1046. /* Selected contact. */
  1047. ._3gUiM ._2EXPL._1f1zm, ._3gUiM ._2EXPL:hover, ._2EXPL._3ntaf:hover {
  1048. background-color: var(--dark) !important;
  1049. }
  1050. /* Text color. */
  1051. ._3Fq9Y ._3RiLE *, ._3gUiM ._1CnF3 * {
  1052. color: var(--light);
  1053. }
  1054. /* Header/footer. */
  1055. .XOIaT {
  1056. background-color: var(--dark) !important;
  1057. }
  1058. /* Empty element below search bar. */
  1059. ._2fq0t span._3fOoY {
  1060. display: none !important;
  1061. }
  1062. /* Accent buttons. */
  1063. ._3PQ7V {
  1064. color: var(--lighter) !important;
  1065. background-color: var(--accent) !important;
  1066. }
  1067. ._3PQ7V:hover {
  1068. opacity: 0.8;
  1069. }
  1070. /* Link buttons. */
  1071. ._23_1v:hover {
  1072. box-shadow: none !important;
  1073. color: var(--accent) !important;
  1074. background-color: transparent !important;
  1075. }
  1076. /* Muted checkbox color. */
  1077. ._1VD7W {
  1078. border-color: var(--accent);
  1079. background-color: var(--accent);
  1080. }
  1081. /* Buttons. */
  1082. .PNlAR:hover, ._1WZqU:hover {
  1083. background-color: var(--dark) !important;
  1084. }
  1085. /* Drop items. (-: */
  1086. .drag-drop, ._2n-96 {
  1087. background-color: var(--dark) !important;
  1088. }
  1089. /* Footer. */
  1090. .NeQRT {
  1091. background-color: var(--darker) !important;
  1092. }
  1093. /* Border. */
  1094. ._2n-96 ._3L-be {
  1095. border: 5px dashed var(--accent) !important;
  1096. color: var(--light) !important;
  1097. }
  1098. /* Add file icon. */
  1099. .GpvML, ._1ypOz, ._3fktq, ._1g8sv {
  1100. background-color: var(--dark) !important;
  1101. box-shadow: 0 2px 4px var(--shadow) !important;
  1102. }
  1103. /* Border. */
  1104. ._1gcLL::after {
  1105. background-color: var(--accent) !important;
  1106. }
  1107. /* Accent border. */
  1108. .CzI8E, ._31WRs ._1DTd4, ._2Fvnm ._3ogpF {
  1109. border-bottom-color: var(--accent) !important;
  1110. }
  1111. /* Text color. */
  1112. ._7HWvs, .A_Kh_ {
  1113. color: var(--light) !important;
  1114. }
  1115. /** Status area! */
  1116. .app-wrapper-web ._2dLx9 {
  1117. background-color: transparent !important;
  1118. }
  1119. /* Pseudo-element background. */
  1120. .app-wrapper-web ._2dLx9::before {
  1121. content: "";
  1122. position: absolute;
  1123. top: 0;
  1124. right: 0;
  1125. bottom: 0;
  1126. left: 0;
  1127. background-color: var(--dark);
  1128. opacity: 0.8;
  1129. z-index: -1;
  1130. }
  1131. /* Status icon. */
  1132. span[data-icon*="status-v3"]>svg>path:first-child {
  1133. opacity: 0.55 !important;
  1134. }
  1135. /* Left hand side. */
  1136. ._2dLx9 .IMn_C {
  1137. background-color: var(--darker) !important;
  1138. }
  1139. /* Text color. */
  1140. .IMn_C span {
  1141. color: var(--light) !important;
  1142. }
  1143. .qlhJH hr {
  1144. color: var(--dark) !important;
  1145. }
  1146. /* Right hand side. */
  1147. ._2dLx9 ._3MBzN {
  1148. background-color: var(--dark) !important;
  1149. }
  1150. /* Text color. */
  1151. ._2dLx9 ._3MBzN div {
  1152. color: var(--lighter) !important;
  1153. }
  1154. /* Reply to status. */
  1155. .QRsOy {
  1156. background-color: var(--dark) !important;
  1157. }
  1158. /* Input bar. */
  1159. ._3FeAD._2nW8k {
  1160. background-color: var(--dark) !important;
  1161. }
  1162. /* Remove weird iframes. */
  1163. object {
  1164. display: none !important;
  1165. }
  1166. /* Global icon color. */
  1167. span[data-icon^="business-"]>svg path, span:not([data-icon="image"])>svg>path {
  1168. transition: 200ms ease;
  1169. fill: var(--icon) !important;
  1170. }
  1171. /* On event. */
  1172. span:not([data-icon="image"]):hover>svg>path {
  1173. /* fill: var(--accent) !important; */
  1174. opacity: 0.3 !important;
  1175. }
  1176. /* Upload files. */
  1177. .azEEh {
  1178. color: var(--light) !important;
  1179. }
  1180. ._2sn3C {
  1181. background-color: var(--darker) !important;
  1182. }
  1183. .Ijb1Q::after {
  1184. box-shadow: 0 4px 8px 2px var(--shadow) !important;
  1185. }
  1186. /* Default profile picture background. */
  1187. span[data-icon^="default-"] svg>path:first-child {
  1188. fill: var(--dark) !important;
  1189. }
  1190. span[data-icon^="default-"] svg path:last-child {
  1191. opacity: 0.7;
  1192. fill: var(--icon) !important;
  1193. }
  1194. /* Sent message. */
  1195. span[data-icon="msg-dblcheck"] svg path, span[data-icon="status-dblcheck"] svg path, span[data-icon="msg-check"] svg path, span[data-icon="status-check"] svg path {
  1196. fill: var(--light) !important;
  1197. opacity: 0.5 !important;
  1198. }
  1199. /* Sent AND seen message. */
  1200. span[data-icon="msg-dblcheck-ack"] svg path, span[data-icon="status-dblcheck-ack"] svg path, span[data-icon="msg-dblcheck-ack-light"] svg path, span[data-icon="status-v3-unread"]>svg>path:last-child {
  1201. fill: var(--accent) !important;
  1202. opacity: 1 !important;
  1203. }
  1204. /* Misc icons fix. */
  1205. span[data-icon^="chevron-"] svg path, span[data-icon="x-viewer"] svg path, span[data-icon="download"] svg path, span[data-icon="forward"] svg path, span[data-icon="star-btn"] svg path, span[data-icon="audio-file"] svg path:last-child, span[data-icon="new-group"] svg path, span[data-icon="add-user-light"] svg path, span[data-icon="link"] svg path, span[data-icon="ptt-in-blue"] svg path:first-child, span[data-icon="ptt-out-blue"] svg path:first-child {
  1206. fill: var(--icon) !important;
  1207. }
  1208. /* Audio message icons. */
  1209. span[data-icon="ptt-in-blue"] svg path:first-child, span[data-icon="ptt-out-blue"] svg path:first-child {
  1210. fill: transparent !important;
  1211. }
  1212. /* Logo. */
  1213. ._3CSsZ>svg>path:first-child {
  1214. fill: var(--accent) !important;
  1215. }
  1216. span[data-icon="logo"] svg path:nth-child(1) {
  1217. fill: white !important;
  1218. }
  1219. span[data-icon="alert-phone"] svg path:first-child, span[data-icon="logo"] svg path:nth-child(1n+2), span[data-icon="whatsapp-logo"] svg path:first-child {
  1220. fill: var(--darker) !important;
  1221. }
  1222. /* GIF icon opacity. */
  1223. span[data-icon="emoji-gifs"] svg path {
  1224. fill: var(--icon) !important;
  1225. fill-opacity: 1 !important;
  1226. }
  1227. /* Be cautious icons. */
  1228. span[data-icon="exit"] svg path, span[data-icon="thumbs-down"] svg path, span[data-icon="delete-danger"] svg path {
  1229. fill: var(--mred) !important;
  1230. }
  1231. /* Audio message. */
  1232. span[data-icon="audio-file"] svg path {
  1233. fill: rgba(255, 173, 31, 0.8) !important;
  1234. }
  1235. /* Audio length bar. */
  1236. ._22cMG.fS1bA .nDKsM {
  1237. background-color: var(--accent) !important;
  1238. }
  1239. /* Slider thumb. */
  1240. input[type=range]::-webkit-slider-thumb {
  1241. cursor: pointer;
  1242. background: var(--accent) !important;
  1243. }
  1244. /* Audio length. */
  1245. ._3HwRC, ._1lxsr {
  1246. color: var(--light) !important;
  1247. }
  1248. /* Rounded buttons. */
  1249. span svg>path[fill="#00BFA5"] {
  1250. fill: var(--accent) !important;
  1251. }
  1252. @media screen and (min-width: 1441px) {
  1253. /* Animation. */
  1254. html[dir=ltr] ._3dqpi {
  1255. /* display: none !important; */
  1256. animation: _104Un 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.38);
  1257. }
  1258. /* App wrapper. */
  1259. #app .app {
  1260. border-radius: 8px;
  1261. box-shadow: 0 4px 24px -2px var(--shadow);
  1262. }
  1263. /* Fullscreen. */
  1264. /*[[fullscreen]]*/
  1265. /* App background. */
  1266. /*[[background]]*/
  1267. ;
  1268. }

Raw paste data: