mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-01 06:50:33 -08:00
Clean: Separated dark contents
This commit is contained in:
alstjr7375
parent
6fabfcf09b
commit
c78d367deb
2 changed files with 510 additions and 510 deletions
509
src/contents/_dark_mode.scss
Normal file
509
src/contents/_dark_mode.scss
Normal file
|
|
@ -0,0 +1,509 @@
|
|||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
/*= Addons.org =============================================================*/
|
||||
@-moz-document url-prefix("https://addons.mozilla.org")
|
||||
{
|
||||
/* Basic */
|
||||
.Page-content,
|
||||
.SecondaryHero,
|
||||
body,
|
||||
main[aria-label="Content"] {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.Page-content h1,
|
||||
.Page-content h2,
|
||||
.SearchResult-link,
|
||||
.Home-SubjectShelf-link:link,
|
||||
.Home-SubjectShelf-link:visited,
|
||||
.DropdownMenuItem-link a,
|
||||
.Select,
|
||||
.Badge,
|
||||
.Notice-generic,
|
||||
.Notice-genericWarning,
|
||||
.Notice-button,
|
||||
.Paginate .Button.Paginate-item:first-child,
|
||||
.Paginate .Button.Paginate-item:last-child,
|
||||
.Paginate .Button.Paginate-item--current-page,
|
||||
.Button--neutral,
|
||||
.blog-entry-title,
|
||||
.blogpost-nav * {
|
||||
color: var(--in-content-text-color) !important;
|
||||
}
|
||||
.AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
|
||||
.AutoSearchInput-suggestions-item--highlighted,
|
||||
.SecondaryHero-message-link,
|
||||
.SecondaryHero-module-link,
|
||||
.Card-contents a:not(.Button),
|
||||
.Card-footer-link a,
|
||||
.Card-shelf-footer-in-header a,
|
||||
.SearchResult-link:is(:active, :focus, :hover),
|
||||
.SearchResult:hover .SearchResult-link,
|
||||
.Home-SubjectShelf-link:is(:active, :focus, :hover),
|
||||
.DropdownMenuItem-link a:is(:active, :focus, :hover),
|
||||
.AddonMeta .MetadataCard-title a:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-content a:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
|
||||
.Addon-summary a,
|
||||
.RatingsByStar-count a:hover,
|
||||
.RatingsByStar-star a:hover,
|
||||
.Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
|
||||
.AddonTitle-author a,
|
||||
.PermissionsCard-learn-more,
|
||||
.DefinitionList a,
|
||||
.ShowMoreCard-contents a,
|
||||
.AddonDescription-contents a,
|
||||
.AddonTitle a,
|
||||
.TooltipMenu-opener,
|
||||
.LanguageTools .Card-contents a,
|
||||
.blog-entry-read-more-link,
|
||||
.blogpost-nav-next.blogpost-nav-no-prev:hover p,
|
||||
.blogpost-content-wrapper p a,
|
||||
.blogpost-nav-prev:hover p,
|
||||
.blogpost-nav-next:hover p {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.SearchResult--meta-section,
|
||||
.MetadataCard-title,
|
||||
.MetadataCard-title a,
|
||||
.MetadataCard-content a,
|
||||
.CollectionSort-label,
|
||||
.SearchResult-summary,
|
||||
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
|
||||
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
|
||||
.PermissionsCard-subhead--optional,
|
||||
.PermissionsCard-subhead--required,
|
||||
.Definition-dt,
|
||||
.RatingsByStar-count a,
|
||||
.RatingsByStar-star a,
|
||||
.Paginate-page-number,
|
||||
.AddonSummaryCard-addonAverage,
|
||||
.AddonReviewCard-authorByLine,
|
||||
.UserReview-byLine,
|
||||
.UserReview-reply-header,
|
||||
.Home-heroHeader-subtitle,
|
||||
.blog-entry-date,
|
||||
.blogpost-breadcrumb *,
|
||||
.AddonTitle-author,
|
||||
.ExpandableCard-ToggleLink,
|
||||
.SearchFilters-label,
|
||||
.PromotedBadge-label--line {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.PromotedBadge-label--recommended {
|
||||
color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.Button--action {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
.Select,
|
||||
.Button--neutral,
|
||||
.Button--neutral:link,
|
||||
.Notice-button,
|
||||
.AMInstallButton .AMInstallButton-loading-button {
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
}
|
||||
.Button--neutral.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--neutral:not(.Button--disabled):hover,
|
||||
.Notice-button:hover {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.Button--action.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--action:not(.Button--disabled):hover {
|
||||
background: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
.ShowMoreCard-contents::after {
|
||||
background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
|
||||
}
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.SecondaryHero-module,
|
||||
.Card-header,
|
||||
.Card-contents,
|
||||
.CardList ul > li,
|
||||
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
|
||||
.Paginate,
|
||||
.LandingPage-header,
|
||||
.DropdownMenu-items,
|
||||
.DropdownMenu-items::after,
|
||||
.MetadataCard,
|
||||
.AddonsCard-list,
|
||||
.Card-footer,
|
||||
.StaticAddonCard,
|
||||
.blogpost-nav,
|
||||
.blogpost-nav * {
|
||||
background: var(--in-content-table-background) !important;
|
||||
}
|
||||
|
||||
.Paginate .Button.Paginate-item:is(:active, :hover) {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.Notice-generic,
|
||||
.Notice-genericWarning {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--in-content-page-background) 40%,
|
||||
var(--in-content-table-background)
|
||||
) !important;
|
||||
}
|
||||
|
||||
.LanguageTools-header-row {
|
||||
color: var(--in-content-table-header-color) !important;
|
||||
background: var(--in-content-table-header-background) !important;
|
||||
}
|
||||
.LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
|
||||
background-color: var(--in-content-box-background-odd) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.Icon-arrow-blue.SearchSuggestion-icon-arrow {
|
||||
filter: hue-rotate(330deg) brightness(1.3) !important;
|
||||
}
|
||||
.SecondaryHero-module-icon {
|
||||
filter: invert(85%) !important;
|
||||
}
|
||||
.Icon-magnifying-glass,
|
||||
.Notice-icon {
|
||||
filter: invert(65%) !important;
|
||||
}
|
||||
.PermissionsCard-learn-more .Icon,
|
||||
.Permission .Icon {
|
||||
filter: invert(100%) !important;
|
||||
}
|
||||
.Icon-heart {
|
||||
filter: brightness(0) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.DropdownMenu-items {
|
||||
box-shadow: 0 0 2px var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
.AutoSearchInput-query {
|
||||
border: 1px solid var(--in-content-table-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:is(:hover, :focus) {
|
||||
border-color: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
|
||||
0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.PromotedBadge-link--line {
|
||||
border-color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.PromotedBadge-link--line:hover {
|
||||
border-color: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
|
||||
.blog-entry-read-more-link {
|
||||
border-color: var(--in-content-link-color) !important;
|
||||
}
|
||||
|
||||
.blogpost-nav-arrow-left .cls-1,
|
||||
.blogpost-nav-arrow-right .cls-1 {
|
||||
stroke: var(--in-content-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Support.org ============================================================*/
|
||||
@-moz-document url-prefix("https://support.mozilla.org")
|
||||
{
|
||||
/* Basic */
|
||||
:root {
|
||||
--color-blue-06: var(--in-content-link-color) !important;
|
||||
--color-blue-07: var(--in-content-link-color-hover) !important;
|
||||
--color-blue-09: var(--in-content-link-color-active) !important;
|
||||
|
||||
--page-bg: var(--in-content-page-background) !important;
|
||||
--color-white: var(--in-content-page-background) !important;
|
||||
--color-shade-bg: var(--in-content-page-background) !important;
|
||||
--color-marketing-gray-02: var(--card-outline-color) !important;
|
||||
--color-inverse-bg: var(--in-content-page-color) !important;
|
||||
--color-inverse: var(--in-content-page-background) !important;
|
||||
--color-text: var(--in-content-page-color) !important;
|
||||
--color-moz-text: var(--in-content-page-color) !important;
|
||||
--color-moz-heading: var(--in-content-page-color) !important;
|
||||
--color-text-light: var(--in-content-deemphasized-text) !important;
|
||||
--color-link: var(--in-content-link-color) !important;
|
||||
--color-success: var(--green-70) !important;
|
||||
--color-warning: var(--yellow-80) !important;
|
||||
--color-error: var(--red-60) !important;
|
||||
--color-error-hover: var(--red-50) !important;
|
||||
--color-moz-heading: #fff;
|
||||
--color-moz-inverse-bg: var(red) !important;
|
||||
--focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
|
||||
0 0 0 2px var(--in-content-primary-button-background-active);
|
||||
}
|
||||
.warning {
|
||||
--color-link: rgb(55, 255, 255) !important;
|
||||
}
|
||||
|
||||
body,
|
||||
#main-content,
|
||||
#instant-search-content,
|
||||
#mzp-c-menu-panel-help,
|
||||
.mzp-c-navigation,
|
||||
.kbox-container {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.mzp-c-menu-category .mzp-c-menu-title,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-link,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-link > *,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-list a,
|
||||
#doc-content .menu,
|
||||
.document--content .menu,
|
||||
.forum--entry-content .menu,
|
||||
.tag-name a {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
.ts-select-trigger,
|
||||
input[type="date"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea,
|
||||
#doc-content .button,
|
||||
#doc-content .key,
|
||||
.document--content .button,
|
||||
.document--content .key,
|
||||
.forum--entry-content .button,
|
||||
.forum--entry-content .key {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
.tag-list a {
|
||||
color: var(--color-marketing-gray-10) !important;
|
||||
}
|
||||
.tag-list a:hover,
|
||||
.sidebar-nav a:hover {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
.tag-list li {
|
||||
background: var(--in-content-page-color) !important;
|
||||
}
|
||||
.tag-list li:hover {
|
||||
background: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.sidebar-nav.topics,
|
||||
.sidebar-nav.topics > li {
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
.mzp-c-menu-panel {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.sumo-nav--logo,
|
||||
.sumo-nav--search-button,
|
||||
.sumo-nav--toggle-button,
|
||||
.card:not(.is-inverse) .card--icon-sm,
|
||||
.mzp-c-menu-item-icon,
|
||||
.mzp-c-menu-button-close,
|
||||
.topic-article--icon,
|
||||
.card--topic > .card--icon,
|
||||
.mzp-c-details .is-summary button::before,
|
||||
details .is-summary button::before,
|
||||
summary::before,
|
||||
.icon-button > button,
|
||||
.search-button {
|
||||
filter: invert(95%) !important;
|
||||
}
|
||||
button.markup-toolbar-button {
|
||||
/*using 0.5 because in middle*/
|
||||
filter: invert(0.5) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.support-callouts > .card.is-inverse {
|
||||
background: #20133a !important;
|
||||
}
|
||||
.support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
.sumo-button.secondary-button {
|
||||
border-color: none !important;
|
||||
}
|
||||
.mzp-c-menu-panel {
|
||||
border-color: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
|
||||
border-color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.mzp-c-menu-panel {
|
||||
box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
}
|
||||
.card--product,
|
||||
.card--topic,
|
||||
.card--article {
|
||||
box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
|
||||
0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Accounts.com ===========================================================*/
|
||||
@-moz-document url-prefix("https://accounts.firefox.com")
|
||||
{
|
||||
/* Basic */
|
||||
body {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
.button.primary-button,
|
||||
.button[type="submit"]:not(.secondary-button),
|
||||
.settings-button.primary-button,
|
||||
.settings-button[type="submit"]:not(.secondary-button),
|
||||
button.primary-button,
|
||||
button[type="submit"]:not(.secondary-button) {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
header h1,
|
||||
.info,
|
||||
.info a,
|
||||
.faint a:hover,
|
||||
.cta-neutral:hover {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
#main-content.panel a,
|
||||
.links a,
|
||||
.link-blue,
|
||||
.text-blue-500 {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.link-blue:hover {
|
||||
color: var(--in-content-link-color-hover) !important;
|
||||
}
|
||||
|
||||
.signed-in-email-message,
|
||||
.verification-email-message,
|
||||
.verification-message,
|
||||
.verification-recovery-code-message,
|
||||
.verification-totp-message,
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
.input-row input::placeholder,
|
||||
.firefox-family-services > ul > .firefox-service,
|
||||
.faint,
|
||||
.faint a,
|
||||
.text-grey-400 {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.password-row .show-password-label {
|
||||
background-color: unset !important;
|
||||
}
|
||||
#main-content,
|
||||
.modal,
|
||||
.firefox-family-services,
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
header,
|
||||
.bg-white:not(nav) {
|
||||
background: var(--in-content-box-background) !important;
|
||||
}
|
||||
#suggest-sync,
|
||||
.cta-neutral {
|
||||
background: var(--in-content-button-background) !important;
|
||||
}
|
||||
.cta-neutral:hover,
|
||||
.bg-grey-50:hover,
|
||||
.hover\:bg-grey-100:hover {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.hover\:bg-grey-200:hover {
|
||||
background: var(--in-content-button-background-active) !important;
|
||||
}
|
||||
.button.primary-button:hover:enabled,
|
||||
.button[type="submit"]:not(.secondary-button):hover:enabled,
|
||||
.settings-button.primary-button:hover:enabled,
|
||||
.settings-button[type="submit"]:not(.secondary-button):hover:enabled,
|
||||
button.primary-button:hover:enabled,
|
||||
button[type="submit"]:not(.secondary-button):hover:enabled {
|
||||
background: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
.tooltip,
|
||||
.tooltip::before {
|
||||
background: var(--in-content-danger-button-background) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.dismiss,
|
||||
#about-mozilla,
|
||||
.show-password-label,
|
||||
footer a[data-testid="link-mozilla"] {
|
||||
filter: invert(95%) !important;
|
||||
}
|
||||
header button svg,
|
||||
header .rounded svg,
|
||||
#service svg {
|
||||
filter: brightness(15) !important;
|
||||
}
|
||||
button.relative,
|
||||
#fxa-settings nav svg {
|
||||
filter: brightness(2) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
.unit-row-hr .border-grey-100 {
|
||||
border-color: var(--in-content-border-color) !important;
|
||||
}
|
||||
.input-row input[type="email"]:hover,
|
||||
.input-row input[type="number"]:hover,
|
||||
.input-row input[type="password"]:hover,
|
||||
.input-row input[type="tel"]:hover,
|
||||
.input-row input[type="text"]:hover {
|
||||
border-color: var(--in-content-border-hover) !important;
|
||||
}
|
||||
#main-content {
|
||||
box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
|
||||
0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
|
||||
}
|
||||
.input-row input[type="email"]:focus,
|
||||
.input-row input[type="number"]:focus,
|
||||
.input-row input[type="password"]:focus,
|
||||
.input-row input[type="tel"]:focus,
|
||||
.input-row input[type="text"]:focus {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,516 +12,7 @@
|
|||
/** Fully Dark Mode ***********************************************************/
|
||||
/*= Fully Dark Mode - Dark Mode Colors =======================================*/
|
||||
@import "theme/proton_color";
|
||||
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
/*= Addons.org =============================================================*/
|
||||
@-moz-document url-prefix("https://addons.mozilla.org")
|
||||
{
|
||||
/* Basic */
|
||||
.Page-content,
|
||||
.SecondaryHero,
|
||||
body,
|
||||
main[aria-label="Content"] {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.Page-content h1,
|
||||
.Page-content h2,
|
||||
.SearchResult-link,
|
||||
.Home-SubjectShelf-link:link,
|
||||
.Home-SubjectShelf-link:visited,
|
||||
.DropdownMenuItem-link a,
|
||||
.Select,
|
||||
.Badge,
|
||||
.Notice-generic,
|
||||
.Notice-genericWarning,
|
||||
.Notice-button,
|
||||
.Paginate .Button.Paginate-item:first-child,
|
||||
.Paginate .Button.Paginate-item:last-child,
|
||||
.Paginate .Button.Paginate-item--current-page,
|
||||
.Button--neutral,
|
||||
.blog-entry-title,
|
||||
.blogpost-nav * {
|
||||
color: var(--in-content-text-color) !important;
|
||||
}
|
||||
.AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
|
||||
.AutoSearchInput-suggestions-item--highlighted,
|
||||
.SecondaryHero-message-link,
|
||||
.SecondaryHero-module-link,
|
||||
.Card-contents a:not(.Button),
|
||||
.Card-footer-link a,
|
||||
.Card-shelf-footer-in-header a,
|
||||
.SearchResult-link:is(:active, :focus, :hover),
|
||||
.SearchResult:hover .SearchResult-link,
|
||||
.Home-SubjectShelf-link:is(:active, :focus, :hover),
|
||||
.DropdownMenuItem-link a:is(:active, :focus, :hover),
|
||||
.AddonMeta .MetadataCard-title a:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-content a:is(:active, :hover),
|
||||
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
|
||||
.Addon-summary a,
|
||||
.RatingsByStar-count a:hover,
|
||||
.RatingsByStar-star a:hover,
|
||||
.Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
|
||||
.AddonTitle-author a,
|
||||
.PermissionsCard-learn-more,
|
||||
.DefinitionList a,
|
||||
.ShowMoreCard-contents a,
|
||||
.AddonDescription-contents a,
|
||||
.AddonTitle a,
|
||||
.TooltipMenu-opener,
|
||||
.LanguageTools .Card-contents a,
|
||||
.blog-entry-read-more-link,
|
||||
.blogpost-nav-next.blogpost-nav-no-prev:hover p,
|
||||
.blogpost-content-wrapper p a,
|
||||
.blogpost-nav-prev:hover p,
|
||||
.blogpost-nav-next:hover p {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.SearchResult--meta-section,
|
||||
.MetadataCard-title,
|
||||
.MetadataCard-title a,
|
||||
.MetadataCard-content a,
|
||||
.CollectionSort-label,
|
||||
.SearchResult-summary,
|
||||
.AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
|
||||
.AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
|
||||
.PermissionsCard-subhead--optional,
|
||||
.PermissionsCard-subhead--required,
|
||||
.Definition-dt,
|
||||
.RatingsByStar-count a,
|
||||
.RatingsByStar-star a,
|
||||
.Paginate-page-number,
|
||||
.AddonSummaryCard-addonAverage,
|
||||
.AddonReviewCard-authorByLine,
|
||||
.UserReview-byLine,
|
||||
.UserReview-reply-header,
|
||||
.Home-heroHeader-subtitle,
|
||||
.blog-entry-date,
|
||||
.blogpost-breadcrumb *,
|
||||
.AddonTitle-author,
|
||||
.ExpandableCard-ToggleLink,
|
||||
.SearchFilters-label,
|
||||
.PromotedBadge-label--line {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.PromotedBadge-label--recommended {
|
||||
color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.Button--action {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
.Select,
|
||||
.Button--neutral,
|
||||
.Button--neutral:link,
|
||||
.Notice-button,
|
||||
.AMInstallButton .AMInstallButton-loading-button {
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
}
|
||||
.Button--neutral.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--neutral:not(.Button--disabled):hover,
|
||||
.Notice-button:hover {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.Button--action.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--action:not(.Button--disabled):hover {
|
||||
background: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
.ShowMoreCard-contents::after {
|
||||
background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
|
||||
}
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.SecondaryHero-module,
|
||||
.Card-header,
|
||||
.Card-contents,
|
||||
.CardList ul > li,
|
||||
.AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
|
||||
.Paginate,
|
||||
.LandingPage-header,
|
||||
.DropdownMenu-items,
|
||||
.DropdownMenu-items::after,
|
||||
.MetadataCard,
|
||||
.AddonsCard-list,
|
||||
.Card-footer,
|
||||
.StaticAddonCard,
|
||||
.blogpost-nav,
|
||||
.blogpost-nav * {
|
||||
background: var(--in-content-table-background) !important;
|
||||
}
|
||||
|
||||
.Paginate .Button.Paginate-item:is(:active, :hover) {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.Notice-generic,
|
||||
.Notice-genericWarning {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--in-content-page-background) 40%,
|
||||
var(--in-content-table-background)
|
||||
) !important;
|
||||
}
|
||||
|
||||
.LanguageTools-header-row {
|
||||
color: var(--in-content-table-header-color) !important;
|
||||
background: var(--in-content-table-header-background) !important;
|
||||
}
|
||||
.LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
|
||||
background-color: var(--in-content-box-background-odd) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.Icon-arrow-blue.SearchSuggestion-icon-arrow {
|
||||
filter: hue-rotate(330deg) brightness(1.3) !important;
|
||||
}
|
||||
.SecondaryHero-module-icon {
|
||||
filter: invert(85%) !important;
|
||||
}
|
||||
.Icon-magnifying-glass,
|
||||
.Notice-icon {
|
||||
filter: invert(65%) !important;
|
||||
}
|
||||
.PermissionsCard-learn-more .Icon,
|
||||
.Permission .Icon {
|
||||
filter: invert(100%) !important;
|
||||
}
|
||||
.Icon-heart {
|
||||
filter: brightness(0) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.DropdownMenu-items {
|
||||
box-shadow: 0 0 2px var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
.AutoSearchInput-query {
|
||||
border: 1px solid var(--in-content-table-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:is(:hover, :focus) {
|
||||
border-color: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
|
||||
0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
|
||||
}
|
||||
|
||||
.PromotedBadge-link--line {
|
||||
border-color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.PromotedBadge-link--line:hover {
|
||||
border-color: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
|
||||
.blog-entry-read-more-link {
|
||||
border-color: var(--in-content-link-color) !important;
|
||||
}
|
||||
|
||||
.blogpost-nav-arrow-left .cls-1,
|
||||
.blogpost-nav-arrow-right .cls-1 {
|
||||
stroke: var(--in-content-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Support.org ============================================================*/
|
||||
@-moz-document url-prefix("https://support.mozilla.org")
|
||||
{
|
||||
/* Basic */
|
||||
:root {
|
||||
--color-blue-06: var(--in-content-link-color) !important;
|
||||
--color-blue-07: var(--in-content-link-color-hover) !important;
|
||||
--color-blue-09: var(--in-content-link-color-active) !important;
|
||||
|
||||
--page-bg: var(--in-content-page-background) !important;
|
||||
--color-white: var(--in-content-page-background) !important;
|
||||
--color-shade-bg: var(--in-content-page-background) !important;
|
||||
--color-marketing-gray-02: var(--card-outline-color) !important;
|
||||
--color-inverse-bg: var(--in-content-page-color) !important;
|
||||
--color-inverse: var(--in-content-page-background) !important;
|
||||
--color-text: var(--in-content-page-color) !important;
|
||||
--color-moz-text: var(--in-content-page-color) !important;
|
||||
--color-moz-heading: var(--in-content-page-color) !important;
|
||||
--color-text-light: var(--in-content-deemphasized-text) !important;
|
||||
--color-link: var(--in-content-link-color) !important;
|
||||
--color-success: var(--green-70) !important;
|
||||
--color-warning: var(--yellow-80) !important;
|
||||
--color-error: var(--red-60) !important;
|
||||
--color-error-hover: var(--red-50) !important;
|
||||
--color-moz-heading: #fff;
|
||||
--color-moz-inverse-bg: var(red) !important;
|
||||
--focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
|
||||
0 0 0 2px var(--in-content-primary-button-background-active);
|
||||
}
|
||||
.warning {
|
||||
--color-link: rgb(55, 255, 255) !important;
|
||||
}
|
||||
|
||||
body,
|
||||
#main-content,
|
||||
#instant-search-content,
|
||||
#mzp-c-menu-panel-help,
|
||||
.mzp-c-navigation,
|
||||
.kbox-container {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.mzp-c-menu-category .mzp-c-menu-title,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-link,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-link > *,
|
||||
.mzp-c-menu-item .mzp-c-menu-item-list a,
|
||||
#doc-content .menu,
|
||||
.document--content .menu,
|
||||
.forum--entry-content .menu,
|
||||
.tag-name a {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
.ts-select-trigger,
|
||||
input[type="date"],
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
select,
|
||||
textarea,
|
||||
#doc-content .button,
|
||||
#doc-content .key,
|
||||
.document--content .button,
|
||||
.document--content .key,
|
||||
.forum--entry-content .button,
|
||||
.forum--entry-content .key {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
.tag-list a {
|
||||
color: var(--color-marketing-gray-10) !important;
|
||||
}
|
||||
.tag-list a:hover,
|
||||
.sidebar-nav a:hover {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
.tag-list li {
|
||||
background: var(--in-content-page-color) !important;
|
||||
}
|
||||
.tag-list li:hover {
|
||||
background: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.sidebar-nav.topics,
|
||||
.sidebar-nav.topics > li {
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
.mzp-c-menu-panel {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.sumo-nav--logo,
|
||||
.sumo-nav--search-button,
|
||||
.sumo-nav--toggle-button,
|
||||
.card:not(.is-inverse) .card--icon-sm,
|
||||
.mzp-c-menu-item-icon,
|
||||
.mzp-c-menu-button-close,
|
||||
.topic-article--icon,
|
||||
.card--topic > .card--icon,
|
||||
.mzp-c-details .is-summary button::before,
|
||||
details .is-summary button::before,
|
||||
summary::before,
|
||||
.icon-button > button,
|
||||
.search-button {
|
||||
filter: invert(95%) !important;
|
||||
}
|
||||
button.markup-toolbar-button {
|
||||
/*using 0.5 because in middle*/
|
||||
filter: invert(0.5) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.support-callouts > .card.is-inverse {
|
||||
background: #20133a !important;
|
||||
}
|
||||
.support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
.sumo-button.secondary-button {
|
||||
border-color: none !important;
|
||||
}
|
||||
.mzp-c-menu-panel {
|
||||
border-color: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
|
||||
border-color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.mzp-c-menu-panel {
|
||||
box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
|
||||
}
|
||||
}
|
||||
.card--product,
|
||||
.card--topic,
|
||||
.card--article {
|
||||
box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
|
||||
0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Accounts.com ===========================================================*/
|
||||
@-moz-document url-prefix("https://accounts.firefox.com")
|
||||
{
|
||||
/* Basic */
|
||||
body {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
.button.primary-button,
|
||||
.button[type="submit"]:not(.secondary-button),
|
||||
.settings-button.primary-button,
|
||||
.settings-button[type="submit"]:not(.secondary-button),
|
||||
button.primary-button,
|
||||
button[type="submit"]:not(.secondary-button) {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
header h1,
|
||||
.info,
|
||||
.info a,
|
||||
.faint a:hover,
|
||||
.cta-neutral:hover {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
#main-content.panel a,
|
||||
.links a,
|
||||
.link-blue,
|
||||
.text-blue-500 {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.link-blue:hover {
|
||||
color: var(--in-content-link-color-hover) !important;
|
||||
}
|
||||
|
||||
.signed-in-email-message,
|
||||
.verification-email-message,
|
||||
.verification-message,
|
||||
.verification-recovery-code-message,
|
||||
.verification-totp-message,
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
.input-row input::placeholder,
|
||||
.firefox-family-services > ul > .firefox-service,
|
||||
.faint,
|
||||
.faint a,
|
||||
.text-grey-400 {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.password-row .show-password-label {
|
||||
background-color: unset !important;
|
||||
}
|
||||
#main-content,
|
||||
.modal,
|
||||
.firefox-family-services,
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
header,
|
||||
.bg-white:not(nav) {
|
||||
background: var(--in-content-box-background) !important;
|
||||
}
|
||||
#suggest-sync,
|
||||
.cta-neutral {
|
||||
background: var(--in-content-button-background) !important;
|
||||
}
|
||||
.cta-neutral:hover,
|
||||
.bg-grey-50:hover,
|
||||
.hover\:bg-grey-100:hover {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.hover\:bg-grey-200:hover {
|
||||
background: var(--in-content-button-background-active) !important;
|
||||
}
|
||||
.button.primary-button:hover:enabled,
|
||||
.button[type="submit"]:not(.secondary-button):hover:enabled,
|
||||
.settings-button.primary-button:hover:enabled,
|
||||
.settings-button[type="submit"]:not(.secondary-button):hover:enabled,
|
||||
button.primary-button:hover:enabled,
|
||||
button[type="submit"]:not(.secondary-button):hover:enabled {
|
||||
background: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
.tooltip,
|
||||
.tooltip::before {
|
||||
background: var(--in-content-danger-button-background) !important;
|
||||
}
|
||||
|
||||
/* Fill */
|
||||
.dismiss,
|
||||
#about-mozilla,
|
||||
.show-password-label,
|
||||
footer a[data-testid="link-mozilla"] {
|
||||
filter: invert(95%) !important;
|
||||
}
|
||||
header button svg,
|
||||
header .rounded svg,
|
||||
#service svg {
|
||||
filter: brightness(15) !important;
|
||||
}
|
||||
button.relative,
|
||||
#fxa-settings nav svg {
|
||||
filter: brightness(2) !important;
|
||||
}
|
||||
|
||||
/* Others */
|
||||
.input-row input[type="email"],
|
||||
.input-row input[type="number"],
|
||||
.input-row input[type="password"],
|
||||
.input-row input[type="tel"],
|
||||
.input-row input[type="text"],
|
||||
.unit-row-hr .border-grey-100 {
|
||||
border-color: var(--in-content-border-color) !important;
|
||||
}
|
||||
.input-row input[type="email"]:hover,
|
||||
.input-row input[type="number"]:hover,
|
||||
.input-row input[type="password"]:hover,
|
||||
.input-row input[type="tel"]:hover,
|
||||
.input-row input[type="text"]:hover {
|
||||
border-color: var(--in-content-border-hover) !important;
|
||||
}
|
||||
#main-content {
|
||||
box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
|
||||
0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
|
||||
}
|
||||
.input-row input[type="email"]:focus,
|
||||
.input-row input[type="number"]:focus,
|
||||
.input-row input[type="password"]:focus,
|
||||
.input-row input[type="tel"]:focus,
|
||||
.input-row input[type="text"]:focus {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "contents/dark_mode";
|
||||
|
||||
/** Fully Proton Mode *********************************************************/
|
||||
@import "contents/proton_commons";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue