added modern bas css

M365-Drift · Sep 23, 2025 · d6d76b5 · d6d76b5
1 parent 90539e4
commit d6d76b5
Show file tree

Hide file tree

Showing 2 changed files with 172 additions and 1 deletion.
diff --git 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
@@ -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 = `
+            <button id="style-toggle-btn" style="
+                position: fixed;
+                top: 10px;
+                right: 10px;
+                z-index: 10000;
+                background: ${isModernMode ? '#0d6efd' : '#6c757d'};
+                color: white;
+                border: none;
+                border-radius: 6px;
+                padding: 8px 16px;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+                transition: all 0.3s ease;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            ">
+                ${isModernMode ? '🎨 Modern' : '📰 Classic'}
+            </button>
+        `;
+
+        // 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 });
+})();