Skip to content

Instantly share code, notes, and snippets.

@Teraskull

Teraskull/style.user.css

Last active December 28, 2021 15:52
Show Gist options
  • Save Teraskull/a16e6482b8ca74ca79a2f13cb7137f88 to your computer and use it in GitHub Desktop.
Save Teraskull/a16e6482b8ca74ca79a2f13cb7137f88 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Teraskull revised this gist Dec 28, 2021. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions style.user.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    /* ==UserStyle==
    @name Duplicati Night Sky Theme
    @description Alternative Dark Theme for Duplicati
    @namespace github.com/Teraskull/
    @homepageURL https://github.com/Teraskull/
    @supportURL https://github.com/Teraskull/
    @updateURL https://github.com/Teraskull/
    @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
  2. Teraskull created this gist Dec 28, 2021.
    336 changes: 336 additions & 0 deletions style.user.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,336 @@
    /* ==UserStyle==
    @name Duplicati Night Sky Theme
    @description Alternative Dark Theme for Duplicati
    @namespace github.com/Teraskull/
    @homepageURL https://github.com/Teraskull/
    @supportURL https://github.com/Teraskull/
    @updateURL https://github.com/Teraskull/
    @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;
    }
    }