TeamDesk Knowledge Base & Support

basenine 5/19/2026 6:35:08 PM

I got some AI assistance and it came up with this (try in test dev and apply to dbscript-v3.js --> for use with v3 UI):

document.addEventListener('DOMContentLoaded', function () {
const head = document.head || document.getElementsByTagName('head')[0];

// ------------------------------------------------------------
// 1. Load Google Font: Poppins
// ------------------------------------------------------------
function addLink(rel, href, options = {}) {
if (document.querySelector(`link[href="${href}"]`)) return;

const link = document.createElement('link');
link.rel = rel;
link.href = href;

Object.keys(options).forEach(key => {
link[key] = options[key];
});

head.appendChild(link);
}

addLink('preconnect', 'https://fonts.googleapis.com');
addLink('preconnect', 'https://fonts.gstatic.com', {
crossOrigin: 'anonymous'
});

addLink(
'stylesheet',
'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'
);

// ------------------------------------------------------------
// 2. Add viewport meta if missing
// ------------------------------------------------------------
if (!document.querySelector('meta[name="viewport"]')) {
const metaViewport = document.createElement('meta');
metaViewport.name = 'viewport';
metaViewport.content = 'width=device-width, initial-scale=1';
head.appendChild(metaViewport);
}

// ------------------------------------------------------------
// 3. Global TeamDesk font styling
// ------------------------------------------------------------
const style = document.createElement('style');
style.id = 'basenine-teamdesk-global-font-style';

style.textContent = `
html,
body,
table,
td,
th,
input,
select,
textarea,
button {
font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
}

body {
font-size: 14px;
line-height: 1.45;
}

.td-mark.v3-mark, .v3-button-default {
font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
line-height: 1.35;
font-weight: 500;
border-radius: 999px;
transition:
font-size 0.15s ease,
background-color 0.15s ease,
color 0.15s ease,
border-color 0.15s ease;
}

`;

if (!document.getElementById(style.id)) {
head.appendChild(style);
}

// ------------------------------------------------------------
// 4. Convert TeamDesk mark background into soft badge styling
// ------------------------------------------------------------
function parseRgbColour(colour) {
if (!colour) return null;

const rgbMatch = colour.match(/rgba?\(([^)]+)\)/i);
if (!rgbMatch) return null;

const parts = rgbMatch[1].split(',').map(part => part.trim());

const r = parseFloat(parts[0]);
const g = parseFloat(parts[1]);
const b = parseFloat(parts[2]);

if ([r, g, b].some(value => Number.isNaN(value))) return null;

return { r, g, b };
}

function isTransparent(colour) {
if (!colour) return true;

const clean = colour.trim().toLowerCase();

return (
clean === 'transparent' ||
clean === 'rgba(0, 0, 0, 0)' ||
clean === 'rgba(0,0,0,0)'
);
}

function styleMarkColour(el) {
if (!el) return;

const computedStyle = window.getComputedStyle(el);

// Store the original TeamDesk background colour before we overwrite it.
if (!el.dataset.originalMarkBg) {
const bg = computedStyle.backgroundColor;

if (!isTransparent(bg)) {
el.dataset.originalMarkBg = bg;
}
}

const originalBg = el.dataset.originalMarkBg;
const rgb = parseRgbColour(originalBg);

if (!rgb) return;

const solidColour = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
const softColour = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.25)`;

el.style.color = solidColour;
el.style.border = `1.5px solid ${solidColour}`;
el.style.backgroundColor = softColour;
}

// ------------------------------------------------------------
// 5. Responsive font sizing for .td-mark.v3-mark elements
// ------------------------------------------------------------
function setMarkFontSize(el) {
if (!el) return;

const width = el.getBoundingClientRect().width;

if (width < 200) {
el.style.fontSize = '0.8em';
} else if (width < 400) {
el.style.fontSize = '1em';
} else {
el.style.fontSize = '1.2em';
}
}

function processMark(el) {
setMarkFontSize(el);
styleMarkColour(el);
}

function observeMarks() {
const marks = document.querySelectorAll('.td-mark.v3-mark');

if (!marks.length) return;

if ('ResizeObserver' in window) {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
processMark(entry.target);
});
});

marks.forEach(mark => {
processMark(mark);
resizeObserver.observe(mark);
});
} else {
marks.forEach(processMark);

window.addEventListener('resize', function () {
marks.forEach(processMark);
});
}
}

// ------------------------------------------------------------
// 6. Watch for TeamDesk dynamic loading / changes
// ------------------------------------------------------------
let attempts = 0;
const maxAttempts = 20;

const markInterval = setInterval(function () {
observeMarks();

attempts += 1;

if (
document.querySelectorAll('.td-mark.v3-mark').length > 0 ||
attempts >= maxAttempts
) {
clearInterval(markInterval);
}
}, 250);

// TeamDesk sometimes injects/updates content after page load.
const pageObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (!(node instanceof HTMLElement)) return;

if (node.matches && node.matches('.td-mark.v3-mark')) {
processMark(node);
}

const nestedMarks = node.querySelectorAll
? node.querySelectorAll('.td-mark.v3-mark')
: [];

nestedMarks.forEach(processMark);
});
});
});

pageObserver.observe(document.body, {
childList: true,
subtree: true
});
});

Hope you find it useful