diff --git a/CSS/themes/duplicati/duplicati-base.css b/CSS/themes/duplicati/duplicati-base.css index 353686bd..0da998fd 100644 --- a/CSS/themes/duplicati/duplicati-base.css +++ b/CSS/themes/duplicati/duplicati-base.css @@ -1,30 +1,45 @@ -/* dP dP dP */ -/* 88 88 88 */ -/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */ -/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */ -/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */ -/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */ -/* 88 */ -/* dP */ - -/* Made by @gilbN */ -/* https://github.com/gilbN/theme.park */ +@import url("https://theme-park.dev/CSS/defaults/placeholders.css"); + +* { + outline: none !important; +} body { - background: var(--main-bg-color) !important; + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; color: var(--text) !important; } -.header { - background: var(--modal-header-color) !important; +body .container .header { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } -.footer { - background: var(--modal-footer-color) !important; +body .container .footer { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; } .mainmenu { - background: initial !important; + background: initial; } .mainmenu ul li a { @@ -36,27 +51,80 @@ body { color: var(--link-color-hover) !important; } -a { - color: var(--link-color) !important; +body .container .header .action-icons>.pause, body .container .header .action-icons-small>.pause { + background: url(https://dev.theme-park.dev/Resources/duplicati/pause.png); } -a:hover { - color: var(--link-color-hover) !important; +body .container .header .action-icons>.throttle, body .container .header .action-icons-small>.throttle { + background: url(https://dev.theme-park.dev/Resources/duplicati/throttle.png); +} + +body .container .body .content div.add .steps .step.active span, +body .container .body .content div.restore .steps .step.active span { + border: 4px var(--button-color) solid; + background: var(--button-color); + color: var(--button-text); +} + +body .container .body .content div.add .steps-legend li.active, +body .container .body .content div.restore .steps-legend li.active { + color: var(--link-color); +} + +body .container .body .content div.add .steps .step span, +body .container .body .content div.restore .steps .step span { + display: block; + border: 4px var(--button-color) solid; + background: var(--button-color); +} + +body .container .body .content div.add .steps-legend li, +body .container .body .content div.restore .steps-legend li { + color: var(--text-muted); +} + +body .container .body .content div.add .steps .step, +body .container .body .content div.restore .steps .step { + color: var(--button-text-hover); +} + +a, +a span:not(.tabs>li>a>span):not(.buttons>a>span), +body .container .body a { + color: var(--link-color); +} + +a:hover, +a span:hover:not(.tabs>li>a>span):not(.buttons>a>span) { + color: var(--link-color-hover); +} + +body .container .header a { + color: rgb(var(--accent-color)) +} +body .container .header a:hover { + color: var(--accent-color-hover) } .taskmenu dt { color: var(--text-hover) !important; } -dd { +dt { color: var(--text-hover) !important; } -.tasklist dd a, .tasklist dd p { +dd { + color: var(--text) !important; +} + +.tasklist dd a, +.tasklist dd p { color: var(--link-color) !important; } -.tasklist dd a:hover, .tasklist dd p:hover { +.tasklist dd a:hover, +.tasklist dd p:hover { color: var(--link-color-hover) !important; } @@ -74,30 +142,201 @@ dd { background: var(--button-color-hover) !important; } -input, select { - color: var(--button-text) !important; - border: none !important; - background: var(--modal-bg-color) !important; +input, +select, +form.styled input, +form.styled textarea, +form.styled select, +form.styled .input.select select { + color: var(--text); + border: none; + background: rgba(0, 0, 0, .25); } -input:focus { - outline: none !important; +form.styled input:focus, +form.styled textarea:focus { + color: var(--text-hover); + border: none; + background: rgba(0, 0, 0, .45); } -h1, h2 { - color: var(--text-hover) !important; +select:focus, +form.styled select:focus, +form.styled .input.select select:focus { + background: #1f1f1f; + color: var(--text-hover); + border: none; + } -.state { - background: var(--accent-color) !important; - color: var(--arr-queue-color) !important; - border-color: var(--arr-queue-color) !important; +h1, +h2 { + color: var(--text-hover); } -@media (max-width:1150px) and (-webkit-min-device-pixel-ratio:1.25),(max-width:1150px) and (min-resolution:192dpi),(max-width:1150px) and (min-resolution:1.25dppx) { +body .container .header .state { + background: rgb(var(--accent-color),.1); + color: var(--text); + border-color: rgb(var(--accent-color)); +} - .mainmenu { - background-color: var(--drop-down-menu-bg) !important; +/* DROP DOWN MENU */ +@media (max-width:1150px), +(max-width:1150px) and (min-resolution:192dpi), +(max-width:1150px) and (min-resolution:1.25dppx) { + body .container .body .mainmenu { + background: var(--drop-down-menu-bg) !important; } - + +} + +body .container .body .contextmenu { + display: none; + position: absolute; + background: var(--drop-down-menu-bg); + border: 1px rgba(255, 255, 255, 0.1) solid; + box-shadow: 0 4px 8px rgb(0 0 0 / 30%); + z-index: 200; + padding: 5px; +} + +body .container .body .contextmenu li a:hover { + background: rgba(255, 255, 255, 0.25); + color: var(--text-hover); +} + +body .container .body .mainmenu>ul>li>a.home { + background: url(https://dev.theme-park.dev/Resources/duplicati/home.png) no-repeat 8px 7px; +} +body .container .body .mainmenu>ul>li>a.add { + background: url(https://dev.theme-park.dev/Resources/duplicati/add.png) no-repeat 8px 7px; +} +body .container .body .mainmenu>ul>li>a.restore { + background: url(https://dev.theme-park.dev/Resources/duplicati/restore.png) no-repeat 8px 7px; +} +body .container .body .mainmenu>ul>li>a.settings { + background: url(https://dev.theme-park.dev/Resources/duplicati/settings.png) no-repeat 8px 7px; +} +body .container .body .mainmenu>ul>li>a.about { + background: url(https://dev.theme-park.dev/Resources/duplicati/about.png) no-repeat 8px 7px; +} +body .container .body .mainmenu>ul>li>a.logout { + background: url(https://dev.theme-park.dev/Resources/duplicati/logout.png) no-repeat 8px 7px; } + +#threedotmenu_add_destination > ul > li > a > span { + color: var(--text) !important; +} + + +/* MODAL */ + +div.connection-lost div.title, +div.modal-dialog div.title { + border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--modal-bg-color); + border-radius: 5px 5px 0 0; + padding: 10px 20px; + font-weight: bold; + color: var(--text); + text-align: center; +} + +div.connection-lost div.content, +div.modal-dialog div.content { + border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--modal-bg-color); + padding: 20px; +} + + +/* BUTTONS */ + +#login-button { + cursor: pointer; +} + +.button, +form.styled .buttons input, +form.styled .buttons a { + display: block; + background: var(--button-color); + color: var(--button-text) !important; + padding: 5px 15px; + float: right; + margin-left: 10px; + cursor: pointer; + width: auto; + border: none; + font-family: 'Clear Sans', sans-serif; + font-size: 16px; + font-weight: 300; + border-radius: 0; +} + +.button:hover, +form.styled .buttons input:hover, +form.styled .buttons a:hover { + background: var(--button-color-hover); + color: var(--button-text-hover) !important; +} + +ul.tabs>li.active>a { + background: var(--button-color-hover); + color: var(--button-text-hover) !important; +} + +ul.tabs>li.active { + background-color: var(--button-color); + color: var(--button-text-hover); +} + + +ul.tabs>li { + display: inline; + margin-right: 10px; + border: 1px solid var(--button-color); + padding: 5px; +} + +/* FOLDER TREE*/ +.tree-view li div.selected { + border-color: rgba(255, 255, 255, .1); + background-color: rgba(252, 252, 252, .25); +} + + +/* PROGRESS BAR */ +body .container .header .state .progress-bar { + background: rgba(var(--accent-color), 0.25); +} + +/* LOGIN */ +#login h2 { + background: rgba(255, 255, 255, .15); + color: var(--text); +} + +#login fieldset p { + color: var(--text-hover); +} + +#login fieldset { + background-color: rgba(255, 255, 255, .15); +} + +#login fieldset input[type="submit"] { + background: var(--button-color); + color: var(--button-text); +} + +#login fieldset input[type="submit"]:hover { + background: var(--button-color-hover); + color: var(--button-text-hover); +} + +#login fieldset input[type="email"], +#login fieldset input[type="password"] { + background: rgba(0, 0, 0, .25); + color: var(--text); +} \ No newline at end of file diff --git a/Resources/duplicati/about.png b/Resources/duplicati/about.png new file mode 100644 index 00000000..5779ca7c Binary files /dev/null and b/Resources/duplicati/about.png differ diff --git a/Resources/duplicati/add.png b/Resources/duplicati/add.png new file mode 100644 index 00000000..e0735816 Binary files /dev/null and b/Resources/duplicati/add.png differ diff --git a/Resources/duplicati/home.png b/Resources/duplicati/home.png new file mode 100644 index 00000000..637da01e Binary files /dev/null and b/Resources/duplicati/home.png differ diff --git a/Resources/duplicati/logout.png b/Resources/duplicati/logout.png new file mode 100644 index 00000000..931dcdea Binary files /dev/null and b/Resources/duplicati/logout.png differ diff --git a/Resources/duplicati/pause.png b/Resources/duplicati/pause.png new file mode 100644 index 00000000..be62518e Binary files /dev/null and b/Resources/duplicati/pause.png differ diff --git a/Resources/duplicati/restore.png b/Resources/duplicati/restore.png new file mode 100644 index 00000000..60971613 Binary files /dev/null and b/Resources/duplicati/restore.png differ diff --git a/Resources/duplicati/settings.png b/Resources/duplicati/settings.png new file mode 100644 index 00000000..e897fdea Binary files /dev/null and b/Resources/duplicati/settings.png differ diff --git a/Resources/duplicati/throttle.png b/Resources/duplicati/throttle.png new file mode 100644 index 00000000..678d3f59 Binary files /dev/null and b/Resources/duplicati/throttle.png differ