diff --git a/chrome/userContent/NewTab.css b/chrome/userContent/NewTab.css index f2425a2..fe2f439 100644 --- a/chrome/userContent/NewTab.css +++ b/chrome/userContent/NewTab.css @@ -1,12 +1,15 @@ -@-moz-document url("about:newtab"), url(about:home) { +/* 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; } + .search-wrapper input { border: 0 !important; box-shadow: none !important; @@ -14,27 +17,35 @@ 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 { + + .top-site-outer .tile, + .screenshot, + .top-site-icon { border-radius: 8px !important; } - + body:not([lwt-newtab], [style*="color"]) { --newtab-background-color: #f5f5f5 !important; --newtab-text-primary-color: #000 !important; @@ -45,6 +56,7 @@ --search-button-bg-hover: #006CBE; --newtab-search-icon-color: #fff !important; } + body[style*="--newtab-background-color:rgba(42, 42, 46, 1); --newtab-text-primary-color:rgba(249, 249, 250, 1);"] { --newtab-background-color: #242424 !important; --newtab-text-primary-color: #fff !important; @@ -57,43 +69,53 @@ } } -@-moz-document url(about:privatebrowsing) { +/* 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; @@ -101,7 +123,8 @@ 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; } -} \ No newline at end of file +} diff --git a/chrome/userContent/Preferences.css b/chrome/userContent/Preferences.css index 40c315e..994122a 100644 --- a/chrome/userContent/Preferences.css +++ b/chrome/userContent/Preferences.css @@ -1,334 +1,399 @@ -@-moz-document url-prefix(about:preferences) { - /* Icons */ +/* Preferences Page */ +@-moz-document url-prefix("about:preferences") { + /* Icons */ + #category-general>.category-icon { + list-style-image: url(../icons/settings.svg) !important; + } - /* Categories */ - #category-general > .category-icon { - list-style-image: url(../icons/settings.svg) !important; - } - #category-home > .category-icon { - list-style-image: url(../icons/home.svg) !important; - } - #category-search > .category-icon { - list-style-image: url(../icons/search.svg) !important; - } - #category-privacy > .category-icon { - list-style-image: url(../icons/lock.svg) !important; - } - #category-sync > .category-icon { - list-style-image: url(../icons/sync.svg) !important; - } - .category[name="discover"] { - background-image: url(../icons/star.svg) !important; - } - .category[name="extension"] { - background-image: url(../icons/addons.svg) !important; - } - .category[name="theme"] { - background-image: url(../icons/brush.svg) !important; - } + #category-home>.category-icon { + list-style-image: url(../icons/home.svg) !important; + } - /* Permissions */ - .geo-icon { - list-style-image: url(../urlbar/permissions/geo.svg) !important; - } - .camera-icon { - list-style-image: url(../urlbar/permissions/camera.svg) !important; - } - .microphone-icon { - list-style-image: url(../urlbar/permissions/microphone.svg) !important; - } - .desktop-notification-icon { - list-style-image: url(../urlbar/permissions/desktop-notification.svg) !important; - } - .autoplay-icon { - list-style-image: url(../urlbar/permissions/autoplay-media.svg) !important; - } - .xr-icon { - list-style-image: url(../urlbar/permissions/xr.svg) !important; - } + #category-search>.category-icon { + list-style-image: url(../icons/search.svg) !important; + } - /* Sync Items */ - .sync-engine-bookmarks .checkbox-icon, .sync-engine-bookmarks.sync-engine-image { - list-style-image: url(../icons/bookmark.svg) !important; - } - .sync-engine-history .checkbox-icon, .sync-engine-history.sync-engine-image { - list-style-image: url(../icons/history.svg) !important; - } - .sync-engine-tabs .checkbox-icon, .sync-engine-tabs.sync-engine-image { - list-style-image: url(../icons/new-tab-image.svg) !important; - } - .sync-engine-passwords .checkbox-icon, .sync-engine-passwords.sync-engine-image { - list-style-image: url(../icons/key.svg) !important; - } - .sync-engine-addons .checkbox-icon, .sync-engine-addons.sync-engine-image { - list-style-image: url(../icons/addons.svg) !important; - } - .sync-engine-prefs .checkbox-icon, .sync-engine-prefs.sync-engine-image { - list-style-image: url(../icons/settings.svg) !important; - } + #category-privacy>.category-icon { + list-style-image: url(../icons/lock.svg) !important; + } - /* Profile Picture */ - .fxaProfileImage:not([style*="list-style-image"]) { - list-style-image: url(../icons/profile.svg) !important; - } + #category-sync>.category-icon { + list-style-image: url(../icons/sync.svg) !important; + } - /* links */ - .preferences-icon, .page-options-menu > .more-options-button { - background-image: url(../icons/settings.svg) !important; - } - .addons-icon { - list-style-image: url(../icons/addons.svg) !important; - } - .textbox-search-sign { - list-style-image: url(../icons/search.svg) !important; - } + .category[name="discover"] { + background-image: url(../icons/star.svg) !important; + } - /* Visual Ajustments */ + .category[name="extension"] { + background-image: url(../icons/addons.svg) !important; + } + + .category[name="theme"] { + background-image: url(../icons/brush.svg) !important; + } + + /* Permissions */ + .geo-icon { + list-style-image: url(../urlbar/permissions/geo.svg) !important; + } + + .camera-icon { + list-style-image: url(../urlbar/permissions/camera.svg) !important; + } + + .microphone-icon { + list-style-image: url(../urlbar/permissions/microphone.svg) !important; + } + + .desktop-notification-icon { + list-style-image: url(../urlbar/permissions/desktop-notification.svg) !important; + } + + .autoplay-icon { + list-style-image: url(../urlbar/permissions/autoplay-media.svg) !important; + } + + .xr-icon { + list-style-image: url(../urlbar/permissions/xr.svg) !important; + } + + /* Sync Items */ + .sync-engine-bookmarks .checkbox-icon, + .sync-engine-bookmarks.sync-engine-image { + list-style-image: url(../icons/bookmark.svg) !important; + } + + .sync-engine-history .checkbox-icon, + .sync-engine-history.sync-engine-image { + list-style-image: url(../icons/history.svg) !important; + } + + .sync-engine-tabs .checkbox-icon, + .sync-engine-tabs.sync-engine-image { + list-style-image: url(../icons/new-tab-image.svg) !important; + } + + .sync-engine-passwords .checkbox-icon, + .sync-engine-passwords.sync-engine-image { + list-style-image: url(../icons/key.svg) !important; + } + + .sync-engine-addons .checkbox-icon, + .sync-engine-addons.sync-engine-image { + list-style-image: url(../icons/addons.svg) !important; + } + + .sync-engine-prefs .checkbox-icon, + .sync-engine-prefs.sync-engine-image { + list-style-image: url(../icons/settings.svg) !important; + } + + /* Profile Picture */ + .fxaProfileImage:not([style*="list-style-image"]) { + list-style-image: url(../icons/profile.svg) !important; + } + + /* links */ + .preferences-icon, + .page-options-menu>.more-options-button { + background-image: url(../icons/settings.svg) !important; + } + + .addons-icon { + list-style-image: url(../icons/addons.svg) !important; + } + + .textbox-search-sign { + list-style-image: url(../icons/search.svg) !important; + } + + /* Visual Ajustments */ + :root { + --in-content-page-background: #f7f7f7 !important; + --in-content-text-color: #262626 !important; + --in-content-page-color: #262626 !important; + --card-background: #fff; + --card-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px, rgb(0 0 0 / 11%) 0px 0px 2.9px !important; + --sidebar-border-color: #bebebe; + --category-active: #0078d4; + --in-content-category-text-selected: #0078d4 !important; + --category-selected: #0001; + --in-content-link-color: #0078d4 !important; + --section-highlight-background-color: #0078d420 !important; + + --search-bgcolor: #fff; + --input-border-color: var(--sidebar-border-color); + --input-border-color-focused: #888; + + --checkbox-bgcolor: #f7f7f7; + --checkbox-border-color: #8D8D8D; + --checkbox-hover-border-color: #666; + --checkbox-fill-color: #262626; + --checkbox-checked-bgcolor: #0078D4; + --checkbox-checked-fill-color: #fff; + } + + .content-blocking-category.selected { + border-color: #0078d4 !important; + } + + .content-blocking-category.expanded:not(.selected) .content-blocking-warning { + background-color: #f7f7f7 !important; + } + + @media (prefers-color-scheme: dark) { :root { - --in-content-page-background: #f7f7f7 !important; - --in-content-text-color: #262626 !important; - --in-content-page-color: #262626 !important; - --card-background: #fff; - --card-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px, rgb(0 0 0 / 11%) 0px 0px 2.9px !important; - --sidebar-border-color: #bebebe; - --category-active: #0078d4; - --in-content-category-text-selected: #0078d4 !important; - --category-selected: #0001; - --in-content-link-color: #0078d4 !important; - --section-highlight-background-color: #0078d420 !important; + --in-content-page-background: #333 !important; + --in-content-text-color: #fff !important; + --in-content-page-color: #fff !important; + --card-background: #3b3b3b; + --card-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 25%), 0px 0px 2.9px rgb(0 0 0 / 22%) !important; + --sidebar-border-color: #6b6b6b; + --category-active: #63ade5; + --in-content-category-text-selected: #63ade5 !important; + --category-selected: #fff1; + --in-content-link-color: #63ade5 !important; + --section-highlight-background-color: #63ade520 !important; - --search-bgcolor: #fff; - --input-border-color: var(--sidebar-border-color); - --input-border-color-focused: #888; + --search-bgcolor: #2b2b2b; + --input-border-color-focused: #808080; - --checkbox-bgcolor: #f7f7f7; - --checkbox-border-color: #8D8D8D; - --checkbox-hover-border-color: #666; - --checkbox-fill-color: #262626; - --checkbox-checked-bgcolor: #0078D4; - --checkbox-checked-fill-color: #fff; + --checkbox-bgcolor: #333; + --checkbox-border-color: #7d7d7d; + --checkbox-hover-border-color: #A4A4A4; + --checkbox-fill-color: #fff; + --checkbox-checked-bgcolor: #006CBE; + --checkbox-checked-fill-color: #fff; } + .content-blocking-category.selected { - border-color: #0078d4 !important; + border-color: #63ade5 !important; } + .content-blocking-category.expanded:not(.selected) .content-blocking-warning { - background-color: #f7f7f7 !important; + background-color: #333 !important; } - @media (prefers-color-scheme: dark) { - :root { - --in-content-page-background: #333 !important; - --in-content-text-color: #fff !important; - --in-content-page-color: #fff !important; - --card-background: #3b3b3b; - --card-shadow: 0px 1.6px 3.6px rgb(0 0 0 / 25%), 0px 0px 2.9px rgb(0 0 0 / 22%) !important; - --sidebar-border-color: #6b6b6b; - --category-active: #63ade5; - --in-content-category-text-selected: #63ade5 !important; - --category-selected: #fff1; - --in-content-link-color: #63ade5 !important; - --section-highlight-background-color: #63ade520 !important; + } - --search-bgcolor: #2b2b2b; - --input-border-color-focused: #808080; + /* Cards For Certain Sections */ + #fxaGroup, + .sync-group, + #trackingGroup, + #searchbarGroup, + #homeContentsGroup, + #permissionsGroup, + #httpsOnlyBox, + #applicationsGroup, + #oneClickSearchProvidersGroup { + padding: 12px 16px !important; + background: var(--card-background) !important; + box-shadow: var(--card-shadow) !important; + border-radius: 4px !important; + border: 0 !important; + } - --checkbox-bgcolor: #333; - --checkbox-border-color: #7d7d7d; - --checkbox-hover-border-color: #A4A4A4; - --checkbox-fill-color: #fff; - --checkbox-checked-bgcolor: #006CBE; - --checkbox-checked-fill-color: #fff; - } - .content-blocking-category.selected { - border-color: #63ade5 !important; - } - .content-blocking-category.expanded:not(.selected) .content-blocking-warning { - background-color: #333 !important; - } - } + :is(.sync-group, #trackingGroup, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup) h2 { + margin-top: 2px !important; + } - /* Cards For Certain Sections */ - #fxaGroup, .sync-group, #trackingGroup, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup { - padding: 12px 16px !important; - background: var(--card-background) !important; - box-shadow: var(--card-shadow) !important; - border-radius: 4px !important; - border: 0 !important; - } - :is(.sync-group, #trackingGroup, #searchbarGroup, #homeContentsGroup, #permissionsGroup, #httpsOnlyBox, #applicationsGroup, #oneClickSearchProvidersGroup) h2 { - margin-top: 2px !important; - } - h1 { - margin: 0 0 16px !important; - font-weight: 600 !important; - font-size: 20px !important; - } - #openChangeProfileImage { - height: 64px !important; - width: 64px !important; - margin: 10px !important; - margin-inline: 6px 20px !important; - } - menulist { - max-width: 400px !important; - } + h1 { + margin: 0 0 16px !important; + font-weight: 600 !important; + font-size: 20px !important; + } + + #openChangeProfileImage { + height: 64px !important; + width: 64px !important; + margin: 10px !important; + margin-inline: 6px 20px !important; + } + + menulist { + max-width: 400px !important; + } - search-textbox, input[type="text"] { - background-color: transparent !important; - border: 1px solid var(--input-border-color) !important; - transition: all .2s ease-in-out !important; - } - search-textbox:hover, search-textbox[focused], input[type="text"]:focus, input[type="text"]:hover { - --input-border-color: var(--input-border-color-focused) !important; - } - search-textbox[focused], input[type="text"]:focus { - box-shadow: 0 0 0 1px inset var(--input-border-color) !important; - } - search-textbox { - background-color: var(--search-bgcolor) !important; - padding: 2px 8px !important; - margin: 16px 0 !important; - min-height: 34px !important; - } - #policies-container { - margin: 17px 0 17px 0 !important; - position: relative !important; - z-index: 99 !important; - background-color: var(--in-content-page-background) !important; -} + search-textbox, + input[type="text"] { + background-color: transparent !important; + border: 1px solid var(--input-border-color) !important; + transition: all .2s ease-in-out !important; + } - button, menulist { - background-color: transparent !important; - border: 1px solid var(--input-border-color) !important; - border-radius: 2px !important; - transition: all .2s ease-in-out !important; - } - button:hover, menulist:hover { - border-color: var(--input-border-color-focused) !important; - } + search-textbox:hover, + search-textbox[focused], + input[type="text"]:focus, + input[type="text"]:hover { + --input-border-color: var(--input-border-color-focused) !important; + } - dropmarker { - list-style-image: url(../popup/menu-right.svg) !important; - transform: rotate(90deg) scale(calc(16 / 12)) !important; - margin: 0 4px 0 0 !important; - max-width: 12px !important; + search-textbox[focused], + input[type="text"]:focus { + box-shadow: 0 0 0 1px inset var(--input-border-color) !important; + } + + search-textbox { + background-color: var(--search-bgcolor) !important; + padding: 2px 8px !important; + margin: 16px 0 !important; + min-height: 34px !important; + } + + #policies-container { + margin: 17px 0 17px 0 !important; + position: relative !important; + z-index: 99 !important; + background-color: var(--in-content-page-background) !important; + } + + button, + menulist { + background-color: transparent !important; + border: 1px solid var(--input-border-color) !important; + border-radius: 2px !important; + transition: all .2s ease-in-out !important; + } + + button:hover, + menulist:hover { + border-color: var(--input-border-color-focused) !important; + } + + dropmarker { + list-style-image: url(../popup/menu-right.svg) !important; + transform: rotate(90deg) scale(calc(16 / 12)) !important; + margin: 0 4px 0 0 !important; + max-width: 12px !important; + } + + .navigation { + border-right: 1px solid var(--sidebar-border-color) !important; + } + + .sticky-container { + border-bottom: 1px solid var(--sidebar-border-color) !important; + } + + .sticky-container::before { + content: "Preferences"; + font-size: 24px; + font-weight: 600; + position: absolute !important; + min-height: 34px; + top: 16px; + left: 4px; + } + + #mainPrefPane { + margin-top: 16px !important; + } + + .checkbox-check { + /* Move Checkboxes to Right */ + -moz-box-ordinal-group: 2 !important; + + width: 40px !important; + height: 20px !important; + padding: 4px !important; + padding-inline: 0 24px !important; + list-style-image: none !important; + border-radius: 99px !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='context-fill'/%3E%3C/svg%3E") !important; + background-position: 4px 4px !important; + background-repeat: no-repeat !important; + background-size: 10px !important; + transition: all 0.1s ease-in-out !important; + -moz-context-properties: fill, fill-opacity !important; + fill: currentColor !important; + background-color: var(--checkbox-bgcolor) !important; + color: var(--checkbox-fill-color) !important; + border: 1px solid var(--checkbox-border-color) !important; + margin: 3px 8px !important; + } + + .indent>checkbox>.checkbox-check { + margin-inline-start: 32px !important; + } + + .checkbox-check:hover { + border-color: var(--checkbox-hover-border-color) !important; + } + + .checkbox-check[checked] { + background-position: 24px 4px !important; + background-color: var(--checkbox-checked-bgcolor) !important; + color: var(--checkbox-checked-fill-color) !important; + border-color: transparent !important; + } + + .radio-check { + background-color: var(--checkbox-bgcolor) !important; + border: 1px solid var(--checkbox-border-color) !important; + } + + .radio-check:hover { + background-color: var(--checkbox-bgcolor) !important; + border-color: var(--checkbox-hover-border-color) !important; + } + + .radio-check[selected] { + background-color: var(--checkbox-border-color) !important; + border-color: transparent !important; + color: var(--checkbox-bgcolor) !important; + } + + .radio-check[selected]:hover { + background-color: var(--checkbox-hover-border-color) !important; + } + + #categories { + padding-inline: 16px !important; + margin: 16px 0 0 !important; + } + + .category { + position: relative !important; + margin: 0 !important; + padding-inline: 12px !important; + } + + .sidebar-footer-link, + .sidebar-footer-button>.text-link { + margin-inline: 16px !important; + } + + .sidebar-footer-icon { + margin: 16px !important; + height: 16px !important; + width: 16px !important; + } + + .sidebar-footer-button:last-of-type { + margin-bottom: 16px !important; + } + + @media (max-width: 830px) { + :root { + --in-content-sidebar-width: 80px !important; } .navigation { - border-right: 1px solid var(--sidebar-border-color) !important; + margin-inline-end: 16px !important; } - .sticky-container { - border-bottom: 1px solid var(--sidebar-border-color) !important; - } - .sticky-container::before { - content: "Preferences"; - font-size: 24px; - font-weight: 600; - position: absolute !important; - min-height: 34px; - top: 16px; - left: 4px; - } - #mainPrefPane { - margin-top: 16px !important; - } - .checkbox-check { - /* Move Checkboxes to Right */ - -moz-box-ordinal-group: 2 !important; + } - width: 40px !important; - height: 20px !important; - padding: 4px !important; - padding-inline: 0 24px !important; - list-style-image: none !important; - border-radius: 99px !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='context-fill'/%3E%3C/svg%3E") !important; - background-position: 4px 4px !important; - background-repeat: no-repeat !important; - background-size: 10px !important; - transition: all 0.1s ease-in-out !important; - -moz-context-properties: fill, fill-opacity !important; - fill: currentColor !important; - background-color: var(--checkbox-bgcolor) !important; - color: var(--checkbox-fill-color) !important; - border: 1px solid var(--checkbox-border-color) !important; - margin: 3px 8px !important; - } - .indent > checkbox > .checkbox-check { - margin-inline-start: 32px !important; - } - .checkbox-check:hover { - border-color: var(--checkbox-hover-border-color) !important; - } - .checkbox-check[checked] { - background-position: 24px 4px !important; - background-color: var(--checkbox-checked-bgcolor) !important; - color: var(--checkbox-checked-fill-color) !important; - border-color: transparent !important; - } + .category::before { + content: ""; + height: calc(100% - 24px) !important; + position: absolute !important; + top: 12px; + left: 0; + border-left: 3px solid transparent !important; + } - .radio-check { - background-color: var(--checkbox-bgcolor) !important; - border: 1px solid var(--checkbox-border-color) !important; - } - .radio-check:hover { - background-color: var(--checkbox-bgcolor) !important; - border-color: var(--checkbox-hover-border-color) !important; - } - .radio-check[selected] { - background-color: var(--checkbox-border-color) !important; - border-color: transparent !important; - color: var(--checkbox-bgcolor) !important; - } - .radio-check[selected]:hover { - background-color: var(--checkbox-hover-border-color) !important; - } - - #categories { - padding-inline: 16px !important; - margin: 16px 0 0 !important; - } - - .category { - position: relative !important; - margin: 0 !important; - padding-inline: 12px !important; - } - - .sidebar-footer-link, .sidebar-footer-button > .text-link { - margin-inline: 16px !important; - } - - .sidebar-footer-icon { - margin: 16px !important; - height: 16px !important; - width: 16px !important; - } - - .sidebar-footer-button:last-of-type { - margin-bottom: 16px !important; - } - - @media (max-width: 830px) { - :root { - --in-content-sidebar-width: 80px !important; - } - - .navigation { - margin-inline-end: 16px !important; - } - } - - .category::before { - content: ""; - height: calc(100% - 24px) !important; - position: absolute !important; - top: 12px; - left: 0; - border-left: 3px solid transparent !important; - } - - .category[selected]::before { - border-color: var(--category-active) !important; - } -} \ No newline at end of file + .category[selected]::before { + border-color: var(--category-active) !important; + } +}