{"id":158,"date":"2020-09-23T21:36:33","date_gmt":"2020-09-24T02:36:33","guid":{"rendered":"http:\/\/www.allenscloud.com\/wordpress\/?p=158"},"modified":"2020-09-23T21:43:38","modified_gmt":"2020-09-24T02:43:38","slug":"weilbytes-proxmox-discord-dark-theme-for-stylus-plugin","status":"publish","type":"post","link":"https:\/\/allenscloud.com\/wordpress\/2020\/09\/23\/weilbytes-proxmox-discord-dark-theme-for-stylus-plugin\/","title":{"rendered":"Weilbytes’ Proxmox Discord Dark Theme for Stylus plugin."},"content":{"rendered":"

This is not my code.<\/strong> For anyone using the Stylus plugin for Firefox, the below can be cut and paste for a Discord Dark theme for Proxmox PVE.\u00a0 All credit goes to Weilbyte over on Github https:\/\/github.com\/Weilbyte\/PVEDiscordDark<\/a> it’s just that his recent changes have somehow removed the ability to do it this way. And I much prefer it vs installing on the PVE itself. The regexp settings under “Applies” to at the bottom of the picture is important for stylus to recognize only pve pages… in case you’re wondering it says\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (https:\\\/\\\/.*):(8006)\\\/?(.*)<\/p>\n

\"\"<\/p>\n

.x-box-inner {
\noverflow:hidden;
\nposition:relative;
\nleft:0;
\ntop:0;
\nbackground:#23272a
\n}<\/p>\n

.x-body {
\ncolor:#fff;
\nfont-size:13px;
\nline-height:17px;
\nfont-weight:300;
\nfont-family:helvetica, arial, verdana, sans-serif;
\nbackground:#fff
\n}<\/p>\n

.x-viewport,.x-viewport > .x-body {
\nbackground:#23272a
\n}<\/p>\n

.x-form-text-default {
\ncolor:#818082;
\nbackground-color:#4a4d53;
\nfont:300 13px\/17px helvetica, arial, verdana, sans-serif;
\nmin-height:22px;
\npadding:0 6px 2px
\n}<\/p>\n

.x-form-trigger-wrap-default {
\nborder-color:#cfcfcf;
\nborder-style:solid;
\nborder-width:0
\n}<\/p>\n

.x-form-trigger-default {
\nwidth:22px;
\nbackground:0 center #72767d url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_trigger.png) no-repeat
\n}<\/p>\n

.x-panel-body-default {
\nbackground:#2c2f33;
\ncolor:#fff;
\nfont-size:13px;
\nfont-weight:300;
\nfont-family:helvetica, arial, verdana, sans-serif;
\nborder-color:#fff;
\nborder-style:solid;
\nborder-width:0
\n}<\/p>\n

.x-grid-cell-inner,.x-grid-cell-rowbody {
\nbackground:#2c2f33;
\ncolor:#fff
\n}<\/p>\n

.x-toolbar-default {
\nbackground-color:#2c2f33;
\nborder-width:0
\n}<\/p>\n

.x-toolbar {
\nbackground:#2c2f33
\n}<\/p>\n

#toolbar-1069-innerCt {
\nbackground:#2c2f33
\n}<\/p>\n

.x-autocontainer-innerCt {
\nbackground:#2c2f33
\n}<\/p>\n

[id^=”toolbar”] {
\nbackground:#2c2f33
\n}<\/p>\n

[id^=”legend”] {
\nbackground:#23272a;
\nborder-color:red
\n}<\/p>\n

.x-legend-item {
\nbackground:#2c2f33;
\ncolor:#fff;
\nborder-width:0
\n}<\/p>\n

.x-legend-container {
\nbackground:#2c2f33;
\nborder-radius:0;
\nbox-shadow:rgba(0,0,0,0) 0 0 0;
\nborder-width:0
\n}<\/p>\n

.x-legend.x-docked-top .x-legend-item,.x-legend.x-docked-bottom .x-legend-item,.x-legend-panel.x-docked-top .x-legend-item,.x-legend-panel.x-docked-bottom .x-legend-item {
\nborder-left:0;
\nborder-bottom:0
\n}<\/p>\n

.x-treelist-item-leaf,.x-treelist-container,.x-treelist-row,.x-treelist-row-with-icon,.x-treelist-item-expandable,.x-treelist-item-wrap,.x-treelist-item-text,.x-treelist-item-icon {
\nbackground:#2c2f33;
\ncolor:#fff
\n}<\/p>\n

.x-treelist-item-selected > .x-treelist-row {
\nbackground-color:#23272a
\n}<\/p>\n

.x-treelist-row-over {
\ncolor:#FF0
\n}<\/p>\n

.x-treelist-row-over > * > .x-treelist-item-text {
\ncolor:#7289da;
\ntransition:color .5s
\n}<\/p>\n

.x-treelist-row-over > * > .x-treelist-item-icon {
\ncolor:#7289da;
\ntransition:color .5s
\n}<\/p>\n

.fa-ceph:before {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_cephwhite.png)
\n}<\/p>\n

