DuckDuckGo - Wider, Prettier and Customizable

Customizable UserCSS for DuckDuckGo

/* ==UserStyle==
@name           DuckDuckGo - Wider, Prettier and Customizable
@description    Customizable UserCSS for DuckDuckGo
@author         krisu (https://github.com/krisu5)
@namespace      github.com/krisu5/userstyles
@homepageURL    https://github.com/krisu5/userstyles/tree/master/DuckDuckGo%20-%20Wider%20Prettier%20and%20Customizable
@supportURL     https://github.com/krisu5/userstyles/issues
@version        1.0.9
@license        unlicense
@preprocessor   stylus
@var checkbox   ibm-plex-font      "Use 'IBM Plex Sans' font (needs installation)"              0
@var checkbox   wideScreen         "Wider layout (for 1920px+ wide resolution)"                 1
@var checkbox   biggerFont         "Bigger font (recommended when 'Wider layout' is enabled)"   1
@var checkbox   hideCheckmark      "Force hide visited link checkmark"                          0
@var checkbox   sidebarAnimation   "Delay showing sidebar in the pageload"                      1
@var checkbox   hideFeedback       "Hide feedback & promo related links"                        0
==/UserStyle== */

@-moz-document domain("duckduckgo.com") {

/* ==============================================================
   === [TOGGLE] Use "IBM Plex Sans" font (needs installation) ===
   ============================================================== */
    
if ibm-plex-font {
    /*
    ###################
    ## INSTALL FONTS ##
    ###################
    
    - Get the fonts:
      https://github.com/IBM/plex/releases/latest
      (TrueType recommended for Windows, for others use OpenType)
       
    - Go to "IBM-Plex-Sans" folder and install AT LEAST these fonts:
         - Bold
         - BoldItalic
         - Italic
         - Medium
         - MediumItalic
         - Regular
         - SemiBold
         - SemiBoldItalic
    */
    
    :root {
        --ibm-fontstack-1: "IBM Plex Sans", "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif;
        
        --ibm-fontstack-2: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif;
        
        --ibm-fontstack-3: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif;
    }
    
    body, *:not(.play_pause) a               { font-family: var(--ibm-fontstack-1); }
    
    input, textarea                          { font-family: var(--ibm-fontstack-1) !important; }

    #zero_click_wrapper *:not(option):not(a) { font-family: var(--ibm-fontstack-2); }
        
    #zero_click_wrapper option               { font-family: var(--ibm-fontstack-3); }
    
    .zci--timer .corner_btn.add_minute { line-height: 1.5em; }
        
    .zci--timer .corner_btn.close {
        top: -5px !important;
        right: 5px !important;
    }
    
    :is(#links, [data-testid="result"]) :where(h2, h3) {
        padding-bottom: 2px;
        font-weight: 500 !important;
    }
    
    [data-testid="result-title-a"] {
        font-weight: 500 !important;
    }
        
    .about-profiles__link { font-size: 0.8em; }
        
    .about-profiles__item { padding-top: 13px; }
}


/* ===========================================================
   === [TOGGLE] Wider layout (for 1920px+ wide resolution) ===
   =========================================================== */

if wideScreen {
    @media (min-width: 1460px) {
        .cw { max-width: 1700px; }

        .header__search-wrap, .zcm-wrap--header { max-width: 905px; }

        .header__search-wrap, .content__internal { padding-right: 0; }

        .modal--dropdown--settings.is-showing { margin-left: -108px; }

        .results--main, [data-testid="mainline"] {
            max-width: 900px !important;
            margin-right: 50px;
        }
        
        [data-testid="mainline"] {
          -webkit-flex: 0 0 900px !important;
          flex: 0 0 900px !important;
        }
        
        .result__sitelink-col { width: 415px !important; }

        .result--more {
            width: 920px;
            margin-left: -10px;
        }

        .module--carousel__item:not(:last-child) { margin-right: 1.6%; }
            
        .module--places { max-width: inherit; }
            
        .sitelink {
            width: 265px;
            padding-left: 35px;
        }
            
        .sitelink:nth-child(2n-1) { padding-right: inherit; }
            
        .is-link-style-exp:not(.is-mobile):not(.is-mobile-device) #links .results_links_deep { max-width: unset !important; }
    }
}


/* =========================================================================
   === [TOGGLE] Bigger font (recommended when "Wider layout" is enabled) ===
   ========================================================================= */
    
if biggerFont {
    html { font-size: 99%; }
    
    #zci-color_picker { font-size: 14px; }
        
    .module__link--two-line { font-size: 1.6em; }
        
    .zci--stopwatch .goodie-pane { width: 39.5%; }
        
    if ibm-plex-font {
        .result__sitelink-title {
            font-size: 1.12em;
            letter-spacing: 0.01em;
        }
    }
}


/* ==================================================
   === [TOGGLE] Force hide visited link checkmark ===
   ================================================== */

if hideCheckmark {
    .result__check { display: none; }
}

    
/* ======================================================
   === [TOGGLE] Delay showing sidebar in the pageload ===
   ====================================================== */

if sidebarAnimation {
    .results--sidebar {
        animation: showSidebar 0.65s ease-in-out 0.65s forwards;
        /* animation time = approximated load time for search results links */
        opacity: 0;
    }

    @keyframes showSidebar { to { opacity: 1; } }
}


/* ====================================================
   === [TOGGLE] Hide feedback & promo related links ===
   ==================================================== */

if hideFeedback {
    .feedback-btn, [class^="feedback-prompt"], .header--text_promo, [data-layout="spreadCTA"] { display: none; }
}


/* ===============
   === Results ===
   =============== */

:is(#links, .react-results--main) article:hover {
    background: hsl(0, 0%, 98%);
    border-color: var(--theme-col-border-ui);
}

:is(#links, .react-results--main) h3:hover { text-decoration: underline; }

#links img[src^="//external-content.duckduckgo.com"],
.react-results--main [src^="/assets/icons/favicons/"] { margin-top: -4px; }

.result__a, [data-testid="result-title-a"] { line-height: 1.3; }


/* =========================
   === Results seperator ===
   ========================= */

.result__pagenum, [arial-label^="Page "] span {
    font-size: 15px !important;
    margin-top: -4px;
    min-width: unset !important;
}

.result__pagenum--side {
    padding: 5px 10px;
    background-color: #fafafa;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
}

[arial-label^="Page "] span {
    padding: 5px 12px;
    background-color: #fafafa !important;
    border-radius: 50%;
    border: 1px solid #d9d9d9 !important;
}

.result--sep { margin: 1em auto 1.25em; }

.result--sep--hr::before, [arial-label^="Page "] hr {
    background-color: #d9d9d9 !important;
    border-top: 1px solid #d9d9d9 !important;
}


/* ==============================
   === Instant Answer modules ===
   ============================== */

.zci--calculator .tile__calc .tile__past-calc { height: 60px; }

.zci--timer .name { margin-top: 27px; }

.zci--timer .time_display { margin-top: -20px; }

.zci--timer .corner_btn.reset { top: 5px; }

.zci--timer .corner_btn.close { top: -3px; }

.zci--timer .play_pause a {
    left: calc(50% + 2px);
    top: calc(50% + 2px);
}

.tile__ctrl__btn {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.zci--stopwatch .goodie-pane *, .zci--stopwatch #split_list * { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important; }

.zci--stopwatch .goodie-pane { width: 38.5% !important; }

.zci--stopwatch .time {
    font-size: 32px !important;
    font-variant-numeric: tabular-nums;
}

.zci--stopwatch #split_list .lap-num { font-weight: bold !important; }


/* =========================
   === Userscript Tweaks ===
   ========================= */
   
/* -------------------------------
   Try Google on Duck Duck Go - WF
   ------------------------------- */

/*
   This userscript adds button that allows quick Google search with same search query.
   
   These tweaks restyle the button and adds better spacing.
   
   INSTALLATION PAGE:
   https://greasyfork.org/en/scripts/389801-try-google-on-duck-duck-go-wf
*/

.header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"] {
    padding: 3px 8px !important;
    margin: 4px 11px 0 0;
    border-radius: 3px;
}

.header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"]:hover {
    background: #0e61ea !important;
    text-decoration: none !important;
}


/* =============
   === Misc. ===
   ============= */

.zcm__sep--h:before { top: 0.2em; }
    
.zcm__sep--h+.zcm__item { padding-left: 0.85em; }
    
.dropdown__switch { margin-top: 10.5px; }

.dropdown__button::after { margin-top: -5px; }

.about-profiles, .module__link--two-line { padding-bottom: 5px; }
    
}