[Bug] Login UI Inconsistencies #347

Description

@sosweetham

Description

The login screens on the platforms are inconsistent, update to look better

Steps to reproduce

the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

Image

Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

Image

Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

Image

Expected behavior

should look as described

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

    , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
     blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
    }
    } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
    })();
    (function(){
    try {
    var __m = "github.com";
    var __re = new RegExp('^' + "github\\.com" + '
    
    Skip to content

    [Bug] Login UI Inconsistencies #347

    Description

    @sosweetham

    Description

    The login screens on the platforms are inconsistent, update to look better

    Steps to reproduce

    the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

    Image

    Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

    Image

    Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

    Image

    Expected behavior

    should look as described

    Metadata

    Metadata

    Assignees

    No one assigned

      Labels

      bugSomething isn't working

      Type

      No type

      Projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
      Skip to content

      [Bug] Login UI Inconsistencies #347

      Description

      @sosweetham

      Description

      The login screens on the platforms are inconsistent, update to look better

      Steps to reproduce

      the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

      Image

      Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

      Image

      Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

      Image

      Expected behavior

      should look as described

      Metadata

      Metadata

      Assignees

      No one assigned

        Labels

        bugSomething isn't working

        Type

        No type

        Projects

        Milestone

        No milestone

        Relationships

        None yet

        Development

        No branches or pull requests

        Issue actions

        , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
        Skip to content

        [Bug] Login UI Inconsistencies #347

        Description

        @sosweetham

        Description

        The login screens on the platforms are inconsistent, update to look better

        Steps to reproduce

        the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

        Image

        Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

        Image

        Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

        Image

        Expected behavior

        should look as described

        Metadata

        Metadata

        Assignees

        No one assigned

          Labels

          bugSomething isn't working

          Type

          No type

          Projects

          Milestone

          No milestone

          Relationships

          None yet

          Development

          No branches or pull requests

          Issue actions

          , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
          Skip to content

          [Bug] Login UI Inconsistencies #347

          Description

          @sosweetham

          Description

          The login screens on the platforms are inconsistent, update to look better

          Steps to reproduce

          the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

          Image

          Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

          Image

          Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

          Image

          Expected behavior

          should look as described

          Metadata

          Metadata

          Assignees

          No one assigned

            Labels

            bugSomething isn't working

            Type

            No type

            Projects

            Milestone

            No milestone

            Relationships

            None yet

            Development

            No branches or pull requests

            Issue actions

            , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
            Skip to content

            [Bug] Login UI Inconsistencies #347

            Description

            @sosweetham

            Description

            The login screens on the platforms are inconsistent, update to look better

            Steps to reproduce

            the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

            Image

            Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

            Image

            Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

            Image

            Expected behavior

            should look as described

            Metadata

            Metadata

            Assignees

            No one assigned

              Labels

              bugSomething isn't working

              Type

              No type

              Projects

              Milestone

              No milestone

              Relationships

              None yet

              Development

              No branches or pull requests

              Issue actions

              , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
              Skip to content

              [Bug] Login UI Inconsistencies #347

              Description

              @sosweetham

              Description

              The login screens on the platforms are inconsistent, update to look better

              Steps to reproduce

              the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

              Image

              Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

              Image

              Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

              Image

              Expected behavior

              should look as described

              Metadata

              Metadata

              Assignees

              No one assigned

                Labels

                bugSomething isn't working

                Type

                No type

                Projects

                Milestone

                No milestone

                Relationships

                None yet

                Development

                No branches or pull requests

                Issue actions

                , 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
                Skip to content

                [Bug] Login UI Inconsistencies #347

                Description

                @sosweetham

                Description

                The login screens on the platforms are inconsistent, update to look better

                Steps to reproduce

                the disclaimer is attracting too much attention and is left-aligned for some reason. Let’s make it center-aligned and less noticeable — it should be the least important text block on the screen. I suggest using a smaller font size and a lower-contrast text color.

                Image

                Pictique: The disclaimer text should be center-aligned, as well as the line about the eID. Also, let’s slightly reduce the font size of the eID text so it doesn’t break into two lines.

                Image

                Blabsy requires the most changes. First, let’s remove the second W3DS logo on the right. Second, let’s make the text blocks center-aligned, including the line about the eID, the W3DS logo, and all other blocks such as “Happening now” and “Join Blabsy today.” Finally, let’s make the texts about the eID and “60 seconds” more visible to draw attention to them, while making the disclaimer less prominent.

                Image

                Expected behavior

                should look as described

                Metadata

                Metadata

                Assignees

                No one assigned

                  Labels

                  bugSomething isn't working

                  Type

                  No type

                  Projects

                  Milestone

                  No milestone

                  Relationships

                  None yet

                  Development

                  No branches or pull requests

                  Issue actions