Duplicati Night Sky Theme

style.user.css

/* ==UserStyle==
@name         Duplicati Night Sky Theme
@description  Alternative Dark Theme for Duplicati
@namespace    github.com/Teraskull/a16e6482b8ca74ca79a2f13cb7137f88
@homepageURL  https://github.com/Teraskull/a16e6482b8ca74ca79a2f13cb7137f88
@supportURL   https://github.com/Teraskull/a16e6482b8ca74ca79a2f13cb7137f88
@updateURL    https://gist.github.com/Teraskull/a16e6482b8ca74ca79a2f13cb7137f88/raw/6d8eb1e2b0e7d86cb2452d04695b65d0467825dd/style.user.css
@author       Teraskull
@version      1.0.0
@preprocessor stylus
==/UserStyle== */

/* Change the following domain to match your Duplicati URL. */
@-moz-document url-prefix("http://duplicati.local:80/") {

    html {
        --white-color: #dee0ee;
        --grey-1: #292D3E;
        --grey-2: #1F2330;
        --grey-3: #383D51;
        --grey-8: #929ac9;
        --blue-2: #337ab7;
        --blue-8: #90ccff;
        --blue-9: #3ea6ff;
        --green-2: #1ec863;
    }


    /* ####################### */
    /* General background and header-footer */
    body .container .body .content.ng-scope>div.ng-scope {
        background-color: var(--grey-1);
        padding: 1em;
    }

    body.theme-dark {
        color: var(--white-color);
        background-color: var(--grey-2) !important;
    }

    body.theme-dark .header {
        background-color: var(--grey-1) !important;
    }

    body .footer,
    body.theme-dark .footer {
        background-color: var(--grey-1) !important;
        min-height: 50px !important;
        line-height: 50px !important;
        height: 50px !important;
    }

    body .container .footer .social ul li {
        margin-right: 1em;
        padding-top: 0.4em;
    }

    body .container .header a {
        color: var(--blue-8);
    }

    body .container .header a:hover {
        color: var(--blue-2);
    }

    body .container .header .state {
        color: var(--green-2);
        border: 1px var(--green-2) solid;
        background-color: var(--grey-2) !important;
    }

    .logo div.build-suffix {
        color: var(--green-2);
    }

    div.connection-lost div.content, div.modal-dialog div.content {
        background-color: var(--grey-1);
        border: 1px solid var(--grey-3);
    }

    div.connection-lost div.title, div.modal-dialog div.title {
        background-color: var(--grey-3);
        border: 1px solid var(--grey-3);
        color: var(--grey-8);
    }


    /* ####################### */
    /* Sidebar */
    body .container .body .mainmenu {
        background-color: var(--grey-1);
        padding: 1em;
        margin-left: 1.5em;
    }

    body .container .body .mainmenu>ul>li>a:hover {
        color: var(--white-color) !important;
        background-color: var(--grey-3) !important;
    }

    body.theme-dark .container .body .mainmenu>ul>li>a.active {
        color: var(--white-color) !important;
    }

    body .container .body .mainmenu>ul>li>a.active {
        background-color: var(--grey-3) !important;

    }

    body .container .body .mainmenu>ul>li>a {
        color: #90ccff !important;
    }

    body .container .body a {
        color: var(--blue-9);
    }

    body .container .body a:hover {
        color: var(--blue-8);
    }


    /* ####################### */
    /* Home */
    body .container .body .content .tasks .tasklist .task {
        background-color: var(--grey-1) !important;
    }

    body .container .body .content .tasks .tasklist dl {
        color: var(--grey-8);
    }

    body .container .body .content .tasks .tasklist dl.taskmenu dt {
        color: var(--white-color);
    }

    body .container .body .content .tasks .tasklist dl.taskmenu dd {
        border-bottom: 1px var(--grey-3) solid;
    }

    body .container .body .content .tasks .tasklist dl .action-link .ng-scope {
        color: var(--blue-9)
    }

    body .container .body .content .tasks .tasklist dl .action-link .ng-scope:hover {
        color: var(--blue-2)
    }

    body .container .body .content .tasks .tasklist dl.taskmenu p {
        color: var(--blue-9)
    }

    body .container .body .content .tasks .tasklist dl.taskmenu p:hover {
        color: var(--blue-2)
    }

    body .container .body .content .tasks .tasklist .task:last-child {
        border-bottom: 1px solid var(--grey-3);
    }


    /* ####################### */
    /* Add backup */
    h1, h2 {
        color: var(--green-2);
    }

    body .container .body .tools a {
        color: var(--blue-9);
    }

    body .container .body .tools a:hover {
        color: var(--blue-8);
    }

    body .container .body .content div.add form .input.password .tools ul li {
        color: var(--grey-8);
    }

    body .container .body .content div.add .steps-boxes .step1 li.strength.score-4, body .container .body .content div.restore .steps-boxes .step1 li.strength.score-4 {
        color: var(--green-2);
    }

    body.theme-dark form.styled input,
    body.theme-dark form.styled input[type="password"] {
        color: var(--grey-8);
        background-color: var(--grey-2);
    }

    form.styled input, form.styled textarea, form.styled select {
        color: var(--grey-8) !important;
        border: 1px var(--grey-3) solid !important;
        background-color: var(--grey-2) !important;
    }

    body .container .body .content div.add .steps .step span, body .container .body .content div.restore .steps .step span {
        border: 4px var(--blue-8) solid;
        background: var(--grey-3);
        color: var(--white-color);
    }

    body.theme-dark .container .body .content div.add .steps .step, body.theme-dark .container .body .content div.restore .steps .step {
        color: var(--blue-8);
    }

    body .container .body .content div.add .steps-legend li, body .container .body .content div.restore .steps-legend li {
        color: var(--white-color);
    }

    body .container .body .content div.add .steps .step.active span, body .container .body .content div.restore .steps .step.active span {
        border: 4px var(--blue-8) solid;
        background: var(--blue-8);
        color: var(--grey-3);
    }

    body .container .body .content div.add .steps-legend li.active, body .container .body .content div.restore .steps-legend li.active {
        color: var(--blue-8);
    }

    body .container .body .contextmenu {
        background: var(--grey-2);
        border: 1px var(--grey-3) solid;
    }

    body .container .body .contextmenu li a {
        color: var(--grey-8);
    }

    body .container .body .contextmenu li a:hover {
        background: var(--grey-3);
        color: var(--white-color);
    }

    body .container .body .ng-scope .input a {
        color: var(--blue-9);
    }

    body .container .body .ng-scope .input a:hover {
        color: var(--blue-8);
    }

    body.theme-dark .step3 source-folder-picker, body.theme-dark #folder_path_picker, body.theme-dark #restore_file_picker {
        background-color: var(--grey-2);
    }

    .step3 source-folder-picker, #folder_path_picker, #restore_file_picker {
        border: 1px solid var(--grey-3);
    }

    .advancedoptions li {
        border-top: 1px var(--grey-3) solid;
    }


    /* ####################### */
    /* Restore */
    .restorewizard form.styled div.subtext, .addwizard form.styled div.subtext {
        color: var(--grey-8);
    }


    /* ####################### */
    /* About */
    body .container .body ul.tabs .active a {
        color: var(--grey-3) !important;
    }

    body .container .body .content .prewrapped-text {
        color: var(--grey-8);
        background-color: var(--grey-2);
        padding: 1em;
    }

    body .container .body .content .logpage ul.entries li {
        border-bottom: 1px solid var(--grey-3);
    }

    .exceptiontext {
        font-family: monospace;
    }


    /* ####################### */
    /* Buttons */
    .button {
        color: var(--white-color) !important;
    }

    form.styled .buttons {
        float: inherit;
    }

    .button,
    body.theme-dark form.styled .buttons input,
    body.theme-dark form.styled .buttons a {
        background-color: #2E537B !important;
        border-color: #2E537B !important;
    }

    .button:hover,
    body.theme-dark form.styled .buttons input:hover,
    body.theme-dark form.styled .buttons a:hover {
        background-color: #2C4462 !important;
        border-color: #2C4462 !important;
    }


    /* ####################### */
    .fa-search:before {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    ::-webkit-input-placeholder {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    ::-moz-placeholder {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    :-ms-input-placeholder {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    ::-ms-input-placeholder {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    ::placeholder {
        color: rgba(146, 154, 201, 0.6) !important;
    }

    :focus-visible {
        outline: none;
    }
}