mirror of
https://github.com/unraid/webgui.git
synced 2025-12-31 22:50:25 -06:00
1750 lines
48 KiB
CSS
1750 lines
48 KiB
CSS
/**
|
|
* This CSS is specifically for overwriting CSS libraries that dynamix.js uses
|
|
*/
|
|
:root {
|
|
--dynamix-ui-dropdownchecklist-color: var(--gray-100);
|
|
--dynamix-ui-dropdownchecklist-color-alt1: var(--gray-700);
|
|
--dynamix-ui-dropdownchecklist-color-alt2: var(--gray-500);
|
|
--dynamix-ui-dropdownchecklist-dropcontainer-border-color: transparent;
|
|
--dynamix-ui-state-active-border-color: transparent;
|
|
|
|
--dynamix-sb-message-bg-color: var(--gray-100);
|
|
--dynamix-sb-message-text-color: var(--black);
|
|
--dynamix-sb-message-link-color: var(--blue-800);
|
|
|
|
--dynamix-sb-title-bg-color: var(--gray-300);
|
|
--dynamix-sb-title-text-color: var(--gray-500);
|
|
|
|
--dynamix-sb-wrapper-bg-color: var(--gray-100);
|
|
--dynamix-sb-wrapper-border-color: var(--gray-500);
|
|
--dynamix-sb-wrapper-text-color: var(--black);
|
|
|
|
--dynamix-sb-body-text-color: var(--black);
|
|
--dynamix-sb-body-bg-color: var(--gray-100);
|
|
|
|
--dynamix-sweet-alert-text-color: var(--gray-100);
|
|
--dynamix-sweet-alert-icon-bg-color: var(--black);
|
|
|
|
--dynamix-tablesorter-thead-row-border-color: var(--gray-800);
|
|
--dynamix-tablesorter-thead-th-text-color: var(--gray-100);
|
|
--dynamix-tablesorter-thead-th-bg-color: var(--gray-700);
|
|
|
|
--dynamix-tablesorter-tbody-row-alt-bg-color: var(--gray-800); /* #212121 */
|
|
--dynamix-tablesorter-tbody-row-bg-color: var(--black);
|
|
--dynamix-tablesorter-tbody-row-border-color: var(--gray-800);
|
|
|
|
--dynamix-select-bg-color: transparent;
|
|
--dynamix-select-box-shadow: 0 2px 0 var(--orange-500), inset 0 -1px var(--black);
|
|
--dynamix-select-disabled-bg-color: var(--gray-700);
|
|
--dynamix-select-disabled-border-color: var(--gray-500);
|
|
--dynamix-select-disabled-color: var(--gray-100);
|
|
|
|
--dynamix-box-text-color: var(--gray-100);
|
|
--dynamix-box-inner-div-border-color: var(--black-opacity-10);
|
|
|
|
--dynamix-tooltipster-sidetip-bg-from: var(--gray-700);
|
|
--dynamix-tooltipster-sidetip-bg-to: var(--gray-500);
|
|
|
|
--dynamix-tooltipster-sidetip-content-text-color: var(--gray-100);
|
|
--dynamix-tooltipster-sidetip-arrow-bg-color: var(--gray-500);
|
|
--dynamix-tooltipster-sidetip-arrow-border-color: var(--black);
|
|
--dynamix-tooltipster-sidetip-box-border-color: var(--orange-500);
|
|
|
|
--dynamix-filetree-bg-color: var(--gray-100);
|
|
|
|
--dynamix-awesomplete-text-color: var(--black);
|
|
--dynamix-awesomplete-list-bg-color: var(--white-opacity-80);
|
|
--dynamix-awesomplete-list-bg-from-color: var(--white);
|
|
--dynamix-awesomplete-list-bg-to-color: var(--dynamix-awesomplete-list-bg-color);
|
|
--dynamix-awesomplete-list-border-color: var(--black-opacity-30);
|
|
--dynamix-awesomplete-list-shadow-color: var(--black-opacity-20);
|
|
--dynamix-awesomplete-list-before-bg-color: var(--white);
|
|
--dynamix-awesomplete-list-item-hover-bg-color: var(--blue-300);
|
|
--dynamix-awesomplete-list-item-hover-text-color: var(--black);
|
|
--dynamix-awesomplete-list-item-selected-bg-color: var(--blue-900);
|
|
--dynamix-awesomplete-list-item-selected-text-color: var(--white);
|
|
--dynamix-awesomplete-mark-bg-color: var(--yellow-500);
|
|
--dynamix-awesomplete-mark-hover-bg-color: var(--orange-500); /* OG val = hsl(68, 100%, 41%) */
|
|
--dynamix-awesomplete-mark-selected-bg-color: var(--green-900);
|
|
}
|
|
|
|
#sb-info-inner,
|
|
#sb-loading-inner,
|
|
div.sb-message {
|
|
color: var(--dynamix-sb-message-text-color);
|
|
background-color: var(--dynamix-sb-message-bg-color);
|
|
}
|
|
#sb-title,
|
|
#sb-title-inner {
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
width: 100%;
|
|
height: 5rem;
|
|
line-height: 5rem;
|
|
font-family: clear-sans;
|
|
font-size: 1.8rem;
|
|
font-weight: bold;
|
|
letter-spacing: 1.8px;
|
|
background: var(--dynamix-sb-title-bg-color);
|
|
color: var(--dynamix-sb-title-text-color);
|
|
text-indent: 10px;
|
|
text-align: center;
|
|
}
|
|
#sb-title,
|
|
#sb-info {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
#sb-container {
|
|
position: fixed;
|
|
margin: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10000;
|
|
text-align: left;
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
#sb-overlay {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#sb-wrapper {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
width: 100px;
|
|
border: 1px solid var(--dynamix-sb-wrapper-border-color);
|
|
border-radius: 10px;
|
|
color: var(--dynamix-sb-wrapper-text-color);
|
|
background: var(--dynamix-sb-wrapper-bg-color);
|
|
}
|
|
#sb-wrapper-inner {
|
|
overflow: hidden;
|
|
height: 10rem;
|
|
}
|
|
#sb-body {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
#sb-body-inner {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
color: var(--dynamix-sb-body-text-color);
|
|
background: var(--dynamix-sb-body-bg-color);
|
|
}
|
|
#sb-body img {
|
|
border: none;
|
|
}
|
|
#sb-loading {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
#sb-loading-inner {
|
|
position: absolute;
|
|
font-size: 1.8rem;
|
|
line-height: 2rem;
|
|
height: 2rem;
|
|
top: 50%;
|
|
margin-top: -12px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
#sb-loading-inner span {
|
|
background: url(../images/loading.gif) no-repeat;
|
|
padding-left: 22px;
|
|
display: inline-block;
|
|
}
|
|
#sb-body,
|
|
#sb-loading {
|
|
color: var(--dynamix-sb-body-text-color);
|
|
background: var(--dynamix-sb-body-bg-color);
|
|
}
|
|
#sb-info,
|
|
#sb-info-inner {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
}
|
|
#sb-info-inner {
|
|
font-family: clear-sans;
|
|
font-size: 1.3rem;
|
|
}
|
|
#sb-nav {
|
|
float: right;
|
|
height: 16px;
|
|
padding: 2px 0;
|
|
width: 45%;
|
|
}
|
|
#sb-nav a {
|
|
display: block;
|
|
float: right;
|
|
height: 16px;
|
|
width: 16px;
|
|
margin-left: 3px;
|
|
cursor: pointer;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#sb-nav-close {
|
|
background-image: url(../images/close.png);
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 10000;
|
|
width: 32px;
|
|
height: 32px;
|
|
top: -16px;
|
|
right: -16px;
|
|
cursor: pointer;
|
|
}
|
|
#sb-counter {
|
|
float: left;
|
|
width: 45%;
|
|
}
|
|
#sb-counter a {
|
|
padding: 0 4px 0 0;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
#sb-counter a.sb-counter-current {
|
|
text-decoration: underline;
|
|
}
|
|
.sweet-alert,
|
|
.sweet-alert .sa-icon.sa-success .sa-fix {
|
|
background-color: var(--dynamix-sweet-alert-icon-bg-color);
|
|
}
|
|
.sweet-alert .sa-icon.sa-success::before,
|
|
.sweet-alert .sa-icon.sa-success::after {
|
|
background: var(--dynamix-sweet-alert-icon-bg-color);
|
|
}
|
|
.sweet-alert h2,
|
|
.sweet-alert p {
|
|
color: var(--dynamix-sweet-alert-text-color);
|
|
text-align: inherit;
|
|
}
|
|
table.tablesorter {
|
|
margin: 0 0 15px 0;
|
|
}
|
|
table.tablesorter thead tr {
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-thead-row-border-color);
|
|
}
|
|
table.tablesorter thead tr th {
|
|
font-weight: normal;
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: var(--dynamix-tablesorter-thead-th-text-color);
|
|
background-color: var(--dynamix-tablesorter-thead-th-bg-color);
|
|
padding: 8px 20px 8px 6px;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
table.tablesorter thead tr .tablesorter-header {
|
|
background-repeat: no-repeat;
|
|
background-position: center right;
|
|
cursor: pointer;
|
|
}
|
|
table.tablesorter thead tr .tablesorter-headerAsc {
|
|
background-image: url(../images/sort-asc.png);
|
|
}
|
|
table.tablesorter thead tr .tablesorter-headerDesc {
|
|
background-image: url(../images/sort-desc.png);
|
|
}
|
|
table.tablesorter thead tr .tablesorter-headerAsc,
|
|
table.tablesorter thead tr .tablesorter-headerDesc {
|
|
background-color: var(--dynamix-tablesorter-thead-th-bg-color);
|
|
}
|
|
table.tablesorter tbody tr:nth-child(even) {
|
|
background-color: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
|
|
}
|
|
table.tablesorter.four tbody tr:nth-child(4n-1) {
|
|
background-color: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
|
|
}
|
|
table.tablesorter tbody tr.tr_last {
|
|
background-color: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
|
|
border-top: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
table.tablesorter tbody tr.tr_last td {
|
|
padding: 8px 20px 8px 6px;
|
|
}
|
|
table.tablesorter tbody tr td {
|
|
padding: 4px 20px 4px 6px;
|
|
vertical-align: middle;
|
|
text-align: justify;
|
|
white-space: normal;
|
|
}
|
|
table.tablesorter tbody.tablesorter-infoOnly {
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
table.tablesorter.plugins td:first-child {
|
|
width: 48px;
|
|
text-align: center;
|
|
}
|
|
table.tablesorter.plugins tr > td + td + td {
|
|
width: 9%;
|
|
white-space: nowrap;
|
|
}
|
|
table.tablesorter.plugins td:last-child {
|
|
width: 9.6rem;
|
|
padding: 0;
|
|
}
|
|
table.tablesorter .desc_readmore strong,
|
|
table.tablesorter .desc_readmore h4 {
|
|
font-size: 1.3rem;
|
|
}
|
|
table.tablesorter .desc_readmore h4,
|
|
table.tablesorter .desc_readmore p:first-child {
|
|
margin: 0;
|
|
}
|
|
table.tablesorter.left th,
|
|
table.tablesorter.left td {
|
|
text-align: left;
|
|
width: 20%;
|
|
}
|
|
table.tablesorter.left th:first-child,
|
|
table.tablesorter.left td:first-child {
|
|
width: 8%;
|
|
}
|
|
table.tablesorter.left th:nth-last-child(2),
|
|
table.tablesorter.left td:nth-last-child(2) {
|
|
width: 8%;
|
|
}
|
|
table.tablesorter.left th:last-child,
|
|
table.tablesorter.left td:last-child {
|
|
text-align: right;
|
|
width: 4%;
|
|
}
|
|
/* table.tablesorter.shift {
|
|
margin-top: -30px;
|
|
} */
|
|
table.tablesorter.kvm {
|
|
display: block;
|
|
padding-top: 24px;
|
|
}
|
|
table.tablesorter thead.fixed {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
table.tablesorter tbody.fixed {
|
|
display: block;
|
|
overflow: auto;
|
|
}
|
|
table.tablesorter.indexer thead th:first-child {
|
|
width: 4%;
|
|
}
|
|
table.tablesorter.indexer thead th,
|
|
table.tablesorter.indexer tbody td,
|
|
table.tablesorter.indexer tfoot td {
|
|
padding-left: 10px;
|
|
}
|
|
table.tablesorter.indexer thead tr > th + th {
|
|
width: auto;
|
|
text-align: left;
|
|
}
|
|
table.tablesorter.indexer thead tr > th + th + th {
|
|
width: 14%;
|
|
}
|
|
table.tablesorter.indexer tfoot td {
|
|
padding-top: 10px;
|
|
font-size: 1.1rem;
|
|
}
|
|
table.t1.tablesorter tbody tr.alt-row {
|
|
background-color: var(--dynamix-tablesorter-tbody-row-alt-bg-color);
|
|
}
|
|
table.t1.tablesorter tbody tr.normal-row {
|
|
background-color: var(--dynamix-tablesorter-tbody-row-bg-color);
|
|
}
|
|
input.t1.search {
|
|
color: var(--text-color);
|
|
background-color: var(--dynamix-tablesorter-tbody-row-bg-color);
|
|
}
|
|
span.select ul {
|
|
display: none;
|
|
list-style-type: none;
|
|
margin: 0 0 2px 0;
|
|
padding: 0;
|
|
}
|
|
span.select ul.unused {
|
|
display: block;
|
|
}
|
|
span.select ul li.nosort {
|
|
font-weight: bold;
|
|
}
|
|
span.select ul li.ident {
|
|
padding-left: 7px;
|
|
}
|
|
span.select ul li span {
|
|
display: none;
|
|
}
|
|
span.select {
|
|
padding: 3px 6px;
|
|
margin: 0 10px 0 0;
|
|
border: none;
|
|
border-radius: 4px;
|
|
box-shadow: var(--dynamix-select-box-shadow);
|
|
background-color: var(--dynamix-select-bg-color);
|
|
outline: none;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
}
|
|
span.select[disabled] {
|
|
color: var(--dynamix-select-disabled-color);
|
|
border-color: var(--dynamix-select-disabled-border-color);
|
|
background-color: var(--dynamix-select-disabled-bg-color);
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
div.sb-message {
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
div.sb-message a:link,
|
|
div.sb-message a:visited {
|
|
color: var(--dynamix-sb-message-link-color);
|
|
text-decoration: underline;
|
|
}
|
|
div.box {
|
|
margin-top: 0;
|
|
line-height: 3rem;
|
|
color: var(--dynamix-box-text-color);
|
|
margin-left: 0;
|
|
}
|
|
div.box div {
|
|
padding: 10px;
|
|
border-bottom: 1px solid var(--dynamix-box-inner-div-border-color);
|
|
}
|
|
div.icon-7z {
|
|
background: url("../images/file-types.png") 0 -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-aiff {
|
|
background: url("../images/file-types.png") 0 -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ai {
|
|
background: url("../images/file-types.png") 0 -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-asc {
|
|
background: url("../images/file-types.png") -112px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-audio {
|
|
background: url("../images/file-types.png") -64px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-bin {
|
|
background: url("../images/file-types.png") -128px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-bz2 {
|
|
background: url("../images/file-types.png") -96px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-cfc {
|
|
background: url("../images/file-types.png") -80px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-cfm {
|
|
background: url("../images/file-types.png") -64px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-chm {
|
|
background: url("../images/file-types.png") -64px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-class {
|
|
background: url("../images/file-types.png") -128px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-conf {
|
|
background: url("../images/file-types.png") -96px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-cpp {
|
|
background: url("../images/file-types.png") -16px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-css {
|
|
background: url("../images/file-types.png") -112px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-csv {
|
|
background: url("../images/file-types.png") -128px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-cs {
|
|
background: url("../images/file-types.png") -32px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-c {
|
|
background: url("../images/file-types.png") -32px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-deb {
|
|
background: url("../images/file-types.png") -80px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-dirup {
|
|
background: url("../images/file-types.png") -32px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-dir {
|
|
background: url("../images/file-types.png") -32px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-divx {
|
|
background: url("../images/file-types.png") -16px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-doc {
|
|
background: url("../images/file-types.png") -112px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-docx {
|
|
background: url("../images/file-types.png") -112px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-dot {
|
|
background: url("../images/file-types.png") -64px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-eml {
|
|
background: url("../images/file-types.png") -96px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-enc {
|
|
background: url("../images/file-types.png") -128px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-file {
|
|
background: url("../images/file-types.png") -112px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-flac {
|
|
background: url("../images/file-types.png") -64px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-gif {
|
|
background: url("../images/file-types.png") -16px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-gz {
|
|
background: url("../images/file-types.png") -32px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-hlp {
|
|
background: url("../images/file-types.png") -48px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-html {
|
|
background: url("../images/file-types.png") -48px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-htm {
|
|
background: url("../images/file-types.png") -80px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-image {
|
|
background: url("../images/file-types.png") -80px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-iso {
|
|
background: url("../images/file-types.png") -16px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-jar {
|
|
background: url("../images/file-types.png") -112px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-java {
|
|
background: url("../images/file-types.png") 0 -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-jpeg {
|
|
background: url("../images/file-types.png") -48px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-jpg {
|
|
background: url("../images/file-types.png") -48px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-js {
|
|
background: url("../images/file-types.png") -16px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-lua {
|
|
background: url("../images/file-types.png") -16px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-m2ts {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-midi {
|
|
background: url("../images/file-types.png") -64px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mk3 {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mkv {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mm {
|
|
background: url("../images/file-types.png") -96px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mov {
|
|
background: url("../images/file-types.png") -64px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mp3 {
|
|
background: url("../images/file-types.png") -48px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mp4 {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mpg {
|
|
background: url("../images/file-types.png") -16px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-mts {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-m {
|
|
background: url("../images/file-types.png") 0 -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odc {
|
|
background: url("../images/file-types.png") 0 -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odf {
|
|
background: url("../images/file-types.png") 0 -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odg {
|
|
background: url("../images/file-types.png") -80px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odi {
|
|
background: url("../images/file-types.png") -96px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odp {
|
|
background: url("../images/file-types.png") -48px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ods {
|
|
background: url("../images/file-types.png") -16px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-odt {
|
|
background: url("../images/file-types.png") 0 -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ogg {
|
|
background: url("../images/file-types.png") 0 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-pdf {
|
|
background: url("../images/file-types.png") -64px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-pgp {
|
|
background: url("../images/file-types.png") -32px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-php {
|
|
background: url("../images/file-types.png") -16px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-pl {
|
|
background: url("../images/file-types.png") -32px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-png {
|
|
background: url("../images/file-types.png") -48px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ppt {
|
|
background: url("../images/file-types.png") -128px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-pptx {
|
|
background: url("../images/file-types.png") -128px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ps {
|
|
background: url("../images/file-types.png") -128px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-py {
|
|
background: url("../images/file-types.png") -64px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-ram {
|
|
background: url("../images/file-types.png") -80px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-rar {
|
|
background: url("../images/file-types.png") -96px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-rb {
|
|
background: url("../images/file-types.png") -80px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-rm {
|
|
background: url("../images/file-types.png") -48px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-rpm {
|
|
background: url("../images/file-types.png") -32px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-rtf {
|
|
background: url("../images/file-types.png") -96px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sig {
|
|
background: url("../images/file-types.png") -128px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sql {
|
|
background: url("../images/file-types.png") -112px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-swf {
|
|
background: url("../images/file-types.png") -16px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sxc {
|
|
background: url("../images/file-types.png") -64px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sxd {
|
|
background: url("../images/file-types.png") -48px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sxi {
|
|
background: url("../images/file-types.png") -80px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-sxw {
|
|
background: url("../images/file-types.png") -96px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-tar {
|
|
background: url("../images/file-types.png") -48px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-tex {
|
|
background: url("../images/file-types.png") -64px -144px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-tgz {
|
|
background: url("../images/file-types.png") -80px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-tiff {
|
|
background: url("../images/file-types.png") -80px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-tif {
|
|
background: url("../images/file-types.png") -80px -128px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-txt {
|
|
background: url("../images/file-types.png") -128px -16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-vcf {
|
|
background: url("../images/file-types.png") -32px -64px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-video {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-vob {
|
|
background: url("../images/file-types.png") -80px -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-vsd {
|
|
background: url("../images/file-types.png") -128px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-wav {
|
|
background: url("../images/file-types.png") -64px -96px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-wma {
|
|
background: url("../images/file-types.png") -96px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-wmv {
|
|
background: url("../images/file-types.png") -112px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xls {
|
|
background: url("../images/file-types.png") -112px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xlsb {
|
|
background: url("../images/file-types.png") -112px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xlsm {
|
|
background: url("../images/file-types.png") -112px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xlsx {
|
|
background: url("../images/file-types.png") -112px -32px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xml {
|
|
background: url("../images/file-types.png") -112px -48px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xpi {
|
|
background: url("../images/file-types.png") -96px 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-xvid {
|
|
background: url("../images/file-types.png") 0 -112px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
div.icon-zip {
|
|
background: url("../images/file-types.png") -32px -80px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.tooltipster-fall,
|
|
.tooltipster-grow.tooltipster-show {
|
|
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
}
|
|
.tooltipster-base {
|
|
display: flex;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
.tooltipster-box {
|
|
flex: 1 1 auto;
|
|
}
|
|
.tooltipster-content {
|
|
box-sizing: border-box;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
}
|
|
.tooltipster-ruler {
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
visibility: hidden;
|
|
}
|
|
.tooltipster-fade {
|
|
opacity: 0;
|
|
-webkit-transition-property: opacity;
|
|
-moz-transition-property: opacity;
|
|
-o-transition-property: opacity;
|
|
-ms-transition-property: opacity;
|
|
transition-property: opacity;
|
|
}
|
|
.tooltipster-fade.tooltipster-show {
|
|
opacity: 1;
|
|
}
|
|
.tooltipster-grow {
|
|
-webkit-transform: scale(0, 0);
|
|
-moz-transform: scale(0, 0);
|
|
-o-transform: scale(0, 0);
|
|
-ms-transform: scale(0, 0);
|
|
transform: scale(0, 0);
|
|
-webkit-transition-property: -webkit-transform;
|
|
-moz-transition-property: -moz-transform;
|
|
-o-transition-property: -o-transform;
|
|
-ms-transition-property: -ms-transform;
|
|
transition-property: transform;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
.tooltipster-grow.tooltipster-show {
|
|
-webkit-transform: scale(1, 1);
|
|
-moz-transform: scale(1, 1);
|
|
-o-transform: scale(1, 1);
|
|
-ms-transform: scale(1, 1);
|
|
transform: scale(1, 1);
|
|
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
}
|
|
.tooltipster-swing {
|
|
opacity: 0;
|
|
-webkit-transform: rotateZ(4deg);
|
|
-moz-transform: rotateZ(4deg);
|
|
-o-transform: rotateZ(4deg);
|
|
-ms-transform: rotateZ(4deg);
|
|
transform: rotateZ(4deg);
|
|
-webkit-transition-property: -webkit-transform, opacity;
|
|
-moz-transition-property: -moz-transform;
|
|
-o-transition-property: -o-transform;
|
|
-ms-transition-property: -ms-transform;
|
|
transition-property: transform;
|
|
}
|
|
.tooltipster-swing.tooltipster-show {
|
|
opacity: 1;
|
|
-webkit-transform: rotateZ(0);
|
|
-moz-transform: rotateZ(0);
|
|
-o-transform: rotateZ(0);
|
|
-ms-transform: rotateZ(0);
|
|
transform: rotateZ(0);
|
|
-webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 1);
|
|
-webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
|
|
-moz-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
|
|
-ms-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
|
|
-o-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
|
|
transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
|
|
}
|
|
.tooltipster-fall {
|
|
-webkit-transition-property: top;
|
|
-moz-transition-property: top;
|
|
-o-transition-property: top;
|
|
-ms-transition-property: top;
|
|
transition-property: top;
|
|
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
}
|
|
.tooltipster-fall.tooltipster-initial {
|
|
top: 0;
|
|
}
|
|
.tooltipster-fall.tooltipster-dying {
|
|
-webkit-transition-property: all;
|
|
-moz-transition-property: all;
|
|
-o-transition-property: all;
|
|
-ms-transition-property: all;
|
|
transition-property: all;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
.tooltipster-slide {
|
|
-webkit-transition-property: left;
|
|
-moz-transition-property: left;
|
|
-o-transition-property: left;
|
|
-ms-transition-property: left;
|
|
transition-property: left;
|
|
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
|
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
}
|
|
.tooltipster-slide.tooltipster-initial {
|
|
left: -40px;
|
|
}
|
|
.tooltipster-slide.tooltipster-dying {
|
|
-webkit-transition-property: all;
|
|
-moz-transition-property: all;
|
|
-o-transition-property: all;
|
|
-ms-transition-property: all;
|
|
transition-property: all;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
@keyframes tooltipster-fading {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.tooltipster-update-fade {
|
|
animation: tooltipster-fading 0.4s;
|
|
}
|
|
@keyframes tooltipster-rotating {
|
|
25% {
|
|
transform: rotate(-2deg);
|
|
}
|
|
75% {
|
|
transform: rotate(2deg);
|
|
}
|
|
100% {
|
|
transform: rotate(0);
|
|
}
|
|
}
|
|
.tooltipster-update-rotate {
|
|
animation: tooltipster-rotating 0.6s;
|
|
}
|
|
@keyframes tooltipster-scaling {
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.tooltipster-update-scale {
|
|
animation: tooltipster-scaling 0.6s;
|
|
}
|
|
/*.tooltipster-sidetip .tooltipster-box{background:#565656;border:2px solid #000;border-radius:4px}*/
|
|
.tooltipster-sidetip .tooltipster-box {
|
|
border-radius: 5px;
|
|
border: none;
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
from(var(--dynamix-tooltipster-sidetip-bg-from)),
|
|
to(var(--dynamix-tooltipster-sidetip-bg-to))
|
|
);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--dynamix-tooltipster-sidetip-bg-from) 0,
|
|
var(--dynamix-tooltipster-sidetip-bg-to)
|
|
);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
|
|
margin-top: 8px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
|
|
margin-right: 8px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
|
|
margin-left: 8px;
|
|
}
|
|
/*.tooltipster-sidetip.tooltipster-top .tooltipster-box{margin-bottom:8px}*/
|
|
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
|
|
margin-bottom: 7px;
|
|
}
|
|
/*.tooltipster-sidetip .tooltipster-content{color:#fff;line-height:18px;padding:6px 14px}*/
|
|
.tooltipster-sidetip .tooltipster-content {
|
|
color: var(--dynamix-tooltipster-sidetip-content-text-color);
|
|
padding: 8px 16px;
|
|
}
|
|
.tooltipster-sidetip .tooltipster-arrow {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
|
|
height: 10px;
|
|
margin-left: -10px;
|
|
top: 0;
|
|
width: 20px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
|
|
height: 20px;
|
|
margin-top: -10px;
|
|
right: 0;
|
|
top: 0;
|
|
width: 10px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
|
|
height: 20px;
|
|
margin-top: -10px;
|
|
left: 0;
|
|
top: 0;
|
|
width: 10px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
|
|
bottom: 0;
|
|
height: 10px;
|
|
margin-left: -10px;
|
|
width: 20px;
|
|
}
|
|
.tooltipster-sidetip .tooltipster-arrow-background,
|
|
.tooltipster-sidetip .tooltipster-arrow-border {
|
|
height: 0;
|
|
position: absolute;
|
|
width: 0;
|
|
}
|
|
/*.tooltipster-sidetip .tooltipster-arrow-background{border:10px solid transparent}*/
|
|
.tooltipster-sidetip .tooltipster-arrow-background {
|
|
display: none;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
|
|
border-bottom-color: var(--dynamix-tooltipster-sidetip-arrow-bg-color);
|
|
left: 0;
|
|
top: 3px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
|
|
border-left-color: var(--dynamix-tooltipster-sidetip-arrow-bg-color);
|
|
left: -3px;
|
|
top: 0;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
|
|
border-right-color: var(--dynamix-tooltipster-sidetip-arrow-bg-color);
|
|
left: 3px;
|
|
top: 0;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
|
|
border-top-color: var(--dynamix-tooltipster-sidetip-arrow-bg-color);
|
|
left: 0;
|
|
top: -3px;
|
|
}
|
|
.tooltipster-sidetip .tooltipster-arrow-border {
|
|
border: 10px solid transparent;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
/*.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border{border-bottom-color:#000}*/
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
|
|
border-bottom-color: var(--dynamix-tooltipster-sidetip-arrow-border-color);
|
|
}
|
|
/*.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border{border-left-color:#000}*/
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
|
|
border-left-color: var(--dynamix-tooltipster-sidetip-arrow-border-color);
|
|
}
|
|
/*.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border{border-right-color:#000}*/
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
|
|
border-right-color: var(--dynamix-tooltipster-sidetip-arrow-border-color);
|
|
}
|
|
/*.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border{border-top-color:#000}*/
|
|
.tooltipster-sidetip .tooltipster-arrow-uncropped {
|
|
position: relative;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
|
|
top: -10px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
|
|
left: -10px;
|
|
}
|
|
.tooltipster-sidetip.tooltipster-top .tooltipster-box {
|
|
border-bottom: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
|
|
border-top: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
|
|
border-bottom-color: var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
|
|
border-top-color: var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
|
|
border-left-color: var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
|
|
border-right-color: var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-left .tooltipster-box {
|
|
border-right: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.tooltipster-sidetip.tooltipster-right .tooltipster-box {
|
|
border-left: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
|
|
}
|
|
.fileTree {
|
|
display: none;
|
|
width: 300px;
|
|
max-height: 300px;
|
|
position: absolute;
|
|
z-index: 100;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
background-color: var(--dynamix-filetree-bg-color);
|
|
}
|
|
#guiSearchBox:placeholder-shown {
|
|
caret-color: transparent;
|
|
}
|
|
.awesomplete [hidden] {
|
|
display: none;
|
|
}
|
|
.awesomplete .visually-hidden {
|
|
position: absolute;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
.awesomplete {
|
|
display: inline-block;
|
|
position: relative;
|
|
color: var(--dynamix-awesomplete-text-color);
|
|
}
|
|
.awesomplete > input {
|
|
display: block;
|
|
}
|
|
.awesomplete > ul:empty {
|
|
display: none;
|
|
}
|
|
.awesomplete > ul {
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: 1;
|
|
min-width: 100%;
|
|
box-sizing: border-box;
|
|
list-style: none;
|
|
padding: 0;
|
|
border-radius: 0.3em;
|
|
margin: 0.2em 0 0;
|
|
background: var(--dynamix-awesomplete-list-bg-color);
|
|
background: linear-gradient(to bottom right, var(--dynamix-awesomplete-list-bg-from-color), var(--dynamix-awesomplete-list-bg-to-color));
|
|
border: 1px solid var(--dynamix-awesomplete-list-border-color);
|
|
box-shadow: 0.05em 0.2em 0.6em var(--dynamix-awesomplete-list-shadow-color);
|
|
text-shadow: none;
|
|
}
|
|
@supports (transform: scale(0)) {
|
|
.awesomplete > ul {
|
|
transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
|
|
transform-origin: 1.43em -0.43em;
|
|
}
|
|
.awesomplete > ul[hidden],
|
|
.awesomplete > ul:empty {
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
display: block;
|
|
transition-timing-function: ease;
|
|
}
|
|
}
|
|
.awesomplete > ul:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.43em;
|
|
left: 1em;
|
|
width: 0;
|
|
height: 0;
|
|
padding: 0.4em;
|
|
background: var(--dynamix-awesomplete-list-before-bg-color);
|
|
border: inherit;
|
|
border-right: 0;
|
|
border-bottom: 0;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
.awesomplete > ul > li {
|
|
position: relative;
|
|
padding: 0.2em 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
.awesomplete > ul > li:hover {
|
|
background: var(--dynamix-awesomplete-list-item-hover-bg-color);
|
|
color: var(--dynamix-awesomplete-list-item-hover-text-color);
|
|
}
|
|
.awesomplete > ul > li[aria-selected="true"] {
|
|
background: var(--dynamix-awesomplete-list-item-selected-bg-color);
|
|
color: var(--dynamix-awesomplete-list-item-selected-text-color);
|
|
}
|
|
.awesomplete mark {
|
|
background: var(--dynamix-awesomplete-mark-bg-color);
|
|
}
|
|
.awesomplete li:hover mark {
|
|
background: var(--dynamix-awesomplete-mark-hover-bg-color);
|
|
}
|
|
.awesomplete li[aria-selected="true"] mark {
|
|
background: var(--dynamix-awesomplete-mark-selected-bg-color);
|
|
color: inherit;
|
|
}
|
|
|
|
/*
|
|
* Using CSS Nesting, to narrow down the scope of the styles to the .Theme--sidebar class.
|
|
* This allows us to have default-azure & default-gray set css variables
|
|
*
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
|
|
* @see https://caniuse.com/?search=nesting
|
|
*/
|
|
.Theme--sidebar {
|
|
table.tablesorter thead tr th {
|
|
font-size: 1.3rem;
|
|
padding: 5px 20px 5px 6px;
|
|
}
|
|
table.tablesorter tbody tr {
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
table.tablesorter tbody tr.tablesorter-childRow {
|
|
border-bottom: none;
|
|
}
|
|
table.tablesorter tbody tr.tr_last {
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
table.tablesorter tbody.tablesorter-infoOnly {
|
|
border-bottom: 1px solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
/* table.tablesorter.shift {
|
|
margin-top: 10px;
|
|
} */
|
|
table.tablesorter.indexer tfoot tr {
|
|
border-bottom: none;
|
|
}
|
|
table.t1.tablesorter thead th {
|
|
color: var(--dynamix-tablesorter-thead-th-text-color);
|
|
background-color: var(--dynamix-tablesorter-tbody-row-bg-color);
|
|
}
|
|
table.t1.tablesorter tbody tr.alt-row {
|
|
border-bottom: solid var(--dynamix-tablesorter-tbody-row-border-color);
|
|
}
|
|
div.tablesorter-header-inner {
|
|
color: var(--dynamix-tablesorter-thead-th-text-color);
|
|
background-color: var(--dynamix-tablesorter-thead-th-bg-color);
|
|
}
|
|
input.t1.search {
|
|
color: var(--dynamix-tablesorter-thead-th-text-color);
|
|
background-color: var(--dynamix-tablesorter-tbody-row-bg-color);
|
|
}
|
|
span.select[disabled] {
|
|
opacity: 0.3;
|
|
}
|
|
div.box {
|
|
line-height: 2.4rem;
|
|
}
|
|
select[name="port_select"] {
|
|
border: none;
|
|
min-width: 54px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
select[name="enter_view"] {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
padding: 0 12px 0 0;
|
|
border: none;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
/*
|
|
- Styles migrated from original file dynamix.docker.manager/styles/DockerManager.css
|
|
- Majority of these styles appear to be modifying /webGui/styles/jquery.ui.css
|
|
*/
|
|
.Theme--azure:root,
|
|
.Theme--white:root {
|
|
--dynamix-jquery-ui-button-text-color: var(--orange-500);
|
|
--dynamix-jquery-ui-button-background-start: var(--red-800);
|
|
--dynamix-jquery-ui-button-background-end: var(--orange-500);
|
|
--dynamix-jquery-ui-button-hover-color: var(--gray-100);
|
|
--dynamix-jquery-ui-default-background: transparent;
|
|
--dynamix-jquery-ui-border-color: var(--black);
|
|
--dynamix-jquery-ui-header-background: var(--gray-150); /* Condensed from: #e3e3e3 */
|
|
--dynamix-jquery-ui-header-color: var(--black);
|
|
--dynamix-jquery-ui-content-background: var(--gray-100);
|
|
--dynamix-jquery-ui-content-color: var(--black);
|
|
--dynamix-jquery-ui-active-background: var(--gray-150);
|
|
--dynamix-jquery-ui-dropcontainer-background: var(--gray-100);
|
|
--dynamix-jquery-ui-disabled-color: var(--black);
|
|
--dynamix-jquery-ui-disabled-border-color: var(--gray-400); /* Condensed from: #a2a2a2 */
|
|
--dynamix-jquery-ui-disabled-background: var(--gray-150);
|
|
--dynamix-jquery-ui-text-color: var(--black);
|
|
}
|
|
|
|
.Theme--black:root,
|
|
.Theme--gray:root {
|
|
--dynamix-jquery-ui-button-text-color: var(--orange-500);
|
|
--dynamix-jquery-ui-button-background-start: var(--red-800);
|
|
--dynamix-jquery-ui-button-background-end: var(--orange-500);
|
|
--dynamix-jquery-ui-button-hover-color: var(--gray-100);
|
|
--dynamix-jquery-ui-default-background: transparent;
|
|
--dynamix-jquery-ui-border-color: var(--gray-200); /* Condensed from: #e5e5e5 */
|
|
--dynamix-jquery-ui-header-background: var(--gray-800); /* Condensed from: #2b2b2b */
|
|
--dynamix-jquery-ui-header-color: var(--gray-100);
|
|
--dynamix-jquery-ui-content-background: var(--black);
|
|
--dynamix-jquery-ui-content-color: var(--gray-100);
|
|
--dynamix-jquery-ui-active-background: var(--gray-700); /* Condensed from: #262626 */
|
|
--dynamix-jquery-ui-dropcontainer-background: var(--black);
|
|
--dynamix-jquery-ui-disabled-color: var(--gray-100);
|
|
--dynamix-jquery-ui-disabled-border-color: var(--gray-500); /* Condensed from: #6c6c6c */
|
|
--dynamix-jquery-ui-disabled-background: var(--gray-700); /* Condensed from: #262626 */
|
|
--dynamix-jquery-ui-text-color: var(--gray-100);
|
|
}
|
|
|
|
.ui-dialog {
|
|
box-sizing: border-box;
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.ui-dialog:not(.ui-dialog-content-full) {
|
|
/*
|
|
- If there is no .ui-dialog-content-full class, then we need to center the dialog no matter what the library JS sets on the element.
|
|
- Otherwise, if we do have .ui-dialog-content-full on the element, then we need to use the library JS to position the dialog at "full screen" size.
|
|
*/
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
box-sizing: border-box;
|
|
width: 100% !important;
|
|
max-width: 100rem;
|
|
|
|
.ui-dialog-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: auto !important;
|
|
min-height: 35vh !important;
|
|
max-height: 70vh !important;
|
|
overflow-y: auto;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
|
|
dl {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.dfm_info {
|
|
margin-top: auto;
|
|
}
|
|
|
|
}
|
|
|
|
.ui-dialog-buttonpane {
|
|
.ui-dialog-buttonset {
|
|
button {
|
|
font-family: clear-sans;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
margin: 10px 12px 10px 0;
|
|
padding: 9px 18px;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
outline: none;
|
|
border-radius: 4px;
|
|
border: 0;
|
|
color: var(--dynamix-jquery-ui-button-text-color);
|
|
background:
|
|
-webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
from(var(--dynamix-jquery-ui-button-background-start)),
|
|
to(var(--dynamix-jquery-ui-button-background-end))
|
|
)
|
|
0 0 no-repeat,
|
|
-webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
from(var(--dynamix-jquery-ui-button-background-start)),
|
|
to(var(--dynamix-jquery-ui-button-background-end))
|
|
) 0 100% no-repeat,
|
|
-webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
from(var(--dynamix-jquery-ui-button-background-start)),
|
|
to(var(--dynamix-jquery-ui-button-background-start))
|
|
) 0 100% no-repeat,
|
|
-webkit-gradient(
|
|
linear,
|
|
left bottom,
|
|
left top,
|
|
from(var(--dynamix-jquery-ui-button-background-end)),
|
|
to(var(--dynamix-jquery-ui-button-background-end))
|
|
) 100% 100% no-repeat;
|
|
background:
|
|
linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 0 no-repeat,
|
|
linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 100% no-repeat,
|
|
linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-start)) 0 100% no-repeat,
|
|
linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-end) 0, var(--dynamix-jquery-ui-button-background-end)) 100% 100% no-repeat;
|
|
background-size:
|
|
100% 2px,
|
|
100% 2px,
|
|
2px 100%,
|
|
2px 100%;
|
|
|
|
&:hover {
|
|
color: var(--dynamix-jquery-ui-button-hover-color);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
right top,
|
|
from(var(--dynamix-jquery-ui-button-background-start)),
|
|
to(var(--dynamix-jquery-ui-button-background-end))
|
|
);
|
|
background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Consolidated .ui-dropdownchecklist styles */
|
|
.ui-dropdownchecklist {
|
|
background-color: transparent;
|
|
background-image: linear-gradient(66.6deg, transparent 60%, var(--input-border-color) 40%),
|
|
linear-gradient(113.4deg, var(--input-border-color) 40%, transparent 60%);
|
|
background-position: calc(100% - 4px), 100%;
|
|
background-size:
|
|
4px 6px,
|
|
4px 6px;
|
|
background-repeat: no-repeat;
|
|
border: none;
|
|
border-bottom: 1px solid var(--input-border-color);
|
|
outline: none;
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
cursor: pointer;
|
|
|
|
.ui-state-default {
|
|
background: var(--dynamix-jquery-ui-default-background);
|
|
border: none;
|
|
box-shadow: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-widget-content {
|
|
.ui-state-default {
|
|
background: var(--dynamix-jquery-ui-default-background);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-dropdownchecklist-dropcontainer-wrapper {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ui-dropdownchecklist-group {
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
padding: 1px 9px 1px 8px;
|
|
}
|
|
|
|
.ui-dropdownchecklist-selector {
|
|
border: none;
|
|
border-bottom: 1px solid var(--dynamix-ui-dropdownchecklist-color);
|
|
outline: none;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
padding: 1px 0;
|
|
}
|
|
|
|
.ui-dropdownchecklist-selector-wrapper {
|
|
vertical-align: middle;
|
|
font-size: 0;
|
|
width: 100%;
|
|
|
|
/**
|
|
* override the defined with set by the jquery library
|
|
*
|
|
* @note - commented out b/c it causes overflow issues if too many items are selected
|
|
*/
|
|
/* .ui-dropdownchecklist-selector {
|
|
width: 100% !important;
|
|
} */
|
|
|
|
.ui-dropdownchecklist-text {
|
|
padding-left: .5rem;
|
|
}
|
|
}
|
|
|
|
.ui-dropdownchecklist-dropcontainer {
|
|
color: var(--dynamix-ui-dropdownchecklist-color);
|
|
background-color: var(--dynamix-ui-dropdownchecklist-color-alt1);
|
|
border: 1px solid var(--dynamix-jquery-ui-border-color);
|
|
}
|
|
|
|
.ui-state-disabled {
|
|
color: var(--dynamix-ui-dropdownchecklist-color);
|
|
border-bottom-color: var(--dynamix-ui-dropdownchecklist-color-alt2);
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
.ui-dropdownchecklist-indent {
|
|
padding-left: 7px;
|
|
}
|
|
|
|
.ui-dropdownchecklist-text {
|
|
font-family: clear-sans;
|
|
font-size: 1.3rem;
|
|
color: var(--dynamix-ui-dropdownchecklist-color);
|
|
}
|
|
|
|
.ui-dropdownchecklist-item {
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
|
|
input {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
/* Theme-specific styles for sidebar */
|
|
.Theme--sidebar {
|
|
.ui-dropdownchecklist {
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
border: 1px solid var(--border-color);
|
|
background-position: calc(100% - 8px), calc(100% - 4px);
|
|
}
|
|
|
|
.ui-dropdownchecklist-selector {
|
|
padding: 4px 6px 1px 6px;
|
|
/* 1px 14px 1px 6px makes the dropdown wider for the share read / write dropdown but
|
|
IMO not needed because it makes the dropdown too wide when accompany other select inputs */
|
|
}
|
|
|
|
.ui-dropdownchecklist-group {
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.ui-dropdownchecklist-dropcontainer {
|
|
border: 1px solid var(--dynamix-ui-dropdownchecklist-dropcontainer-border-color);
|
|
}
|
|
|
|
.ui-state-disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.ui-dropdownchecklist-indent {
|
|
padding-left: 9px;
|
|
}
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: none;
|
|
background: var(--dynamix-jquery-ui-header-background);
|
|
color: var(--dynamix-jquery-ui-header-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-widget-content {
|
|
border: 1px solid var(--dynamix-jquery-ui-border-color);
|
|
background: var(--dynamix-jquery-ui-content-background);
|
|
color: var(--dynamix-jquery-ui-content-color);
|
|
}
|
|
|
|
.ui-state-active {
|
|
background: var(--dynamix-jquery-ui-active-background);
|
|
}
|
|
|
|
.ui-tailscale {
|
|
&-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
min-width: 300px;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
&-label {
|
|
flex: 1;
|
|
}
|
|
|
|
&-value {
|
|
flex: 3;
|
|
}
|
|
}
|