iobroker.backitup/admin/style.css

ioBroker.backitup allows you to backup and restore your ioBroker installation and other systems, such as databases, Zigbee, scripts and many more.

/* You can delete those if you want. I just found them very helpful */
* {
    box-sizing: border-box
}
.m {
    /* Don't cut off dropdowns! 
    overflow: initial;*/
    overflow: hidden;
}
.multiple-select-dropdown li span .combobox .combobox {
	pointer-events: none;
}
.multiple-select-dropdown.dropdown-content li span, .multiple-select-dropdown.dropdown-content li span label { 
    pointer-events: none;
}

/* Header section*/
#header-area {margin-top: 2px; margin-bottom: 1px; background-color:#174475; background-image: linear-gradient(135deg, #174475 0%, #3399CC 30%);}
#header-area #header-logo-title .logo {float:left; margin-right: 10px;}
#header-area #header-logo-title p {line-height: normal !important; margin: 0 !important; padding: 8px 0 0 8px;}
#header-area #header-logo-title p>span.h-title {font-size: 2em !important; color:white; }
#header-area #header-logo-title p>span.h-sub-title {font-size: 1.1em !important; color:white; font-style: italic; }

/* restore list */

.collapsible.root .collapsible-header { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.collapsible.root .collapsible-header h6{font-size: 1.0em; font-weight: bold;}
.collapsible.root .collapsible-header.top {background-color:#3399CC; color:white; padding-top: 0.2rem; padding-bottom: 0.2rem; border-radius: 4px;}
.collapsible.root .collapsible-header.top h6 {background-color:#3399CC; color:white; font-size: 1.2em !important; font-weight: bold;}
.m .collapsible { border-radius: 4px; }

/* Tabs menu */
.m .tabs .tab a { color: rgba(13, 134, 231, 0.7); } /* Color */
.m .tabs { background-color: rgb(255, 255, 255) !important;}
.m .tabs .active { border-bottom: 2px solid #0d47a1; font-weight: bold;}
.m .tabs .tab a.active, .m .tabs .tab a:hover { color:#0d47a1; }
.m .tabs .tab a:hover { border-bottom: 2px solid #46a0e9 !important; }
.m .row .col.m1 { width: 14%;}
#tab-area { padding-left:0;padding-right:0; margin-top: 2px; margin-bottom: 2px; background-color:#174475; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) }

/* Tabs menu react-dark */
.m.react-dark .tabs .tab a.active, .m .tabs .tab a:hover { color: #2196f3; }
.m.react-dark .tabs { background-color: #272727 !important;}

/* Tabs menu react-dark */
.m.react-blue .tabs .tab a.active, .m .tabs .tab a:hover { color: #2196f3; }
.m.react-blue .tabs { background-color: #272727 !important;}

.title {
    background-color: #174475;
    background-image: linear-gradient(179deg, #3399CC 0%, #174475 60%);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.m.react-dark .title, .m.react-blue .title {
    background-color: #272727!important;
    background-image: linear-gradient(179deg, gray 0%, #272727 60%);
}

.m .card-panel {
    padding: 10px;
    border-radius: 4px;
}
.m .btn, .m .btn-flat, .m .btn-large, .m .btn-backitup {
    border-radius: 4px;
}
.m.react-dark .btn, .m.react-dark .btn-flat, .m.react-dark .btn-large, .m.react-dark .btn-backitup {
    color: #fff;
    border-radius: 4px;
}
.m.react-blue .btn, .m.react-blue .btn-flat, .m.react-blue .btn-large, .m.react-blue .btn-backitup {
    color: #fff;
    border-radius: 4px;
}
/*.m .btn:hover {*/
.m .btn-backitup:hover, .m .btn-small:hover, .m .btn-floating:hover, .m .modal-close:hover {
    /*background-color: #3399CC;*/
    background-color: rgb(35, 107, 142)!important;
    filter: brightness(105%);
    /*transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;*/
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.m .col .select-wrapper + label {
    top: -26px;
}
.m span {
    font-size: 0.9em;
}
.m .tabs {
    height: auto!important;
}

@media only screen and (max-width: 992px) {
    .m .tabs {
        display: block;
    }
}

.m .page {
    height: calc(100% - 187px);
}
#dialog-command {
    width: calc(100% - 100px);
    border-radius: 4px;
}
#dialog-message .title {
    width: 100% !important;
    background: #64b5f6;
    color: #FFF;
    padding: 0.5rem;
}
#dialog-message .modal-content {
    width: 100% !important;
}
#dialog-message .dialog-text {
    font-size: 16px;
    font-style: bold;
    width: 100%;
}
#dialog-confirm {
    border-radius: 4px;
}
#dialog-confirm .title {
    width: 100% !important;
    background: #174475;
    color: #FFF;
    padding: 0.5rem;
    border-radius: 4px;
}
#dialog-confirm .modal-content {
    width: 100% !important;
    height: 100% !important;
}
#dialog-confirm .dialog-text {
    font-size: 16px;
    font-style: bold;
    width: 100%;
}
.blink {
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 4s; 
    animation-iteration-count: infinite;            
}
@keyframes animation_blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }    
}

#dialog-command .btn {
    margin-right: 0.5rem;
    background-color: #3399CC;
}
#dialog-command .modal-footer {
    padding: 4px 20px;
    margin-left: 0.4rem;
}
#dialog-command .title {
    width: 100% !important;
    background: #174475;
    color: #FFF;
    padding: 0.5rem;
    border-radius: 4px;
}
#dialog-command .modal-content {
    width: 100% !important;
}
#dialog-command .textarea {
    margin-bottom: 0;
}
#dialog-command textarea {
    background: #e9e9e9;
    font-family: courier, monospace;
    font-size: 11px;
    resize: none;
    width: 100%;
    height: calc(100% - 125px);
    margin-bottom: 0;
}
#dialog-command .progress-dont-close {
    float: left;
    padding-left: 1rem;
    padding-top: 1rem;
}
#dialog-command .command {
    font-style: italic;
}
.do-restore {
    cursor: pointer;
    margin-top: -0.3em;
    margin-left: 0.8em;
    height: 32.4px!important;
    width: 32.4px!important;
}
.do-download {
    cursor: pointer;
    margin-top: -0.3em;
    height: 32.4px!important;
    width: 32.4px!important;
}

