|
|
@ -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); |
|
|
|
} |