533 lines
18 KiB
CSS
533 lines
18 KiB
CSS
|
/* ----- Included functions ----- */
|
||
|
|
@import url("spill-style-part2-file.css");
|
||
|
|
@import url("thin_scrollbar_windows10.css");
|
||
|
|
@import url("wallpaper-edition.css");
|
||
|
|
@import url("remove_homepage_shortcut_title_text.css");
|
||
|
|
@import url("circular_homepage_shortcuts.css");
|
||
|
|
|
||
|
|
/*=====================================================================
|
||
|
|
================= D A R K T H E M E C O L O R S ===================
|
||
|
|
=====================================================================*/
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--firefoxcss-main-bg-color: hsl(240, 2%, 13%);
|
||
|
|
--firefoxcss-item-bg-color: hsl(240, 2%, 20%);
|
||
|
|
--firefoxcss-item-hover-bg-color: hsl(240, 2%, 25%);
|
||
|
|
--firefoxcss-text-color: hsl(0, 0%, 100%);
|
||
|
|
--firefoxcss-other-color: hsl(290, 21%, 20%);
|
||
|
|
|
||
|
|
/* ----- Private Page Colors ----- */
|
||
|
|
--firefoxcss-private-search-bg-color: hsla(275, 13%, 33%, 0.3);
|
||
|
|
--firefoxcss-private-search-top-border: hsla(275, 13%, 40%, 0.3);
|
||
|
|
--firefoxcss-private-search-fill: hsl(275, 13%, 53%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-hover: hsla(275, 13%, 43%, 0.3);
|
||
|
|
--firefoxcss-private-search-border-hover: hsla(275, 13%, 50%, 0.3);
|
||
|
|
--firefoxcss-private-search-hover-fill: hsl(275, 13%, 63%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-text: var(--firefoxcss-private-search-fill);
|
||
|
|
--firefoxcss-private-search-text-hover: var(--firefoxcss-private-search-hover-fill);
|
||
|
|
--firefoxcss-private-search-caret: hsl(290, 21%, 80%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 6px 6px hsl(0deg 0% 0% / 0.075), 0 12px 12px hsl(0deg 0% 0% / 0.095);
|
||
|
|
|
||
|
|
/* ----- Normal Page Colors ----- */
|
||
|
|
--firefoxcss-search-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.095);
|
||
|
|
|
||
|
|
--firefoxcss-search-color: rgba(251, 251, 254, 1);
|
||
|
|
--firefoxcss-search-border-top-color: #ffffff26;
|
||
|
|
--firefoxcss-search-text-fill: #ffffff5e;
|
||
|
|
--firefoxcss-search-bar-text-color: rgba(251, 251, 254, 1);
|
||
|
|
--firefoxcss-search-bar-fill-icon-hover: rgba(251, 251, 254, 0.8);
|
||
|
|
|
||
|
|
--firefoxcss-shortcut-item-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
|
||
|
|
0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
|
||
|
|
--firefoxcss-shortcut-item-top-border: #ffffff26;
|
||
|
|
--firefoxcss-shortcut-item-top-border-hover: #97979791;
|
||
|
|
|
||
|
|
--firefoxcss-customize-menu: #1e1e1e8c;
|
||
|
|
--firefoxcss-customize-menu-bg-image: url("ASSETS/other/noise-512x512.png");
|
||
|
|
--firefoxcss-customize-menu-dropdown: #1e1e1e80;
|
||
|
|
--firefoxcss-input-focus: white;
|
||
|
|
/* no changes */
|
||
|
|
--firefoxcss-shortcut-item-active: hsla(0, 0%, 10%, 0.7);
|
||
|
|
--firefoxcss-shortcut-item-context-menu: #13131380;
|
||
|
|
--firefoxcss-shortcut-item-context-menu-border: hsla(0, 0%, 70%, 0.145);
|
||
|
|
--firefoxcss-shortcut-item-context-menu-separator: #ffffff29;
|
||
|
|
--firefoxcss-extra-search-bar-when-scroll: #1e1e1e8c;
|
||
|
|
--firefoxcss-context-menu-three-dots: hsla(240, 2%, 60%, 0.6);
|
||
|
|
--firefoxcss-settings-wheel-color: hsla(240, 20%, 90%, 0.6);
|
||
|
|
--firefoxcss-settings-wheel-color-hover: hsla(240, 20%, 90%, 0.9);
|
||
|
|
--firefoxcss-shortcut-search-icon-color: #7ae3f463;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
scrollbar-color: #afafaf #2c2c2c !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*=====================================================================
|
||
|
|
================= L I G H T T H E M E C O L O R S =================
|
||
|
|
=====================================================================*/
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root {
|
||
|
|
--firefoxcss-main-bg-color: hsl(240, 15%, 95%);
|
||
|
|
--firefoxcss-item-bg-color: hsl(240, 20%, 98%);
|
||
|
|
--firefoxcss-item-hover-bg-color: hsl(240, 5%, 95%);
|
||
|
|
--firefoxcss-text-color: hsl(0, 0%, 0%);
|
||
|
|
--firefoxcss-other-color: hsl(290, 21%, 20%);
|
||
|
|
|
||
|
|
/* ----- Private Page Colors ----- */
|
||
|
|
--firefoxcss-private-search-bg-color: hsla(276, 20%, 88%, 0.55);
|
||
|
|
--firefoxcss-private-search-top-border: hsla(0, 0%, 100%, 0.45);
|
||
|
|
--firefoxcss-private-search-fill: hsl(275, 20%, 65%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-hover: hsla(276, 20%, 84%, 0.50);
|
||
|
|
--firefoxcss-private-search-border-hover: hsla(0, 0%, 100%, 0.55);
|
||
|
|
--firefoxcss-private-search-hover-fill: hsl(275, 20%, 55%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-text: var(--firefoxcss-private-search-fill);
|
||
|
|
--firefoxcss-private-search-text-hover: var(--firefoxcss-private-search-hover-fill);
|
||
|
|
--firefoxcss-private-search-caret: hsl(276, 20%, 40%);
|
||
|
|
|
||
|
|
--firefoxcss-private-search-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.015),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.015), 0 4px 4px hsl(0deg 0% 0% / 0.015),
|
||
|
|
0 6px 6px hsl(0deg 0% 0% / 0.015), 0 12px 12px hsl(0deg 0% 0% / 0.035);
|
||
|
|
|
||
|
|
/* ----- Normal Page Colors ----- */
|
||
|
|
--firefoxcss-search-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.015),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.015), 0 4px 4px hsl(0deg 0% 0% / 0.015),
|
||
|
|
0 8px 8px hsl(0deg 0% 0% / 0.015), 0 16px 16px hsl(0deg 0% 0% / 0.035);
|
||
|
|
|
||
|
|
--firefoxcss-search-color: rgb(87, 87, 87, 1);
|
||
|
|
--firefoxcss-search-border-top-color: hsla(0, 0%, 100%, 0.9);
|
||
|
|
--firefoxcss-search-text-fill: rgba(10, 10, 10, 0.25);
|
||
|
|
--firefoxcss-search-bar-text-color: rgba(10, 10, 10, 0.65);
|
||
|
|
--firefoxcss-search-bar-fill-icon-hover: rgba(0, 0, 0, 0.5);
|
||
|
|
|
||
|
|
--firefoxcss-shortcut-item-box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.025),
|
||
|
|
0 2px 2px hsl(0deg 0% 0% / 0.025), 0 4px 4px hsl(0deg 0% 0% / 0.025),
|
||
|
|
0 8px 8px hsl(0deg 0% 0% / 0.025), 0 16px 16px hsl(0deg 0% 0% / 0.025);
|
||
|
|
--firefoxcss-shortcut-item-top-border: hsla(0, 0%, 100%, 0.9);
|
||
|
|
--firefoxcss-shortcut-item-top-border-hover: hsla(0, 0%, 100%, 0.6);
|
||
|
|
|
||
|
|
--firefoxcss-customize-menu: hsla(240, 10%, 90%, 0.25);
|
||
|
|
--firefoxcss-customize-menu-bg-image: none;
|
||
|
|
--firefoxcss-customize-menu-dropdown: #fdfdfd80;
|
||
|
|
--firefoxcss-input-focus: black; /* no changes */
|
||
|
|
--firefoxcss-shortcut-item-active: hsla(240, 15%, 85%, 0.4);
|
||
|
|
--firefoxcss-shortcut-item-context-menu: hsla(0, 0%, 95%, 0.4);
|
||
|
|
--firefoxcss-shortcut-item-context-menu-border: hsla(0, 0%, 100%, 0.5);
|
||
|
|
--firefoxcss-shortcut-item-context-menu-separator: hsla(0, 0%, 50%, 0.2);
|
||
|
|
--firefoxcss-extra-search-bar-when-scroll: hsla(0, 0%, 10%, 0.3);
|
||
|
|
--firefoxcss-context-menu-three-dots: hsla(240, 10%, 50%, 0.6);
|
||
|
|
--firefoxcss-settings-wheel-color: hsla(240, 20%, 10%, 0.6);
|
||
|
|
--firefoxcss-settings-wheel-color-hover: hsla(240, 20%, 10%, 0.9);
|
||
|
|
--firefoxcss-shortcut-search-icon-color: #2896a870;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
--newtab-search-icon: url("chrome://global/skin/icons/search-glass.svg") !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-document url("about:privatebrowsing") {
|
||
|
|
body {
|
||
|
|
background-color: var(--firefoxcss-main-bg-color) !important;
|
||
|
|
background-size: auto;
|
||
|
|
background-size: cover !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* html.private {
|
||
|
|
background-color: #1e1e1e80 !important;
|
||
|
|
background-image: url(ASSETS/icons/.jpg) !important ;
|
||
|
|
background-size: cover !important;
|
||
|
|
} */
|
||
|
|
|
||
|
|
#search-handoff-button {
|
||
|
|
appearance: none !important;
|
||
|
|
background-color: var(--firefoxcss-private-search-bg-color) !important;
|
||
|
|
border: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-private-search-top-border) !important;
|
||
|
|
border-radius: 10px 10px 10px 10px !important;
|
||
|
|
fill: var(--firefoxcss-private-search-fill) !important;
|
||
|
|
box-shadow: var(--firefoxcss-private-search-box-shadow) !important;
|
||
|
|
transition: background-color 100ms ease-in, border-color 100ms ease-in,
|
||
|
|
fill 100ms ease-in !important;
|
||
|
|
backdrop-filter: blur(24px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search-handoff-button:hover,
|
||
|
|
#search-handoff-button:focus,
|
||
|
|
#search-handoff-button:active {
|
||
|
|
background-color: var(--firefoxcss-private-search-hover) !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-private-search-border-hover) !important;
|
||
|
|
fill: var(--firefoxcss-private-search-hover-fill) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search-handoff-button .fake-textbox {
|
||
|
|
color: var(--firefoxcss-private-search-text) !important;
|
||
|
|
opacity: 0.8 !important;
|
||
|
|
transition: color 100ms ease-in, opacity 100ms ease-in !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search-handoff-button:active>.fake-textbox,
|
||
|
|
#search-handoff-button:hover>.fake-textbox,
|
||
|
|
#search-handoff-button:focus>.fake-textbox {
|
||
|
|
color: var(--firefoxcss-private-search-text-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search-handoff-button .fake-caret {
|
||
|
|
background: var(--firefoxcss-private-search-caret) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-and-wordmark .wordmark {
|
||
|
|
fill: #8f25d1 !important;
|
||
|
|
opacity: 0.9 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.showPrivate.showSearch.container .info {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.private .search-inner-wrapper {
|
||
|
|
height: 42px !important;
|
||
|
|
/* 48px default */
|
||
|
|
}
|
||
|
|
|
||
|
|
.private .search-inner-wrapper .fake-caret {
|
||
|
|
top: 13px !important;
|
||
|
|
/* 16px default */
|
||
|
|
}
|
||
|
|
|
||
|
|
.private .search-inner-wrapper #search-handoff-button {
|
||
|
|
background-size: 20px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-document url("about:home"),
|
||
|
|
url("about:newtab") {
|
||
|
|
|
||
|
|
body {
|
||
|
|
--newtab-background-color: var(--firefoxcss-main-bg-color) !important;
|
||
|
|
background-size: cover !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* For background blur */
|
||
|
|
/* .outer-wrapper {
|
||
|
|
background-color: #1e1e1e88 !important;
|
||
|
|
backdrop-filter: blur(24px) !important;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button {
|
||
|
|
appearance: none !important;
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
color: var(--firefoxcss-search-color) !important;
|
||
|
|
border: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-search-border-top-color) !important;
|
||
|
|
border-radius: 10px !important;
|
||
|
|
backdrop-filter: blur(24px) !important;
|
||
|
|
box-shadow: var(--firefoxcss-search-box-shadow) !important;
|
||
|
|
fill: var(--firefoxcss-search-text-fill) !important;
|
||
|
|
transition: background-color 250ms ease, border-color 250ms ease,
|
||
|
|
fill 250ms ease !important;
|
||
|
|
padding-inline-start: 48px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon.icon-settings.personalize-button {
|
||
|
|
color: var(--firefoxcss-settings-wheel-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon.icon-settings.personalize-button:hover {
|
||
|
|
color: var(--firefoxcss-settings-wheel-color-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-wrapper .tile {
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-shortcut-item-top-border) !important;
|
||
|
|
box-shadow: var(--firefoxcss-shortcut-item-box-shadow) !important;
|
||
|
|
transition: background-color 250ms ease, border-color 250ms ease !important;
|
||
|
|
border-radius: 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-wrapper .top-site-button:hover .tile {
|
||
|
|
/* background-color: rgba(230, 230, 230, 0.15) !important; */
|
||
|
|
background-color: var(--firefoxcss-item-hover-bg-color) !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-shortcut-item-top-border-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-wrapper .top-site-button:focus-visible .tile {
|
||
|
|
/* background-color: rgba(230, 230, 230, 0.15) !important; */
|
||
|
|
background-color: var(--firefoxcss-item-hover-bg-color) !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-shortcut-item-top-border-hover) !important;
|
||
|
|
outline: 1px solid #e3b686a3 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#root .customize-menu {
|
||
|
|
background-image: var(--firefoxcss-customize-menu-bg-image) !important;
|
||
|
|
background-color: var(--firefoxcss-customize-menu) !important;
|
||
|
|
backdrop-filter: blur(24px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.home-section .section .selector {
|
||
|
|
background-color: var(--firefoxcss-customize-menu-dropdown) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-sites-list:not(.dnd-active) .top-site-outer:hover:not(.active),
|
||
|
|
.top-site-outer .top-site-icon {
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
.top-site-outer .search-topsite {
|
||
|
|
backdrop-filter: blur(8px) !important;
|
||
|
|
background-color: var(--firefoxcss-shortcut-search-icon-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper input:focus {
|
||
|
|
color: var(--firefoxcss-input-focus) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .top-site-button .title {
|
||
|
|
opacity: 0.6 !important;
|
||
|
|
transition: opacity 0.4s !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .top-site-button:hover .title {
|
||
|
|
opacity: 1 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .context-menu-button.icon:is(:active, :focus) {
|
||
|
|
fill: #f79743 !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
border: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .context-menu-button {
|
||
|
|
fill: var(--firefoxcss-context-menu-three-dots) !important;
|
||
|
|
inset-inline-end: 2px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-outer .context-menu-button.icon:is(:active, :focus) {
|
||
|
|
fill: #f79743 !important;
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
border: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-outer .context-menu-button.icon {
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
border: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-button .title.has-icon.pinned span .icon {
|
||
|
|
opacity: 0.6 !important;
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-button .title.has-icon.pinned span:hover .icon {
|
||
|
|
display: inline-block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus) {
|
||
|
|
background-color: var(--firefoxcss-shortcut-item-active) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .context-menu,
|
||
|
|
.card-outer .context-menu {
|
||
|
|
background-image: var(--firefoxcss-customize-menu-bg-image) !important;
|
||
|
|
background-color: var(--firefoxcss-shortcut-item-context-menu) !important;
|
||
|
|
backdrop-filter: blur(32px) !important;
|
||
|
|
border: 1px solid var(--firefoxcss-shortcut-item-context-menu-border);
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-site-outer .context-menu>ul>li.separator,
|
||
|
|
.card-outer .context-menu>ul>li.separator {
|
||
|
|
border-bottom: 1px solid var(--firefoxcss-shortcut-item-context-menu-separator) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button input {
|
||
|
|
border-radius: 10px 10px 10px 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button .fake-caret {
|
||
|
|
top: 13px !important;
|
||
|
|
/*18 default. calculate=18-((52px - min-height)/2) */
|
||
|
|
inset-inline-start: 48px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .logo-and-wordmark {
|
||
|
|
opacity: 0.9 !important;
|
||
|
|
order: 1 !important;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
flex: 1 !important;
|
||
|
|
flex-basis: 20% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .logo-and-wordmark .logo {
|
||
|
|
background-size: 60px !important;
|
||
|
|
height: 60px !important;
|
||
|
|
width: 60px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .logo-and-wordmark .wordmark {
|
||
|
|
background-size: 132px !important;
|
||
|
|
height: 42px !important;
|
||
|
|
margin-inline-start: 12px !important;
|
||
|
|
width: 144px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-wrapper .search-wrapper {
|
||
|
|
padding: 0px !important;
|
||
|
|
display: flex !important;
|
||
|
|
flex-direction: row !important;
|
||
|
|
flex-wrap: wrap !important;
|
||
|
|
justify-content: center !important;
|
||
|
|
align-items: center !important;
|
||
|
|
align-content: space-around !important;
|
||
|
|
gap: 20px 10px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-wrapper .non-collapsible-section {
|
||
|
|
padding: 0 35px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-wrapper .collapsible-section {
|
||
|
|
padding: 20px 25px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button,
|
||
|
|
.search-wrapper input {
|
||
|
|
background-size: 20px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-inner-wrapper {
|
||
|
|
min-height: 42px !important;
|
||
|
|
/* 52px default */
|
||
|
|
order: 2 !important;
|
||
|
|
flex: 3 !important;
|
||
|
|
flex-basis: 60% !important;
|
||
|
|
top: 4px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* When there is overflow because of the height, search bar gets fixed position */
|
||
|
|
.outer-wrapper.fixed-search .search-wrapper {
|
||
|
|
backdrop-filter: blur(18px) !important;
|
||
|
|
gap: 0px 0px !important;
|
||
|
|
min-height: 60px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body:not(.inline-onboarding) .fixed-search.visible-logo main {
|
||
|
|
padding-top: 0px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-wrapper.fixed-search .search-wrapper .search-inner-wrapper {
|
||
|
|
top: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.outer-wrapper.fixed-search .search-wrapper .search-inner-wrapper button.search-handoff-button {
|
||
|
|
backdrop-filter: blur(22px) !important;
|
||
|
|
background-color: var(--firefoxcss-extra-search-bar-when-scroll) !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
border: none !important;
|
||
|
|
margin: 0px 50px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button .fake-textbox {
|
||
|
|
opacity: 0.5 !important;
|
||
|
|
color: var(--firefoxcss-search-bar-text-color) !important;
|
||
|
|
transition: opacity 0.4s !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-wrapper .search-handoff-button:active>.fake-textbox,
|
||
|
|
.search-wrapper .search-handoff-button:hover>.fake-textbox,
|
||
|
|
.search-wrapper .search-handoff-button:focus>.fake-textbox {
|
||
|
|
opacity: 0.8 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-inner-wrapper:hover .search-handoff-button {
|
||
|
|
background-color: var(--firefoxcss-item-hover-bg-color) !important;
|
||
|
|
border-top: 1px solid var(--firefoxcss-shortcut-item-top-border-hover) !important;
|
||
|
|
fill: var(--firefoxcss-search-bar-fill-icon-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsible-section .card-outer {
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsible-section .card-outer .card-preview-image-outer {
|
||
|
|
background-color: var(--firefoxcss-item-hover-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.compact-cards .card-outer .card-context {
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 609px) {
|
||
|
|
.ds-outer-wrapper-breakpoint-override main {
|
||
|
|
width: 386px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 385px) {
|
||
|
|
.search-wrapper .search-inner-wrapper .search-handoff-button {
|
||
|
|
padding-top: 4px !important;
|
||
|
|
padding-bottom: 6px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ds-outer-wrapper-breakpoint-override main {
|
||
|
|
width: 266px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*.outer-wrapper .search-wrapper .search-handoff-button {
|
||
|
|
background-image: url("ASSETS/icons/search-glass.svg") !important;
|
||
|
|
background-size: 16px !important;
|
||
|
|
}*/
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-document url("about:firefoxview") {
|
||
|
|
body {
|
||
|
|
background-color: var(--firefoxcss-main-bg-color) !important;
|
||
|
|
max-width: 80rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body>main {
|
||
|
|
grid-template-columns: 1fr !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
main aside.content-container {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#colorways {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#tabpickup-tabs-container #synced-tabs-placeholder {
|
||
|
|
background-color: var(--firefoxcss-item-bg-color) !important;
|
||
|
|
border-radius: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
#collapsible-tabs-container .closed-tabs-list .closed-tab-li:hover {
|
||
|
|
background-color: var(--firefoxcss-item-hover-bg-color) !important;
|
||
|
|
border-radius: 4px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-document url("about:blank") {
|
||
|
|
|
||
|
|
/* html:not(#ublock0-epicker),
|
||
|
|
html:not(#ublock0-epicker) body, */
|
||
|
|
#newtab-customize-overlay {
|
||
|
|
background-color: var(--firefoxcss-main-bg-color) !important;
|
||
|
|
}
|
||
|
|
}
|