Last active
December 28, 2021 15:52
-
-
Save Teraskull/a16e6482b8ca74ca79a2f13cb7137f88 to your computer and use it in GitHub Desktop.
Duplicati Night Sky Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ==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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment