Mail.com Dark Theme

A dark theme for the mail.com email service.

  1. /* ==UserStyle==
  2. @name Mail.com Dark Theme
  3. @description A dark theme for the mail.com email service.
  4. @author Ghostoblivion
  5. @preprocessor stylus
  6. @version 1.0.0
  7. @namespace https://gf.qytechs.cn/users/430044
  8. @homepageURL https://github.com/ghostoblivion/Mail.ComDark
  9. @supportURL https://discord.gg/7Umrdsx
  10. ==/UserStyle== */
  11. @-moz-document domain("mail.com") {
  12. .atl-navbar {
  13. border-top: none;
  14. height: 52px;
  15. background: #10163A;
  16. }
  17. .atl-actions-menu__item {
  18. margin: 0;
  19. }
  20. .atl-navbar__brand {
  21. display: none !important;
  22. }
  23. .ad.sky.sky--with-upsell-link,
  24. .native-content-box-ad--preview-right,
  25. ul.button li.inactive,
  26. ul.button li.inactive.transparent,
  27. .panel-mail-display-table-mail-default #maillist .native-content-box-ad--sticky,
  28. .panel-mail-display-table-mail-default #maillist .paging-container.bottom,
  29. .panel-mail-display-table-mail-horizontal #maillist .native-content-box-ad--sticky,
  30. .panel-mail-display-table-mail-horizontal #maillist .paging-container.bottom,
  31. #gpt_div_container,
  32. .native-content-box-ad__iframe,
  33. .native-content-box-ad--preview-bottom,
  34. .m-icon.objectivation_icon-add,
  35. .objectivation-address-read .objectivation_action,
  36. #identity_bWFpbGNvbS9kZXNrL2NvY2twaXQvYWRzL2NlbnRlci1hZC50d2ln,
  37. #footer,
  38. #identity_bWFpbGNvbS9kZXNrL2NvY2twaXQvYWRzL3NpZGViYXItcmVjdGFuZ2xlLXRvcC50d2ln,
  39. .theme-bg-intensegreen .component.mailbox .tab-mail:after,
  40. .theme-bg-intensegreen .component.mailbox .tab-mail:before,
  41. .theme-bg-intensepurple .component.mailbox .tab-mail:after,
  42. .theme-bg-intensepurple .component.mailbox .tab-mail:before,
  43. .theme-bg-intenserouge .component.mailbox .tab-mail:after,
  44. .theme-bg-intenserouge .component.mailbox .tab-mail:before,
  45. .theme-bg-nightblue .component.mailbox .tab-mail:after,
  46. .theme-bg-nightblue .component.mailbox .tab-mail:before,
  47. .theme-bg-tropicisland .component.mailbox .tab-mail:after,
  48. .theme-bg-tropicisland .component.mailbox .tab-mail:before,
  49. .widget > section:after,
  50. .widget > section:before,
  51. #identity_X2NvbW1vbi9kZXNrL2NvY2twaXQvd2lkZ2V0cy9zZWFyY2gudHdpZw_eq__eq_,
  52. .tip-icon,
  53. .tip-icon-left:after,
  54. .tip-icon-right:before {
  55. display: none !important;
  56. }
  57. .app,
  58. .atl-actions-menu__hiddenitem,
  59. .widget > section,
  60. .inner {
  61. background: #262C49;
  62. }
  63. html.iac:not(.theme-blue) body,
  64. .section-content .section-container {
  65. background: #262C49;
  66. }
  67. .atl-app-contents-wrapper {
  68. top: 52px;
  69. }
  70. div.navigation div.function .label .link,
  71. #panel-mail-table.panel-mail-display-table-mail-horizontal tr.marked:hover .subject,
  72. #panel-mail-table.panel-mail-display-table-mail-horizontal tr:hover .subject,
  73. .ftd-box-content .header h3,
  74. .menu-sub-flyout.drop-down .menu-item.active,
  75. .menu-sub-flyout input.menu-item,
  76. div.folder a.label.active:hover span.text,
  77. input,
  78. ::placeholder,
  79. div.navigation div.gui-toggle-trigger h2.title,
  80. .widget-mail-mail .mail-details dt,
  81. .menu-sub li.nav-item.function a,
  82. .atl-actions-menu__item--active .pos-icon-item__label,
  83. .atl-actions-menu__item:hover .pos-icon-item__label,
  84. .atl-actions-menu__item--active:hover .pos-icon-item__label,
  85. .atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__label,
  86. .atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__label,
  87. .atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__label,
  88. .atl-actions-menu__groupname,
  89. .atl-actions-menu__hidden .pos-icon-item__wrapper,
  90. .system-folder-message h3,
  91. .widget > section,
  92. html.theme-bg-intenserouge a,
  93. html.theme-bg-intenserouge .component.mailbox .top .unread-box .number,
  94. .component.navigation a,
  95. .folder-settings .header span,
  96. .widget-form .form-item label,
  97. .panel-misc .panel-body a,
  98. .cke_button_label,
  99. .cke_combo_text,
  100. .cke_panel_grouptitle,
  101. .mailobjectpanel-textfield .mailobjectpanel_label,
  102. .widget-mail-mail dl.mail-subject,
  103. .panel-mail-display-table-mail-horizontal .widget-mail-table .name,
  104. .panel-mail-display-table-mail-horizontal .widget-mail-table .date,
  105. .panel-mail-display-table-mail-horizontal .widget-mail-table .folder-section .title,
  106. .panel-mail-display-table-mail-horizontal .system-folder-message p,
  107. .system-message .system-message_topmessage,
  108. div.navigation ul.lvl1 div.folder[data-unread-count="0"] a.label span.text,
  109. div.navigation ul.lvl1 div.folder[data-unread-count="0"]:hover a.label span.text,
  110. a.label span.text {
  111. color: #fff;
  112. }
  113. .button-cta,
  114. .button-secondary,
  115. .objectivation,
  116. .widget-form .form-item .form-item-link a,
  117. .button-primary.has-open-flyout,
  118. .button-primary,
  119. select,
  120. #transferoption .form-item a,
  121. .cke_panel_listItem a {
  122. -webkit-user-drag: none;
  123. border-radius: 5px;
  124. cursor: pointer;
  125. display: inline-flex;
  126. align-items: center;
  127. justify-content: center;
  128. font-family: "Roboto", sans-serif;
  129. line-height: normal;
  130. overflow: hidden;
  131. padding: 5px;
  132. position: relative;
  133. text-align: center;
  134. text-decoration: none;
  135. text-shadow: none;
  136. transition: linear 2s linear 1s;
  137. user-select: none;
  138. vertical-align: middle;
  139. white-space: nowrap;
  140. zoom: 1;
  141. box-sizing: border-box;
  142. background: #7D80DA;
  143. color: #fff;
  144. }
  145. .button-cta:hover,
  146. .menu-sub-flyout.drop-down .menu-item.active:hover,
  147. .menu-sub-flyout .menu-item:hover,
  148. ul.button li:hover,
  149. #panel-mail-table .tool #hoverMenu a.icon,
  150. div.folder a.active,
  151. div.folder span.tools > a.active,
  152. div.folder.dropover span.tools > a.active,
  153. div.folder.has-open-flyout span.tools > a.active,
  154. div.folder:hover span.tools > a.active,
  155. div.nav-link a.is-selected,
  156. div.nav-link span.tools > a.active,
  157. div.nav-link.dropover span.tools > a.active,
  158. div.nav-link.has-open-flyout span.tools > a.active,
  159. div.nav-link:hover span.tools > a.active,
  160. div.folder.active a,
  161. div.folder.active span.tools > a,
  162. div.folder.active span.tools > span,
  163. div.folder.dropover a,
  164. div.folder.dropover span.tools > span,
  165. div.folder.has-open-flyout a,
  166. div.folder.has-open-flyout span.tools > span,
  167. div.folder:hover a,
  168. div.folder:hover span.tools > span,
  169. div.nav-link.dropover a,
  170. div.nav-link.has-open-flyout a,
  171. div.nav-link.is-selected a,
  172. div.nav-link.is-selected span.tools > a,
  173. div.nav-link:hover a,
  174. div.folder a.active:hover,
  175. div.folder a:hover,
  176. div.folder.dropover span.tools > a:hover,
  177. div.folder.has-open-flyout span.tools > a:hover,
  178. div.folder:hover span.tools > a:hover,
  179. div.nav-link a.is-selected:hover,
  180. div.nav-link a:hover,
  181. div.nav-link.dropover span.tools > a:hover,
  182. div.nav-link.has-open-flyout span.tools > a:hover,
  183. div.nav-link:hover span.tools > a:hover,
  184. a.navigation-item.is-selected:hover,
  185. a.navigation-item:hover,
  186. .widget-mail-table tr.marked td,
  187. .widget-mail-table tr.marked:hover td,
  188. .button-secondary.has-open-flyout,
  189. .button-secondary:hover,
  190. .objectivation.has-open-flyout,
  191. .objectivation:focus,
  192. .objectivation:hover,
  193. .menu-sub .menu-item:hover,
  194. .menu-sub li a:hover,
  195. .atl-actions-menu__visible .atl-actions-menu__item:hover,
  196. .atl-actions-menu__visible.atl-actions-menu__item:focus,
  197. .atl-actions-menu__visible .atl-actions-menu__item--active,
  198. .atl-actions-menu__visible .atl-actions-menu__item--active:hover,
  199. .atl-actions-menu__itemmore--active,
  200. .atl-actions-menu__itemmore--active:hover,
  201. .atl-actions-menu__item.atl-actions-menu__itemmore:hover,
  202. .atl-actions-menu__item.atl-actions-menu__itemmore--active,
  203. .atl-actions-menu__item.atl-actions-menu__itemmore--active:hover,
  204. .atl-actions-menu__hiddenitem:hover,
  205. html.theme-bg-intenserouge .component.mailbox ul.nav li.active,
  206. html.theme-bg-intenserouge .component.mailbox .top .unread-box .number.bg,
  207. html.theme-bg-intenserouge .component.navigation li.item:hover,
  208. .widget-form .form-item .form-item-link a:hover,
  209. .button-secondary.button-transparent.has-open-flyout,
  210. .button-secondary.button-transparent:hover,
  211. .button-primary.has-open-flyout,
  212. .button-primary:hover,
  213. option:hover,
  214. .panel-composition,
  215. .panel-composition ul.drafts li.active:hover a,
  216. .panel-composition ul.drafts li:hover a,
  217. #cke_editor a.cke_button_disabled:active,
  218. #cke_editor a.cke_button_disabled:focus,
  219. #cke_editor a.cke_button_disabled:hover,
  220. #cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):active,
  221. #cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):focus,
  222. #cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):hover,
  223. #transferoption .form-item a:hover,
  224. #cke_editor a.cke_button_on,
  225. #cke_editor .cke_combo_off a.cke_combo_button:active,
  226. #cke_editor .cke_combo_off a.cke_combo_button:focus,
  227. #cke_editor .cke_combo_off a.cke_combo_button:hover,
  228. #cke_editor .cke_combo_on a.cke_combo_button,
  229. .cke_panel_listItem a:hover,
  230. .cke_panel_listItem a:focus,
  231. .cke_panel_listItem a:active {
  232. background: #9381FF;
  233. border-color: transparent;
  234. color: #fff;
  235. transition: linear 0.2s;
  236. }
  237. div.navigation div.function:hover .link,
  238. .widget-form .form-item .form-item-link a:hover {
  239. text-decoration: none;
  240. }
  241. .menubar,
  242. .ftd-box,
  243. .ftd-box-content,
  244. .mail-head,
  245. div.navigation span.badge,
  246. .atl-actions-menu__hidden,
  247. .widget-mail-table th .container,
  248. .ftd-box-stem,
  249. .ftd-box-content .footer,
  250. .form-group,
  251. .widget-mail-compose-nav,
  252. #cke_editor .cke_top,
  253. .panel-composition ul.drafts li.active a,
  254. #transferoption,
  255. .cke_panel_grouptitle,
  256. .mailobjectpanel-textfield .mailobjectpanel_label,
  257. .mailobjectpanel-textfield .mailobjectpanel_label:hover,
  258. .mailobjectpanel-textfield.has-open-flyout .mailobjectpanel_label,
  259. #mail-instant-reply,
  260. .ftd-box.big .ftd-box-stem,
  261. .system-message.is-info {
  262. background: #10163A;
  263. border: none !important;
  264. }
  265. .section-content .section-container,
  266. ul.button li .area,
  267. .form-input-type-select select:focus,
  268. .form-input-type-select select:hover:enabled,
  269. .form-input-type-mixed select,
  270. .form-input-type-select select {
  271. border: none;
  272. }
  273. ul.button li,
  274. #panel-mail-table .tool #hoverMenu a.icon:hover {
  275. background: #7D80DA;
  276. }
  277. .button,
  278. ul.button li:last-child,
  279. ul.button li:first-child {
  280. border-radius: 0px;
  281. }
  282. ul.button {
  283. margin-right: 0px;
  284. }
  285. #ide9.button.lvl2.button li:last-child {
  286. border-radius: 0px 10px 10px 0px;
  287. }
  288. #idda {
  289. border-radius: 10px 0px 0px 10px;
  290. }
  291.  
  292. #mail-list {
  293. background: #212744 !important;
  294. border: none !important;
  295. }
  296. .panel-mail-display-table-mail-horizontal .widget-mail-table tbody td,
  297. .theme-bg-intensegreen .component.mailbox .nav-tabs,
  298. .theme-bg-intensepurple .component.mailbox .nav-tabs,
  299. .theme-bg-intenserouge .component.mailbox .nav-tabs,
  300. .theme-bg-nightblue .component.mailbox .nav-tabs,
  301. .theme-bg-tropicisland .component.mailbox .nav-tabs,
  302. #cke_editor.cke_chrome,
  303. .mailobjectpanel-textfield .mailobjectpanel_label,
  304. .mailobjectpanel-textfield {
  305. border: none;
  306. }
  307. .panel-mail-display-table-mail-horizontal #maillist.has-sticky-ad > .scroll > .scroll-pane {
  308. bottom: 0;
  309. }
  310. .panel-mail-display-table-mail-horizontal.preview #maillist,
  311. .panel-mail-display-table-mail-horizontal .system-folder-message,
  312. .panel-mail-display-table-mail-horizontal.preview .mail-display-wrapper {
  313. top: 36px;
  314. }
  315. .panel-mail-display-table-mail-horizontal .widget-mail-table .subject {
  316. color: #ededed;
  317. }
  318. .widget-table tbody tr:hover td,
  319. html #navigation .panel-search .form-input-type-text,
  320. #body.cke_editable.cke_editable_themed.cke_contents_ltr,
  321. .cke_inner,
  322. body.cke_ltr {
  323. background: #262C49;
  324. color: #fff;
  325. }
  326. a.navigation-item,
  327. a.navigation-item.is-selected:hover,
  328. a.navigation-item:hover {
  329. color: #fff !important;
  330. }
  331. html #navigation .panel-search .form-input-type-text {
  332. border: 1px solid #9381FF;
  333. border-radius: 10px;
  334. }
  335. html #navigation .panel-search .form-input-type-text:hover,
  336. html #navigation .panel-search .form-input-type-text.focused,
  337. html #navigation .panel-search .form-input-type-text:hover {
  338. border: 1px solid #9381FF;
  339. border-radius: 10px;
  340. color: #fff;
  341. }
  342. .theme-icon-printer-0,
  343. .theme-icon-save-0,
  344. .theme-icon-mark-0,
  345. /*div.nav-item span.icon,*/
  346. div.nav-item.dropover .tools > a:hover .folder-refresh,
  347. div.nav-item.has-open-flyout .tools > a:hover .folder-refresh,
  348. div.nav-item:hover .tools > a:hover .folder-refresh,
  349. .widget-mail-mail .mail-details .gui-toggle ul.gui-toggle-control li:hover,
  350. div.nav-item.dropover .tools > a:hover .folder-config,
  351. div.nav-item.has-open-flyout .tools > a:hover .folder-config,
  352. div.nav-item:hover .tools > a:hover .folder-config,
  353. div.nav-item .folder-config,
  354. div.nav-item .folder-refresh,
  355. .menu-sub .sort-down span,
  356. .menu-sub .sort-up span,
  357. .menu-sub-flyout-changeview .full-view:before,
  358. .menu-sub-flyout-changeview .vertical-view:before,
  359. .menu-sub-flyout-changeview .horizontal-view:before {
  360. filter: brightness(2.5) !important;
  361. }
  362. div.nav-item.dropover .tools > a:hover .folder-refresh,
  363. div.nav-item.has-open-flyout .tools > a:hover .folder-refresh,
  364. div.nav-item:hover .tools > a:hover .folder-refresh {
  365. background-position: -302px -127px;
  366. }
  367. div.nav-item.dropover .tools > a:hover .folder-config,
  368. div.nav-item.has-open-flyout .tools > a:hover .folder-config,
  369. div.nav-item:hover .tools > a:hover .folder-config {
  370. background-position: -56px -290px;
  371. }
  372. .icon.folder-add {
  373. filter: brightness(1) !important;
  374. }
  375. .objectivation,
  376. .widget > section {
  377. border: none;
  378. font-size: 12px;
  379. }
  380. html.can-have-sky .section-content {
  381. margin-right: 0 !important;
  382. }
  383. .ftd-box .icon,
  384. .layer .icon,
  385. .panel-composition .icon,
  386. .panel-mail .icon,
  387. .panel-setting .icon,
  388. div.navigation div.function:hover .folder-add,
  389. .system-message.is-info .system-message_icon-type {
  390. filter: brightness(1.25);
  391. }
  392. .atl-actions-menu__item--active .pos-icon-item__icon,
  393. .atl-actions-menu__item:hover .pos-icon-item__icon,
  394. .atl-actions-menu__item--active:hover .pos-icon-item__icon,
  395. .atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__label,
  396. .atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__label,
  397. .atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__label,
  398. .atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__icon,
  399. .atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__icon,
  400. .atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__icon,
  401. .atl-actions-menu__hiddenitem .pos-icon-item__icon,
  402. .atl-actions-menu__hiddenitem:hover .pos-icon-item__icons,
  403. .atl-actions-menu__hiddenitem:hover .pos-icon-item__icon,
  404. .widget > section {
  405. fill: #fff;
  406. box-shadow: none;
  407. }
  408. html.theme-bg-intenserouge .component.mailbox ul.nav li.active:before {
  409. border-top-color: #9381FF;
  410. }
  411. html.theme-bg-intenserouge a:hover,
  412. .label:hover,
  413. .component.mailbox .top .unread-box a:hover .label,
  414. .panel-misc .panel-body a:hover,
  415. #transferoption .form-item a:hover {
  416. text-decoration: none;
  417. }
  418. .panel-mail-display-table-mail-horizontal .widget-mail-table {
  419. border-right: none;
  420. }
  421. tr.new .icon.mark .iconset,
  422. .widget-mail-table .tool a.icon.mail-star {
  423. filter: brightness(10);
  424. }
  425. tr .icon.mail-star:hover:before,
  426. tr.marked .icon.mail-star:hover:before,
  427. tr.marked.starred:hover .icon.mail-star:hover:before,
  428. .panel-search .form-submit input,
  429. .icon-link[icon=settings-navigation] .icon-link_icon,
  430. .icon-link[icon=help-navigation] .icon-link_icon,
  431. .button_icon + .button_text,
  432. .button_text + .button_icon,
  433. .theme-icon-clock-0,
  434. #transferoptionButton .title:before,
  435. .cke_button__phxtransferoption_label:before,
  436. .cke_button__phxtransferoption .cke_button_icon,
  437. .collapsed .cke_button__phxcollapse .cke_button_icon,
  438. .cke_button__phxupload .cke_button_icon,
  439. #cke_editor .cke_button__bold .cke_button_icon,
  440. #cke_editor .cke_button__italic .cke_button_icon,
  441. #cke_editor .cke_button__phxsmiley .cke_button_icon,
  442. #cke_editor .cke_button__underline .cke_button_icon,
  443. .cke_button__phxspellcheck .cke_button_icon,
  444. #cke_editor .cke_button__indent .cke_button_icon,
  445. #cke_editor .cke_button__numberedlist .cke_button_icon,
  446. #cke_editor .cke_button__bulletedlist .cke_button_icon,
  447. #cke_editor .cke_button__justifyblock .cke_button_icon,
  448. #cke_editor .cke_button__justifycenter .cke_button_icon,
  449. #cke_editor .cke_button__justifyright .cke_button_icon,
  450. #cke_editor .cke_button__justifyleft .cke_button_icon,
  451. .cke_button__phxinlineattachment_icon,
  452. #cke_editor .cke_button__link .cke_button_icon,
  453. #cke_editor .cke_button__textcolor .cke_button_icon,
  454. #cke_editor .cke_button__bgcolor .cke_button_icon,
  455. .cke_button__phxcollapse .cke_button_icon,
  456. .cke_button__phxtransferoption.active .cke_button_icon,
  457. .mailobjectpanel-objectivation_icon {
  458. filter: brightness(100);
  459. }
  460. div.folder a.label:hover,
  461. div.nav-link a.label:hover {
  462. border-color: #9381FF;
  463. }
  464. div.folder span.tools > a,
  465. div.folder span.tools > span,
  466. div.nav-link span.tools > a,
  467. div.nav-link span.tools > span {
  468. border-left: none !important;
  469. }
  470. .system-folder-message .symbol {
  471. color: #000;
  472. }
  473. .cke_button_arrow,
  474. .cke_combo_arrow {
  475. border-top: 3px solid #fff;
  476. }
  477. .mailobjectpanel-textfield .mailobjectpanel_content {
  478. background: #212744;
  479. }
  480. a.system-message_icon-close {
  481. background-color: #9381FF;
  482. }
  483. }
  484. /*
  485. a,
  486. a:hover,
  487. a:link,
  488. a:visited, {
  489. color: inherit;
  490. }*/

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址