edge-frfox/chrome/userContent/NewTab.css
2021-04-22 10:04:33 +08:00

174 lines
4.9 KiB
CSS

/* New Tab Page */
@-moz-document url("about:newtab"), url("about:home") {
.icon.icon-settings {
background-image: url(../icons/settings.svg) !important;
background-size: 20px !important;
}
.search-wrapper .search-button {
background-image: url(../icons/search.svg) !important;
background-size: 20px !important;
}
.icon.icon-history-item {
background-image: url(../icons/history.svg) !important;
}
.icon.icon-bookmark-added {
background-image: url(../icons/star-fill.svg) !important;
}
.icon.icon-download {
background-image: url(../icons/download.svg#arrow-with-bar) !important;
}
.search-wrapper input {
border: 0 !important;
box-shadow: none !important;
fill: var(--newtab-search-icon-color);
border-radius: 4px !important;
outline: none !important;
}
.search-inner-wrapper input {
transition: box-shadow .2s ease-in-out !important;
box-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 13%), 0px 0px 2.9px rgb(0 0 0 / 11%) !important;
}
.search-inner-wrapper:hover input {
box-shadow: 0px 3.2px 7.2px rgb(0 0 0 / 13%), 0px 0px 3.8px rgb(0 0 0 / 11%) !important;
}
.search-wrapper :is(input, button) {
height: 44px !important;
}
#searchSubmit {
width: 68px !important;
background-color: var(--search-button-bg) !important;
}
#searchSubmit:hover {
background-color: var(--search-button-bg-hover) !important;
}
.top-site-outer .tile,
.screenshot,
.top-site-icon {
border-radius: 8px !important;
}
.card-outer .card-preview-image-outer {
background-color: #0002 !important;
}
.outer-wrapper:not(.newtab-experience) .top-site-outer .top-site-icon,
.outer-wrapper:not(.newtab-experience) .top-site-outer .screenshot {
box-shadow: none !important;
}
.top-site-outer:not(:hover) .tile {
box-shadow: var(--newtab-card-shadow) !important;
}
.compact-cards .card-outer .card-context::after,
.card-outer .card-preview-image-outer::after {
border-color: #0001 !important;
}
.top-site-outer .screenshot {
background-color: transparent !important;
}
body:not([lwt-newtab], [style*="color"]) {
--newtab-background-color: #f7f7f7 !important;
--newtab-search-header-background-color: #f7f7f7f0 !important;
--newtab-text-primary-color: #000 !important;
--newtab-textbox-background-color: #fff !important;
--newtab-topsites-background-color: #fff !important;
--search-button-bg: #0078D4;
--search-button-bg-hover: #006CBE;
--newtab-search-icon-color: #fff !important;
--newtab-snippets-background-color: var(--newtab-topsites-background-color) !important;
--newtab-card-background-color: var(--newtab-topsites-background-color) !important;
--newtab-card-hairline-color: var(--newtab-topsites-background-color) !important;
}
body[lwt-newtab-brighttext] {
--newtab-background-color: #242424 !important;
--newtab-search-header-background-color: #242424f0 !important;
--newtab-text-primary-color: #fff !important;
--newtab-textbox-background-color: #424242 !important;
--newtab-topsites-background-color: #424242 !important;
--search-button-bg: #006CBE;
--search-button-bg-hover: #0078D4;
--newtab-search-icon-color: #fff !important;
--newtab-snippets-background-color: var(--newtab-topsites-background-color) !important;
--newtab-card-background-color: var(--newtab-topsites-background-color) !important;
--newtab-card-hairline-color: var(--newtab-topsites-background-color) !important;
}
}
/* Private Browsing Page */
@-moz-document url("about:privatebrowsing") {
html.private {
--in-content-page-color: #000d !important;
--in-content-text-color: #000 !important;
--in-content-page-background: #f5f5f5 !important;
}
.wordmark {
fill: #737373 !important;
}
.info {
background-color: #fff !important;
background-image: url(../icons/incognito.svg) !important;
}
.search-handoff-button {
background-color: #fff !important;
color: #000 !important;
}
@media (prefers-color-scheme: dark) {
html.private {
--in-content-page-color: #fffd !important;
--in-content-text-color: #fff !important;
--in-content-page-background: #242424 !important;
}
.wordmark {
fill: #f5f5f5 !important;
}
.info {
background-color: #2b2b2b !important;
}
.search-handoff-button {
background-color: #424242 !important;
color: #fff !important;
}
}
.fake-textbox {
color: inherit !important;
}
.search-handoff-button {
border: 0 !important;
border-radius: 4px !important;
height: 44px !important;
transition: box-shadow .2s ease-in-out !important;
box-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 13%), 0px 0px 2.9px rgb(0 0 0 / 11%) !important;
}
.search-handoff-button:hover {
box-shadow: 0px 3.2px 7.2px rgb(0 0 0 / 13%), 0px 0px 3.8px rgb(0 0 0 / 11%) !important;
}
}