/* ==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.8
@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
*/
body, input, textarea, a { font-family: "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 !important; }
#zero_click_wrapper *:not(option):not(a) { font-family: "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 !important; }
#zero_click_wrapper option { font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif !important; }
.result__title, #links .result__title b, #links .result__title strong, a.result__sitelink-title {
padding-bottom: 1px;
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 { max-width: 905px; }
.zcm-wrap--header { max-width: inherit; }
.header__search-wrap, .content__internal { padding-right: 0; }
.modal--dropdown--settings.is-showing { margin-left: -108px; }
.results--main {
max-width: 900px;
margin-right: 50px;
}
.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; }
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 { display: none; }
}
/* ===============
=== Results ===
=============== */
.result.highlight { background: hsl(0, 0%, 98%); }
.result__a { line-height: 1.3; }
.result__icon { margin-top: -6px; }
/* =========================
=== Results seperator ===
========================= */
.result__pagenum {
font-size: 15px;
margin-top: -4px;
}
.result__pagenum--side {
padding: 5px 10px;
background-color: #fafafa;
border-radius: 50%;
border: 1px solid #d9d9d9;
}
.result--sep { margin: 1em auto 1.25em; }
.result--sep--hr::before {
background-color: #d9d9d9;
right: 0px;
}
/* ==============================
=== 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;
}
/* =========================
=== 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; }
.module__link--two-line { padding-bottom: 5px; }
.about-profiles { padding-bottom: 5px; }
}
