Proton products – v5 theme (arc style)

proton-products-v5-arc.css

/* A more simple theme for the Proton apps */
/* Use native font stack, less rounded, less saturate and more blueish colors, removed the logos to keep the text only */

/* You can use it with an addon like "Stylus" */

:root {
    /* Use native font stack (https://getbootstrap.com/docs/4.1/content/reboot/#native-font-stack) */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

    /* To change border radius */
    --1px: 0.025rem;
}

.ui-prominent {
    --primary: #6e84ff;
    --primary-contrast: white;
    --signal-danger-minor-2: #310b12;
    --signal-danger-minor-1: #4a111b;
    --signal-danger: #f5385a;
    --signal-danger-major-1: #f64c6b;
    --signal-danger-major-2: #f7607b;
    --signal-danger-major-3: #f8748c;
    --signal-danger-contrast: #ffffff;
    --signal-warning-minor-2: #331200;
    --signal-warning-minor-1: #4d1b00;
    --signal-warning: #ff9900;
    --signal-warning-major-1: #ffa31a;
    --signal-warning-major-2: #ffad33;
    --signal-warning-major-3: #ffb84d;
    --signal-warning-contrast: #000000;
    --signal-success-minor-2: #06221b;
    --signal-success-minor-1: #093228;
    --signal-success: #1ea885;
    --signal-success-major-1: #35b191;
    --signal-success-major-2: #4bb99d;
    --signal-success-major-3: #62c2aa;
    --signal-success-contrast: #ffffff;
    --signal-info-minor-2: #072029;
    --signal-info-minor-1: #0b2f3e;
    --signal-info: #2392ce;
    --signal-info-major-1: #39a0d3;
    --signal-info-major-2: #4fa3d8;
    --signal-info-major-3: #65b1dd;
    --signal-info-contrast: #ffffff;
    --interaction-norm-minor-2: #0f1b33;
    --interaction-norm-minor-1: #16244d;
    --interaction-norm: #4459f5;
    --interaction-norm-major-1: #5c72ff;
    --interaction-norm-major-2: #6e8dff;
    --interaction-norm-major-3: #8097ff;
    --interaction-norm-contrast: #ffffff;
    --interaction-weak-minor-2: #0f0b1d;
    --interaction-weak-minor-1: #16112b;
    --interaction-weak: #395d8f;
    --interaction-weak-major-1: #4d6b9a;
    --interaction-weak-major-2: #617ea5;
    --interaction-weak-major-3: #7489b1;
    --interaction-weak-contrast: #ffffff;
    --text-norm: #fff;
    --text-weak: #b5bbc8;
    --text-hint: #8b9ab6;
    --text-disabled: #4a398f;
    --text-invert: #1b1340;
    --field-norm: #829bd4;
    --field-hover: #5c85ff;
    --field-disabled: #27457a;
    --field-focus: #4a8fff;
    --field-highlight: rgba(74, 125, 255, .3);
    --border-norm: #304e85;
    --border-weak: #2b4080;
    --background-norm: #132140;
    --background-weak: #1c3657;
    --background-strong: #27417a;
    --interaction-default: transparent;
    --interaction-default-hover: rgba(54, 85, 143, .3);
    --interaction-default-active: rgba(57, 75, 143, .4);
    --shadow-norm-opacity: 0.32;
    --shadow-lifted-opacity: 0.4;
    --backdrop-norm: rgba(0, 0, 0, 0.32);
    --scrollbar-thumb-color: #305585;
    --scrollbar-thumb-hover-color: #39598f;
    --optional-link-norm: var(--interaction-norm-major-1);
    --optional-link-hover: var(--interaction-norm-major-2);
    --optional-link-active: var(--interaction-norm-major-3);
    --optional-mini-calendar-today-color: white;

    --navigation-current-item-background-color: var(--field-highlight);
}