#dialog-download .title {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
    background: #174475;
    padding: 0.5rem;
    border-radius: 4px;
}

#dialog-download .modal-content {
    width: 100% !important;
    height: calc(100% - 10px) !important;
}

#dialog-download {
    max-height: 40% !important;
    max-width: 70% !important;
    width: 65% !important;
    height: 35% !important;
    overflow: visible !important;
    top: 10px !important;
    width: calc(100% - 100px);
    border-radius: 4px;
}

.collapsible-body {
    margin-left: 2rem !important;
    padding-top: 0 !important;
}
.header {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 1px;
    border-style: solid;
}

.table-values.influxDBTable.influxShowLocal td:nth-of-type(2), .table-values.influxDBTable.influxShowLocal td:nth-of-type(3) {
    visibility: hidden;
    display: none;
}
.table-values.influxDBTable.influxShowLocal th:nth-of-type(2), .table-values.influxDBTable.influxShowLocal th:nth-of-type(3) {
    visibility: hidden;
    display: none;
}
.table-values th {
    padding: 0.6rem !important;
}
.m td input[type="checkbox"] {
    position: initial !important;
}
.table-values-fix {
    border-radius: 4px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
}

.m [type=checkbox]:checked+span:not(.lever):before {
    top: 3px;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent!important;
    border-left: 2px solid transparent!important;
    background-color: transparent!important;
}
.hiddenToken {
    filter: brightness(60%);
}

.m.react-dark .btn-flat.disabled, .m.react-dark .btn-flat:disabled, .m.react-dark .btn-flat[disabled], .m.react-dark .btn-floating.disabled, .m.react-dark .btn-floating:disabled, .m.react-dark .btn-floating[disabled], .m.react-dark .btn-large.disabled, .m.react-dark .btn-large:disabled, .m.react-dark .btn-large[disabled], .m.react-dark .btn-small.disabled, .m.react-dark .btn-small:disabled, .m.react-dark .btn-small[disabled], .m.react-dark .btn.disabled, .m.react-dark .btn:disabled, .m.react-dark .btn[disabled], .m.react-dark .disabled.btn-large, .m.react-dark .disabled.btn-small {
    background-color: rgba(255, 255, 255, 0.5)!important;
    filter: brightness(40%);
}
.m.react-blue .btn-flat.disabled, .m.react-blue .btn-flat:disabled, .m.react-blue .btn-flat[disabled], .m.react-blue .btn-floating.disabled, .m.react-blue .btn-floating:disabled, .m.react-blue .btn-floating[disabled], .m.react-blue .btn-large.disabled, .m.react-blue .btn-large:disabled, .m.react-blue .btn-large[disabled], .m.react-blue .btn-small.disabled, .m.react-blue .btn-small:disabled, .m.react-blue .btn-small[disabled], .m.react-blue .btn.disabled, .m.react-blue .btn:disabled, .m.react-blue .btn[disabled], .m.react-blue .disabled.btn-large, .m.react-blue .disabled.btn-small {
    background-color: rgba(255, 255, 255, 0.5)!important;
    filter: brightness(40%);
}

.m .modal .modal-footer .btn, .m .modal .modal-footer .btn-flat, .m .modal .modal-footer .btn-large, .m .modal .modal-footer .btn-small {
    margin: 6px 3px;
    color: #fff;
    background-color: #3399CC;
    font-size: 0.875rem;
    min-width: 64px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    border-radius: 4px;
    letter-spacing: 0.02857em;
    text-transform: uppercase;
    text-align: center;
}

p.subtitle {
    margin-bottom: 0px;
    padding-left: 0.75rem;
    font-size: 1.0rem;
    text-transform: uppercase;
}
p.notice {
    margin-bottom: 0px;
    padding-left: 0.8rem;
    font-size: 0.8rem;
}

.linkDesign a {
    color: #1e88e5!important;
    cursor: pointer!important;
    text-decoration: underline!important;
}

.m .secondary-content {
    float: right;
    color: #3399CC;
    padding-right: 1em;
}

/* Navbar Bottom */
.m nav {
    background-color: #3399cc;
    min-height: 48px;
}
.m .btn.disabled, .m .btn-small.disabled {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.26) !important;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
}
.m .btn-save, .m .btn-save-close, .m .btn-cancel {
    background-color: #e0e0e0;
    color: #000000;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
}
.m .btn-save:hover, .m .btn-save-close:hover, .m .btn-cancel:hover {
    background-color: #e0e0e0!important;
    filter: brightness(105%);
    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

/* Help Buttons */
.m .btn-floating i.material-icons, .m.react-blue .btn-floating i.material-icons, .m.react-dark .btn-floating i.material-icons {
    color: rgba(0, 0, 0, 0.87)!important;
    background-color: rgb(224, 224, 224)!important;
    line-height: 36px;
}
.m .btn-floating i.material-icons:hover {
    background-color: #e0e0e0!important;
    filter: brightness(105%);
}
.m .btn-floating {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    height: 36px!important;
    width: 36px!important;
}
.m .btn-floating:hover {
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.donateButton {
    padding-right: 0.3rem;
    margin-top: -0.15rem;
 }