Post
by Mike R » Fri Dec 22, 2023 4:02 am
This is the text of desktopstyle.css
/* DSM 7.2. Dark THEME - BETA 0.1 - by ramires */
/* You don't have to change here anything. Loading default settings from setcolors.css */
/* Only RGB change in line 28 have to be modified if needed */
@import url("setcolors.css"); /* Load default color settings. Change Values there */
body, .normal-font, .sds-window-v5 .ext-el-mask-msg .x-loading-message-inner, .sds-window-v5.x-window-dlg, .sds-window-v5.x-window-dlg input, .sds-window-v5.x-window-dlg textarea {
color: var(--v1-mod-color7)
}
.tab-panel {
background-color: var(--v1-mod-color2)
}
.only-one-tab .tab-label {
color: var(--v2-mod-color1)
}
.tab-label.active {
border-top: 3px solid var(--v2-mod-color1);
color: var(--v2-mod-color1)
}
.login-title span {
color: var(--v2-mod-color2)
}
.login-textfield .active-border {
background-color: var(--v2-mod-color1)
}
.login-btn {
background-color: var(--v2-mod-color2);
box-shadow: 0 5px 14px 0 rgb(4 253 0 / 34%) !important; /* Change rgb color to your needs. This is green. Only entry here to change if needed! */
}
.login-btn .login-btn-animation {
background-color: var(--v2-mod-color1)
}
.login-btn .grow-bg {
background-color: var(--v2-mod-color1)
}
.login-textfield .input-container input {
background-color: var(--v1-mod-color3);
padding: 12px 10px 14px 10px
}
.v-window .v-window-header-wrapper {
background-color: var(--v1-mod-color4)
}
.v-window .v-window-header-wrapper .v-window-header-text {
color: var(--v3-mod-color1)
}
.v-fieldset .v-fieldset-title-wrapper {
background-color: var(--v1-mod-color5);
color: var(--v1-mod-color3)
}
.docker-package .overview-page {
background-color: var(--v1-mod-color5) !important
}
.docker-package .overview-page .row .overview-panel {
background-color: var(--v1-mod-color5) !important
}
.repo-desc {
color: var(--v2-mod-color1) !important
}
.overview-stats-chart {
background-color: var(--v1-mod-color6) !important
}
.syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-active .x-tab-strip-text {
color: var(--v2-mod-color3)
}
.x-panel-bwrap {
background-color: var(--v1-mod-color4) !important
}
.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: var(--v1-mod-color7)
}
.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: var(--v2-mod-color4)
}
.syno-ux-tab-panel .x-tab-strip-top li.x-tab-strip-over .x-tab-strip-text {
color: var(--v2-mod-color4)
}
.syno-ux-fieldset .x-fieldset-header, .syno-ux-fieldset .x-fieldset-bottomlegend {
color: var(--v2-mod-color5)
}
.syno-ux-button-blue {
border: solid 1px var(--v1-mod-color8);
background-color: var(--v2-mod-color1)
}
.syno-ux-button-blue.x-btn-over, .syno-x-button-blue:hover, .syno-ux-button-blue.x-btn-focus {
border: solid 1px var(--v3-mod-color1);
background-color: var(--v2-mod-color5)
}
.link-font {
color: var(--v2-mod-color6)
}
.link-font:hover {
color: var(--v2-mod-color4)
}
.syno-ux-displayfield.x-form-display-field .syno-ux-note {
color: var(--v2-mod-color2)
}
.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 {
background-color: var(--v1-mod-color2);
border-color: var(--v1-mod-color8)
}
.x-form-text.syno-ux-textfield, .ext-strict .x-small-editor .x-form-text.syno-ux-textfield, .x-form-text.syno-ux-numberfield {
background-color: var(--v1-mod-color2);
border-color: var(--v1-mod-color8)
}
.v-textfield-wrapper {
--v-input-bkg-color: var(--v1-mod-color2);
--v-input-color: var(--v3-mod-color1);
--v-input-bkg-color--hover: var(--v1-mod-color9);
--v-input-border-color--focus: var(--v3-mod-color1);
--v-input-border-color--hover: var(--v3-mod-color1);
--v-input-bkg-color--focus: var(--v1-mod-color9)
}
.v-btn {
--v-button-action-bkg-color--normal: var(--v2-mod-color1);
--v-button-action-color--normal: var(--v3-mod-color1);
--v-button-blue-border-color--normal: var(--v1-mod-color8);
--v-button-action-bkg-color--hover: var(--v2-mod-color5);
--v-button-action-color--hover: var(--v3-mod-color1);
--v-button-action-border-color--hover: var(--v3-mod-color1)
}
.v-select2-wrapper {
--v-select-bkg-color: var(--v1-mod-color8);
--v-select-bkg-color--focus: var(--v1-mod-color8);
--v-select-bkg-color--hover: var(--v1-mod-color3);
--v-select-border-color--focus: var(--v3-mod-color1);
--v-select-bkg-color__dropdown: var(--v3-mod-color2)
}
.v-select2-dropdown, .v-select2-advanced {
background-color: var(--v1-mod-color9);
color: var(--v3-mod-color1)
}
.v-select2-dropdown .v-select2-dropdown-menu-item {
color: var(--v3-mod-color1)
}
.v-select2-dropdown .v-select2-dropdown-menu-item.selected, .v-select2-dropdown .v-select2-dropdown-menu-item.activated {
color: var(--v1-mod-color7);
background-color: var(--v1-mod-color4)
}
.admin-center-search-box-dropdown .v-select2-dropdown-menu-item-group-label {
color:var(--v2-mod-color5)
}
.synopkg-empty-pkglist-mask {
background-color: var(--v1-mod-color4)
}
.synopkg-empty-pkglist-msg {
color: var(--v2-mod-color1)
}
.sds-window-v5 .x-window-tl {
background-color: var(--v1-mod-color4);
color: var(--v3-mod-color1)
}
.sds-window-v5 .x-window-header-text {
color: var(--v3-mod-color1)
}
.sds-window-v5 .x-window-tbar {
background-color: var(--v1-mod-color4)
}
.sds-window-v5 .x-window-tbar .x-toolbar {
background-color: var(--v1-mod-color4)
}
.sds-window-v5 .x-window-body {
background-color: var(--v3-mod-color3)
}
.sds-window-v5 .x-window-bl {
background-color: var(--v3-mod-color3)
}
.syno-pkg-note {
color:var(--v2-mod-color2)
}
.syno-ux-note {
color:var(--v2-mod-color2)
}
.syno-textfilter .x-trigger-wrap-focus.x-form-field-wrap, .syno-ux-textfilter .x-trigger-wrap-focus.x-form-field-wrap {
background-color: var(--v1-mod-color8);
border-color: var(--v3-mod-color1)
}
.syno-textfilter .x-form-field-wrap, .syno-ux-textfilter .x-form-field-wrap {
background-color: var(--v1-mod-color8);
border-color: var(--v1-mod-color7)
}
.v-icon {
--v-icon-set-set21-normal: var(--v2-mod-color7);
--v-icon-set-set21-hover: var(--v2-mod-color2);
--v-icon-set-set21-active: var(--v3-mod-color1)
}
.v-menu {
--v-menu-bkg-color: var(--v1-mod-color5)
}
.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-color: var(--v1-mod-color5)
}
.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 {
background-color: var(--v1-mod-color5)
}
.sds-notify-tray-panel .x-panel-header {
background-color:var(--v3-mod-color3);
color:var(--v3-mod-color3)
}
.sds-tray-panel .x-panel-body {
background-color: var(--v1-mod-color4);
color: var(--v3-mod-color1)
}
.sds-notify-tray-panel .sds-notify-empty-text {
color: var(--v3-mod-color1)
}
.sds-tray-msg-window .x-plain-body, .sds-tray-panel .x-panel-header .x-panel-header-text, .sds-user-menu .sds-user-menu-username {
color: var(--v1-mod-color7)
}
.sds-notify-tray-panel .x-panel-bbar {
background-color:var(--v3-mod-color3)
}
.sds-notify-tray-panel .x-toolbar .x-toolbar-ct {
background-color:var(--v3-mod-color3)
}
.sds-notify-tray-panel .item .title {
color: var(--v2-mod-color7)
}
.sds-notify-tray-panel .msg {
color: var(--v3-mod-color1)
}
.sds-notify-tray-panel .item .time {
color: var(--v1-mod-color7)
}
.v-form-item-label {
color:var(--v2-mod-color2)
}
.taskbar-menu.v-menu::before {
background: none
}
.taskbar-menu.v-menu .taskbar-title {
color:var(--v2-mod-color2);
background-color: var(--v1-mod-color4)
}
.v-trap-focus-body {
background-color: var(--v1-mod-color4)
}
.taskbar-menu.v-menu {
background-color: var(--v1-mod-color4)
}
.v-menu-item, .v-menu-submenu-title {
color: var(--v1-mod-color7)
}
.v-menu-item.active {
color: var(--v3-mod-color1)
}
.v-widget-item {
background:var(--v3-mod-color3);
color: var(--v1-mod-color7)
}
.v-widget-item-header .v-widget-item-header-title .v-widget-item-header-title-text {
color: var(--v3-mod-color1)
}
.syno-finder .result-list .list-entry {
color: var(--v1-mod-color7)
}
.syno-finder .search-bar .text-field {
color:var(--v3-mod-color1)
}
.syno-finder .search-bar .dummy-searchfield .suggestion {
color: var(--v1-mod-color1)
}
.syno-pkglist-card {
outline: 1px solid var(--v1-mod-color9)
}
.syno-pkglist-header {
color: var(--v2-mod-color4)
}
.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-info .syno-pkglist-title {
color: var(--v1-mod-color7)
}
.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-info .syno-pkglist-subtitle {
color: var(--v2-mod-color1)
}
.syno-pkglist-card .syno-pkglist-infoarea .syno-pkglist-btn .syno-pkg-button-open .x-btn-text {
color: var(--v2-mod-color4)
}
.syno-pkglist-card:hover {
background-color: var(--v3-mod-color3)
}
.syno-pkglist-card:hover .syno-pkglist-infoarea>.syno-pkglist-info>.syno-pkglist-title:after {
background-color: var(--v3-mod-color3)
}
.v-module-list .module-item-section .module-item .module-section-item-text {
color: var(--v2-mod-color9)
}
.syno-ux-expandable-listview .item-summary .item-status {
color: var(--v1-mod-color8)
}
You Wouldn't Believe How Hard I Have to Work to be Lazy