yvan-window/public/static/css/style/style.css

/* 通用样式 */
html,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-size: 13px;
    font-family: Verdana, Arial, Microsoft YaHei, sans-serif;
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
}

button,
select {
    text-transform: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li {
    margin: 0;
    padding: 0;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

body,
.container {
    width: 100%;
    height: 100%;
    background-image: url("../../../../public/image/index/bigBackground.jpg");
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

body,
.normal-font,
.sds-window-v5 .ext-el-mask-msg .x-loading-message-inner,
.sds-window-v5.x-window-dlg,
.sds-window-v5.x-window-dlg input,
.sds-window-v5.x-window-dlg textarea {
    color: #414b55;
}

.container {
    width: 100%;
    height: 100%;
}

/* 头部 */
.taskbar-wrapper {
    position: absolute;
    z-index: 5;
    opacity: 1;
    top: 0px;
    width: 100%;
    height: 39px;
    display: flex;
    flex-direction: row;
}

.taskbar-wrapper .taskbar-left-wrapper {
    background-color: rgba(50, 60, 70, 0.9);
    box-shadow: 0px 1px 2px rgba(10, 20, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-width: 0px;
    height: 38px;
    margin: 0 6px 0px 160px;
    border-radius: 0px 0px 3px 3px;
    flex: 0 0 auto;
}

.show-all-button {
    cursor: pointer;
    top: 0;
    float: left;
    display: block;
    width: 17px;
    height: 36px;
    position: relative;
    border: 1px solid transparent;
    border-radius: 0px 0px 0px 2px;
    background-color: transparent;
    padding: 0;
    border: none;
}

.show-all-button::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.show-all-button::before {
    cursor: pointer;
    content: ' ';
    display: block;
    width: 16px;
    top: -1px;
    bottom: -1px;
    left: -18px;
    position: absolute;
}

.start-button {
    height: 39px;
    width: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.start-button .start-button-img {
    background-image: url(../../../../public/image/index/menu.png);
    background-size: 24px 72px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-color: transparent;
    padding: 0;
    border: none;
}

.start-button .start-button-img:hover {
    background-position: 0 -24px;
}

.start-button .start-button-img:active,
.start-button .start-button-img.pressed {
    background-position: 0 -48px;
}

.sds-notify-badge-num {
    width: 10px;
    height: 10px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    pointer-events: none;
    box-shadow: 0 1px 4px 0 rgba(46, 48, 50, 0.6);
    border-radius: 5px;
    display: none;
}


.taskbar-buttons-container {
    min-width: 150px;
    height: 39px;
    padding-right: 8px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    overflow: hidden;
}

.taskbar-buttons-container .taskbar-buttons-wrapper {
    background-color: rgba(50, 60, 70, 0.9);
    box-shadow: 0px 1px 2px rgba(10, 20, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-width: 0px;
    height: 39px;
    background-color: rgba(50, 60, 70, 0.9);
    display: inline-flex;
    vertical-align: top;
    width: auto;
    border-radius: 0 0 5px 5px;
}

.tray-container {
    background-color: rgba(50, 60, 70, 0.9);
    box-shadow: 0px 1px 2px rgba(10, 20, 30, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-width: 0px;
    height: 39px;
    border-radius: 0 0 3px 3px;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    padding: 0 8px 0 8px;
    margin-right: 12px;
}

.tray-container .system-tray-wrapper {
    display: flex;
    flex: 0 0 auto;
}

.tray-item {
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: transparent;
    padding: 0;
    border: none;
}

.tray-item.system {
    width: 24px;
    height: 24px;
    margin: 7px 8px 0px 8px;
}

.tray-item.system:hover {
    background-position: 0 -24px;
}

.tray-item.system:active,
.tray-item.system.pressed {
    background-position: 0 -48px;
}

.tray-container .notify-button {
    background-image: url(../../../../public/image/index/message.png);
    background-size: 24px 72px;
}

.tray-container .user-button {
    background-image: url(../../../../public/image/index/user.png);
    background-size: 24px 72px;
}

.tray-container .widget-button {
    background-image: url(../../../../public/image/index/widget.png);
    background-size: 24px 72px;
}

.tray-container .search-button {
    background-image: url(../../../../public/image/index/search.png);
    background-size: 24px 72px;
}

/* 桌面 */
#sds-desktop {
    opacity: 1;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0 none;
    overflow: hidden;
    cursor: default;
    zoom: 1;
    top: 0;
}

.menu.sds-desktop{
    position: absolute;
    width: 120px;
    height: 100%;
}

.menu.sds-desktop ul{
    width: 100px;
    text-align: center;
}

.menu.sds-desktop ul li{
    background-color: rgba(50,60,70,0.9);
    padding: 10px 25px;
    box-sizing: border-box;
}

.menu.sds-desktop ul li div{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    width: 50px;
    height: 50px;
}



ul.sds-desktop-shortcut {
    position: absolute;
    float: left;
    top: 41px;
    left: 120px;
    width: 100%;
    height: calc(100% - 41px);
    padding: 10px 10px 10px 4px;
    box-sizing: border-box;
}

.sds-desktop-layout {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: left;
    align-content: flex-start;
}


.launch-icon {
    width: 132px;
    height: 104px;
    float: left;
    overflow: visible;
    cursor: pointer;
    list-style-type: none;
}

.launch-icon .image {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto 4px auto;
}

.launch-icon .sds-application-notify-badge-num {
    width: 14px;
    height: 14px;
    bottom: -1px;
    right: -2px;
    z-index: 0;
}

.sds-application-notify-badge-num {
    display: inline-block;
    background: #FF3737;
    box-shadow: 0 1px 4px 0 rgba(46, 48, 50, 0.6);
    border-radius: 100px;
    min-width: 12px;
    min-height: 12px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
    box-sizing: border-box;
    right: -4px;
    bottom: -2px;
    position: absolute;
}

.launch-icon.icon-item .text {
    height: 36px;
    overflow: hidden;
}

.launch-icon .text,
.launch-icon .text a {
    text-shadow: 0em 0.1em 0.2em rgba(0, 0, 0, 0.8);
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    margin: 0 auto;
    overflow: visible;
    text-overflow: ellipsis;
    color: #fff;
}

.x-window {
    zoom: 1;
}

.x-window-proxy {
    border: 0px solid;
    z-index: 12000;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
}

.sds-window-v5 {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

.ext-webkit .x-dlg-focus {
    width: 1px;
    height: 1px;
}

.sds-window-v5 .x-tool-close {
    background-image: url("../../../../public/image/index/windowClose.png");
    background-position: 0 0;
}

.sds-window-v5 .x-tool {
    width: 24px;
    height: 24px;
    margin-left: 8px;
}

.sds-window-v5 .x-tool-restore {
    background-image: url("../../../../public/image/index/windowRestore.png");
    background-position: 0 0;
}

.x-tool-restore {
    background-position: 0 -45px;
}

.sds-window-v5 .x-tool-maximize {
    background-image: url("../../../../public/image/index/windowMaximize.png");
    background-position: 0 0;
}

.x-tool-maximize {
    background-position: 0 -30px;
}

/* 右侧固定栏 */

.v-widget-header .v-widget-header-tool-icon.add {
    background-image: url(../../../../public/image/index/windowAdd.png);
    background-size: 24px 72px;
}

.v-widget-header .v-widget-header-tool-icon.minimize {
    background-image: url(../../../../public/image/index/windowReduce.png);
    background-size: 24px 72px;
}

.v-widget-header .v-widget-header-tool-icon.pin {
    background-image: url(../../../../public/image/index/windowFixed.png);
    background-size: 24px 72px;
}

.v-widget-header .v-widget-header-tool-icon.dock {
    background-image: url(../../../../public/image/index/windowPosition.png);
    background-size: 24px 72px;
}

.v-widget-header .v-widget-header-tool-icon {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background-position: 0 0;
}


.v-widget-header .v-widget-header-tool-icon:hover,
.v-widget-header .v-widget-header-tool-icon.hover {
    background-position: 0px -24px;
}

.v-widget-header .v-widget-header-tool-icon:active,
.v-widget-header .v-widget-header-tool-icon.active {
    background-position: 0px -48px;
}



.v-window {
    overflow: hidden;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .6);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.v-widget-window {
    background: rgba(40, 50, 60, 0.85);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    transition: top ease-in 0.2s, left ease-in 0.2s;
}

.v-window-draggable .v-window-header-wrapper,
.v-window .v-window-header-wrapper {
    flex: 0 0 auto;
    display: flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #fff;
    position: relative;
    padding: 8px 0 0 18px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(198, 212, 224, .5);
}

.v-widget-window .v-window-header-wrapper {
    height: 32px;
    border: none;
    padding: 0;
    background: none;
}

.v-window .draggable.v-window-header-wrapper {
    cursor: move;
}

.v-widget-header {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.v-widget-header .v-widget-header-left,
.v-widget-header .v-widget-header-right {
    display: flex;
}

.v-widget-header .v-btn.v-btn-dropdown span {
    padding: 0;
}

.v-widget-header .v-widget-header-right .v-widget-header-tool-icon {
    margin-left: 8px;
}

.v-widget-header .v-btn.v-btn-dropdown {
    height: 24px;
}

.v-widget-window .v-window-body {
    background: none;
}


.v-widget-window .v-widget-items-wrapper {
    height: 100%;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.v-widget-window .v-ps {
    padding-right: 0;
}

.v-widget-item {
    display: none;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.95);
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid rgba(40, 50, 60, 0.3);
    border-radius: 3px;
    padding-bottom: 4px;
    height: 208px;
    box-shadow: none;
    overflow: hidden;
    transition: height ease-in 0.2s;
}

.v-widget-window .v-ps.show {
    padding-right: 4px;
}

.v-widget-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.v-widget-item.active {
    display: block;
}

.v-widget-item.active~.v-widget-item.active {
    margin-top: 8px;
}

.v-widget-item .v-widget-item-header {
    cursor: move;
    display: flex;
    align-items: start;
    height: 35px;
    margin-left: 3px;
    margin-right: 5px;
    font-size: 12px;
}

.v-widget-item .v-widget-item-header {
    font-weight: 700;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-icon {
    width: 32px;
    height: 32px;
    margin-top: 1px;
    margin-bottom: 2px;
    margin-right: 2px;
    cursor: pointer;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-title {
    align-self: center;
    font-size: 1em;
    flex: 1;
}

.v-widget-item .v-widget-item-header {
    cursor: move;
    display: flex;
    align-items: start;
    height: 35px;
    margin-left: 3px;
    margin-right: 5px;
    font-size: 12px;
}

.v-widget-item .v-widget-item-header:hover .v-widget-item-header-tools {
    opacity: 1
}

.v-widget-item .v-widget-item-header .v-widget-item-header-title {
    align-self: center;
    font-size: 1em;
    flex: 1;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-title .v-widget-item-header-title-text {
    cursor: pointer;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools {
    justify-content: flex-end;
    display: flex;
    margin-top: 5px;
    margin-bottom: 6px;
    transition: opacity 0.2s;
    opacity: 0;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.toolbar {
    background-image: url(../../../../public/image/index/windowMove.png);
    background-size: 24px 72px;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon {
    cursor: pointer;
    margin-left: 8px;
    height: 24px;
    width: 24px;
    background-position: 0 0;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.minimize {
    background-image: url(../../../../public/image/index/WindowUp.png);
    background-size: 24px 72px;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.close {
    background-image: url(../../../../public/image/index/windowClose.png);
    background-size: 24px 72px;
}


.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon:hover {
    background-position: 0px -24px;
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon:active {
    background-position: 0px -48px;
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpack .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.toolbar {
        background-size: 24px 72px
    }
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpackdebug .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.toolbar {
        background-size: 24px 72px;
        outline: 1px green dashed
    }
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.minimize {
    background-size: 24px 72px
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpack .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.minimize {
        background-size: 24px 72px
    }
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpackdebug.v-widget-item.v-widget-item-header.v-widget-item-header-tools.v-widget-item-header-tool-icon.minimize {
        background-size: 24px 72px;
        outline: 1px green dashed
    }
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.maximize {
    background-size: 24px 72px
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpack .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.maximize {
        background-size: 24px 72px
    }
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpackdebug .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.maximize {
        background-size: 24px 72px;
        outline: 1px green dashed
    }
}

.v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.close {
    background-size: 24px 72px
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpack .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.close {
        background-size: 24px 72px
    }
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min-resolution: 144dpi) {
    .synohdpackdebug .v-widget-item .v-widget-item-header .v-widget-item-header-tools .v-widget-item-header-tool-icon.close {
        background-size: 24px 72px;
        outline: 1px green dashed
    }
}

.syno-sysinfo-system-health .x-panel-body {
    background-color: transparent;
}

.syno-sysinfo-system-health .syno-sysinfo-system-health-status {
    height: 76px;
    width: 100%;
    padding-bottom: 4px;
    display: flex;
    align-items: center;
}

/* 系统状况 */
.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-west-normal,
.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-west-warning,
.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-west-initial,
.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-west-emergency {
    position: relative;
    margin: 8px 16px 8px 8px;
    width: 60px;
    height: 60px;
    background-image: url('../../../../public/image/index/minIcon.png');
    background-position: 0 -192px;
    background-repeat: no-repeat;
}

.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-west-normal {
    background-position: 0 -192px;
}

.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-content-wrap {
    display: flex;
    flex-direction: column;
    width: 212px;
}

.syno-sysinfo-health-text-overflow,
.syno-sysinfo-system-health-south,
.sys-info-south-table .x-table-layout-cell .syno-sysinfo-system-health-south-data,
.sys-info-south-table .x-table-layout-cell .syno-sysinfo-system-health-south-title,
.syno-sysinfo-system-health-content-header-warning,
.syno-sysinfo-system-health-content-header-emergency,
.syno-sysinfo-system-health-content-header-normal,
.syno-sysinfo-system-health-content-header-initial {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.syno-sysinfo-system-health-content-header-normal,
.syno-sysinfo-system-health-content-header-initial {
    color: #009E05;
}

.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-content-wrap .syno-sysinfo-system-health-summary {
    font-size: 20px;
    line-height: 28px;
}

.syno-sysinfo-system-health .syno-sysinfo-system-health-status .syno-sysinfo-system-health-content-wrap .syno-sysinfo-system-health-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 20px;
    max-height: 40px;
    font-size: 12px;
}


.sds-window-v5 .x-panel-body {
    background-color: transparent;
}

.syno-sysinfo-system-health .x-panel-body {
    background-color: transparent;
}

.sys-info-south-table {
    border: none;
    color: #414b55;
}

.sys-info-south-table .x-table-layout-ct {
    border: none;
    height: 84px !important;
}

.sys-info-south-table .x-table-layout {
    width: 296px !important;
}

.sys-info-south-table .x-table-layout-cell {
    height: 28px;
    line-height: 28px;
}

.sys-info-south-table .x-table-layout-cell .syno-sysinfo-system-health-south-title {
    width: 142px;
    padding-right: 6px;
    font-size: 12px;
}

.sys-info-south-table .sys-info-btn {
    border: none;
    background-image: none;
    background-color: transparent;
}

.sys-info-south-table .sys-info-btn .x-btn-text {
    color: #414b55;
    padding-left: 0px;
    font-size: 12px;
}

.sys-info-south-table .sys-info-btn,
.sys-info-south-table .sys-info-btn .x-btn-text,
.sys-info-south-table .x-table-layout-cell .syno-sysinfo-system-health-south-title {
    font-weight: 700;
}

.syno-cjk .sys-info-south-table .sys-info-btn,
.sys-info-south-table .syno-cjk .sys-info-btn,
.syno-cjk .sys-info-south-table .sys-info-btn .x-btn-text,
.sys-info-south-table .sys-info-btn .syno-cjk .x-btn-text,
.syno-cjk .sys-info-south-table .x-table-layout-cell .syno-sysinfo-system-health-south-title,
.sys-info-south-table .x-table-layout-cell .syno-cjk .syno-sysinfo-system-health-south-title {
    font-weight: 600;
}

.syno-ux-button em.x-btn-arrow {
    display: block;
    padding-right: 12px;
    background-image: url("../../../../public/image/index/downArrow.png");
    background-repeat: no-repeat;
    background-position: right 2px;
}

.sys-info-south-table .row-left {
    padding-right: 6px;
    width: 148px;
}

.sys-info-south-table .x-table-layout-cell {
    height: 28px;
    line-height: 28px;
}

.sys-info-south-table .x-table-layout-cell .x-panel-body {
    border: none;
}

.resource-monitor-widget {
    padding: 4px 11px 5px 11px;
}

.x-panel {
    border-style: solid;
    border-width: 0;
}

/* 资源监控 */
.resource-monitor-widget .resource-monitor-percentage-cmp .percentage-cmp-title {
    width: 86px;
    padding-right: 6px;
    float: left;
    line-height: 24px;
    color: #414b55;
    font-size: 12px;
}

.resource-monitor-widget .resource-monitor-percentage-cmp .percentage-cmp-hbar-background {
    background-color: rgba(34, 38, 54, 0.1);
    width: 160px;
    height: 8px;
    margin: 8px 0px;
    float: left;
    border-radius: 4px;
    overflow: hidden;
}

.resource-monitor-widget .resource-monitor-percentage-cmp .percentage-cmp-hbar-background .percentage-cmp-hbar-fill {
    width: 70px;
    height: 8px;
    background-color: #057FEB;
    -moz-transition-property: width;
    -o-transition-property: width;
    -webkit-transition-property: width;
    transition-property: width;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.resource-monitor-widget .resource-monitor-percentage-cmp .percentage-cmp-value {
    float: left;
    width: 34px;
    padding-left: 6px;
    line-height: 24px;
    font-size: 12px;
}

.resource-monitor-widget .resource-monitor-widget-subcmp-text,
.resource-monitor-widget .resource-monitor-percentage-cmp,
.resource-monitor-widget .resource-Monitor-networkio-cmp,
.resource-monitor-widget .resource-Monitor-networkio-cmp .interface-selection-button.syno-ux-button .x-btn-arrow .x-btn-text {
    font-size: 13px;
    color: #414b55;
    line-height: 24px;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp {
    float: left;
    height: 24px;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-icon.out {
    background-position: 0 0px;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-icon {
    background-image: url("../../../../public/image/index/upDown.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    padding: 0px;
    margin: 4px 0px 4px 6px;
    float: left;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-label.out {
    color: #057FEB;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-label {
    float: left;
    color: #09B3B3;
    height: 24px !important;
    line-height: 24px;
    padding: 0px 8px 0px 0px;
    font-size: 12px;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-icon.in {
    margin-left: 0px;
    background-position: 0 -16px;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .networkio-cmp-icon {
    background-image: url("../../../../public/image/index/upDown.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    padding: 0px;
    margin: 4px 0px 4px 6px;
    float: left;
}

.x-btn.interface-selection-button.x-btn-noicon {
    border: 0px;
    background-color: transparent;
    background-image: none;
}

.resource-monitor-widget .resource-Monitor-networkio-cmp .interface-selection-button.syno-ux-button .x-btn-arrow .x-btn-text {
    height: 24px;
    line-height: 24px;
    padding-left: 0px;
    font-size: 12px;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.resource-Monitor-widget-base {
    width: 296px;
}

.resource-monitor-widget .resource-Monitor-widget-panel .echarts-wrapper {
    height: 92px;
    width: 296px;
}


/* 备份 */
.syno-sds-backupapp-scedule-title,
.syno-backup-task-main-page .syno-backup-task-status-panel .x-panel-body .task-status-text,
.syno-backup-task-main-page .syno-backup-task-status-panel .x-panel-body .syno-backup-task-status-active-panel .progress-upper-row .syno-backup-progress-percentage-text,
.syno-backup-task-main-page .syno-backup-task-status-panel .x-panel-body .syno-backup-task-status-suspend-panel .progress-upper-row .syno-backup-progress-percentage-text,
.syno-backup-task-main-page .syno-backup-task-subpanel .x-panel-header .x-panel-header-text,
.syno-backup-new-feature-panel .syno-backup-new-feature-panel-title,
.syno-backup-new-feature-panel .syno-backup-learn-more-text,
.syno-backup-app-grid-panel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner .syno-backup-cell-app-title .syno-backup-cell-app-beta,
.syno-backup-app-grid-panel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner .syno-backup-cell-app-title .syno-backup-cell-app-name,
.syno-backup-restore-progress-window .syno-ux-fieldset .x-fieldset-header .x-fieldset-header-text,
.syno-backup-client-common-customized-retention-setting-window .syno-backup-customized-retention-description,
.syno-backup-client-common-filter-setting-window-body .syno-backup-client-common-filter-setting-panel .syno-backup-filter-setting-mask-text,
.syno-backup-client-common-statistic-window .syno-backup-statistic-panel .syno-backup-statistic-topbar-container .syno-backup-statistic-topbar-left-container .syno-backup-statistic-title,
.syno-backup-client-common-statistic-window .syno-backup-statistic-panel .syno-backup-statistic-line-chart .empty-page-position .empty-page-parent .empty-page-text,
.syno-backup-client-common-statistic-window .syno-backup-statistic-panel .syno-backup-statistic-line-chart .data-node-tooltip .title,
.syno-backup-client-common-statistic-window .syno-backup-statistic-panel .syno-backup-statistic-line-chart .data-node-tooltip .text-field .tooltip-text span.right font,
.syno-backup-client-common-source-info-panel .syno-backup-source-info-title,
.syno-backup-client-common-source-usage-info .legend .legend-w .name,
.syno-backup-client-explore .syno-sds-backup-filebrowser-treepanel .root_node a span,
.syno-backup-client-explore .syno-sds-backup-filebrowser-treepanel .x-tree-node .root_node a span,
.syno-backup-client-explore .syno-sds-backup-pathbar .x-btn-over .syno-sds-backup-pathbutton-text,
.syno-backup-client-explore .syno-backup-timeline-wrapper .syno-backup-timeline-scroller ul .month-label,
.syno-backup-client-explore .syno-backup-timeline-wrapper .syno-backup-timeline-scroller li.version-select .version-box .version-count,
.syno-backup-client-explore .syno-backup-timeline-wrapper .syno-backup-timeline-scroller li.version-select .version-box .version-time,
.syno-backup-client-explore .syno-backup-timeline-version-tag .syno-backup-timeline-version-tag-bubble span,
.syno-backup-client-timeline-version-menu .syno-backup-timeline-version-ct .version-menu-header,
.syno-backup-client-timeline-version-menu .syno-backup-timeline-version-ct table td.version-selected,
.syno-sds-backup-client-jobtray.syno-sds-backup-jobtray-panel .jobtray-grid-panel .x-panel-header .x-panel-header-text {
    font-weight: 700;
}

.sds-widget-gridpanel .x-grid3 {
    background-color: transparent;
}

.sds-widget-gridpanel .arrow-scroller {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 24px;
    bottom: 0px;
    margin: 2px;
    margin-right: 1px;
}

.sds-widget-gridpanel .arrow-scroller .up {
    height: 50%;
    cursor: pointer;
}

.sds-widget-gridpanel .arrow-scroller .up .arrow-up,
.sds-widget-gridpanel .arrow-scroller .down .arrow-down {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url(../../../../public/image/index/arrowhead.png);
    background-size: 48px 72px;
}

.sds-widget-gridpanel .arrow-scroller .up .arrow-up:hover,
.sds-widget-gridpanel .arrow-scroller .down .arrow-down:hover {
    background-position: 0px -24px;
}

.sds-widget-gridpanel .arrow-scroller .up .arrow-up:active,
.sds-widget-gridpanel .arrow-scroller .down .arrow-down:active {
    background-position: 0px -48px;
}

.sds-widget-gridpanel .arrow-scroller .up.arrow-disabled {
    cursor: default;
}

.sds-widget-gridpanel .arrow-scroller .up .arrow-up {
    background-position: -24px 0px;
}

.sds-widget-gridpanel .arrow-scroller .up .arrow-up {
    position: absolute;
    top: 0px;
}

.sds-widget-gridpanel .arrow-scroller .up.arrow-disabled .arrow-up {
    background-position: -24px 0px !important;
    opacity: 0.4;
}

.sds-widget-gridpanel .arrow-scroller .down .arrow-down {
    background-position: 0px 0px;
}

.syno-sds-backupapp-widget-panel .x-grid3-row {
    margin-bottom: 2px;
}

.sds-widget-gridpanel .arrow-scroller .down .arrow-down {
    position: absolute;
    bottom: 0px;
}

.sds-widget-gridpanel .arrow-scroller .down.arrow-disabled .arrow-down {
    background-position: 0px 0px !important;
    opacity: 0.4;
}

.sds-widget-gridpanel .x-grid3-row {
    -webkit-text-size-adjust: none;
    font-size: 12px;
    border-width: 0;
    background-color: transparent;
}

.sds-widget-gridpanel .x-grid3-row .x-grid3-td-bkpstatus .x-grid3-cell-inner {
    height: 64px;
    padding: 8px 0 8px 0;
}

.sds-widget-gridpanel .x-grid3-row .x-grid3-cell-inner {
    line-height: 28px;
}

.syno-sds-backupapp-scedule-icon.no-result {
    background-position: 0px -48px;
}

.syno-sds-backupapp-scedule-enable div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.syno-sds-backupapp-scedule-icon {
    background-image: url("../../../../public/image/index/wdgt_icn_scheduled_status.png");
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 6px;
}


.syno-sds-backupapp-scedule-icon.schedule-inactive {
    background-position: 0px -144px;
}

.syno-sds-backupapp-scedule-enable div {
    text-overflow: ellipsis;
    overflow: hidden;
}

.syno-sds-backupapp-scedule-title {
    width: 134px;
    float: left;
}

.syno-sds-backupapp-scedule-time {
    width: 114px;
    float: right;
    text-align: right;
}

.syno-sds-backupapp-scedule-enable div {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 最新日志 */
.sds-widget-gridpanel .x-grid3-row {
    -webkit-text-size-adjust: none;
    font-size: 12px;
    border-width: 0;
    background-color: transparent;
}

.sds-widget-gridpanel .x-grid3-cell-inner {
    text-overflow: ellipsis;
}

.sds-widget-gridpanel .x-grid3-row .x-grid3-cell-inner {
    height: 28px;
    padding: 0px;
    line-height: 28px;
}

.sds-sysinfo-widget-icon,
.syno-sysinfo-file-change-log,
.sds-recentlog-loglevel,
.syno-crrentconn-icon {
    background-image: url('../../../../public/image/index/minIcon.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    margin: 2px 6px 2px 7px;
    float: left;
}

.log-info {
    color: #414b55;
}

.sds-recentlog-loglevel.log-info {
    background-position: 0 -24px;
}

/* 计划的任务 */
.syno-taskscheduler-enable-taskicon,
.syno-taskscheduler-disable-taskicon {
    background-image: url("../../../../public/image/index/wdgt_icn_items.png");
    width: 24px;
    height: 24px;
    margin: 2px 6px 2px 7px;
    float: left;
    background-position: 0 -144px;
}

/* 已连接用户 */
.syno-crrentconn-split {
    background-image: url('../../../../public/image/index/minIcon.png');
    background-position: 0 -372px;
    width: 2px;
    height: 28px;
    float: left;
}

.syno-sysinfo-disconn-button ,.syno-sysinfo-conn-button {
    background-image: url('../../../../public/image/index/minIcon.png') !important;
    background-position: -2px -372px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 2px 8px 2px 8px;
}

.syno-sysinfo-conn-button {
    background-position: 34px -372px;
}

.syno-sysinfo-disconn-button:hover{
    background-position: -2px -396px;
}

.syno-sysinfo-disconn-button:active{
    background-position: -2px -420px;
}

.syno-sysinfo-conn-button:hover{
    background-position: 34px -396px;
}

.syno-sysinfo-conn-button:active{
    background-position: 34px -420px;
}

/* 存储 */
.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .x-grid3-cell-inner {
    height: 82px !important;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box {
    margin: 0 8px 0px 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 64px;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .icon-block {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 64px;
    margin-right: 18px;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .icon-block .icon-volume-img {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 9px;
    background-image: url("../../../../public/image/index/wdgt_icn_volume.png");
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .icon-block .icon-volume-status {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 31px;
    left: 22px;
    background-image: url('../../../../public/image/index/minIcon.png');
    background-position: -26px -372px;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
    position: relative;
    width: 200px;
}
.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .volume-name-status, .syno-sysinfo-system-health-mini .system-health-widget-mini-hostname {
    font-weight: 700;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .volume-name-status {
    line-height: 24px;
    color: #414b55;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-bar-container {
    position: relative;
    height: 20px;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-bar-container .usage-bar-bg {
    position: absolute;
    top: 6px;
    width: 200px;
    height: 8px;
    background-color: rgba(34, 38, 54, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-bar-container .usage-bar-fill {
    height: 8px;
    background-color: #057FEB;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-text {
    line-height: 20px;
    color: #414b55;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-text .usage-used-text {
    color: #057FEB;
}

.sds-widget-gridpanel.sys-storage-grid .x-grid3-row .syno-sysinfo-storage-usage-volume-box .data-block .usage-ratio-text {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 20px;
    color: #414b55;
}

/* 侧边滑动栏 */
.v-widget-window .v-ps .ps__rail-y {
    opacity: 1;
}

.v-widget-window .v-ps .ps__rail-y .ps__thumb-y {
    right: 4px;
    background-color: rgba(255, 255, 255, 0.3);
}

.v-widget-window .v-ps {
    padding-right: 0;
}

.v-ps.ps__rail-x:hover>.ps__thumb-x,
.v-ps.ps__rail-x:focus>.ps__thumb-x,
.v-ps.ps__rail-x.ps--clicking.ps__thumb-x {
    background-color: rgba(0, 0, 0, .42)
}

.v-ps.ps__rail-y:hover>.ps__thumb-y,
.v-ps.ps__rail-y:focus>.ps__thumb-y,
.v-ps.ps__rail-y.ps--clicking.ps__thumb-y {
    background-color: rgba(0, 0, 0, .42)
}

@media screen and (max-height: 456px){
    #sds-desktop .v-widget-window{
        height: calc(100vh - 10px) !important;
    }
}


/* 套件中心弹出框 */
/* .tjDetail{
    display: none;
} */

.sds-window-v5 .x-tool-help {
    background-image: url("../../../image/index//wdheader_bt_help.png");
}

.sds-window-v5 .x-tool-restore {
    background-image: url("../../../image/index/windowRestore.png");
}

.sds-window-v5.x-window .x-toolbar-cell .x-btn {
    margin: 0px;
}

.synopkg-icon-btn .synopkg-btn-icon {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 2px 3px !important;
}
.synopkg-icon-btn {
    height: 28px !important;
    width: 30px !important;
    background: rgba(198,212,224,0.4);
    border-radius: 3px;
    border: none;
}

.synopkg-toolbar .synopkg-toolbar-back-btn {
    margin: 0 !important;
    border-right: 1px solid rgba(198,212,224,0.9);
    border-radius: 3px 0 0 3px;
}

.synopkg-toolbar .synopkg-toolbar-next-btn {
    border-radius: 0 3px 3px 0;
}

.synopkg-toolbar .synopkg-toolbar-back-btn.x-item-disabled {
    border-right: 1px solid rgba(198,212,224,0.5);
}

.sds-window-v5 .x-tool-minimize {
    background-image: url("../../../image/index/wdheader_bt_minimize.png");
}

.synopkg-toolbar .synopkg-toolbar-back-btn .synopkg-toolbar-back-icon {
    background-image: url('../../../image/index/sprite-s19f0e38f3d.png');
    background-position: 0 -248px;
}

.synopkg-toolbar .synopkg-toolbar-next-btn .synopkg-toolbar-next-icon {
    background-image: url('../../../image/index/sprite-s19f0e38f3d.png');
    background-position: 0 -296px;
}

.synopkg-toolbar .synopkg-toolbar-refresh-icon {
    background-image: url('../../../image/index/sprite-s19f0e38f3d.png');
    background-position: 10px 0;
}

.synopkg-toolbar .syno-ux-textfilter {
    width: 100%;
}