☰

DuckDuckGo - Wider, Prettier and Customizable

Customizable UserCSS for DuckDuckGo

  1. /* ==UserStyle==
  2. @name           DuckDuckGo - Wider, Prettier and Customizable
  3. @description    Customizable UserCSS for DuckDuckGo
  4. @author         krisu (https://github.com/krisu5)
  5. @namespace      github.com/krisu5/userstyles
  6. @homepageURL    https://github.com/krisu5/userstyles/tree/master/DuckDuckGo%20-%20Wider%20Prettier%20and%20Customizable
  7. @supportURL     https://github.com/krisu5/userstyles/issues
  8. @version        1.0.9
  9. @license        unlicense
  10. @preprocessor   stylus
  11. @var checkbox   ibm-plex-font      "Use 'IBM Plex Sans' font (needs installation)"              0
  12. @var checkbox   wideScreen         "Wider layout (for 1920px+ wide resolution)"                 1
  13. @var checkbox   biggerFont         "Bigger font (recommended when 'Wider layout' is enabled)"   1
  14. @var checkbox   hideCheckmark      "Force hide visited link checkmark"                          0
  15. @var checkbox   sidebarAnimation   "Delay showing sidebar in the pageload"                      1
  16. @var checkbox   hideFeedback       "Hide feedback & promo related links"                        0
  17. ==/UserStyle== */
  18.  
  19. @-moz-document domain("duckduckgo.com") {
  20.  
  21. /* ==============================================================
  22.    === [TOGGLE] Use "IBM Plex Sans" font (needs installation) ===
  23.    ============================================================== */
  24.     
  25. if ibm-plex-font {
  26.     /*
  27.     ###################
  28.     ## INSTALL FONTS ##
  29.     ###################
  30.     
  31.     - Get the fonts:
  32.       https://github.com/IBM/plex/releases/latest
  33.       (TrueType recommended for Windows, for others use OpenType)
  34.        
  35.     - Go to "IBM-Plex-Sans" folder and install AT LEAST these fonts:
  36.          - Bold
  37.          - BoldItalic
  38.          - Italic
  39.          - Medium
  40.          - MediumItalic
  41.          - Regular
  42.          - SemiBold
  43.          - SemiBoldItalic
  44.     */
  45.     
  46.     :root {
  47.         --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;
  48.         
  49.         --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;
  50.         
  51.         --ibm-fontstack-3: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif;
  52.     }
  53.     
  54.     body, *:not(.play_pause) a               { font-family: var(--ibm-fontstack-1); }
  55.     
  56.     input, textarea                          { font-family: var(--ibm-fontstack-1) !important; }
  57.  
  58.     #zero_click_wrapper *:not(option):not(a) { font-family: var(--ibm-fontstack-2); }
  59.         
  60.     #zero_click_wrapper option               { font-family: var(--ibm-fontstack-3); }
  61.     
  62.     .zci--timer .corner_btn.add_minute { line-height: 1.5em; }
  63.         
  64.     .zci--timer .corner_btn.close {
  65.         top: -5px !important;
  66.         right: 5px !important;
  67.     }
  68.     
  69.     :is(#links, [data-testid="result"]) :where(h2, h3) {
  70.         padding-bottom: 2px;
  71.         font-weight: 500 !important;
  72.     }
  73.     
  74.     [data-testid="result-title-a"] {
  75.         font-weight: 500 !important;
  76.     }
  77.         
  78.     .about-profiles__link { font-size: 0.8em; }
  79.         
  80.     .about-profiles__item { padding-top: 13px; }
  81. }
  82.  
  83.  
  84. /* ===========================================================
  85.    === [TOGGLE] Wider layout (for 1920px+ wide resolution) ===
  86.    =========================================================== */
  87.  
  88. if wideScreen {
  89.     @media (min-width: 1460px) {
  90.         .cw { max-width: 1700px; }
  91.  
  92.         .header__search-wrap, .zcm-wrap--header { max-width: 905px; }
  93.  
  94.         .header__search-wrap, .content__internal { padding-right: 0; }
  95.  
  96.         .modal--dropdown--settings.is-showing { margin-left: -108px; }
  97.  
  98.         .results--main, [data-testid="mainline"] {
  99.             max-width: 900px !important;
  100.             margin-right: 50px;
  101.         }
  102.         
  103.         [data-testid="mainline"] {
  104.           -webkit-flex: 0 0 900px !important;
  105.           flex: 0 0 900px !important;
  106.         }
  107.         
  108.         .result__sitelink-col { width: 415px !important; }
  109.  
  110.         .result--more {
  111.             width: 920px;
  112.             margin-left: -10px;
  113.         }
  114.  
  115.         .module--carousel__item:not(:last-child) { margin-right: 1.6%; }
  116.             
  117.         .module--places { max-width: inherit; }
  118.             
  119.         .sitelink {
  120.             width: 265px;
  121.             padding-left: 35px;
  122.         }
  123.             
  124.         .sitelink:nth-child(2n-1) { padding-right: inherit; }
  125.             
  126.         .is-link-style-exp:not(.is-mobile):not(.is-mobile-device) #links .results_links_deep { max-width: unset !important; }
  127.     }
  128. }
  129.  
  130.  
  131. /* =========================================================================
  132.    === [TOGGLE] Bigger font (recommended when "Wider layout" is enabled) ===
  133.    ========================================================================= */
  134.     
  135. if biggerFont {
  136.     html { font-size: 99%; }
  137.     
  138.     #zci-color_picker { font-size: 14px; }
  139.         
  140.     .module__link--two-line { font-size: 1.6em; }
  141.         
  142.     .zci--stopwatch .goodie-pane { width: 39.5%; }
  143.         
  144.     if ibm-plex-font {
  145.         .result__sitelink-title {
  146.             font-size: 1.12em;
  147.             letter-spacing: 0.01em;
  148.         }
  149.     }
  150. }
  151.  
  152.  
  153. /* ==================================================
  154.    === [TOGGLE] Force hide visited link checkmark ===
  155.    ================================================== */
  156.  
  157. if hideCheckmark {
  158.     .result__check { display: none; }
  159. }
  160.  
  161.     
  162. /* ======================================================
  163.    === [TOGGLE] Delay showing sidebar in the pageload ===
  164.    ====================================================== */
  165.  
  166. if sidebarAnimation {
  167.     .results--sidebar {
  168.         animation: showSidebar 0.65s ease-in-out 0.65s forwards;
  169.         /* animation time = approximated load time for search results links */
  170.         opacity: 0;
  171.     }
  172.  
  173.     @keyframes showSidebar { to { opacity: 1; } }
  174. }
  175.  
  176.  
  177. /* ====================================================
  178.    === [TOGGLE] Hide feedback & promo related links ===
  179.    ==================================================== */
  180.  
  181. if hideFeedback {
  182.     .feedback-btn, [class^="feedback-prompt"], .header--text_promo, [data-layout="spreadCTA"] { display: none; }
  183. }
  184.  
  185.  
  186. /* ===============
  187.    === Results ===
  188.    =============== */
  189.  
  190. :is(#links, .react-results--main) article:hover {
  191.     background: hsl(0, 0%, 98%);
  192.     border-color: var(--theme-col-border-ui);
  193. }
  194.  
  195. :is(#links, .react-results--main) h3:hover { text-decoration: underline; }
  196.  
  197. #links img[src^="//external-content.duckduckgo.com"],
  198. .react-results--main [src^="/assets/icons/favicons/"] { margin-top: -4px; }
  199.  
  200. .result__a, [data-testid="result-title-a"] { line-height: 1.3; }
  201.  
  202.  
  203. /* =========================
  204.    === Results seperator ===
  205.    ========================= */
  206.  
  207. .result__pagenum, [arial-label^="Page "] span {
  208.     font-size: 15px !important;
  209.     margin-top: -4px;
  210.     min-width: unset !important;
  211. }
  212.  
  213. .result__pagenum--side {
  214.     padding: 5px 10px;
  215.     background-color: #fafafa;
  216.     border-radius: 50%;
  217.     border: 1px solid #d9d9d9;
  218. }
  219.  
  220. [arial-label^="Page "] span {
  221.     padding: 5px 12px;
  222.     background-color: #fafafa !important;
  223.     border-radius: 50%;
  224.     border: 1px solid #d9d9d9 !important;
  225. }
  226.  
  227. .result--sep { margin: 1em auto 1.25em; }
  228.  
  229. .result--sep--hr::before, [arial-label^="Page "] hr {
  230.     background-color: #d9d9d9 !important;
  231.     border-top: 1px solid #d9d9d9 !important;
  232. }
  233.  
  234.  
  235. /* ==============================
  236.    === Instant Answer modules ===
  237.    ============================== */
  238.  
  239. .zci--calculator .tile__calc .tile__past-calc { height: 60px; }
  240.  
  241. .zci--timer .name { margin-top: 27px; }
  242.  
  243. .zci--timer .time_display { margin-top: -20px; }
  244.  
  245. .zci--timer .corner_btn.reset { top: 5px; }
  246.  
  247. .zci--timer .corner_btn.close { top: -3px; }
  248.  
  249. .zci--timer .play_pause a {
  250.     left: calc(50% + 2px);
  251.     top: calc(50% + 2px);
  252. }
  253.  
  254. .tile__ctrl__btn {
  255.     -moz-user-select: none;
  256.     -webkit-user-select: none;
  257.     user-select: none;
  258. }
  259.  
  260. .zci--stopwatch .goodie-pane *, .zci--stopwatch #split_list * { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important; }
  261.  
  262. .zci--stopwatch .goodie-pane { width: 38.5% !important; }
  263.  
  264. .zci--stopwatch .time {
  265.     font-size: 32px !important;
  266.     font-variant-numeric: tabular-nums;
  267. }
  268.  
  269. .zci--stopwatch #split_list .lap-num { font-weight: bold !important; }
  270.  
  271.  
  272. /* =========================
  273.    === Userscript Tweaks ===
  274.    ========================= */
  275.    
  276. /* -------------------------------
  277.    Try Google on Duck Duck Go - WF
  278.    ------------------------------- */
  279.  
  280. /*
  281.    This userscript adds button that allows quick Google search with same search query.
  282.    
  283.    These tweaks restyle the button and adds better spacing.
  284.    
  285.    INSTALLATION PAGE:
  286.    https://gf.qytechs.cn/en/scripts/389801-try-google-on-duck-duck-go-wf
  287. */
  288.  
  289. .header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"] {
  290.     padding: 3px 8px !important;
  291.     margin: 4px 11px 0 0;
  292.     border-radius: 3px;
  293. }
  294.  
  295. .header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"]:hover {
  296.     background: #0e61ea !important;
  297.     text-decoration: none !important;
  298. }
  299.  
  300.  
  301. /* =============
  302.    === Misc. ===
  303.    ============= */
  304.  
  305. .zcm__sep--h:before { top: 0.2em; }
  306.     
  307. .zcm__sep--h+.zcm__item { padding-left: 0.85em; }
  308.     
  309. .dropdown__switch { margin-top: 10.5px; }
  310.  
  311. .dropdown__button::after { margin-top: -5px; }
  312.  
  313. .about-profiles, .module__link--two-line { padding-bottom: 5px; }
  314.     
  315. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址