Skip to content

Material 1 for DuckDuckGo by lightbeam

Screenshot of Material 1 for DuckDuckGo

Details

Authorlightbeam

LicenseNo License

Categoryduckduckgo

Created

Updated

Size6.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A Material 1 style for DuckDuckGo. It can be themed to look like Google, Bing, Yahoo, and more.

Notes

1.0.0 - 2023/09/24

Initial release

Source code

/* ==UserStyle==
@name           Material 1 for DuckDuckGo
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A Material 1 style for DuckDuckGo. It can be themed to look like Google, Bing, Yahoo, and more.
@author         lightbeam24
@preprocessor   stylus
@var select theme "Theme" ["ddg:DuckDuckGo", "google:Google", "bing:Bing", "bing2:Bing (Classic)", "yahoo:Yahoo", "x:X", "x2:X (Classic)"]
==/UserStyle== */

@-moz-document domain("duckduckgo.com") {
html {
--material-orange: #de5833;
--material-orange-2: #ea977f;
--material-orange-2: #e79174;
--material-green: #085;
--material-green-2: #0b7;
--material-purple: #5f00d2;
--material-purple-2: #9946ff;
--material-black: #000;
--material-black-2: #333;
--material-blue: #1da1f2;
--material-blue-2: #67c5ff;
--bing-blue: #2962e8;
--bing-blue-2: #3691f8;
--bing-teal: #008173;
--bing-teal-2: #1fb5a5;
}
if theme == ddg {
    html {
        --mbg1: var(--material-orange);
        --mbg2: var(--material-orange-2);
    }
}
if theme == bing {
    html {
        --mbg1: var(--bing-blue);
        --mbg2: var(--bing-blue-2);
    }
    .is-link-style-exp .header__logo {
      filter: grayscale(1) brightness(1000);
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fnews.thewindowsclub.com%2Fwp-content%2Fuploads%2F2020%2F10%2FBing-Logo.png&f=1&nofb=1&ipt=3bf7a24e7a3120bbb02721dac63e2a6be20ba737429ef2b63fe56956b19f53dd&ipo=images") !important;
    }
}
if theme == bing2 {
    html {
        --mbg1: var(--bing-teal);
        --mbg2: var(--bing-teal-2);
    }
    .is-link-style-exp .header__logo {
      width: 114px;
      height: 84px;
      background-size: 114px 84px;
      filter: grayscale(1) brightness(1000);
      margin-left: 32px;
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.freebiesupply.com%2Flogos%2Fthumbs%2F1x%2Fbing-11-logo.png&f=1&nofb=1&ipt=ff3c90687ee8623ce85aeba931e5a8b49ebf75efcc9fa0c4811bab0e1a626c68&ipo=images") !important;
    }
}
if theme == google {
    html {
        --mbg1: var(--material-green);
        --mbg2: var(--material-green-2);
    }
    .is-link-style-exp .header__logo {
      width: 92px;
      height: 30px;
      background-size: 92px 30px;
      filter: grayscale(1) brightness(1000);
      margin-top: 2px;
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.stack.imgur.com%2F3CEBV.png&f=1&nofb=1&ipt=d7caad68be3116048381a46716eae29476964982197a6c186479ae1ca894e0c3&ipo=images") !important;
    }
}
if theme == yahoo {
    html {
        --mbg1: var(--material-purple);
        --mbg2: var(--material-purple-2);
    }
    .is-link-style-exp .header__logo {
      width: 110px;
      height: 30.5px;
      background-size: 110px 30.5px;
      filter: grayscale(1) brightness(1000);
      max-width: none;
      min-width: 110px !important;
      margin-right: 22px;
      margin-top: 4px;
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F3%2F3a%2FYahoo!_(2019).svg%2F440px-Yahoo!_(2019).svg.png&f=1&nofb=1&ipt=b153c5d58c258a2c6ae2e6f2ceeff00684b20cf459a62283795b9919da67582b&ipo=images") !important;
    }
}
if theme == x {
    html {
        --mbg1: var(--material-black);
        --mbg2: var(--material-black-2);
    }
    .is-link-style-exp .header__logo {
      width: 60px;
      height: 60px;
      background-size: 60px 60px;
      max-width: none;
      margin-right: 22px;
      margin-top: 1px;
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fnews.topusainsights.com%2Fwp-content%2Fuploads%2F2023%2F07%2Ftwitter-x-logo.jpg&f=1&nofb=1&ipt=526c6a02567bcdc79861bf1c7c6bd4f54ac574b490e77d5e9bc117abbf2e6b62&ipo=images") !important;
    }
}
if theme == x2 {
    html {
        --mbg1: var(--material-blue);
        --mbg2: var(--material-blue-2);
    }
    .is-link-style-exp .header__logo {
      width: 47px;
      height: 38px;
      background-size: 47px 38px;
      max-width: none;
      margin-right: 22px;
      margin-top: 0px;
      filter: grayscale(1) brightness(1000);
    }
    .header__logo {
      background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-xrCmYR9EE0E%2FWmWY0Tj9nfI%2FAAAAAAAAA7s%2F8o6m0M_KvCgOgprbVvXTdGpU3zdqMCc7ACLcBGAs%2Fs1600%2FTwitter_bird_logo.png&f=1&nofb=1&ipt=3acaa4461c5d77eb9d079de5d50ba11be4f4f3cb77c9cfe2dcaa81c9137eff5b&ipo=images") !important;
    }
}
#header_wrapper {
 background: var(--mbg1);
 box-shadow: 0 1px 6px rgba(0,0,0,.35);
 transition: background 0.5s;
}
#search_form {
  background: var(--mbg2);
  border: none;
  border-radius: 0;
  box-shadow: none;
      transition: background 0.5s;
}
.search__clear,
#search_form_input {
  color: #fff !important;
}
.search__button, 
.search__button--hero {
  color: #fff !important;
  border-radius: 0;
  background: none !important;
}
.header__button--menu {
  color: #fff !important;
}
.header__label, .header__link {
  color: #fff !important;
}
/* tabs */
.zcm-wrap--header {
  margin-left: -7px;
}
.zcm__link {
  padding: 0 10px;
    padding-bottom: 0px;
  text-transform: uppercase;
  font-weight: bold;
  color: white !important;
}
.zcm__link.is-active {
  border-color: white !important;
}
/* image detail */
.detail--xd {
  background-color: var(--mbg1);
  transition: background 0.5s;
}
.c-detail__title__sub, .c-detail__desc, .c-detail__filemeta, .c-detail__more {
  color: #fff;
}
.detail--xd .c-detail__btn {
  background-color: white;
  border-color: transparent;
  color: var(--mbg1);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 2px !important;
  display: inline-block;
  vertical-align: middle;
  padding: 4px 20px;
  font-size: 15px;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
  transition: color 0.5s;
}
}

Reviews

No reviews yet.