.x-treelist-row-over > * > .fa-ceph:before {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_cephblurp.png);
\nbackground-size:14px 14px;
\ntransition:background-image .5s
\n}<\/p>\n

.x-progress {
\nbackground:#2c2f33
\n}<\/p>\n

.x-progress-bar {
\nbackground-color:#7289da!important
\n}<\/p>\n

.x-progress-text.x-progress-text-back,.x-progress-text {
\ncolor:#fff!important
\n}<\/p>\n

.x-component.x-box-item.x-component-default {
\nbackground:#23272a
\n}<\/p>\n

.x-panel-header {
\nbackground:#23272a;
\nborder:0
\n}<\/p>\n

.x-title-text {
\ncolor:#7289da
\n}<\/p>\n

.x-btn {
\nbackground:#7289da;
\nborder-width:0
\n}<\/p>\n

.x-btn-inner,.x-btn-inner.x-btn-inner-default-small {
\ncolor:#fff
\n}<\/p>\n

#button-1030 {
\nbackground:#23272a;
\nborder-color:#d23d3f;
\nborder-width:1px
\n}<\/p>\n

.x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-over,.x-btn.x-unselectable.x-box-item.x-btn-default-small.x-btn-over,.x-menu-item-focus {
\nbackground-color:#677bc4
\n}<\/p>\n

.x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-menu-active {
\nbackground-color:#677bc4
\n}<\/p>\n

.x-btn-disabled {
\nbackground-image:none;
\nbackground-color:#737fab!important
\n}<\/p>\n

.x-btn-icon-el.x-btn-icon-el-default-small.fa.fa-book.x-btn-icon-el-default-toolbar-small,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-undo,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-terminal,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-fw.fa-ellipsis-v,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.x-btn-icon-el-default-toolbar-small.fa.fa-question-circle,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-send-o,.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-play,.x-btn-inner.x-btn-inner-default-toolbar-small,.x-btn-icon-el.x-btn-icon-el-default-small.fa.black.fa-gear,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-send-o,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-clone,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-file-o,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-heartbeat,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-trash-o,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-desktop,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-cube,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-terminal {
\ncolor:#fff
\n}<\/p>\n

.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-play,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-play {
\ncolor:#43b581
\n}<\/p>\n

.x-btn-icon-el.x-btn-icon-el-default-toolbar-small.fa.fa-power-off,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-stop,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-stop,.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-power-off {
\ncolor:#d23d3f
\n}<\/p>\n

.x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-pause {
\ncolor:#faa61a
\n}<\/p>\n

.x-menu-item,.x-menu-default {
\nbackground:#7289da;
\nborder-style:none;
\nborder-width:0
\n}<\/p>\n

.x-menu-item-text {
\ncolor:#fff
\n}<\/p>\n

.x-menu-item-default.x-menu-item-separator {
\nheight:0;
\nborder-top-width:0;
\nmargin:0;
\npadding:0
\n}<\/p>\n

.x-menu-header {
\nborder-radius:1px;
\nbackground:#23272a;
\nborder-width:0
\n}<\/p>\n

[id^=”tooltip”] {
\nbackground:#7289da;
\ncolor:#fff;
\nborder-width:0
\n}<\/p>\n

