Enhance dashboard appearance
// ==UserScript==
// @name Better Dashboard
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Enhance dashboard appearance
// @author Paul Braswell (Siepe)
// @match http://manage.siepe.local/ConnectwiseTools/ServiceBoard/IT
// @icon https://www.google.com/s2/favicons?sz=64&domain=siepe.local
// @grant none
// ==/UserScript==
(function() {
'use strict';
const styles = `
@keyframes flicker {
0%, 100% { background-color: red; }
50% { background-color: green; }
}
.christmas-lights {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 400px; /* Adjusted for larger size */
background: url('https://yopropsdigital.com/cdn/shop/products/[email protected]?v=1574201369') repeat-x;
background-size: auto 400px; /* Scaled to 3x the original height */
z-index: 10000;
}
@keyframes move-and-flip {
0% {
left: 90%;
transform: scaleX(1);
}
24% {
left: 52%;
transform: scaleX(1);
}
25% {
left: 50%;
transform: scaleX(1);
}
50% {
left: 10%;
transform: scaleX(1);
}
52% {
left: 10%;
transform: scaleX(-1);
}
73% {
left: 47%;
transform: scaleX(-1);
}
75% {
left: 50%;
transform: scaleX(-1);
}
77% {
left: 53%;
transform: scaleX(-1);
}
98% {
left: 90%;
transform: scaleX(-1);
}
100% {
left: 90%;
transform: scaleX(1);
}
}
.snowflake {
position: fixed;
top: -10px;
color: white;
user-select: none;
z-index: 9999;
animation-name: fall;
animation-timing-function: linear;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
.halloween-pumpkin-background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://i.imgur.com/VK2dgW3.png') repeat; /* Tiled background */
background-size: 170px 170px; /* Size of each tile */
opacity: 0.1; /* Adjust for desired opacity */
z-index: 9998; /* Behind the pumpkin */
}
:root {
--table-bg-color: #1a1a1a;
--table-head-bg-color: #2b2b2b;
--table-head-secondary-bg-color: #3c3c3c;
--table-head-border-color: rgba(60, 60, 60, 0.5);
--table-footer-border-color: #2b2b2b;
--table-footer-cell-border-color: rgba(60, 60, 60, 0.5);
--table-footer-bg-color: #2b2b2b;
--table-head-color: #4d4d4d;
--table-striped-row-color: #1a1a1a;
--table-striped-alt-row-color: #121212;
--table-striped-alt-row-hover-color: #0a0a0a;
--table-border-color: #2b2b2b;
--table-borderless-border-color: #2b2b2b;
--table-borderless-bg-color: transparent;
--table-foot-bg-color: transparent;
--table-danger-bg-color: #2b1a1a;
--table-danger-color: #3c3c3c;
--table-warning-bg-color: #2b2b1a;
--table-warning-color: #3c3c3c;
--table-column-filter-color: #4d4d4d;
--table-column-filter-active-color: #5e5e5e;
--col-filter-active-bg-color: rgba(60, 60, 60, 0.15);
--col-filter-active-color: #5e5e5e;
--table-grouping-row-bg-color: #0a0a0a;
--table-pager-border-color: rgba(60, 60, 60, 0.5);
--cell-selected-bg-color: #3c3c3c;
--cell-selected-border-color: #4d4d4d;
--grid-toolbar-button-color: #4d4d4d;
--grid-toolbar-button-bg-color: #1a1a1a;
--grid-toolbar-border-color: #4d4d4d;
--row-selected-bg-color: #3c3c3c;
--empty-grid-bg-color: #3c3c3c;
--empty-grid-border-color: rgba(77, 77, 77, 0.5);
--empty-grid-color: #4d4d4d;
--ag-column-resize-handle-color: #4d4d4d;
--modal-header-color: #4d4d4d;
--modal-header-border-color: #3c3c3c;
--modal-header-bg-color: #1a1a1a;
--modal-footer-bg-color: #121212;
--modal-footer-border-color: #2b2b2b;
--modal-content-bg-color: #1a1a1a;
--modal-body-bg-color: #1a1a1a;
--modal-close-btn-color: #4d4d4d;
--modal-drop-shadow: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
--modal-dialog-content-bg-color: #1a1a1a;
--modal-dialog-body-bg-color: #1a1a1a;
--modal-dialog-footer-bg-color: #1a1a1a;
--modal-scroller-bg-color: rgba(60, 60, 60, 0.75);
--tab-bg-color: transparent;
--tab-color: #4d4d4d;
--tab-border-color: #4d4d4d;
--tab-active-color: #5e5e5e;
--tab-active-border-color: #5e5e5e;
--tab-active-bg-color: transparent;
--tab-content-bg-color: transparent;
--tab-dropdown-bg-color: #1a1a1a;
--tab-dropdown-color: #3c3c3c;
--tab-dropdown-hover-color: #4d4d4d;
--tab-dropdown-hover-bg-color: #5e5e5e;
--tab-modal-body-bg-color: #3c3c3c;
--tab-modal-content-bg-color: transparent;
--tab-hover-bg-color: #3c3c3c;
--tab-dropdown-active-bg-color: #3c3c3c;
--tab-dropdown-active-check-color: #5e5e5e;
--panel-heading-bg-color: #1a1a1a;
--panel-heading-color: #3c3c3c;
--panel-footer-bg-color: #1a1a1a;
--panel-footer-color: #2b2b2b;
--panel-body-bg-color: #121212;
--panel-bg-color: #121212;
--panel-border-color: #1a1a1a;
--list-panel-heading-bg-color: #1a1a1a;
--list-panel-heading-color: #2b2b2b;
--list-panel-item-bg-color: #121212;
--list-panel-bg-color: #121212;
--list-panel-item-color: #2b2b2b;
--list-panel-border-color: #1a1a1a;
--list-panel-drop-shadow: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
--list-panel-item-hover-bg-color: #0a0a0a;
--panel-link-color: #2b2b2b;
--panel-badge-primary-bg-color: #1a1a1a;
--panel-badge-primary-hover-bg-color: #1a1a1a;
--panel-link-hover-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.4), 0 8px 10px 1px rgba(0, 0, 0, 0.3), 0 3px 14px 2px rgba(0, 0, 0, 0.2);
--panel-empty-bg-color: #1a1a1a;
--panel-empty-border-color: rgba(0, 0, 0, 0.5);
--panel-empty-color: #2b2b2b;
--panel-list-heading-bg-color: #1a1a1a;
--pager-btn-bg-color: transparent;
--pager-btn-border-color: #1a1a1a;
--pager-btn-color: rgba(60, 60, 60, 0.75);
--pager-btn-active-color: #2b2b2b;
--pager-btn-active-bg-color: rgba(0, 0, 0, 0.25);
--pager-btn-active-border-color: rgba(0, 0, 0, 0.75);
--pager-btn-arrow-color: #2b2b2b;
--pager-btn-arrow-bg-color: transparent;
--pager-btn-hover-color: rgba(60, 60, 60, 0.75);
--pager-btn-hover-bg-color: rgba(0, 0, 0, 0.1);
--pager-btn-hover-border-color: rgba(0, 0, 0, 0.25);
--pager-dropdown-border-color: rgba(0, 0, 0, 0.5);
--pager-dropdown-active-border-color: rgba(0, 0, 0, 0.75);
--pager-dropdown-color: #2b2b2b;
--pager-dropdown-bg-color: #1a1a1a;
--scroller-bg-color: #121212;
--scroller-fg-color: #292929;
}
* {
color: white !important;
}
.text-danger {
color: red !important;
}
.text-success {
color: limegreen !important;
}
/*
.halloween-pumpkin {
position: fixed;
top: 33%;
left: 5%;
width: 170px;
height: 170px;
background: url('https://i.imgur.com/MzLs30I.png') no-repeat center center;
background-size: contain;
z-index: 9999;
}
*/
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html, body {
scrollbar-width: none;
-ms-overflow-style: none;
}
body {
background-color: black !important;
}
.special-gif {
position: fixed;
top: 73%;
left: 90%;
width: 178px;
height: 100px;
background: url('https://i.imgur.com/3Md5nLX.gif') no-repeat center center;
background-size: contain;
z-index: 9999;
animation: move-and-flip 30s linear infinite;
}
`;
const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);
const pumpkin = document.createElement('div');
pumpkin.className = 'halloween-pumpkin';
document.body.appendChild(pumpkin);
const gifElement = document.createElement('div');
gifElement.className = 'special-gif';
document.body.appendChild(gifElement);
const pumpkinBackground = document.createElement('div');
pumpkinBackground.className = 'halloween-pumpkin-background';
document.body.appendChild(pumpkinBackground);
const christmasLights = document.createElement('div');
christmasLights.className = 'christmas-lights';
document.body.appendChild(christmasLights);
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.textContent = '❄';
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
document.body.appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 5000);
}
setInterval(createSnowflake, 100);
})();