☰

DuckDuckGo - Wider, Prettier and Customizable

Customizable UserCSS for DuckDuckGo

Versão de: 27/07/2020. Veja: a última versão.

  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.4
  9. @license        unlicense
  10. @preprocessor   stylus
  11. @var checkbox   ibm-plex-font      "Use 'IBM Plex' font (external load)"                        1
  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 related links"                                0
  17. ==/UserStyle== */
  18.  
  19. @-moz-document domain("duckduckgo.com") {
  20. /* ====================================================
  21.    === [TOGGLE] Use "IBM Plex" font (external load) ===
  22.    ==================================================== */
  23.     
  24. if ibm-plex-font {
  25.     /* ibm-plex-sans-400normal - all */
  26.     @font-face {
  27.         font-family: 'IBM Plex Sans';
  28.         font-style: normal;
  29.         font-display: swap;
  30.         font-weight: 400;
  31.         src:
  32.          local('IBM Plex Sans'),
  33.          local('IBMPlexSans'), 
  34.          url('https://cdn.jsdelivr.net/npm/@openfonts/ibm-plex-sans_all@1.44.0/files/ibm-plex-sans-all-400.woff2') format('woff2');
  35.     }
  36.  
  37.     /* ibm-plex-sans-500normal - all */
  38.     @font-face {
  39.         font-family: 'IBM Plex Sans';
  40.         font-style: normal;
  41.         font-display: swap;
  42.         font-weight: 500;
  43.         src:
  44.          local('IBM Plex Sans Medium'),
  45.          local('IBMPlexSans-Medium'), 
  46.          url('https://cdn.jsdelivr.net/npm/@openfonts/ibm-plex-sans_all@1.44.0/files/ibm-plex-sans-all-500.woff2') format('woff2');
  47.     }
  48.  
  49.     /* ibm-plex-sans-600normal - all */
  50.     @font-face {
  51.         font-family: 'IBM Plex Sans';
  52.         font-style: normal;
  53.         font-display: swap;
  54.         font-weight: 600;
  55.         src:
  56.          local('IBM Plex Sans SemiBold'),
  57.          local('IBMPlexSans-SemiBold'), 
  58.          url('https://cdn.jsdelivr.net/npm/@openfonts/ibm-plex-sans_all@1.44.0/files/ibm-plex-sans-all-600.woff2') format('woff2');
  59.     }
  60.         
  61.     body, input, textarea, .search__input--adv { 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", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; }
  62.  
  63.     #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", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; }
  64.         
  65.     #zero_click_wrapper option { font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; }
  66.  
  67.     .result__title, #links .result__title b, #links .result__title strong {
  68.         padding-bottom: 1px !important;
  69.         font-weight: 500 !important;
  70.     }
  71. }
  72.  
  73.  
  74. /* ===========================================================
  75.    === [TOGGLE] Wider layout (for 1920px+ wide resolution) ===
  76.    =========================================================== */
  77.  
  78. if wideScreen {
  79.     @media only screen and (min-width: 1460px) {
  80.         .cw { max-width: 1700px; }
  81.  
  82.         .has-zcm .header { width: 1063px; }
  83.  
  84.         .header__search-wrap { max-width: 905px; }
  85.  
  86.         .zcm-wrap--header { max-width: inherit; }
  87.  
  88.         .header__search-wrap, .content__internal { padding-right: 0; }
  89.  
  90.         .modal--dropdown--settings.is-showing { margin-left: -108px; }
  91.  
  92.         .results--main {
  93.             max-width: 900px;
  94.             margin-right: 50px;
  95.         }
  96.         
  97.         .result__sitelink-col { width: 415px !important; }
  98.  
  99.         .result--more {
  100.             width: 920px;
  101.             margin-left: -10px;
  102.         }
  103.  
  104.         .module--carousel__item:not(:last-child) { margin-right: 1.6%; }
  105.     }
  106. }
  107.  
  108.  
  109. /* =========================================================================
  110.    === [TOGGLE] Bigger font (recommended when "Wider layout" is enabled) ===
  111.    ========================================================================= */
  112.     
  113. if biggerFont {
  114.     html { font-size: 99%; }
  115.     
  116.     #zci-color_picker { font-size: 14px; }
  117. }
  118.  
  119.  
  120. /* ==================================================
  121.    === [TOGGLE] Force hide visited link checkmark ===
  122.    ================================================== */
  123.  
  124. if hideCheckmark { .result__check { display: none; } }
  125.  
  126.     
  127. /* ======================================================
  128.    === [TOGGLE] Delay showing sidebar in the pageload ===
  129.    ====================================================== */
  130.  
  131. if sidebarAnimation {
  132.     .results--sidebar {
  133.         animation: showSidebar 0.75s ease-in-out 0.75s forwards;
  134.         /* animation time = approximated load time for search results links */
  135.         opacity: 0;
  136.     }
  137.  
  138.     @keyframes showSidebar { to { opacity: 1; } }
  139. }
  140.  
  141.  
  142. /* ============================================
  143.    === [TOGGLE] Hide feedback related links ===
  144.    ============================================ */
  145.  
  146. if hideFeedback { .feedback-btn, .feedback-prompt__link { display: none; } }
  147.  
  148.  
  149. /* ===============
  150.    === Results ===
  151.    =============== */
  152.  
  153. .result.highlight { background: hsl(0, 0%, 98%); }
  154.  
  155. .result__a { line-height: 1.3; }
  156.  
  157. .result__icon { margin-top: -6px; }
  158.  
  159.  
  160. /* =========================
  161.    === Results seperator ===
  162.    ========================= */
  163.  
  164. .result__pagenum {
  165.     font-size: 15px;
  166.     margin-top: -4px;
  167. }
  168.  
  169. .result__pagenum--side {
  170.     padding: 5px 10px;
  171.     background-color: #fafafa;
  172.     border-radius: 50%;
  173.     border: 1px solid #d9d9d9;
  174. }
  175.  
  176. .result--sep { margin: 1em auto 1.25em; }
  177.  
  178. .result--sep--hr::before {
  179.     background-color: #d9d9d9;
  180.     right: 0px;
  181. }
  182.  
  183.  
  184. /* ==============================
  185.    === Instant Answer modules ===
  186.    ============================== */
  187.  
  188. .zci--calculator .tile__calc .tile__past-calc { height: 60px; }
  189.  
  190. .zci--timer .name { margin-top: 27px; }
  191.  
  192. .zci--timer .time_display { margin-top: -20px; }
  193.  
  194. .zci--timer .corner_btn.reset { top: 5px; }
  195.  
  196. .zci--timer .corner_btn.close { top: -3px; }
  197.  
  198. .zci--timer .play_pause a {
  199.     left: calc(50% + 2px);
  200.     top: calc(50% + 2px);
  201. }
  202.  
  203. .tile__ctrl__btn {
  204.     -moz-user-select: none;
  205.     -webkit-user-select: none;
  206.     user-select: none;
  207. }
  208.  
  209.  
  210. /* =============
  211.    === Misc. ===
  212.    ============= */
  213.  
  214. .zcm__sep--h:before { top: 0.2em; }
  215.     
  216. .zcm__sep--h+.zcm__item { padding-left: 0.85em; }
  217.     
  218. .dropdown__switch { margin-top: 10.5px; }
  219.  
  220. .dropdown__button::after { margin-top: -5px; }
  221.  
  222. .module__link--two-line { padding-bottom: 5px; }
  223.     
  224. .about-profiles { padding-bottom: 5px; }
  225.     
  226. }