Skip to main content
Stack Apps

Return to Question

update 1.4: removed underline from the "Cancel" button on edits and tag edits
Source Link
VLAZ
VLAZ
  • 631
  • 1
  • 4
  • 12

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.24
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.s-tag,
    a.badge-tag,
    a.badge,
    header.s-topbar a.s-navigation--item,
    a.s-btn__filled[href$="/questions/ask"],
    a.cancel-edit,
    .popup-close a,
    .uql-nav a.s-btn,
    .s-btn[href*="/users/edit/"],
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 2px;
    }
}
 

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.2
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.s-tag,
    a.badge-tag,
    a.badge,
    header.s-topbar a.s-navigation--item,
    a.s-btn__filled[href$="/questions/ask"],
    .popup-close a,
    .uql-nav a.s-btn,
    .s-btn[href*="/users/edit/"],
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 2px;
    }
}
 

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.4
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.s-tag,
    a.badge-tag,
    a.badge,
    header.s-topbar a.s-navigation--item,
    a.s-btn__filled[href$="/questions/ask"],
    a.cancel-edit,
    .popup-close a,
    .uql-nav a.s-btn,
    .s-btn[href*="/users/edit/"],
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 2px;
    }
}

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

Update 1.3. Remove underlines from: Ask questions button; Edit profile button; Misc underline only in the whitespace in the Bounty filter on /questions page
Source Link
VLAZ
VLAZ
  • 631
  • 1
  • 4
  • 12

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.2
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.s-tag,
    a.badge-tag,
    a.badge,
    header.s-topbar a.s-navigation--item,
    a.s-btn__filled[href$="/questions/ask"],
    .popup-close a,
    .uql-nav a.s-btn,
    .s-btn[href*="/users/edit/"],
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 3px;2px;
    }
} 

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.2
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.badge-tag,
    a.badge,
    .popup-close a,
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 3px;
    }
}

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

Stack Exchange introduced some excessive underlining in high contrast mode. This is visually very busy and overzealous application of underlines. Literally every link will be matched by their CSS, since the rule is for body.theme-highcontrast a - all links in high contrast themes.

This userstyle attempts to tone down the usage of underlines. Main points:

  1. Disabling underlines on elements that do not necessarily need it like lists of links or the tags.
  2. The underline itself is moved further from the corresponding text to make it more readable.

It also works on non-high contrast mode but mostly 2. would take effect there.

/* ==UserStyle==
@name         Stack Overflow undelines improvements
@description  Improvements for undelines. Mainly for high contrast mode but will work on other ones 
@namespace    https://github.com/PurpleMagick/
@version      1.2
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {
    .user-details a,
    a.my-profile,
    a.js-products-menu,
    a.comment-user,
    a.post-tag,
    a.s-tag,
    a.badge-tag,
    a.badge,
    header.s-topbar a.s-navigation--item,
    a.s-btn__filled[href$="/questions/ask"],
    .popup-close a,
    .uql-nav a.s-btn,
    .s-btn[href*="/users/edit/"],
    #products-popover a,
    #sidebar a {
        text-decoration: initial !important;
    }

    a,
    .s-btn__link {
        text-underline-offset: 2px;
    }
} 

Hosted version (on GitHub)

Examples:

Question page

Before:

After:

Products menu

Before:

After:

Close dialog

Before:

After:

edited tags; edited title
Link
Glorfindel ♦
Glorfindel ♦
  • 6.9k
  • 3
  • 22
  • 49

Fix excessive underlines in high contrast mode

Source Link
VLAZ
VLAZ
  • 631
  • 1
  • 4
  • 12