path: root/templates/_styles.scss

// ================================= \\
// ========== HORIZONTAL =========== \\
// ========== NAVIGATION =========== \\
// ============= BAR =============== \\
// ================================= \\

// Top Navigation BAR (horizontal)
.headerDesktop-container {
  background-color: $base;
}

.search-form-fieldset {
  background: $search;
} // Search bar.


[class*="searchForm-action-button-"] {
  color: $navigation;
} // Search bar buttons.

.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover {
  background: $highlight;
} // Search bar buttons hover.

.customRadio-input:checked + .customRadio-mask {
  box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 10px $highlight;
  border-color: $highlight;
} // Advanced search menu.


.pm_button.primary, .pm_button.primary:active {
  color: $navigation;
  background-color: $base;
  border-color: $base;
} // General buttons.

.pm_button.primary:hover, .pm_button.primary:focus {
  background-color: rgba($search, 0.7);
  border-color: rgba($search, 0.7);
}

.navigation > li.active, .navigation > li:hover {
  border-color: $highlight;
} // Navigation items top border

.navigation-link {
  color: $navigation;
} // Navigation links including icons.

.navigation-title:hover {
  color: $highlight;
} // Hover navigation links

.pm_dropdown .navigationUser-logout {
  background-color: $base !important;
  border-color: $base !important;
  color: $navigation !important;
} // logout button hover

.pm_dropdown .navigationUser-logout:hover {
  background-color: $search !important;
  border-color: $search !important;
  color: $navigation !important;
} // logout button hover

.sidebar-btn-compose, .sidebar-btn-compose:active  {
  color: $navigation !important;
  background: $highlight !important;
  border: none !important;
  transition: background-color .2s ease-in-out;
} // compose button

.sidebar-btn-compose:hover {
  color: $navigation !important;
  background: $highlight !important;
  border: none !important;
  // Covers button with darker hue of highlight
  box-shadow: inset 0 400px 400px rgba(0,0,0,0.1);
} // compose button

// ================================= \\
// =========== VERTICAL ============ \\
// ========== NAVIGATION =========== \\
// ============= BAR =============== \\
// ================================= \\

// Protonmail logo background.
.headerDesktop-logo {
  background-color: $base;
}

// Side Navigation background. (vertical)
body section.sidebar {
  background: $base;
}

// Composition button.
body section.sidebar a.compose {
  background: $highlight;
  color: $navigation;
}

body section.sidebar a.compose:hover {
  background: $navigation;
  border-color: $navigation;
  color: $base;
}

// Navigation items.
body section.sidebar ul.menu li a {
  color: $navigation;
}

// Navigation items on hover.
body section.sidebar ul.menu li a:hover {
  color: $highlight;
}

// Navigation items on active and on active hover.
body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a {
  color: $navigation;
}

// Navigation icons on active and on active hover.
body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover {
  color: $highlight !important;
  opacity: 1;
}

// Refresh icon.
body section.sidebar ul.menu li a .fa-repeat {
  color: $navigation;
  opacity: 1;
}

// Navigation icons.
body section.sidebar ul.menu li a i.fa {
  color: $navigation;
  opacity: 0.5;
}

// Navigation icons on hover.
body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa {
  color: $navigation;
  opacity: 1;
}

// Number of messages.
body section.sidebar ul.menu li a em {
  color: $navigation;
  opacity: 0.5;
}

// Label links.
body section.sidebar div.labels ul li a {
  color: $navigation;
  opacity: 0.5;
}

// Label links on hover.
body section.sidebar div.labels ul li a:hover {
  color: $navigation;
  opacity: 1;
}

// Storage links and version.
body section.sidebar div.footer div.link a, body section.sidebar a.version {
  color: $navigation;
  opacity: 0.5;
}

// Storage links and version on hover.
body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover {
  color: $highlight;
  opacity: 1;
}

// Storage text.
body section.sidebar div.footer div.storage strong {
  color: $navigation;
  opacity: 0.5;
}

// Storage bar welcome text.
.conversationPlaceholder #storageStatus .wrap span strong {
  color: $highlight;
}

// Storage bar.
.storageBar {
  background-color: rgba(0,0,0,.1);
}
// Storage bar fill.
.storageBar .storageBar-progress {
  background-color: $highlight;
}

// ================================= \\
// =========== MESSAGE ============ \\
// ========== NAVIGATION =========== \\
// ================================= \\

// Toolbar icons.
.pm_buttons, .pm_buttons a {
  color: $text_color;
}

.pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover {
  color: $highlight;
}

.readUnread-container-ur .readUnread-btn-read,
.pm_buttons .pm_buttons:not(:first-of-type), .pm_buttons>*,
.pm_buttons, .pm_buttons a {
  border-color: $base !important;
}

// Search icon from dropdown menu for folders and labels.
.dropdown-folder-search .fa.dropdown-folder-search-icon,
.dropdown-label-search .fa.dropdown-label-search-icon {
  color: $highlight;
}

// Create folder and label button.
.dropdown-folder-create-button,
.createLabel-button {
  color: $highlight;
}

// Checkbox next to message title.
.customCheckbox-mask {
  // You can add a new border colour here.
}

.customCheckbox-container:hover .customCheckbox-mask,
.customMaskInput-container:hover .customCheckbox-mask {
  border-color: $highlight !important;
}

.customCheckbox-input:checked+.customCheckbox-mask {
  background-color: $highlight;
  border-color: $highlight;
  color: $base;
}

// Left border of message title.
.conversation.marked::before {
  background: $highlight;
  width: 5px;
}

// Unread message background.
body #conversation-list-rows .conversation {
  background: #fff;
}

