mirror of
https://github.com/duplicati/duplicati.git
synced 2025-11-28 11:30:24 +08:00
312f4dabf5
This allows the user to sort the backups by Create Order (ID), Name, LastRun or Destination Type. The NGClient implementation will be committed on its own repository. This is a no breaking change, both legacy client on the new api, or new client on legacy API will work. The order is not persisted across sessions, defaulting to order by Create Order. Note: Less CSS re-compiled.
3119 lines
91 KiB
Text
3119 lines
91 KiB
Text
/* duplicati 2.0 less | Alex Franzelin 2015 */
|
|
@import 'fonts.less';
|
|
@import 'form.less';
|
|
@import 'font-awesome/font-awesome.less';
|
|
|
|
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
|
.flexbox() {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: flexbox;
|
|
display: flex;
|
|
display: flex;
|
|
}
|
|
|
|
.flex(@grow: 0; @shrink: 1; @basis: auto) {
|
|
-webkit-box-flex: @grow @shrink @basis;
|
|
-moz-box-flex: @grow @shrink @basis;
|
|
flex: @grow @shrink @basis;
|
|
}
|
|
|
|
* {
|
|
font-family: 'Clear Sans', sans-serif;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: 300;
|
|
color: @hColor;
|
|
}
|
|
|
|
h1 {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
border: none; /* Remove default border */
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-bottom: 1px #ddd solid;
|
|
}
|
|
|
|
textarea {
|
|
max-width: 94%;
|
|
}
|
|
|
|
.external-link-image {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
height: 16px;
|
|
width: 16px;
|
|
background: url('../img/external-link-hover.png');
|
|
background-size: 16px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/external-link-hover_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/external-link-hover_3x.png');
|
|
}
|
|
}
|
|
|
|
a {
|
|
.external-link-image {
|
|
background: url('../img/external-link.png');
|
|
background-size: 16px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/external-link_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/external-link_3x.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
a:hover {
|
|
.external-link-image {
|
|
background: url('../img/external-link-hover.png');
|
|
background-size: 16px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/external-link-hover_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/external-link-hover_3x.png');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
display: block;
|
|
background: @lColor;
|
|
color: white !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 {
|
|
background: darken(@lColor, 10%);
|
|
}
|
|
|
|
.step3 source-folder-picker, #folder_path_picker, #restore_file_picker {
|
|
display: block;
|
|
border: 1px solid lightgray;
|
|
padding: 2px;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.not-clickable {
|
|
cursor: default !important;
|
|
|
|
> a, span, div {
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
|
|
.ui-match {
|
|
font-weight: bold;
|
|
color: darkgreen;
|
|
}
|
|
|
|
wait-area {
|
|
min-width: 350px;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.prewrapped-text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.exceptiontext {
|
|
background-color: lightgray;
|
|
color: black;
|
|
}
|
|
|
|
.backup-result {
|
|
width: 90%;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-auto-rows: minmax(50px, auto);
|
|
margin: 0 auto;
|
|
|
|
div .horizontal-rule {
|
|
width: 100%;
|
|
border-bottom: 1px solid @border;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.box {
|
|
margin: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.title {
|
|
color: darken(@hColor, 10%);
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.item {
|
|
display: block;
|
|
|
|
.key {
|
|
color: @hColor;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.value {
|
|
color: @tColor;
|
|
}
|
|
|
|
.expanded {
|
|
padding: 0 10px 0 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.one {
|
|
border-right: 1px solid @border;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.two {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.wide {
|
|
grid-column: span 2;
|
|
border-top: 1px solid @border;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.three {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.four {
|
|
grid-row: 3;
|
|
margin-bottom: 10px;
|
|
|
|
.log-expand-copy {
|
|
display: flex;
|
|
margin-bottom: 6px;
|
|
|
|
a {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
max-width: 99%;
|
|
min-height: 420px;
|
|
padding: 8px 6px;
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
|
|
.success-color {
|
|
color: #390;
|
|
}
|
|
|
|
.error-color {
|
|
color: #c00;
|
|
}
|
|
|
|
.warning-color {
|
|
color: #fc0;
|
|
}
|
|
|
|
.fatal-color {
|
|
color: #900;
|
|
}
|
|
|
|
ul.tabs {
|
|
margin-bottom: 10px;
|
|
|
|
> li {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
border: 1px solid @lColor;
|
|
padding: 5px;
|
|
|
|
&.active {
|
|
background-color: @lColor;
|
|
color: white;
|
|
|
|
> a {
|
|
background-color: @lColor;
|
|
color: white;
|
|
}
|
|
|
|
&.disabled {
|
|
border: 1px solid lightgray;
|
|
background-color: lightgray;
|
|
color: grey;
|
|
cursor: default;
|
|
|
|
> a {
|
|
background-color: lightgray;
|
|
color: grey;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.licenses {
|
|
> ul {
|
|
list-style: initial;
|
|
margin: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
a.itemlink {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.logpage {
|
|
ul.entries {
|
|
list-style: initial;
|
|
margin: 10px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.entries {
|
|
div.entryline.clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.entries.livedata {
|
|
li.expanded {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
border: 1px solid @lColor;
|
|
padding: 5px;
|
|
background-color: @lColor;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.exportpage {
|
|
.checkbox {
|
|
input {
|
|
width: auto;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.commandline {
|
|
div {
|
|
background-color: lightgray;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.themelink {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
ul.notification {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
width: 480px;
|
|
}
|
|
|
|
.notification {
|
|
.title {
|
|
border: 1px solid @lColor;
|
|
background-color: @lColor;
|
|
border-radius: 5px 5px 0 0;
|
|
padding: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
font-weight: bold;
|
|
color: lightgray;
|
|
width: 100%;
|
|
text-align: center;
|
|
clear: both;
|
|
}
|
|
|
|
.content {
|
|
background-color: white;
|
|
border: 1px solid @lColor;
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
.message {
|
|
width: 100%;
|
|
color: black;
|
|
}
|
|
|
|
.button {
|
|
padding: 2px 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.clear {
|
|
clear: right;
|
|
height: 1px;
|
|
}
|
|
|
|
.error {
|
|
.title {
|
|
border-color: red;
|
|
background-color: red;
|
|
}
|
|
|
|
.content {
|
|
border-color: red;
|
|
}
|
|
|
|
.button {
|
|
border-color: red;
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
.title {
|
|
background-color: orange;
|
|
border-color: orange;
|
|
}
|
|
|
|
.button {
|
|
background-color: orange;
|
|
border-color: orange;
|
|
}
|
|
|
|
.content {
|
|
border-color: orange;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filepicker {
|
|
height: 200px;
|
|
}
|
|
|
|
.resizable {
|
|
margin-bottom: 6px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.advanced-toggle {
|
|
float: right;
|
|
margin-right: 25px;
|
|
line-height: 37px;
|
|
}
|
|
|
|
.advancedoptions {
|
|
li {
|
|
clear: both;
|
|
margin-bottom: 10px;
|
|
padding: 10px 0;
|
|
border-top: 1px lightgray solid;
|
|
}
|
|
}
|
|
|
|
.advancedentry {
|
|
.multiple {
|
|
display: inline;
|
|
}
|
|
|
|
.shortname {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 300px;
|
|
}
|
|
|
|
select {
|
|
width: 300px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin-top: 13px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Anchor link to remove an option */
|
|
.delete-item {
|
|
.button;
|
|
}
|
|
|
|
.longdescription {
|
|
--margin-block: 10px; /* Magic number */
|
|
|
|
margin-top: var(--margin-block);
|
|
margin-left: 190px;
|
|
clear: both;
|
|
font-style: italic;
|
|
white-space: pre-wrap;
|
|
|
|
.longdescription__item {
|
|
margin-block: 0 var(--margin-block);
|
|
}
|
|
|
|
.longdescription__default {
|
|
margin-block: var(--margin-block) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings {
|
|
div.sublabel {
|
|
clear: both;
|
|
padding: 0 31px;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
img.mainlogo {
|
|
height: 64px;
|
|
width: 64px;
|
|
float: left;
|
|
padding-right: 8px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
div.logotext {
|
|
float: left;
|
|
}
|
|
|
|
a {
|
|
float: left;
|
|
display: block;
|
|
line-height: normal;
|
|
}
|
|
|
|
div.build-suffix {
|
|
clear: both;
|
|
display: inline;
|
|
float: left;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
div.powered-by {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
line-height: 16px;
|
|
float: left;
|
|
padding: 0;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.note {
|
|
& p {
|
|
/* Override default block margin */
|
|
margin-block: 0.5rem; /* Magic number */
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixed-width-font {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.warning {
|
|
margin: 10px;
|
|
font-style: italic;
|
|
color: #f49b42;
|
|
}
|
|
|
|
div.captcha {
|
|
.details {
|
|
padding-top: 10px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 180px;
|
|
}
|
|
|
|
.code {
|
|
background: lightgray;
|
|
color: black;
|
|
font-family: monospace;
|
|
font-size: xx-large;
|
|
padding: 10px;
|
|
}
|
|
|
|
.answer {
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
.pauseoptions {
|
|
div.sublabel {
|
|
clear: both;
|
|
padding: 0 31px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.input.checkbox {
|
|
margin-top: 10px;
|
|
input.checkbox {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
label {
|
|
line-height: normal;
|
|
padding: 0 15px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.centered-text {
|
|
text-align: center;
|
|
}
|
|
|
|
body {
|
|
color: @tColor;
|
|
|
|
.container {
|
|
min-height: 100%;
|
|
position: relative;
|
|
|
|
.header {
|
|
line-height: 70px;
|
|
background: @headerBg;
|
|
overflow: hidden;
|
|
height: 70px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
|
|
a {
|
|
color: @lColor;
|
|
}
|
|
|
|
a:hover,
|
|
a.active {
|
|
color: darken(@tColor, 25%);
|
|
}
|
|
|
|
button {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-size: 26px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
float: left;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.statepadding {
|
|
padding-right: 90px;
|
|
margin-left: 320px;
|
|
}
|
|
|
|
.state {
|
|
float: left;
|
|
color: darken(@hColor, 10%);
|
|
width: 595px;
|
|
padding: 13px 15px;
|
|
margin: 10px 20px;
|
|
border: 1px darken(@hColor, 10%) solid;
|
|
font-weight: 300;
|
|
font-size: 18px;
|
|
overflow: hidden;
|
|
line-height: normal;
|
|
display: inline-block;
|
|
background-color: white;
|
|
text-overflow: ellipsis;
|
|
position: relative;
|
|
height: 25px;
|
|
|
|
strong {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
span {
|
|
display: inline;
|
|
}
|
|
|
|
.button {
|
|
position: static;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 10;
|
|
margin-right: 40px;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.buttons {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 26px;
|
|
margin: 13px 15px;
|
|
|
|
button {
|
|
display: block;
|
|
}
|
|
|
|
.stop {
|
|
background: url('../img/progress-stop.png');
|
|
background-size: 100%;
|
|
z-index: 10;
|
|
position: relative;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/progress-stop_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/progress-stop_3x.png');
|
|
}
|
|
}
|
|
|
|
.resume {
|
|
background: url('../img/progress-resume.png');
|
|
background-size: 100%;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/progress-resume_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/progress-resume_3x.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: fade(@hColor, 25%);
|
|
z-index: 5;
|
|
}
|
|
|
|
.task-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: help;
|
|
}
|
|
|
|
.task-state-info {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.action-icons {
|
|
display: inline-block;
|
|
line-height: normal;
|
|
margin: 10px 0;
|
|
padding: 13px 0;
|
|
float: left;
|
|
}
|
|
|
|
.action-icons-small {
|
|
display: none;
|
|
float: right;
|
|
margin-top: 21px;
|
|
line-height: normal;
|
|
}
|
|
|
|
.action-icons,
|
|
.action-icons-small {
|
|
> button {
|
|
display: inline-block;
|
|
}
|
|
|
|
> .pause {
|
|
background: url('../img/pause.png');
|
|
background-size: 100%;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/pause_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/pause_3x.png');
|
|
}
|
|
}
|
|
|
|
> .pause.active {
|
|
background: url('../img/resume.png');
|
|
background-size: 100%;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/resume_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/resume_3x.png');
|
|
}
|
|
}
|
|
|
|
> .throttle {
|
|
background: url('../img/throttle.png');
|
|
background-size: 100%;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/throttle_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/throttle_3x.png');
|
|
}
|
|
}
|
|
|
|
> .throttle.inactive {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
|
|
.about-header {
|
|
float: right;
|
|
padding-right: 20px;
|
|
overflow: hidden;
|
|
|
|
ul {
|
|
overflow: hidden;
|
|
list-style: none;
|
|
|
|
li {
|
|
float: right;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
min-height: 500px;
|
|
padding-top: 120px;
|
|
padding-bottom: 70px;
|
|
|
|
a {
|
|
color: @lColor;
|
|
}
|
|
|
|
.mainmenu {
|
|
width: 260px;
|
|
padding-left: 40px;
|
|
float: left;
|
|
position: fixed;
|
|
|
|
> ul {
|
|
> li {
|
|
position: relative;
|
|
|
|
> a {
|
|
font-size: 22px;
|
|
font-weight: 300;
|
|
padding: 5px 10px 5px 55px;
|
|
display: block;
|
|
}
|
|
|
|
> a:hover {
|
|
color: white;
|
|
}
|
|
|
|
> a.active {
|
|
color: white;
|
|
}
|
|
|
|
> a.add {
|
|
background: url('../img/mainmenu/add.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/add_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/add_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.restore {
|
|
background: url('../img/mainmenu/restore.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/restore_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/restore_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.resume {
|
|
background: url('../img/mainmenu/resume.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/resume_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/resume_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.settings {
|
|
background: url('../img/mainmenu/settings.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/settings_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/settings_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.logout {
|
|
background: url('../img/mainmenu/logout.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/logout_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/logout_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.home {
|
|
background: url('../img/mainmenu/home.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/home_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/home_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.about {
|
|
background: url('../img/mainmenu/about.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/about_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/about_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.home.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/home.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/home_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/home_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.add.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/add.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/add_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/add_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.restore.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/restore.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/restore_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/restore_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.resume.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/resume.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/resume_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/resume_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.settings.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/settings.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/settings_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/settings_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.about.active {
|
|
background: lighten(@lColor, 15%) url('../img/mainmenu/over/about.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/about_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/about_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.add:hover {
|
|
background: @lColor url('../img/mainmenu/over/add.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/add_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/add_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.restore:hover {
|
|
background: @lColor url('../img/mainmenu/over/restore.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/restore_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/restore_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.resume:hover {
|
|
background: @lColor url('../img/mainmenu/over/resume.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/resume_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/resume_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.settings:hover {
|
|
background: @lColor url('../img/mainmenu/over/settings.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/settings_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/settings_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.logout:hover {
|
|
background: @lColor url('../img/mainmenu/over/logout.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/logout_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/logout_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.home:hover {
|
|
background: @lColor url('../img/mainmenu/over/home.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/home_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/home_3x.png');
|
|
}
|
|
}
|
|
|
|
> a.about:hover {
|
|
background: @lColor url('../img/mainmenu/over/about.png') no-repeat 8px 7px;
|
|
background-size: 27px 26px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/mainmenu/over/about_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/mainmenu/over/about_3x.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
li.hr-top {
|
|
padding-top: 25px;
|
|
margin-top: 25px;
|
|
border-top: 1px @headerBg solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.contextmenu_container {
|
|
position: relative;
|
|
}
|
|
|
|
.contextmenu {
|
|
display: none;
|
|
position: absolute;
|
|
background: white;
|
|
border: 1px @headerBg solid;
|
|
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
|
|
z-index: 200;
|
|
padding: 5px;
|
|
|
|
li {
|
|
a {
|
|
color: @lColor;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
display: block;
|
|
min-width: 200px;
|
|
padding: 4px 10px;
|
|
white-space: nowrap;
|
|
padding-left: 45px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
a:hover {
|
|
background: @lColor;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contextmenu.open {
|
|
display: block;
|
|
}
|
|
|
|
.content {
|
|
float: left;
|
|
padding-left: 350px;
|
|
padding-bottom: 50px;
|
|
max-width: 70%;
|
|
|
|
ul.tabs > li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tasks {
|
|
.orderbox
|
|
{
|
|
float: right;
|
|
}
|
|
|
|
.tasklist {
|
|
.task {
|
|
border-top: 1px solid #eee;
|
|
padding-top: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.task:last-child {
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.task:first-child {
|
|
padding-top: 0;
|
|
border-top: 0 none;
|
|
}
|
|
|
|
.progress-small {
|
|
text-align: center;
|
|
height: 18px;
|
|
background: rgb(164 209 235 / 50%);
|
|
}
|
|
|
|
.progress-small-bg {
|
|
border: 1px #65b1dd solid;
|
|
width: 200px;
|
|
}
|
|
|
|
a {
|
|
font-size: 30px;
|
|
font-weight: 300;
|
|
display: inline-block;
|
|
|
|
&.action-link {
|
|
font-size: 14px;
|
|
background: none;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
dl {
|
|
padding-left: 55px;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
|
|
dt,
|
|
dd {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
dt {
|
|
clear: both;
|
|
font-weight: 500;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
dl.taskmenu {
|
|
p {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
color: @lColor;
|
|
cursor: pointer;
|
|
}
|
|
|
|
dt {
|
|
float: left;
|
|
margin-right: 10px;
|
|
margin-bottom: 0;
|
|
padding: 5px 8px;
|
|
color: @tColor;
|
|
cursor: pointer;
|
|
clear: none;
|
|
}
|
|
|
|
dt.active,
|
|
dt:hover {
|
|
/* background: @lColor; */
|
|
|
|
/* color: white; */
|
|
}
|
|
|
|
dd {
|
|
clear: both;
|
|
float: none;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px #ddd solid;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* TODO: merge these blocks with below */
|
|
div.add,
|
|
div.restore {
|
|
--legends-width: 700px;
|
|
--legends-padding-left: calc(calc(700px - var(--legends-width)) / 2);
|
|
--circle-width: 43px;
|
|
--step-width: calc(var(--legends-width) / var(--legends-steps));
|
|
|
|
.steps {
|
|
margin-left: calc(calc(calc(var(--step-width) - var(--circle-width)) / 2) + var(--legends-padding-left));
|
|
|
|
& button,
|
|
& div {
|
|
padding-left: calc(var(--step-width) - var(--circle-width));
|
|
padding-right: 0;
|
|
|
|
&:first-child {
|
|
padding-left: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.steps-legend {
|
|
padding-left: var(--legends-padding-left);
|
|
|
|
li {
|
|
width: var(--step-width);
|
|
}
|
|
}
|
|
}
|
|
|
|
div.add {
|
|
--legends-steps: 5;
|
|
}
|
|
|
|
div.restore {
|
|
--legends-steps: 2;
|
|
|
|
&.restore-direct {
|
|
--legends-steps: 4;
|
|
|
|
.steps-legend {
|
|
padding-left: 20px; /* Align "Backup location" */
|
|
}
|
|
}
|
|
}
|
|
|
|
div.add,
|
|
div.restore {
|
|
.steps {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
& button,
|
|
& div {
|
|
float: left;
|
|
background: url('../img/steps/line-out.png') no-repeat top left;
|
|
background-size: 485px 24px;
|
|
color: #c7e5f6;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/steps/line-out_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/steps/line-out_3x.png');
|
|
}
|
|
|
|
span {
|
|
--size: 35px;
|
|
|
|
display: block;
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
border-color: #c7e5f6;
|
|
background: white;
|
|
border-radius: 50%;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
text-align: center;
|
|
font-size: 22px;
|
|
line-height: var(--size);
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.active {
|
|
color: @lColor;
|
|
|
|
span {
|
|
border-color: @lColor;
|
|
background: @lColor;
|
|
color: white;
|
|
}
|
|
|
|
h2 {
|
|
color: @lColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.steps-legend {
|
|
overflow: hidden;
|
|
padding-bottom: 50px;
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
color: #c7e5f6;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
float: left;
|
|
padding-top: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
li.active {
|
|
color: @lColor;
|
|
}
|
|
}
|
|
|
|
.steps-boxes {
|
|
padding-left: 40px;
|
|
|
|
.step {
|
|
display: none;
|
|
}
|
|
|
|
.step.active {
|
|
display: block;
|
|
}
|
|
|
|
.box.browser {
|
|
.checklinks {
|
|
a {
|
|
float: left;
|
|
margin-left: 20px;
|
|
color: @tColor;
|
|
|
|
i {
|
|
border: 2px solid;
|
|
border-color: @tColor;
|
|
border-radius: 2px;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
vertical-align: top;
|
|
width: 18px;
|
|
}
|
|
}
|
|
|
|
a.inactive {
|
|
color: lighten(@tColor, 20%);
|
|
cursor: default;
|
|
|
|
i {
|
|
border-color: lighten(@tColor, 20%);
|
|
}
|
|
}
|
|
|
|
a:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.input.overlayButton {
|
|
padding-top: 10px;
|
|
max-width: 100%;
|
|
|
|
input#sourcePath {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
height: 37px;
|
|
}
|
|
|
|
a.button {
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box.filters {
|
|
.input.link {
|
|
a {
|
|
color: @tColor;
|
|
|
|
i {
|
|
border: 2px solid;
|
|
border-color: @tColor;
|
|
border-radius: 2px;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
vertical-align: top;
|
|
width: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul#simplefilterlist {
|
|
overflow: hidden;
|
|
padding-bottom: 15px;
|
|
|
|
li {
|
|
overflow: hidden;
|
|
clear: both;
|
|
padding-bottom: 25px;
|
|
|
|
select {
|
|
width: 200px;
|
|
margin-right: 5px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
input {
|
|
width: calc(100% - 280px);
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.step1 {
|
|
li.strength.score-0 {
|
|
color: #f00;
|
|
}
|
|
|
|
li.strength.score-1 {
|
|
color: #f70;
|
|
}
|
|
|
|
li.strength.score-2 {
|
|
color: #aa0;
|
|
}
|
|
|
|
li.strength.score-3 {
|
|
color: #070;
|
|
}
|
|
|
|
li.strength.score-4 {
|
|
color: #427e27;
|
|
}
|
|
|
|
li.strength.score-x {
|
|
color: #f00;
|
|
}
|
|
}
|
|
|
|
.step5 {
|
|
div.input.maxSize input.number,
|
|
div.input.keepBackups input.number {
|
|
width: 60px;
|
|
}
|
|
|
|
.hint, .retention-options {
|
|
clear: both;
|
|
margin-left: 190px;
|
|
margin-top: 50px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.retention-options {
|
|
input {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.advancedoptions {
|
|
padding-top: 15px;
|
|
clear: both;
|
|
|
|
li {
|
|
border-top: none;
|
|
}
|
|
|
|
li.advancedentry {
|
|
border-bottom: 1px solid lightgray;
|
|
}
|
|
|
|
li:last-child {
|
|
padding-top: 0;
|
|
|
|
select {
|
|
max-width: 400px;
|
|
}
|
|
}
|
|
|
|
label {
|
|
line-height: normal;
|
|
}
|
|
|
|
input,
|
|
select {
|
|
width: auto;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.advanced-toggle {
|
|
color: @tColor;
|
|
line-height: normal;
|
|
margin-top: 16px;
|
|
clear: both;
|
|
float: left;
|
|
|
|
i.fa {
|
|
border: 2px solid;
|
|
border-color: @tColor;
|
|
border-radius: 2px;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
vertical-align: top;
|
|
width: 18px;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
box-sizing: border-box;
|
|
clear: both;
|
|
margin-top: 15px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
form {
|
|
padding-bottom: 50px;
|
|
overflow: hidden;
|
|
|
|
.input.password {
|
|
.tools {
|
|
clear: both;
|
|
padding-left: 190px;
|
|
padding-top: 10px;
|
|
|
|
ul {
|
|
overflow: hidden;
|
|
|
|
li {
|
|
float: left;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
li.strength.useless {
|
|
color: red;
|
|
}
|
|
|
|
li.strength.average {
|
|
color: yellow;
|
|
}
|
|
|
|
li.strength.good {
|
|
color: @lColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input.multiple {
|
|
input,
|
|
select {
|
|
width: auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* TODO: investigate if this block can be merged with one on form.less */
|
|
select {
|
|
--padding-block: 5px;
|
|
|
|
padding: var(--padding-block) 12px;
|
|
line-height: calc(var(--height) - calc(var(--padding-block) * 2));
|
|
}
|
|
}
|
|
|
|
.input.overlayButton {
|
|
overflow: hidden;
|
|
position: relative;
|
|
max-width: 446px;
|
|
|
|
input {
|
|
width: 347px;
|
|
}
|
|
|
|
a.button {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 7px 12px 8px;
|
|
}
|
|
}
|
|
|
|
.input.checkbox.multiple {
|
|
strong {
|
|
display: block;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
float: none;
|
|
width: auto;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
input {
|
|
width: auto;
|
|
display: inline-block;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
float: none;
|
|
width: 635px;
|
|
padding-top: 30px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.add .step2,
|
|
div.restore .step1,
|
|
.commandline {
|
|
/* .step2: "destination" on adding/editing backup task
|
|
.step1: "backup location" on a direct restore task
|
|
.commandline: the form on "Target URL >"
|
|
TODO: integrate with form.less after investigation */
|
|
.input.select {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
justify-content: flex-start;
|
|
grid-template-areas:
|
|
"label server"
|
|
". custom"; /* Adding an empty block ensures the grid area 'server' and 'custom' are aligned. */
|
|
|
|
label {
|
|
grid-area: label;
|
|
}
|
|
|
|
select {
|
|
grid-area: server;
|
|
}
|
|
|
|
input {
|
|
grid-area: custom;
|
|
|
|
/* Add gap between this input area and the select
|
|
element above. Avoid using the row-gap property
|
|
as it sets the gap even if this input area does
|
|
not exist. */
|
|
margin-top: 10px; /* Magic number */
|
|
}
|
|
}
|
|
|
|
.input.text {
|
|
#generic_server {
|
|
width: 335px;
|
|
}
|
|
|
|
#generic_port {
|
|
width: 50px;
|
|
margin-left: 10px; /* Magic number */
|
|
}
|
|
}
|
|
}
|
|
|
|
div.headerthreedotmenu {
|
|
margin: 20px 0;
|
|
|
|
h2 {
|
|
display: inline;
|
|
}
|
|
|
|
.contextmenu_container {
|
|
float: right;
|
|
}
|
|
|
|
.contextmenu {
|
|
left: auto;
|
|
right: 0;
|
|
top: auto;
|
|
}
|
|
|
|
.threedotmenubutton {
|
|
padding: 5px;
|
|
}
|
|
}
|
|
|
|
.expandable {
|
|
margin: 20px 0;
|
|
|
|
h2 {
|
|
display: inline;
|
|
}
|
|
|
|
img {
|
|
padding: 0 6px;
|
|
}
|
|
}
|
|
|
|
div.settings {
|
|
.input.mixed.multiple,
|
|
.input.checkbox {
|
|
input.checkbox {
|
|
width: auto;
|
|
}
|
|
|
|
select {
|
|
width: auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
label {
|
|
line-height: normal;
|
|
padding: 0 15px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logpage {
|
|
ul.tabs {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
ul.entries {
|
|
li {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid @border;
|
|
}
|
|
}
|
|
|
|
ul.backuplog {
|
|
list-style: none;
|
|
}
|
|
}
|
|
|
|
.about-general {
|
|
.about-general__block {
|
|
margin-block: 1rem;
|
|
|
|
&:first-child {
|
|
margin-top: 10px; /* See: ul.tabs */
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.prewrapped-text {
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: @headerBg;
|
|
min-height: 70px;
|
|
line-height: 70px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
a {
|
|
color: @lColor;
|
|
}
|
|
|
|
.about-footer {
|
|
float: left;
|
|
overflow: hidden;
|
|
padding-right: 20px;
|
|
display: none;
|
|
|
|
span {
|
|
display: block;
|
|
float: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
ul {
|
|
float: left;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
.social {
|
|
float: right;
|
|
|
|
ul {
|
|
overflow: hidden;
|
|
float: right;
|
|
padding-left: 20px;
|
|
padding-right: 10px;
|
|
|
|
li {
|
|
float: right;
|
|
margin-right: 10px;
|
|
padding-top: 5px;
|
|
|
|
img {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
img:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.themelink {
|
|
float: right;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#modal-menu {
|
|
max-width: 400px;
|
|
|
|
a {
|
|
color: @lColor;
|
|
font-size: 20px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Modal windows */
|
|
.remodal {
|
|
padding: 30px;
|
|
box-shadow: 0 2px 7px rgb(0 0 0 / 30%);
|
|
background: white;
|
|
display: none;
|
|
|
|
form {
|
|
.buttons {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.remodal-wrapper .remodal {
|
|
display: block;
|
|
}
|
|
|
|
span.info {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
background: @lColor;
|
|
border-radius: 50%;
|
|
width: 15px;
|
|
height: 15px;
|
|
vertical-align: super;
|
|
color: white;
|
|
line-height: 15px;
|
|
margin-left: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.nofloat {
|
|
float: none !important;
|
|
}
|
|
|
|
div.blocker,
|
|
div.connection-lost,
|
|
div.modal-dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
div.blocker {
|
|
z-index: 5000;
|
|
background-color: #000;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
#connection-lost-blocker {
|
|
z-index: 5100;
|
|
}
|
|
|
|
#connection-lost-dialog {
|
|
z-index: 5200;
|
|
}
|
|
|
|
div.connection-lost,
|
|
div.modal-dialog {
|
|
z-index: 5001;
|
|
.flexbox;
|
|
|
|
-webkit-box-pack: center;
|
|
-moz-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-moz-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
|
|
div.info {
|
|
min-width: 310px;
|
|
max-width: 650px;
|
|
margin: 5px;
|
|
}
|
|
|
|
div.title {
|
|
border: 1px solid #65b1dd;
|
|
background-color: #65b1dd;
|
|
border-radius: 5px 5px 0 0;
|
|
padding: 10px 20px;
|
|
font-weight: bold;
|
|
color: lightgray;
|
|
text-align: center;
|
|
}
|
|
|
|
div.content {
|
|
background-color: white;
|
|
border: 1px solid white;
|
|
padding: 20px;
|
|
|
|
/* Reset default margin */
|
|
& p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* Reset default margin */
|
|
& p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
border-radius: 0 0 5px 5px;
|
|
padding-top: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
form {
|
|
margin-top: 15px;
|
|
|
|
textarea {
|
|
height: 130px;
|
|
width: 420px;
|
|
padding: 10px 12px;
|
|
border: 1px #d8d8d8 solid;
|
|
border-radius: 2px;
|
|
color: @tColor;
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
input {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
padding: 0 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.modal-dialog {
|
|
.content.buttons {
|
|
ul {
|
|
float: right;
|
|
}
|
|
|
|
/* tooltipped css taken from: https://github.com/primer/primer-tooltips and https://sachinchoolur.github.io/ngclipboard/ */
|
|
.tooltipped {
|
|
position: relative
|
|
}
|
|
|
|
.tooltipped::after {
|
|
position: absolute;
|
|
z-index: 1000000;
|
|
display: none;
|
|
padding: 5px 8px;
|
|
font: normal normal 11px/1.5 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
|
color: #fff;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: break-word;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
content: attr(aria-label);
|
|
background: rgb(0 0 0 / 80%);
|
|
border-radius: 3px;
|
|
-webkit-font-smoothing: subpixel-antialiased
|
|
}
|
|
|
|
.tooltipped::before {
|
|
position: absolute;
|
|
z-index: 1000001;
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
color: rgb(0 0 0 / 80%);
|
|
pointer-events: none;
|
|
content: "";
|
|
border: 5px solid transparent
|
|
}
|
|
|
|
.tooltipped:hover::before, .tooltipped:hover::after, .tooltipped:active::before, .tooltipped:active::after, .tooltipped:focus::before, .tooltipped:focus::after {
|
|
display: inline-block;
|
|
text-decoration: none
|
|
}
|
|
|
|
.tooltipped-w::after {
|
|
right: 100%;
|
|
bottom: 50%;
|
|
margin-right: 5px;
|
|
transform: translateY(50%)
|
|
}
|
|
|
|
.tooltipped-w::before {
|
|
top: 50%;
|
|
bottom: 50%;
|
|
left: -5px;
|
|
margin-top: -5px;
|
|
border-left-color: rgb(0 0 0 / 80%)
|
|
}
|
|
}
|
|
}
|
|
|
|
.importpage {
|
|
form.styled {
|
|
input {
|
|
margin-top: 11px;
|
|
margin-bottom: 11px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.restorewizard,
|
|
.addwizard {
|
|
form.styled {
|
|
ul {
|
|
margin: 20px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
width: 20px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
label {
|
|
width: auto;
|
|
line-height: normal;
|
|
}
|
|
|
|
div.subtext {
|
|
clear: both;
|
|
margin-left: 30px;
|
|
padding-top: 5px;
|
|
color: lighten(@tColor, 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.pauseoptions {
|
|
form.styled {
|
|
li {
|
|
line-height: normal;
|
|
padding: 0;
|
|
|
|
input {
|
|
height: auto;
|
|
margin-top: 8px;
|
|
margin-right: 8px;
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.confirmdelete {
|
|
div.overview {
|
|
width: 420px;
|
|
}
|
|
div.word {
|
|
font-weight: bold;
|
|
padding: 12px;
|
|
border: 1px solid black;
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
background-color: #e0e0e0;
|
|
width: 420px;
|
|
}
|
|
|
|
span.backupname {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input.typedword {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
/* Progress bar styles from Bootstrap */
|
|
.progress-bar-striped {
|
|
background-image: linear-gradient(45deg, rgb(255 255 255 / 15%) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 15%) 50%, rgb(255 255 255 / 15%) 75%, transparent 75%, transparent);
|
|
background-size: 40px 40px;
|
|
}
|
|
|
|
.progress-striped {
|
|
.progress-bar {
|
|
background-image: linear-gradient(45deg, rgb(255 255 255 / 15%) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 15%) 50%, rgb(255 255 255 / 15%) 75%, transparent 75%, transparent);
|
|
background-size: 40px 40px;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
min-height: 25px;
|
|
|
|
> span {
|
|
vertical-align: middle;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
z-index: 100;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
&.active {
|
|
.progress-bar {
|
|
animation: progress-bar-stripes 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
float: left;
|
|
width: 0;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
color: #fff;
|
|
text-align: center;
|
|
background-color: #337ab7;
|
|
box-shadow: inset 0 -1px 0 rgb(0 0 0 / 15%);
|
|
transition: width .6s ease;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
&.active {
|
|
animation: progress-bar-stripes 2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tree-view {
|
|
list-style-type: none;
|
|
margin-left: 10px;
|
|
padding-bottom: 5px;
|
|
|
|
ul {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
span {
|
|
&.nodeLabel {
|
|
cursor: pointer;
|
|
|
|
&.selected {
|
|
border: 1px solid #aaa;
|
|
background-color: #ddd;
|
|
padding: 1px 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
.node {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
div.selected {
|
|
border-color: lightblue;
|
|
background-color: lightblue;
|
|
}
|
|
|
|
> ul {
|
|
display: none;
|
|
}
|
|
|
|
> ul.expanded {
|
|
display: block;
|
|
}
|
|
|
|
a {
|
|
&.nav {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
background-image: url("../img/treeicons.png");
|
|
background-repeat: no-repeat;
|
|
background-position: -80px 0;
|
|
background-size: 112px 64px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/treeicons_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/treeicons_3x.png');
|
|
}
|
|
|
|
&.leaf {
|
|
background: none;
|
|
}
|
|
|
|
&.expanded {
|
|
background-position: -80px -16px;
|
|
}
|
|
}
|
|
|
|
&.type {
|
|
cursor: auto;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
background-image: url("../img/treeicons.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 -16px;
|
|
background-size: 112px 64px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/treeicons_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/treeicons_3x.png');
|
|
}
|
|
|
|
&.invisible {
|
|
background-position: 0 -32px;
|
|
}
|
|
|
|
&.loading {
|
|
cursor: progress;
|
|
background-image: url("../img/loader-16.gif");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 16px 16px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/loader-32.gif');
|
|
}
|
|
}
|
|
|
|
&.x-tree-icon-drive {
|
|
background-position: -16px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-leaf {
|
|
background-position: -32px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-symlink {
|
|
background-position: -48px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-userdata {
|
|
background-position: -16px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-locked {
|
|
background-position: -64px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-broken {
|
|
background-position: -64px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-computer {
|
|
background-position: 0 -48px;
|
|
}
|
|
|
|
&.x-tree-icon-hyperv {
|
|
background-position: -96px -16px;
|
|
}
|
|
|
|
&.x-tree-icon-hypervmachine {
|
|
background-position: -96px 0;
|
|
}
|
|
|
|
&.x-tree-icon-mssql {
|
|
background-position: -96px -32px;
|
|
}
|
|
|
|
&.x-tree-icon-mssqldb {
|
|
background-position: -80px -32px;
|
|
}
|
|
|
|
&.x-tree-icon-mydocuments {
|
|
background-position: -32px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-mymusic {
|
|
background-position: -48px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-mypictures {
|
|
background-position: -64px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-desktop {
|
|
background-position: -80px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-home {
|
|
background-position: -96px -48px;
|
|
}
|
|
|
|
&.x-tree-icon-drive.invisible {
|
|
background-position: -16px -32px;
|
|
}
|
|
|
|
&.x-tree-icon-leaf.invisible {
|
|
background-position: -32px -32px;
|
|
}
|
|
|
|
&.x-tree-icon-symlink.invisible {
|
|
cursor: auto;
|
|
background-position: -48px -32px;
|
|
}
|
|
|
|
&.x-tree-icon-locked.invisible {
|
|
background-position: -64px -32px;
|
|
}
|
|
}
|
|
|
|
&.check {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
background-image: url("../img/treeicons.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
vertical-align: middle;
|
|
background-size: 112px 64px;
|
|
|
|
@media only screen and (min-device-pixel-ratio: 1.25), only screen and (resolution >= 192dpi), only screen and (resolution >= 1.25dppx) {
|
|
background-image: url('../img/treeicons_2x.png');
|
|
}
|
|
|
|
@media only screen and (min-device-pixel-ratio: 2.25), only screen and (resolution >= 288dpi), only screen and (resolution >= 2.25dppx) {
|
|
background-image: url('../img/treeicons_3x.png');
|
|
}
|
|
}
|
|
|
|
&.partial {
|
|
background-position: -32px 0;
|
|
}
|
|
|
|
&.include {
|
|
background-position: -16px 0;
|
|
}
|
|
|
|
&.exclude {
|
|
background-position: -48px 0;
|
|
}
|
|
|
|
&.root {
|
|
background: none;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.throttlesettings {
|
|
div.multiple {
|
|
select {
|
|
width: auto;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
input {
|
|
width: 100px;
|
|
}
|
|
|
|
input.checkbox {
|
|
width: auto;
|
|
}
|
|
|
|
label {
|
|
line-height: 35px;
|
|
padding: 0 15px;
|
|
width: auto;
|
|
min-width: 150px;
|
|
}
|
|
}
|
|
|
|
.disabled {
|
|
color: lighten(@tColor, 25%);
|
|
|
|
input, select {
|
|
color: lighten(@tColor, 25%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 1150px) {
|
|
body {
|
|
.container {
|
|
.header {
|
|
height: 140px;
|
|
|
|
.statepadding {
|
|
padding-right: 90px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.state {
|
|
width: 100%;
|
|
margin: 10px 40px;
|
|
clear: left;
|
|
float: left;
|
|
}
|
|
|
|
.action-icons {
|
|
display: none;
|
|
}
|
|
|
|
.action-icons-small {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
.menubutton {
|
|
display: block;
|
|
font-size: 18px;
|
|
padding-right: 50px;
|
|
margin-top: 5px;
|
|
margin-right: 15px;
|
|
background: url('../img/menu.png') no-repeat right top;
|
|
background-size: 39px 39px;
|
|
position: relative;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: @tColor;
|
|
float: right;
|
|
top: 10px;
|
|
padding-left: 20px;
|
|
text-transform: uppercase;
|
|
text-align: right;
|
|
|
|
@media (min-device-pixel-ratio: 1.25), (resolution >= 192dpi), (resolution >= 1.25dppx) {
|
|
background-image: url('../img/menu_2x.png');
|
|
}
|
|
|
|
@media (min-device-pixel-ratio: 2.25), (resolution >= 288dpi), (resolution >= 2.25dppx) {
|
|
background-image: url('../img/menu_3x.png');
|
|
}
|
|
}
|
|
|
|
.menubutton.active {
|
|
background-image: url('../img/menu_active.png');
|
|
background-size: 39px 39px;
|
|
color: @lColor;
|
|
|
|
@media (min-device-pixel-ratio: 1.25), (resolution >= 192dpi), (resolution >= 1.25dppx) {
|
|
background-image: url('../img/menu_active_2x.png');
|
|
}
|
|
|
|
@media (min-device-pixel-ratio: 2.25), (resolution >= 288dpi), (resolution >= 2.25dppx) {
|
|
background-image: url('../img/menu_active_3x.png');
|
|
}
|
|
}
|
|
}
|
|
|
|
.body {
|
|
position: relative;
|
|
padding-top: 140px;
|
|
|
|
.mainmenu {
|
|
display: none;
|
|
position: fixed;
|
|
background: none repeat scroll 0 0 white;
|
|
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
|
|
left: 10px;
|
|
padding: 20px;
|
|
top: 60px;
|
|
}
|
|
|
|
.mainmenu.mobile-open {
|
|
display: block;
|
|
left: auto;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.contextmenu {
|
|
left: 0;
|
|
top: auto;
|
|
}
|
|
|
|
.content {
|
|
float: none;
|
|
padding: 20px;
|
|
margin: 0 auto 30px;
|
|
|
|
.state {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobileOpen {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
body {
|
|
.container {
|
|
.body {
|
|
.content {
|
|
.tasks {
|
|
.tasklist {
|
|
a {
|
|
font-size: 20px;
|
|
background-size: 24px;
|
|
background-position: 0 4px;
|
|
padding-left: 35px;
|
|
}
|
|
|
|
dl {
|
|
padding-left: 35px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body {
|
|
.container {
|
|
.header {
|
|
.logo {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.statepadding {
|
|
padding-right: 50px;
|
|
}
|
|
|
|
.state {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.menubutton {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
.content {
|
|
div.add,
|
|
div.restore,
|
|
div.settings {
|
|
.steps {
|
|
display: none;
|
|
}
|
|
|
|
.steps-legend {
|
|
list-style: decimal;
|
|
padding-left: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
|
|
li {
|
|
float: none;
|
|
font-weight: 500;
|
|
width: auto !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
|
|
.steps-boxes {
|
|
padding-left: 0;
|
|
}
|
|
|
|
form.styled {
|
|
.input {
|
|
input,
|
|
select,
|
|
textarea {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.input.select select {
|
|
width: 420px;
|
|
}
|
|
|
|
.buttons {
|
|
max-width: 100%;
|
|
width: auto;
|
|
}
|
|
|
|
.tools {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.input.checkbox.multiple {
|
|
padding-bottom: 5px;
|
|
|
|
input,
|
|
label {
|
|
display: block !important;
|
|
float: left !important;
|
|
line-height: normal;
|
|
}
|
|
|
|
input {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
.input.text.multiple {
|
|
input {
|
|
max-width: 48% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 640px) {
|
|
body {
|
|
h2 {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
.body {
|
|
padding-bottom: 10px;
|
|
|
|
.content {
|
|
margin: 0 auto;
|
|
|
|
div.add,
|
|
div.restore {
|
|
form {
|
|
.input.overlayButton {
|
|
padding-top: 8px;
|
|
padding-bottom: 30px;
|
|
|
|
/* border-bottom: 1px #ddd solid; */
|
|
margin-bottom: 10px;
|
|
|
|
a.button {
|
|
padding: 7px 10px;
|
|
right: 1px;
|
|
top: 9px;
|
|
}
|
|
}
|
|
|
|
.input.checkbox.multiple {
|
|
div {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.input.select.multiple {
|
|
input#exclude-larger-than-number {
|
|
width: 75px;
|
|
}
|
|
|
|
select#exclude-larger-than-multiplier {
|
|
width: 140px;
|
|
}
|
|
}
|
|
|
|
.filters {
|
|
/* border-bottom: 1px #ddd solid; */
|
|
|
|
.input.link {
|
|
/* padding-bottom: 0; */
|
|
}
|
|
|
|
.input.textarea {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
h3 {
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
|
|
.input.text.select.multiple.repeat {
|
|
label {
|
|
float: none;
|
|
}
|
|
|
|
input#repeatRunNumber {
|
|
width: 70px;
|
|
}
|
|
|
|
select#repeatRunMultiplier {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.input.multiple.text.select.maxSize {
|
|
input {
|
|
width: 70px;
|
|
}
|
|
|
|
select {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.input.multiple.text.select.keepBackups {
|
|
select {
|
|
width: 85px;
|
|
padding: 4px 6px;
|
|
}
|
|
|
|
input {
|
|
width: 60px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
position: static;
|
|
padding: 15px;
|
|
line-height: normal;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
|
|
* {
|
|
float: none !important;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.about-footer {
|
|
padding-right: 0;
|
|
display: block;
|
|
|
|
span {
|
|
padding-left: 0;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
li {
|
|
padding-left: 0;
|
|
float: none;
|
|
display: inline-block;
|
|
height: 32px;
|
|
width: 32px;
|
|
background-size: 28px !important;
|
|
border-bottom: none;
|
|
|
|
a {
|
|
/* color: transparent;
|
|
height: 32px;
|
|
width: 32px; */
|
|
}
|
|
}
|
|
|
|
li:first-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
li:last-child {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
li,
|
|
.social,
|
|
.about-footer {
|
|
padding: 8px 0;
|
|
border-bottom: 1px #ddd solid;
|
|
}
|
|
|
|
.social {
|
|
li {
|
|
display: inline-block;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.themelink {
|
|
padding: 8px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 580px) {
|
|
.advancedentry .longdescription {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 492px) {
|
|
ul.notification {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media (width <= 480px) {
|
|
body {
|
|
font-size: 15px;
|
|
|
|
.container {
|
|
.header {
|
|
.logo {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.menubutton {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.state {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.statepadding {
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.menubutton {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
.mainmenu {
|
|
width: 280px;
|
|
box-sizing: border-box;
|
|
|
|
ul {
|
|
li {
|
|
a {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 15px;
|
|
|
|
div.add,
|
|
div.restore {
|
|
form {
|
|
.input.password {
|
|
.tools {
|
|
ul li {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
a {
|
|
float: none;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.steps-boxes {
|
|
.box.browser {
|
|
.checklinks {
|
|
a {
|
|
float: none;
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 400px) {
|
|
body {
|
|
font-size: 15px;
|
|
|
|
.container {
|
|
.header {
|
|
.menubutton {
|
|
margin-right: 0;
|
|
padding-left: 0;
|
|
padding-right: 40px;
|
|
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 325px) {
|
|
body {
|
|
font-size: 15px;
|
|
|
|
.container {
|
|
.header {
|
|
.logo {
|
|
div {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width <= 200px) {
|
|
body {
|
|
font-size: 15px;
|
|
|
|
.container {
|
|
.header {
|
|
.menubutton {
|
|
position: static;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.action-icons-small {
|
|
clear: right;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|