[id^=”ext-quicktips-tip-body”],[id^=”ext-quicktips-tip-innerCt”],[id^=”ext-quicktips-tip-ext-quicktips-tip-outerCt”],[id^=”ext-form-error”],.x-tip-default {
\nbackground-color:#7289da;
\ncolor:#fff;
\nborder-radius:0;
\nborder-width:0
\n}<\/p>\n

.x-tool-img {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_tool-sprites.png)
\n}<\/p>\n

.x-window-header.x-header.x-header-draggable.x-docked.x-unselectable.x-window-header-default.x-horizontal.x-window-header-horizontal.x-window-header-default-horizontal.x-top.x-window-header-top.x-window-header-default-top.x-box-layout-ct,.x-window-body {
\nbackground:#23272a;
\nborder-bottom-width:0;
\nborder-right-width:0
\n}<\/p>\n

.x-window-default {
\nborder-radius:0;
\nbackground-color:#23272a;
\nbox-shadow:none;
\nborder-color:#23272a;
\nborder-style:none;
\nborder-width:0;
\npadding:0
\n}<\/p>\n

.x-window-default-mc {
\nbackground-color:#23272a
\n}<\/p>\n

.x-window-body-default {
\ncolor: white;
\nborder-width:0!important
\n}<\/p>\n

.x-window-header-default-top {
\nborder-top-left-radius:0!important;
\nborder-top-right-radius:0!important;
\nborder-bottom-right-radius:0!important;
\nborder-bottom-left-radius:0!important;
\nbackground-color:#23272a;
\nborder-width:0!important;
\npadding:9px
\n}<\/p>\n

.x-form-text,.x-form-item-label-inner-default,.x-window-text,.x-form-display-field,.x-component {
\ncolor:#fff
\n}<\/p>\n

.x-mask {
\nbackground-color:rgba(26,26,29,0.27)
\n}<\/p>\n

.x-splitter-collapsed .x-layout-split-bottom {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_mini-top.png)
\n}<\/p>\n

.x-layout-split-bottom {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_mini-bottom.png)
\n}<\/p>\n

.x-tab {
\nbackground:#737fab;
\ncolor:#fff;
\nborder-width:0
\n}<\/p>\n

.x-tab-inner {
\ncolor:#fff
\n}<\/p>\n

.x-tab-active,.x-tab-over,.x-tab-default-focus,.x-tab-focus {
\nbackground:#7289da!important;
\nborder-width:0!important
\n}<\/p>\n

.x-tab-bar-body {
\nbackground:#23272a
\n}<\/p>\n

.x-tab-disabled {
\nbackground:#737fab!important
\n}<\/p>\n

.x-column-header-inner,.x-column-header-default,.x-grid-item,.x-grid-header-ct {
\nbackground:#2c2f33;
\nborder-width:0!important
\n}<\/p>\n

.x-column-header-text-inner {
\ncolor:#fff
\n}<\/p>\n

.x-column-header-trigger {
\nborder-color:#23272a
\n}<\/p>\n

.x-toolbar-text.x-box-item.x-toolbar-item.x-toolbar-text-default,.x-grid-group-title {
\ncolor:#fff
\n}<\/p>\n

[id^=”pveNodeStatus”] {
\nbackground:#23272a
\n}<\/p>\n

div[id^=”pveNotesView-“][id$=”-innerCt”] {
\nbackground:#23272a
\n}<\/p>\n

img[src^=”\/pve2\/images\/proxmox_logo”] {
\nbackground:#23272a;
\ncontent:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_logo.png)
\n}<\/p>\n

[id^=”versioninfo”] {
\nbackground:#23272a
\n}<\/p>\n

[id^=”proxmoxGauge”] {
\nbackground:#23272a
\n}<\/p>\n

div[id^=”panel-“][id$=”-body”] {
\nbackground:#23272a
\n}<\/p>\n

.x-surface-canvas {
\nborder-radius:3px
\n}<\/p>\n

.x-component.x-fieldset-header-text.x-component-default {
\ncolor:#fff
\n}<\/p>\n

.x-fieldset-default {
\nborder:1px solid #7289da
\n}<\/p>\n

