From f9c557c07a91617e7a9adc6833712d6ad95e42e1 Mon Sep 17 00:00:00 2001 From: Weilbyte Date: Sun, 24 Feb 2019 20:56:27 +0100 Subject: [PATCH] Create discordDark4Extension.css --- discordDark4Extension.css | 378 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 378 insertions(+) create mode 100644 discordDark4Extension.css diff --git a/discordDark4Extension.css b/discordDark4Extension.css new file mode 100644 index 0000000..a693f4d --- /dev/null +++ b/discordDark4Extension.css @@ -0,0 +1,378 @@ +/* PVEDiscordDark Theme by Weilbyte - https://github.com/Weilbyte/PVEDiscordDark */ + .x-box-inner { + overflow: hidden; + position: relative; + left: 0; + top: 0; + background: #23272a; + /* 23272a */ +} + .x-body { + color: #ffffff; + font-size: 13px; + line-height: 17px; + font-weight: 300; + font-family: helvetica, arial, verdana, sans-serif; + background: #fff; +} + .x-viewport, .x-viewport > .x-body { + background: #23272a; +} +/* Search fields color change and remove ugly border around them */ + .x-form-text-default { + color: #818082; + padding: 0px 6px 2px; + background-color: #4a4d53; + font: 300 13px/17px helvetica, arial, verdana, sans-serif; + min-height: 22px; +} + .x-form-trigger-wrap-default { + border-width: 0px; + border-style: solid; + border-color: #cfcfcf; +} +/* Change dropdown field color and icon (images/form/trigger.png) */ + .x-form-trigger-default { + width: 22px; + background: 0 center #72767d url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_trigger.png) no-repeat; +} +/* Text color */ + .x-panel-body-default { + background: #2c2f33; + border-color: #ffffff; + color: #ffffff; + font-size: 13px; + font-weight: 300; + font-family: helvetica, arial, verdana, sans-serif; + border-width: 0; + border-style: solid; +} +/* Cell (item in list) color change */ + .x-grid-cell-inner, .x-grid-cell-rowbody { + background: #2c2f33; + color: #ffffff; +} + .x-toolbar-default { + background-color: #2c2f33; +} + .x-toolbar { + background: #2c2f33; +} + #toolbar-1069-innerCt { + background: #2c2f33; +} + .x-autocontainer-innerCt { + background: #2c2f33; +} + [id^="toolbar"] { + background: #2c2f33; +} +/* Legends. The buttons under the graphs. */ + [id^="legend"] { + background: #23272a; + border-color: red; +} + .x-legend-item { + background: #2c2f33; + color: #ffffff; + border-width: 0; +} + .x-legend-container { + background: #2c2f33; + border-width: 0px; + border-radius: 0; + box-shadow: rgba(0, 0, 0, 0) 0 0px 0px; +} + .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 { + border-left: 0; + border-bottom: 0; +} +/* Treelist (The menu category per node) */ + .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 { + background: #2c2f33; + color: #ffffff; +} + .x-treelist-item-selected > .x-treelist-row { + background-color: #23272a; +} + .x-treelist-row-over { + color: yellow; +} + .x-treelist-row-over > * > .x-treelist-item-text{ + color: #7289da; + transition:color 0.5s +} + .x-treelist-row-over > * > .x-treelist-item-icon{ + color: #7289da; + transition:color 0.5s +} + .fa-ceph:before { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_cephwhite.png); +} + .x-treelist-row-over > * > .fa-ceph:before { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_cephblurp.png); + background-size: 14px 14px; + transition:background-image 0.5s +} + .x-toolbar-default { + border-top-width: 0; +} +/* Summary page - Load bars, icon color tweaks, and more */ + .x-progress { + background: #2c2f33; +} + .x-progress-bar { + background-color: #7289da !important; +} + .x-progress-text.x-progress-text-back, .x-progress-text { + color: #ffffff !important; +} + .x-component.x-box-item.x-component-default { + background: #23272a; +} + .x-panel-header { + background: #23272a; + border: 0; +} + .x-title-text { + color: #7289da; +} +/* Buttons */ + .x-btn { + background: #7289da; + border-width: 0; +} + .x-btn-inner, .x-btn-inner.x-btn-inner-default-small { + color: #ffffff; +} + #button-1030 { + background: #23272a; + border-width: 1px; + border-color: #d23d3f; +} + .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 { + background-color: #677bc4; +} + .x-btn.x-unselectable.x-box-item.x-toolbar-item.x-btn-default-toolbar-small.x-btn-menu-active { + background-color: #677bc4; +} + .x-btn-disabled { + background-image:none; + background-color: #737fab !important; +} +/* Specific button colors - white/green/red/yellow */ + .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 { + color: #ffffff; +} + .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 { + color: #43b581; +} + .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 { + color: #d23d3f; +} + .x-menu-item-icon-default.x-menu-item-icon.fa.fa-fw.fa-pause { + color: #faa61a; +} +/* Menus */ + .x-menu-item, .x-menu-default { + background: #7289da; + border-width: 0; + border-style: none; +} + .x-menu-item-text { + color: #ffffff; +} + .x-menu-item-default.x-menu-item-separator { + height: 0; + border-top-width: 0; + margin: 0 0; + padding: 0; +} + .x-menu-header { + border-width: 0; + border-radius: 1px; + background: #23272a; +} +/* Tooltips n Stuff! */ + [id^="tooltip"] { + background: #7289da; + color: #ffffff; + border-width: 0; +} + [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 { + background-color: #7289da; + color: #ffffff; + border-width: 0; + border-radius: 0; +} +/* Little graph button boyes on Summary page */ + .x-tool-img { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_tool-sprites.png); +} +/* Form boyes (such as Notes, Login, etc) */ + .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 { + background: #23272a; + border-bottom-width: 0; + border-right-width: 0; +} + .x-window-default{ + border-color: #23272a; + border-width: 0; + border-radius: 0; +} + .x-window-default{ + border-radius: 0; + padding:0 0 0 0; + border-width:0; + border-style: none; + background-color: #23272a; + box-shadow:none; +} + .x-window-default-mc{ + background-color: #23272a; +} + .x-window-body-default{ + border-width:0 !important; +} + .x-window-header-default-top{ + border-top-left-radius:0 !important; + border-top-right-radius:0!important; + border-bottom-right-radius:0!important; + border-bottom-left-radius:0!important; + padding:9px 9px 9px 9px; + border-width:0 !important; + background-color:#23272a; +} + .x-form-text, .x-form-item-label-inner-default, .x-window-text, .x-form-display-field, .x-component { + color: #ffffff; +} + .x-mask { + background-color: rgba(26, 26, 29, 0.27); +} + .x-toolbar-default { + border-width: 0; +} +/* Collapse boyes */ + .x-splitter-collapsed .x-layout-split-bottom { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_mini-top.png); +} + .x-layout-split-bottom { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_mini-bottom.png); +} +/* Tabs! */ + .x-tab { + background: #737fab; + border-width: 0; + color: #ffffff; +} + .x-tab-inner { + color: #ffffff; +} + .x-tab-active, .x-tab-over, .x-tab-default-focus, .x-tab-focus { + background: #7289da !important; + border-width: 0 !Important; +} + .x-tab-bar-body { + background: #23272a; +} + .x-tab-disabled { + background: #737fab !important; +} +/* Column boyes */ + .x-column-header-inner, .x-column-header-default, .x-grid-item, .x-grid-header-ct { + background: #2c2f33; + border-width: 0 !important; + border-top-width: 0 !Important; +} + .x-column-header-text-inner { + color: #ffffff; +} + .x-column-header-trigger { + border-color: #23272a; +} +/* Text color fixes */ + .x-toolbar-text.x-box-item.x-toolbar-item.x-toolbar-text-default, .x-grid-group-title { + color: #ffffff; +} +/* Panels for nodes and NodesView */ + [id^="pveNodeStatus"] { + background: #23272a; +} + div[id^="pveNotesView-"][id$="-innerCt"] { + background: #23272a; +} +/* Logo change test */ + img[src^="/pve2/images/proxmox_logo"] { + background: #23272a; + content: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_logo.png); +} + [id^="versioninfo"] { + background: #23272a; +} +/* Gauges and Canvas modification */ + [id^="proxmoxGauge"] { + background: #23272a; +} + div[id^="panel-"][id$="-body"] { + background: #23272a; +} + .x-surface-canvas { + border-radius: 3px; +} +/* Fieldset */ + .x-component.x-fieldset-header-text.x-component-default { + color: #ffffff; +} + .x-fieldset-default { + border: 1px solid #7289da; +} +/* Server list icons */ + .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 { + color: #7289da !important; +} +/* Group container boyes */ + .x-grid-group-hd.x-grid-group-hd-collapsible { + background: #23272a; + color: #ffffff; + border-width: 0; +} +/* Splitter */ + .x-splitter { + background: #23272a; +} +/* Scroller */ + .x-box-scroller, .x-box-scroller-body-vertical, .x-vertical-scroller, .x-toolbar-vertical-scroller, .x-toolbar-default-vertical-scroller { + background: #2c2f33 !important; +} +/* Header color fixes (NOT IN USE) div[id^="pveGuestStatusView-"][id$="_header-title-textEl"], div[id^="pveNotesView-"][id$="_header-title-textEl"], div[id^="proxmoxRRDChart"][id$="_header-title-textEl"], div[id^="pveNodeStatus"][id$="_header-title-textEl"], div[id^="pveDc"][id$="_header-title-textEl"], div[id^="panel-"][id$="_header-title-textEl"], div[id^="pveStorage"][id$="_header-title-textEl"], div[id^="pveStatusPanel"][id$="-placeholder-title-textEl"], div[id^="ext-comp-"][id$="_header-title-textEl"] { + background: #23272a; + color: #7289da; +} + */ +/* CPU/RAM/STORAGE/SWAP/etc icon color fixes */ + .pve-itype-icon-processor { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_icon-cpu.png); +} + .pve-itype-icon-memory { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_icon-ram.png); +} + .pve-itype-icon-storage { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_icon-hdd.png); +} + .pve-itype-icon-swap { + background-image: url(https://github.com/Weilbyte/PVEDiscordDark/raw/master/images/dd_icon-swap.png); +} +/* Datacenter Search icon color fix */ + .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 { + color: #7289da; +} + +/* Hide ugly scrollbars */ +html { + overflow: scroll; + overflow-x: hidden; +} +::-webkit-scrollbar { + width: 0px; /* remove scrollbar space */ + background: transparent; /* optional: just make scrollbar invisible */ +}