/* ==UserStyle==
@name DuckDuckGo bottom navbar
@description Bottom buttons for navigation when in portrait
@match https://duckduckgo.com/*
@match https://*.duckduckgo.com/*
==/UserStyle== */
:root,
* {
color-scheme: dark light !important;
font-family: ui-sans-serif, sans-serif !important;
}
pre,
code {
font-family: ui-monospace, menlo, monospace !important;
}
em,
i {
font-family: ui-serif, serif;
}
.header__button--menu,
.module__toggle__chevron {
font-family: ddg-serp-icons !important;
}
[data-activetabid="chat"] {
#react-layout {
margin-bottom: 56px;
}
.results--main {
margin-bottom: -56px;
padding-top: -56px;
}
}
@media (orientation: portrait) {
#react-duckbar {
backdrop-filter: blur(12px) saturate(200%);
background: canvas;
background: rgba(255, 255, 255, 0.8);
@media (prefers-color-scheme: dark) {
background: rgba(28, 28, 28, 0.8);
}
border-color: -apple-system-separator;
border-top-width: thin;
border-top-style: solid;
bottom: 0px;
padding: 10px 0 0 0;
position: fixed;
margin: 0px !important;
width: 100vw !important;
& > div {
margin-left: 0;
}
section {
max-width: 100vw;
}
ul:first-child {
display: flex !important;
justify-content: space-around;
list-style: inside none;
height: 46px;
width: 100vw;
}
nav ul + ul,
li:has([href*="ia=news"]),
li:has([href*="ia=shopping"]),
li:has([href*="ia=products"]) {
margin: 0px !important;
display: none !important;
}
li {
display: inline-block;
}
[href*="q="] {
border-bottom: 0px solid;
filter: contrast(0%) sepia() hue-rotate(180deg) saturate(0);
opacity: 0.4;
padding-bottom: 5px;
transition: 0.5s ease-in-out;
width: 32px !important;
height: 32px !important;
@media (prefers-color-scheme: dark) {
filter: invert();
}
}
:is([href*="ia=answer"], [data-activetabid="web"]
[href*="ia=web"]:not([href*="assist="]):not([href*="iaxm=maps"]), [data-activetabid="images"]
[href*="ia=images"]:not([href*="source=places"]), [data-activetabid="videos"]
[href*="ia=videos"]:not([href*="source=places"]), [data-activetabid="news"]
[href*="ia=news"]:not([href*="source=places"]), :is([data-activetabid="products"], [data-activetabid="shopping"])
:is([href*="ia=products"], [href*="ia=shopping"]), [data-activetabid="qa"]
[href*="ia=qa"], [data-activetabid="about"] [href*="ia=about"], [data-activetabid="recipes"] [href*="ia=recipes"]) {
border-bottom: 3px solid;
filter: contrast(0%) sepia() hue-rotate(180deg) saturate(6);
opacity: 1;
padding-bottom: 2px;
}
[href*="ia=web"]:not([href*="assist="]):not([href*="iaxm=maps"]),
[href*="ia=answer"] {
content: url('data:image/svg+xml,');
}
[href*="ia=images"],
[href*="iar=images"] {
fill: currentColor;
content: url('data:image/svg+xml,');
}
[href*="ia=videos"] {
fill: currentColor;
content: url('data:image/svg+xml,');
}
[href*="ia=news"] {
fill: currentColor;
content: url('data:image/svg+xml,');
}
[href*="iaxm=maps"] {
content: url('data:image/svg+xml,');
}
[href*="ia=products"] {
content: url('data:image/svg+xml,');
}
[href*="ia=recipes"] {
content: url('data:image/svg+xml,');
}
[href*="ia=shopping"] {
content: url('data:image/svg+xml,');
}
[href*="ia=answer"] {
content: url('data:image/svg+xml,');
}
[href*="ia=qa"] {
content: url('data:image/svg+xml,');
}
[href*="ia=about"] {
content: url('data:image/svg+xml,');
}
}
}