.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent-expanded.fa.fa-server,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent.fa.fa-server,.fa-building.online,.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-cube.running.ha-unmanaged,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent-expanded.fa.fa-building,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent.fa.fa-building,.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-cube,.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-desktop,.x-tree-icon.x-tree-icon-custom.x-tree-icon-leaf.fa.fa-database,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent.fa.fa-cube,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent.fa.fa-desktop,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent.fa.fa-database,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent-expanded.fa.fa-database,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent-expanded.fa.fa-desktop,.x-tree-icon.x-tree-icon-custom.x-tree-icon-parent-expanded.fa.fa-cube {
\ncolor:#7289da!important
\n}<\/p>\n

.x-grid-group-hd.x-grid-group-hd-collapsible {
\nbackground:#23272a;
\ncolor:#fff;
\nborder-width:0
\n}<\/p>\n

.x-splitter {
\nbackground:#23272a
\n}<\/p>\n

.x-box-scroller,.x-box-scroller-body-vertical,.x-vertical-scroller,.x-toolbar-vertical-scroller,.x-toolbar-default-vertical-scroller {
\nbackground:#2c2f33!important
\n}<\/p>\n

.pve-itype-icon-processor {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-cpu.png)
\n}<\/p>\n

.pve-itype-icon-memory {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-ram.png)
\n}<\/p>\n

.pve-itype-icon-storage {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-hdd.png)
\n}<\/p>\n

.pve-itype-icon-swap {
\nbackground-image:url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-swap.png)
\n}<\/p>\n

.pve-itype-icon-display, .x-grid-row-console {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-display.png);
\n}<\/p>\n

.pve-itype-icon-cdrom {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-cd.png);
\n}<\/p>\n

.pve-itype-icon-network {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-network.png);
\n}<\/p>\n

.pve-itype-icon-pci {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-pci.png);
\n}<\/p>\n

.pve-itype-icon-usb {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-usb.png);
\n}<\/p>\n

.pve-itype-icon-serial {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-serial.png);
\n}<\/p>\n

.pve-itype-icon-cloud {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_icon-cloud.png);
\n}<\/p>\n

.fa-fw.x-grid-icon-custom.fa.fa-database,.fa-fw.x-grid-icon-custom.fa.fa-desktop,.fa-fw.x-grid-icon-custom.fa.fa-cube {
\ncolor:#7289da
\n}<\/p>\n

html {
\noverflow:scroll;
\noverflow-x:hidden
\n}<\/p>\n

::-webkit-scrollbar {
\nwidth:0;
\nbackground:transparent
\n}<\/p>\n

.lxc:after,.qemu:after {
\nbackground:transparent!important;
\ncolor:#7289da;
\ntext-shadow:0 0 0 #2c2f33!important
\n}<\/p>\n

.x-tree-icon-custom:after,.x-grid-icon-custom:after {
\ntext-shadow:0 0 0 #2c2f33
\n}<\/p>\n

* {
\nfont-weight: 350;
\n}<\/p>\n

.x-surface-canvas {
\nfilter: invert(100%);
\n}<\/p>\n

.x-legend-item-marker {
\nfilter: invert(100%);
\n}<\/p>\n

.x-grid-row-loading {
\nbackground-image: url(https:\/\/github.com\/Weilbyte\/PVEDiscordDark\/raw\/master\/images\/dd_loading.svg);
\nbackground-size: 32px;
\n}<\/p>\n

.x-grid-item-alt {
\nbackground:#23272a;
\nborder-width:0!important;
\n}<\/p>\n","protected":false},"excerpt":{"rendered":"

This is not my code. For anyone using the Stylus plugin for Firefox, the below can be cut and paste for a Discord Dark theme for Proxmox PVE.\u00a0 All credit goes to Weilbyte over on Github https:\/\/github.com\/Weilbyte\/PVEDiscordDark it’s just that his recent changes have somehow removed the ability to do it this way. And I<\/p>\n

Read more…<\/a><\/div>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/posts\/158"}],"collection":[{"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/comments?post=158"}],"version-history":[{"count":5,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/posts\/158\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/posts\/158\/revisions\/164"}],"wp:attachment":[{"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/media?parent=158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/categories?post=158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/allenscloud.com\/wordpress\/wp-json\/wp\/v2\/tags?post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}