// Read message background.
body #conversation-list-rows .conversation.read {
  background: #fff;
}

// ================================= \\
// =========== COMPOSING =========== \\
// ============ MESSAGE ============ \\
// ============= WINDOW ============= \\
// ================================= \\

// Header color and text.
#pm_composer .composer header {
  background: $base;
  color: $navigation;
}

// Links in general.
p a {
  color: $highlight;
}

// Attachment, encryption and expiration buttons.
#pm_composer .composer footer .pm_button {
  background: $navigation;
  color: $base;
}

// Attachment, encryption and expiration buttons on hover.
#pm_composer .composer footer .pm_button:hover {
  background: $navigation;
  color: $base;
}

// Send button.
#pm_composer .composer footer .pm_button.primary {
  background: $base;
  color: $navigation;
}

// Send button on hover.
#pm_composer .composer footer .pm_button.primary:hover {
  background: $highlight;
  color: $navigation;
}

// Minimize, expand and close buttons.
.pm_button.link.composerHeader-btn {
  color: $navigation !important;
}

.pm_button.link.composerHeader-btn:hover {
  color: $highlight !important;
}


// ================================= \\
// =========== SETTINGS =========== \\
// ============ PANEL ============ \\
// ================================= \\

// Tab menu background.
#pm_settings .pm_tabs {
  background: $extra_color;
}

// Tab menu items.
#pm_settings .pm_tabs li a.pm_button {
  color: $base;
  border-color: $extra_color;
}

// Tab menu items hover.
#pm_settings .pm_tabs li a.pm_button:hover {
  color: $highlight;
}

// Tab menu active item.
#pm_settings .pm_tabs li.active a.pm_button {
  color: $highlight;
}

// Links in settings.
.pm_button.link {
  color: $highlight;
}

// Toggle rectangle checkboxes.
.pm_toggle-label {
  background: $base;
}

.pm_toggle-checkbox:focus + .pm_toggle-label, .pm_toggle-label:hover {
  background: lighten($base, 5%);
}

 .pm_toggle-checkbox:checked + .pm_toggle-label, .pm_toggle-checkbox:checked + .pm_toggle-label:hover, .pm_toggle-checkbox:checked:focus + .pm_toggle-label {
  background: $highlight;
}


// Pill switch buttons.
.pm_toggle.off .off, .pm_toggle.on .on {
  background: $base;
  color: $navigation;
}

.pm_toggle {
  box-shadow: 0 0 0 1px $extra_color;
}

// Neutral content box.
.alert.alert-info {
  background: rgba($extra_color, 0.7);
  color: $text_color;
}

// Warning content box.
.alert.alert-warning {
  background: rgba($warning_color, 0.7);
  color: $text_color;
}

// Delete account button.
.pm_button.error:focus, .pm_button.error:hover {
  background-color: rgba($danger_color, 1);
  border-color: rgba($danger_color, 0.7);
}

.pm_button.error {
  background-color: rgba($danger_color, 0.7);
  border-color: rgba($danger_color, 1);
}


// Small icons in settings.
html.protonmail .text-purple,
.settingsUsers-link-signatures  {
  color: $highlight !important;
}

html.protonmail .text-red {
  color: $danger_color !important;
}

// Links
.pm_button.link {
  color: $text_color !important;
}

// Topup link.
.overviewSection-container .topUp-button {
  color: $highlight;
}

// Current plan header and container.
.settingsDashboard-plans [class*="Column-container"] .isCurrent {
  background: $base;
  box-shadow: 0 0 8px $base,0 0 0 2px $base;
  border-bottom: 1px solid $base;
}

.settingsDashboard-plans.free-active .freeColumn-container,
.settingsDashboard-plans.plus-active .plusColumn-container,
.settingsDashboard-plans.professional-active .professionalColumn-container,
.settingsDashboard-plans.visionary-active .visionaryColumn-container {
  border-color: $base;
  box-shadow: 0 0 8px $base,0 0 0 2px $base;
}

// Plans and prices arrow controls.
[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button {
  background: rgba($highlight, 0.7);
}

[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover {
  background: rgba($highlight, 1);
}

// Plans and prices VPN buttons.
.vpnRow-add {
  background-color:  lighten($base, 5%);
}

.vpnRow-add:hover {
  background: $base;
}

// Plans and prices - prices.
.settingsDashboard-plans .freeColumn-free,
.totalRows-monthly-price,
.totalRows-yearly-price {
  color: $text_color;
}

// Plans and prices - Discount triangle.
.totalRows-discount {
  border-color: transparent $highlight;
}

// Modal color.
.pm_modal .modal-dialog {
  border-color: $base;
}

// Modal close button.
.pm_modal .modal-dialog .close {
  color: $navigation;
  background: $base;
}

// Address badges link
.pm_badge {
  color: $navigation;
}

// Address default badge.
.pm_badge.primary {
  background: $base;
  color: $navigation;
}

// Address enalbled badge.
.pm_badge.success {
  background: $highlight;
  color: $navigation;
}

// ================================= \\
// =========== CONTACTS =========== \\
// ============ PANEL ============= \\
// ================================= \\

// Contact table headings.
.pm_table table th a, .pm_table table th .fa {
  color: $highlight;
}

// ================================= \\
// ============= OTHER ============= \\
// ================================= \\

//Top pop up notifications.
body .cg-notify-message.notification-success {
  background-color: $highlight;
  color: $navigation;
}

// ================================= \\
// ============= MOBILE ============ \\
// ============ SPECIFIC =========== \\
// ================================= \\

// Mobile navigation.
.appConfigBody-is-mobile .sidebarApp-container {
  background: $base;
}