:root,
.ui-standard {
    --primary: #4a65ff;
    --primary-contrast: white;
    --signal-danger-minor-2: #fcebee;
    --signal-danger-minor-1: #f8d6dc;
    --signal-danger: #dc3251;
    --signal-danger-major-1: #c62d49;
    --signal-danger-major-2: #b02841;
    --signal-danger-major-3: #9a2339;
    --signal-danger-contrast: #ffffff;
    --signal-warning-minor-2: #fff5e6;
    --signal-warning-minor-1: #ffebcc;
    --signal-warning: #ff9900;
    --signal-warning-major-1: #f27d00;
    --signal-warning-major-2: #e66300;
    --signal-warning-major-3: #d94c00;
    --signal-warning-contrast: #000000;
    --signal-success-minor-2: #e9f6f3;
    --signal-success-minor-1: #d2eee7;
    --signal-success: #1ea885;
    --signal-success-major-1: #1b9778;
    --signal-success-major-2: #18866a;
    --signal-success-major-3: #15765d;
    --signal-success-contrast: #ffffff;
    --signal-info-minor-2: #e9f5fa;
    --signal-info-minor-1: #d3ecf5;
    --signal-info: #2373ce;
    --signal-info-major-1: #2086b9;
    --signal-info-major-2: #1c77a5;
    --signal-info-major-3: #196490;
    --signal-info-contrast: #ffffff;
    --interaction-norm-minor-2: #f0edff;
    --interaction-norm-minor-1: #e2dbff;
    --interaction-norm: #4a6de9;
    --interaction-norm-major-1: #435ee6;
    --interaction-norm-major-2: #3b53cc;
    --interaction-norm-major-3: #3452b3;
    --interaction-norm-contrast: #ffffff;
    --interaction-weak-minor-2: #f9f8f7;
    --interaction-weak-minor-1: #f5f3f2;
    --interaction-weak: #eae7e4;
    --interaction-weak-major-1: #d9dbde;
    --interaction-weak-major-2: #cdd0d3;
    --interaction-weak-major-3: #c2c4c7;
    --interaction-weak-contrast: #000;
    --text-norm: #0c0c14;
    --text-weak: #6b6d70;
    --text-hint: #8a8c8f;
    --text-disabled: #bcc0c2;
    --text-invert: white;
    --field-norm: #adaba8;
    --field-hover: #8f8d8a;
    --field-disabled: #d1cfcd;
    --field-focus: #4a71ff;
    --field-highlight: rgba(109, 74, 255, 0.2);
    --border-norm: #cdcfd1;
    --border-weak: #e4e7ea;
    --background-norm: white;
    --background-weak: #f2f3f5;
    --background-strong: #e1e3e5;
    --interaction-default: transparent;
    --interaction-default-hover: rgba(192, 193, 194, .2);
    --interaction-default-active: rgba(190, 192, 194, .35);
    --shadow-norm-opacity: 0.1;
    --shadow-lifted-opacity: 0.16;
    --backdrop-norm: rgba(38, 42, 51, 0.48);
    --optional-scrollbar-thumb-color: #d1cfcd;
    --optional-scrollbar-thumb-hover-color: #c2bfbc;
    --optional-link-norm: initial;
    --optional-link-hover: initial;
    --optional-link-active: initial;
    --optional-main-border-color: transparent;
    --optional-email-item-read-background-color: #f7f9fa;
    --optional-email-item-selected-background-color: var(--interaction-norm-major-2);
    --optional-email-item-selected-icon-background-color: var(--interaction-norm-major-3);
    --optional-mini-calendar-today-color: initial;

    --base-color: #2d333f;
    --optional-header-background-color: var(--base-color);
    --optional-sidebar-background-color: var(--base-color);
}

* {
    scrollbar-color: inherit;
}

.meter-bar {
    background: rgba(255, 255, 255, .1);
}

/* Shift placeholder images to calm blue */
.view-column-detail img.hauto {
    filter: hue-rotate(-40deg) saturate(80%);
}

/* Don't show the white logo, just the text */
.logo-container svg.logo g:nth-child(2),
.logo-container svg.logo g:nth-child(3) {
    display: none;
    visibility: hidden;
    width: 0;
}

.logo-container svg.logo {
    transform: translateX(-35px) scale(1.25);
}