User:Euphoria/common.js: Difference between revisions

From Test Wiki
Content deleted Content added
fix
fix
Line 11: Line 11:


const container = document.createElement('span');
const container = document.createElement('span');
container.style.marginLeft = '8px';
container.style.marginLeft = '6px';


const actions = [
const actions = [
Line 21: Line 21:
actions.forEach(function(actionObj) {
actions.forEach(function(actionObj) {
const btn = document.createElement('button');
const btn = document.createElement('button');
btn.textContent = actionObj.name.charAt(0).toUpperCase() + actionObj.name.slice(1);
btn.textContent = actionObj.name.charAt(0).toUpperCase(); // only first letter for extra small


// Small, compact styling
// Very small compact styling
btn.style.width = '16px'; // fixed tiny width
btn.style.height = '16px';
btn.style.fontSize = '65%';
btn.style.padding = '0';
btn.style.marginRight = '3px';
btn.style.marginRight = '3px';
btn.style.fontSize = '75%';
btn.style.padding = '1px 4px';
btn.style.border = 'none';
btn.style.border = 'none';
btn.style.borderRadius = '3px';
btn.style.borderRadius = '2px';
btn.style.backgroundColor = actionObj.color;
btn.style.backgroundColor = actionObj.color;
btn.style.color = '#fff';
btn.style.color = '#fff';
btn.style.cursor = 'pointer';
btn.style.cursor = 'pointer';
btn.style.verticalAlign = 'middle';
btn.style.verticalAlign = 'middle';
btn.style.transition = '0.2s'; // smooth hover transition
btn.style.transition = '0.15s';


// Hover effect
// Hover effect
btn.addEventListener('mouseenter', function() {
btn.addEventListener('mouseenter', function() {
btn.style.filter = 'brightness(1.2)';
btn.style.filter = 'brightness(1.3)';
});
});
btn.addEventListener('mouseleave', function() {
btn.addEventListener('mouseleave', function() {