.syno-ux-grid-mask-info div a, .x-window .ext-el-mask-msg.syno-ux-mask-info div a, .x-window .ext-el-mask-msg.syno-ux-grid-mask-info div a, .x-panel .ext-el-mask-msg.syno-ux-mask-info div a, .x-panel .ext-el-mask-msg.syno-ux-grid-mask-info div a, .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title, .syno-ux-fieldset .x-fieldset-bottomlegend, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected .x-date-date span, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected.x-date-today .x-date-date span, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-today .x-date-date span, .syno-ux-datefield-menu .x-date-mp tr td.x-date-mp-sel a, .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn em button, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn em button, .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-text, .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active .x-tab-strip-text, .syno-ux-expandable-listview .item-summary .item-title, .syno-ux-treepanel .x-tree-root-ct .x-tree-node a span, .syno-ux-scheduletable .schedule-table td.schedule-hour-td { font-weight: 700; } .syno-ux-modulelist .x-tree-node-collapsed a span, .syno-ux-modulelist .x-tree-node-expanded a span, .syno-ux-treepanel .x-tree-node .x-tree-selected a span { font-weight: 600; } .syno-ux-displayfield.x-form-display-field a, .syno-ux-treepanel .x-tree-root-ct .x-tree-node-ct a span { font-weight: 400; } .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-over .x-tab-strip-text { color: #057feb; } .syno-ux-gridpanel div, .syno-ux-editorgridpanel div, .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item-text, .syno-ux-check-menu .x-menu-list-item .x-menu-item-text, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-text, .syno-ux-menu .x-menu-list-item .x-menu-item-text, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item-text, .syno-ux-button-menu .x-menu-list-item .x-menu-item-text, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item-text, .syno-ux-grid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-editorgrid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-groupcheck-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-check-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-searchfield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-schedule-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-button-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-datefield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active span, .syno-ux-textfield, .ext-strict .x-small-editor .syno-ux-textfield.x-form-text, .syno-ux-numberfield, .x-form-item .x-form-item-label.syno-ux-item-label, .syno-ux-triggerfield, .syno-ux-combobox, .syno-ux-colorfield, .syno-ux-schedulefield, .syno-ux-datefield, .syno-ux-timefield, .syno-ux-superboxselect, .syno-ux-checkbox-label, .syno-ux-displayfield.x-form-display-field, .syno-ux-combobox-list .x-combo-list-item, .syno-ux-button .x-btn-text, .syno-ux-button-grey.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-over.x-btn .x-btn-text, .syno-ux-button-grey:hover.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-focus.x-btn .x-btn-text, .syno-ux-button-grey.x-btn-click.x-btn .x-btn-text, .syno-ux-button-grey:active.x-btn .x-btn-text, .syno-ux-button-grey.x-item-disabled.x-btn .x-btn-text, .syno-ux-button.syno-ux-statebuttongroup-right.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn button, .syno-ux-modulelist .x-tree-node-leaf a span, .syno-ux-modulelist .x-tree-node-ct .x-tree-node-leaf.x-tree-selected a span, .syno-ux-datefield-menu table.x-date-inner tbody tr td span, .syno-ux-datefield-menu .x-date-bottom .x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-bottom .x-btn-over.x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-bottom .x-btn-click.x-btn-noicon .x-btn-small button, .syno-ux-datefield-menu .x-date-mp tr td a, .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel, .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel:hover, .syno-ux-textarea, .syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text, .syno-ux-tab-panel .x-tab-strip-top li .x-tab-strip-text, .syno-ux-expandable-listview .item-summary .item-title, .syno-ux-treepanel .x-tree-node a span, .syno-ux-treepanel .x-tree-node .x-tree-node-over, .syno-ux-superboxselect-item, .grid-dd-drag-proxy .x-dd-drag-ghost { color: #414b55; } .syno-ux-grid-hd-menu .x-menu-list-item.x-item-disabled span, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-item-disabled span, .syno-ux-groupcheck-menu .x-menu-list-item.x-item-disabled span, .syno-ux-check-menu .x-menu-list-item.x-item-disabled span, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled span, .syno-ux-menu .x-menu-list-item.x-item-disabled span, .syno-ux-schedule-menu .x-menu-list-item.x-item-disabled span, .syno-ux-button-menu .x-menu-list-item.x-item-disabled span, .syno-ux-datefield-menu .x-menu-list-item.x-item-disabled span, .syno-ux-cb-disabled.syno-ux-checkbox-label, .syno-ux-modulelist .x-tree-node-leaf.x-tree-node-disabled a span, .syno-ux-tab-panel .x-tab-strip-top li.x-item-disabled .x-tab-strip-text, .syno-ux-treepanel .x-tree-node .x-tree-node-disabled a span { color: rgba(65, 75, 85, 0.4) !important; } .syno-ux-displayfield.x-form-display-field .syno-ux-note { color: #00a6a6; } .syno-ux-displayfield.x-form-display-field.x-item-disabled .syno-ux-note { color: rgba(0, 166, 166, 0.4); } .syno-ux-displayfield.x-form-display-field.x-item-disabled a { color: rgba(5, 127, 235, 0.4); } .x-statusbar .syno-ux-statusbar-success { color: #009e05; } .x-statusbar .syno-ux-statusbar-error { color: #e64040; } .syno-ux-formpanel .x-panel-footer, .syno-ux-tab-panel .x-tab-panel-footer { background-color: transparent; border: 0px; padding-left: 12px; padding-right: 24px; border-bottom-width: 0; padding: 9px 16px 10px 12px; border-top: 1px solid rgba(198, 212, 224, 0.5); } .syno-ux-formpanel .x-panel-footer .x-toolbar-ct, .syno-ux-tab-panel .x-tab-panel-footer .x-toolbar-ct { border: 0px; } .syno-ux-formpanel .x-panel-footer td.x-toolbar-cell, .syno-ux-tab-panel .x-tab-panel-footer td.x-toolbar-cell { padding: 0 8px 0 0; } .syno-ux-formpanel .x-panel-footer td.x-toolbar-cell .syno-ux-button, .syno-ux-tab-panel .x-tab-panel-footer td.x-toolbar-cell .syno-ux-button { margin: 0 0 0 8px; margin-right: 0 !important; padding-left: 13px; padding-right: 13px; border-radius: 100px; min-width: 52px; } .syno-ux-formpanel .x-panel-footer td.x-toolbar-cell .syno-ux-button.syno-ux-button-blue, .syno-ux-tab-panel .x-tab-panel-footer td.x-toolbar-cell .syno-ux-button.syno-ux-button-blue { min-width: 92px; } .syno-ux-formpanel .x-panel-footer td.x-toolbar-cell .syno-ux-button.syno-ux-button-red, .syno-ux-tab-panel .x-tab-panel-footer td.x-toolbar-cell .syno-ux-button.syno-ux-button-red { min-width: 92px; } @font-face { font-family: "Roboto"; src: url(./fonts/Roboto/Roboto-Light.woff) format("woff"); font-weight: 300; } @font-face { font-family: "Roboto"; src: url(./fonts/Roboto/Roboto.woff) format("woff"); font-weight: 400; } @font-face { font-family: "Roboto"; src: url(./fonts/Roboto/Roboto-Medium.woff) format("woff"); font-weight: 500; } @font-face { font-family: "Roboto"; src: url(./fonts/Roboto/Roboto-Bold.woff) format("woff"); font-weight: 700; } .syno-ux-grid-mask-info, .x-window .ext-el-mask-msg.syno-ux-mask-info, .x-window .ext-el-mask-msg.syno-ux-grid-mask-info, .x-panel .ext-el-mask-msg.syno-ux-mask-info, .x-panel .ext-el-mask-msg.syno-ux-grid-mask-info { margin: 24px; padding: 17px 19px; max-width: 400px; min-height: 20px; border: 1px solid rgba(198, 212, 224, 0.7); border-radius: 3px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); background-position: 20px 10px; background-repeat: no-repeat; cursor: default; } .syno-ux-grid-mask-info div, .x-window .ext-el-mask-msg.syno-ux-mask-info div, .x-window .ext-el-mask-msg.syno-ux-grid-mask-info div, .x-panel .ext-el-mask-msg.syno-ux-mask-info div, .x-panel .ext-el-mask-msg.syno-ux-grid-mask-info div { padding: 0px; min-height: 20px; display: table-cell; vertical-align: middle; word-wrap: break-word; cursor: default; font-size: 13px; color: #414b55; line-height: 20px; } .syno-ux-grid-mask-info div a, .x-window .ext-el-mask-msg.syno-ux-mask-info div a, .x-window .ext-el-mask-msg.syno-ux-grid-mask-info div a, .x-panel .ext-el-mask-msg.syno-ux-mask-info div a, .x-panel .ext-el-mask-msg.syno-ux-grid-mask-info div a { color: #057feb; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell { height: 28px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell .x-grid3-cell-inner { line-height: 28px; padding: 0 8px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner > div, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell .x-grid3-cell-inner > div, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell .x-grid3-cell-inner > div { text-overflow: ellipsis; overflow: hidden; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell-last-visible.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell-last-visible.x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell-last-visible.x-grid3-cell .x-grid3-cell-inner { padding-right: 25px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell-last-visible.syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell-last-visible.syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell-last-visible.syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell-last-visible.syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell-last-visible.syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .x-grid3-cell-last-visible.syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner { margin-right: 26px; } .syno-ux-gridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell, .grid-dd-drag-proxy .x-grid3-row .syno-ux-triggerfield.x-grid3-cell, .syno-ux-gridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell, .grid-dd-drag-proxy .x-grid3-row .syno-ux-textfield.x-grid3-cell { box-shadow: none; background-color: transparent; } .syno-ux-gridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-gridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-row .syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner { background-color: #fff; background-clip: padding-box; border-radius: 4px; margin: 1px; line-height: 26px; } .syno-ux-gridpanel div, .syno-ux-editorgridpanel div { font-size: 13px; } .syno-ux-gridpanel .x-panel-body .x-small-editor, .syno-ux-editorgridpanel .x-panel-body .x-small-editor { background-color: #fff; border-radius: 4px; } .syno-ux-gridpanel .x-panel-ml, .syno-ux-editorgridpanel .x-panel-ml, .syno-ux-gridpanel .x-panel-mr, .syno-ux-editorgridpanel .x-panel-mr { background-image: none; padding: 0px; } .syno-ux-gridpanel .x-panel-mc, .syno-ux-editorgridpanel .x-panel-mc { padding: 0px; } .syno-ux-gridpanel .x-panel-tl, .syno-ux-editorgridpanel .x-panel-tl { border: 0px; } .syno-ux-gridpanel .x-panel-header, .syno-ux-editorgridpanel .x-panel-header { border-bottom: 0px dashed transparent !important; margin-bottom: 0px !important; } .syno-ux-gridpanel .x-panel-tbar .x-toolbar-layout-ct, .syno-ux-editorgridpanel .x-panel-tbar .x-toolbar-layout-ct, .syno-ux-gridpanel .x-panel-tbar-noheader .x-toolbar-layout-ct, .syno-ux-editorgridpanel .x-panel-tbar-noheader .x-toolbar-layout-ct, .syno-ux-gridpanel .x-panel-tbar-noborder .x-toolbar-layout-ct, .syno-ux-editorgridpanel .x-panel-tbar-noborder .x-toolbar-layout-ct { padding: 0px 0px 8px 0px; padding-bottom: 8px; background-image: none; background-color: transparent; border: 0px; } .x-grid-panel.syno-ux-gridpanel .x-panel-bwrap, .x-grid-panel.syno-ux-editorgridpanel .x-panel-bwrap { padding-bottom: 12px; } .x-grid-panel.syno-ux-gridpanel .x-panel-bwrap .x-panel-body, .x-grid-panel.syno-ux-editorgridpanel .x-panel-bwrap .x-panel-body { border: 0px; } .x-grid-panel.syno-ux-gridpanel .x-panel-bwrap .x-panel-body .x-grid3-scroller, .x-grid-panel.syno-ux-editorgridpanel .x-panel-bwrap .x-panel-body .x-grid3-scroller { padding-right: 0px; } .x-grid-panel.syno-ux-gridpanel .x-panel-bwrap .x-panel-body .x-grid3, .x-grid-panel.syno-ux-editorgridpanel .x-panel-bwrap .x-panel-body .x-grid3 { background-color: transparent; border-top: solid 1px rgba(198, 212, 224, 0.7); } .syno-ux-gridpanel .x-grid3-header, .syno-ux-editorgridpanel .x-grid3-header { background-image: none; background-color: transparent; border-bottom: solid 1px rgba(198, 212, 224, 0.4); padding-top: 0px; } .syno-ux-gridpanel .x-grid3-header .x-grid3-header-offset, .syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-offset { padding-left: 0px; } .syno-ux-gridpanel .x-grid3-header .syno-ux-checkbox-icon, .syno-ux-editorgridpanel .x-grid3-header .syno-ux-checkbox-icon { margin-top: 0; margin-right: 4px; position: relative; } .syno-ux-gridpanel .x-grid3-header .syno-ux-checkbox-icon.no-margin, .syno-ux-editorgridpanel .x-grid3-header .syno-ux-checkbox-icon.no-margin { margin-right: 0; } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header { position: relative; } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap { position: absolute; right: 0; top: 0; bottom: 0; width: 16px; border-left: solid 1px rgba(198, 212, 224, 0.4); background-color: inherit; background-color: #fff; } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn { cursor: pointer; display: block; width: 12px; height: 24px; position: absolute; top: 50%; left: 2px; margin-top: -12px; background-position: 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn, .synohdpack .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn { background-size: 12px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn, .synohdpackdebug .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn { background-size: 12px 72px; outline: 1px green dashed; } } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn:hover, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn:hover { background-position: 0 -24px; } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn:active, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-header-bwrap .syno-ux-grid-hd-btn:active { background-position: 0 -48px; } .hide-org-hd-menu.syno-ux-gridpanel .x-grid3-header .x-grid3-hd-over .x-grid3-hd-btn, .hide-org-hd-menu.syno-ux-editorgridpanel .x-grid3-header .x-grid3-hd-over .x-grid3-hd-btn { display: none; } .syno-ux-gridpanel .scroll-menu-ct, .syno-ux-editorgridpanel .scroll-menu-ct { position: absolute; top: 0; right: 0; width: 58px; height: 26px; background-color: #fff; border-left: solid 1px rgba(198, 212, 224, 0.4); } .syno-ux-gridpanel .scroll-menu-ct .scroll-control-left, .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-left, .syno-ux-gridpanel .scroll-menu-ct .scroll-control-right, .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-right { cursor: pointer; font-size: 0px; margin-top: 5px; width: 16px; height: 16px; display: inline-block; vertical-align: top; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .scroll-menu-ct .scroll-control-left, .synohdpack .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-left, .synohdpack .syno-ux-gridpanel .scroll-menu-ct .scroll-control-right, .synohdpack .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-right { background-size: 16px 32px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .scroll-menu-ct .scroll-control-left, .synohdpackdebug .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-left, .synohdpackdebug .syno-ux-gridpanel .scroll-menu-ct .scroll-control-right, .synohdpackdebug .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-right { background-size: 16px 32px; outline: 1px green dashed; } } .syno-ux-gridpanel .scroll-menu-ct .scroll-control-left, .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-left { margin-left: 10px; background-position: 0 0; } .syno-ux-gridpanel .scroll-menu-ct .scroll-control-right, .syno-ux-editorgridpanel .scroll-menu-ct .scroll-control-right { margin-right: 10px; margin-left: 6px; background-position: 0 -16px; } .syno-ux-gridpanel .x-grid3-hd, .syno-ux-editorgridpanel .x-grid3-hd { height: 26px; border-left: 0px; border-right: solid 1px rgba(198, 212, 224, 0.4); cursor: pointer; } .syno-ux-gridpanel .x-grid3-hd .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd .x-grid3-hd-inner { height: 28px; line-height: 28px; color: rgba(65, 75, 85, 0.6); background-color: transparent; padding: 0 8px; } .syno-ux-gridpanel .x-grid3-hd .x-grid3-hd-inner:hover, .syno-ux-editorgridpanel .x-grid3-hd .x-grid3-hd-inner:hover { color: #057feb; } .syno-ux-gridpanel .x-grid3-hd .x-grid3-hd-inner:hover .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd .x-grid3-hd-inner:hover .x-grid3-sort-icon { display: inline; background-position: 0 -60px; } .syno-ux-gridpanel .x-grid3-hd .x-grid3-hd-inner:active, .syno-ux-editorgridpanel .x-grid3-hd .x-grid3-hd-inner:active { color: #006dcc; } .syno-ux-gridpanel .x-grid3-hd .x-grid3-hd-inner:active .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd .x-grid3-hd-inner:active .x-grid3-sort-icon { display: inline; background-position: 0 -100px; } .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner:hover .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner:hover .x-grid3-sort-icon { background-position: 0 -40px; } .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner:active .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner:active .x-grid3-sort-icon { background-position: 0 -80px; } .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-sort-icon { display: inline; } .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner:hover .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner:hover .x-grid3-sort-icon { background-position: 0 -60px; } .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner:active .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner:active .x-grid3-sort-icon { background-position: 0 -100px; } .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-sort-icon { display: inline; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-disable-sort, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-disable-sort { cursor: default; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner:hover, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner:hover { color: rgba(65, 75, 85, 0.6); } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner:active, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner:active { color: rgba(65, 75, 85, 0.6); } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-disable-sort .x-grid3-hd-inner .x-grid3-sort-icon { display: none; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-last-visible, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-last-visible { border-right-width: 0px; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-cell-last-visible .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-cell-last-visible .x-grid3-hd-inner { padding-right: 25px; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner, .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner { background-image: none; background-color: transparent; } .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn, .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn { background-color: transparent; background-repeat: no-repeat; background-position: -26px 0px; width: 26px; height: 26px !important; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpack .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpack .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpack .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn { background-size: 104px 28px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-over .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpackdebug .syno-ux-gridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-hd.x-grid3-hd-menu-open .x-grid3-hd-inner .x-grid3-hd-btn { background-size: 104px 28px; outline: 1px green dashed; } } .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner, .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner { background-image: none; background-color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpack .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpack .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpack .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon { background-size: 8px 120px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpackdebug .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon { background-size: 8px 120px; outline: 1px green dashed; } } .syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon { background-position: 0px 0px; } .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon { background-position: 0px -20px; } .syno-ux-gridpanel .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-sort-icon { background-color: transparent; background-repeat: no-repeat; margin-left: 4px; margin-top: 4px; width: 8px; height: 20px; vertical-align: top; display: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .x-grid3-sort-icon, .synohdpack .syno-ux-editorgridpanel .x-grid3-sort-icon { background-size: 8px 120px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .x-grid3-sort-icon, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-sort-icon { background-size: 8px 120px; outline: 1px green dashed; } } .syno-ux-gridpanel .x-grid3-grouped-header, .syno-ux-editorgridpanel .x-grid3-grouped-header { height: 20px; padding-top: 2px; } .syno-ux-gridpanel .x-grid3-grouped-header .syno-ux-checkbox-icon, .syno-ux-editorgridpanel .x-grid3-grouped-header .syno-ux-checkbox-icon { margin-top: 0; margin-right: 4px; } .syno-ux-gridpanel .x-grid3-grouped-header .syno-ux-checkbox-icon.no-margin, .syno-ux-editorgridpanel .x-grid3-grouped-header .syno-ux-checkbox-icon.no-margin { margin-right: 0; } .syno-ux-gridpanel .x-grid3-grouped-header .x-grid3-hd-inner, .syno-ux-editorgridpanel .x-grid3-grouped-header .x-grid3-hd-inner { height: 20px; line-height: 20px; } .syno-ux-gridpanel .x-grid3-grouped-header .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-grouped-header .x-grid3-hd-inner .x-grid3-sort-icon { margin-top: 0; vertical-align: middle; } .syno-ux-gridpanel .x-grid3-grouped-header.x-grid3-cell-colspan, .syno-ux-editorgridpanel .x-grid3-grouped-header.x-grid3-cell-colspan { text-align: center; } .syno-ux-gridpanel .x-grid3-grouped-header.hidden, .syno-ux-editorgridpanel .x-grid3-grouped-header.hidden { display: none; } .syno-ux-gridpanel .x-grid3-hd-first-row td, .syno-ux-editorgridpanel .x-grid3-hd-first-row td { padding-top: 2px; } .syno-ux-gridpanel .x-grid3-hd-last-row td, .syno-ux-editorgridpanel .x-grid3-hd-last-row td { padding-bottom: 2px; border-right-color: transparent; position: relative; } .syno-ux-gridpanel .x-grid3-hd-last-row td:after, .syno-ux-editorgridpanel .x-grid3-hd-last-row td:after, .syno-ux-gridpanel .x-grid3-hd-last-row td::after, .syno-ux-editorgridpanel .x-grid3-hd-last-row td::after { content: ""; position: absolute; top: 4px; right: 0; height: 16px; border-right: 1px solid rgba(198, 212, 224, 0.4); } .syno-ux-gridpanel .x-grid3-hd-last-row td.x-gri3-child-last, .syno-ux-editorgridpanel .x-grid3-hd-last-row td.x-gri3-child-last { border-right-color: rgba(198, 212, 224, 0.4); } .syno-ux-gridpanel .x-grid3-hd-last-row td.x-gri3-child-last:after, .syno-ux-editorgridpanel .x-grid3-hd-last-row td.x-gri3-child-last:after, .syno-ux-gridpanel .x-grid3-hd-last-row td.x-gri3-child-last::after, .syno-ux-editorgridpanel .x-grid3-hd-last-row td.x-gri3-child-last::after { display: none; } .syno-ux-gridpanel .x-grid3-row, .syno-ux-editorgridpanel .x-grid3-row { background-color: transparent; border-bottom: 1px solid rgba(198, 212, 224, 0.4); border-width: 0 0 1px 0; padding-top: 0px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell { padding-left: 0px; padding-right: 0px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield { padding: 0px 1px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after { width: 26px; height: 26px; right: 10px; top: 0; position: absolute; content: ""; background-position: 0 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .synohdpack .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .synohdpack .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after, .synohdpack .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:after, .synohdpackdebug .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after, .synohdpackdebug .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::after { background-size: 24px 72px; outline: 1px green dashed; } } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield { position: relative; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:hover::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield:hover::before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield:hover::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield:hover::before { border: 1px solid rgba(124, 138, 152, 0.5); } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield::before { border-radius: 4px; content: ""; position: absolute; border: 1px solid rgba(198, 212, 224, 0.7); } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-triggerfield::before { top: 1px; left: 9px; right: 9px; bottom: 1px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.syno-ux-textfield::before { top: 1px; left: 8px; right: 8px; bottom: 1px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-textfield:before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-textfield:before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-textfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-textfield::before { right: 26px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:before, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::before, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::before { right: 27px; } .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:after, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield:after, .syno-ux-gridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::after, .syno-ux-editorgridpanel .x-grid3-row .x-grid3-cell.x-grid3-cell-last-visible.syno-ux-triggerfield::after { right: 28px; } .syno-ux-gridpanel .x-grid3-row.x-grid3-row-over, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-over { background-color: rgba(5, 127, 235, 0.04); border-width: 0 0 1px 0; } .syno-ux-gridpanel .x-grid3-row.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-gridpanel .x-grid3-row.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::after, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::after { background-position: 0px 2px; } .syno-ux-gridpanel .x-grid3-row.x-grid3-row-selected, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-selected { background-color: rgba(5, 127, 235, 0.1) !important; border-width: 0 0 1px 0; } .syno-ux-gridpanel .x-grid3-row.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:after, .syno-ux-gridpanel .x-grid3-row.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::after, .syno-ux-editorgridpanel .x-grid3-row.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::after { background-position: 0px 2px; } .syno-ux-gridpanel .x-grid-group .x-grid-group-body .x-grid3-cell-first-visible .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-body .x-grid3-cell-first-visible .x-grid3-cell-inner { padding-left: 32px; } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd { background-image: none; height: 28px; border-bottom: 1px solid rgba(198, 212, 224, 0.4); padding-top: 0px; } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title { position: relative; padding: 0 0 0 32px; font-size: 12px; color: rgba(65, 75, 85, 0.5); height: 28px; line-height: 28px; } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before { content: ""; position: absolute; left: 4px; top: 2px; width: 24px; height: 24px; background-position: -24px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before, .synohdpack .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before, .synohdpackdebug .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:before { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:hover, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:hover { color: rgba(65, 75, 85, 0.6); } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:hover:before, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:hover:before { background-position-y: -24px; } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:active, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:active { color: rgba(65, 75, 85, 0.7); } .syno-ux-gridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:active:before, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-hd div.x-grid-group-title:active:before { background-position-y: -48px; } .syno-ux-gridpanel .x-grid-group .syno-ux-grid-group-hd-over div.x-grid-group-title, .syno-ux-editorgridpanel .x-grid-group .syno-ux-grid-group-hd-over div.x-grid-group-title { color: #006dcc; } .syno-ux-gridpanel .x-grid-group .syno-ux-grid-group-hd-over div.x-grid-group-title:before, .syno-ux-editorgridpanel .x-grid-group .syno-ux-grid-group-hd-over div.x-grid-group-title:before { background-position-y: -24px; } .syno-ux-gridpanel .x-grid-group .syno-ux-grid-group-hd-click div.x-grid-group-title, .syno-ux-editorgridpanel .x-grid-group .syno-ux-grid-group-hd-click div.x-grid-group-title { color: #005cad; } .syno-ux-gridpanel .x-grid-group .syno-ux-grid-group-hd-click div.x-grid-group-title:before, .syno-ux-editorgridpanel .x-grid-group .syno-ux-grid-group-hd-click div.x-grid-group-title:before { background-position-y: -48px; } .syno-ux-gridpanel .x-grid-group.x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title:before, .syno-ux-editorgridpanel .x-grid-group.x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title:before { background-position-x: 0; } .syno-ux-gridpanel .x-grid-group .x-grid-group-body.x-grid3-row-over, .syno-ux-editorgridpanel .x-grid-group .x-grid-group-body.x-grid3-row-over { border: none; } .syno-ux-gridpanel .syno-ux-gridpanel-empty-hint, .syno-ux-editorgridpanel .syno-ux-gridpanel-empty-hint { color: transparent; position: absolute; width: 1px; height: 1px; overflow: hidden; } .ext-ie8 .syno-ux-gridpanel .syno-ux-gridpanel-empty-hint, .ext-ie8 .syno-ux-editorgridpanel .syno-ux-gridpanel-empty-hint { display: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .col-move-top { background-size: 9px 9px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .col-move-top { background-size: 9px 9px; outline: 1px green dashed; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .col-move-bottom { background-size: 9px 9px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .col-move-bottom { background-size: 9px 9px; outline: 1px green dashed; } } .ext-strict .x-grid3-viewport .x-small-editor .x-form-field-wrap { margin-top: 0px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); } .ext-strict .x-grid3-viewport .x-small-editor .x-form-field-wrap .x-form-text.syno-ux-combobox { height: 18px; line-height: 18px; } .ext-strict .x-grid3-viewport .x-small-editor .x-form-field-wrap .x-form-trigger.syno-ux-combobox-trigger { height: 24px; background-position: 0 0; } .ext-strict .x-grid3-viewport .x-small-editor .x-form-field-wrap .x-form-trigger.syno-ux-combobox-trigger.x-form-trigger-over, .ext-strict .x-grid3-viewport .x-small-editor .x-form-field-wrap .x-form-trigger.syno-ux-combobox-trigger.x-form-trigger-click { background-position: 0px -24px; } .syno-ux-grid-hd-menu, .syno-ux-editorgrid-hd-menu, .syno-ux-groupcheck-menu, .syno-ux-check-menu, .syno-ux-searchfield-menu, .syno-ux-menu, .syno-ux-schedule-menu, .syno-ux-button-menu, .syno-ux-datefield-menu { background-image: none; } .x-layer.syno-ux-grid-hd-menu, .x-layer.syno-ux-editorgrid-hd-menu, .x-layer.syno-ux-groupcheck-menu, .x-layer.syno-ux-check-menu, .x-layer.syno-ux-searchfield-menu, .x-layer.syno-ux-menu, .x-layer.syno-ux-schedule-menu, .x-layer.syno-ux-button-menu, .x-layer.syno-ux-datefield-menu { background: #ffffff; border: 1px solid rgba(198, 212, 224, 0.7); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); border-radius: 4px; padding: 8px; } .syno-ux-grid-hd-menu ul, .syno-ux-editorgrid-hd-menu ul, .syno-ux-groupcheck-menu ul, .syno-ux-check-menu ul, .syno-ux-searchfield-menu ul, .syno-ux-menu ul, .syno-ux-schedule-menu ul, .syno-ux-button-menu ul, .syno-ux-datefield-menu ul { padding: 0px; } .syno-ux-grid-hd-menu .x-menu-sep, .syno-ux-editorgrid-hd-menu .x-menu-sep, .syno-ux-groupcheck-menu .x-menu-sep, .syno-ux-check-menu .x-menu-sep, .syno-ux-searchfield-menu .x-menu-sep, .syno-ux-menu .x-menu-sep, .syno-ux-schedule-menu .x-menu-sep, .syno-ux-button-menu .x-menu-sep, .syno-ux-datefield-menu .x-menu-sep { height: 1px; background-color: rgba(198, 212, 224, 0.4); margin: 4px 0px; border-width: 0px; } .syno-ux-grid-hd-menu .x-menu-scroller, .syno-ux-editorgrid-hd-menu .x-menu-scroller, .syno-ux-groupcheck-menu .x-menu-scroller, .syno-ux-check-menu .x-menu-scroller, .syno-ux-searchfield-menu .x-menu-scroller, .syno-ux-menu .x-menu-scroller, .syno-ux-schedule-menu .x-menu-scroller, .syno-ux-button-menu .x-menu-scroller, .syno-ux-datefield-menu .x-menu-scroller { height: 12px; line-height: 12px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-grid-hd-menu .x-menu-scroller, .synohdpack .syno-ux-editorgrid-hd-menu .x-menu-scroller, .synohdpack .syno-ux-groupcheck-menu .x-menu-scroller, .synohdpack .syno-ux-check-menu .x-menu-scroller, .synohdpack .syno-ux-searchfield-menu .x-menu-scroller, .synohdpack .syno-ux-menu .x-menu-scroller, .synohdpack .syno-ux-schedule-menu .x-menu-scroller, .synohdpack .syno-ux-button-menu .x-menu-scroller, .synohdpack .syno-ux-datefield-menu .x-menu-scroller { background-size: 12px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-grid-hd-menu .x-menu-scroller, .synohdpackdebug .syno-ux-editorgrid-hd-menu .x-menu-scroller, .synohdpackdebug .syno-ux-groupcheck-menu .x-menu-scroller, .synohdpackdebug .syno-ux-check-menu .x-menu-scroller, .synohdpackdebug .syno-ux-searchfield-menu .x-menu-scroller, .synohdpackdebug .syno-ux-menu .x-menu-scroller, .synohdpackdebug .syno-ux-schedule-menu .x-menu-scroller, .synohdpackdebug .syno-ux-button-menu .x-menu-scroller, .synohdpackdebug .syno-ux-datefield-menu .x-menu-scroller { background-size: 12px 24px; outline: 1px green dashed; } } .syno-ux-grid-hd-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-editorgrid-hd-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-groupcheck-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-check-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-searchfield-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-schedule-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-button-menu .x-menu-scroller.x-menu-scroller-active, .syno-ux-datefield-menu .x-menu-scroller.x-menu-scroller-active { border-width: 0; } .syno-ux-grid-hd-menu .x-menu-scroller:hover, .syno-ux-editorgrid-hd-menu .x-menu-scroller:hover, .syno-ux-groupcheck-menu .x-menu-scroller:hover, .syno-ux-check-menu .x-menu-scroller:hover, .syno-ux-searchfield-menu .x-menu-scroller:hover, .syno-ux-menu .x-menu-scroller:hover, .syno-ux-schedule-menu .x-menu-scroller:hover, .syno-ux-button-menu .x-menu-scroller:hover, .syno-ux-datefield-menu .x-menu-scroller:hover { background-color: rgba(198, 212, 224, 0.4); } .syno-ux-grid-hd-menu .x-menu-scroller:active, .syno-ux-editorgrid-hd-menu .x-menu-scroller:active, .syno-ux-groupcheck-menu .x-menu-scroller:active, .syno-ux-check-menu .x-menu-scroller:active, .syno-ux-searchfield-menu .x-menu-scroller:active, .syno-ux-menu .x-menu-scroller:active, .syno-ux-schedule-menu .x-menu-scroller:active, .syno-ux-button-menu .x-menu-scroller:active, .syno-ux-datefield-menu .x-menu-scroller:active { background-color: rgba(198, 212, 224, 0.6); } .syno-ux-grid-hd-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-editorgrid-hd-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-groupcheck-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-check-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-searchfield-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-schedule-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-button-menu .x-menu-scroller.x-menu-scroller-top, .syno-ux-datefield-menu .x-menu-scroller.x-menu-scroller-top { border-radius: 4px 4px 0 0; background-position: center 0; margin-bottom: 4px; } .syno-ux-grid-hd-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-editorgrid-hd-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-groupcheck-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-check-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-searchfield-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-schedule-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-button-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active, .syno-ux-datefield-menu .x-menu-scroller.x-menu-scroller-top.x-menu-scroller-active { background-position: center 0; } .syno-ux-grid-hd-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-editorgrid-hd-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-groupcheck-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-check-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-searchfield-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-schedule-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-button-menu .x-menu-scroller.x-menu-scroller-bottom, .syno-ux-datefield-menu .x-menu-scroller.x-menu-scroller-bottom { border-radius: 0 0 4px 4px; background-position: center -12px; margin-top: 4px; } .syno-ux-grid-hd-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-editorgrid-hd-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-groupcheck-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-check-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-searchfield-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-schedule-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-button-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active, .syno-ux-datefield-menu .x-menu-scroller.x-menu-scroller-bottom.x-menu-scroller-active { background-position: center -12px; } .syno-ux-grid-hd-menu .x-menu-list-item, .syno-ux-editorgrid-hd-menu .x-menu-list-item, .syno-ux-groupcheck-menu .x-menu-list-item, .syno-ux-check-menu .x-menu-list-item, .syno-ux-searchfield-menu .x-menu-list-item, .syno-ux-menu .x-menu-list-item, .syno-ux-schedule-menu .x-menu-list-item, .syno-ux-button-menu .x-menu-list-item, .syno-ux-datefield-menu .x-menu-list-item { position: relative; background-image: none; background-color: #fff; border: none; border-radius: 3px; padding: 0px; margin: 0px; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-check-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-button-menu .x-menu-list-item .x-menu-item-icon.no-icon, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item-icon.no-icon { width: 0px; margin: 0 8px; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item-icon { position: relative; display: inline-block; margin: 2px 8px; left: 0; top: 0; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item-text, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item-text, .syno-ux-check-menu .x-menu-list-item .x-menu-item-text, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-text, .syno-ux-menu .x-menu-list-item .x-menu-item-text, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item-text, .syno-ux-button-menu .x-menu-list-item .x-menu-item-text, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item-text { display: inline-block; padding-left: 0px; top: 0px; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item, .syno-ux-check-menu .x-menu-list-item .x-menu-item, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item, .syno-ux-menu .x-menu-list-item .x-menu-item, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item, .syno-ux-button-menu .x-menu-list-item .x-menu-item, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item { line-height: 28px; height: 28px; padding: 0px 20px 0 0; border: 0px; font-size: 13px; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-check-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-schedule-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-button-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .syno-ux-datefield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow { background-position: right 6px top 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-check-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-schedule-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-button-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpack .syno-ux-datefield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow { background-size: 12px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-check-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-schedule-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-button-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow, .synohdpackdebug .syno-ux-datefield-menu .x-menu-list-item .x-menu-item.x-menu-item-arrow { background-size: 12px 72px; outline: 1px green dashed; } } .syno-ux-grid-hd-menu .x-menu-list-item.x-menu-item-active, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-menu-item-active, .syno-ux-groupcheck-menu .x-menu-list-item.x-menu-item-active, .syno-ux-check-menu .x-menu-list-item.x-menu-item-active, .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-active, .syno-ux-menu .x-menu-list-item.x-menu-item-active, .syno-ux-schedule-menu .x-menu-list-item.x-menu-item-active, .syno-ux-button-menu .x-menu-list-item.x-menu-item-active, .syno-ux-datefield-menu .x-menu-list-item.x-menu-item-active { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-grid-hd-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-groupcheck-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-check-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-schedule-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-button-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow, .syno-ux-datefield-menu .x-menu-list-item.x-menu-item-active .x-menu-item.x-menu-item-arrow { background-position: right 6px top 2px; } .syno-ux-grid-hd-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon { background-position: 0px -40px; } .syno-ux-grid-hd-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon { background-position: 0px -100px; } .syno-ux-grid-hd-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-groupcheck-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-check-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-schedule-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-button-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow, .syno-ux-datefield-menu .x-menu-list-item.x-item-disabled .x-menu-item.x-menu-item-arrow { background-position: right 6px top -46px; } .syno-ux-grid-hd-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item.x-memu-item-has-no-icon .x-menu-item-icon { display: none; } .syno-ux-grid-hd-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon { background-position: 0px 0px; top: 4px; width: 20px; height: 20px; } .syno-ux-grid-hd-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-editorgrid-hd-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-groupcheck-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-check-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-schedule-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-button-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon, .syno-ux-datefield-menu .x-menu-list-item.x-menu-item-checked .x-menu-item-icon { background-position: 0px -60px; top: 4px; width: 20px; height: 20px; } .syno-ux-grid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-editorgrid-hd-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-groupcheck-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-check-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-searchfield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-schedule-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-button-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active, .syno-ux-datefield-menu .x-menu-list-item.syno-menu-check-item.x-menu-item-active { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-groupcheck-menu .x-menu-list-item .x-menu-check-item img.x-menu-item-icon { background-position: 0px 0px; } .syno-ux-groupcheck-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon { background-position: 0px -60px; background-repeat: no-repeat; width: 20px; height: 20px; left: 0px; top: 4px; } .syno-ux-check-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled .x-menu-check-item .x-menu-item-icon { background-position: 0px -24px; } .syno-ux-check-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-item-disabled.x-menu-item-checked .x-menu-check-item .x-menu-item-icon { background-position: 0px 0px; } .syno-ux-check-menu .x-menu-list-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-item-icon { margin-right: 6px !important; margin-left: 6px !important; } .syno-ux-check-menu .x-menu-list-item.x-menu-item-active, .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-active { background-color: rgba(5, 127, 235, 0.1) !important; border-radius: 3px; } .syno-ux-check-menu .x-menu-list-item .x-menu-check-item img.x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-check-item img.x-menu-item-icon { background-image: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-check-menu .x-menu-list-item .x-menu-check-item img.x-menu-item-icon, .synohdpack .syno-ux-searchfield-menu .x-menu-list-item .x-menu-check-item img.x-menu-item-icon { background-image: none; } } .syno-ux-check-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item .x-menu-check-item .x-menu-item-icon { top: 2px; width: 24px; height: 24px; } .syno-ux-check-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon, .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon { background-position: 0px 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-check-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon, .synohdpack .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon { background-size: 24px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-check-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon, .synohdpackdebug .syno-ux-searchfield-menu .x-menu-list-item.x-menu-item-checked img.x-menu-item-icon { background-size: 24px 48px; outline: 1px green dashed; } } .syno-ux-textfield, .ext-strict .x-small-editor .syno-ux-textfield.x-form-text, .syno-ux-numberfield { font-size: 13px; background-color: #fff; background-image: none; padding-left: 11px; padding-right: 11px; } .x-form-align-left.syno-ux-textfield, .ext-strict .x-small-editor .x-form-align-left.syno-ux-textfield.x-form-text, .x-form-align-left.syno-ux-numberfield { text-align: left; } .x-form-align-center.syno-ux-textfield, .ext-strict .x-small-editor .x-form-align-center.syno-ux-textfield.x-form-text, .x-form-align-center.syno-ux-numberfield { text-align: center; } .x-form-align-right.syno-ux-textfield, .ext-strict .x-small-editor .x-form-align-right.syno-ux-textfield.x-form-text, .x-form-align-right.syno-ux-numberfield { text-align: right; } .x-form-text.syno-ux-textfield, .ext-strict .x-small-editor .x-form-text.syno-ux-textfield, .x-form-text.syno-ux-numberfield { border-color: rgba(198, 212, 224, 0.7); height: 20px; padding-top: 3px; padding-bottom: 3px; border-radius: 4px; } .syno-ux-textfield.syno-ux-textfield-hover, .syno-ux-textfield.syno-ux-numberfield-hover, .ext-strict .x-small-editor .syno-ux-textfield-hover.syno-ux-textfield.x-form-text, .syno-ux-textfield-hover.syno-ux-numberfield, .ext-strict .x-small-editor .syno-ux-textfield.x-form-text.syno-ux-numberfield-hover, .syno-ux-numberfield.syno-ux-numberfield-hover { border-color: rgba(124, 138, 152, 0.5); } .x-form-focus.syno-ux-textfield, .ext-strict .x-small-editor .x-form-focus.syno-ux-textfield.x-form-text, .x-form-focus.syno-ux-numberfield { border-color: #057feb; } .x-form-invalid.syno-ux-textfield, .ext-strict .x-small-editor .x-form-invalid.syno-ux-textfield.x-form-text, .x-form-invalid.syno-ux-numberfield { border-color: #e64040; background-color: rgba(230, 64, 64, 0.08); background-image: none; } .x-item-disabled.x-form-text.syno-ux-textfield, .ext-strict .x-small-editor .x-item-disabled.x-form-text.syno-ux-textfield, .x-item-disabled.x-form-text.syno-ux-numberfield { color: rgba(65, 75, 85, 0.4); border-color: rgba(198, 212, 224, 0.7); background-color: rgba(198, 212, 224, 0.2); } .ext-strict .x-grid3-viewport .x-small-editor .x-form-text.syno-ux-textfield, .ext-strict .x-grid3-viewport .x-small-editor .x-form-text.syno-ux-numberfield { margin-top: 0px; height: 18px !important; line-height: 26px !important; } .x-form-item .x-form-item-label.syno-ux-item-label { font-size: 13px; line-height: 20px; padding: 4px 0; overflow-wrap: break-word; } .syno-ux-triggerfield, .syno-ux-combobox, .syno-ux-colorfield, .syno-ux-schedulefield, .syno-ux-datefield, .syno-ux-timefield, .syno-ux-superboxselect { font-size: 13px; background-color: #fff; background-image: none; padding: 3px 0 3px 11px; border-right: 0px; border-radius: 4px; } .syno-ux-triggerfield-readonly.syno-ux-triggerfield, .syno-ux-triggerfield-readonly.syno-ux-combobox, .syno-ux-triggerfield-readonly.syno-ux-colorfield, .syno-ux-triggerfield-readonly.syno-ux-schedulefield, .syno-ux-triggerfield-readonly.syno-ux-datefield, .syno-ux-triggerfield-readonly.syno-ux-timefield, .syno-ux-triggerfield-readonly.syno-ux-superboxselect, .syno-ux-triggerfield-no-trigger.syno-ux-triggerfield, .syno-ux-triggerfield-no-trigger.syno-ux-combobox, .syno-ux-triggerfield-no-trigger.syno-ux-colorfield, .syno-ux-triggerfield-no-trigger.syno-ux-schedulefield, .syno-ux-triggerfield-no-trigger.syno-ux-datefield, .syno-ux-triggerfield-no-trigger.syno-ux-timefield, .syno-ux-triggerfield-no-trigger.syno-ux-superboxselect { border-right: 1px solid rgba(198, 212, 224, 0.7); } .x-form-text.syno-ux-triggerfield, .x-form-text.syno-ux-combobox, .x-form-text.syno-ux-colorfield, .x-form-text.syno-ux-schedulefield, .x-form-text.syno-ux-datefield, .x-form-text.syno-ux-timefield, .x-form-text.syno-ux-superboxselect { vertical-align: top; border-color: rgba(198, 212, 224, 0.7); height: 20px; line-height: 20px; border-radius: 4px 0 0 4px; } .x-form-text.syno-ux-triggerfield-readonly.syno-ux-triggerfield, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-combobox, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-colorfield, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-schedulefield, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-datefield, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-timefield, .x-form-text.syno-ux-triggerfield-readonly.syno-ux-superboxselect, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-triggerfield, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-combobox, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-colorfield, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-schedulefield, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-datefield, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-timefield, .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-superboxselect { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .syno-ux-triggerfield.syno-ux-triggerfield-hover, .syno-ux-triggerfield.syno-ux-combobox-hover, .syno-ux-triggerfield.syno-ux-colorfield-hover, .syno-ux-triggerfield.syno-ux-schedulefield-hover, .syno-ux-triggerfield.syno-ux-datefield-hover, .syno-ux-triggerfield.syno-ux-timefield-hover, .syno-ux-triggerfield-hover.syno-ux-combobox, .syno-ux-triggerfield-hover.syno-ux-colorfield, .syno-ux-triggerfield-hover.syno-ux-schedulefield, .syno-ux-triggerfield-hover.syno-ux-datefield, .syno-ux-triggerfield-hover.syno-ux-timefield, .syno-ux-triggerfield-hover.syno-ux-superboxselect, .syno-ux-combobox.syno-ux-combobox-hover, .syno-ux-combobox.syno-ux-colorfield-hover, .syno-ux-combobox.syno-ux-schedulefield-hover, .syno-ux-combobox.syno-ux-datefield-hover, .syno-ux-combobox.syno-ux-timefield-hover, .syno-ux-combobox-hover.syno-ux-colorfield, .syno-ux-combobox-hover.syno-ux-schedulefield, .syno-ux-combobox-hover.syno-ux-datefield, .syno-ux-combobox-hover.syno-ux-timefield, .syno-ux-combobox-hover.syno-ux-superboxselect, .syno-ux-colorfield.syno-ux-colorfield-hover, .syno-ux-colorfield.syno-ux-schedulefield-hover, .syno-ux-colorfield.syno-ux-datefield-hover, .syno-ux-colorfield.syno-ux-timefield-hover, .syno-ux-colorfield-hover.syno-ux-schedulefield, .syno-ux-colorfield-hover.syno-ux-datefield, .syno-ux-colorfield-hover.syno-ux-timefield, .syno-ux-colorfield-hover.syno-ux-superboxselect, .syno-ux-schedulefield.syno-ux-schedulefield-hover, .syno-ux-schedulefield.syno-ux-datefield-hover, .syno-ux-schedulefield.syno-ux-timefield-hover, .syno-ux-schedulefield-hover.syno-ux-datefield, .syno-ux-schedulefield-hover.syno-ux-timefield, .syno-ux-schedulefield-hover.syno-ux-superboxselect, .syno-ux-datefield.syno-ux-datefield-hover, .syno-ux-datefield.syno-ux-timefield-hover, .syno-ux-datefield-hover.syno-ux-timefield, .syno-ux-datefield-hover.syno-ux-superboxselect, .syno-ux-timefield.syno-ux-timefield-hover, .syno-ux-timefield-hover.syno-ux-superboxselect { border-color: rgba(124, 138, 152, 0.5); } .x-form-focus.syno-ux-triggerfield, .x-form-focus.syno-ux-combobox, .x-form-focus.syno-ux-colorfield, .x-form-focus.syno-ux-schedulefield, .x-form-focus.syno-ux-datefield, .x-form-focus.syno-ux-timefield, .x-form-focus.syno-ux-superboxselect { border-color: #057feb; } .x-form-invalid.syno-ux-triggerfield, .x-form-invalid.syno-ux-combobox, .x-form-invalid.syno-ux-colorfield, .x-form-invalid.syno-ux-schedulefield, .x-form-invalid.syno-ux-datefield, .x-form-invalid.syno-ux-timefield, .x-form-invalid.syno-ux-superboxselect { border-color: #e64040; background-color: rgba(230, 64, 64, 0.08); background-image: none; } .x-item-disabled .x-form-text.syno-ux-triggerfield, .x-item-disabled .x-form-text.syno-ux-combobox, .x-item-disabled .x-form-text.syno-ux-colorfield, .x-item-disabled .x-form-text.syno-ux-schedulefield, .x-item-disabled .x-form-text.syno-ux-datefield, .x-item-disabled .x-form-text.syno-ux-timefield, .x-item-disabled .x-form-text.syno-ux-superboxselect { color: rgba(65, 75, 85, 0.4); border-color: rgba(198, 212, 224, 0.7); background-color: rgba(198, 212, 224, 0.2); background-image: none; border-right: 0px; } .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-triggerfield, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-combobox, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-colorfield, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-schedulefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-datefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-timefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-readonly.syno-ux-superboxselect, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-triggerfield, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-combobox, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-colorfield, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-schedulefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-datefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-timefield, .x-item-disabled .x-form-text.syno-ux-triggerfield-no-trigger.syno-ux-superboxselect { border-right: 1px solid rgba(198, 212, 224, 0.7); } .x-form-field-trigger-wrap .x-form-trigger.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-combobox-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-datefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-timefield-trigger { background-position: 0px 1px; background-color: #fff; border: 1px solid rgba(198, 212, 224, 0.7); border-left: 0px; width: 26px; height: 26px; border-radius: 0 4px 4px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-triggerfield-trigger, .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-combobox-trigger, .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-colorfield-trigger, .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-schedulefield-trigger, .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-datefield-trigger, .synohdpack .x-form-field-trigger-wrap .x-form-trigger.syno-ux-timefield-trigger { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-triggerfield-trigger, .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-combobox-trigger, .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-colorfield-trigger, .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-schedulefield-trigger, .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-datefield-trigger, .synohdpackdebug .x-form-field-trigger-wrap .x-form-trigger.syno-ux-timefield-trigger { background-size: 24px 72px; outline: 1px green dashed; } } .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-combobox-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-datefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-timefield-trigger { border-color: rgba(124, 138, 152, 0.5); } .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-combobox-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-datefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-over.syno-ux-trigger-invalid.syno-ux-timefield-trigger { border-color: #e64040; background-color: rgba(230, 64, 64, 0.08); } .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-combobox-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-datefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.x-form-trigger-click.syno-ux-timefield-trigger { background-position: 0px -23px; } .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-combobox-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-datefield-trigger, .x-form-field-trigger-wrap .x-form-trigger.syno-ux-trigger-invalid.syno-ux-timefield-trigger { border-color: #e64040; background-color: rgba(230, 64, 64, 0.08); } .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-combobox-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-datefield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-timefield-trigger { background-position: 0 -23px; border-color: #057feb; } .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-combobox-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-datefield-trigger, .x-form-field-trigger-wrap.x-trigger-wrap-focus .x-form-trigger.syno-ux-trigger-invalid.syno-ux-timefield-trigger { border-color: #e64040; } .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-combobox-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-datefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.syno-ux-timefield-trigger { background-position: 0px -47px; background-color: rgba(198, 212, 224, 0.2); border-color: rgba(198, 212, 224, 0.7); } .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-combobox-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-datefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-over.syno-ux-timefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-triggerfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-combobox-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-colorfield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-schedulefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-datefield-trigger, .x-form-field-trigger-wrap.x-item-disabled .x-form-trigger.x-form-trigger-click.syno-ux-timefield-trigger { background-position: 0px -47px !important; border-color: rgba(198, 212, 224, 0.7); } .x-form-hidden-error-msg { position: absolute; color: transparent; width: 1px; height: 1px; overflow: hidden; } .ext-ie8 .x-form-hidden-error-msg { display: none; } .syno-ux-gridpanel .x-panel-tbar .x-toolbar, .syno-ux-editorgridpanel .x-panel-tbar .x-toolbar, .syno-ux-panel .x-panel-tbar .x-toolbar, .syno-ux-formpanel .x-panel-tbar .x-toolbar, .syno-ux-tab-panel .x-panel-tbar .x-toolbar { border-bottom-color: rgba(198, 212, 224, 0.7); padding: 0px 0px 8px 0px; } .syno-ux-gridpanel .x-panel-bbar .x-toolbar, .syno-ux-editorgridpanel .x-panel-bbar .x-toolbar, .syno-ux-panel .x-panel-bbar .x-toolbar, .syno-ux-formpanel .x-panel-bbar .x-toolbar, .syno-ux-tab-panel .x-panel-bbar .x-toolbar { border-top-color: rgba(198, 212, 224, 0.4); height: 23px; } .syno-ux-gridpanel .x-panel-bbar .x-toolbar .xtb-text, .syno-ux-editorgridpanel .x-panel-bbar .x-toolbar .xtb-text, .syno-ux-panel .x-panel-bbar .x-toolbar .xtb-text, .syno-ux-formpanel .x-panel-bbar .x-toolbar .xtb-text, .syno-ux-tab-panel .x-panel-bbar .x-toolbar .xtb-text { line-height: 23px; padding-top: 0px; } .syno-ux-gridpanel .x-panel-ml, .syno-ux-editorgridpanel .x-panel-ml, .syno-ux-panel .x-panel-ml, .syno-ux-formpanel .x-panel-ml, .syno-ux-tab-panel .x-panel-ml, .syno-ux-gridpanel .x-panel-mc, .syno-ux-editorgridpanel .x-panel-mc, .syno-ux-panel .x-panel-mc, .syno-ux-formpanel .x-panel-mc, .syno-ux-tab-panel .x-panel-mc { background-color: transparent; } .syno-ux-gridpanel .x-panel-header, .syno-ux-editorgridpanel .x-panel-header, .syno-ux-panel .x-panel-header, .syno-ux-formpanel .x-panel-header, .syno-ux-tab-panel .x-panel-header { background-image: none; border-bottom: 1px dashed rgba(198, 212, 224, 0.7); font-size: 15px; font-weight: normal; padding: 0px 0px 0px 8px; } .syno-ux-gridpanel .x-panel-header .x-panel-header-text, .syno-ux-editorgridpanel .x-panel-header .x-panel-header-text, .syno-ux-panel .x-panel-header .x-panel-header-text, .syno-ux-formpanel .x-panel-header .x-panel-header-text, .syno-ux-tab-panel .x-panel-header .x-panel-header-text { color: #057feb; line-height: 28px; } .syno-ux-checkbox-icon, .syno-ux-radio-icon { background-position: 0px 0px; background-color: transparent; width: 20px; height: 20px; border: 0px; margin-top: 2px; } .ext-ie .x-form-check-wrap .syno-ux-checkbox-icon, .ext-ie .x-form-check-wrap .syno-ux-radio-icon { width: 20px; height: 20px; } .syno-ux-cb-focus.syno-ux-checkbox-icon, .syno-ux-cb-focus.syno-ux-radio-icon, .syno-ux-cb-hover.syno-ux-checkbox-icon, .syno-ux-cb-hover.syno-ux-radio-icon { background-position: 0px -20px; } .syno-ux-cb-disabled.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-radio-icon { background-position: 0px -40px; } .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-radio-icon { background-position: 0px -100px; } .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-cb-focus.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-cb-focus.syno-ux-radio-icon, .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-cb-hover.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-checked.syno-ux-cb-hover.syno-ux-radio-icon { background-position: 0px -100px; } .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-radio-icon { background-position: 0px -160px; } .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-cb-focus.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-cb-focus.syno-ux-radio-icon, .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-cb-hover.syno-ux-checkbox-icon, .syno-ux-cb-disabled.syno-ux-cb-grayed.syno-ux-cb-hover.syno-ux-radio-icon { background-position: 0px -160px; } .syno-ux-cb-checked.syno-ux-checkbox-icon, .syno-ux-cb-checked.syno-ux-radio-icon { background-position: 0px -60px; } .syno-ux-cb-checked.syno-ux-cb-focus.syno-ux-checkbox-icon, .syno-ux-cb-checked.syno-ux-cb-focus.syno-ux-radio-icon, .syno-ux-cb-checked.syno-ux-cb-hover.syno-ux-checkbox-icon, .syno-ux-cb-checked.syno-ux-cb-hover.syno-ux-radio-icon { background-position: 0px -80px; } .syno-ux-cb-grayed.syno-ux-checkbox-icon, .syno-ux-cb-grayed.syno-ux-radio-icon { background-position: 0px -120px; } .syno-ux-cb-grayed.syno-ux-cb-focus.syno-ux-checkbox-icon, .syno-ux-cb-grayed.syno-ux-cb-focus.syno-ux-radio-icon, .syno-ux-cb-grayed.syno-ux-cb-hover.syno-ux-checkbox-icon, .syno-ux-cb-grayed.syno-ux-cb-hover.syno-ux-radio-icon { background-position: 0px -140px; } .x-form-check-wrap .syno-ux-checkbox-icon, .x-form-check-wrap .syno-ux-radio-icon { position: absolute; } .syno-ux-checkbox-label { font-size: 13px; line-height: 20px !important; padding-top: 2px; padding-bottom: 2px; padding-left: 8px; } .x-form-check-wrap .syno-ux-checkbox-label { display: inline-block; vertical-align: top; padding-left: 28px; } .syno-ux-form-check-wrap input[type="checkbox"], .syno-ux-form-radio-wrap input[type="checkbox"], .syno-ux-form-check-wrap input[type="radio"], .syno-ux-form-radio-wrap input[type="radio"] { width: 1px; height: 1px; margin-top: 5px; margin-left: 5px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .ext-ie8 .syno-ux-form-check-wrap input[type="checkbox"], .ext-ie8 .syno-ux-form-radio-wrap input[type="checkbox"], .ext-ie9 .syno-ux-form-check-wrap input[type="checkbox"], .ext-ie9 .syno-ux-form-radio-wrap input[type="checkbox"], .ext-ie8 .syno-ux-form-check-wrap input[type="radio"], .ext-ie8 .syno-ux-form-radio-wrap input[type="radio"], .ext-ie9 .syno-ux-form-check-wrap input[type="radio"], .ext-ie9 .syno-ux-form-radio-wrap input[type="radio"] { position: absolute; top: -10000px; left: -10000px; } .ext-el-mask-msg.x-mask-loading div { cursor: wait; } .syno-ux-menu.syno-ux-menu-autofexcroll a.x-menu-item { margin-right: 10px; } .syno-ux-fieldset { border: 0px; padding: 0px; margin-bottom: 8px; } .ext-safari .syno-ux-fieldset.syno-ux-fieldset-default { position: static; } .syno-ux-fieldset.syno-ux-fieldset-default .x-fieldset-header:hover, .syno-ux-fieldset.syno-ux-fieldset-default .x-fieldset-header:focus, .syno-ux-fieldset.syno-ux-fieldset-default .x-fieldset-bottomlegend:hover, .syno-ux-fieldset.syno-ux-fieldset-default .x-fieldset-bottomlegend:focus { color: #057feb; } .ext-safari .syno-ux-fieldset { position: relative; } .syno-ux-fieldset .x-fieldset-bwrap { padding: 8px; } .syno-ux-fieldset .x-tool.x-tool-toggle { margin-top: 0px; background-position: -24px -0px; width: 24px; height: 24px; margin-left: 4px; margin-right: 4px; float: left; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-fieldset .x-tool.x-tool-toggle { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-fieldset .x-tool.x-tool-toggle { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-fieldset .x-fieldset-header, .syno-ux-fieldset .x-fieldset-bottomlegend { font-size: 15px; font-weight: normal; height: 28px; line-height: 28px; padding: 0 0 3px 0; border-bottom: 1px dashed rgba(198, 212, 224, 0.7); color: #057feb; } .syno-ux-fieldset .x-fieldset-header .x-fieldset-header-text, .syno-ux-fieldset .x-fieldset-bottomlegend .x-fieldset-header-text { padding-left: 8px; line-height: 24px; width: calc(100% - 48px); display: block; } .syno-ux-fieldset .x-fieldset-header:hover, .syno-ux-fieldset .x-fieldset-header:focus, .syno-ux-fieldset .x-fieldset-bottomlegend:hover, .syno-ux-fieldset .x-fieldset-bottomlegend:focus { color: #006dcc; } .syno-ux-fieldset .x-fieldset-header:hover .x-tool.x-tool-toggle, .syno-ux-fieldset .x-fieldset-header:focus .x-tool.x-tool-toggle, .syno-ux-fieldset .x-fieldset-bottomlegend:hover .x-tool.x-tool-toggle, .syno-ux-fieldset .x-fieldset-bottomlegend:focus .x-tool.x-tool-toggle { background-position: -24px -24px; } .syno-ux-fieldset .x-fieldset-header:active, .syno-ux-fieldset .x-fieldset-bottomlegend:active { color: #005cad; } .syno-ux-fieldset .x-fieldset-header:active .x-tool.x-tool-toggle, .syno-ux-fieldset .x-fieldset-bottomlegend:active .x-tool.x-tool-toggle { background-position: -24px -48px; } .syno-ux-fieldset .x-fieldset-bottomlegend { font-size: 13px; height: 26px; border: 0px; cursor: pointer; } .syno-ux-fieldset .x-fieldset-bottomlegend .x-fieldset-bottomlegend-text { line-height: 26px; } .syno-ux-fieldset.x-panel-collapsed .x-fieldset-bottomlegend .x-tool.x-tool-toggle, .syno-ux-fieldset.x-panel-collapsed .x-fieldset-header .x-tool.x-tool-toggle { background-position: 0px 0px; } .syno-ux-fieldset.x-panel-collapsed .x-fieldset-bottomlegend:hover .x-tool.x-tool-toggle, .syno-ux-fieldset.x-panel-collapsed .x-fieldset-bottomlegend:focus .x-tool.x-tool-toggle, .syno-ux-fieldset.x-panel-collapsed .x-fieldset-header:hover .x-tool.x-tool-toggle, .syno-ux-fieldset.x-panel-collapsed .x-fieldset-header:focus .x-tool.x-tool-toggle { background-position: 0px -24px; } .syno-ux-fieldset.x-panel-collapsed .x-fieldset-bottomlegend:active .x-tool.x-tool-toggle, .syno-ux-fieldset.x-panel-collapsed .x-fieldset-header:active .x-tool.x-tool-toggle { background-position: 0px -48px; } .syno-ux-fieldset legend, .syno-ux-fieldset legend span { cursor: pointer; } .syno-ux-fieldset.syno-ux-fieldset-default .x-fieldset-header-text { padding-left: 8px; } .syno-ux-fieldset.syno-ux-fieldset-default legend, .syno-ux-fieldset.syno-ux-fieldset-default legend span { cursor: default; } .syno-ux-fieldset.syno-ux-inverse-fieldset .x-fieldset-bwrap { padding: 0; } .ext-ie .x-fieldset.syno-ux-fieldset { padding-bottom: 0px; } .ext-ie .x-fieldset.syno-ux-fieldset legend { margin-bottom: 0px; } input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="textarea"]::-webkit-input-placeholder { color: rgba(65, 75, 85, 0.4); } input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="textarea"]:-moz-placeholder { color: rgba(65, 75, 85, 0.4); opacity: 1; } input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="textarea"]::-moz-placeholder { color: rgba(65, 75, 85, 0.4); opacity: 1; } input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="textarea"]:-ms-input-placeholder { color: rgba(65, 75, 85, 0.4); } .syno-ux-displayfield.x-form-display-field { font-size: 13px; padding-top: 4px; padding-bottom: 4px; line-height: 20px; } .syno-ux-displayfield.x-form-display-field.x-item-disabled { color: rgba(65, 75, 85, 0.4); } .syno-ux-combobox-list.x-layer.x-combo-list { border-color: rgba(198, 212, 224, 0.7); background-color: #fff; padding: 8px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); border-radius: 4px; } .syno-ux-combobox-list.x-resizable-pinned .x-combo-list-inner { border-bottom: 0; } .syno-ux-combobox-list .x-combo-list-item { height: 28px; line-height: 28px; background-color: #fff; font-size: 13px; padding: 0px 6px 0 12px; border-width: 0px; border-radius: 3px; } .syno-ux-combobox-list .x-combo-list-item.x-combo-selected { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-combobox-list .x-combo-list-inner { margin-bottom: 0px; } .syno-ux-combobox-list .syno-ux-pagingtoolbar { border-top: 1px solid rgba(198, 212, 224, 0.4); border-bottom: 1px solid rgba(198, 212, 224, 0.7); padding: 0px; } .syno-ux-combobox-list .loading-indicator { margin: 0px 3px; } .syno-ux-colormenu { background-image: none; } .syno-ux-colormenu.x-layer { background-color: #fff; padding: 4px; border: 1px solid rgba(198, 212, 224, 0.7); border-radius: 4px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16); } .syno-ux-colormenu .x-color-palette.x-menu-list-item a { color: rgba(198, 212, 224, 0.7); padding: 3px; border: none; } .syno-ux-colormenu .x-color-palette.x-menu-list-item a:hover { padding: 2px; border: 1px solid rgba(124, 138, 152, 0.5); border-radius: 3px; } .syno-ux-schedule-menu > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon { width: 20px; height: 20px; top: 4px; } button { border-radius: 0px; } .syno-ux-button { height: 26px; line-height: 26px; border-radius: 3px; display: inline-block; text-align: center; } .syno-ux-button em { display: block; } .syno-ux-button.x-btn em button { height: 26px; font-size: 13px; padding-left: 13px; padding-right: 13px; background-repeat: no-repeat; vertical-align: top; } .syno-ux-button.x-btn-icon em button { height: 24px; padding-left: 14px; padding-right: 14px; margin: 1px 0px; background-position-x: center; } .syno-ux-button.x-btn em button.arrow { padding-right: 0px; padding-left: 2px; border: 0px; position: absolute; right: -1px; top: -1px; bottom: -1px; height: 28px; width: 14px; user-select: auto; } .syno-ux-button.syno-ux-button-dropdown { padding-right: 13px; } .syno-ux-button.syno-ux-button-dropdown.syno-ux-button-split { padding-right: 0px; } .syno-ux-button em { position: relative; cursor: pointer; } .syno-ux-button em.x-btn-arrow { display: block; padding-right: 12px; background-repeat: no-repeat; background-position: right 2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-button em.x-btn-arrow { background-size: 12px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-button em.x-btn-arrow { background-size: 12px 48px; outline: 1px green dashed; } } .syno-ux-button em.x-btn-arrow button { padding-right: 2px; } .syno-ux-button em.x-btn-split { display: block; padding-right: 14px; background-repeat: no-repeat; background-position: right 1px top 1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-button em.x-btn-split { background-size: 12px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-button em.x-btn-split { background-size: 12px 48px; outline: 1px green dashed; } } .syno-ux-button em.x-btn-split button:first-child { border-right: 1px solid #c8d2dc; padding-right: 13px; } .syno-ux-button.x-item-disabled { cursor: default; } .syno-ux-button.x-item-disabled.x-btn-icon .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button.x-item-disabled em.x-btn-arrow { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button.x-item-disabled em.x-btn-arrow .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .syno-ux-button.x-item-disabled em.x-btn-split { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button.x-item-disabled em.x-btn-split .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .syno-ux-button.syno-ux-button-blue em.x-btn-arrow, .syno-ux-button.syno-ux-button-blue em.x-btn-split, .syno-ux-button.syno-ux-button-red em.x-btn-arrow, .syno-ux-button.syno-ux-button-red em.x-btn-split, .syno-ux-button.syno-ux-button-green em.x-btn-arrow, .syno-ux-button.syno-ux-button-green em.x-btn-split, .syno-ux-button.syno-ux-button-orange em.x-btn-arrow, .syno-ux-button.syno-ux-button-orange em.x-btn-split { background-position-y: -22px; } .syno-ux-button.syno-ux-button-blue.x-item-disabled em.x-btn-arrow, .syno-ux-button.syno-ux-button-blue.x-item-disabled em.x-btn-split, .syno-ux-button.syno-ux-button-red.x-item-disabled em.x-btn-arrow, .syno-ux-button.syno-ux-button-red.x-item-disabled em.x-btn-split, .syno-ux-button.syno-ux-button-green.x-item-disabled em.x-btn-arrow, .syno-ux-button.syno-ux-button-green.x-item-disabled em.x-btn-split, .syno-ux-button.syno-ux-button-orange.x-item-disabled em.x-btn-arrow, .syno-ux-button.syno-ux-button-orange.x-item-disabled em.x-btn-split { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-blue, .syno-ux-button-red, .syno-ux-button-grey, .syno-ux-button-green, .syno-ux-button-orange { margin-right: 6px !important; text-align: center; } .syno-ux-button-blue.syno-ux-button-dropdown, .syno-ux-button-blue.syno-ux-button-split, .syno-ux-button-red.syno-ux-button-dropdown, .syno-ux-button-red.syno-ux-button-split, .syno-ux-button-grey.syno-ux-button-dropdown, .syno-ux-button-grey.syno-ux-button-split, .syno-ux-button-green.syno-ux-button-dropdown, .syno-ux-button-green.syno-ux-button-split, .syno-ux-button-orange.syno-ux-button-dropdown, .syno-ux-button-orange.syno-ux-button-split { min-width: 0px; } .syno-ux-button-grey { border: solid 1px rgba(198, 212, 224, 0); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-grey.x-btn-over, .syno-ux-button-grey:hover, .syno-ux-button-grey.x-btn-focus { border-color: rgba(124, 138, 152, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-grey.x-btn-click, .syno-ux-button-grey:active { border-color: rgba(124, 138, 152, 0.5); background-color: rgba(198, 212, 224, 0.6); } .syno-ux-button-grey.x-item-disabled { border-color: rgba(198, 212, 224, 0); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-grey.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-grey.focus-effect { border-color: rgba(124, 138, 152, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-default { border: solid 1px rgba(198, 212, 224, 0); background-color: rgba(198, 212, 224, 0.4); margin-right: 6px !important; } .syno-ux-button-default.x-btn-over, .syno-ux-button-default:hover, .syno-ux-button-default.x-btn-focus { border-color: rgba(124, 138, 152, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-default.x-btn-click, .syno-ux-button-default:active { border-color: rgba(124, 138, 152, 0.5); background-color: rgba(198, 212, 224, 0.6); } .syno-ux-button-default.x-item-disabled { border-color: rgba(198, 212, 224, 0); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-default.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-default.focus-effect { border-color: rgba(124, 138, 152, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button-blue { border: solid 1px #057feb; background-color: #057feb; } .syno-ux-button-blue.x-btn-over, .syno-ux-button-blue:hover, .syno-ux-button-blue.x-btn-focus { border-color: #0062b8; background-color: #0075db; } .syno-ux-button-blue.x-btn-click, .syno-ux-button-blue:active { border-color: #005299; background-color: #006dcc; } .syno-ux-button-blue.x-item-disabled { border-color: #057feb; background-color: #057feb; } .syno-ux-button-blue.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-blue.focus-effect { border-color: #0062b8; background-color: #0075db; } .syno-ux-button-blue.x-btn .x-btn-text { color: #fff; } .syno-ux-button-blue.x-btn-over.x-btn .x-btn-text, .syno-ux-button-blue:hover.x-btn .x-btn-text, .syno-ux-button-blue.x-btn-focus.x-btn .x-btn-text, .syno-ux-button-blue.x-btn-click.x-btn .x-btn-text, .syno-ux-button-blue:active.x-btn .x-btn-text, .syno-ux-button-blue.x-item-disabled.x-btn .x-btn-text { color: #fff; } .syno-ux-button-blue.syno-ux-button-dropdown.syno-ux-button-split .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-blue.syno-ux-button-dropdown.syno-ux-button-split.x-btn-over .x-btn-text, .syno-ux-button-blue.syno-ux-button-dropdown.syno-ux-button-split.x-btn-focus .syno-ux-button-blue.syno-ux-button-dropdown.syno-ux-button-split.x-btn-click .x-btn-text, .syno-ux-button-blue.syno-ux-button-dropdown.syno-ux-button-split.x-item-disabled .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-red { border: solid 1px #e64040; background-color: #e64040; } .syno-ux-button-red.x-btn-over, .syno-ux-button-red:hover, .syno-ux-button-red.x-btn-focus { border-color: #a81b1b; background-color: #d12e2e; } .syno-ux-button-red.x-btn-click, .syno-ux-button-red:active { border-color: #991818; background-color: #bd1e1e; } .syno-ux-button-red.x-item-disabled { border-color: #e64040; background-color: #e64040; } .syno-ux-button-red.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-red.focus-effect { border-color: #a81b1b; background-color: #d12e2e; } .syno-ux-button-red.x-btn button { color: #fff; } .syno-ux-button-red.x-btn-over.x-btn button, .syno-ux-button-red:hover.x-btn button, .syno-ux-button-red.x-btn-focus.x-btn button, .syno-ux-button-red.x-btn-click.x-btn button, .syno-ux-button-red:active.x-btn button, .syno-ux-button-red.x-item-disabled.x-btn button { color: #fff; } .syno-ux-button-red.syno-ux-button-dropdown.syno-ux-button-split .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-red.syno-ux-button-dropdown.syno-ux-button-split.x-btn-over .x-btn-text, .syno-ux-button-red.syno-ux-button-dropdown.syno-ux-button-split.x-btn-focus .syno-ux-button-red.syno-ux-button-dropdown.syno-ux-button-split.x-btn-click .x-btn-text, .syno-ux-button-red.syno-ux-button-dropdown.syno-ux-button-split.x-item-disabled .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-green { border: solid 1px #009e05; background-color: #009e05; } .syno-ux-button-green.x-btn-over, .syno-ux-button-green:hover, .syno-ux-button-green.x-btn-focus { border-color: #006603; background-color: #038f08; } .syno-ux-button-green.x-btn-click, .syno-ux-button-green:active { border-color: #005703; background-color: #008004; } .syno-ux-button-green.x-item-disabled { border-color: #009e05; background-color: #009e05; } .syno-ux-button-green.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-green.focus-effect { border-color: #006603; background-color: #038f08; } .syno-ux-button-green.x-btn button { color: #fff; } .syno-ux-button-green.x-btn-over.x-btn button, .syno-ux-button-green:hover.x-btn button, .syno-ux-button-green.x-btn-focus.x-btn button, .syno-ux-button-green.x-btn-click.x-btn button, .syno-ux-button-green:active.x-btn button, .syno-ux-button-green.x-item-disabled.x-btn button { color: #fff; } .syno-ux-button-green.syno-ux-button-dropdown.syno-ux-button-split .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-green.syno-ux-button-dropdown.syno-ux-button-split.x-btn-over .x-btn-text, .syno-ux-button-green.syno-ux-button-dropdown.syno-ux-button-split.x-btn-focus .syno-ux-button-green.syno-ux-button-dropdown.syno-ux-button-split.x-btn-click .x-btn-text, .syno-ux-button-green.syno-ux-button-dropdown.syno-ux-button-split.x-item-disabled .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-orange { border: solid 1px #f58414; background-color: #f58414; } .syno-ux-button-orange.x-btn-over, .syno-ux-button-orange:hover, .syno-ux-button-orange.x-btn-focus { border-color: #bf6000; background-color: #e67808; } .syno-ux-button-orange.x-btn-click, .syno-ux-button-orange:active { border-color: #ad5700; background-color: #d96c00; } .syno-ux-button-orange.x-item-disabled { border-color: #f58414; background-color: #f58414; } .syno-ux-button-orange.x-item-disabled .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button-orange.focus-effect { border-color: #bf6000; background-color: #e67808; } .syno-ux-button-orange.x-btn button { color: #fff; } .syno-ux-button-orange.x-btn-over.x-btn button, .syno-ux-button-orange:hover.x-btn button, .syno-ux-button-orange.x-btn-focus.x-btn button, .syno-ux-button-orange.x-btn-click.x-btn button, .syno-ux-button-orange:active.x-btn button, .syno-ux-button-orange.x-item-disabled.x-btn button { color: #fff; } .syno-ux-button-orange.syno-ux-button-dropdown.syno-ux-button-split .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button-orange.syno-ux-button-dropdown.syno-ux-button-split.x-btn-over .x-btn-text, .syno-ux-button-orange.syno-ux-button-dropdown.syno-ux-button-split.x-btn-focus .syno-ux-button-orange.syno-ux-button-dropdown.syno-ux-button-split.x-btn-click .x-btn-text, .syno-ux-button-orange.syno-ux-button-dropdown.syno-ux-button-split.x-item-disabled .x-btn-text { border-right-color: rgba(255, 255, 255, 0.4); } .syno-ux-button.syno-ux-statebuttongroup-right, .syno-ux-button.syno-ux-statebuttongroup-left, .syno-ux-button.syno-ux-statebuttongroup-middle { margin-right: 0px !important; border-color: rgba(198, 212, 224, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button.syno-ux-statebuttongroup-right.x-btn em button, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn em button, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn em button { padding-right: 18px; padding-left: 18px; } .syno-ux-button.syno-ux-statebuttongroup-right.x-btn-over, .syno-ux-button.syno-ux-statebuttongroup-right:hover, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn-over, .syno-ux-button.syno-ux-statebuttongroup-left:hover, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn-over, .syno-ux-button.syno-ux-statebuttongroup-middle:hover { border-color: rgba(124, 138, 152, 0.3); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button.syno-ux-statebuttongroup-right.x-btn-click, .syno-ux-button.syno-ux-statebuttongroup-right.syno-ux-statebuttongroup-pressed, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn-click, .syno-ux-button.syno-ux-statebuttongroup-left.syno-ux-statebuttongroup-pressed, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn-click, .syno-ux-button.syno-ux-statebuttongroup-middle.syno-ux-statebuttongroup-pressed { border-color: #057feb; background-color: #057feb; box-shadow: inset 0px 1px 2px #007bd3; } .syno-ux-button.syno-ux-statebuttongroup-right.x-btn-click.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-right.syno-ux-statebuttongroup-pressed.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-left.x-btn-click.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-left.syno-ux-statebuttongroup-pressed.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-middle.x-btn-click.x-btn button, .syno-ux-button.syno-ux-statebuttongroup-middle.syno-ux-statebuttongroup-pressed.x-btn button { text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15); color: #fff; } .syno-ux-button.syno-ux-statebuttongroup-right.x-item-disabled, .syno-ux-button.syno-ux-statebuttongroup-left.x-item-disabled, .syno-ux-button.syno-ux-statebuttongroup-middle.x-item-disabled { border-color: rgba(198, 212, 224, 0.4); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-button.syno-ux-statebuttongroup-right.x-item-disabled.x-btn .x-btn-text, .syno-ux-button.syno-ux-statebuttongroup-left.x-item-disabled.x-btn .x-btn-text, .syno-ux-button.syno-ux-statebuttongroup-middle.x-item-disabled.x-btn .x-btn-text { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-button.syno-ux-statebuttongroup-right, .syno-ux-button.syno-ux-statebuttongroup-middle { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .syno-ux-button.syno-ux-statebuttongroup-left, .syno-ux-button.syno-ux-statebuttongroup-middle { border-right: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .syno-ux-modulelist { box-shadow: 1px 0 0 0 rgba(198, 212, 224, 0.5); } .syno-ux-modulelist .x-panel-body { overflow-y: hidden; } .syno-ux-modulelist .x-panel-body:before, .syno-ux-modulelist .x-panel-body:after { position: absolute; display: block; height: 6px; content: ""; width: 94%; } .syno-ux-modulelist .x-panel-body:before { top: 0px; z-index: 99; background-color: #fff; } .syno-ux-modulelist .x-panel-body:after { bottom: 0; z-index: 99; background-color: #fff; } .syno-ux-modulelist.scroll-at-top .x-panel-body:before { display: none; } .syno-ux-modulelist.scroll-at-bottom .x-panel-body:after { display: none; } .syno-ux-modulelist .x-tree-root-ct { width: auto !important; } .syno-ux-modulelist .x-tree-root-node { padding-bottom: 8px; } .syno-ux-modulelist .x-tree-elbow, .syno-ux-modulelist .x-tree-elbow-end { display: none; } .syno-ux-modulelist .x-tree-node, .syno-ux-modulelist .x-tree-node * { cursor: pointer; } .syno-ux-modulelist .x-tree-node-icon { width: 22px; height: 22px; margin: 10px 8px 10px 12px; } .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-plus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-plus { width: 24px; height: 24px; position: absolute; left: 11px; top: 8px; } .syno-ux-modulelist .x-tree-node-collapsed { padding-bottom: 8px; } .syno-ux-modulelist .x-tree-node.x-tree-node-category { border-bottom: 1px solid rgba(198, 212, 224, 0.4); } .syno-ux-modulelist .x-tree-node.x-tree-node-category:last-child, .syno-ux-modulelist .x-tree-node.x-tree-node-category.x-tree-node-category-last { border-bottom: none; } .syno-ux-modulelist .x-tree-node-collapsed, .syno-ux-modulelist .x-tree-node-expanded { height: 24px; padding-top: 8px; position: relative; } .syno-ux-modulelist .x-tree-node-collapsed .x-tree-node-icon, .syno-ux-modulelist .x-tree-node-expanded .x-tree-node-icon { display: none; } .syno-ux-modulelist .x-tree-node-collapsed a, .syno-ux-modulelist .x-tree-node-expanded a { display: inline-block; width: 100%; height: 24px; position: absolute; left: 0; color: rgba(65, 75, 85, 0.5); overflow: hidden; text-overflow: ellipsis; line-height: 24px; height: 24px; } .syno-ux-modulelist .x-tree-node-collapsed a span, .syno-ux-modulelist .x-tree-node-expanded a span { line-height: 24px; display: inline-block; padding: 0; color: rgba(65, 75, 85, 0.5); font-size: 12px; margin-left: 40px; margin-right: 30px; } .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible .x-tree-elbow-end-plus, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible .x-tree-elbow-end-plus { display: none; } .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible .x-tree-node-text, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible .x-tree-node-text { margin-left: 12px; } .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible *, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible * { cursor: default; } .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible:hover a span, .syno-ux-modulelist .x-tree-node-collapsed.x-tree-node-not-collapsible:active a span, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible:hover a span, .syno-ux-modulelist .x-tree-node-expanded.x-tree-node-not-collapsible:active a span { color: rgba(65, 75, 85, 0.5); } .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-minus { background-position: -24px 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-minus, .synohdpack .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-minus, .synohdpack .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-minus, .synohdpack .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-minus { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-minus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-minus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-minus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-minus { background-size: 48px 72px; outline: 1px green dashed; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-plus, .synohdpack .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-plus, .synohdpack .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-plus, .synohdpack .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-plus { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-plus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-collapsed .x-tree-elbow-end-plus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-plus, .synohdpackdebug .syno-ux-modulelist .x-tree-node-expanded .x-tree-elbow-end-plus { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-modulelist .x-tree-node-collapsed:hover a span, .syno-ux-modulelist .x-tree-node-expanded:hover a span { color: rgba(65, 75, 85, 0.6); } .syno-ux-modulelist .x-tree-node-collapsed:hover .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-collapsed:hover .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-expanded:hover .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-expanded:hover .x-tree-elbow-end-minus { background-position: -24px -24px; } .syno-ux-modulelist .x-tree-node-collapsed:hover .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-collapsed:hover .x-tree-elbow-end-plus, .syno-ux-modulelist .x-tree-node-expanded:hover .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-expanded:hover .x-tree-elbow-end-plus { background-position: 0 -24px; } .syno-ux-modulelist .x-tree-node-collapsed:active a span, .syno-ux-modulelist .x-tree-node-expanded:active a span { color: rgba(65, 75, 85, 0.7); } .syno-ux-modulelist .x-tree-node-collapsed:active .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-collapsed:active .x-tree-elbow-end-minus, .syno-ux-modulelist .x-tree-node-expanded:active .x-tree-elbow-minus, .syno-ux-modulelist .x-tree-node-expanded:active .x-tree-elbow-end-minus { background-position: -24px -48px; } .syno-ux-modulelist .x-tree-node-collapsed:active .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-collapsed:active .x-tree-elbow-end-plus, .syno-ux-modulelist .x-tree-node-expanded:active .x-tree-elbow-plus, .syno-ux-modulelist .x-tree-node-expanded:active .x-tree-elbow-end-plus { background-position: 0 -48px; } .syno-ux-modulelist .x-tree-node-leaf { height: 42px; font-size: 14px; position: relative; border-radius: 5px; } .syno-ux-modulelist .x-tree-node-leaf a { display: inline-block; width: 100%; position: absolute; left: 0; } .syno-ux-modulelist .x-tree-node-leaf a span { padding: 0 0 0 40px; display: table-cell; line-height: 18px; height: 42px; white-space: normal; vertical-align: middle; } .syno-ux-modulelist .x-tree-node-leaf .x-tree-node-icon { position: absolute; background-position: 0 0; opacity: 0.9; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-modulelist .x-tree-node-leaf .x-tree-node-icon { background-size: 24px 96px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-modulelist .x-tree-node-leaf .x-tree-node-icon { background-size: 24px 96px; outline: 1px green dashed; } } .syno-ux-modulelist .x-tree-node-leaf.x-tree-node-over { background-color: rgba(5, 127, 235, 0.04); } .syno-ux-modulelist .x-tree-node-leaf.x-tree-node-over .x-tree-node-icon { background-position: 0 0; } .syno-ux-modulelist .x-tree-node-leaf.x-tree-selected { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-modulelist .x-tree-node-leaf.x-tree-selected a span { color: #414b55; } .syno-ux-modulelist .x-tree-node-leaf.x-tree-selected .x-tree-node-icon { background-position: 0 0; } .syno-ux-modulelist .x-tree-node-leaf.x-tree-node-disabled .x-tree-node-icon { opacity: 0.4; } .syno-ux-modulelist .x-tree-node-ct { padding: 4px 0 8px 0; } .syno-ux-modulelist .x-tree-node-ct .x-tree-node-icon { opacity: 1; } .syno-ux-modulelist .x-tree-node-ct .x-tree-node-leaf.x-tree-node-over { background-color: rgba(5, 127, 235, 0.04); } .syno-ux-modulelist .x-tree-node-ct .x-tree-node-leaf.x-tree-selected { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-modulelist .x-toolbar { border: none !important; background: none; padding: 0 12px; } .syno-ux-modulelist .x-panel-bwrap .x-panel-tbar .x-toolbar { padding-bottom: 0; } @-moz-keyframes syno-ux-count-bubble-show { 30% { margin-top: 5px; } 80% { margin-top: 25px; } } @-webkit-keyframes syno-ux-count-bubble-show { 30% { margin-top: 5px; } 80% { margin-top: 25px; } } @keyframes syno-ux-count-bubble-show { 30% { margin-top: 5px; } 80% { margin-top: 25px; } } .syno-ux-modulelist .syno-ux-count-bubble { right: 6px; margin-top: 12px; position: absolute; height: 18px; line-height: 18px; border-radius: 24px; text-align: center; font-size: 12px; color: #fff; padding: 0px 6px; background-color: #057feb; } .syno-ux-modulelist .syno-ux-count-bubble.count-bubble-hide { opacity: 0; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .syno-ux-form-check-wrap { position: relative; } .x-form-composite .syno-ux-form-check-wrap { position: absolute; } .x-form-field-trigger-wrap.x-form-field-wrap .syno-ux-datefield-trigger.x-form-trigger { background-position: 0px 1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .x-form-field-trigger-wrap.x-form-field-wrap .syno-ux-datefield-trigger.x-form-trigger { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .x-form-field-trigger-wrap.x-form-field-wrap .syno-ux-datefield-trigger.x-form-trigger { background-size: 24px 72px; outline: 1px green dashed; } } .x-form-field-trigger-wrap.x-form-field-wrap .syno-ux-datefield-trigger.x-form-trigger.x-form-trigger-click { background-position: 0px -23px; } .x-form-field-trigger-wrap.x-form-field-wrap.x-trigger-wrap-focus .syno-ux-datefield-trigger.x-form-trigger { background-position: 0px -23px; } .x-form-field-trigger-wrap.x-item-disabled .syno-ux-datefield-trigger.x-form-trigger { background-position: 0px -47px; } .x-form-field-trigger-wrap.x-item-disabled .syno-ux-datefield-trigger.x-form-trigger.x-form-trigger-over, .x-form-field-trigger-wrap.x-item-disabled .syno-ux-datefield-trigger.x-form-trigger.x-form-trigger-click { background-position: 0px -47px !important; } .syno-datetimepicker-inner-menu .no-icon-space { width: 0px; } .syno-datetimepicker-inner-menu .x-menu-list { height: 210px; } .syno-ux-datefield-menu { border: none; box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.35); } .syno-ux-datefield-menu .x-date-picker > table > tbody > tr:first-child td { padding-top: 12px; padding-bottom: 8px; } .syno-ux-datefield-menu .x-date-picker > table > tbody > tr:first-child td:first-child { padding-left: 16px; } .syno-ux-datefield-menu .x-date-picker > table > tbody > tr:first-child td:last-child { padding-right: 16px; } .syno-ux-datefield-menu .x-date-right, .syno-ux-datefield-menu .x-date-middle, .syno-ux-datefield-menu .x-date-left { background-image: none; height: 28px; } .syno-ux-datefield-menu .x-date-right a, .syno-ux-datefield-menu .x-date-left a { width: 24px; height: 24px; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-datefield-menu .x-date-right a, .synohdpack .syno-ux-datefield-menu .x-date-left a { background-size: 48px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-datefield-menu .x-date-right a, .synohdpackdebug .syno-ux-datefield-menu .x-date-left a { background-size: 48px 48px; outline: 1px green dashed; } } .syno-ux-datefield-menu .x-date-left a { background-position: 0px 0px; } .syno-ux-datefield-menu .x-date-left a:hover { background-position: 0px -24px; } .syno-ux-datefield-menu .x-date-right a { background-position: -24px 0px; } .syno-ux-datefield-menu .x-date-right a:hover { background-position: -24px -24px; } .syno-ux-datefield-menu .x-date-middle { padding: 0px; } .syno-ux-datefield-menu .x-date-middle .x-btn button { height: 28px; font-size: 13px; } .syno-ux-datefield-menu .x-date-middle .x-btn-mc em.x-btn-arrow { background-position: right 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-datefield-menu .x-date-middle .x-btn-mc em.x-btn-arrow { background-size: 6px 112px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-datefield-menu .x-date-middle .x-btn-mc em.x-btn-arrow { background-size: 6px 112px; outline: 1px green dashed; } } .syno-ux-datefield-menu .x-date-middle .x-btn-over em.x-btn-arrow { background-position: right -28px; } .syno-ux-datefield-menu .x-date-middle .x-btn-click em.x-btn-arrow { background-position: right -56px; } .syno-ux-datefield-menu table.x-date-inner { margin: 0px 13px 0px 17px; width: auto; } .syno-ux-datefield-menu table.x-date-inner thead th { width: 34px; height: 34px; background-image: none; background-color: white; border: 0px; } .syno-ux-datefield-menu table.x-date-inner thead th span { width: 28px; height: 28px; line-height: 28px; padding: 0px; text-align: center; color: rgba(65, 75, 85, 0.4); } .syno-ux-datefield-menu table.x-date-inner tbody tr td { height: 32px; width: 32px; border: 1px solid white; } .syno-ux-datefield-menu table.x-date-inner tbody tr td .x-date-date { background-color: transparent; border: 2px solid transparent; border-radius: 4px; padding: 0px; text-align: center; width: 24px; height: 24px; line-height: 24px; } .syno-ux-datefield-menu table.x-date-inner tbody tr td span { font-size: 13px; letter-spacing: 0px; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-disabled span, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-prevday span, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-nextday span { color: rgba(65, 75, 85, 0.4); } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-disabled .x-date-date { background-color: transparent; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected .x-date-date, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected.x-date-today .x-date-date { background-color: #057feb; border-color: #057feb; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected .x-date-date span, .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected.x-date-today .x-date-date span { color: white; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-today .x-date-date { border-color: #057feb; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-today .x-date-date span { color: #057feb; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-active:hover .x-date-date { background-color: rgba(198, 212, 224, 0.4); } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected.x-date-active:hover .x-date-date { background-color: #057feb; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-selected.x-date-active:hover .x-date-date span { color: white; } .syno-ux-datefield-menu table.x-date-inner tbody tr td.x-date-view-selected:not(.x-date-selected):not(.x-date-today) .x-date-date { background-color: rgba(198, 212, 224, 0.4); } .syno-ux-datefield-menu .x-date-bottom { background-image: none; background-color: transparent; border-top: none; padding: 6px 16px 12px 16px; } .syno-ux-datefield-menu .x-date-bottom table.x-btn { display: inline-block; } .syno-ux-datefield-menu .x-date-bottom .today-btn { float: left; } .syno-ux-datefield-menu .x-date-bottom .clear-btn { float: right; } .syno-ux-datefield-menu .x-date-bottom .x-btn-ml, .syno-ux-datefield-menu .x-date-bottom .x-btn-mc, .syno-ux-datefield-menu .x-date-bottom .x-btn-mr { background-image: none; } .syno-ux-datefield-menu .x-date-bottom .x-btn-noicon .x-btn-small button { width: 70px; height: 24px; border-radius: 3px; border: solid 1px #c8d2dc; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, rgba(198, 212, 224, 0.4)) ); background-image: -moz-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: -webkit-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-datefield-menu .x-date-bottom .x-btn-over.x-btn-noicon .x-btn-small button { border: solid 1px #b4bec8; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, #e7ecf1) ); background-image: -moz-linear-gradient(#f5faff, #e7ecf1); background-image: -webkit-linear-gradient(#f5faff, #e7ecf1); background-image: linear-gradient(#f5faff, #e7ecf1); background-color: #e7ecf1; } .syno-ux-datefield-menu .x-date-bottom .x-btn-click.x-btn-noicon .x-btn-small button { border: solid 1px #b4bec8; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, rgba(198, 212, 224, 0.4)), color-stop(100%, #e1e6eb) ); background-image: -moz-linear-gradient(rgba(198, 212, 224, 0.4), #e1e6eb); background-image: -webkit-linear-gradient(rgba(198, 212, 224, 0.4), #e1e6eb); background-image: linear-gradient(rgba(198, 212, 224, 0.4), #e1e6eb); background-color: #e1e6eb; } .ext-ie9 .syno-ux-datefield-menu .x-date-picker, .ext-ie8 .syno-ux-datefield-menu .x-date-picker { width: auto !important; } .ext-ie9 .syno-ux-datefield-menu .x-date-picker .x-date-mp, .ext-ie8 .syno-ux-datefield-menu .x-date-picker .x-date-mp { width: auto !important; } .syno-ux-datefield-menu .x-date-mp { background-color: #fff; } .syno-ux-datefield-menu .x-date-mp tr td a { width: 50px; height: 24px; line-height: 24px; padding: 0px; font-size: 13px; border: 0px; } .syno-ux-datefield-menu .x-date-mp tr td.x-date-mp-sel a { color: white; background-image: none; } .syno-ux-datefield-menu .x-date-mp-year { padding-left: 6px; padding-right: 0px; } .syno-ux-datefield-menu .x-date-mp-month { padding-right: 6px; padding-left: 0px; } .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-prev, .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-next { width: 24px; height: 24px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-prev, .synohdpack .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-next { background-size: 24px 192px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-prev, .synohdpackdebug .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-next { background-size: 24px 192px; outline: 1px green dashed; } } .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-prev { background-position: 0px 0px; } .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-prev:hover { background-position: 0px -24px; } .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-next { background-position: 0px -96px; } .syno-ux-datefield-menu .x-date-mp-ybtn .x-date-mp-next:hover { background-position: 0px -120px; } .syno-ux-datefield-menu .x-date-mp-btns { background-image: none; background-color: white; } .syno-ux-datefield-menu .x-date-mp-btns td { border-top: 1px solid rgba(198, 212, 224, 0.7); padding: 0px; height: 37px; } .syno-ux-datefield-menu .x-date-mp-btns button { width: 70px; height: 24px; border-radius: 3px; } .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-ok { margin-right: 10px; border: solid 1px #1687d9; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #32aaff), color-stop(100%, #1994eb) ); background-image: -moz-linear-gradient(#32aaff, #1994eb); background-image: -webkit-linear-gradient(#32aaff, #1994eb); background-image: linear-gradient(#32aaff, #1994eb); background-color: #1994eb; color: #fff; } .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-ok:hover { border: solid 1px #0077cc; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #25a4ff), color-stop(100%, #028aeb) ); background-image: -moz-linear-gradient(#25a4ff, #028aeb); background-image: -webkit-linear-gradient(#25a4ff, #028aeb); background-image: linear-gradient(#25a4ff, #028aeb); background-color: #028aeb; } .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel { border: solid 1px #c8d2dc; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, rgba(198, 212, 224, 0.4)) ); background-image: -moz-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: -webkit-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-color: rgba(198, 212, 224, 0.4); } .syno-ux-datefield-menu .x-date-mp-btns button.x-date-mp-cancel:hover { border: solid 1px #b4bec8; background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, #e7ecf1) ); background-image: -moz-linear-gradient(#f5faff, #e7ecf1); background-image: -webkit-linear-gradient(#f5faff, #e7ecf1); background-image: linear-gradient(#f5faff, #e7ecf1); background-color: #e7ecf1; } .syno-ux-datefield-menu .year-btn-ct, .syno-ux-datefield-menu .month-btn-ct { display: inline-block; } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn { height: 24px; border: none; padding: 0px; background: none; } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn .x-btn-arrow, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn .x-btn-arrow { padding-right: 24px; background-position: right 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn .x-btn-arrow, .synohdpack .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn .x-btn-arrow { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn .x-btn-arrow, .synohdpackdebug .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn .x-btn-arrow { background-size: 24px 72px; outline: 1px green dashed; } } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn em button, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn em button { padding: 0px; font-size: 13px; letter-spacing: 0; line-height: 24px; } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn-over .x-btn-arrow, .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn-menu-active .x-btn-arrow, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn-over .x-btn-arrow, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn-menu-active .x-btn-arrow { background-position: right -24px; } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn-over em button, .syno-ux-datefield-menu .year-btn-ct .syno-ux-button.x-btn-menu-active em button, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn-over em button, .syno-ux-datefield-menu .month-btn-ct .syno-ux-button.x-btn-menu-active em button { color: #057feb; } .syno-ux-datefield-menu .year-btn-ct .syno-ux-button { margin-right: 10px !important; } .syno-ux-datefield-menu .clear-btn, .syno-ux-datefield-menu .today-btn { height: 28px; border: none; background: rgba(198, 212, 224, 0.4); border-radius: 100px; } .syno-ux-datefield-menu .clear-btn button.x-btn-text, .syno-ux-datefield-menu .today-btn button.x-btn-text { height: 28px; padding: 0px 14px; } .syno-ux-datefield-menu .timefield-ct { border-top: 1px solid rgba(198, 212, 224, 0.35); padding: 0px 16px 16px 16px; } .syno-ux-timepickerfield .add-time-ct, .syno-ux-timepickerfield .time-ct { margin-top: 8px; } .syno-ux-timepickerfield .x-form-item { margin-bottom: 0; } .syno-ux-timepickerfield .seperator { text-align: center; } .syno-ux-textarea { font-size: 13px; background-color: #fff; border-radius: 4px; } .syno-ux-textarea.x-form-field { padding: 3px 17px 3px 11px; background-image: none; border-color: rgba(198, 212, 224, 0.7); height: 20px; vertical-align: top; } .syno-ux-textarea.syno-ux-textarea-hover { border-color: rgba(124, 138, 152, 0.5); } .syno-ux-textarea.x-form-focus { border-color: #057feb; } .syno-ux-textarea.x-form-invalid { border-color: #e64040; background-color: rgba(230, 64, 64, 0.08); background-image: none; } .syno-ux-textarea.x-item-disabled.x-form-field { color: rgba(65, 75, 85, 0.4); border-color: rgba(198, 212, 224, 0.7); background-color: rgba(198, 212, 224, 0.2); } .syno-ux-form-fleXcroll-wrap { position: relative; display: inline-block; } .syno-ux-form-fleXcroll-wrap .syno-ux-form-fleXcroll-element { position: absolute; right: 0px; top: 0px; width: 10px; } .syno-ux-form-fleXcroll-wrap .syno-ux-form-fleXcroll-element .syno-ux-form-fleXcroll-inner-element { width: 10px; } .syno-ux-form-fleXcroll-wrap .vscroller { margin-left: -11px; } .syno-ux-textarea { line-height: 20px; } .syno-ux-textarea::-webkit-input-placeholder { line-height: 20px; color: rgba(65, 75, 85, 0.4); } .syno-ux-textarea:-moz-placeholder { line-height: 20px; color: rgba(65, 75, 85, 0.4); } .syno-ux-textarea::-moz-placeholder { line-height: 20px; color: rgba(65, 75, 85, 0.4); } .syno-ux-textarea:-ms-input-placeholder { line-height: 20px; color: rgba(65, 75, 85, 0.4); } .x-form-grow-sizer { padding: 2px 0; line-height: 20px; } .syno-textfilter .x-form-field-wrap, .syno-ux-textfilter .x-form-field-wrap { border: 1px solid rgba(198, 212, 224, 0.7); border-radius: 4px; background-color: #fff; background-image: none; } .syno-textfilter .x-form-field-trigger-wrap.x-form-field-wrap, .syno-ux-textfilter .x-form-field-trigger-wrap.x-form-field-wrap { box-shadow: none; } .syno-textfilter .x-form-field-wrap:hover, .syno-ux-textfilter .x-form-field-wrap:hover { border-color: rgba(124, 138, 152, 0.5); } .syno-textfilter .x-trigger-wrap-focus.x-form-field-wrap, .syno-ux-textfilter .x-trigger-wrap-focus.x-form-field-wrap { border-color: #057feb; } .syno-textfilter .x-item-disabled.x-form-field-wrap, .syno-ux-textfilter .x-item-disabled.x-form-field-wrap { color: rgba(65, 75, 85, 0.4); border-color: rgba(198, 212, 224, 0.7); background-color: rgba(198, 212, 224, 0.2); } .syno-textfilter .x-form-field-wrap div, .syno-ux-textfilter .x-form-field-wrap div { background-color: transparent; } .syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text { font-size: 13px; height: 24px !important; padding: 1px 12px 1px 33px; border: none; background-color: transparent; background-position: 5px 1px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-textfilter .x-form-field-wrap .synohdpack .syno-textfilter-text, .synohdpack .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text, .syno-ux-textfilter .x-form-field-wrap .synohdpack .syno-ux-textfilter-text.x-form-text { background-size: 24px 96px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-textfilter .x-form-field-wrap .syno-textfilter-text, .syno-textfilter .x-form-field-wrap .synohdpackdebug .syno-textfilter-text, .synohdpackdebug .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text, .syno-ux-textfilter .x-form-field-wrap .synohdpackdebug .syno-ux-textfilter-text.x-form-text { background-size: 24px 96px; outline: 1px green dashed; } } .syno-textfilter .x-form-field-wrap .x-form-empty-field.syno-textfilter-text, .syno-ux-textfilter .x-form-field-wrap .x-form-empty-field.syno-ux-textfilter-text.x-form-text { color: rgba(65, 75, 85, 0.4); } .syno-textfilter .x-form-field-wrap .syno-textfilter-trigger, .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-trigger { width: 24px; height: 24px; background-position: 0px 0px; background-repeat: no-repeat; right: 0px; margin: 1px 3px; border: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-textfilter .x-form-field-wrap .syno-textfilter-trigger, .syno-textfilter .x-form-field-wrap .synohdpack .syno-textfilter-trigger, .synohdpack .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-trigger, .syno-ux-textfilter .x-form-field-wrap .synohdpack .syno-ux-textfilter-trigger { background-size: 24px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-textfilter .x-form-field-wrap .syno-textfilter-trigger, .syno-textfilter .x-form-field-wrap .synohdpackdebug .syno-textfilter-trigger, .synohdpackdebug .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-trigger, .syno-ux-textfilter .x-form-field-wrap .synohdpackdebug .syno-ux-textfilter-trigger { background-size: 24px 24px; outline: 1px green dashed; } } .syno-textfilter .x-form-field-wrap .x-form-trigger-over.syno-textfilter-trigger, .syno-ux-textfilter .x-form-field-wrap .x-form-trigger-over.syno-ux-textfilter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .syno-textfilter .x-form-field-wrap .x-form-trigger-click.syno-textfilter-trigger, .syno-ux-textfilter .x-form-field-wrap .x-form-trigger-click.syno-ux-textfilter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .syno-textfilter .x-form-field-wrap.x-item-disabled .syno-textfilter-text, .syno-textfilter .x-form-field-wrap.x-item-disabled .syno-textfilter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-textfilter .x-form-field-wrap .syno-ux-textfilter-text.x-form-text.syno-ux-textfilter-filter-icon { background-position: 5px -23px; } .syno-ux-textfilter .x-form-field-wrap.x-item-disabled .x-form-field-wrap-center-img { background-position: 0 -71px; } .syno-ux-textfilter .x-form-field-wrap.x-item-disabled .x-form-field-wrap-center-img:hover { background-position: 0 -71px; } .syno-ux-textfilter .x-form-field-wrap.x-item-disabled .syno-ux-textfilter-text, .syno-ux-textfilter .x-form-field-wrap.x-item-disabled .syno-ux-textfilter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap { background-image: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap { background-image: none; } } .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .syno-ux-textfilter-text.x-form-text { background-image: none; padding-left: 0; margin-left: 2px; display: block; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .syno-ux-textfilter-text.x-form-text { background-image: none; } } .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .x-form-field-wrap-center-img { width: 32px; height: 24px; background-position: 0px 1px; background-repeat: no-repeat; padding-top: 1px; padding-bottom: 1px; display: table-cell; cursor: pointer; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .x-form-field-wrap-center-img { background-size: 32px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .x-form-field-wrap-center-img { background-size: 32px 72px; outline: 1px green dashed; } } .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .x-form-field-wrap-center-img:hover { background-position: 0px -23px; } .syno-ux-textfilter.syno-ux-searchfield .x-form-field-wrap .x-form-field-wrap-center-img.active { background-position: 0px -47px; } .syno-search-condition-focus-el { position: absolute; width: 2px; height: 2px; left: 0px; top: 0px; background-color: transparent; border: none; } input[type="file"]::-webkit-file-upload-button { cursor: pointer; } .syno-ux-filebutton { filter: Alpha(opacity=0); opacity: 0; position: absolute !important; padding: 0px; border: none; z-index: 10; pointer-events: none; } .ext-ie .syno-ux-filebutton { font-size: 1000px; } .syno-ux-filebutton.x-item-disabled { filter: Alpha(opacity=0) !important; opacity: 0 !important; } .syno-ux-filebutton-btn-wrap { display: inline-block; } .syno-ux-filebutton-txt { vertical-align: top; } .x-form-item .x-form-element .syno-ux-filebutton-btn-wrap .syno-ux-button { margin-bottom: 0px; } .syno-ux-formpanel .x-panel-body { padding: 8px 8px 0 8px; } .syno-ux-formpanel .x-panel-tbar .x-toolbar { background-image: none; background-color: transparent; border-bottom: 1px solid rgba(198, 212, 224, 0.4); } .syno-ux-formpanel .x-panel-btns td.x-toolbar-cell { padding-right: 8px; padding-left: 0px; } .syno-ux-formpanel .x-form-element { font-size: 0; } .syno-ux-formpanel .syno-ux-item-label.x-item-disabled { color: rgba(65, 75, 85, 0.4); } .syno-ux-tab-panel .syno-ux-formpanel { background-color: white; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text { padding-bottom: 0; } .syno-ux-tab-panel .x-tab-strip-wrap { position: relative; } .syno-ux-tab-panel .x-tab-strip-wrap::before { content: ""; width: 100%; height: 0; position: absolute; bottom: 0px; border-bottom: 1px solid rgba(198, 212, 224, 0.7); } .syno-ux-tab-panel .x-tab-strip-top { position: relative; border: none; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-left { padding: 0; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-right { padding: 0; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-text { height: 22px; line-height: 22px; font-size: 12px; padding: 0 8px; } .syno-ux-tab-panel .x-tab-strip-top li { display: flex; justify-content: center; height: 30px; box-sizing: border-box; border-bottom: 0px; margin: 0 8px 0 0; } .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active::before { content: ""; position: absolute; background-color: #fff; transform: rotate(45deg); width: 9px; height: 9px; border-width: 1px 0 0 1px; border-style: solid; border-color: rgba(198, 212, 224, 0.7); bottom: -5px; } .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active::after { content: ""; } .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active .x-tab-strip-text { padding: 0 8px; font-size: 12px; color: #057feb; } .syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active.x-tab-strip-closable .x-tab-strip-text { padding: 0 0 0 8px; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-right, .syno-ux-tab-panel .x-tab-strip-top .x-tab-left, .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-inner { background-image: none; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable { width: auto !important; text-align: left !important; padding: 0 34px 0 0; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable .x-tab-strip-text { width: auto !important; padding: 0 0 0 8px; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable.x-tab-strip-over a.x-tab-strip-close { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; background-position: 0 -1px; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable a.x-tab-strip-close { top: 0px; right: 4px; width: 24px; height: 22px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; background-position: 0 -1px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable a.x-tab-strip-close { background-size: 24px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable a.x-tab-strip-close { background-size: 24px 24px; outline: 1px green dashed; } } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable a.x-tab-strip-close:active { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; background-position: 0 -1px; } .syno-ux-tab-panel .x-tab-strip-top .x-tab-strip-closable.x-tab-strip-active { padding: 0 34px 0 0; } .syno-ux-tab-panel .x-tab-strip-spacer { display: none; } .syno-ux-tab-panel .x-tab-panel-body { background-color: transparent; border: none; } .syno-ux-gridpanel.syno-ux-horizontal-grid .hscrollerbar { visibility: hidden !important; } .syno-ux-fixcol-grid .x-panel-tbar .x-toolbar-layout-ct, .syno-ux-fixcol-grid .x-panel-tbar-noheader .x-toolbar-layout-ct, .syno-ux-fixcol-grid .x-panel-tbar-noborder .x-toolbar-layout-ct { padding: 0px 0px 8px 0px; padding-bottom: 8px; background-image: none; background-color: transparent; border: 0px; } .syno-ux-fixcol-grid .syno-ux-fixcol-grid-west .x-grid3-header-offset { padding-left: 0; } .syno-ux-fixcol-grid .syno-ux-fixcol-grid-west .x-panel-bwrap .x-panel-body .x-grid3-scroller { padding-right: 0px; } .syno-ux-fixcol-grid .syno-ux-fixcol-grid-west .vscrollerbar { visibility: hidden !important; } .syno-ux-fixcol-grid .x-layout-split-west { margin-left: -1px; width: 1px; } .syno-ux-fixcol-grid .syno-ux-horizontal-grid { margin-left: -1px; } .syno-ux-editorgridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-triggerfield.x-grid3-cell-last-visible .x-grid3-cell-inner { padding-left: 12px; padding-top: 1px; padding-bottom: 1px; line-height: 24px; margin-left: 8px; margin-right: 8px; } .syno-ux-editorgridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell .x-grid3-cell-inner, .syno-ux-editorgridpanel .x-grid3-row .syno-ux-textfield.x-grid3-cell-last-visible .x-grid3-cell-inner { padding-left: 12px; padding-top: 1px; padding-right: 12px; padding-bottom: 1px; line-height: 24px; margin-left: 8px; margin-right: 8px; } .syno-ux-grid-enable-column-checked { height: 20px; margin-top: 4px; background-repeat: no-repeat; background-position: center -60px; } .syno-ux-grid-enable-column-checked:hover { background-position: center -80px; } .syno-ux-grid-enable-column-unchecked { height: 20px; margin-top: 4px; background-repeat: no-repeat; background-position: center 0px; } .syno-ux-grid-enable-column-unchecked:hover { background-position: center -20px; } .syno-ux-grid-enable-column-grayed { height: 20px; margin-top: 4px; background-repeat: no-repeat; background-position: center -120px; } .syno-ux-grid-enable-column-grayed:hover { background-position: center -140px; } .syno-ux-checkbox-icon:hover { background-position: 0px -20px; } .syno-ux-checkbox-icon:hover.syno-ux-cb-disabled { background-position: 0px -40px; } .syno-ux-checkbox-icon:hover.syno-ux-cb-checked { background-position: 0px -80px; } .syno-ux-checkbox-icon:hover.syno-ux-cb-checked.syno-ux-cb-disabled { background-position: 0px -100px; } .syno-ux-checkbox-icon:hover.syno-ux-cb-grayed { background-position: 0px -140px; } .syno-ux-checkbox-icon:hover.syno-ux-cb-grayed.syno-ux-cb-disabled { background-position: 0px -160px; } .syno-ux-grid-enable-column-disabled, .syno-ux-grid-enable-column-disabled-unchecked { height: 20px; margin-top: 4px; background-repeat: no-repeat; background-position: center -40px; } .syno-ux-grid-enable-column-disabled-checked { height: 20px; margin-top: 4px; background-repeat: no-repeat; background-position: center -100px; } .x-panel-noborder .x-panel-bbar-noborder.x-panel-bbar .syno-ux-pagingtoolbar { border-top-color: rgba(198, 212, 224, 0.4); border-bottom: 1px solid rgba(198, 212, 224, 0.7); padding: 0px; height: 28px; } .x-panel-noborder .x-panel-bbar-noborder.x-panel-bbar .syno-ux-pagingtoolbar .x-toolbar-cell .x-btn { margin: 0px; } .syno-ux-pagingtoolbar { background-color: transparent; background-image: none; line-height: 24px; } .syno-ux-pagingtoolbar .x-toolbar-right, .syno-ux-pagingtoolbar .x-toolbar-left { padding: 2px 0; } .syno-ux-pagingtoolbar.small-vertical-padding .x-toolbar-right { padding: 1px 0; } .syno-ux-pagingtoolbar.small-vertical-padding .x-toolbar-right .syno-ux-combobox-trigger { background-position: 0 0; } .syno-ux-pagingtoolbar .x-toolbar-right .x-toolbar-cell .xtb-text { padding: 0px 12px 0px 2px; font-size: 13px; height: 24px; line-height: 24px; } .syno-ux-pagingtoolbar .x-toolbar-right .x-toolbar-cell .xtb-text.syno-paging-display-text { padding-left: 12px; } .syno-ux-pagingtoolbar .xtb-sep { height: 20px; background-image: none; border-left: 1px solid rgba(198, 212, 224, 0.7); width: 0px; margin: 0px; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-tc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-bc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-tc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-bc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-tc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-bc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-tc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-bc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-br { display: none; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-br, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-tl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-tr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-bl, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-br { display: none; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-mc { line-height: 0; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-text, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-text, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-text, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-text { margin-right: 4px; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-text.x-tbar-page-first, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-text.x-tbar-page-first, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-text.x-tbar-page-first, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-text.x-tbar-page-first { margin-left: 8px; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-text.x-tbar-loading, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-btn-text.x-tbar-loading, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-text.x-tbar-loading, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-btn-text.x-tbar-loading { margin-right: 8px; margin-left: 4px; } .syno-ux-pagingtoolbar .x-btn-icon button, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small button, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled button, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small button { outline: none; min-width: 24px; width: auto; height: 24px; } .syno-ux-pagingtoolbar .x-btn-icon button.x-tbar-loading-process, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small button.x-tbar-loading-process, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled button.x-tbar-loading-process, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small button.x-tbar-loading-process { background-size: 16px 16px !important; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon button.x-tbar-loading-process, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small button.x-tbar-loading-process, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled button.x-tbar-loading-process, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small button.x-tbar-loading-process { background-size: 20px 20px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon button.x-tbar-loading-process, .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small button.x-tbar-loading-process, .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled button.x-tbar-loading-process, .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small button.x-tbar-loading-process { background-size: 20px 20px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn { color: #414b55; } .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus { padding: 0 3px; background-image: none !important; font-size: 13px; border-radius: 3px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus { background-image: none !important; } } .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-mc, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-ml, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-mr, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-mc { background-image: none !important; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .syno-ux-page-btn-focus .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn .x-btn-mc, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-ml, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-mr, .synohdpack .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .syno-ux-page-btn-focus .x-btn-mc { background-image: none !important; } } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .syno-ux-page-btn { background-color: rgba(198, 212, 224, 0.4); } .syno-ux-pagingtoolbar .x-btn-icon .syno-ux-page-btn-focus, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .syno-ux-page-btn-focus { background-color: #057feb; color: #ffffff; } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-first { background-position: 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-first { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-first { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-prev { background-position: 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-prev { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-prev { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-next { background-position: -24px 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-next { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-next { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-last { background-position: -24px 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-last { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-page-last { background-size: 48px 72px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-loading { background-position: 0 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-loading { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-pagingtoolbar .x-btn-icon .x-btn-small .x-tbar-loading { background-size: 24px 72px; outline: 1px green dashed; } } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .x-btn-small .x-tbar-page-first, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-click .x-btn-small .x-tbar-page-first { background-position: 0 -24px; } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .x-btn-small .x-tbar-page-prev, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-click .x-btn-small .x-tbar-page-prev { background-position: 0 -24px; } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .x-btn-small .x-tbar-page-next, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-click .x-btn-small .x-tbar-page-next { background-position: -24px -24px; } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .x-btn-small .x-tbar-page-last, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-click .x-btn-small .x-tbar-page-last { background-position: -24px -24px; } .syno-ux-pagingtoolbar .x-btn-icon.x-btn-over .x-btn-small .x-tbar-loading, .syno-ux-pagingtoolbar .x-btn-icon.x-btn-click .x-btn-small .x-tbar-loading { background-position: 0 -24px; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn:hover, .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .syno-ux-page-btn-focus { background-color: transparent; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-tbar-page-first { background-position: 0 -48px; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-tbar-page-prev { background-position: 0 -48px; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-tbar-page-next { background-position: -24px -48px; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-tbar-page-last { background-position: -24px -48px; } .syno-ux-pagingtoolbar .x-btn-icon.x-item-disabled .x-btn-small .x-tbar-loading { background-position: 0 -48px; } .syno-ux-pagingtoolbar .x-toolbar-cell .syno-ux-combobox { padding-top: 2px; padding-bottom: 2px; } .syno-ux-pagingtoolbar .x-toolbar-cell .syno-ux-combobox-trigger { height: 24px; } .syno-ux-toolbar { background-color: transparent; background-image: none; } .syno-ux-expandable-listview .item-summary .item-toggle { display: inline-block; position: absolute; top: 0px; right: 0px; width: 52px; height: 58px; } .syno-ux-expandable-listview .item-summary .item-toggle .item-toggle-img { position: relative; left: 12px; top: 17px; width: 24px; height: 24px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-expandable-listview .item-summary .item-toggle .item-toggle-img, .syno-ux-expandable-listview .item-summary .item-toggle .synohdpack .item-toggle-img { background-size: 48px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-expandable-listview .item-summary .item-toggle .item-toggle-img, .syno-ux-expandable-listview .item-summary .item-toggle .synohdpackdebug .item-toggle-img { background-size: 48px 72px; outline: 1px green dashed; } } .syno-dataview .contentwrapper.is-empty { height: 100%; } .syno-dataview .empty-text-wrap { position: absolute; top: 0; bottom: 0; left: 10px; right: 10px; } .syno-dataview .empty-text-wrap:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 0px; } .syno-dataview .empty-text-inner-wrap { display: inline-block; width: 100%; vertical-align: middle; } .syno-dataview .empty-text-icon { margin-left: auto; margin-right: auto; margin-bottom: 20px; width: 120px; height: 120px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-dataview .empty-text-icon { background-size: 120px 120px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-dataview .empty-text-icon { background-size: 120px 120px; outline: 1px green dashed; } } .syno-dataview .empty-text { margin-left: auto; margin-right: auto; width: 330px; text-align: center; line-height: 20px; font-size: 13px; color: rgba(65, 75, 85, 0.6); } .syno-dataview .empty-text-btn { margin-left: auto; margin-right: auto; text-align: center; margin-top: 16px; } .syno-dataview .empty-text-btn .syno-ux-button { margin-right: 0px !important; min-width: 80px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap { padding: 0px; border: 1px solid #d4eaf9; border-top: 0px; margin-bottom: 10px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap.item-over, .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap.item-selected { background-color: #f2faff; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools { padding-left: 16px; background-color: #d4eaf9; height: 28px; border: 0px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-edit-img { width: 24px; height: 24px; margin-top: 2px; margin-right: 10px; float: left; background-repeat: no-repeat; cursor: pointer; background-position: 0 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-edit-img { background-size: 24px 96px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-edit-img { background-size: 24px 96px; outline: 1px green dashed; } } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-edit-img:hover { background-position: 0 -24px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-edit-img:active { background-position: 0 -48px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-remove-img { width: 24px; height: 24px; margin-top: 2px; margin-right: 10px; float: left; background-repeat: no-repeat; cursor: pointer; background-position: 0 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-remove-img { background-size: 24px 96px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-remove-img { background-size: 24px 96px; outline: 1px green dashed; } } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-remove-img:hover { background-position: 0 -24px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-tools .item-remove-img:active { background-position: 0 -48px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-summary, .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-detail { padding-left: 16px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-summary .item-toggle { top: 28px; } .syno-ux-operatable-listview.syno-ux-expandable-listview .item-wrap .item-summary .item-toggle .item-toggle-img { right: 6px; top: 8px; } .syno-ux-expandable-listview .item-wrap { position: relative; padding-left: 64px; border-bottom: 1px solid rgba(198, 212, 224, 0.4); } .syno-ux-expandable-listview .item-wrap.item-over { background-color: rgba(5, 127, 235, 0.04); } .syno-ux-expandable-listview .item-wrap.item-selected { background-color: rgba(5, 127, 235, 0.1); } .syno-ux-expandable-listview .item-wrap.item-selected .item-toggle .item-toggle-img { background-position: 0 -48px; } .syno-ux-expandable-listview .item-wrap.item-selected .item-toggle.item-toggle-expanded .item-toggle-img { background-position: -24px -48px; } .syno-ux-expandable-listview .item-summary { height: 58px; } .syno-ux-expandable-listview .item-summary .item-icon { display: inline-block; width: 32px; height: 32px; position: absolute; top: 13px; left: 16px; } .syno-ux-expandable-listview .item-summary .item-toggle .item-toggle-img { cursor: pointer; background-position: 0 0; } .syno-ux-expandable-listview .item-summary .item-toggle .item-toggle-img:hover { background-position: 0 -48px; } .syno-ux-expandable-listview .item-summary .item-toggle.item-toggle-expanded .item-toggle-img { background-position: -24px 0px; } .syno-ux-expandable-listview .item-summary .item-toggle.item-toggle-expanded .item-toggle-img:hover { background-position: -24px -48px; } .syno-ux-expandable-listview .item-summary .item-title { display: inline-block; font-size: 13px; line-height: 20px; padding-top: 8px; } .syno-ux-expandable-listview .item-summary .item-status { font-size: 13px; color: rgba(65, 75, 85, 0.6); line-height: 20px; margin-top: 2px; } .syno-ux-expandable-listview .item-detail { padding: 0px 20px 14px 0; } .syno-ux-expandable-add { -moz-animation: expand 0.5s; -webkit-animation: expand 0.5s; animation: expand 0.5s; -moz-animation-fill-mode: forward; -webkit-animation-fill-mode: forward; animation-fill-mode: forward; overflow: hidden; } .syno-ux-expandable-remove { -moz-animation: fold 0.5s; -webkit-animation: fold 0.5s; animation: fold 0.5s; -moz-animation-fill-mode: forward; -webkit-animation-fill-mode: forward; animation-fill-mode: forward; overflow: hidden; height: 0; border: 0; } @-moz-keyframes expand { 0% { height: 0; } 100% { height: 50px; } } @-webkit-keyframes expand { 0% { height: 0; } 100% { height: 50px; } } @keyframes expand { 0% { height: 0; } 100% { height: 50px; } } @-moz-keyframes fold { 0% { height: 50px; } 100% { height: 0; } } @-webkit-keyframes fold { 0% { height: 50px; } 100% { height: 0; } } @keyframes fold { 0% { height: 50px; } 100% { height: 0; } } .ux-float-layout-ct { position: relative; } .ux-float-layout-ct .ux-float-layout-sizer { background: transparent none; border: 0 none; padding: 0; margin: 0; width: 0; } .ux-float-layout-ct .x-box-item { position: absolute; } .ux-float-layout-ct.ux-float-layout-ct-animate .x-box-item { -moz-transition-property: top, left; -o-transition-property: top, left; -webkit-transition-property: top, left; transition-property: top, left; -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.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .syno-ux-treepanel { overflow-x: hidden; } .syno-ux-treepanel .x-border-panel { background-color: transparent; } .syno-ux-treepanel .x-tree-root-ct { width: auto !important; overflow: hidden; } .syno-ux-treepanel .x-tree-node-el { display: table; width: 100%; line-height: 28px; height: 28px; overflow: hidden; } .syno-ux-treepanel .x-tree-node-indent { padding-left: 2px; padding-right: 2px; } .syno-ux-treepanel .x-tree-node-indent .x-tree-elbow-line { width: 14px; } .syno-ux-treepanel .x-tree-node { text-overflow: ellipsis; white-space: nowrap; } .syno-ux-treepanel .x-tree-node a span { font-size: 13px; padding-left: 0; padding-right: 6px; } .syno-ux-treepanel .x-tree-node .x-tree-ec-icon { height: 20px; width: 20px; margin-top: 4px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-treepanel .x-tree-node .x-tree-ec-icon { background-size: 20px 40px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-treepanel .x-tree-node .x-tree-ec-icon { background-size: 20px 40px; outline: 1px green dashed; } } .syno-ux-treepanel .x-tree-node .x-tree-elbow, .syno-ux-treepanel .x-tree-node .x-tree-elbow-end { visibility: hidden; } .syno-ux-treepanel .x-tree-node .x-tree-elbow-minus, .syno-ux-treepanel .x-tree-node .x-tree-elbow-end-minus { background-position: 0px 0; } .syno-ux-treepanel .x-tree-node .x-tree-elbow-plus, .syno-ux-treepanel .x-tree-node .x-tree-elbow-end-plus { background-position: 0 -20px; } .syno-ux-treepanel .x-tree-node .x-tree-node-over { background-color: rgba(5, 127, 235, 0.04); border-radius: 5px; } .syno-ux-treepanel .x-tree-node .x-tree-node-over .syno-ux-cb-grayed { background-position: 0 -140px; } .syno-ux-treepanel .x-tree-node .x-tree-node-over .syno-ux-cb-disabled.syno-ux-cb-checked { background-position: 0 -100px; } .syno-ux-treepanel .x-tree-node .x-tree-node-over .x-tree-elbow, .syno-ux-treepanel .x-tree-node .x-tree-node-over .x-tree-elbow-end { visibility: hidden; } .syno-ux-treepanel .x-tree-node .x-tree-selected { background-color: rgba(5, 127, 235, 0.1); border-radius: 5px; } .syno-ux-treepanel .x-tree-node .x-tree-selected .x-tree-elbow, .syno-ux-treepanel .x-tree-node .x-tree-selected .x-tree-elbow-end { visibility: hidden; } .syno-ux-treepanel .x-tree-node .x-tree-node-disabled .x-tree-elbow, .syno-ux-treepanel .x-tree-node .x-tree-node-disabled .x-tree-elbow-end { visibility: hidden; } .syno-ux-treepanel .x-checkbox { height: 20px; width: 20px; background-repeat: no-repeat; background-position: 0px 0; margin-right: 4px !important; vertical-align: top; position: relative; top: 4px; } .syno-ux-treepanel .x-checkbox:hover { background-position: 0 -20px; } .syno-ux-treepanel .x-item-disabled .x-checkbox { background-position: 0 -40px; } .syno-ux-treepanel .x-checkbox-checked .x-checkbox { background-position: 0 -60px; } .syno-ux-treepanel .x-checkbox-checked .x-checkbox:hover { background-position: 0 -80px; } .syno-ux-treepanel .x-item-disabled .x-checkbox-checked .x-checkbox { background-position: 0 -100px; } .syno-ux-treepanel .x-checkbox-grayed .x-checkbox { background-position: 0 -120px; } .syno-ux-treepanel .x-checkbox-grayed .x-checkbox:hover { background-position: 0 -140px; } .syno-ux-treepanel .x-item-disabled .x-checkbox-grayed .x-checkbox { background-position: 0 -160px; } .syno-ux-treepanel.syno-ux-treepanel-gradient .x-panel-bwrap:before { position: absolute; display: block; height: 6px; content: ""; width: 100%; z-index: 99; } .syno-ux-treepanel.syno-ux-treepanel-gradient .x-panel-bwrap:after { position: absolute; display: block; height: 6px; content: ""; width: 100%; z-index: 99; margin-top: -6px; } .syno-ux-treepanel.syno-ux-treepanel-gradient.scroll-at-top .x-panel-bwrap:before, .syno-ux-treepanel.syno-ux-treepanel-gradient.scroll-at-bottom .x-panel-bwrap:after { display: none; } .x-tip-invalid { border: 1px solid transparent; border-top: 1px solid #ff9191; border-radius: 4px; background-color: rgba(250, 75, 75, 0.9); } .x-tip-invalid .x-tip-invalid-ml, .x-tip-invalid .x-tip-invalid-mr, .x-tip-invalid .x-tip-invalid-mc, .x-tip-invalid .x-tip-invalid-tl, .x-tip-invalid .x-tip-invalid-tr, .x-tip-invalid .x-tip-invalid-tc, .x-tip-invalid .x-tip-invalid-bl, .x-tip-invalid .x-tip-invalid-br, .x-tip-invalid .x-tip-invalid-bc { padding: 0px; background-image: none; background-color: transparent; } .x-tip-invalid .x-tip-invalid-bwrap { padding: 2px 11px; } .x-tip-invalid .x-tip-invalid-body, .x-tip-invalid .x-tip-invalid-body span, .x-tip-invalid .x-tip-invalid-body div { font-size: 13px !important; color: #fff !important; line-height: 20px; } .x-tip-invalid::before { content: ""; position: absolute; width: 11px; height: 100%; top: -1px; left: -1px; border-width: 1px 0 1px 1px; border-style: solid; border-color: #ff9191; border-radius: 4px 0 0 4px; opacity: 1; box-shadow: -3px 2px 4px 0 rgba(0, 0, 0, 0.2); } .x-tip-invalid::after { content: ""; position: absolute; width: calc(100% - 21px); height: 100%; top: -1px; right: -1px; border-width: 1px 1px 1px 0px; border-style: solid; border-color: #ff9191; border-radius: 0px 4px 4px 0px; opacity: 1; box-shadow: 3.4px 3px 5px 0px rgba(0, 0, 0, 0.2); } .x-tip-invalid .x-tip-invalid-speech-bubble { display: block; width: 27px; height: 12px; position: absolute; float: left; clear: left; overflow: hidden; } .x-tip-invalid .x-tip-invalid-speech-bubble .x-tip-invalid-speech-bubble-border { top: -5px; left: 11px; position: absolute; background-color: transparent; transform: rotate(45deg); width: 9px; height: 9px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #ff9191; opacity: 1; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.05), 3px 4px 2px 0px rgba(0, 0, 0, 0.05), 3px 0px 2px 2px rgba(0, 0, 0, 0.05); } .x-tip-invalid .x-tip-invalid-speech-bubble .x-tip-invalid-speech-bubble-arrow { top: 1px; left: 10px; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0px 6px; border-color: #fa4b4b transparent transparent transparent; opacity: 0.9; } .ext-gecko .x-window-body .x-form-item { overflow: hidden; } .ext-ie .x-toolbar .x-toolbar-cell .x-form-field-wrap { height: auto; } .ext-ie .x-toolbar .x-toolbar-cell .x-form-field-wrap .syno-textfilter-text, .ext-ie .x-toolbar .x-toolbar-cell .x-form-field-wrap .syno-ux-textfilter-text { line-height: 24px; padding-top: 0px; padding-bottom: 0px; } .selectabletext { -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } input[type="text"][readonly].selectabletext, input[type="textarea"][readonly].selectabletext, input[type="password"][readonly].selectabletext { -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } .x-statusbar .syno-ux-statusbar-loading, .x-statusbar .syno-ux-statusbar-success, .x-statusbar .syno-ux-statusbar-error { display: table-cell; vertical-align: middle; white-space: normal; word-break: break-all; margin-left: 2px; height: 24px; line-height: 24px; font-size: 13px; padding-left: 28px; padding-right: 6px; } .x-statusbar .x-status-text { position: relative; } .x-statusbar .syno-ux-statusbar-loading { background-position: 0 0; background-repeat: no-repeat; background-image: none; } .x-statusbar .syno-ux-statusbar-loading .x-loading-wrap { left: 0; top: 0; } .x-statusbar .syno-ux-statusbar-success { background-position: 0 0; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .x-statusbar .syno-ux-statusbar-success { background-size: 24px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .x-statusbar .syno-ux-statusbar-success { background-size: 24px 48px; outline: 1px green dashed; } } .x-statusbar .syno-ux-statusbar-error { background-position: 0 -24px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .x-statusbar .syno-ux-statusbar-error { background-size: 24px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .x-statusbar .syno-ux-statusbar-error { background-size: 24px 48px; outline: 1px green dashed; } } .x-statusbar .x-status-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .syno-ux-superboxselect { position: relative; height: auto !important; margin: 0px; overflow: hidden; padding: 0px; display: block; outline: 0px !important; border-right: 1px solid rgba(198, 212, 224, 0.7); } .syno-ux-superboxselect.x-form-text { border-radius: 4px; } .x-item-disabled .syno-ux-superboxselect.x-form-focus { border-right: 1px solid rgba(198, 212, 224, 0.7); } .syno-ux-superboxselect.x-form-invalid { border-right: 1px solid #e64040; background-color: rgba(230, 64, 64, 0.08); } .x-item-disabled .syno-ux-superboxselect.x-form-text { background-color: rgba(198, 212, 224, 0.2); border-right: 1px solid rgba(198, 212, 224, 0.7); } .syno-ux-superboxselect input[disabled] { background-color: transparent; } .syno-ux-superboxselect ul { overflow: hidden; cursor: text; } .syno-ux-superboxselect .vscrollerbar { width: 6px; margin-left: -8px; } .syno-ux-superboxselect-display-btns.has-clear ul, .syno-ux-superboxselect-display-btns.has-expand ul { padding-right: 24px; } .syno-ux-superboxselect-display-btns.has-clear.has-expand ul { padding-right: 50px; } .syno-ux-superboxselect-display-btns ul { padding-right: 0px; position: relative; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns { position: absolute; right: 0px; top: 0; height: 26px; width: 50px; overflow: hidden; padding: 0px; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns div { float: left; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear { width: 24px; height: 22px; position: absolute; top: 2px; background-repeat: no-repeat; background-attachment: scroll; background-position: 0px -1px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear { background-size: 24px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear { background-size: 24px 24px; outline: 1px green dashed; } } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear.syno-ux-superboxselect-btn-over { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear.syno-ux-superboxselect-btn-over.syno-ux-superboxselect-btn-click { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear.syno-ux-superboxselect-btn-click { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } .x-item-disabled .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-clear { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand { cursor: pointer; width: 26px; height: 22px; right: 0; top: 3px; position: absolute; background-repeat: no-repeat; background-attachment: scroll; background-position: 0px -2px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand { background-size: 24px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand { background-size: 24px 72px; outline: 1px green dashed; } } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand.syno-ux-superboxselect-btn-over { background-position: 0 -26px; } .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand.syno-ux-superboxselect-btn-click { background-position: 0px -26px; } .x-item-disabled .syno-ux-superboxselect-display-btns .syno-ux-superboxselect-btns .syno-ux-superboxselect-btn-expand { background-position: 0px -50px; } .syno-ux-superboxselect-btn-hide { display: none; } .syno-ux-superboxselect li { float: left; margin: 1px 0 0 2px; padding: 0; overflow: hidden; text-overflow: ellipsis; } .syno-ux-superboxselect-stacked li { float: none !important; } .syno-ux-superboxselect-input { line-height: 25px; } .syno-ux-superboxselect-input input { height: 100%; border: none; outline: 0px; margin-top: 3px; margin-bottom: 3px; background-color: transparent; margin-left: 9px; } .syno-ux-superboxselect-input input.has-value { margin-left: 0px; } body.ext-ie .x-superboxselect-input input { background: none; border: none; margin-top: 3px; } .syno-ux-superboxselect-item { position: relative; border-radius: 3px; border-width: 0px; background-color: rgba(5, 127, 235, 0.1); padding: 2px 30px 2px 12px !important; font-size: 13px; line-height: 20px; } .syno-ux-superboxselect-item.syno-ux-superboxselect-item-hover { background-color: rgba(5, 127, 235, 0.2); } .syno-ux-superboxselect-item.syno-ux-superboxselect-item-focus, .syno-ux-superboxselect-item:active, .syno-ux-superboxselect-item:focus { background-color: #057feb; color: #fff; } .syno-ux-superboxselect-item.syno-ux-superboxselect-item-focus .syno-ux-superboxselect-item-close, .syno-ux-superboxselect-item:active .syno-ux-superboxselect-item-close, .syno-ux-superboxselect-item:focus .syno-ux-superboxselect-item-close { background-position: left -60px; } .syno-ux-superboxselect-item.syno-ux-superboxselect-item-focus .syno-ux-superboxselect-item-close:hover, .syno-ux-superboxselect-item:active .syno-ux-superboxselect-item-close:hover, .syno-ux-superboxselect-item:focus .syno-ux-superboxselect-item-close:hover { background-position: left -80px; } .syno-ux-superboxselect-item.syno-ux-superboxselect-item-focus .syno-ux-superboxselect-item-close:active, .syno-ux-superboxselect-item:active .syno-ux-superboxselect-item-close:active, .syno-ux-superboxselect-item:focus .syno-ux-superboxselect-item-close:active { background-position: left -100px; } .syno-ux-superboxselect-item.x-item-disabled { color: rgba(65, 75, 85, 0.4); } .syno-ux-superboxselect-item-close { background-repeat: no-repeat; background-attachment: scroll; background-position: left 0px; border: none; font-size: 1px; height: 20px; padding: 0; position: absolute; right: 4px; top: 2px; width: 20px; display: block; cursor: pointer; background-color: transparent; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-superboxselect-item-close { background-size: 20px 120px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-superboxselect-item-close { background-size: 20px 120px; outline: 1px green dashed; } } .syno-ux-superboxselect-item-close:hover { background-position: left -20px; } .syno-ux-superboxselect-item-close:active { background-position: left -40px; } .syno-gridtree.syno-ux-treepanel div.x-tree-node-el { display: block; } .syno-gridtree .syno-gridtree-col { border: none; } .syno-gridtree .syno-gridtree-icons { float: left; } .syno-gridtree .syno-gridtree-icons .x-tree-elbow-plus, .syno-gridtree .syno-gridtree-icons .x-tree-elbow-minus, .syno-gridtree .syno-gridtree-icons .x-tree-elbow-end-plus, .syno-gridtree .syno-gridtree-icons .x-tree-elbow-end-minus { visibility: visible; } .syno-gridtree .syno-gridtree-static .x-tree-ec-icon { display: none; } .syno-gridtree .syno-gridtree-static .x-tree-node-el { cursor: default; } .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-textfield::before, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-textfield::before { display: none; } .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-collasped .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner { background-color: transparent; } .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-textfield::before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield::before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-textfield::before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield:before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield::before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield:after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield::after, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield:before, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield::before { display: none; } .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-collasped.x-grid3-row-over .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-collasped.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded.x-grid3-row-over .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-triggerfield .x-grid3-cell-inner, .syno-gridtree .x-tree-node-expanded.x-grid3-row-selected .x-grid3-cell.syno-ux-textfield .x-grid3-cell-inner { background-color: transparent; } .syno-gridtree .no-node-icon .x-tree-node-leaf .x-tree-node-icon, .syno-gridtree .no-node-icon .x-tree-node-collapsed .x-tree-node-icon, .syno-gridtree .no-node-icon .x-tree-node-expanded .x-tree-node-icon { display: none; } .syno-gridtree .syno-ux-gridpanel-empty-hint { color: transparent !important; position: absolute; width: 1px; height: 1px; } .ext-ie8 .syno-gridtree .syno-ux-gridpanel-empty-hint { display: none; } .syno-ux-scheduletable .schedule-table td.schedule-hour-td, .syno-ux-scheduletable .schedule-table td.schedule-day-td { background-color: rgba(198, 212, 224, 0.08); color: #414b55; line-height: 24px; text-align: center; cursor: pointer; } .syno-ux-scheduletable .schedule-table-ct { display: inline-block; position: relative; border-radius: 4px; overflow: hidden; } .syno-ux-scheduletable .schedule-table { border-collapse: collapse; } .syno-ux-scheduletable .schedule-table:before, .syno-ux-scheduletable .schedule-table::before { content: ""; border: 1px solid rgba(198, 212, 224, 0.7); border-radius: 4px; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; } .syno-ux-scheduletable .schedule-table td { height: 24px; width: 24px; border: 1px solid #e6ecf2; } .syno-ux-scheduletable .schedule-table td.schedule-select-all-td { width: 42px !important; vertical-align: bottom; background-color: rgba(198, 212, 224, 0.08); } .syno-ux-scheduletable .schedule-table td.schedule-select-all-td.schedule-select-all-td-over { background-color: rgba(5, 127, 235, 0.06); } .syno-ux-scheduletable .schedule-table td.schedule-select-all-td.schedule-select-all-td-over .select-all-triangle { border-bottom: 8px solid rgba(5, 127, 235, 0.8); } .syno-ux-scheduletable .schedule-table td.schedule-select-all-td .select-all-triangle { width: 0px; height: 0px; float: right; border-left: 8px solid transparent; border-bottom: 8px solid #057feb; margin: 0px 3px 3px 0px; } .syno-ux-scheduletable .schedule-table td.schedule-hour-td { font-size: 12px; } .syno-ux-scheduletable .schedule-table td.schedule-hour-td.schedule-hour-td-over { background-color: rgba(5, 127, 235, 0.06); } .syno-ux-scheduletable .schedule-table td.schedule-day-td { font-size: 12px; width: 42px !important; } .syno-ux-scheduletable .schedule-table td.schedule-day-td.schedule-day-td-over { background-color: rgba(5, 127, 235, 0.06); } .syno-ux-scheduletable .schedule-table td.schedule-td:hover, .syno-ux-scheduletable .schedule-table td.schedule-td.x-view-selected { background-color: rgba(5, 127, 235, 0.06); } .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-full-speed { background-color: #057feb; } .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-full-speed:hover, .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-full-speed.x-view-selected { background-color: rgba(5, 127, 235, 0.8); } .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-alt-speed { background-color: #ffc041; } .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-alt-speed:hover, .syno-ux-scheduletable .schedule-table td.schedule-td.schedule-td-alt-speed.x-view-selected { opacity: 0.8; } .syno-ux-scheduletable .schedule-btn { padding-top: 2px; } .syno-ux-scheduletable .schedule-btn .x-btn-tl, .syno-ux-scheduletable .schedule-btn .x-btn-tc, .syno-ux-scheduletable .schedule-btn .x-btn-tr, .syno-ux-scheduletable .schedule-btn .x-btn-ml, .syno-ux-scheduletable .schedule-btn .x-btn-mr, .syno-ux-scheduletable .schedule-btn .x-btn-bl, .syno-ux-scheduletable .schedule-btn .x-btn-bc, .syno-ux-scheduletable .schedule-btn .x-btn-br { display: none; } .syno-ux-scheduletable .schedule-btn .x-btn-mc { height: 24px; background-image: none; border-radius: 3px; } .syno-ux-scheduletable .schedule-btn .x-btn-small .x-btn-text { width: 14px; height: 14px; padding: 0px; margin: 5px; border: 1px solid #e6e8ea; border-radius: 1px; } .syno-ux-scheduletable .schedule-btn .x-btn-small .schedule-btn-no-download { background-position: -5px -5px; border: none; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-scheduletable .schedule-btn .x-btn-small .schedule-btn-no-download { background-size: 24px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-scheduletable .schedule-btn .x-btn-small .schedule-btn-no-download { background-size: 24px 24px; outline: 1px green dashed; } } .syno-ux-scheduletable .schedule-btn .x-btn-small .schedule-btn-full-speed { background-color: #057feb; } .syno-ux-scheduletable .schedule-btn .x-btn-small .schedule-btn-alt-speed { background-color: #ffc041; } .syno-ux-scheduletable .schedule-btn.x-btn-over .x-btn-mc { background-color: rgba(198, 212, 224, 0.2); } .syno-ux-scheduletable .schedule-btn.x-btn-pressed .x-btn-mc { background-color: rgba(198, 212, 224, 0.4); } .syno-ux-scheduletable .schedule-btn-label { width: 176px; } .syno-ux-switch { width: 64px; height: 24px; line-height: 24px; overflow: hidden; text-align: left; border-radius: 3px; border: 1px solid #b4bec8; position: relative; margin: 0px auto; } .syno-ux-switch .syno-ux-switch-container { position: relative; width: 128px; -moz-transition: margin-left, 0.25s, ease-out; -o-transition: margin-left, 0.25s, ease-out; -webkit-transition: margin-left, 0.25s, ease-out; transition: margin-left, 0.25s, ease-out; } .syno-ux-switch .syno-ux-switch-off, .syno-ux-switch .syno-ux-switch-on { display: inline-block; text-indent: -28px; width: 64px; height: 100%; line-height: 24px; text-align: center; } .syno-ux-switch .syno-ux-switch-label { position: absolute; top: 0; left: 36px; display: block; width: 29px; height: 100%; margin: 0; font-size: 0; } .syno-ux-switch.syno-ux-switch-status-off .syno-ux-switch-container { margin-left: -37px; } .syno-ux-switch.syno-ux-switch-status-off .syno-ux-switch-label { border-right: 1px solid #b4bec8; } .syno-ux-switch.syno-ux-switch-status-on .syno-ux-switch-container { margin-left: -1px; } .syno-ux-switch.syno-ux-switch-status-on .syno-ux-switch-label { border-left: 1px solid #b4bec8; } .syno-ux-switch.syno-ux-switch-normal .syno-ux-switch-off { color: #414b55; background-color: #f5faff; box-shadow: inset 0px 1px 0px rgba(80, 90, 100, 0.1); } .syno-ux-switch.syno-ux-switch-normal .syno-ux-switch-on { color: #fff; background-color: #1363bf; box-shadow: inset 0px 1px 0px rgba(80, 90, 100, 0.15); } .syno-ux-switch.syno-ux-switch-normal .syno-ux-switch-label { background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, rgba(198, 212, 224, 0.4)) ); background-image: -moz-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: -webkit-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); } .syno-ux-switch.syno-ux-switch-normal .syno-ux-switch-label:hover { background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, #e6ebf0) ); background-image: -moz-linear-gradient(#f5faff, #e6ebf0); background-image: -webkit-linear-gradient(#f5faff, #e6ebf0); background-image: linear-gradient(#f5faff, #e6ebf0); } .syno-ux-switch.syno-ux-switch-normal .syno-ux-switch-label:active { background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, rgba(198, 212, 224, 0.4)), color-stop(100%, #e1e6eb) ); background-image: -moz-linear-gradient( top, rgba(198, 212, 224, 0.4), #e1e6eb ); background-image: -webkit-linear-gradient( top, rgba(198, 212, 224, 0.4), #e1e6eb ); background-image: linear-gradient( to bottom, rgba(198, 212, 224, 0.4), #e1e6eb ); } .syno-ux-switch.syno-ux-switch-disable .syno-ux-switch-off { color: rgba(65, 75, 85, 0.4); background-color: #e6ebf0; box-shadow: inset 0px 1px 0px rgba(80, 90, 100, 0.1); } .syno-ux-switch.syno-ux-switch-disable .syno-ux-switch-on { color: #e5f4ff; background-color: #99b8dc; box-shadow: inset 0px 1px 0px rgba(80, 90, 100, 0.1); } .syno-ux-switch.syno-ux-switch-disable .syno-ux-switch-label { background-size: 100%; background-image: -webkit-gradient( linear, 50% 0%, 50% 100%, color-stop(0%, #f5faff), color-stop(100%, rgba(198, 212, 224, 0.4)) ); background-image: -moz-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: -webkit-linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); background-image: linear-gradient(#f5faff, rgba(198, 212, 224, 0.4)); } @-webkit-keyframes slidein { 0% { left: 0; top: 100%; } 100% { left: 0; top: 0; } } @-o-keyframes slidein { 0% { left: 0; top: 100%; } 100% { left: 0; top: 0; } } @-moz-keyframes slidein { 0% { left: 0; top: 100%; } 100% { left: 0; top: 0; } } @keyframes slidein { 0% { left: 0; top: 100%; } 100% { left: 0; top: 0; } } @-webkit-keyframes slideout { 0% { left: 0; top: 0; } 100% { left: 0; top: 100%; } } @-o-keyframes slideout { 0% { left: 0; top: 0; } 100% { left: 0; top: 100%; } } @-moz-keyframes slideout { 0% { left: 0; top: 0; } 100% { left: 0; top: 100%; } } @keyframes slideout { 0% { left: 0; top: 0; } 100% { left: 0; top: 100%; } } .slidein-effect { -webkit-animation: slidein 300ms ease-out; -moz-animation: slidein 300ms ease-out; -o-animation: slidein 300ms ease-out; animation: slidein 300ms ease-out; } .slideout-effect { -webkit-animation: slideout 300ms ease-out; -moz-animation: slideout 300ms ease-out; -o-animation: slideout 300ms ease-out; animation: slideout 300ms ease-out; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap { width: 100%; cursor: pointer; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-collapsed-text { font-size: 15px; color: #057feb; line-height: 24px; float: left; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-expand { width: 24px; height: 24px; float: left; background-repeat: no-repeat; background-position: 0 -216px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-expand { background-size: 24px 288px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-expand { background-size: 24px 288px; outline: 1px green dashed; } } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap:hover .syno-ux-expand { background-position: 0 -240px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap:active .syno-ux-expand { background-position: 0 -264px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-collapse { width: 24px; height: 24px; float: left; background-repeat: no-repeat; background-position: 0 -144px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-collapse { background-size: 24px 288px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap .syno-ux-collapse { background-size: 24px 288px; outline: 1px green dashed; } } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap:hover .syno-ux-collapse { background-position: 0 -168px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-tool-wrap:active .syno-ux-collapse { background-position: 0 -192px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-up-item { position: absolute; top: 0; left: 0; background-color: #fff; z-index: 100; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-up-item.hidden { top: 10000px; left: 10000px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-coverable-panel-down-item { position: relative; z-index: 0; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-bottom-wrap, .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-top-wrap { padding-top: 6px; padding-bottom: 6px; background-repeat: repeat-x; border: 0px; height: 24px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-bottom-wrap, .synohdpack .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-top-wrap { background-size: 8px 4px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-bottom-wrap, .synohdpackdebug .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-top-wrap { background-size: 8px 4px; outline: 1px green dashed; } } .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-top-wrap { background-position: 0 100%; padding-bottom: 10px; } .sds-window-v5 .syno-ux-cover-panel .syno-ux-cover-panel-bottom-wrap { padding-top: 10px; } .syno-ux-backnextgroup-back.x-btn { margin-right: 0 !important; border-radius: 3px 0 0 3px; border-right: 1px solid rgba(198, 212, 224, 0.9); } .syno-ux-backnextgroup-back.x-btn button { background-position: 1px 1px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-backnextgroup-back.x-btn button { background-size: 24px 192px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-backnextgroup-back.x-btn button { background-size: 24px 192px; outline: 1px green dashed; } } .syno-ux-backnextgroup-back.x-btn-over.x-btn { border: 1px solid rgba(124, 138, 152, 0.4); line-height: 26px; } .syno-ux-backnextgroup-next.x-btn { margin-left: -1px !important; border-radius: 0 3px 3px 0; } .syno-ux-backnextgroup-next.x-btn button { background-position: 1px -47px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-backnextgroup-next.x-btn button { background-size: 24px 192px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-backnextgroup-next.x-btn button { background-size: 24px 192px; outline: 1px green dashed; } } .syno-ux-backnextgroup-next.x-btn-over.x-btn { border: 1px solid rgba(124, 138, 152, 0.4); line-height: 26px; } .syno-ux-sliderfield-slider.x-slider-horz { background: none; padding-left: 9px; } .syno-ux-sliderfield-slider.x-slider-horz.calibration { padding-left: 7px; } .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-inner, .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-end { height: 24px; background: none; } .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-end { padding-right: 7px; } .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-thumb { width: 15px; height: 24px; top: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-thumb { background-size: 30px 48px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-thumb { background-size: 30px 48px; outline: 1px green dashed; } } .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-thumb.x-slider-thumb-over, .syno-ux-sliderfield-slider.x-slider-horz.calibration .x-slider-thumb.x-slider-thumb-drag { background-position: 0 0; } .syno-ux-sliderfield-slider.x-slider-horz.calibration.x-item-disabled .x-slider-thumb { background-position: -15px -24px; } .syno-ux-sliderfield-slider.x-slider-horz.calibration .syno-ux-slider-progress, .syno-ux-sliderfield-slider.x-slider-horz.calibration .syno-ux-slider-bg { top: 10px; } .syno-ux-sliderfield-slider.x-slider-horz .x-slider-inner, .syno-ux-sliderfield-slider.x-slider-horz .x-slider-end { height: 18px; background: none; } .syno-ux-sliderfield-slider.x-slider-horz .x-slider-end { padding-right: 9px; } .syno-ux-sliderfield-slider.x-slider-horz .x-slider-thumb { width: 18px; height: 18px; top: 0; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-sliderfield-slider.x-slider-horz .x-slider-thumb { background-size: 36px 36px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-sliderfield-slider.x-slider-horz .x-slider-thumb { background-size: 36px 36px; outline: 1px green dashed; } } .syno-ux-sliderfield-slider.x-slider-horz .x-slider-thumb.x-slider-thumb-over, .syno-ux-sliderfield-slider.x-slider-horz .x-slider-thumb.x-slider-thumb-drag { background-position: 0 0; } .syno-ux-sliderfield-slider.x-slider-horz.x-item-disabled .x-slider-thumb { background-position: -18px -18px; } .syno-ux-sliderfield-slider.x-slider-horz.x-item-disabled .syno-ux-slider-progress { background-color: #bbe0fa; } .syno-ux-sliderfield-slider.x-slider-horz.x-item-disabled .syno-ux-slider-bg { background-color: #e1e6e8; } .syno-ux-sliderfield-slider.x-slider-horz .syno-ux-slider-progress { position: absolute; top: 7px; height: 4px; border-radius: 2px; background-color: #057feb; } .syno-ux-sliderfield-slider.x-slider-horz .syno-ux-slider-bg { position: absolute; top: 7px; width: 100%; height: 4px; border-radius: 2px; background-color: #c8cdd2; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first { cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first .x-grid3-cell-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-hd.x-grid3-col.x-grid3-cell-first, .grid-dd-drag-proxy .x-grid3-hd.x-grid3-col.x-grid3-cell-first { cursor: default; } .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style .x-grid3-row, .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style .x-grid3-row .x-grid3-cell-first, .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style .x-grid3-row .x-grid3-cell-first .x-grid3-cell-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style .x-grid3-row .x-grid3-cell-first .x-grid3-hd-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style .x-grid3-row .x-grid3-cell-first.x-grid3-hd, .syno-ux-gridpanel.syno-ux-ddgridpanel .syno-ux-ddgrid-grabbing-style { background-color: transparent; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-hd-row .x-grid3-cell.x-grid3-cell-first .x-grid3-hd-inner:before { content: ""; display: inline-block; position: absolute; left: 16px; height: 100%; vertical-align: top; border-left: rgba(198, 212, 224, 0.4) 1px solid; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first { position: relative; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first:before, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first:before { content: ""; height: 24px; width: 8px; position: absolute; top: 0px; bottom: 0px; left: 0px; margin: auto 4px auto 4px; background-repeat: no-repeat; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first:before, .syno-ux-gridpanel.syno-ux-ddgridpanel .synohdpack .x-grid3-col.x-grid3-cell-first:before, .synohdpack .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first:before, .grid-dd-drag-proxy .synohdpack .x-grid3-col.x-grid3-cell-first:before { background-size: 8px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first:before, .syno-ux-gridpanel.syno-ux-ddgridpanel .synohdpackdebug .x-grid3-col.x-grid3-cell-first:before, .synohdpackdebug .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first:before, .grid-dd-drag-proxy .synohdpackdebug .x-grid3-col.x-grid3-cell-first:before { background-size: 8px 72px; outline: 1px green dashed; } } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first .x-grid3-cell-inner, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first .x-grid3-cell-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner, .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner { margin-left: 16px; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-hd.x-grid3-col.x-grid3-cell-first, .grid-dd-drag-proxy .x-grid3-hd.x-grid3-col.x-grid3-cell-first { background-image: none; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-hd.x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner, .grid-dd-drag-proxy .x-grid3-hd.x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner { border-left: 1px solid rgba(198, 212, 224, 0.4); } .syno-ux-gridpanel.syno-ux-ddgridpanel.syno-ux-ddgridpanel-highcell .x-grid3-col.x-grid3-cell-first .x-grid3-cell-inner, .syno-ux-gridpanel.syno-ux-ddgridpanel.syno-ux-ddgridpanel-highcell .x-grid3-col.x-grid3-cell-first .x-grid3-hd-inner { margin-left: 18px; padding-left: 0px; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-gridpanel.syno-ux-ddgridpanel.syno-ux-ddgridpanel-highcell .x-grid3-col.x-grid3-cell-first:before { background-size: 8px 72px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-gridpanel.syno-ux-ddgridpanel.syno-ux-ddgridpanel-highcell .x-grid3-col.x-grid3-cell-first:before { background-size: 8px 72px; outline: 1px green dashed; } } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-hd-row .x-grid3-cell.x-grid3-cell-first .x-grid3-hd-inner { padding-left: 24px; } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected { background-color: rgba(222, 236, 252, 0.1) !important; } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected div { color: rgba(65, 75, 85, 0.4); } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected .x-grid3-cell-first:before { background-position-y: -48px; } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected .syno-ux-grid-enable-column-checked { background-position: center -100px; } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected .syno-ux-grid-enable-column-unchecked { background-position: center -40px; } .syno-ux-gridpanel.syno-ux-ddgridpanel.is-dragging .x-grid3-row-selected .syno-ux-grid-enable-column-grayed { background-position: center -160px; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-row-over .x-grid3-cell-first:before { background-position-y: -24px; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-row-selected .x-grid3-cell-first:before { background-position-y: -24px; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-row.syno-ux-ddgrid-border-top { border-top: solid 1px #057feb; } .syno-ux-gridpanel.syno-ux-ddgridpanel .x-grid3-row.syno-ux-ddgrid-border-bottom { border-bottom: solid 1px #057feb; } .grid-dd-drag-proxy { padding: 0; background: #ffffff; border: 1px solid rgba(5, 127, 235, 0.2); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .grid-dd-drag-proxy .x-grid3-row { border: none; background-color: rgba(5, 127, 235, 0.1); padding-top: 0px; } .grid-dd-drag-proxy .x-grid3-col.x-grid3-cell-first:before { background-position-y: -24px; } .grid-dd-drag-proxy .x-dd-drag-ghost { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; padding: 0px; font-size: 13px; border: none; } .syno-ux-whitetip-icon { width: 24px; height: 24px; margin-top: 2px; display: inline-block; vertical-align: middle; margin-left: 4px; vertical-align: top; overflow: visible; position: relative; } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpack .syno-ux-whitetip-icon { background-size: 24px 24px; } } @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-resolution: 144dpi) { .synohdpackdebug .syno-ux-whitetip-icon { background-size: 24px 24px; outline: 1px green dashed; } } .syno-ux-whitetip-icon:before, .syno-ux-whitetip-icon::before { content: ""; width: 24px; height: 24px; top: 0px; position: absolute; } .syno-ux-whitetip-icon.x-item-disabled { opacity: 0.4 !important; } .x-form-check-wrap .syno-ux-whitetip-icon { margin-top: 0px; } .x-form-display-field .syno-ux-whitetip-icon { margin-left: 4px; margin-top: 0px; } .x-tip-white { z-index: 20002 !important; } .x-tip-white.wtip-text-wrapper { padding: 12px 20px 12px 20px; } .x-tip-white.wtip-items-wrapper { padding: 20px 20px 20px 20px; } .x-tip-white { background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2); padding: 12px 20px 12px 24px; display: inline-block; } .x-tip-white .x-tip-white-body { line-height: 20px; } .x-tip-white .text-only { font-size: 13px; color: #414b55; line-height: 20px; word-wrap: break-word; }