Protonmail Dark Compact Theme

protonmail-theme.css

/* Background color of logo (Top left) */
.headerSecuredDesktop-logo {
    background-color: #1F2124;
}

/* Background color of side bar on the left */
#ptSidebar {
    background: #1F2124;
}

/* Header background color */
.headerSecured-container {
    background: #2F3136;
}

/* Line when hovering over navigation buttons */
.navigation > li.active, .navigation > li:hover {
    border-color:#7289DA;
}

/* Changing background color on most buttons */
.pm_button.primary {
    background-color: #7289DA;
}

/* Changing background color on most buttons when hovered */
.pm_button.primary:focus, .pm_button.primary:hover {
    background-color: #677BC4;
}

/* Changes the background color of slidable checkbox [V| ] */
.pm_toggle-checkbox:checked + .pm_toggle-label {
    background-color: #7289DA;
}

/* Compose button (Top left) background color */
.sidebarApp-container .sidebar-btn-compose {
    background-color: #7289DA;
    border-color: #7289DA;
}

/* Compose button (Top left) background color when hovered */
.sidebarApp-container:focus .sidebar-btn-compose:focus, .sidebarApp-container:hover .sidebar-btn-compose:hover {
    background-color: #677BC4;
}

/* Color of icons on the sidebar */
.sidebarApp-item.active .navigationItem-icon {
    color: #6375B7;
}

/* UPGRADE STORAGE message on bottom left hidden, still visible when hovered over though */
.sidebarApp-container .footer div.link a {
    color:#202225;
}

/* Change the color of storage message (Bottom left) */
.sidebarApp-container .footer div.storage strong {
    color: #6375B7;
}

/* Changed color of line that appears on the left when selecting emails */
.conversation.marked::before {
    background-color:#6375B7;
}

/* Changes the background color of a normal checked checkbox */
.customCheckbox-input:checked + .customCheckbox-mask{
    background-color:#7289DA;
    border-color:#7289DA;
}

/* Background color of read emails */
body #conversation-list-rows .conversation.read{
    background:#f0f0f0;
}

/* Changed the height of emails to make the list more compact, made the border lighter */
body #conversation-list-rows .conversation{
    height:30px;
    border-bottom:1px solid #e9e9e9;
}

/* Hides the "All Mail" button on the sidebar (Left) */
li[data-key="allmail"] {
  display:none;
}

/* Hides the "Folders & Labels" button on the sidebar (Left) */
#labelSettings {
    display:none;
}

/* Hides the upgrade button in the navigation bar (Top right) as it can still be accessed via the settings */
.navigation-upgrade-item{
    visibility: hidden;
}

/* Hide the outline when clicking on buttons */
*:focus {
    outline: 0 !important;
}