From d6d76b5d59651e63a665fb006673fbb856c36388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Andreas=20Nilsen?= Date: Tue, 23 Sep 2025 14:53:35 +0200 Subject: [PATCH] added modern bas css --- modern-bas.css | 4 +- modern-bas.user.js | 169 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 modern-bas.user.js diff --git a/modern-bas.css b/modern-bas.css index 575babc..1ee413a 100644 --- a/modern-bas.css +++ b/modern-bas.css @@ -220,7 +220,9 @@ body { text-decoration: none; color: var(--link-color); border: 1px solid transparent; - border-radius: var(--bs-border-radius); + border-top-left-radius: var(--bs-border-radius); + border-top-right-radius: var(--bs-border-radius); + #border-radius: var(--bs-border-radius); margin-right: 0.25rem; transition: all 0.15s ease-in-out; } diff --git a/modern-bas.user.js b/modern-bas.user.js new file mode 100644 index 0000000..719e4b5 --- /dev/null +++ b/modern-bas.user.js @@ -0,0 +1,169 @@ +// ==UserScript== +// @name Modern BAS CSS +// @namespace http://tampermonkey.net/ +// @version 1.0 +// @description Apply modern styling to BAS/Cereweb with toggle between modern and classic +// @author Øyvind Nilsen (on@ntnu.no) +// @match https://bas.ntnu.no/* +// @resource modernCSS https://raw.git.ntnu.no/M365-Drift/MonkeyMagic/main/modern-bas.css +// @grant GM_addStyle +// @grant GM_getResourceText +// @grant GM_setValue +// @grant GM_getValue +// @updateURL https://git.ntnu.no/M365-Drift/MonkeyMagic/raw/main/modern-bas.user.js +// @downloadURL https://git.ntnu.no/M365-Drift/MonkeyMagic/raw/main/modern-bas.user.js +// ==/UserScript== + +(function() { + 'use strict'; + + let modernStyleElement = null; + let isModernMode = GM_getValue('modernMode', true); // Default to modern + + // Create toggle button + function createToggleButton() { + const toggleButton = document.createElement('div'); + toggleButton.id = 'bas-style-toggle'; + toggleButton.innerHTML = ` + + `; + + // Add hover effects + const button = toggleButton.querySelector('#style-toggle-btn'); + button.addEventListener('mouseenter', () => { + button.style.transform = 'scale(1.05)'; + button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)'; + }); + + button.addEventListener('mouseleave', () => { + button.style.transform = 'scale(1)'; + button.style.boxShadow = '0 2px 8px rgba(0,0,0,0.2)'; + }); + + // Add click handler + button.addEventListener('click', toggleStyle); + + document.body.appendChild(toggleButton); + return button; + } + + function applyModernStyle() { + if (!modernStyleElement) { + const cssContent = GM_getResourceText('modernCSS'); + modernStyleElement = GM_addStyle(cssContent); + console.log('βœ… Modern BAS CSS applied'); + } + + // Enable modern style + if (modernStyleElement && modernStyleElement.sheet) { + modernStyleElement.sheet.disabled = false; + } + + // Disable old stylesheets + document.querySelectorAll('link[rel="stylesheet"]').forEach(link => { + /*if (link.href.includes('/css/style.css') || + link.href.includes('yui') || + link.href.includes('default.css')) {*/ + if (link.href.includes('/css/style.css') || link.href.includes('border_tabs')) { + link.disabled = true; + } + }); + } + + function applyClassicStyle() { + // Disable modern style + if (modernStyleElement && modernStyleElement.sheet) { + modernStyleElement.sheet.disabled = true; + } + + // Re-enable old stylesheets + document.querySelectorAll('link[rel="stylesheet"]').forEach(link => { + /*if (link.href.includes('/css/style.css') || + link.href.includes('yui') || + link.href.includes('default.css')) {*/ + if (link.href.includes('/css/style.css') || link.href.includes('border_tabs')) { + link.disabled = false; + } + }); + + console.log('βœ… Classic BAS CSS restored'); + } + + function toggleStyle() { + isModernMode = !isModernMode; + GM_setValue('modernMode', isModernMode); + + const button = document.getElementById('style-toggle-btn'); + + if (isModernMode) { + applyModernStyle(); + button.textContent = '🎨 Modern'; + button.style.background = '#0d6efd'; + } else { + applyClassicStyle(); + button.textContent = 'πŸ“° Classic'; + button.style.background = '#6c757d'; + } + + // Add a brief animation to show the change + button.style.transform = 'scale(0.95)'; + setTimeout(() => { + button.style.transform = 'scale(1)'; + }, 150); + + console.log(`Switched to ${isModernMode ? 'Modern' : 'Classic'} mode`); + } + + function initializeStyles() { + // Load the modern CSS resource + const cssContent = GM_getResourceText('modernCSS'); + modernStyleElement = GM_addStyle(cssContent); + + // Apply the appropriate style based on saved preference + if (isModernMode) { + applyModernStyle(); + } else { + applyClassicStyle(); + } + + // Create the toggle button + createToggleButton(); + } + + // Wait for DOM to be ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeStyles); + } else { + initializeStyles(); + } + + // Handle page navigation (for SPAs) + let currentUrl = location.href; + new MutationObserver(() => { + if (location.href !== currentUrl) { + currentUrl = location.href; + // Re-create toggle button if it was removed + if (!document.getElementById('bas-style-toggle')) { + setTimeout(createToggleButton, 100); + } + } + }).observe(document, { subtree: true, childList: true }); +})(); \ No newline at end of file