A dark theme for the mail.com email service.
/* ==UserStyle==
@name Mail.com Dark Theme
@description A dark theme for the mail.com email service.
@author Ghostoblivion
@preprocessor stylus
@version 1.0.0
@namespace https://greasyfork.org/users/430044
@homepageURL https://github.com/ghostoblivion/Mail.ComDark
@supportURL https://discord.gg/7Umrdsx
==/UserStyle== */
@-moz-document domain("mail.com") {
.atl-navbar {
border-top: none;
height: 52px;
background: #10163A;
}
.atl-actions-menu__item {
margin: 0;
}
.atl-navbar__brand {
display: none !important;
}
.ad.sky.sky--with-upsell-link,
.native-content-box-ad--preview-right,
ul.button li.inactive,
ul.button li.inactive.transparent,
.panel-mail-display-table-mail-default #maillist .native-content-box-ad--sticky,
.panel-mail-display-table-mail-default #maillist .paging-container.bottom,
.panel-mail-display-table-mail-horizontal #maillist .native-content-box-ad--sticky,
.panel-mail-display-table-mail-horizontal #maillist .paging-container.bottom,
#gpt_div_container,
.native-content-box-ad__iframe,
.native-content-box-ad--preview-bottom,
.m-icon.objectivation_icon-add,
.objectivation-address-read .objectivation_action,
#identity_bWFpbGNvbS9kZXNrL2NvY2twaXQvYWRzL2NlbnRlci1hZC50d2ln,
#footer,
#identity_bWFpbGNvbS9kZXNrL2NvY2twaXQvYWRzL3NpZGViYXItcmVjdGFuZ2xlLXRvcC50d2ln,
.theme-bg-intensegreen .component.mailbox .tab-mail:after,
.theme-bg-intensegreen .component.mailbox .tab-mail:before,
.theme-bg-intensepurple .component.mailbox .tab-mail:after,
.theme-bg-intensepurple .component.mailbox .tab-mail:before,
.theme-bg-intenserouge .component.mailbox .tab-mail:after,
.theme-bg-intenserouge .component.mailbox .tab-mail:before,
.theme-bg-nightblue .component.mailbox .tab-mail:after,
.theme-bg-nightblue .component.mailbox .tab-mail:before,
.theme-bg-tropicisland .component.mailbox .tab-mail:after,
.theme-bg-tropicisland .component.mailbox .tab-mail:before,
.widget > section:after,
.widget > section:before,
#identity_X2NvbW1vbi9kZXNrL2NvY2twaXQvd2lkZ2V0cy9zZWFyY2gudHdpZw_eq__eq_,
.tip-icon,
.tip-icon-left:after,
.tip-icon-right:before {
display: none !important;
}
.app,
.atl-actions-menu__hiddenitem,
.widget > section,
.inner {
background: #262C49;
}
html.iac:not(.theme-blue) body,
.section-content .section-container {
background: #262C49;
}
.atl-app-contents-wrapper {
top: 52px;
}
div.navigation div.function .label .link,
#panel-mail-table.panel-mail-display-table-mail-horizontal tr.marked:hover .subject,
#panel-mail-table.panel-mail-display-table-mail-horizontal tr:hover .subject,
.ftd-box-content .header h3,
.menu-sub-flyout.drop-down .menu-item.active,
.menu-sub-flyout input.menu-item,
div.folder a.label.active:hover span.text,
input,
::placeholder,
div.navigation div.gui-toggle-trigger h2.title,
.widget-mail-mail .mail-details dt,
.menu-sub li.nav-item.function a,
.atl-actions-menu__item--active .pos-icon-item__label,
.atl-actions-menu__item:hover .pos-icon-item__label,
.atl-actions-menu__item--active:hover .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__label,
.atl-actions-menu__groupname,
.atl-actions-menu__hidden .pos-icon-item__wrapper,
.system-folder-message h3,
.widget > section,
html.theme-bg-intenserouge a,
html.theme-bg-intenserouge .component.mailbox .top .unread-box .number,
.component.navigation a,
.folder-settings .header span,
.widget-form .form-item label,
.panel-misc .panel-body a,
.cke_button_label,
.cke_combo_text,
.cke_panel_grouptitle,
.mailobjectpanel-textfield .mailobjectpanel_label,
.widget-mail-mail dl.mail-subject,
.panel-mail-display-table-mail-horizontal .widget-mail-table .name,
.panel-mail-display-table-mail-horizontal .widget-mail-table .date,
.panel-mail-display-table-mail-horizontal .widget-mail-table .folder-section .title,
.panel-mail-display-table-mail-horizontal .system-folder-message p,
.system-message .system-message_topmessage,
div.navigation ul.lvl1 div.folder[data-unread-count="0"] a.label span.text,
div.navigation ul.lvl1 div.folder[data-unread-count="0"]:hover a.label span.text,
a.label span.text {
color: #fff;
}
.button-cta,
.button-secondary,
.objectivation,
.widget-form .form-item .form-item-link a,
.button-primary.has-open-flyout,
.button-primary,
select,
#transferoption .form-item a,
.cke_panel_listItem a {
-webkit-user-drag: none;
border-radius: 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
line-height: normal;
overflow: hidden;
padding: 5px;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: none;
transition: linear 2s linear 1s;
user-select: none;
vertical-align: middle;
white-space: nowrap;
zoom: 1;
box-sizing: border-box;
background: #7D80DA;
color: #fff;
}
.button-cta:hover,
.menu-sub-flyout.drop-down .menu-item.active:hover,
.menu-sub-flyout .menu-item:hover,
ul.button li:hover,
#panel-mail-table .tool #hoverMenu a.icon,
div.folder a.active,
div.folder span.tools > a.active,
div.folder.dropover span.tools > a.active,
div.folder.has-open-flyout span.tools > a.active,
div.folder:hover span.tools > a.active,
div.nav-link a.is-selected,
div.nav-link span.tools > a.active,
div.nav-link.dropover span.tools > a.active,
div.nav-link.has-open-flyout span.tools > a.active,
div.nav-link:hover span.tools > a.active,
div.folder.active a,
div.folder.active span.tools > a,
div.folder.active span.tools > span,
div.folder.dropover a,
div.folder.dropover span.tools > span,
div.folder.has-open-flyout a,
div.folder.has-open-flyout span.tools > span,
div.folder:hover a,
div.folder:hover span.tools > span,
div.nav-link.dropover a,
div.nav-link.has-open-flyout a,
div.nav-link.is-selected a,
div.nav-link.is-selected span.tools > a,
div.nav-link:hover a,
div.folder a.active:hover,
div.folder a:hover,
div.folder.dropover span.tools > a:hover,
div.folder.has-open-flyout span.tools > a:hover,
div.folder:hover span.tools > a:hover,
div.nav-link a.is-selected:hover,
div.nav-link a:hover,
div.nav-link.dropover span.tools > a:hover,
div.nav-link.has-open-flyout span.tools > a:hover,
div.nav-link:hover span.tools > a:hover,
a.navigation-item.is-selected:hover,
a.navigation-item:hover,
.widget-mail-table tr.marked td,
.widget-mail-table tr.marked:hover td,
.button-secondary.has-open-flyout,
.button-secondary:hover,
.objectivation.has-open-flyout,
.objectivation:focus,
.objectivation:hover,
.menu-sub .menu-item:hover,
.menu-sub li a:hover,
.atl-actions-menu__visible .atl-actions-menu__item:hover,
.atl-actions-menu__visible.atl-actions-menu__item:focus,
.atl-actions-menu__visible .atl-actions-menu__item--active,
.atl-actions-menu__visible .atl-actions-menu__item--active:hover,
.atl-actions-menu__itemmore--active,
.atl-actions-menu__itemmore--active:hover,
.atl-actions-menu__item.atl-actions-menu__itemmore:hover,
.atl-actions-menu__item.atl-actions-menu__itemmore--active,
.atl-actions-menu__item.atl-actions-menu__itemmore--active:hover,
.atl-actions-menu__hiddenitem:hover,
html.theme-bg-intenserouge .component.mailbox ul.nav li.active,
html.theme-bg-intenserouge .component.mailbox .top .unread-box .number.bg,
html.theme-bg-intenserouge .component.navigation li.item:hover,
.widget-form .form-item .form-item-link a:hover,
.button-secondary.button-transparent.has-open-flyout,
.button-secondary.button-transparent:hover,
.button-primary.has-open-flyout,
.button-primary:hover,
option:hover,
.panel-composition,
.panel-composition ul.drafts li.active:hover a,
.panel-composition ul.drafts li:hover a,
#cke_editor a.cke_button_disabled:active,
#cke_editor a.cke_button_disabled:focus,
#cke_editor a.cke_button_disabled:hover,
#cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):active,
#cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):focus,
#cke_editor a.cke_button_off:not(.cke_button__phxxxlstorage):hover,
#transferoption .form-item a:hover,
#cke_editor a.cke_button_on,
#cke_editor .cke_combo_off a.cke_combo_button:active,
#cke_editor .cke_combo_off a.cke_combo_button:focus,
#cke_editor .cke_combo_off a.cke_combo_button:hover,
#cke_editor .cke_combo_on a.cke_combo_button,
.cke_panel_listItem a:hover,
.cke_panel_listItem a:focus,
.cke_panel_listItem a:active {
background: #9381FF;
border-color: transparent;
color: #fff;
transition: linear 0.2s;
}
div.navigation div.function:hover .link,
.widget-form .form-item .form-item-link a:hover {
text-decoration: none;
}
.menubar,
.ftd-box,
.ftd-box-content,
.mail-head,
div.navigation span.badge,
.atl-actions-menu__hidden,
.widget-mail-table th .container,
.ftd-box-stem,
.ftd-box-content .footer,
.form-group,
.widget-mail-compose-nav,
#cke_editor .cke_top,
.panel-composition ul.drafts li.active a,
#transferoption,
.cke_panel_grouptitle,
.mailobjectpanel-textfield .mailobjectpanel_label,
.mailobjectpanel-textfield .mailobjectpanel_label:hover,
.mailobjectpanel-textfield.has-open-flyout .mailobjectpanel_label,
#mail-instant-reply,
.ftd-box.big .ftd-box-stem,
.system-message.is-info {
background: #10163A;
border: none !important;
}
.section-content .section-container,
ul.button li .area,
.form-input-type-select select:focus,
.form-input-type-select select:hover:enabled,
.form-input-type-mixed select,
.form-input-type-select select {
border: none;
}
ul.button li,
#panel-mail-table .tool #hoverMenu a.icon:hover {
background: #7D80DA;
}
.button,
ul.button li:last-child,
ul.button li:first-child {
border-radius: 0px;
}
ul.button {
margin-right: 0px;
}
#ide9.button.lvl2.button li:last-child {
border-radius: 0px 10px 10px 0px;
}
#idda {
border-radius: 10px 0px 0px 10px;
}
#mail-list {
background: #212744 !important;
border: none !important;
}
.panel-mail-display-table-mail-horizontal .widget-mail-table tbody td,
.theme-bg-intensegreen .component.mailbox .nav-tabs,
.theme-bg-intensepurple .component.mailbox .nav-tabs,
.theme-bg-intenserouge .component.mailbox .nav-tabs,
.theme-bg-nightblue .component.mailbox .nav-tabs,
.theme-bg-tropicisland .component.mailbox .nav-tabs,
#cke_editor.cke_chrome,
.mailobjectpanel-textfield .mailobjectpanel_label,
.mailobjectpanel-textfield {
border: none;
}
.panel-mail-display-table-mail-horizontal #maillist.has-sticky-ad > .scroll > .scroll-pane {
bottom: 0;
}
.panel-mail-display-table-mail-horizontal.preview #maillist,
.panel-mail-display-table-mail-horizontal .system-folder-message,
.panel-mail-display-table-mail-horizontal.preview .mail-display-wrapper {
top: 36px;
}
.panel-mail-display-table-mail-horizontal .widget-mail-table .subject {
color: #ededed;
}
.widget-table tbody tr:hover td,
html #navigation .panel-search .form-input-type-text,
#body.cke_editable.cke_editable_themed.cke_contents_ltr,
.cke_inner,
body.cke_ltr {
background: #262C49;
color: #fff;
}
a.navigation-item,
a.navigation-item.is-selected:hover,
a.navigation-item:hover {
color: #fff !important;
}
html #navigation .panel-search .form-input-type-text {
border: 1px solid #9381FF;
border-radius: 10px;
}
html #navigation .panel-search .form-input-type-text:hover,
html #navigation .panel-search .form-input-type-text.focused,
html #navigation .panel-search .form-input-type-text:hover {
border: 1px solid #9381FF;
border-radius: 10px;
color: #fff;
}
.theme-icon-printer-0,
.theme-icon-save-0,
.theme-icon-mark-0,
/*div.nav-item span.icon,*/
div.nav-item.dropover .tools > a:hover .folder-refresh,
div.nav-item.has-open-flyout .tools > a:hover .folder-refresh,
div.nav-item:hover .tools > a:hover .folder-refresh,
.widget-mail-mail .mail-details .gui-toggle ul.gui-toggle-control li:hover,
div.nav-item.dropover .tools > a:hover .folder-config,
div.nav-item.has-open-flyout .tools > a:hover .folder-config,
div.nav-item:hover .tools > a:hover .folder-config,
div.nav-item .folder-config,
div.nav-item .folder-refresh,
.menu-sub .sort-down span,
.menu-sub .sort-up span,
.menu-sub-flyout-changeview .full-view:before,
.menu-sub-flyout-changeview .vertical-view:before,
.menu-sub-flyout-changeview .horizontal-view:before {
filter: brightness(2.5) !important;
}
div.nav-item.dropover .tools > a:hover .folder-refresh,
div.nav-item.has-open-flyout .tools > a:hover .folder-refresh,
div.nav-item:hover .tools > a:hover .folder-refresh {
background-position: -302px -127px;
}
div.nav-item.dropover .tools > a:hover .folder-config,
div.nav-item.has-open-flyout .tools > a:hover .folder-config,
div.nav-item:hover .tools > a:hover .folder-config {
background-position: -56px -290px;
}
.icon.folder-add {
filter: brightness(1) !important;
}
.objectivation,
.widget > section {
border: none;
font-size: 12px;
}
html.can-have-sky .section-content {
margin-right: 0 !important;
}
.ftd-box .icon,
.layer .icon,
.panel-composition .icon,
.panel-mail .icon,
.panel-setting .icon,
div.navigation div.function:hover .folder-add,
.system-message.is-info .system-message_icon-type {
filter: brightness(1.25);
}
.atl-actions-menu__item--active .pos-icon-item__icon,
.atl-actions-menu__item:hover .pos-icon-item__icon,
.atl-actions-menu__item--active:hover .pos-icon-item__icon,
.atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__label,
.atl-actions-menu__item.atl-actions-menu__itemmore:hover .pos-icon-item__icon,
.atl-actions-menu__item.atl-actions-menu__itemmore--active .pos-icon-item__icon,
.atl-actions-menu__item.atl-actions-menu__itemmore--active:hover .pos-icon-item__icon,
.atl-actions-menu__hiddenitem .pos-icon-item__icon,
.atl-actions-menu__hiddenitem:hover .pos-icon-item__icons,
.atl-actions-menu__hiddenitem:hover .pos-icon-item__icon,
.widget > section {
fill: #fff;
box-shadow: none;
}
html.theme-bg-intenserouge .component.mailbox ul.nav li.active:before {
border-top-color: #9381FF;
}
html.theme-bg-intenserouge a:hover,
.label:hover,
.component.mailbox .top .unread-box a:hover .label,
.panel-misc .panel-body a:hover,
#transferoption .form-item a:hover {
text-decoration: none;
}
.panel-mail-display-table-mail-horizontal .widget-mail-table {
border-right: none;
}
tr.new .icon.mark .iconset,
.widget-mail-table .tool a.icon.mail-star {
filter: brightness(10);
}
tr .icon.mail-star:hover:before,
tr.marked .icon.mail-star:hover:before,
tr.marked.starred:hover .icon.mail-star:hover:before,
.panel-search .form-submit input,
.icon-link[icon=settings-navigation] .icon-link_icon,
.icon-link[icon=help-navigation] .icon-link_icon,
.button_icon + .button_text,
.button_text + .button_icon,
.theme-icon-clock-0,
#transferoptionButton .title:before,
.cke_button__phxtransferoption_label:before,
.cke_button__phxtransferoption .cke_button_icon,
.collapsed .cke_button__phxcollapse .cke_button_icon,
.cke_button__phxupload .cke_button_icon,
#cke_editor .cke_button__bold .cke_button_icon,
#cke_editor .cke_button__italic .cke_button_icon,
#cke_editor .cke_button__phxsmiley .cke_button_icon,
#cke_editor .cke_button__underline .cke_button_icon,
.cke_button__phxspellcheck .cke_button_icon,
#cke_editor .cke_button__indent .cke_button_icon,
#cke_editor .cke_button__numberedlist .cke_button_icon,
#cke_editor .cke_button__bulletedlist .cke_button_icon,
#cke_editor .cke_button__justifyblock .cke_button_icon,
#cke_editor .cke_button__justifycenter .cke_button_icon,
#cke_editor .cke_button__justifyright .cke_button_icon,
#cke_editor .cke_button__justifyleft .cke_button_icon,
.cke_button__phxinlineattachment_icon,
#cke_editor .cke_button__link .cke_button_icon,
#cke_editor .cke_button__textcolor .cke_button_icon,
#cke_editor .cke_button__bgcolor .cke_button_icon,
.cke_button__phxcollapse .cke_button_icon,
.cke_button__phxtransferoption.active .cke_button_icon,
.mailobjectpanel-objectivation_icon {
filter: brightness(100);
}
div.folder a.label:hover,
div.nav-link a.label:hover {
border-color: #9381FF;
}
div.folder span.tools > a,
div.folder span.tools > span,
div.nav-link span.tools > a,
div.nav-link span.tools > span {
border-left: none !important;
}
.system-folder-message .symbol {
color: #000;
}
.cke_button_arrow,
.cke_combo_arrow {
border-top: 3px solid #fff;
}
.mailobjectpanel-textfield .mailobjectpanel_content {
background: #212744;
}
a.system-message_icon-close {
background-color: #9381FF;
}
}
/*
a,
a:hover,
a:link,
a:visited, {
color: inherit;
}*/