duckduckgo.com by emsixteen

/* ==UserStyle==
@name         duckduckgo.com
@version      20220205.17.48
@namespace    userstyles.world/user/emsixteen
@description  Improvements to dark style.
@author       emsixteen
@license      No License
==/UserStyle== */

@-moz-document domain("duckduckgo.com") {
:root {
    --max-content-width: 40vw;
    --default-border-radius: 10px;
    --grey-900: #18181B;
    --grey-800: #27272A;
    --grey-700: #3F3F46;
    --grey-600: #52525B;
    --grey-500: #71717A;
    --grey-400: #A1A1AA;
    --grey-300: #D4D4D8;
    --grey-200: #E4E4E7;
    --grey-100: #F4F4F5;
    --grey-50: #FAFAFA;
    --blue-400: #38BDF8;
    --blue-300: #93C5FD;
    --blue-200: #BFDBFE;
    --violet-400: #A78BFA;
    --violet-300: #C4B5FD;
    --violet-100: #EDE9FE;
}

/* DDG styles */
html,
body,
.body--home,
.site-wrapper,
.region__body,
.badge-link,
.module--carousel__image-wrapper,
.result__image,
.vertical--map__sidebar,
.vertical--map__sidebar__header,
.page-chrome_newtab,
.zci--type--tiles:not(.is-fallback).is-full-page.is-expanded,
.zci--type--tiles:not(.is-fallback).is-full-page.is-expanded .metabar:not(.is-stuck) {
    background-color: #202124;
}

body,
input,
select,
textarea {
    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", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
    color: #222;
}

.header-wrap,
.vertical--map--sidebar-left .vertical--map__sidebar__header,
.vertical--map--sidebar-left .has-requery .vertical--map__sidebar__header,
.vertical--map__sidebar__header--mobile,
.map-requery-mobile,
.footer,
.footer--mobile {
    border-color: transparent;
    background-color: var(--grey-900);
    box-shadow: 0 1px 0 #3b3b42;
}

/* Search box */
.search--header {
    display: flex;
    height: 44px;
    background: #303134;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(23, 23, 23, 0.24);
    border-radius: 24px;
}

/* Search type buttons */
.zcm-wrap-wrap {
    display: flex;
    padding-top: 1em;
}

.zcm__link {
    font-weight: 400;
}

/* Search result item */
.result {
    margin-bottom: 1.5em;
}
.result .result__body {
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: calc(-1 * (1em - 10px));
    background: rgba(255, 255, 255, .03);
    border-radius: var(--default-border-radius);
}

/* Search result item - Alternating */
.result:nth-of-type(2n + 2) .result__body {
    background: rgba(255, 255, 255, .015)
}

/* Search result item - Highlighted/hovered */
.results--main .result:not(.result--ad).highlight {
    border: 1px solid transparent;
    background: inherit;
    color: inherit;
}

.results--main .result:not(.result--ad).highlight .result__body {
    background: var(--grey-900);
}

/* Visited checkbox */
.result__check {
    top: 1.25em;
}

/* URL box */
.result__extras {
    padding: .125em 0;
}

/* Little modules inline in search results */
.module.module--carousel {
    width: 125%;
    max-width: 125%;
}

/* Related searched sidebar */
.results--sidebar {
    margin: 12px 10px 0 675px !important;
}

/* Search metabox with stuff like description of words, etc. */
.module:not(.module--carousel):not(.module--placeholder):not(.module--images):not(.module--translations),
.modal--popout .modal__box,
.modal__box,
.sidebar-modules .module,
.results--main .result:not(.result--ad).highlight,
.module .module--carousel__item,
.user-loc-cta,
.address-detail,
.modal--dropdown.modal--popout .modal__box,
.tile--info,
.place-detail,
.badge-link,
.is-atb-fullbleed .content-info__item,
.atb-banner__bottom,
.multi-step-mobile-onboarding__step__content,
.is-mobile .results_links_deep,
.is-mobile .results_links,
.is-mobile .result--news,
.is-mobile .related-searches,
.most-visited__info-tt,
.user-loc-tooltip {
    border: 1px solid transparent;
    background: var(--grey-900);
    color: var(--grey-50);
}

.module__toggle,
.tile__expand {
    background-color: var(--grey-800);
    border: 0;
}

.module__toggle {
    width: calc(100% - 1em);
    margin: .5em;
    border-radius: var(--default-border-radius);
}
}