☰

DuckDuckGo - Wider, Prettier and Customizable

Customizable UserCSS for DuckDuckGo

Från och med 2022-01-17. Se den senaste versionen.

  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.8
  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.    === [TOGGLE] Use "IBM Plex Sans" font (needs installation) ===
  22.    ============================================================== */
  23.     
  24. if ibm-plex-font {
  25.     /*
  26.     ###################
  27.     ## INSTALL FONTS ##
  28.     ###################
  29.     
  30.     - Get the fonts:
  31.       https://github.com/IBM/plex/releases/latest
  32.       (TrueType recommended for Windows, for others use OpenType)
  33.        
  34.     - Go to "IBM-Plex-Sans" folder and install AT LEAST these fonts:
  35.          - Bold
  36.          - BoldItalic
  37.          - Italic
  38.          - Medium
  39.          - MediumItalic
  40.          - Regular
  41.          - SemiBold
  42.          - SemiBoldItalic
  43.     */
  44.     
  45.     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; }
  46.  
  47.     #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; }
  48.         
  49.     #zero_click_wrapper option { font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Roboto", "Helvetica Neue", "Lucida Grande", sans-serif !important; }
  50.  
  51.     .result__title, #links .result__title b, #links .result__title strong, a.result__sitelink-title {
  52.         padding-bottom: 1px;
  53.         font-weight: 500 !important;
  54.     }
  55.     
  56.     .about-profiles__link { font-size: 0.8em; }
  57.         
  58.     .about-profiles__item { padding-top: 13px; }
  59. }
  60.  
  61.  
  62. /* ===========================================================
  63.    === [TOGGLE] Wider layout (for 1920px+ wide resolution) ===
  64.    =========================================================== */
  65.  
  66. if wideScreen {
  67.     @media (min-width: 1460px) {
  68.         .cw { max-width: 1700px; }
  69.  
  70.         .header__search-wrap { max-width: 905px; }
  71.  
  72.         .zcm-wrap--header { max-width: inherit; }
  73.  
  74.         .header__search-wrap, .content__internal { padding-right: 0; }
  75.  
  76.         .modal--dropdown--settings.is-showing { margin-left: -108px; }
  77.  
  78.         .results--main {
  79.             max-width: 900px;
  80.             margin-right: 50px;
  81.         }
  82.         
  83.         .result__sitelink-col { width: 415px !important; }
  84.  
  85.         .result--more {
  86.             width: 920px;
  87.             margin-left: -10px;
  88.         }
  89.  
  90.         .module--carousel__item:not(:last-child) { margin-right: 1.6%; }
  91.             
  92.         .module--places { max-width: inherit; }
  93.             
  94.         .sitelink {
  95.             width: 265px;
  96.             padding-left: 35px;
  97.         }
  98.             
  99.         .sitelink:nth-child(2n-1) { padding-right: inherit; }
  100.             
  101.         .is-link-style-exp:not(.is-mobile):not(.is-mobile-device) #links .results_links_deep { max-width: unset !important; }
  102.     }
  103. }
  104.  
  105.  
  106. /* =========================================================================
  107.    === [TOGGLE] Bigger font (recommended when "Wider layout" is enabled) ===
  108.    ========================================================================= */
  109.     
  110. if biggerFont {
  111.     html { font-size: 99%; }
  112.     
  113.     #zci-color_picker { font-size: 14px; }
  114.         
  115.     .module__link--two-line { font-size: 1.6em; }
  116.         
  117.     if ibm-plex-font {
  118.         .result__sitelink-title {
  119.             font-size: 1.12em;
  120.             letter-spacing: 0.01em;
  121.         }
  122.     }
  123. }
  124.  
  125.  
  126. /* ==================================================
  127.    === [TOGGLE] Force hide visited link checkmark ===
  128.    ================================================== */
  129.  
  130. if hideCheckmark {
  131.     .result__check { display: none; }
  132. }
  133.  
  134.     
  135. /* ======================================================
  136.    === [TOGGLE] Delay showing sidebar in the pageload ===
  137.    ====================================================== */
  138.  
  139. if sidebarAnimation {
  140.     .results--sidebar {
  141.         animation: showSidebar 0.65s ease-in-out 0.65s forwards;
  142.         /* animation time = approximated load time for search results links */
  143.         opacity: 0;
  144.     }
  145.  
  146.     @keyframes showSidebar { to { opacity: 1; } }
  147. }
  148.  
  149.  
  150. /* ====================================================
  151.    === [TOGGLE] Hide feedback & promo related links ===
  152.    ==================================================== */
  153.  
  154. if hideFeedback {
  155.     .feedback-btn, [class^="feedback-prompt"], .header--text_promo { display: none; }
  156. }
  157.  
  158.  
  159. /* ===============
  160.    === Results ===
  161.    =============== */
  162.  
  163. .result.highlight { background: hsl(0, 0%, 98%); }
  164.  
  165. .result__a { line-height: 1.3; }
  166.  
  167. .result__icon { margin-top: -6px; }
  168.  
  169.  
  170. /* =========================
  171.    === Results seperator ===
  172.    ========================= */
  173.  
  174. .result__pagenum {
  175.     font-size: 15px;
  176.     margin-top: -4px;
  177. }
  178.  
  179. .result__pagenum--side {
  180.     padding: 5px 10px;
  181.     background-color: #fafafa;
  182.     border-radius: 50%;
  183.     border: 1px solid #d9d9d9;
  184. }
  185.  
  186. .result--sep { margin: 1em auto 1.25em; }
  187.  
  188. .result--sep--hr::before {
  189.     background-color: #d9d9d9;
  190.     right: 0px;
  191. }
  192.  
  193.  
  194. /* ==============================
  195.    === Instant Answer modules ===
  196.    ============================== */
  197.  
  198. .zci--calculator .tile__calc .tile__past-calc { height: 60px; }
  199.  
  200. .zci--timer .name { margin-top: 27px; }
  201.  
  202. .zci--timer .time_display { margin-top: -20px; }
  203.  
  204. .zci--timer .corner_btn.reset { top: 5px; }
  205.  
  206. .zci--timer .corner_btn.close { top: -3px; }
  207.  
  208. .zci--timer .play_pause a {
  209.     left: calc(50% + 2px);
  210.     top: calc(50% + 2px);
  211. }
  212.  
  213. .tile__ctrl__btn {
  214.     -moz-user-select: none;
  215.     -webkit-user-select: none;
  216.     user-select: none;
  217. }
  218.  
  219.  
  220. /* =========================
  221.    === Userscript Tweaks ===
  222.    ========================= */
  223.    
  224. /* -------------------------------
  225.    Try Google on Duck Duck Go - WF
  226.    ------------------------------- */
  227.  
  228. /*
  229.    This userscript adds button that allows quick Google search with same search query.
  230.    
  231.    These tweaks restyle the button and adds better spacing.
  232.    
  233.    INSTALLATION PAGE:
  234.    https://greasyfork.org/en/scripts/389801-try-google-on-duck-duck-go-wf
  235. */
  236.  
  237. .header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"] {
  238. 	padding: 3px 8px !important;
  239. 	margin: 4px 11px 0 0;
  240. 	border-radius: 3px;
  241. }
  242.  
  243. .header__search a[style*="background: #4285F4;"][href^="https://www.google.com/search?"]:hover {
  244. 	background: #0e61ea !important;
  245. 	text-decoration: none !important;
  246. }
  247.  
  248.  
  249. /* =============
  250.    === Misc. ===
  251.    ============= */
  252.  
  253. .zcm__sep--h:before { top: 0.2em; }
  254.     
  255. .zcm__sep--h+.zcm__item { padding-left: 0.85em; }
  256.     
  257. .dropdown__switch { margin-top: 10.5px; }
  258.  
  259. .dropdown__button::after { margin-top: -5px; }
  260.  
  261. .module__link--two-line { padding-bottom: 5px; }
  262.     
  263. .about-profiles { padding-bottom: 5px; }
  264.     
  265. }