fonts.user.styl

/* ==UserStyle==
@name         Custom fonts
@namespace    github.com/vednoc/custom-fonts
@description  Apply your favorite custom fonts with ease.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://github.com/vednoc/custom-fonts
@supportURL   https://github.com/vednoc/custom-fonts/issues
@updateURL    https://userstyles.world/api/style/85.user.css
@preprocessor stylus
@version      0.6.0
@license      MIT

@var text base 'Set your favorite Base font' 'null'
@var select baseStyle 'Base font style' {
    'Default*': 'null',
    'Normal  ': 'normal',
    'Italic  ': 'italic',
    'Oblique ': 'oblique',
}
@var select baseWeight 'Base font weight' {
    'Default     *': 'null',
    '100          ': '100',
    '200          ': '200',
    '300          ': '300',
    '400 (Normal) ': '400',
    '500          ': '500',
    '600          ': '600',
    '700 (Bold)   ': '700',
    '800          ': '800',
    '900          ': '900',
}

@var text mono 'Set your favorite Mono font' 'null'
@var select monoStyle 'Mono font style' {
    'Default*': 'null',
    'Normal  ': 'normal',
    'Italic  ': 'italic',
    'Oblique ': 'oblique',
}
@var select monoWeight 'Mono font weight' {
    'Default     *': 'null',
    '100          ': '100',
    '200          ': '200',
    '300          ': '300',
    '400 (Normal) ': '400',
    '500          ': '500',
    '600          ': '600',
    '700 (Bold)   ': '700',
    '800          ': '800',
    '900          ': '900',
}

@var checkbox letterSpacing 'Reset letter-spacing to 0px' 0

@var checkbox inputs 'Use Mono font in input areas' 0

==/UserStyle== */

icons       = ()
code        = ()
composer    = ()
bold        = ()

// Exclude default code areas.
append(code, 'code', 'pre', '.pre')

// Exclude icon fonts.
append(icons, '.i', '.icon', '[class*=icon]')
append(icons, '.fa', '.fab', '.fad', '.fal', '.far', '.fas')
append(icons, '.fa-solid', '.fa-regular', '.fa-light', '.fa-duotone', '.fa-thin', '.fa-sharp', '.fa-brands')
append(icons, '[class*=octicon-]') // github
append(icons, '.glyphicon') // searx
append(icons, '[aria-hidden=true]') // google meet
append(icons, '[class*=material-icons]') // material icons
append(icons, '[class*=icofont]') // icofont icons
append(icons, '[class*=selector__glyph][data-bind]') // fontello icons

// Exclude icons on DuckDuckGo.
append(icons, 'input[id^=search][type=submit][value=S]') // search bar
append(icons, '[class*=js-side-menu-]') // navbar menu
append(icons, '.ddgsi', '.btn--icon') // misc icons

// Exclude code areas on GitHub.
append(code, '[class^=blob-]', '.react-code-text', '#read-only-cursor-text-area', '.code-navigation-cursor')

// Exclude code areas on GitLab.
append(code, '.diff-line-num')
append(code, '.diff-viewer') // commit diff

// Exclude various text editors.
append(code, '.ace_editor') // #2
append(code, '.CodeMirror', '.cm-editor .cm-scroller')
append(code, '.monaco-editor')
append(composer, '#squire') // protonmail

// Gmail composer and font menu. #3
append(icon, 'div[jsaction][jslog]', '[id][style*=font-family]')

// Exclude utility classes for fonts.
append(code, '.monospace', '.text-mono', '.font-mono', '[class*=monospace]')

// mathjax
append(icons, 'mjx-math')

// Lightbox. #12
append(icons, '.fancybox-button')

// Microsoft icons. #12
append(icons, '[data-icon-name]')

// Telegram Web
append(icons, '[class*=tgico-]')

append(composer, 'textarea')

// Discord
append(composer, '[data-slate-editor=true]', '[class*=channelTextArea-]')

// Gmail #3
append(composer, '[contenteditable=true]', '[g_editable]')

// inputs, but not of button type #6
append(composer, 'input:not([name=subjectbox]):not([type=button]):not([type=submit]):not([type=reset])')

// Github search
append(composer, '.QueryBuilder-StyledInputContainer')

// don't change the weight of headers and bold text
append(bold, 'strong', 'b', '[class*=bold]', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6')

// Add children elements.
append(icons, i + ' *') for i in icons
append(code, i + ' *') for i in code
append(composer, i + ' *') for i in composer
append(bold, i + ' *') for i in bold

$bold = join(', ', bold)
$code = join(', ', code)
$icons = join(', ', icons)
$composer = join(', ', composer)

@-moz-document regexp('(file|https?|(chrome|moz)-extension)://.+') {

    // make sure to include all selectors that get different fonts int the :not
    :not({ join(', ', $icons, $code, $composer, 'body > div') }) {
        font-family: base       !important if base
        font-style:  baseStyle  !important if baseStyle
        letter-spacing: 0px     !important if letterSpacing
    }

    :not({ $bold }) {
        font-weight: baseWeight            if baseWeight
    }

    { $code } {
        font-family: mono       !important if mono
        font-style:  monoStyle  !important if monoStyle
        font-weight: monoWeight            if monoWeight
        letter-spacing: 0px     !important if letterSpacing
    }

    { $composer } {
        if inputs {
            font-family: mono       !important if mono
            font-style:  monoStyle  !important if monoStyle
            font-weight: monoWeight            if monoWeight
            letter-spacing: 0px     !important if letterSpacing
        } else {
            font-family: base       !important if base
            font-style:  baseStyle  !important if baseStyle
            font-weight: baseWeight            if baseWeight
            letter-spacing: 0px     !important if letterSpacing
        }
    }
}

@-moz-document regexp('https?://(www\.)?github.com/.*') {
    { 'body > div' } {
        font-family: mono       !important if mono
        font-style:  monoStyle  !important if monoStyle
        font-weight: monoWeight            if monoWeight
        letter-spacing: 0px     !important if letterSpacing
    }
}