From 63c83deb265ae17a24f36b668c4f4460acdf48ce Mon Sep 17 00:00:00 2001 From: agoloman Date: Wed, 21 May 2025 07:44:03 +0300 Subject: [PATCH] Revert "Bug 1606785 - Enable Prettier for CSS files r=desktop-theme-reviewers,Standard8,frontend-codestyle-reviewers,emilio" for causing multiple failures. This reverts commit ec5fa1d4c0ee7ec6d1cac04433767211cfdf0045. Revert "Bug 1606785 - Format Firefox CSS files with Prettier r=desktop-theme-reviewers,perftest-reviewers,places-reviewers,translations-reviewers,omc-reviewers,backup-reviewers,browser-installer-reviewers,sparky,dao,pdahiya,nrishel,kpatenio" This reverts commit baa5d72bbdb3e07046bf6feb2b7dd4da3271fff9. Revert "Bug 1606785 - Format browser/themes and toolkit/themes CSS files with Prettier r=desktop-theme-reviewers,pip-reviewers,tabbrowser-reviewers,places-reviewers,dao,mconley" This reverts commit 9604b0a8ae1ceb26631e678e6865874191225baf. Revert "Bug 1606785 - Format browser/themes/preferences CSS files with Prettier r=settings-reviewers,desktop-theme-reviewers,dao,mconley" This reverts commit 686c1cf85f12d95024f9ae980434cfc068e4f1e2. Revert "Bug 1606785 - Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao" This reverts commit a7a4f31251a2f00d8736232e8e71d2a52bf7674e. Revert "Bug 1606785 - Format webcompat CSS files with Prettier r=webcompat-reviewers,denschub" This reverts commit 41bc4d52371e55746141fca64f85197b61203897. Revert "Bug 1606785 - Format search CSS files with Prettier r=search-reviewers,jteow" This reverts commit 7bb7f8237413ace2ca084980d455cd7cd2d21834. Revert "Bug 1606785 - Format dom CSS files with Prettier r=emilio" This reverts commit c22e910235ebe3c03f89563273c13d616548b6e2. Revert "Bug 1606785 - Format android CSS files with Prettier r=geckoview-reviewers,hiro" This reverts commit c08e43fc3d5eb3b1703a643a5abfe206d5f28d7f. Revert "Bug 1606785 - Format layout CSS files with Prettier r=layout-reviewers,dholbert" This reverts commit 4f2a32d1a4814a0c33492c752112ad4a6817e9ff. Revert "Bug 1606785 - Format devtools CSS files with Prettier r=devtools-reviewers,nchevobbe,frontend-codestyle-reviewers" This reverts commit c05f675ddfcd42d744b734491905bfa3ad081976. Revert "Bug 1606785 - Format recomp CSS files with Prettier r=reusable-components-reviewers,desktop-theme-reviewers,dao,mkennedy" This reverts commit b10c7de8d0c38a40b3b0d9ffbfecfcda62dada39. Revert "Bug 1606785 - Format sidebar CSS files with Prettier r=sidebar-reviewers,desktop-theme-reviewers,dao,nsharpley" This reverts commit d32c555e37d4ca69a57f4924731970c3c7d5a56b. Revert "Bug 1606785 - Format shopping CSS files with Prettier r=shopping-reviewers,desktop-theme-reviewers,dao,rking" This reverts commit 965887a7087c1cc17b13d5f0f41ac49243390ce8. Revert "Bug 1606785 - Format profiles CSS files with Prettier r=profiles-reviewers,desktop-theme-reviewers,dao,mossop" This reverts commit 8338860f74d672071fbeb96574f57a225248d6a3. Revert "Bug 1606785 - Format genai and ml CSS files with Prettier r=firefox-ai-ml-reviewers,Mardak" This reverts commit d66681f553dbe1a9859155e614bedb476438a9ca. Revert "Bug 1606785 - Format firefoxview CSS files with Prettier r=fxview-reviewers,desktop-theme-reviewers,dao,jsudiaman" This reverts commit 530b815cadad2fc8946b5f91124cef74dece69f4. Revert "Bug 1606785 - Format aboutlogins, megalist, and form autofill CSS files with Prettier r=credential-management-reviewers,mtigley,desktop-theme-reviewers,dao" This reverts commit 813c8643812ac795739119d67fc51912feabb75b. --- .prettierignore | 91 +--- .prettierignore-css | 2 - .prettierignore-non-css | 9 - .prettierrc.js | 10 - .stylelintignore | 6 +- browser/base/content/aboutDialog.css | 2 +- browser/base/content/pageinfo/pageInfo.css | 5 +- browser/base/content/test/pageStyle/style.css | 4 +- .../test_no_mcb_on_http_site_img.css | 2 +- .../aurora/stubinstaller/installing_page.css | 5 +- .../branding/nightly/content/aboutDialog.css | 2 +- .../nightly/stubinstaller/installing_page.css | 5 +- .../branding/official/content/aboutDialog.css | 2 +- .../stubinstaller/installing_page.css | 2 +- .../unofficial/content/aboutDialog.css | 2 +- .../stubinstaller/installing_page.css | 5 +- .../aboutlogins/content/aboutLogins.css | 6 +- .../content/aboutLoginsImportReport.css | 1 + .../components/confirmation-dialog.css | 4 +- .../content/components/fxaccounts-button.css | 3 +- .../content/components/generic-dialog.css | 2 +- .../components/import-error-dialog.css | 2 +- .../content/components/login-alert.css | 4 +- .../content/components/login-intro.css | 2 +- .../content/components/login-item.css | 20 +- .../content/components/login-list.css | 2 +- .../components/login-message-popup.css | 2 +- .../components/remove-logins-dialog.css | 4 +- browser/components/backup/content/archive.css | 4 +- .../content/usercontext.css | 10 +- .../content/aboutPolicies.css | 13 +- browser/components/extensions/extension.css | 23 +- .../components/firefoxview/card-container.css | 10 +- .../components/firefoxview/firefoxview.css | 20 +- .../components/firefoxview/fxview-tab-row.css | 2 +- browser/components/firefoxview/history.css | 2 +- .../firefoxview/opentabs-tab-row.css | 4 +- .../components/firefoxview/view-opentabs.css | 3 +- .../firefoxview/view-syncedtabs.css | 6 +- browser/components/genai/chat.css | 12 +- .../genai/content/link-preview-card.css | 158 +++---- .../components/genai/content/model-optin.css | 17 +- .../messagepreview/messagepreview.css | 3 +- .../metadataViewer/interactionsViewer.css | 8 +- .../components/profiles/content/avatar.css | 2 + .../profiles/content/profile-card.css | 7 +- .../profiles/content/profiles-pages.css | 5 +- .../protections/content/protections.css | 118 +++-- .../screenshots/screenshots-buttons.css | 3 +- .../components/search/content/addEngine.css | 4 +- .../search/content/contentSearchUI.css | 10 +- .../search/test/browser/telemetry/serp.css | 16 +- .../shopping/content/letter-grade.css | 12 +- .../shopping/content/shopping-card.css | 2 +- .../shopping/content/shopping-container.css | 16 +- .../shopping/content/shopping-message-bar.css | 4 +- .../components/sidebar/sidebar-customize.css | 2 +- browser/components/sidebar/sidebar-main.css | 2 +- .../components/sidebar/sidebar-tab-row.css | 5 +- browser/components/sidebar/sidebar.css | 4 +- .../.storybook/addon-fluent/fluent-panel.css | 6 +- .../textrecognition/textrecognition.css | 24 +- .../urlbar/tests/browser/dynamicResult0.css | 7 +- .../urlbar/tests/browser/dynamicResult1.css | 7 +- .../formautofill/skin/shared/editAddress.css | 6 +- .../skin/shared/editDialog-shared.css | 15 +- ...2-coldwellbankerhomes.com-image-height.css | 7 +- ...93-futurePLC-sites-trending_scrollbars.css | 3 +- ...pexels.com-nudge-thanks-popup-onscreen.css | 4 +- browser/fxr/content/common.css | 8 +- browser/fxr/content/fxrui.css | 10 +- browser/fxr/content/fxrui_blue.css | 30 +- browser/fxr/content/prefs.css | 6 +- .../windows/nsis/content/stub_common.css | 12 +- browser/themes/linux/browser.css | 6 +- browser/themes/linux/sanitizeDialog.css | 1 - browser/themes/osx/browser.css | 20 +- browser/themes/osx/customizableui/panelUI.css | 2 +- browser/themes/osx/downloads/downloads.css | 2 +- browser/themes/osx/places/organizer.css | 4 +- browser/themes/shared/UITour.css | 24 +- browser/themes/shared/addon-notification.css | 2 +- .../shared/addons/extension-controlled.css | 1 - .../shared/addons/unified-extensions.css | 7 +- browser/themes/shared/autocomplete.css | 16 +- browser/themes/shared/blockedSite.css | 2 +- browser/themes/shared/browser-colors.css | 32 +- browser/themes/shared/browser-shared.css | 89 ++-- browser/themes/shared/contextmenu.css | 2 +- browser/themes/shared/controlcenter/panel.css | 33 +- .../shared/customizableui/customizeMode.css | 51 +-- .../shared/customizableui/panelUI-shared.css | 160 +++---- .../downloads/download-blockedStates.css | 6 +- browser/themes/shared/downloads/indicator.css | 12 +- .../themes/shared/downloads/progressmeter.css | 15 +- .../shared/formautofill-notification.css | 1 + .../shared/identity-block/identity-block.css | 7 +- .../shared/migration/migration-wizard.css | 28 +- browser/themes/shared/notification-icons.css | 25 +- browser/themes/shared/pageInfo.css | 18 +- browser/themes/shared/places/sidebar.css | 26 +- .../shared/preferences/applications.css | 1 - .../shared/preferences/containers-dialog.css | 4 +- .../shared/preferences/fxaPairDevice.css | 10 +- .../themes/shared/preferences/preferences.css | 41 +- browser/themes/shared/preferences/privacy.css | 2 +- browser/themes/shared/preferences/search.css | 4 +- .../shared/preferences/translations.css | 18 +- .../privatebrowsing/aboutPrivateBrowsing.css | 61 ++- browser/themes/shared/search/searchbar.css | 4 +- .../themes/shared/setDesktopBackground.css | 2 +- browser/themes/shared/sidebar.css | 20 +- browser/themes/shared/syncedtabs/sidebar.css | 28 +- .../themes/shared/tabbrowser/content-area.css | 77 ++-- browser/themes/shared/tabbrowser/ctrlTab.css | 22 +- .../tabbrowser/fullscreen-and-pointerlock.css | 2 +- .../shared/tabbrowser/tab-hover-preview.css | 8 +- browser/themes/shared/tabbrowser/tabs.css | 223 +++++----- browser/themes/shared/toolbarbuttons.css | 27 +- .../themes/shared/urlbar-dynamic-results.css | 33 +- browser/themes/shared/urlbar-searchbar.css | 42 +- browser/themes/shared/urlbarView.css | 129 +++--- browser/themes/shared/webRTC-indicator.css | 72 +-- browser/themes/windows/browser.css | 16 +- .../windows/downloads/allDownloadsView.css | 3 +- browser/themes/windows/places/organizer.css | 48 +- config/tests/ref-simple/one/some.css | 6 +- config/tests/src-simple/thesrcdir/some.css | 6 +- devtools/client/aboutdebugging/src/base.css | 39 +- .../src/components/RuntimeInfo.css | 5 +- .../src/components/connect/ConnectPage.css | 5 +- .../src/components/connect/ConnectSection.css | 3 +- .../debugtarget/DebugTargetItem.css | 9 +- .../debugtarget/DebugTargetPane.css | 2 +- .../src/components/shared/Message.css | 3 +- .../client/accessibility/accessibility.css | 22 +- devtools/client/application/application.css | 3 +- devtools/client/application/src/base.css | 2 +- .../client/application/src/components/App.css | 4 +- .../components/manifest/ManifestColorItem.css | 9 +- .../src/components/routing/PageSwitcher.css | 1 + .../src/components/routing/Sidebar.css | 29 +- .../src/components/routing/SidebarItem.css | 15 +- .../service-workers/Registration.css | 11 +- .../src/components/service-workers/Worker.css | 10 +- .../src/components/ui/UIButton.css | 3 +- .../src/components/Editor/Breakpoints.css | 22 +- .../components/Editor/ConditionalPanel.css | 2 +- .../debugger/src/components/Editor/Editor.css | 5 +- .../src/components/Editor/Preview/Popup.css | 5 +- .../debugger/src/components/Editor/Tabs.css | 5 +- .../components/PrimaryPanes/ProjectSearch.css | 8 +- .../src/components/PrimaryPanes/Tracer.css | 34 +- .../Breakpoints/Breakpoints.css | 2 +- .../SecondaryPanes/DOMMutationBreakpoints.css | 14 +- .../components/SecondaryPanes/Expressions.css | 1 + .../SecondaryPanes/Frames/Frames.css | 8 +- .../src/components/shared/SourceIcon.css | 2 +- .../debugger/src/components/variables.css | 8 +- devtools/client/dom/content/dom-view.css | 8 +- devtools/client/framework/options-panel.css | 30 +- .../inspector/rules/test/doc_at_scope.css | 11 +- .../rules/test/doc_conditional_import.css | 3 +- .../test/doc_content_stylesheet_linked.css | 2 +- .../test/doc_content_stylesheet_script.css | 2 +- .../inspector/rules/test/doc_copystyles.css | 10 +- .../test/doc_imported_anonymous_layer.css | 7 +- .../rules/test/doc_imported_named_layer.css | 20 +- .../test/doc_imported_nested_named_layer.css | 7 +- .../rules/test/doc_imported_no_layer.css | 3 +- .../rules/test/doc_keyframeanimation.css | 9 +- .../rules/test/doc_style_editor_link.css | 2 +- .../rules/test/doc_urls_clickable.css | 6 +- .../style_inspector_eyedropper_ruleview.css | 2 +- devtools/client/jsonview/css/general.css | 4 +- devtools/client/jsonview/css/json-panel.css | 5 +- .../src/assets/styles/CustomRequestPanel.css | 8 +- .../assets/styles/HTTPCustomRequestPanel.css | 8 +- .../src/assets/styles/HeadersPanel.css | 3 +- .../src/assets/styles/NetworkActionBar.css | 12 +- .../src/assets/styles/NetworkDetailsBar.css | 20 +- .../assets/styles/RequestBlockingPanel.css | 4 +- .../src/assets/styles/RequestList.css | 22 +- .../src/assets/styles/StatisticsPanel.css | 36 +- .../src/assets/styles/StatusBar.css | 5 +- .../src/assets/styles/StatusCode.css | 1 + .../src/assets/styles/UrlPreview.css | 1 + .../netmonitor/src/assets/styles/messages.css | 2 +- .../src/assets/styles/variables.css | 12 +- devtools/client/responsive/index.css | 61 ++- .../client/responsive/responsive-browser.css | 4 +- .../test/browser/doc_toolbox_rule_view.css | 2 +- .../shared/components/AppErrorBoundary.css | 1 + devtools/client/shared/components/List.css | 6 +- .../shared/components/NotificationBox.css | 2 +- .../shared/components/SearchModifiers.css | 2 +- .../shared/components/SidebarToggle.css | 2 +- .../client/shared/components/SmartTrace.css | 26 +- .../client/shared/components/reps/reps.css | 28 +- .../client/shared/components/tabs/Tabs.css | 4 +- .../shared/components/tree/TreeView.css | 22 +- devtools/client/shared/toolbarbutton.css | 4 +- .../client/shared/widgets/cubic-bezier.css | 7 +- .../client/shared/widgets/filter-widget.css | 8 +- .../client/shared/widgets/linear-widget.css | 10 +- devtools/client/shared/widgets/spectrum.css | 62 ++- .../themes/accessibility-color-contrast.css | 15 +- devtools/client/themes/animation.css | 16 +- devtools/client/themes/badge.css | 18 +- devtools/client/themes/boxmodel.css | 10 +- devtools/client/themes/breadcrumbs.css | 8 +- devtools/client/themes/changes.css | 10 +- devtools/client/themes/chart.css | 2 +- devtools/client/themes/common.css | 42 +- devtools/client/themes/compatibility.css | 7 +- devtools/client/themes/computed.css | 7 +- devtools/client/themes/dark-theme.css | 57 ++- devtools/client/themes/fonts.css | 31 +- devtools/client/themes/inspector-shared.css | 5 +- devtools/client/themes/inspector-swatches.css | 26 +- devtools/client/themes/inspector.css | 3 +- devtools/client/themes/layout.css | 29 +- devtools/client/themes/light-theme.css | 62 ++- devtools/client/themes/markup.css | 35 +- devtools/client/themes/memory.css | 21 +- devtools/client/themes/perf.css | 2 +- devtools/client/themes/rules.css | 82 ++-- devtools/client/themes/splitters.css | 22 +- devtools/client/themes/styleeditor.css | 9 +- devtools/client/themes/toolbars.css | 2 +- devtools/client/themes/toolbox.css | 12 +- devtools/client/themes/tooltips.css | 55 +-- devtools/client/themes/variables.css | 61 ++- devtools/client/themes/webconsole.css | 31 +- devtools/client/themes/widgets.css | 38 +- devtools/client/webconsole/components/App.css | 40 +- .../components/Input/EagerEvaluation.css | 7 +- .../Input/EvaluationNotification.css | 2 +- .../components/Input/ReverseSearchInput.css | 3 +- .../actors/highlighters/css/highlighters.css | 63 ++- .../resource/tests/style_document.css | 4 +- .../commands/resource/tests/style_iframe.css | 4 +- docs/_static/custom_theme.css | 57 ++- docs/_static/sphinx_design.css | 16 +- dom/base/test/file_bug498897.css | 4 +- dom/crypto/test/test_WebCrypto.css | 93 ++-- .../pointerevents/wpt/pointerevent_styles.css | 110 ++--- dom/security/test/sri/file_bug_1271796.css | 4 +- dom/tests/mochitest/general/cssB.css | 4 +- dom/tests/mochitest/general/emptyCssFile2.css | 2 +- .../general/importsSameAndCrossOrigin.css | 5 +- dom/tests/mochitest/general/test_offsets.css | 10 +- .../mochitest/webcomponents/inert_style.css | 1 + dom/xml/resources/XMLPrettyPrint.css | 4 +- dom/xml/test/old/books/classic.css | 27 +- dom/xml/test/old/books/common.css | 4 +- dom/xml/test/old/books/list.css | 14 +- dom/xml/test/old/xlink/link.css | 1 + dom/xml/test/old/xmlbase/xmlbase.css | 6 +- .../test/mochitest/helper_subframe_style.css | 2 +- gfx/layers/layerviewer/tree.css | 26 +- .../test/frame_selection_underline.css | 3 +- layout/mathml/mathml.css | 36 +- layout/style/ImageDocument.css | 3 +- layout/style/TopLevelImageDocument.css | 2 +- layout/style/res/counterstyles.css | 282 +++--------- layout/style/res/forms.css | 123 +++--- layout/style/res/html.css | 231 ++++------ layout/style/res/noframes.css | 4 +- layout/style/res/plaintext.css | 3 +- layout/style/res/quirk.css | 14 +- layout/style/res/scrollbars.css | 12 +- layout/style/res/ua.css | 23 +- layout/style/res/viewsource.css | 4 +- layout/style/test/chrome/bug535806-css.css | 4 +- layout/style/test/file_bug1443344.css | 4 +- layout/style/test/file_bug829816.css | Bin 86 -> 76 bytes layout/style/test/post-redirect-1.css | 5 +- layout/style/test/post-redirect-2.css | 5 +- layout/style/test/post-redirect-3.css | 5 +- .../test/support/external-variable-url.css | 2 +- layout/style/test/unstyled.css | 4 +- layout/svg/svg.css | 59 +-- .../src/main/assets/error_style.css | 12 +- .../docs/geckoview/assets/css/geckoview.css | 4 +- .../src/main/assets/shared_error_style.css | 4 +- .../app/src/main/assets/error_style.css | 12 +- .../app/src/main/assets/style.css | 45 +- mobile/android/themes/geckoview/config.css | 414 +++++++++--------- .../mozbuild/backend/mach_commands.py | 1 - .../mochitest/mixedcontent/somestyle.css | 3 +- taskcluster/kinds/source-test/mozlint.yml | 1 - testing/mochitest/static/harness.css | 59 ++- testing/mochitest/tests/SimpleTest/test.css | 4 +- .../mozlog/mozlog/formatters/html/style.css | 146 +++--- testing/talos/talos/tests/scroll/reader.css | 61 ++- .../content/aboutCheckerboard.css | 6 +- .../aboutinference/content/aboutInference.css | 7 +- .../aboutmemory/content/aboutMemory.css | 25 +- .../aboutprocesses/content/aboutProcesses.css | 24 +- .../content/aboutThirdParty.css | 5 +- .../aboutwebauthn/content/aboutWebauthn.css | 2 +- .../content/aboutWindowsMessages.css | 6 +- .../xpcshell/data/file_stylesheet_cache.css | 4 +- .../content/about-studies/about-studies.css | 34 +- toolkit/components/printing/content/print.css | 12 +- .../printing/content/printPreview.css | 8 +- .../prompts/content/commonDialog.css | 3 +- toolkit/components/reader/moz-slider.css | 5 +- .../content/letterboxing.css | 3 +- .../components/login-form/login-form.css | 9 +- .../components/login-line/login-line.css | 4 +- .../satchel/megalist/content/megalist.css | 2 +- .../translations/content/translations.css | 4 +- .../url-classifier/tests/mochitest/bad.css | 4 +- .../url-classifier/tests/mochitest/evil.css | 4 +- .../url-classifier/tests/mochitest/import.css | 4 +- .../tests/mochitest/import2.css | 4 +- toolkit/content/aboutLogging/aboutLogging.css | 6 +- toolkit/content/aboutMozilla.css | 2 +- toolkit/content/aboutTelemetry.css | 11 +- toolkit/content/aboutUrlClassifier.css | 7 +- toolkit/content/aboutwebrtc/aboutWebrtc.css | 2 +- toolkit/content/tests/widgets/videomask.css | 6 +- toolkit/content/widgets/datetimebox.css | 2 +- toolkit/content/widgets/infobar.css | 8 +- toolkit/content/widgets/moz-box-common.css | 7 +- .../content/widgets/moz-button/moz-button.css | 14 +- toolkit/content/widgets/moz-card/moz-card.css | 10 +- .../widgets/moz-five-star/moz-five-star.css | 1 + .../moz-input-color/moz-input-color.css | 8 +- .../moz-input-folder/moz-input-folder.css | 14 +- .../moz-message-bar/moz-message-bar.css | 10 +- .../widgets/moz-page-nav/moz-page-nav.css | 2 +- .../content/widgets/moz-select/moz-select.css | 6 +- .../content/widgets/moz-toggle/moz-toggle.css | 2 +- .../content/widgets/panel-list/panel-list.css | 2 +- toolkit/content/xul.css | 76 +--- toolkit/crashreporter/content/crashes.css | 3 +- toolkit/locales/en-US/chrome/global/intl.css | 6 +- .../extensions/content/aboutaddons.css | 10 +- .../mlmodel-card-header-additions.css | 2 +- toolkit/mozapps/handling/content/handler.css | 5 +- toolkit/themes/linux/global/global.css | 4 - toolkit/themes/linux/global/richlistbox.css | 2 +- toolkit/themes/linux/global/tabbox.css | 1 + .../themes/linux/mozapps/update/updates.css | 2 +- toolkit/themes/mobile/global/aboutMemory.css | 23 +- .../themes/mobile/global/aboutNetworking.css | 4 +- toolkit/themes/mobile/global/aboutSupport.css | 3 +- toolkit/themes/osx/global/autocomplete.css | 2 +- toolkit/themes/osx/global/global.css | 4 +- toolkit/themes/osx/global/tabbox.css | 4 +- .../themes/osx/mozapps/handling/handling.css | 2 +- toolkit/themes/osx/mozapps/update/updates.css | 5 +- toolkit/themes/shared/aboutCache.css | 8 +- toolkit/themes/shared/aboutNetError.css | 4 +- toolkit/themes/shared/aboutNetworking.css | 6 +- toolkit/themes/shared/aboutReader.css | 26 +- toolkit/themes/shared/aboutSupport.css | 2 +- toolkit/themes/shared/alert.css | 18 +- toolkit/themes/shared/appPicker.css | 1 + .../themes/shared/datetimeinputpickers.css | 6 +- .../themes/shared/design-system/package.json | 2 +- .../shared/design-system/tokens-platform.css | 2 +- .../shared/design-system/tokens-shared.css | 8 +- .../shared/design-system/tokens-storybook.mjs | 4 +- .../shared/design-system/tokens-table.css | 25 +- .../themes/shared/dirListing/dirListing.css | 4 +- toolkit/themes/shared/findbar.css | 12 +- toolkit/themes/shared/global-shared.css | 24 +- .../shared/in-content/common-shared.css | 42 +- .../themes/shared/in-content/info-pages.css | 11 +- toolkit/themes/shared/media/pipToggle.css | 20 +- .../themes/shared/media/textrecognition.css | 2 +- toolkit/themes/shared/media/videocontrols.css | 28 +- toolkit/themes/shared/menu.css | 10 +- toolkit/themes/shared/narrate.css | 6 +- toolkit/themes/shared/notification.css | 4 +- .../themes/shared/pictureinpicture/player.css | 45 +- .../shared/pictureinpicture/texttracks.css | 94 ++-- toolkit/themes/shared/popup.css | 8 +- toolkit/themes/shared/popupnotification.css | 6 +- toolkit/themes/shared/toolbarbutton.css | 7 +- toolkit/themes/shared/tree/tree.css | 18 +- toolkit/themes/windows/global/global.css | 5 +- toolkit/themes/windows/global/richlistbox.css | 14 +- .../windows/mozapps/handling/handling.css | 2 +- .../themes/windows/mozapps/update/updates.css | 5 +- tools/lint/eslint/__init__.py | 112 ++++- tools/lint/eslint/prettier_utils.py | 117 ----- tools/lint/file-perm.yml | 1 - tools/lint/mach_commands.py | 2 +- tools/lint/stylelint/__init__.py | 87 ++-- 394 files changed, 3351 insertions(+), 3895 deletions(-) delete mode 100644 .prettierignore-css delete mode 100644 .prettierignore-non-css delete mode 100644 tools/lint/eslint/prettier_utils.py diff --git a/.prettierignore b/.prettierignore index fdd4d79fc513..96dbc4e03eb0 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,7 +8,6 @@ !*.xhtml !*.html !*.ts -!*.css # Prettier currently fails to parse this. toolkit/components/extensions/types/ext-tabs-base.d.ts @@ -1253,95 +1252,6 @@ browser/extensions/translations/extension/ toolkit/components/uniffi-bindgen-gecko-js/src/templates/js/ toolkit/components/uniffi-bindgen-gecko-js/components/generated/* -# This is intended to simulate a css file generated from a scss file in order to -# test sourcemaps. -devtools/client/inspector/rules/test/doc_sourcemaps2.css - -############################################################################## -# The list below is copied from .stylelintignore. Prettier doesn't currently -# support multiple ignore files or dynamic ignore configurations. -# When this is implemented, we'll update the configuration below (bug 1825508) -############################################################################## - -# These files are generated in some way. -browser/components/pocket/content/panels/css/main.compiled.css -browser/components/aboutwelcome/**/*.css -browser/components/asrouter/**/*.css -browser/extensions/newtab/**/*.css - -# Note that the debugger has its own stylelint setup, but that currently -# produces errors. Bug 1831302 tracks making this better -devtools/client/debugger/src/components/PrimaryPanes/Outline.css -devtools/client/debugger/src/components/PrimaryPanes/Sources.css -devtools/client/debugger/src/components/shared/AccessibleImage.css -devtools/client/debugger/src/utils/editor/source-editor.css -devtools/client/debugger/test/mochitest/examples/ - -# These get their sourcemap annotations autofixed, though they produce -# no errors at all. -devtools/client/inspector/rules/test/doc_sourcemaps.css - -# This is intended to simulate a css file generated from a scss file in order to -# test sourcemaps. -devtools/client/inspector/rules/test/doc_sourcemaps2.css - -# Some of these produce parse errors, some have sourcemaps modified. -# They're tests, so let's just ignore all of them: -devtools/client/inspector/computed/test/doc_sourcemaps.css -devtools/client/inspector/rules/test/doc_invalid_sourcemap.css -devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css -devtools/client/webconsole/test/browser/*.css - -# Style editor tests check how it copes with invalid or "special" CSS, -# so don't try to "fix" those. -devtools/client/styleeditor/test/ - -# These are empty or have funky charsets -dom/base/test/bug466409-empty.css -dom/encoding/test/file_utf16_be_bom.css -dom/encoding/test/file_utf16_le_bom.css -dom/security/test/cors/file_cors_logging_test.html.css -dom/tests/mochitest/general/cssA.css -dom/tests/mochitest/general/cssC.css - -# These are test-only and cause us to complain about font families or -# similar, but we don't want to touch these tests at this point. -dom/security/test/csp/file_CSP.css -dom/security/test/sri/style2.css -dom/xml/test/old/docbook.css -dom/xml/test/old/toc/book.css -dom/xml/test/old/toc/toc.css - -# Tests we don't want to modify at this point: -layout/base/tests/stylesheet_change_events.css -layout/inspector/tests/bug856317.css -layout/inspector/tests/chrome/test_bug467669.css -layout/inspector/tests/chrome/test_bug708874.css -layout/style/test/gtest/example.css -layout/style/test/mapped2.css -layout/style/test/unstyled-frame.css - -# Bug 1893763 -mobile/android/android-components/components/feature/readerview/src/main/assets/extensions/readerview/readerview.css -# Three dashes at top of file (for Jekyll?) cause syntax error: -mobile/android/android-components/docs/assets/main.scss - -# Empty test files: -netwerk/test/mochitests/test1.css -netwerk/test/mochitests/test2.css - -# Has substitution gunk in it: -python/mozbuild/mozbuild/test/backend/data/build/foo.css - -# This is third-party in a way: -toolkit/components/pdfjs/content/web/debugger.css -toolkit/components/pdfjs/content/web/viewer.css -toolkit/components/pdfjs/content/web/viewer-geckoview.css -build/pgo/blueprint/**/*.css - -# Ignore web-platform tests as they are not necessarily under our control. -testing/web-platform/tests/ - ############################################################################## # The list below is copied from ThirdPartyPaths.txt. Prettier doesn't currently # support multiple ignore files or dynamic ignore configurations. @@ -1560,6 +1470,7 @@ xpcom/build/mach_override.h xpcom/io/crc32c.c rlbox/rlbox_sandbox.hpp + ############################################################################## # The list below is copied from Generated.txt. Prettier doesn't currently # support multiple ignore files or dynamic ignore configurations. diff --git a/.prettierignore-css b/.prettierignore-css deleted file mode 100644 index a8489a1f0050..000000000000 --- a/.prettierignore-css +++ /dev/null @@ -1,2 +0,0 @@ -# When running Prettier via ESlint ignore these filetypes. -*.css diff --git a/.prettierignore-non-css b/.prettierignore-non-css deleted file mode 100644 index 944d4510b719..000000000000 --- a/.prettierignore-non-css +++ /dev/null @@ -1,9 +0,0 @@ -# When running Prettier via Stylelint ignore these filetypes. -*.js -*.json -*.jsx -*.mjs -*.sjs -*.xhtml -*.html -*.ts diff --git a/.prettierrc.js b/.prettierrc.js index a055d6b18c50..44b8e90381a1 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -10,14 +10,4 @@ module.exports = { printWidth: 80, tabWidth: 2, trailingComma: "es5", - overrides: [ - { - files: "*.css", - options: { - parser: "css", - // Using a larger printWidth to avoid wrapping selectors. - printWidth: 160, - }, - }, - ], }; diff --git a/.stylelintignore b/.stylelintignore index beded28df77b..343e536673d3 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -41,10 +41,6 @@ devtools/client/debugger/test/mochitest/examples/ # no errors at all. devtools/client/inspector/rules/test/doc_sourcemaps.css -# This is intended to simulate a css file generated from a scss file in order to -# test sourcemaps. -devtools/client/inspector/rules/test/doc_sourcemaps2.css - # Some of these produce parse errors, some have sourcemaps modified. # They're tests, so let's just ignore all of them: devtools/client/inspector/computed/test/doc_sourcemaps.css @@ -97,7 +93,7 @@ python/mozbuild/mozbuild/test/backend/data/build/foo.css toolkit/components/pdfjs/content/web/debugger.css toolkit/components/pdfjs/content/web/viewer.css toolkit/components/pdfjs/content/web/viewer-geckoview.css -build/pgo/blueprint/**/*.css # Ignore web-platform tests as they are not necessarily under our control. testing/web-platform/tests/ + diff --git a/browser/base/content/aboutDialog.css b/browser/base/content/aboutDialog.css index 03701b9770e7..aeeedf82e4a2 100644 --- a/browser/base/content/aboutDialog.css +++ b/browser/base/content/aboutDialog.css @@ -121,7 +121,7 @@ } #submit-feedback { - margin-inline-start: 0.9em; + margin-inline-start: .9em; } .bottom-link { diff --git a/browser/base/content/pageinfo/pageInfo.css b/browser/base/content/pageinfo/pageInfo.css index 3da531583b43..d3c023a4c069 100644 --- a/browser/base/content/pageinfo/pageInfo.css +++ b/browser/base/content/pageinfo/pageInfo.css @@ -44,15 +44,14 @@ table { height: 6px; } -th, -td { +th, td { padding: 0; } th { font: inherit; text-align: start; - padding-inline-end: 0.5em; + padding-inline-end: .5em; } /* diff --git a/browser/base/content/test/pageStyle/style.css b/browser/base/content/test/pageStyle/style.css index 28e605e53508..c8337cea1909 100644 --- a/browser/base/content/test/pageStyle/style.css +++ b/browser/base/content/test/pageStyle/style.css @@ -1,3 +1 @@ -.unused { - /* This sheet is here for testing purposes. */ -} +.unused { /* This sheet is here for testing purposes. */ } diff --git a/browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_img.css b/browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_img.css index b5b83b8aec52..d045e21ba0be 100644 --- a/browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_img.css +++ b/browser/base/content/test/siteIdentity/test_no_mcb_on_http_site_img.css @@ -1,3 +1,3 @@ #testDiv { - background: url(http://example.com/tests/image/test/mochitest/blue.png); + background: url(http://example.com/tests/image/test/mochitest/blue.png) } diff --git a/browser/branding/aurora/stubinstaller/installing_page.css b/browser/branding/aurora/stubinstaller/installing_page.css index d4271cabd91e..d78e9da1ecac 100644 --- a/browser/branding/aurora/stubinstaller/installing_page.css +++ b/browser/branding/aurora/stubinstaller/installing_page.css @@ -35,7 +35,7 @@ body.high-contrast #progress_background { width: 0%; max-width: 100%; height: 100%; - background-color: #00aaff; + background-color: #00AAFF; } /* In high contrast mode, fill the entire progress bar with its border. */ @@ -46,8 +46,7 @@ body.high-contrast #progress_bar { } /* This layout doesn't want the header or content text. */ -#header, -#content { +#header, #content { display: none; } diff --git a/browser/branding/nightly/content/aboutDialog.css b/browser/branding/nightly/content/aboutDialog.css index 994cfbc07bee..af4fd775422d 100644 --- a/browser/branding/nightly/content/aboutDialog.css +++ b/browser/branding/nightly/content/aboutDialog.css @@ -14,6 +14,6 @@ } #bottomBox { - background-color: hsla(235, 43%, 10%, 0.5); + background-color: hsla(235, 43%, 10%, .5); padding: 15px 10px 15px; } diff --git a/browser/branding/nightly/stubinstaller/installing_page.css b/browser/branding/nightly/stubinstaller/installing_page.css index fd28cac7ad3f..8044838c79f5 100644 --- a/browser/branding/nightly/stubinstaller/installing_page.css +++ b/browser/branding/nightly/stubinstaller/installing_page.css @@ -34,7 +34,7 @@ body.high-contrast #progress_background { margin: 0; width: 0%; height: 100%; - background-color: #00aaff; + background-color: #00AAFF; } /* In high contrast mode, fill the entire progress bar with its border. */ @@ -45,8 +45,7 @@ body.high-contrast #progress_bar { } /* This layout doesn't want the header or content text. */ -#header, -#content { +#header, #content { display: none; } diff --git a/browser/branding/official/content/aboutDialog.css b/browser/branding/official/content/aboutDialog.css index 70071dc01677..0a88f2f78450 100644 --- a/browser/branding/official/content/aboutDialog.css +++ b/browser/branding/official/content/aboutDialog.css @@ -13,7 +13,7 @@ } #bottomBox { - background-color: hsla(235, 43%, 10%, 0.5); + background-color: hsla(235, 43%, 10%, .5); padding: 15px 10px 15px; } diff --git a/browser/branding/official/stubinstaller/installing_page.css b/browser/branding/official/stubinstaller/installing_page.css index f6c333a71b9b..5704eb3b3e96 100644 --- a/browser/branding/official/stubinstaller/installing_page.css +++ b/browser/branding/official/stubinstaller/installing_page.css @@ -70,7 +70,7 @@ body.high-contrast #progress_background { margin: 0; width: 0%; height: 100%; - background-color: #00aaff; + background-color: #00AAFF; } /* In high contrast mode, fill the entire progress bar with its border. */ diff --git a/browser/branding/unofficial/content/aboutDialog.css b/browser/branding/unofficial/content/aboutDialog.css index 6c66cf20eca4..efd812629d2a 100644 --- a/browser/branding/unofficial/content/aboutDialog.css +++ b/browser/branding/unofficial/content/aboutDialog.css @@ -15,6 +15,6 @@ } #bottomBox { - background-color: hsla(235, 43%, 10%, 0.5); + background-color: hsla(235, 43%, 10%, .5); padding: 15px 10px 15px; } diff --git a/browser/branding/unofficial/stubinstaller/installing_page.css b/browser/branding/unofficial/stubinstaller/installing_page.css index 348164d428f9..a15a4a76ec9c 100644 --- a/browser/branding/unofficial/stubinstaller/installing_page.css +++ b/browser/branding/unofficial/stubinstaller/installing_page.css @@ -34,7 +34,7 @@ body.high-contrast #progress_background { margin: 0; width: 0%; height: 100%; - background-color: #00aaff; + background-color: #00AAFF; } /* In high contrast mode, fill the entire progress bar with its border. */ @@ -45,8 +45,7 @@ body.high-contrast #progress_bar { } /* This layout doesn't want the header or content text. */ -#header, -#content { +#header, #content { display: none; } diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css index 29baa0537e3b..ae1c91e92965 100644 --- a/browser/components/aboutlogins/content/aboutLogins.css +++ b/browser/components/aboutlogins/content/aboutLogins.css @@ -9,7 +9,7 @@ } html { - position: fixed; + position: fixed; } html, body { @@ -82,7 +82,7 @@ login-item[data-editing="true"] + login-intro, .primary-password-auth-required > body > header, .primary-password-auth-required > body > login-list, .primary-password-auth-required > body > section { - filter: blur(2px); + filter: blur(2px) } #primary-password-required-overlay { @@ -90,7 +90,7 @@ login-item[data-editing="true"] + login-intro, position: fixed; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.2); + background-color: rgba(0,0,0,0.2); } body > section { diff --git a/browser/components/aboutlogins/content/aboutLoginsImportReport.css b/browser/components/aboutlogins/content/aboutLoginsImportReport.css index b69fc6a92166..11bc4c163b0d 100644 --- a/browser/components/aboutlogins/content/aboutLoginsImportReport.css +++ b/browser/components/aboutlogins/content/aboutLoginsImportReport.css @@ -33,6 +33,7 @@ margin-block: 32px 8px; } + .summary > a { margin-top: 12px; } diff --git a/browser/components/aboutlogins/content/components/confirmation-dialog.css b/browser/components/aboutlogins/content/components/confirmation-dialog.css index fbd2130392ba..e23753f6c17f 100644 --- a/browser/components/aboutlogins/content/components/confirmation-dialog.css +++ b/browser/components/aboutlogins/content/components/confirmation-dialog.css @@ -2,13 +2,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.overlay { + .overlay { position: fixed; z-index: 1; inset: 0; /* TODO: this color is used in the about:preferences overlay, but why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0,0,0,0.5); display: flex; } diff --git a/browser/components/aboutlogins/content/components/fxaccounts-button.css b/browser/components/aboutlogins/content/components/fxaccounts-button.css index 84047ba72c21..e990395a648f 100644 --- a/browser/components/aboutlogins/content/components/fxaccounts-button.css +++ b/browser/components/aboutlogins/content/components/fxaccounts-button.css @@ -53,7 +53,8 @@ .fxaccount-avatar { display: inline-block; vertical-align: middle; - background-image: var(--avatar-url), url(chrome://browser/skin/fxa/avatar-color.svg); + background-image: var(--avatar-url), + url(chrome://browser/skin/fxa/avatar-color.svg); background-position: center; background-repeat: no-repeat; background-size: cover; diff --git a/browser/components/aboutlogins/content/components/generic-dialog.css b/browser/components/aboutlogins/content/components/generic-dialog.css index 0532f4b9a29b..9f82963fa112 100644 --- a/browser/components/aboutlogins/content/components/generic-dialog.css +++ b/browser/components/aboutlogins/content/components/generic-dialog.css @@ -8,7 +8,7 @@ inset: 0; /* TODO: this color is used in the about:preferences overlay, but why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0,0,0,0.5); display: flex; } diff --git a/browser/components/aboutlogins/content/components/import-error-dialog.css b/browser/components/aboutlogins/content/components/import-error-dialog.css index 60199bd8deb9..6fc2e945e47c 100644 --- a/browser/components/aboutlogins/content/components/import-error-dialog.css +++ b/browser/components/aboutlogins/content/components/import-error-dialog.css @@ -24,5 +24,5 @@ .warning-icon { -moz-context-properties: fill; - fill: #ffbf00; + fill: #FFBF00; } diff --git a/browser/components/aboutlogins/content/components/login-alert.css b/browser/components/aboutlogins/content/components/login-alert.css index 578006dad565..a797f9d75e7b 100644 --- a/browser/components/aboutlogins/content/components/login-alert.css +++ b/browser/components/aboutlogins/content/components/login-alert.css @@ -12,8 +12,8 @@ background-color: var(--background-color-box); border-radius: 4px; border: 1px solid var(--in-content-border-color); - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); - font-size: 0.9em; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1); + font-size: .9em; } :host([variant="info"]) { diff --git a/browser/components/aboutlogins/content/components/login-intro.css b/browser/components/aboutlogins/content/components/login-intro.css index b127d91d11ec..e27f0bddd097 100644 --- a/browser/components/aboutlogins/content/components/login-intro.css +++ b/browser/components/aboutlogins/content/components/login-intro.css @@ -19,5 +19,5 @@ section { } .illustration.logged-in { - opacity: 0.5; + opacity: .5; } diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css index 50838436cf3d..c3a2b301399e 100644 --- a/browser/components/aboutlogins/content/components/login-item.css +++ b/browser/components/aboutlogins/content/components/login-item.css @@ -2,11 +2,11 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:host { + :host { overflow: hidden; - --reveal-checkbox-opacity: 0.8; - --reveal-checkbox-opacity-hover: 0.6; + --reveal-checkbox-opacity: .8; + --reveal-checkbox-opacity-hover: .6; --reveal-checkbox-opacity-active: 1; } @@ -19,9 +19,9 @@ @media (prefers-color-scheme: dark) { :host { - --reveal-checkbox-opacity: 0.8; + --reveal-checkbox-opacity: .8; --reveal-checkbox-opacity-hover: 1; - --reveal-checkbox-opacity-active: 0.6; + --reveal-checkbox-opacity-active: .6; } } @@ -64,6 +64,7 @@ form { display: none; } + :host(:not([data-editing])) input[type="password"]:read-only, input[type="text"]:read-only, input[type="url"]:read-only { @@ -114,17 +115,16 @@ input[name="password"] { flex-grow: 1; } -origin-warning, -password-warning { +origin-warning, password-warning { display: none; } -input[type="url"]:focus:not(:user-invalid):invalid ~ origin-warning, -input[type="url"]:focus:user-invalid:not(:placeholder-shown) ~ origin-warning { +input[type = "url"]:focus:not(:user-invalid):invalid ~ origin-warning, +input[type = "url"]:focus:user-invalid:not(:placeholder-shown) ~ origin-warning { display: block; } -input[name="password"]:focus ~ password-warning { +input[name = "password"]:focus ~ password-warning { display: block; } diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css index 0b5951b0351b..3e78bab87e1e 100644 --- a/browser/components/aboutlogins/content/components/login-list.css +++ b/browser/components/aboutlogins/content/components/login-list.css @@ -106,7 +106,7 @@ ol { display: block; position: sticky; top: 0; - font-size: 0.85em; + font-size: .85em; font-weight: var(--font-weight-bold); padding: 4px 16px; border-bottom: 1px solid var(--in-content-border-color); diff --git a/browser/components/aboutlogins/content/components/login-message-popup.css b/browser/components/aboutlogins/content/components/login-message-popup.css index b891473e112a..697c0b66ce6a 100644 --- a/browser/components/aboutlogins/content/components/login-message-popup.css +++ b/browser/components/aboutlogins/content/components/login-message-popup.css @@ -6,7 +6,7 @@ position: absolute; inset-inline-start: 315px; width: 232px; - box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.18); + box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.18); top: 0; } diff --git a/browser/components/aboutlogins/content/components/remove-logins-dialog.css b/browser/components/aboutlogins/content/components/remove-logins-dialog.css index 6045461e8156..6fd8a6fe3c96 100644 --- a/browser/components/aboutlogins/content/components/remove-logins-dialog.css +++ b/browser/components/aboutlogins/content/components/remove-logins-dialog.css @@ -2,13 +2,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.overlay { + .overlay { position: fixed; z-index: 1; inset: 0; /* TODO: this color is used in the about:preferences overlay, but why isn't it declared as a variable? */ - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0,0,0,0.5); display: flex; } diff --git a/browser/components/backup/content/archive.css b/browser/components/backup/content/archive.css index f538f9f53e4d..6ebac17dc624 100644 --- a/browser/components/backup/content/archive.css +++ b/browser/components/backup/content/archive.css @@ -31,7 +31,7 @@ h1 { } a { - color: #0060df; + color: #0060DF; } ul { @@ -44,7 +44,7 @@ ul > li { } hr { - border-color: #f0f0f4; + border-color: #F0F0F4; border-style: solid; border-width: 1px 0 0 0; margin: 0; diff --git a/browser/components/contextualidentity/content/usercontext.css b/browser/components/contextualidentity/content/usercontext.css index 3d64aed6310c..2ad1228fcc99 100644 --- a/browser/components/contextualidentity/content/usercontext.css +++ b/browser/components/contextualidentity/content/usercontext.css @@ -106,12 +106,12 @@ } #userContext-label { - color: var(--identity-tab-color); - margin: 0; + color: var(--identity-tab-color); + margin: 0; max-width: 8em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } #userContext-icons { diff --git a/browser/components/enterprisepolicies/content/aboutPolicies.css b/browser/components/enterprisepolicies/content/aboutPolicies.css index 3132ada54b87..b67ad5cdb169 100644 --- a/browser/components/enterprisepolicies/content/aboutPolicies.css +++ b/browser/components/enterprisepolicies/content/aboutPolicies.css @@ -5,8 +5,7 @@ @import url("chrome://global/skin/in-content/common.css"); @media not print { - html, - body { + html, body { height: 100%; } } @@ -37,7 +36,7 @@ body { } tbody tr { - transition: background cubic-bezier(0.07, 0.95, 0, 1) 250ms; + transition: background cubic-bezier(.07, .95, 0, 1) 250ms; } tbody tr:hover { @@ -45,9 +44,7 @@ tbody tr:hover { color: var(--in-content-item-hover-text); } -th, -td, -table { +th, td, table { border-collapse: collapse; border: none; text-align: start; @@ -97,8 +94,8 @@ tbody:nth-child(4n + 1) { height: 14px; vertical-align: middle; width: 14px; - margin-top: -0.125rem; - margin-left: 0.5rem; + margin-top: -.125rem; + margin-left: .5rem; } .collapsible { diff --git a/browser/components/extensions/extension.css b/browser/components/extensions/extension.css index bca78ab5fae8..98902f7da16a 100644 --- a/browser/components/extensions/extension.css +++ b/browser/components/extensions/extension.css @@ -15,6 +15,7 @@ * browser_style: false or by switching to MV3. */ @layer { + /* Global */ html, body { @@ -113,7 +114,7 @@ button.browser-style:disabled, select.browser-style:disabled { color: #999; - opacity: 0.5; + opacity: .5; } button.browser-style.focused, @@ -148,7 +149,7 @@ .browser-style.disabled > label { color: #999; - opacity: 0.5; + opacity: .5; } /* Radio Buttons */ @@ -275,8 +276,8 @@ border: 1px solid #b1b1b1; } - button.browser-style:enabled:hover:active:not(.hover, .focused), - select.browser-style:enabled:hover:active:not(.hover, .focused) { + button.browser-style:enabled:hover:active:not(.hover, .focused), + select.browser-style:enabled:hover:active:not(.hover, .focused) { background-color: #d4d4d4; border: 1px solid #858585; } @@ -320,7 +321,7 @@ .browser-style > input[type="text"]:disabled, textarea.browser-style:disabled { color: #999; - opacity: 0.5; + opacity: .5; } .browser-style > input[type="text"].focused, @@ -346,8 +347,7 @@ .browser-style > input[type="text"]:invalid:not(:focus), textarea.browser-style:invalid:not(:focus) { border-color: var(--red-60); - box-shadow: - 0 0 0 1px var(--red-60), + box-shadow: 0 0 0 1px var(--red-60), 0 0 0 4px rgba(251, 0, 34, 0.3); } @@ -421,7 +421,7 @@ .panel-list-item > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; - font-size: 0.847em; + font-size: .847em; justify-content: flex-end; } @@ -481,7 +481,7 @@ .panel-section-footer-button > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; - font-size: 0.847em; + font-size: .847em; } .panel-section-footer-button:hover { @@ -541,9 +541,7 @@ } .panel-section-tabs-button.selected { - box-shadow: - 0 -1px 0 #0670cc inset, - 0 -4px 0 #0996f8 inset; + box-shadow: 0 -1px 0 #0670cc inset, 0 -4px 0 #0996f8 inset; color: #0996f8; } @@ -570,4 +568,5 @@ overflow: hidden; } } + } /* end of @layer */ diff --git a/browser/components/firefoxview/card-container.css b/browser/components/firefoxview/card-container.css index 5d1cb51f92aa..0c6a81899bc7 100644 --- a/browser/components/firefoxview/card-container.css +++ b/browser/components/firefoxview/card-container.css @@ -113,8 +113,8 @@ display: none; } -::slotted([slot="header"]), -::slotted([slot="secondary-header"]) { +::slotted([slot=header]), +::slotted([slot=secondary-header]) { align-self: center; margin: 0; font-size: 1.13em; @@ -125,12 +125,12 @@ white-space: nowrap; } -::slotted([slot="header"]) { +::slotted([slot=header]) { flex: 1; width: 0; } -::slotted([slot="secondary-header"]) { +::slotted([slot=secondary-header]) { padding-inline-end: 1em; } @@ -141,7 +141,7 @@ cursor: pointer; } -::slotted([slot="footer"]:not([hidden])) { +::slotted([slot=footer]:not([hidden])) { text-decoration: underline; display: inline-block; outline-offset: 2px; diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css index 995ebaa60d7b..aa2aa9269742 100644 --- a/browser/components/firefoxview/firefoxview.css +++ b/browser/components/firefoxview/firefoxview.css @@ -2,13 +2,13 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://global/skin/in-content/common.css"); + @import url("chrome://global/skin/in-content/common.css"); :root { /* override --in-content-page-background from common-shared.css */ background-color: transparent; --fxview-background-color: var(--newtab-background-color, var(--in-content-page-background)); - --fxview-background-color-secondary: var(--newtab-background-color-secondary, #ffffff); + --fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF); --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor); --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor); --fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color)); @@ -17,7 +17,7 @@ --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0); --fxview-border: var(--border-color-transparent); --fxview-border-interactive: var(--border-color-interactive); - --fxview-indicator-stroke-color-hover: #deddde; + --fxview-indicator-stroke-color-hover: #DEDDDE; /* ensure utility button hover states match those of the rest of the page */ --in-content-button-background-hover: var(--fxview-element-background-hover); @@ -29,7 +29,7 @@ --fxview-card-padding-inline: 4px; /* copy over newtab background color from activity-stream-[os].css files */ - --newtab-background-color: #f9f9fb; + --newtab-background-color: #F9F9FB; --fxview-card-header-font-weight: 500; } @@ -38,10 +38,10 @@ :root { --fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white); --fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white); - --fxview-indicator-stroke-color-hover: #5d5c66; + --fxview-indicator-stroke-color-hover:#5D5C66; /* copy over newtab colors from activity-stream-[os].css files */ - --newtab-background-color: #2b2a33; + --newtab-background-color: #2B2A33; --newtab-background-color-secondary: #42414d; --newtab-primary-action-background: #00ddff; } @@ -111,7 +111,13 @@ body { padding-inline: calc(var(--fxview-card-padding-inline) * 2); margin: 0 calc(var(--fxview-card-padding-inline) * -1); - background: linear-gradient(to bottom, var(--fxview-background-color) 0%, var(--fxview-background-color) 95%, transparent 100%); + background: + linear-gradient( + to bottom, + var(--fxview-background-color) 0%, + var(--fxview-background-color) 95%, + transparent 100% + ); /* When you use HCM or set custom colors, you can't use a gradient. */ @media (forced-colors) { background: var(--fxview-background-color); diff --git a/browser/components/firefoxview/fxview-tab-row.css b/browser/components/firefoxview/fxview-tab-row.css index d78ed4c1803f..77244e31cc99 100644 --- a/browser/components/firefoxview/fxview-tab-row.css +++ b/browser/components/firefoxview/fxview-tab-row.css @@ -108,7 +108,7 @@ } .fxview-tab-row-button::part(button) { - color: var(--fxview-text-primary-color); + color: var(--fxview-text-primary-color) } .fxview-tab-row-button[muted="true"]::part(button) { diff --git a/browser/components/firefoxview/history.css b/browser/components/firefoxview/history.css index 24850cfa738a..26be8be6c24c 100644 --- a/browser/components/firefoxview/history.css +++ b/browser/components/firefoxview/history.css @@ -59,7 +59,7 @@ moz-button.close::part(button) { dialog { border: 1px solid transparent; border-radius: 8px; - box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); + box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3); padding: 24px; } diff --git a/browser/components/firefoxview/opentabs-tab-row.css b/browser/components/firefoxview/opentabs-tab-row.css index 99585faeec90..e5c00884b390 100644 --- a/browser/components/firefoxview/opentabs-tab-row.css +++ b/browser/components/firefoxview/opentabs-tab-row.css @@ -59,11 +59,11 @@ position: absolute; &[muted="true"] { - background-image: url("chrome://global/skin/media/audio-muted.svg"); + background-image: url("chrome://global/skin/media/audio-muted.svg"); } &[soundplaying="true"] { - background-image: url("chrome://global/skin/media/audio.svg"); + background-image: url("chrome://global/skin/media/audio.svg"); } &:active, diff --git a/browser/components/firefoxview/view-opentabs.css b/browser/components/firefoxview/view-opentabs.css index 08c070e873bd..c1d1a320f84e 100644 --- a/browser/components/firefoxview/view-opentabs.css +++ b/browser/components/firefoxview/view-opentabs.css @@ -24,8 +24,7 @@ } } -.open-tabs-options, -.open-tabs-sort-wrapper { +.open-tabs-options, .open-tabs-sort-wrapper { display: flex; gap: 24px; } diff --git a/browser/components/firefoxview/view-syncedtabs.css b/browser/components/firefoxview/view-syncedtabs.css index 63554ff3bfd5..990a40408c80 100644 --- a/browser/components/firefoxview/view-syncedtabs.css +++ b/browser/components/firefoxview/view-syncedtabs.css @@ -16,15 +16,15 @@ .phone, .mobile { - background-image: url("chrome://browser/skin/device-phone.svg"); + background-image: url('chrome://browser/skin/device-phone.svg'); } .desktop { - background-image: url("chrome://browser/skin/device-desktop.svg"); + background-image: url('chrome://browser/skin/device-desktop.svg'); } .tablet { - background-image: url("chrome://browser/skin/device-tablet.svg"); + background-image: url('chrome://browser/skin/device-tablet.svg'); } h2 { diff --git a/browser/components/genai/chat.css b/browser/components/genai/chat.css index 2a79b606d00e..d98a95a99f75 100644 --- a/browser/components/genai/chat.css +++ b/browser/components/genai/chat.css @@ -76,7 +76,7 @@ browser { } #multi-stage-message-root { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, .5); display: flex; flex-direction: column; inset: 0; @@ -235,16 +235,16 @@ browser { margin-block: var(--space-small); padding-inline-start: 24px; - &[data-l10n-id*="generate"] { + &[data-l10n-id*=generate] { background-image: url(chrome://global/skin/icons/edit-outline.svg); } - &[data-l10n-id*="analyze"] { + &[data-l10n-id*=analyze] { background-image: url(chrome://global/skin/icons/eye.svg); } - &[data-l10n-id*="switch"] { + &[data-l10n-id*=switch] { background-image: url(chrome://global/skin/icons/arrows-updown.svg); } - &[data-l10n-id*="price"] { + &[data-l10n-id*=price] { background-image: url(chrome://browser/skin/price.svg); } } @@ -252,7 +252,7 @@ browser { .link-paragraph { color: var(--text-color-deemphasized); - font-size: 0.8em; + font-size: .8em; } .inline-image { diff --git a/browser/components/genai/content/link-preview-card.css b/browser/components/genai/content/link-preview-card.css index e4ef37241eb2..8baab78a20c3 100644 --- a/browser/components/genai/content/link-preview-card.css +++ b/browser/components/genai/content/link-preview-card.css @@ -5,42 +5,42 @@ */ .og-card { - --og-main-font-size: 1.4rem; - background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); - font-size: 1.2em; + --og-main-font-size: 1.4rem; + background-color: light-dark(rgba(0,0,0,0.05), rgba(255,255,255,0.05)); + font-size: 1.2em; } .og-card-img { - border-radius: var(--border-radius-small); - height: 100px; - object-fit: cover; - width: 100%; + border-radius: var(--border-radius-small); + height: 100px; + object-fit: cover; + width: 100%; } .og-card-content { - background-color: var(--panel-background); - border-bottom: 1px solid var(--panel-border-color); - border-radius: var(--panel-border-radius); - color: var(--text-color-deemphasized); - display: flex; - flex-direction: column; - gap: var(--space-large); - padding: var(--og-padding); + background-color: var(--panel-background); + border-bottom: 1px solid var(--panel-border-color); + border-radius: var(--panel-border-radius); + color: var(--text-color-deemphasized); + display: flex; + flex-direction: column; + gap: var(--space-large); + padding: var(--og-padding); } .og-card-title { - font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); - margin: 0; - overflow: hidden; - -webkit-line-clamp: 3; + font-size: var(--og-main-font-size); + font-weight: var(--font-weight-bold); + margin: 0; + overflow: hidden; + -webkit-line-clamp: 3; } .og-card-description { - font-size: var(--og-main-font-size); - margin: 0; - overflow: hidden; - -webkit-line-clamp: 3; + font-size: var(--og-main-font-size); + margin: 0; + overflow: hidden; + -webkit-line-clamp: 3; } .og-error-message { @@ -49,53 +49,53 @@ } .ai-content { - position: relative; - padding: var(--og-padding); - .og-error-message-container { - margin: 0; - font-size: var(--og-main-font-size); + position: relative; + padding: var(--og-padding); + .og-error-message-container { + margin:0; + font-size: var(--og-main-font-size); - .og-error-message { - color: var(--text-color-deemphasized); + .og-error-message { + color: var(--text-color-deemphasized); + } + + a { + color: var(--text-color-deemphasized); + } } - a { - color: var(--text-color-deemphasized); + h3 { + align-items: center; + display: flex; + font-size: var(--og-main-font-size); + font-weight: var(--font-weight-bold); + gap: var(--space-xs); + margin: 0; } - } - h3 { - align-items: center; - display: flex; - font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); - gap: var(--space-xs); - margin: 0; - } - - img.icon { - -moz-context-properties: fill; - fill: currentColor; - height: var(--icon-size-default); - margin-inline-start: var(--space-xlarge); - pointer-events: none; - width: var(--icon-size-default); - } - - > ul { - font-size: var(--og-main-font-size); - line-height: 1.15; /* Design requires 18px line-height */ - list-style-type: square; - padding-inline-start: var(--space-large); - } - - li { - margin-block: var(--space-medium); - padding-inline-start: 5px; - &::marker { - color: var(--border-color-deemphasized); + img.icon { + -moz-context-properties: fill; + fill: currentColor; + height: var(--icon-size-default); + margin-inline-start: var(--space-xlarge); + pointer-events: none; + width: var(--icon-size-default); + } + + > ul { + font-size: var(--og-main-font-size); + line-height: 1.15; /* Design requires 18px line-height */ + list-style-type: square; + padding-inline-start: var(--space-large); + } + + li { + margin-block: var(--space-medium); + padding-inline-start: 5px; + &::marker { + color: var(--border-color-deemphasized); + } } - } .visit-link-container { align-items: center; @@ -103,24 +103,24 @@ justify-content: flex-end; margin-top: var(--space-xlarge); - .visit-link { - align-items: center; - display: flex; - gap: var(--space-xs); - font-size: var(--og-main-font-size); - font-weight: var(--font-weight-bold); - } + .visit-link { + align-items: center; + display: flex; + gap: var(--space-xs); + font-size: var(--og-main-font-size); + font-weight: var(--font-weight-bold); + } } > hr { - border-color: var(--border-color-card); - margin-top: var(--space-xlarge); - margin-bottom: var(--space-xlarge); + border-color: var(--border-color-card); + margin-top: var(--space-xlarge); + margin-bottom: var(--space-xlarge); } - > p { - margin-block: var(--space-medium) 0; - } + > p { + margin-block: var(--space-medium) 0; + } } /** @@ -158,7 +158,7 @@ height: var(--og-main-font-size); margin-bottom: 4px; width: 100%; - /* Add non-impactful references to the CSS variables to satisfy the test browser_parsable_css */ + /* Add non-impactful references to the CSS variables to satisfy the test browser_parsable_css */ outline-color: var(--skeleton-loader-background-color); border-color: var(--skeleton-loader-motion-element-color); } diff --git a/browser/components/genai/content/model-optin.css b/browser/components/genai/content/model-optin.css index ee846b76f466..7157684006ff 100644 --- a/browser/components/genai/content/model-optin.css +++ b/browser/components/genai/content/model-optin.css @@ -60,17 +60,26 @@ } &:indeterminate { - --optin-animation-base-color-1: light-dark(var(--color-blue-50), var(--color-blue-30)); - --optin-animation-base-color-2: color-mix(in srgb, var(--optin-animation-base-color-1) 25%, transparent); + --optin-animation-base-color-1: light-dark( + var(--color-blue-50), + var(--color-blue-30) + ); + --optin-animation-base-color-2: color-mix( + in srgb, + var(--optin-animation-base-color-1) 25%, + transparent + ); animation: optin-loading-bar-animation 3s infinite; outline-color: var(--optin-animation-base-color-1); border-color: var(--optin-animation-base-color-2); background: linear-gradient( 100deg, - color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 30%, + color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) + 30%, var(--optin-animation-base-color-2) 50%, - color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) 70% + color-mix(in srgb, var(--optin-animation-base-color-1), transparent 25%) + 70% ); background-size: 200% 100%; diff --git a/browser/components/messagepreview/messagepreview.css b/browser/components/messagepreview/messagepreview.css index 18ade19f50d4..bb809370711c 100644 --- a/browser/components/messagepreview/messagepreview.css +++ b/browser/components/messagepreview/messagepreview.css @@ -13,7 +13,8 @@ body { } body { - background: url(chrome://browser/content/messagepreview/limelight.svg) center/contain no-repeat; + background: url(chrome://browser/content/messagepreview/limelight.svg) + center/contain no-repeat; -moz-context-properties: fill, fill-opacity; fill: var(--icon-color); fill-opacity: 0.2; diff --git a/browser/components/places/metadataViewer/interactionsViewer.css b/browser/components/places/metadataViewer/interactionsViewer.css index 4231c11378e8..e54a934ec282 100644 --- a/browser/components/places/metadataViewer/interactionsViewer.css +++ b/browser/components/places/metadataViewer/interactionsViewer.css @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ body { - padding: 0.5em 2em; + padding: .5em 2em; display: flex; flex-wrap: wrap; } @@ -19,7 +19,7 @@ body { .message-bar-icon { vertical-align: middle; -moz-context-properties: fill; - fill: #ffbf00; + fill: #FFBF00; } #categories { @@ -60,8 +60,8 @@ body { } #tableViewer > div { - padding: 0.3em 1em; + padding: .3em 1em; overflow-x: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; white-space: nowrap; } diff --git a/browser/components/profiles/content/avatar.css b/browser/components/profiles/content/avatar.css index 90752e5b0e5f..cbcf49c5ddfa 100644 --- a/browser/components/profiles/content/avatar.css +++ b/browser/components/profiles/content/avatar.css @@ -33,6 +33,8 @@ background-color: var(--button-background-color-hover); } + + @media (forced-colors) { &:hover { border-color: SelectedItem; diff --git a/browser/components/profiles/content/profile-card.css b/browser/components/profiles/content/profile-card.css index e622022ce100..0356bccb5b19 100644 --- a/browser/components/profiles/content/profile-card.css +++ b/browser/components/profiles/content/profile-card.css @@ -7,7 +7,9 @@ :host { --avatar-size: 80px; --profile-card-radius: 12px; - --profile-card-radius-inner: calc(var(--profile-card-radius) - var(--border-width)); + --profile-card-radius-inner: calc( + var(--profile-card-radius) - var(--border-width) + ); } .profile-card { @@ -74,7 +76,8 @@ background-position: center; -moz-context-properties: fill, stroke; fill: var(--icon-color); - border-radius: var(--profile-card-radius-inner) var(--profile-card-radius-inner) 0 0; + border-radius: var(--profile-card-radius-inner) + var(--profile-card-radius-inner) 0 0; } .profile-avatar { diff --git a/browser/components/profiles/content/profiles-pages.css b/browser/components/profiles/content/profiles-pages.css index 55809b590741..2b66398f32dc 100644 --- a/browser/components/profiles/content/profiles-pages.css +++ b/browser/components/profiles/content/profiles-pages.css @@ -17,7 +17,10 @@ body { display: flex; justify-content: center; - background-color: var(--newtab-background-color, var(--background-color-canvas)); + background-color: var( + --newtab-background-color, + var(--background-color-canvas) + ); } edit-profile-card, diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css index 1ae9a86e6196..64ea58ea4d50 100644 --- a/browser/components/protections/content/protections.css +++ b/browser/components/protections/content/protections.css @@ -6,29 +6,29 @@ --card-padding: 24px; --exit-icon-size: 12px; --exit-icon-position: calc((var(--card-padding) - var(--exit-icon-size)) / 2); - --social-color: #9059ff; - --cookie-color: #0090f4; - --tracker-color: #2ac3a2; - --fingerprinter-color: #ffa436; - --cryptominer-color: #adadbc; + --social-color: #9059FF; + --cookie-color: #0090F4; + --tracker-color: #2AC3A2; + --fingerprinter-color: #FFA436; + --cryptominer-color: #ADADBC; /* Highlight colors for trackers */ - --social-highlight-color: #7b4cdb; - --cookie-highlight-color: #0081db; - --tracker-highlight-color: #23a488; - --fingerprinter-highlight-color: #d37f17; - --cryptominer-highlight-color: #9292a0; + --social-highlight-color: #7B4CDB; + --cookie-highlight-color: #0081DB; + --tracker-highlight-color: #23A488; + --fingerprinter-highlight-color: #D37F17; + --cryptominer-highlight-color: #9292A0; --tab-highlight: var(--social-color); /* start with social selected */ --column-width: 16px; - --graph-empty: #cececf; - --graph-curve: cubic-bezier(0.66, 0.75, 0.59, 0.91); + --graph-empty: #CECECF; + --graph-curve: cubic-bezier(.66,.75,.59,.91); /* Colors for the loading indicator */ - --protection-report-loader-color-stop: #aeaeae3d; + --protection-report-loader-color-stop: #AEAEAE3D; --protection-report-loader-gradient-opacity: 0.95; - --grey-70: #38383d; + --grey-70: #38383D; --grey-90-a60: rgba(12, 12, 13, 0.6); --gear-icon-fill: var(--grey-90-a60); @@ -40,29 +40,27 @@ body { box-sizing: border-box; } -*, -*:before, -*:after { +*, *:before, *:after { box-sizing: inherit; } -body[focuseddatatype="social"] { +body[focuseddatatype=social] { --tab-highlight: var(--social-color); } -body[focuseddatatype="cookie"] { +body[focuseddatatype=cookie] { --tab-highlight: var(--cookie-color); } -body[focuseddatatype="tracker"] { +body[focuseddatatype=tracker] { --tab-highlight: var(--tracker-color); } -body[focuseddatatype="fingerprinter"] { +body[focuseddatatype=fingerprinter] { --tab-highlight: var(--fingerprinter-color); } -body[focuseddatatype="cryptominer"] { +body[focuseddatatype=cryptominer] { --tab-highlight: var(--cryptominer-color); } @@ -200,13 +198,13 @@ a.hidden, @media (prefers-color-scheme: dark) { :root { - --social-highlight-color: #9661ff; - --cookie-highlight-color: #2ba8ff; - --tracker-highlight-color: #39e1bc; - --fingerprinter-highlight-color: #ffb65e; - --cryptominer-highlight-color: #bebeca; + --social-highlight-color: #9661FF; + --cookie-highlight-color: #2BA8FF; + --tracker-highlight-color: #39E1BC; + --fingerprinter-highlight-color: #FFB65E; + --cryptominer-highlight-color: #BEBECA; - --gear-icon-fill: rgba(249, 249, 250, 0.6); + --gear-icon-fill: rgba(249, 249, 250, 0.60); --hover-grey-link: var(--grey-30); --feature-banner-color: rgba(255, 255, 255, 0.1); } @@ -248,7 +246,7 @@ a.hidden, .card .content { margin-block: 5px 0; - font-size: 0.93em; + font-size: .93em; cursor: default; color: var(--text-color-deemphasized); } @@ -591,21 +589,21 @@ label[for="tab-social"]:hover ~ #highlight-hover { grid-area: social; } -input[data-type="cookie"]:checked ~ #highlight, +input[data-type="cookie"]:checked ~ #highlight, .hover-cookie label[for="tab-cookie"] ~ #highlight-hover, label[for="tab-cookie"]:hover ~ #highlight-hover { background-color: var(--cookie-color); grid-area: cookie; } -input[data-type="tracker"]:checked ~ #highlight, +input[data-type="tracker"]:checked ~ #highlight, .hover-tracker label[for="tab-tracker"] ~ #highlight-hover, label[for="tab-tracker"]:hover ~ #highlight-hover { background-color: var(--tracker-color); grid-area: tracker; } -input[data-type="fingerprinter"]:checked ~ #highlight, +input[data-type="fingerprinter"]:checked ~ #highlight, .hover-fingerprinter label[for="tab-fingerprinter"] ~ #highlight-hover, label[for="tab-fingerprinter"]:hover ~ #highlight-hover { background-color: var(--fingerprinter-color); @@ -744,7 +742,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover { } #monitor-partial-breaches-percentage { - font-size: 0.93em; + font-size: .93em; cursor: default; color: var(--text-color-deemphasized); float: inline-end; @@ -757,17 +755,17 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover { height: 25px; box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5); border: none; - background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); + background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%); direction: rtl; } .progress-bar:dir(rtl) { direction: ltr; - background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); + background: linear-gradient(-45deg, #0250BB 0%, #9059FF 100%); } .progress-bar::-moz-progress-bar { - background: #ffffff; + background: #FFFFFF; border-radius: 0 4px 4px 0; } @@ -875,64 +873,64 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover { .monitor-block a { outline: none; - color: #ffffff; + color: #FFFFFF; padding: 19px 0; } .monitor-block a:hover { text-decoration: none; - color: #ffffff; + color: #FFFFFF; } .email { - background: linear-gradient(162.33deg, #ab71ff 0%, #9059ff 100%); + background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%); grid-column: 1; } .email:hover { - background: linear-gradient(162.33deg, #7d43d1 0%, #7740e6 100%); + background: linear-gradient(162.33deg, #7D43D1 0%, #7740E6 100%); } .email:dir(rtl) { - background: linear-gradient(197.67deg, #ab71ff 0%, #9059ff 100%); + background: linear-gradient(197.67deg, #AB71FF 0%, #9059FF 100%); } .email:dir(rtl):hover { - background: linear-gradient(197.67deg, #7d43d1 0%, #7740e6 100%); + background: linear-gradient(197.67deg, #7D43D1 0%, #7740E6 100%); } .breaches { - background: linear-gradient(162.33deg, #9059ff 0%, #7542e5 100%); + background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%); grid-column: 2; } .breaches:hover { - background: linear-gradient(162.33deg, #7740e6 0%, #4714b7 100%); + background: linear-gradient(162.33deg, #7740E6 0%, #4714B7 100%); } .breaches:dir(rtl) { - background: linear-gradient(197.67deg, #9059ff 0%, #7542e5 100%); + background: linear-gradient(197.67deg, #9059FF 0%, #7542E5 100%) } .breaches:dir(rtl):hover { - background: linear-gradient(197.67deg, #7740e6 0%, #4714b7 100%); + background: linear-gradient(197.67deg, #7740E6 0%, #4714B7 100%) } .passwords { - background: linear-gradient(162.33deg, #7542e5 0%, #592acb 100%); + background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%); grid-column: 3; } .passwords:hover { - background: linear-gradient(162.33deg, #4714b7 0%, #2b009d 100%); + background: linear-gradient(162.33deg, #4714B7 0%, #2B009D 100%); } .passwords:dir(rtl) { - background: linear-gradient(197.67deg, #7542e5 0%, #592acb 100%); + background: linear-gradient(197.67deg, #7542E5 0%, #592ACB 100%) } .passwords:dir(rtl):hover { - background: linear-gradient(197.67deg, #4714b7 0%, #2b009d 100%); + background: linear-gradient(197.67deg, #4714B7 0%, #2B009D 100%) } .monitor-stat { @@ -952,7 +950,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover { .icon-med { width: 24px; height: 24px; - -moz-context-properties: fill, fill-opacity; + -moz-context-properties: fill,fill-opacity; fill: white; fill-opacity: 0.65; padding: 5px; @@ -1033,31 +1031,19 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover { height: 110px; width: 765px; content: ""; - background-image: linear-gradient( - to right, - var(--background-color-box) 0%, - var(--protection-report-loader-color-stop) 30%, - var(--background-color-box) 40%, - var(--background-color-box) 100% - ); + background-image: linear-gradient(to right, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%); background-repeat: no-repeat; animation-duration: 2s; animation-iteration-count: infinite; animation-name: loading; - animation-timing-function: cubic-bezier(0.07, 0.95, 1, 1); + animation-timing-function: cubic-bezier(.07,.95,1,1); background-size: 700px 100%; opacity: var(--protection-report-loader-gradient-opacity); } .monitor-card.loading:dir(rtl)::after, .lockwise-card.loading:dir(rtl)::after { - background-image: linear-gradient( - to left, - var(--background-color-box) 0%, - var(--protection-report-loader-color-stop) 30%, - var(--background-color-box) 40%, - var(--background-color-box) 100% - ); + background-image: linear-gradient(to left, var(--background-color-box) 0%, var(--protection-report-loader-color-stop) 30%, var(--background-color-box) 40%, var(--background-color-box) 100%); animation-name: loading-rtl; } diff --git a/browser/components/screenshots/screenshots-buttons.css b/browser/components/screenshots/screenshots-buttons.css index 9851388bcd48..c74d7059fb3a 100644 --- a/browser/components/screenshots/screenshots-buttons.css +++ b/browser/components/screenshots/screenshots-buttons.css @@ -24,8 +24,7 @@ background-image: url("chrome://browser/content/screenshots/menu-visible.svg"); } -#full-page, -#visible-page { +#full-page, #visible-page { -moz-context-properties: fill, stroke; fill: currentColor; /* stroke is the secondary fill color used to define the viewport shape in the SVGs */ diff --git a/browser/components/search/content/addEngine.css b/browser/components/search/content/addEngine.css index b58effc0cfe8..b594e9661aa9 100644 --- a/browser/components/search/content/addEngine.css +++ b/browser/components/search/content/addEngine.css @@ -12,7 +12,7 @@ hbox { #titleContainer { padding-bottom: var(--space-xlarge); - --icon-url: url("chrome://browser/skin/preferences/category-search.svg"); + --icon-url: url("chrome://browser/skin/preferences/category-search.svg") } .dialogRow { @@ -34,6 +34,8 @@ input[type="url"] { flex-direction: column; } + + .error-label { display: flex; font-size: var(--font-size-small); diff --git a/browser/components/search/content/contentSearchUI.css b/browser/components/search/content/contentSearchUI.css index 2d9bfa1915e7..85b718a3eb7f 100644 --- a/browser/components/search/content/contentSearchUI.css +++ b/browser/components/search/content/contentSearchUI.css @@ -3,11 +3,11 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ .contentSearchSuggestionTable { - background-color: hsla(0, 0%, 100%, 0.99); + background-color: hsla(0,0%,100%,.99); color: black; - border: 1px solid hsla(0, 0%, 0%, 0.2); + border: 1px solid hsla(0, 0%, 0%, .2); border-top: none; - box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.1); + box-shadow: 0 5px 10px hsla(0, 0%, 0%, .1); position: absolute; inset-inline-start: 0; z-index: 1001; @@ -108,7 +108,7 @@ padding: 0; border: none; background: none; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII="); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gofECQNNVW2/AAAABBJREFUGFdjOHPmzH8GehEA/KpKg9YTf4AAAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: right center; } @@ -146,7 +146,7 @@ padding: 0; height: 32px; border: none; - border-top: 1px solid hsla(0, 0%, 0%, 0.08); + border-top: 1px solid hsla(0, 0%, 0%, .08); text-align: center; width: 100%; } diff --git a/browser/components/search/test/browser/telemetry/serp.css b/browser/components/search/test/browser/telemetry/serp.css index 7b49ed27d796..5b3865da44ca 100644 --- a/browser/components/search/test/browser/telemetry/serp.css +++ b/browser/components/search/test/browser/telemetry/serp.css @@ -33,7 +33,7 @@ nav { margin-bottom: 20px; } -nav > div, +nav>div, #searchform, .moz-carousel, .factrow { @@ -41,12 +41,12 @@ nav > div, align-items: center; } -nav > div, +nav>div, #searchform { gap: 40px; } -nav > div, +nav>div, #searchform, #searchresults, #top { @@ -68,7 +68,7 @@ nav > div, overflow-y: hidden; } -.card-container > .card { +.card-container>.card { height: 160px; border-radius: 3px; border: 1px solid var(--subtle); @@ -77,11 +77,11 @@ nav > div, padding: 10px; } -.card-container > .card:not(:last-child) { +.card-container>.card:not(:last-child) { margin-right: 10px; } -.card-container > .card > a { +.card-container>.card>a { display: block; margin-bottom: 2px; } @@ -111,13 +111,13 @@ nav > div, width: calc(var(--carousel-card-width) * 4 + (3 * 10px)); } -.moz-carousel > .moz-inner { +.moz-carousel>.moz-inner { border: 1px solid var(--subtle); border-radius: 10px; padding: 10px; } -.moz-carousel > .moz-carousel-card { +.moz-carousel>.moz-carousel-card { flex: 1 0 var(--carousel-card-width); border: 1px solid var(--subtle); font-size: 14px; diff --git a/browser/components/shopping/content/letter-grade.css b/browser/components/shopping/content/letter-grade.css index 5da202c5ed25..bf37e62a6af4 100644 --- a/browser/components/shopping/content/letter-grade.css +++ b/browser/components/shopping/content/letter-grade.css @@ -5,11 +5,11 @@ @import url("chrome://global/skin/in-content/common.css"); :host { - --background-term-a: #b3ffe3; - --background-term-b: #80ebff; - --background-term-c: #ffea80; - --background-term-d: #ffb587; - --background-term-f: #ff848b; + --background-term-a: #B3FFE3; + --background-term-b: #80EBFF; + --background-term-c: #FFEA80; + --background-term-d: #FFB587; + --background-term-f: #FF848B; --in-content-box-border-color: rgba(0, 0, 0, 0.15); --inner-border: 1px solid var(--in-content-box-border-color); --letter-grade-width: 1.5rem; @@ -40,7 +40,7 @@ width: var(--letter-grade-width); } -:host([showdescription]) #letter-grade-term { +:host([showdescription]) #letter-grade-term { /* For border "shadow" inside the container */ border-block: var(--inner-border); border-inline-start: var(--inner-border); diff --git a/browser/components/shopping/content/shopping-card.css b/browser/components/shopping/content/shopping-card.css index e9707dbbc1c5..0f5c03aab655 100644 --- a/browser/components/shopping/content/shopping-card.css +++ b/browser/components/shopping/content/shopping-card.css @@ -46,7 +46,7 @@ moz-card { inset-inline: 0; } -.show-more[expanded="false"] { +.show-more[expanded="false"] { overflow: clip; height: 200px; } diff --git a/browser/components/shopping/content/shopping-container.css b/browser/components/shopping/content/shopping-container.css index aeae41278a58..904bc1caa067 100644 --- a/browser/components/shopping/content/shopping-container.css +++ b/browser/components/shopping/content/shopping-container.css @@ -46,7 +46,7 @@ } .header-wrapper-shadow { - box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); + box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.20); } #beta-marker { @@ -147,11 +147,11 @@ } @keyframes fade-in { - from { - opacity: 0.25; - } - to { - opacity: 1; - } - } + from { + opacity: .25; + } + to { + opacity: 1; + } + } } diff --git a/browser/components/shopping/content/shopping-message-bar.css b/browser/components/shopping/content/shopping-message-bar.css index eb7642ec51ca..fe3320310f43 100644 --- a/browser/components/shopping/content/shopping-message-bar.css +++ b/browser/components/shopping/content/shopping-message-bar.css @@ -58,8 +58,8 @@ button { } } -:host([type="analysis-in-progress"]) .icon, -:host([type="reanalysis-in-progress"]) .icon { +:host([type=analysis-in-progress]) .icon, +:host([type=reanalysis-in-progress]) .icon { --message-bar-icon-url: conic-gradient(var(--icon-color-information) var(--analysis-progress-pcent, 0%), transparent var(--analysis-progress-pcent, 0%)); border: 1px solid var(--icon-color); border-radius: 50%; diff --git a/browser/components/sidebar/sidebar-customize.css b/browser/components/sidebar/sidebar-customize.css index 2b5abbff7fdb..d2cc8fbac0c1 100644 --- a/browser/components/sidebar/sidebar-customize.css +++ b/browser/components/sidebar/sidebar-customize.css @@ -55,7 +55,7 @@ padding-block: var(--space-medium); box-sizing: border-box; - &:not(:last-of-type) { + &:not(:last-of-type){ border-bottom: 0.5px solid var(--panel-separator-color); } } diff --git a/browser/components/sidebar/sidebar-main.css b/browser/components/sidebar/sidebar-main.css index 15403bf6fa99..7acdb87231ec 100644 --- a/browser/components/sidebar/sidebar-main.css +++ b/browser/components/sidebar/sidebar-main.css @@ -64,7 +64,7 @@ } moz-button:not([type~="ghost"]):not(:hover) { - &::part(button) { + &::part(button){ background-color: var(--toolbarbutton-active-background); } } diff --git a/browser/components/sidebar/sidebar-tab-row.css b/browser/components/sidebar/sidebar-tab-row.css index 0936327bef40..d5f12fcba896 100644 --- a/browser/components/sidebar/sidebar-tab-row.css +++ b/browser/components/sidebar/sidebar-tab-row.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -#fxview-tab-row-secondary-button { + #fxview-tab-row-secondary-button { display: none; :host(:hover) & { @@ -25,8 +25,7 @@ gap: 8px; flex: 1; - &:hover, - &:hover:active { + &:hover, &:hover:active { background-color: unset; } } diff --git a/browser/components/sidebar/sidebar.css b/browser/components/sidebar/sidebar.css index 363d41793bf8..55af05f3d083 100644 --- a/browser/components/sidebar/sidebar.css +++ b/browser/components/sidebar/sidebar.css @@ -9,7 +9,7 @@ --sidebar-box-border-color: light-dark(color-mix(in srgb, currentColor 10%, transparent), var(--border-color-deemphasized)); --sidebar-box-border-width: 0.5px; --sidebar-box-border: var(--sidebar-box-border-width) solid var(--sidebar-box-border-color); - --sidebar-box-background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05)); + --sidebar-box-background: light-dark(rgba(0, 0, 0, .03), rgba(255, 255, 255, .05)); --sidebar-box-color: currentColor; background-color: transparent; color: var(--sidebar-text-color); @@ -75,7 +75,7 @@ fxview-search-textbox { &::part(container) { width: 100%; - height: var(--size-item-large); + height: var(--size-item-large) } } diff --git a/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css b/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css index 141857f08f47..cb6dd9b6f228 100644 --- a/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css +++ b/browser/components/storybook/.storybook/addon-fluent/fluent-panel.css @@ -7,11 +7,11 @@ } .addon-panel-message { - background: #fff5cf; + background: #FFF5CF; color: #333333; padding: 10px 15px; line-height: 20px; - box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; font-size: 13px; } @@ -29,7 +29,7 @@ table.addon-panel-table thead.addon-panel-table-head th { @media (prefers-color-scheme: dark) { table.addon-panel-table thead.addon-panel-table-head th { - color: rgba(201, 205, 207, 0.55); + color: rgba(201, 205, 207, 0.55) } } diff --git a/browser/components/textrecognition/textrecognition.css b/browser/components/textrecognition/textrecognition.css index ec059d8327c7..0319ff813f54 100644 --- a/browser/components/textrecognition/textrecognition.css +++ b/browser/components/textrecognition/textrecognition.css @@ -84,8 +84,8 @@ .textRecognitionSuccessIcon { display: inline-block; - background-color: #2ac3a2; - border: 3px solid #2ac3a2; + background-color: #2AC3A2; + border: 3px solid #2AC3A2; fill: var(--in-content-page-background); -moz-context-properties: fill; border-radius: 10px; @@ -96,13 +96,13 @@ @media (prefers-reduced-motion: no-preference) { .textRecognitionSuccessIcon { - animation: success-animation 0.3s cubic-bezier(0.3, 2, 0.48, 0.94); + animation: success-animation 0.3s cubic-bezier(.3,2,.48,.94); } } .textRecognitionNoResultIcon { display: inline-block; - fill: #ffbf00; + fill: #FFBF00; -moz-context-properties: fill; width: 18px; height: 18px; @@ -122,21 +122,13 @@ } @keyframes throbber-animation-ltr { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-100%); - } + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } } @keyframes throbber-animation-rtl { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(100%); - } + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } } @keyframes success-animation { diff --git a/browser/components/urlbar/tests/browser/dynamicResult0.css b/browser/components/urlbar/tests/browser/dynamicResult0.css index 7ac47b2aa049..328127b59424 100644 --- a/browser/components/urlbar/tests/browser/dynamicResult0.css +++ b/browser/components/urlbar/tests/browser/dynamicResult0.css @@ -5,7 +5,7 @@ --testDynamicResult0: ok0; } -.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner { +.urlbarView-row[dynamicType=test] > .urlbarView-row-inner { display: flex; align-items: center; min-height: 32px; @@ -46,8 +46,5 @@ .urlbarView-dynamic-test-button2[selected] { color: white; background-color: var(--urlbarView-primary-button-background); - box-shadow: - 0 0 0 1px #0a84ff inset, - 0 0 0 1px #0a84ff, - 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } diff --git a/browser/components/urlbar/tests/browser/dynamicResult1.css b/browser/components/urlbar/tests/browser/dynamicResult1.css index f07396d5483f..ae43fd3f9a32 100644 --- a/browser/components/urlbar/tests/browser/dynamicResult1.css +++ b/browser/components/urlbar/tests/browser/dynamicResult1.css @@ -5,7 +5,7 @@ --testDynamicResult1: ok1; } -.urlbarView-row[dynamicType="test"] > .urlbarView-row-inner { +.urlbarView-row[dynamicType=test] > .urlbarView-row-inner { display: flex; align-items: center; min-height: 32px; @@ -46,8 +46,5 @@ .urlbarView-dynamic-test-button2[selected] { color: white; background-color: var(--urlbarView-primary-button-background); - box-shadow: - 0 0 0 1px #0a84ff inset, - 0 0 0 1px #0a84ff, - 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } diff --git a/browser/extensions/formautofill/skin/shared/editAddress.css b/browser/extensions/formautofill/skin/shared/editAddress.css index ed54f69c61a3..08ee6465fb5b 100644 --- a/browser/extensions/formautofill/skin/shared/editAddress.css +++ b/browser/extensions/formautofill/skin/shared/editAddress.css @@ -19,9 +19,7 @@ flex: 0 1 100%; } - input, - textarea, - select { + input, textarea, select { width: 100%; margin: 0; } @@ -46,7 +44,7 @@ display: flex; align-items: center; text-align: start; - opacity: 0.5; + opacity: .5; padding-inline-start: 1em; flex: 1; } diff --git a/browser/extensions/formautofill/skin/shared/editDialog-shared.css b/browser/extensions/formautofill/skin/shared/editDialog-shared.css index 9115f3d35dae..40f5d1e949c8 100644 --- a/browser/extensions/formautofill/skin/shared/editDialog-shared.css +++ b/browser/extensions/formautofill/skin/shared/editDialog-shared.css @@ -3,10 +3,10 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ :root { - --in-field-label-size: 0.8em; + --in-field-label-size: .8em; --grid-column-row-gap: 8px; /* Use the animation-easing-function that is defined in global-shared.css. */ - --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1); + --animation-easing-function: cubic-bezier(.07,.95,0,1); } /* The overly specific input attributes are required to override @@ -17,7 +17,7 @@ form input[type="text"], form textarea, form select { flex-grow: 1; - padding-top: calc(var(--in-field-label-size) + 0.4em); + padding-top: calc(var(--in-field-label-size) + .4em); } form input[type="tel"] { @@ -50,13 +50,12 @@ form div { form :is(label, div) .label-text { position: absolute; - opacity: 0.5; + opacity: .5; pointer-events: none; inset-inline-start: 10px; - top: 0.2em; - transition: - top 0.2s var(--animation-easing-function), - font-size 0.2s var(--animation-easing-function); + top: .2em; + transition: top .2s var(--animation-easing-function), + font-size .2s var(--animation-easing-function); } form :is(label, div):focus-within .label-text, diff --git a/browser/extensions/webcompat/injections/css/bug1770962-coldwellbankerhomes.com-image-height.css b/browser/extensions/webcompat/injections/css/bug1770962-coldwellbankerhomes.com-image-height.css index 89e62a01ad94..f9460951afbe 100644 --- a/browser/extensions/webcompat/injections/css/bug1770962-coldwellbankerhomes.com-image-height.css +++ b/browser/extensions/webcompat/injections/css/bug1770962-coldwellbankerhomes.com-image-height.css @@ -8,6 +8,11 @@ * WebCompat issue #102872 - https://webcompat.com/issues/102872 */ -.property-snapshot-psr-panel .prop-pix .photo-carousel.owl .owl-stage-outer .owl-item img { +.property-snapshot-psr-panel + .prop-pix + .photo-carousel.owl + .owl-stage-outer + .owl-item + img { height: -moz-available; } diff --git a/browser/extensions/webcompat/injections/css/bug1886293-futurePLC-sites-trending_scrollbars.css b/browser/extensions/webcompat/injections/css/bug1886293-futurePLC-sites-trending_scrollbars.css index cee46e2ddea0..1afb0d5b7267 100644 --- a/browser/extensions/webcompat/injections/css/bug1886293-futurePLC-sites-trending_scrollbars.css +++ b/browser/extensions/webcompat/injections/css/bug1886293-futurePLC-sites-trending_scrollbars.css @@ -29,5 +29,6 @@ .trending__list { scrollbar-width: thin; - scrollbar-color: var(--trending-scrollbar-color) var(--trending-scrollbar-background-color); + scrollbar-color: var(--trending-scrollbar-color) + var(--trending-scrollbar-background-color); } diff --git a/browser/extensions/webcompat/injections/css/bug1947105-pexels.com-nudge-thanks-popup-onscreen.css b/browser/extensions/webcompat/injections/css/bug1947105-pexels.com-nudge-thanks-popup-onscreen.css index 4b71c572dda6..017e5a08d55b 100644 --- a/browser/extensions/webcompat/injections/css/bug1947105-pexels.com-nudge-thanks-popup-onscreen.css +++ b/browser/extensions/webcompat/injections/css/bug1947105-pexels.com-nudge-thanks-popup-onscreen.css @@ -9,6 +9,8 @@ * * The site is using a faulty -moz-transform rule, which we can unset. */ -[class*="Modal_overlay"][class*="Modal_positionContentCenter"]:has([class*="after-open"]) { +[class*="Modal_overlay"][class*="Modal_positionContentCenter"]:has( + [class*="after-open"] + ) { justify-content: unset; } diff --git a/browser/fxr/content/common.css b/browser/fxr/content/common.css index 4122a9d6eb39..512be5aee734 100644 --- a/browser/fxr/content/common.css +++ b/browser/fxr/content/common.css @@ -2,16 +2,16 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -* { + * { margin: 0; padding: 0; user-select: none; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; } .modal_mask:not([hidden]) { - background-color: #00cc00; + background-color: #00CC00; height: 100%; width: 100%; @@ -32,7 +32,7 @@ position: absolute; top: 0; - left: 0; + left :0; } .modal_hide { diff --git a/browser/fxr/content/fxrui.css b/browser/fxr/content/fxrui.css index 892f1982cd9b..42eee7f5abaf 100644 --- a/browser/fxr/content/fxrui.css +++ b/browser/fxr/content/fxrui.css @@ -4,11 +4,11 @@ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -html, -body { +html, body { height: 100%; } + body { display: flex; flex-direction: column; @@ -55,7 +55,7 @@ body { } .icon_disabled_hide:disabled { - display: none; + display:none; } .icon_backward { background-image: url("assets/icon-backward.svg"); @@ -113,7 +113,7 @@ body { border: none; font-size: 18px; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; mask-image: linear-gradient(to left, transparent, black 8ch); } @@ -132,7 +132,7 @@ body { * fill the entire viewport */ :root[inFullScreen] .navbar_container { - display: none; + display:none; } .browser_settings { diff --git a/browser/fxr/content/fxrui_blue.css b/browser/fxr/content/fxrui_blue.css index 6eb47c6d6b2a..c65e7e7919ae 100644 --- a/browser/fxr/content/fxrui_blue.css +++ b/browser/fxr/content/fxrui_blue.css @@ -2,25 +2,25 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* These not-very-descriptive variable names for colors come + /* These not-very-descriptive variable names for colors come * from the design documents and are maintained to make it * easier to map between the stylesheet and the design doc. */ :root { - --num01: #1d2e3b; - --num02: #4c495c; - --num03: #7d8896; - --num04: #b3becc; - --num06: #ffffff; - --num07: #00b3e3; - --num08: #56d9f6; - --num09: #0968b6; - --num13: #2c3a50; - --num13_alpha: #2c3a5080; + --num01: #1D2E3B; + --num02: #4C495C; + --num03: #7D8896; + --num04: #B3BECC; + --num06: #FFFFFF; + --num07: #00B3E3; + --num08: #56D9F6; + --num09: #0968B6; + --num13: #2C3A50; + --num13_alpha: #2C3A5080; --num14: #596677; --num14_alpha: #59667780; - --num16: #e7eaf0; - --num19: #ffffff; + --num16: #E7EAF0; + --num19: #FFFFFF; --secure: #f7ce4d; } @@ -53,10 +53,10 @@ body { background-color: var(--num02); } .urlbar_container:hover { - border-color: var(--num04); + border-color:var(--num04); } .urlbar_container:focus-within { - border-color: var(--num08); + border-color:var(--num08); background-color: var(--num01); } diff --git a/browser/fxr/content/prefs.css b/browser/fxr/content/prefs.css index 57d48251a1eb..5db50e4f65c7 100644 --- a/browser/fxr/content/prefs.css +++ b/browser/fxr/content/prefs.css @@ -13,7 +13,7 @@ body { background-color: transparent; } -.settings_header { +.settings_header{ display: flex; flex-direction: row; } @@ -77,7 +77,7 @@ body { } .button_report_issue_icon { - float: left; + float:left; height: 30px; margin: 5px; } @@ -102,7 +102,7 @@ body { .divider { border-style: solid; border-width: 1px; - border-color: var(--num04); + border-color: var(--num04); margin: 10px; } diff --git a/browser/installer/windows/nsis/content/stub_common.css b/browser/installer/windows/nsis/content/stub_common.css index e889facdd8dd..a8d15512b532 100644 --- a/browser/installer/windows/nsis/content/stub_common.css +++ b/browser/installer/windows/nsis/content/stub_common.css @@ -3,13 +3,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ body { - height: 100%; - width: 100%; - margin: 0; - padding: 0; - overflow: hidden; + height: 100%; + width: 100%; + margin: 0; + padding: 0; + overflow: hidden; - font-family: "Segoe UI", sans-serif; + font-family: "Segoe UI", sans-serif; } /* This is an rather than using background-image because IE8 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index e2d2e3a0d2be..5842be4ab4f7 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -133,8 +133,8 @@ /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the background color not visible. Anti-aliasing is not available either. Make a thicker outline and cancel border-radius for that case. */ - outline: 4px solid rgb(0, 200, 215); - border-radius: 0 !important; + outline: 4px solid rgb(0,200,215); + border-radius: 0 !important; } #UITourTooltipDescription { @@ -185,7 +185,7 @@ width: 24px; height: 24px; /* Matches the libadwaita transition */ - transition: background-color 0.2s ease; + transition: background-color .2s ease; } &:hover > .toolbarbutton-icon { diff --git a/browser/themes/linux/sanitizeDialog.css b/browser/themes/linux/sanitizeDialog.css index 8a66b3357ded..07f7550f4016 100644 --- a/browser/themes/linux/sanitizeDialog.css +++ b/browser/themes/linux/sanitizeDialog.css @@ -11,7 +11,6 @@ margin-inline-start: 3px; } -/* prettier-ignore */ #sanitizeEverythingWarningIcon { list-style-image: image-set( "moz-icon://stock/dialog-warning?size=48" 1x, diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 165a5e4041a2..9f795cd5b67b 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -5,7 +5,7 @@ @import url("chrome://browser/skin/browser-shared.css"); :root { - --arrowpanel-field-background: light-dark(rgba(249, 249, 250, 0.3), rgba(12, 12, 13, 0.3)); + --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3)); } /* stylelint-disable-next-line media-query-no-invalid */ @@ -57,7 +57,7 @@ /** End titlebar **/ :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] { - border-top: 1px solid rgba(0, 0, 0, 0.65); + border-top: 1px solid rgba(0,0,0,0.65); } /* ----- BOOKMARK TOOLBAR ----- */ @@ -96,7 +96,7 @@ resembles the system outline, bringing the Urlbar in line with panels and other Mac apps. */ #urlbar[open] > #urlbar-background { - outline: 1px solid var(--focus-outline-color); + outline: 1px solid var(--focus-outline-color) } } @@ -115,7 +115,7 @@ /* ----- AUTOCOMPLETE ----- */ #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { - border-top: 1px solid #c7c7c7; + border-top: 1px solid #C7C7C7; } /* Bookmarking panel */ @@ -137,14 +137,14 @@ margin: 0; } -#editBMPanel_folderTree > treechildren::-moz-tree-row(blur, selected), +#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected), #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { background-color: var(--arrowpanel-dimmed); } -#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur, selected), -#editBMPanel_folderTree > treechildren::-moz-tree-image(blur, selected), -#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur, selected), +#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected), +#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected), #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] { color: inherit; } @@ -174,7 +174,7 @@ } .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [multiselected]) { - opacity: 0.9; + opacity: .9; } /* @@ -186,7 +186,7 @@ } .tab-label-container:not([selected], [multiselected]) { - opacity: 0.7; + opacity: .7; } .tabbrowser-tab { diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css index f0327bcfeeb8..2ba897f613dc 100644 --- a/browser/themes/osx/customizableui/panelUI.css +++ b/browser/themes/osx/customizableui/panelUI.css @@ -8,7 +8,7 @@ scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; } -.subviewbutton:not([image], [targetURI], .bookmark-item) > .menu-icon { +.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-icon { display: none; } diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css index 217a21bb8c18..62112bd7d7c2 100644 --- a/browser/themes/osx/downloads/downloads.css +++ b/browser/themes/osx/downloads/downloads.css @@ -6,7 +6,7 @@ :root { --downloads-item-height: 6em; - --downloads-item-font-size-factor: 0.8; + --downloads-item-font-size-factor: 0.80; --downloads-item-details-opacity: 0.7; --downloads-item-disabled-opacity: 0.7; } diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css index da33a0054e72..1531d4fa3aac 100644 --- a/browser/themes/osx/places/organizer.css +++ b/browser/themes/osx/places/organizer.css @@ -45,12 +45,12 @@ &:not(:hover):-moz-window-inactive > .toolbarbutton-icon, &[type="menu"][disabled] > .toolbarbutton-menu-dropmarker, &:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker { - opacity: 0.5; + opacity: .5; } &:-moz-window-inactive[disabled] > .toolbarbutton-icon, &:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker { - opacity: 0.25; + opacity: .25; } > menupopup { diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css index 6a8571623be3..57c1120b840a 100644 --- a/browser/themes/shared/UITour.css +++ b/browser/themes/shared/UITour.css @@ -23,7 +23,7 @@ transform: scale(0.8); } 50% { - transform: scale(1); + transform: scale(1.0); } to { transform: scale(0.8); @@ -32,13 +32,13 @@ @keyframes uitour-color { from { - border-color: #5b9cd9; + border-color: #5B9CD9; } 50% { - border-color: #ff0000; + border-color: #FF0000; } to { - border-color: #5b9cd9; + border-color: #5B9CD9; } } @@ -177,20 +177,20 @@ #UITourTooltipButtons > button:not(.button-link) { appearance: none; - background-color: rgb(251, 251, 251); + background-color: rgb(251,251,251); border-radius: 3px; border: 1px solid; - border-color: rgb(192, 192, 192); - color: rgb(71, 71, 71); + border-color: rgb(192,192,192); + color: rgb(71,71,71); padding: 4px 30px; transition-property: background-color, border-color; transition-duration: 150ms; } #UITourTooltipButtons > button:not(.button-link, :active):hover { - background-color: hsla(210, 4%, 10%, 0.15); - border-color: hsla(210, 4%, 10%, 0.15); - box-shadow: 0 1px 0 0 hsla(210, 4%, 10%, 0.05) inset; + background-color: hsla(210,4%,10%,.15); + border-color: hsla(210,4%,10%,.15); + box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset; } #UITourTooltipButtons > label, @@ -205,11 +205,11 @@ /* The primary button gets the same color as the customize button. */ #UITourTooltipButtons > button.button-primary { - background-color: rgb(116, 191, 67); + background-color: rgb(116,191,67); color: white; padding-inline: 30px; } #UITourTooltipButtons > button.button-primary:not(:active):hover { - background-color: rgb(105, 173, 61); + background-color: rgb(105,173,61); } diff --git a/browser/themes/shared/addon-notification.css b/browser/themes/shared/addon-notification.css index a7080adb894f..4f9c7592412f 100644 --- a/browser/themes/shared/addon-notification.css +++ b/browser/themes/shared/addon-notification.css @@ -115,5 +115,5 @@ html|ul.webext-perm-domains-list { .addon-warning-icon { -moz-context-properties: fill; - fill: #ffbf00; + fill: #FFBF00; } diff --git a/browser/themes/shared/addons/extension-controlled.css b/browser/themes/shared/addons/extension-controlled.css index 4d6100ce65ef..668e65909200 100644 --- a/browser/themes/shared/addons/extension-controlled.css +++ b/browser/themes/shared/addons/extension-controlled.css @@ -30,7 +30,6 @@ } } -/* prettier-ignore */ .extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning, .extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon { display: none; diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css index 252bf03da10e..262e79a470de 100644 --- a/browser/themes/shared/addons/unified-extensions.css +++ b/browser/themes/shared/addons/unified-extensions.css @@ -137,7 +137,7 @@ unified-extensions-item { .unified-extensions-item-name, .unified-extensions-item-message { margin: 0; - padding-inline-start: 0.5em; + padding-inline-start: .5em; word-break: break-word; } @@ -148,7 +148,8 @@ unified-extensions-item { .unified-extensions-item-menu-button.subviewbutton { list-style-image: url("chrome://global/skin/icons/settings.svg"); /* subtract the child's ~1px border from the block padding */ - padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) var(--arrowpanel-menuitem-margin-inline); + padding: calc(var(--arrowpanel-menuitem-margin-inline) - 1px) + var(--arrowpanel-menuitem-margin-inline); padding-inline-end: 0; border-radius: 0; /* override panelUI-shared.css */ @@ -175,7 +176,7 @@ unified-extensions-item { &:hover:active > .toolbarbutton-icon { color: var(--uei-button-active-color); background-color: var(--uei-button-active-bgcolor); - box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; } &:focus-visible > .toolbarbutton-icon { diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css index 3e0bf3e4535d..6dbd4a6a2b53 100644 --- a/browser/themes/shared/autocomplete.css +++ b/browser/themes/shared/autocomplete.css @@ -27,7 +27,7 @@ padding: 0 1px; --status-text-color: currentColor; - --status-background-color: rgba(248, 232, 28, 0.2); + --status-background-color: rgba(248, 232, 28, .2); > .ac-site-icon { margin-inline: 4px 0; @@ -75,7 +75,7 @@ &:hover, &[selected] { - background-color: hsla(0, 0%, 80%, 0.5); /* match arrowpanel-dimmed-further */ + background-color: hsla(0,0%,80%,.5); /* match arrowpanel-dimmed-further */ } } @@ -182,11 +182,11 @@ fill: SelectedItemText; } - /* Login form autocompletion */ - > .two-line-wrapper { - padding: 4px; - padding-inline-start: 6px; - } + /* Login form autocompletion */ + > .two-line-wrapper { + padding: 4px; + padding-inline-start: 6px; + } &[originaltype="action"] > .two-line-wrapper { flex: 1; @@ -219,7 +219,7 @@ &[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { /* Separator between logins and generated passwords. This uses --panel-separator-color from default * themes since autocomplete doesn't yet switch to dark. */ - border-top: 1px solid hsla(210, 4%, 10%, 0.14); + border-top: 1px solid hsla(210,4%,10%,.14); } &[originaltype="action"] { diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css index 0057b5ae44e3..568ae6c2c8ed 100644 --- a/browser/themes/shared/blockedSite.css +++ b/browser/themes/shared/blockedSite.css @@ -6,7 +6,7 @@ @media not (prefers-contrast) { :root { - --in-content-page-background: #a4000f; + --in-content-page-background: #A4000F; --in-content-page-color: white; --in-content-text-color: white; --in-content-primary-button-text-color: black; diff --git a/browser/themes/shared/browser-colors.css b/browser/themes/shared/browser-colors.css index 12e2265a79e7..7e3fb4e2076d 100644 --- a/browser/themes/shared/browser-colors.css +++ b/browser/themes/shared/browser-colors.css @@ -22,9 +22,9 @@ --tabs-navbar-separator-color: ThreeDShadow; --tabs-navbar-separator-style: solid; - --short-notification-background: #0250bb; - --short-notification-gradient: #9059ff; - --warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f); + --short-notification-background: #0250BB; + --short-notification-gradient: #9059FF; + --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F); --urlbar-box-bgcolor: var(--button-background-color-hover); --urlbar-box-focus-bgcolor: var(--button-background-color); @@ -52,7 +52,7 @@ --link-color: light-dark(var(--color-blue-50), var(--color-cyan-50)); --link-color-hover: light-dark(var(--color-blue-60), var(--color-cyan-30)); --link-color-active: light-dark(var(--color-blue-70), var(--color-cyan-20)); - --tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); + --tabs-navbar-separator-color: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3)); --attention-dot-color: light-dark(#2ac3a2, #54ffbd); --toolbox-bgcolor: var(--lwt-accent-color); @@ -61,7 +61,7 @@ --toolbox-textcolor-inactive: var(--lwt-text-color, currentColor); @media not (prefers-contrast) { - --focus-outline-color: light-dark(#0061e0, #00ddff); + --focus-outline-color: light-dark(#0061E0, #00DDFF); } } @@ -84,17 +84,23 @@ :root:not([lwtheme]) { --color-accent-primary: light-dark(rgb(0, 97, 224), rgb(0, 221, 255)); --button-text-color-primary: light-dark(rgb(251, 251, 254), rgb(43, 42, 51)); - --button-background-color: light-dark(rgba(207, 207, 216, 0.33), rgba(0, 0, 0, 0.33)); - --button-background-color-hover: light-dark(rgba(207, 207, 216, 0.66), rgba(207, 207, 216, 0.2)); - --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, 0.4)); + --button-background-color: light-dark(rgba(207, 207, 216, .33), rgba(0, 0, 0, .33)); + --button-background-color-hover: light-dark(rgba(207, 207, 216, .66), rgba(207, 207, 216, .20)); + --button-background-color-active: light-dark(rgb(207, 207, 216), rgba(207, 207, 216, .40)); --button-text-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --arrowpanel-background: light-dark(white, rgb(66, 65, 77)); --arrowpanel-color: light-dark(black, rgb(251, 251, 254)); - --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); + --arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94)); - --arrowpanel-dimmed: light-dark(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 17%, transparent)); - --arrowpanel-dimmed-further: light-dark(color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, currentColor 14%, transparent)); + --arrowpanel-dimmed: light-dark( + color-mix(in srgb, currentColor 12%, transparent), + color-mix(in srgb, currentColor 17%, transparent) + ); + --arrowpanel-dimmed-further: light-dark( + color-mix(in srgb, currentColor 20%, transparent), + color-mix(in srgb, currentColor 14%, transparent) + ); --input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --input-bgcolor: light-dark(rgb(255, 255, 255), #42414d); @@ -122,14 +128,14 @@ --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34)); --toolbar-field-border-color: transparent; - --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)); + --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)); --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77)); --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254)); --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201)); --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); - --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43, 42, 51)); + --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51)); --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254)); --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed)); diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css index 609ef74a4941..76776f04f6ac 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -101,7 +101,7 @@ body { the gap around them more uniform when they are close to the field edges */ --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px); --urlbar-searchmodeswitcher-inline-padding: 6px; - --urlbar-searchmodeswitcher-margin-inline-end: 0.45em; + --urlbar-searchmodeswitcher-margin-inline-end: .45em; --pocket-icon-fill: #ef4056; @@ -109,10 +109,10 @@ body { --lwt-background-alignment: right top; --lwt-background-tiling: no-repeat; - --ext-theme-background-transition: background-color 0.1s cubic-bezier(0.17, 0.67, 0.83, 0.67); + --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); --inactive-window-transition: 0.2s ease; - --inactive-titlebar-opacity: 0.6; + --inactive-titlebar-opacity: .6; /** * On macOS and Linux, fading the whole titlebar is the native behavior. * @@ -122,7 +122,7 @@ body { * to account for this platform difference. */ @media (-moz-platform: windows) { - --inactive-titlebar-opacity: 0.75; + --inactive-titlebar-opacity: .75; } @media (prefers-reduced-motion) { --inactive-window-transition: 0s; @@ -132,11 +132,11 @@ body { color: var(--lwt-text-color); } - &[uidensity="compact"] { + &[uidensity=compact] { --urlbar-min-height: max(26px, 1.4em); } - &[uidensity="touch"] { + &[uidensity=touch] { --urlbar-min-height: max(34px, 1.4em); } } @@ -186,9 +186,7 @@ body { :root[lwtheme-image] & { background-image: var(--lwt-header-image), var(--lwt-additional-images); background-repeat: no-repeat, var(--lwt-background-tiling); - background-position: - right top, - var(--lwt-background-alignment); + background-position: right top, var(--lwt-background-alignment); } } @@ -304,21 +302,21 @@ body { } @media (-moz-platform: windows) { - :root:not([sizemode="normal"]) &[type="pre-tabs"] { + :root:not([sizemode=normal]) &[type="pre-tabs"] { display: none; } } @media (-moz-platform: linux) and (-moz-gtk-csd-reversed-placement: 0) { - :root:not([sizemode="normal"]) &[type="pre-tabs"], - :root[gtktiledwindow="true"] &[type="pre-tabs"] { + :root:not([sizemode=normal]) &[type="pre-tabs"], + :root[gtktiledwindow=true] &[type="pre-tabs"] { display: none; } } @media (-moz-gtk-csd-reversed-placement) { - :root:not([sizemode="normal"]) &[type="post-tabs"], - :root[gtktiledwindow="true"] &[type="post-tabs"] { + :root:not([sizemode=normal]) &[type="post-tabs"], + :root[gtktiledwindow=true] &[type="post-tabs"] { display: none; } } @@ -331,8 +329,7 @@ body { /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("sidebar.verticalTabs") { - &[type="pre-tabs"], - &[type="post-tabs"] { + &[type="pre-tabs"], &[type="post-tabs"] { display: none; } } @@ -341,10 +338,7 @@ body { /* Hide the TabsToolbar/nav-bar titlebar controls if the menubar is permanently shown. * (That is, if the menu bar doesn't autohide, and we're not in a fullscreen or * popup window.) */ -:root:not([chromehidden~="menubar"], [inFullscreen]) - #toolbar-menubar[autohide="false"] - ~ :is(#TabsToolbar, #nav-bar) - > :is(.titlebar-buttonbox-container, .titlebar-spacer) { +:root:not([chromehidden~="menubar"], [inFullscreen]) #toolbar-menubar[autohide="false"] ~ :is(#TabsToolbar, #nav-bar) > :is(.titlebar-buttonbox-container, .titlebar-spacer) { display: none; } @@ -353,8 +347,8 @@ body { display: none; } -:root:not([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-restore, -:root:is([sizemode="maximized"], [sizemode="fullscreen"]) .titlebar-max { +:root:not([sizemode=maximized], [sizemode=fullscreen]) .titlebar-restore, +:root:is([sizemode=maximized], [sizemode=fullscreen]) .titlebar-max { display: none; } @@ -363,7 +357,7 @@ body { -moz-default-appearance: -moz-window-button-box; position: relative; - :root:not([customtitlebar], [sizemode="fullscreen"]) & { + :root:not([customtitlebar], [sizemode=fullscreen]) & { display: none; } } @@ -401,7 +395,7 @@ body { } /* Hide menu elements intended for keyboard access support */ -#main-menubar[openedwithkey="false"] .show-only-for-keyboard { +#main-menubar[openedwithkey=false] .show-only-for-keyboard { display: none; } @@ -461,7 +455,7 @@ body { min-height: 0; padding-inline: 6px; - :root[uidensity="compact"] & { + :root[uidensity=compact] & { padding-inline: 2px; } @@ -471,20 +465,14 @@ body { max-height: 4em; :root[sessionrestored] &:not(.instant) { - transition: - min-height 170ms ease-out, - max-height 170ms ease-out, - var(--ext-theme-background-transition); + transition: min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition); - &[collapsed="true"] { - transition: - min-height 170ms ease-out, - max-height 170ms ease-out, - visibility 170ms linear; + &[collapsed=true] { + transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } } - &[collapsed="true"] { + &[collapsed=true] { max-height: 0; &.instant { @@ -495,7 +483,7 @@ body { /* Bookmarks toolbar empty message */ /* If the toolbar is not initialized set a zero width, but retain height. */ - &[collapsed="false"]:not([initialized]) > #personal-toolbar-empty { + &[collapsed=false]:not([initialized]) > #personal-toolbar-empty { visibility: hidden; width: 0; overflow-x: hidden; @@ -522,7 +510,7 @@ body { #fxms-bmb-button-wrapper, toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar, -#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #PlacesToolbar { +#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #PlacesToolbar { display: none; } @@ -616,9 +604,7 @@ menupopup::part(drop-indicator) { background-color: var(--lwt-accent-color); background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-additional-images); background-repeat: no-repeat, var(--lwt-background-tiling); - background-position: - right bottom, - var(--lwt-background-alignment); + background-position: right bottom, var(--lwt-background-alignment); background-position-y: bottom !important; } @@ -629,10 +615,7 @@ menupopup::part(drop-indicator) { :root[lwtheme-image] & { background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image), var(--lwt-additional-images); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); - background-position: - center, - right bottom, - var(--lwt-background-alignment); + background-position: center, right bottom, var(--lwt-background-alignment); } } @@ -642,7 +625,7 @@ menupopup::part(drop-indicator) { align-items: center; margin-inline: 7px; - :root:not([privatebrowsingmode="temporary"]) &, + :root:not([privatebrowsingmode=temporary]) &, #navigator-toolbox:not([tabs-hidden]) #nav-bar > & { display: none; } @@ -650,7 +633,7 @@ menupopup::part(drop-indicator) { #navigator-toolbox[tabs-hidden] #nav-bar > & { margin-inline-end: 12px; - /* Hide the private browsing indicator + /* Hide the private browsing indicator label when vertical tabs are enabled */ > .private-browsing-indicator-label { display: none; @@ -714,7 +697,7 @@ menupopup::part(drop-indicator) { box-shadow: 0 0 1.5px 1px red; &[focused] { - box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4); + box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); } } @@ -757,7 +740,7 @@ menupopup::part(drop-indicator) { list-style-image: url(chrome://global/skin/icons/help.svg); &:hover { - background-color: hsla(0, 0%, 70%, 0.2); + background-color: hsla(0,0%,70%,.2); border-radius: 2px; } } @@ -1026,15 +1009,15 @@ menupopup::part(drop-indicator) { appearance: none; border-style: none; margin: 0; - background-color: rgb(0, 96, 223); - color: rgb(255, 255, 255); + background-color: rgb(0,96,223); + color: rgb(255,255,255); border-radius: 5px; padding: 10px; margin-top: 15px; margin-bottom: 10px; &:hover { - background-color: rgb(0, 62, 170); + background-color: rgb(0,62,170); } } @@ -1257,8 +1240,8 @@ popupnotificationcontent { @media not (prefers-contrast) { /* TODO: Should this be in browser-colors to respect system theming on Linux? */ - --swipe-nav-icon-primary-color: light-dark(#0060df, #00ddff); - --swipe-nav-icon-accent-color: light-dark(#ffffff, #000000); + --swipe-nav-icon-primary-color: light-dark(#0060DF, #00DDFF); + --swipe-nav-icon-accent-color: light-dark(#FFFFFF, #000000); } > svg { diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css index 8cd0d2581b4d..dfa65c91bca8 100644 --- a/browser/themes/shared/contextmenu.css +++ b/browser/themes/shared/contextmenu.css @@ -47,7 +47,7 @@ list-style-image: url("chrome://browser/skin/bookmark-hollow.svg"); } -#context-bookmarkpage[starred="true"] { +#context-bookmarkpage[starred=true] { list-style-image: url("chrome://browser/skin/bookmark.svg"); } diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css index d0bc0e89142e..6c3e1d476481 100644 --- a/browser/themes/shared/controlcenter/panel.css +++ b/browser/themes/shared/controlcenter/panel.css @@ -3,7 +3,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* Hide all conditional elements by default. */ -:is([when-connection], [when-customroot], [when-mixedcontent], [when-ciphers], [when-httpsonlystatus]) { +:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) { display: none; } @@ -143,7 +143,6 @@ /* The protections popup panel header text needs a different calculation because it contains an info button. * icon-full-width is included twice to compensate for the margin-inline-start of the text, * used to center it even if the header includes a info button. See .panel-header-with-info-button */ - /* prettier-ignore */ max-width: calc(var(--popup-width) - var(--arrowpanel-menuitem-margin-inline) * 2 - var(--arrowpanel-header-info-icon-full-width) * 2); @@ -151,7 +150,6 @@ #identity-popup .panel-header > .subviewbutton-back + h1 > span { /* Same idea as above, but in the identity popup when there's a back button. */ - /* prettier-ignore */ max-width: calc(var(--popup-width) - var(--arrowpanel-menuitem-margin-inline) * 2 - var(--arrowpanel-header-back-icon-full-width) * 2); @@ -178,7 +176,7 @@ /* SECURITY */ -#identity-popup[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure, +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, #identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { font-weight: bold; } @@ -210,45 +208,45 @@ min-height: 24px; } -#identity-popup[connection="chrome"] .identity-popup-security-connection { +#identity-popup[connection=chrome] .identity-popup-security-connection { list-style-image: url(chrome://branding/content/icon48.png); } -#identity-popup[connection="file"] .identity-popup-security-connection { +#identity-popup[connection=file] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/page-portrait.svg); } -#identity-popup[connection="associated"] .identity-popup-security-connection { +#identity-popup[connection=associated] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/info.svg); } -#identity-popup[connection^="secure"] .identity-popup-security-connection { +#identity-popup[connection^=secure] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/security.svg); } /* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ -#identity-popup[ciphers="weak"] .identity-popup-security-connection, -#identity-popup[mixedcontent~="passive-loaded"][isbroken] .identity-popup-security-connection { +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/security-warning.svg); -moz-context-properties: fill, fill-opacity; } -#identity-popup[connection="secure-cert-user-overridden"] .identity-popup-security-connection, -#identity-popup[connection="cert-error-page"] .identity-popup-security-connection { +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/security-warning.svg); fill: unset; } -#identity-popup[connection="net-error-page"] .identity-popup-security-connection { +#identity-popup[connection=net-error-page] .identity-popup-security-connection { list-style-image: url(chrome://global/skin/icons/info.svg); fill: unset; } -#identity-popup[mixedcontent~="active-loaded"][isbroken] .identity-popup-security-connection { +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); } -#identity-popup[connection="extension"] .identity-popup-security-connection { +#identity-popup[connection=extension] .identity-popup-security-connection { list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); } @@ -522,7 +520,7 @@ &:hover:active { color: var(--button-text-color-active); - background-color: var(--button-background-color-active); + background-color: var(--button-background-color-active) } } @@ -699,7 +697,7 @@ background-repeat: no-repeat; background-position: center; - fill: light-dark(#0090ed, #80ebff); + fill: light-dark(#0090ED, #80EBFF); } .protections-popup-shim-allow-hint-icon { @@ -732,6 +730,7 @@ margin-top: auto; } + /* Cookie banner state toggles for the popup menu item */ #protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css index deecc7e8f472..dc7f07a75f3d 100644 --- a/browser/themes/shared/customizableui/customizeMode.css +++ b/browser/themes/shared/customizableui/customizeMode.css @@ -7,7 +7,7 @@ /* Customization mode */ :root { - --drag-drop-transition-duration: 0.3s; + --drag-drop-transition-duration: .3s; @media (prefers-reduced-motion: reduce) { --drag-drop-transition-duration: 0s; @@ -78,7 +78,7 @@ toolbar[overflowable][customizing] > .customization-target { align-items: center; flex-shrink: 0; flex-wrap: wrap; - border-top: 1px solid rgba(0, 0, 0, 0.15); + border-top: 1px solid rgba(0,0,0,.15); padding: 10px; > .footer-button, @@ -96,7 +96,7 @@ toolbar[overflowable][customizing] > .customization-target { #customization-palette { padding: 5px 20px 20px; - transition: opacity 0.3s ease-in-out; + transition: opacity .3s ease-in-out; opacity: 0; &:not([hidden]) { @@ -144,7 +144,7 @@ toolbarpaletteitem { > toolbarspring { outline: 1px solid; - opacity: 0.6; + opacity: .6; &[removable="false"] { outline: 1px dashed; @@ -238,7 +238,7 @@ toolbarpaletteitem { &:not([mousedown]):focus-visible { /* Delay adding the focusring back until after the transform transition completes. */ - transition: outline-width 0.01s linear var(--drag-drop-transition-duration); + transition: outline-width .01s linear var(--drag-drop-transition-duration); outline: var(--default-focusring); &[place="toolbar"] { @@ -263,7 +263,8 @@ toolbarpaletteitem { } #PersonalToolbar & toolbarbutton[checked="true"], - toolbar & toolbarbutton[checked="true"] > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { + toolbar & toolbarbutton[checked="true"] + > :where(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) { background-color: revert !important; } @@ -271,7 +272,7 @@ toolbarpaletteitem { > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, > #search-container, > toolbaritem.toolbaritem-combined-buttons { - transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important; + transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important; } &[mousedown] { @@ -413,9 +414,7 @@ toolbarpaletteitem { @media (-moz-platform: macos) { /* Native styling adds more 'oompf' to the popup box-shadow, so simulate that * as best as we can here: */ - box-shadow: - 0 0 1px hsla(0, 0%, 0%, 0.3), - 0 4px 10px hsla(0, 0%, 0%, 0.3); + box-shadow: 0 0 1px hsla(0,0%,0%,.3), 0 4px 10px hsla(0,0%,0%,.3); appearance: none; border-radius: var(--arrowpanel-border-radius); } @@ -423,7 +422,7 @@ toolbarpaletteitem { @media not (-moz-platform: macos) { border: 1px solid var(--arrowpanel-border-color); margin: 0; - box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.2); + box-shadow: 0 0 4px hsla(0,0%,0%,.2); } } } @@ -658,28 +657,10 @@ toolbarpaletteitem { } @keyframes kcode { - 0% { - border-color: rgb(195, 17, 206); - color: rgb(195, 17, 206); - } - 20% { - border-color: rgb(252, 82, 27); - color: rgb(252, 82, 27); - } - 40% { - border-color: rgb(251, 179, 0); - color: rgb(251, 179, 0); - } - 60% { - border-color: rgb(105, 211, 0); - color: rgb(105, 211, 0); - } - 80% { - border-color: rgb(20, 155, 249); - color: rgb(20, 155, 249); - } - 100% { - border-color: rgb(195, 17, 206); - color: rgb(195, 17, 206); - } + 0% { border-color: rgb(195,17,206); color: rgb(195,17,206); } + 20% { border-color: rgb(252,82,27); color: rgb(252,82,27); } + 40% { border-color: rgb(251,179,0); color: rgb(251,179,0); } + 60% { border-color: rgb(105,211,0); color: rgb(105,211,0); } + 80% { border-color: rgb(20,155,249); color: rgb(20,155,249); } + 100% { border-color: rgb(195,17,206); color: rgb(195,17,206); } } diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css index c05ba693e3a8..d6f1d41f4c8d 100644 --- a/browser/themes/shared/customizableui/panelUI-shared.css +++ b/browser/themes/shared/customizableui/panelUI-shared.css @@ -27,10 +27,10 @@ --panel-and-palette-icon-size: 16px; &:not([lwtheme]) { - --panel-separator-zap-gradient: linear-gradient(90deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%); } - &[uidensity="compact"] { + &[uidensity=compact] { --arrowpanel-menuitem-margin-inline: 4px; --arrowpanel-menuitem-padding-block: 4px; --panel-separator-margin-horizontal: 4px; @@ -55,7 +55,8 @@ menupopup { /* The min-height is calculated with the separator's horizontal margin rather * than the vertical, to let the back icon have even spacing all around * while being aligned with the separator. */ - --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)); + --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width) + + (var(--panel-separator-margin-horizontal) * 2)); } #PanelUI-menu-button { @@ -253,7 +254,7 @@ panelview { border-radius: var(--toolbarbutton-border-radius); flex-shrink: 0; - &[disabled="true"] { + &[disabled=true] { visibility: hidden; } @@ -285,8 +286,8 @@ panelview { display: none; } -#wrapper-edit-controls:is([place="palette"], [place="panel"]) > #edit-controls, -#wrapper-zoom-controls:is([place="palette"], [place="panel"]) > #zoom-controls, +#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls, +#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls, :is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons { margin: var(--arrowpanel-menuitem-margin); } @@ -405,7 +406,7 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result { background-image: url("chrome://global/skin/icons/delete.svg"); background-size: contain; -moz-context-properties: fill; - fill: #fff; + fill: #FFF; animation: none; } } @@ -473,11 +474,10 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result { @media (prefers-reduced-motion: no-preference) { #confirmation-hint-message-container { - transform: scale(0.8); + transform: scale(.8); opacity: 0; - transition: - transform 120ms cubic-bezier(0.25, 1.27, 0.35, 1.18), - opacity 60ms linear; + transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18), + opacity 60ms linear; #confirmation-hint-checkmark-animation-container[animate] + & { transform: scale(1); @@ -517,7 +517,10 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result { min-width: calc(var(--menu-panel-width) + 32px); } -.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton > .toolbarbutton-icon { +.toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] +) > toolbarbutton > .toolbarbutton-icon { min-width: 0; min-height: 0; margin: 0; @@ -536,8 +539,8 @@ menupopup[emptyplacesresult] > .hide-if-empty-places-result { transform: scale(1); } 100% { - opacity: 0; - transform: scale(0.5); + opacity: 0 ; + transform: scale(.5); } } @@ -621,12 +624,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg /* FxAccount indicator bits. */ @keyframes syncRotate { - from { - transform: rotate(0); - } - to { - transform: rotate(360deg); - } + from { transform: rotate(0); } + to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { @@ -672,7 +671,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg } #PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button { - display: none; + display: none } :root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button { @@ -723,8 +722,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg font-weight: 600; } -:root[fxadisabled="true"] #appMenu-fxa-status2, -:root[fxadisabled="true"] #appMenu-fxa-separator { +:root[fxadisabled=true] #appMenu-fxa-status2, +:root[fxadisabled=true] #appMenu-fxa-separator { display: none; } @@ -821,6 +820,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg } } + /* Firefox Account Toolbar Panel */ #fxa-avatar-image { @@ -944,9 +944,9 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg font-weight: lighter; @media (-moz-platform: linux) { - /* Use 300 on Linux because 100 is too light (lacks contrast with + /* Use 300 on Linux because 100 is too light (lacks contrast with * the background) for some fonts in combination with anti-aliasing. */ - font-weight: 300; + font-weight: 300; } } @@ -1041,23 +1041,23 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { } .sendToDevice-device { - &[clientType="phone"] { + &[clientType=phone] { list-style-image: url("chrome://browser/skin/device-phone.svg"); } - &[clientType="tablet"] { + &[clientType=tablet] { list-style-image: url("chrome://browser/skin/device-tablet.svg"); } - &[clientType="desktop"] { + &[clientType=desktop] { list-style-image: url("chrome://browser/skin/device-desktop.svg"); } - &[clientType="tv"] { + &[clientType=tv] { list-style-image: url("chrome://browser/skin/device-tv.svg"); } - &[clientType="vr"] { + &[clientType=vr] { list-style-image: url("chrome://browser/skin/device-vr.svg"); } @@ -1138,8 +1138,7 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { display: block; } -#PanelUI-remotetabs[mainview] { - /* panel anchored to toolbar button might be too skinny */ +#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ min-width: 19em; .PanelUI-remotetabs-notabsforclient-label { @@ -1149,7 +1148,6 @@ panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow { /* Work around bug 1224412 - these boxes will cause scrollbars to appear when the panel is anchored to a toolbar button. */ - /* prettier-ignore */ #PanelUI-remotetabs-setupsync, #PanelUI-remotetabs-syncdisabled, #PanelUI-remotetabs-reauthsync, @@ -1343,7 +1341,7 @@ panelview .toolbarbutton-1, } #appMenu-zoomReset-button2 > .toolbarbutton-text, -#appMenu-fullscreen-button2 > .toolbarbutton-icon { +#appMenu-fullscreen-button2 > .toolbarbutton-icon { border-radius: 2px; } @@ -1475,7 +1473,10 @@ panelview .toolbarbutton-1 { panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, - .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton + .toolbaritem-combined-buttons:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton ) { color: var(--button-text-color-ghost); background-color: var(--button-background-color-ghost); @@ -1498,7 +1499,7 @@ panelview .toolbarbutton-1 { &:active { color: var(--button-text-color-ghost-active); background-color: var(--button-background-color-ghost-active); - box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; } } } @@ -1533,9 +1534,7 @@ panelview .toolbarbutton-1 { } .PanelUI-tabitem-container { - transition: - opacity 0.2s ease, - transform 0.2s ease; + transition: opacity 0.2s ease, transform 0.2s ease; &.tabitem-removed { opacity: 0; @@ -1554,22 +1553,23 @@ panelview .toolbarbutton-1 { } toolbarbutton[itemtype="showmorebutton"], -toolbarbutton[itemtype="showinactivebutton"] { - padding-inline-start: 0; + toolbarbutton[itemtype="showinactivebutton"] { + padding-inline-start: 0; - > label { - /* Needed to properly left-align with the rest of list */ - margin-inline-start: -8px; + > label { + /* Needed to properly left-align with the rest of list */ + margin-inline-start: -8px; + } } -} .remote-tabs-close-button { .toolbarbutton-icon { - /* To match the nav elements in the panel */ - -moz-context-properties: fill, fill-opacity; - fill: currentColor; - fill-opacity: 0.6; - display: flex; + /* To match the nav elements in the panel */ + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.6; + display: flex; + } } @@ -1579,7 +1579,10 @@ toolbarbutton[itemtype="showinactivebutton"] { } .toolbaritem-combined-buttons { - &:where(:not(.unified-extensions-item)):is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton { + &:where(:not(.unified-extensions-item)):is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton { border: 0; margin: 0; flex: 1; @@ -1592,16 +1595,22 @@ toolbarbutton[itemtype="showinactivebutton"] { display: none; } - &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] { + &:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > toolbarbutton:not(.toolbarbutton-1)[disabled] { opacity: 0.4; /* Override toolbarbutton.css which sets the color to GrayText */ color: inherit; } - &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > separator { + &:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ) > separator { appearance: none; align-items: stretch; - margin: 0.5em 0; + margin: .5em 0; width: 1px; height: auto; background: var(--panel-separator-color); @@ -1610,7 +1619,10 @@ toolbarbutton[itemtype="showinactivebutton"] { transition-timing-function: ease; } - &:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]):hover > separator { + &:is( + :not([cui-areatype="toolbar"]), + [overflowedItem=true] + ):hover > separator { margin: 0; } } @@ -1629,7 +1641,7 @@ toolbarbutton[itemtype="showinactivebutton"] { .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { text-align: start; - padding-inline-start: 0.5em; + padding-inline-start: .5em; } > #stop-reload-button > .toolbarbutton-1 { @@ -1700,7 +1712,7 @@ toolbarbutton[itemtype="showinactivebutton"] { border: 1px solid rgba(110, 110, 110, 0.4); border-radius: 50%; margin: 1px 5px; - background-color: rgba(150, 150, 150, 0.2); + background-color: rgba(150,150,150,0.2); } > .radio-check[selected] { @@ -1841,7 +1853,8 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { &.panel-header-with-info-button > .subviewbutton-back + h1 { margin-inline-start: 0; - margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) - var(--arrowpanel-header-info-icon-full-width)); + margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width) + - var(--arrowpanel-header-info-icon-full-width)); } &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 { @@ -1887,16 +1900,16 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { #info-message-container { height: 260px; overflow: hidden; - transition: margin-bottom 0.25s; + transition: margin-bottom .25s; } #info-message-container[disabled] { /* Offset the height when hidden. This makes the panel content * cover the info message and reveal it as it slides down, rather * than the info message growing in height. */ - margin-bottom: -260px; - pointer-events: none; - } + margin-bottom: -260px; + pointer-events: none; + } #info-message-container[disabled] #protections-popup-message { opacity: 0; @@ -1908,7 +1921,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { align-items: flex-end; height: calc(100% - 20px); margin: 10px; - transition: opacity 0.25s; + transition: opacity .25s; opacity: 1; background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg); background-repeat: no-repeat; @@ -1956,11 +1969,11 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { &[viewId="PanelUI-profiler"] { --panel-width: 319px; - } + } - /* Override themes for the Pocket panel, because the Pocket + /* Override themes for the Pocket panel, because the Pocket panel currently only supports dark and light themes. */ - @media not (prefers-color-scheme: dark) { + @media not (prefers-color-scheme: dark){ &[viewId="PanelUI-savetopocket"] { --arrowpanel-background: #fbfbfb; } @@ -1976,7 +1989,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd); color: #fff; - &:-moz-locale-dir(rtl) { + &:-moz-locale-dir(rtl) { background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd); } @@ -1998,16 +2011,15 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { "false". When the DOM is being initialized it is set to "false" so that animations do not run. */ &[animationready="true"] #PanelUI-profiler-info { - transition: - margin-block-end 250ms, - opacity 250ms; + transition: margin-block-end 250ms, opacity 250ms; } } #PanelUI-profiler-info { min-height: 180px; padding: 0 15px 15px; - background: top 10px right no-repeat url("chrome://browser/skin/profiler-popup-backdrop.png"); + background: top 10px right no-repeat + url("chrome://browser/skin/profiler-popup-backdrop.png"); opacity: 1; } @@ -2045,7 +2057,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { } #PanelUI-profiler-content-edit-settings { - font-size: 0.9em; + font-size: .9em; } .PanelUI-profiler-content-label { @@ -2054,7 +2066,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { #PanelUI-profiler-content-description { margin-block: 4px; - font-size: 0.9em; + font-size: .9em; color: var(--text-color-deemphasized); } @@ -2129,7 +2141,7 @@ radiogroup:focus-visible > .subviewradio[focused="true"] { /* Web-extension pop-ups */ -.cui-widget-panelview[id^="PanelUI-webext-"] { +.cui-widget-panelview[id^=PanelUI-webext-] { border-radius: var(--arrowpanel-border-radius); } diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css index e3c557873e71..ea762166d867 100644 --- a/browser/themes/shared/downloads/download-blockedStates.css +++ b/browser/themes/shared/downloads/download-blockedStates.css @@ -16,14 +16,14 @@ #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { background-image: url("chrome://global/skin/icons/error.svg"); -moz-context-properties: fill; - fill: light-dark(#e22850, #ff9aa2); + fill: light-dark(#e22850, #FF9AA2); } #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { background-image: url("chrome://global/skin/icons/info-filled.svg"); -moz-context-properties: fill; - fill: light-dark(#0090ed, #80ebff); + fill: light-dark(#0090ED, #80EBFF); } .downloadsPanel-blockedSubview-image { @@ -43,7 +43,7 @@ #downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image, #downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image, #downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge, -#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { +#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { -moz-context-properties: fill; fill: #ffbf00; background-image: url("chrome://global/skin/icons/warning.svg"); diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css index 3d244e4a20d8..3b894e09ccd8 100644 --- a/browser/themes/shared/downloads/indicator.css +++ b/browser/themes/shared/downloads/indicator.css @@ -105,7 +105,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads } #downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { - background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; fill: var(--panel-banner-item-info-icon-bgcolor); } @@ -116,7 +116,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; - fill: light-dark(rgb(226, 40, 80), rgb(255, 132, 138)); + fill: light-dark(rgb(226,40,80), rgb(255,132,138)); } #downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { @@ -179,7 +179,7 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads transform: translateX(0); } #downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { - stroke: currentColor; + stroke: currentColor; } #downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { @@ -202,12 +202,10 @@ toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads animation-timing-function: steps(18); transform: translateX(0); } - 14.28% { - /* 18th frame (18/126) */ + 14.28% { /* 18th frame (18/126) */ transform: translateX(calc(18 * -20px)); } - 93.65% { - /* Wait 100 frames of time, but resume from 18th frame (118/126) */ + 93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */ animation-timing-function: steps(8); transform: translateX(calc(18 * -20px)); } diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css index e81b2dbc2b6e..8d15d8cfee54 100644 --- a/browser/themes/shared/downloads/progressmeter.css +++ b/browser/themes/shared/downloads/progressmeter.css @@ -7,7 +7,7 @@ :root { --download-progress-fill-color: var(--toolbarbutton-icon-fill-attention); --download-progress-paused-color: GrayText; - --download-progress-flare-color: rgba(255, 255, 255, 0.75); + --download-progress-flare-color: rgba(255,255,255,0.75); } @media (prefers-color-scheme: dark) { @@ -61,14 +61,11 @@ Create a gradient with 2 identical patterns, and enlarge the size to 200%. This allows us to animate background-position with percentage. */ background-color: var(--download-progress-fill-color); - background-image: linear-gradient( - 90deg, - transparent 0%, - var(--download-progress-flare-color) 25%, - transparent 50%, - var(--download-progress-flare-color) 75%, - transparent 100% - ); + background-image: linear-gradient(90deg, transparent 0%, + var(--download-progress-flare-color) 25%, + transparent 50%, + var(--download-progress-flare-color) 75%, + transparent 100%); background-blend-mode: normal; background-size: 200% 100%; animation: downloadProgressSlideX 1.5s linear infinite; diff --git a/browser/themes/shared/formautofill-notification.css b/browser/themes/shared/formautofill-notification.css index 2083dbe71394..175ad229ea25 100644 --- a/browser/themes/shared/formautofill-notification.css +++ b/browser/themes/shared/formautofill-notification.css @@ -174,6 +174,7 @@ } } + /* Default size for input fields in address edit doorhanger */ .address-edit-notification-content { :is(input, textarea) { diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css index 84fad49a26e1..fab73b174f53 100644 --- a/browser/themes/shared/identity-block/identity-block.css +++ b/browser/themes/shared/identity-block/identity-block.css @@ -46,14 +46,14 @@ outline: var(--toolbarbutton-outline); outline-offset: var(--toolbarbutton-outline-offset); - &:hover:not([open="true"]) { + &:hover:not([open=true]) { background-color: var(--urlbar-box-hover-bgcolor); color: var(--urlbar-box-hover-text-color); outline-color: var(--toolbarbutton-hover-outline-color); } &:hover:active, - &[open="true"] { + &[open=true] { background-color: var(--urlbar-box-active-bgcolor); color: var(--urlbar-box-hover-text-color); outline-color: var(--toolbarbutton-active-outline-color); @@ -201,6 +201,7 @@ fill: unset; } + #identity-box[pageproxystate="valid"].notSecure #identity-icon, #identity-box[pageproxystate="valid"].mixedActiveContent #identity-icon, #identity-box[pageproxystate="valid"].httpsOnlyErrorPage #identity-icon { @@ -215,7 +216,7 @@ display: none; } -#identity-permission-box[open="true"], +#identity-permission-box[open=true], #identity-permission-box[hasPermissions], #identity-permission-box[hasSharingIcon] { display: flex; diff --git a/browser/themes/shared/migration/migration-wizard.css b/browser/themes/shared/migration/migration-wizard.css index 755533bee21d..9c24eb8a37de 100644 --- a/browser/themes/shared/migration/migration-wizard.css +++ b/browser/themes/shared/migration/migration-wizard.css @@ -13,7 +13,7 @@ } h1 { - font-size: var(--embedded-wizard-header-font-size, 1.3em); + font-size: var(--embedded-wizard-header-font-size, 1.30em); font-weight: var(--embedded-wizard-header-font-weight, normal); margin-block: var(--embedded-wizard-header-margin-block, 0 16px); min-height: 1em; @@ -156,15 +156,15 @@ div[name="page-selection"]:not([show-import-all]) summary { display: none; } -div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) { +div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) { margin-inline: var(--resource-type-label-margin-inline, 24px 0); } -div[name="page-selection"][show-import-all] #select-all { +div[name="page-selection"][show-import-all] #select-all { display: flex; } -div[name="page-selection"][show-import-all][hide-select-all] #select-all { +div[name="page-selection"][show-import-all][hide-select-all] #select-all { display: none; } @@ -239,10 +239,9 @@ summary { .resource-progress-group { display: grid; grid-template-columns: min-content auto; - grid-template-areas: - "icon type" - "icon status" - "icon support"; + grid-template-areas: "icon type" + "icon status" + "icon support"; align-items: center; justify-items: start; } @@ -361,8 +360,8 @@ summary { * Stroke and fill colours were sampled from built-in dark and light theme * from Chrome on Windows */ - fill: light-dark(#474747, #c7c7c7); - stroke: light-dark(#474747, #c7c7c7); + fill: light-dark(#474747, #C7C7C7); + stroke: light-dark(#474747, #C7C7C7); } .no-browsers-found-message { @@ -386,7 +385,7 @@ summary { div[name="page-selection"]:not([no-resources]) .no-resources-found, div[name="page-selection"]:not([no-permissions]) .no-permissions-message, -div[name="page-selection"]:is([no-resources], [no-permissions]) .hide-on-error, +div[name="page-selection"]:is([no-resources],[no-permissions]) .hide-on-error, div[name="page-selection"]:not([file-import-error]) .file-import-error { display: none; } @@ -398,9 +397,8 @@ div[name="page-selection"][show-import-all] .resource-selection-details { .resource-selection-details > summary { list-style: none; display: grid; - grid-template-areas: - "a b" - "c b"; + grid-template-areas: "a b" + "c b"; margin-block: 16px 0; } @@ -409,7 +407,7 @@ div[name="page-selection"][show-import-all] .resource-selection-details { } p.migration-wizard-subheader { - font-size: var(--embedded-wizard-subheader-font-size, 0.85em); + font-size: var(--embedded-wizard-subheader-font-size, .85em); font-weight: var(--embedded-wizard-subheader-font-weight, 400); margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px); line-height: 1.2em; diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css index 086336bbfcd3..f17b7d64f887 100644 --- a/browser/themes/shared/notification-icons.css +++ b/browser/themes/shared/notification-icons.css @@ -13,12 +13,12 @@ border-radius: var(--urlbar-icon-border-radius); &:hover { - background-color: hsla(0, 0%, 70%, 0.2); + background-color: hsla(0,0%,70%,.2); } &:hover:active, &[open] { - background-color: hsla(0, 0%, 70%, 0.3); + background-color: hsla(0,0%,70%,.3); } } @@ -158,6 +158,7 @@ } } + .screen-icon { list-style-image: url(chrome://browser/skin/notification-icons/screen.svg); @@ -249,24 +250,16 @@ list-style-image: url("chrome://browser/skin/drm-icon.svg"); } -.notification-anchor-icon[animate="true"], -#eme-notification-icon[firstplay="true"] { +.notification-anchor-icon[animate=true], +#eme-notification-icon[firstplay=true] { animation: emeTeachingMoment 0.2s linear 0s 5 normal; } @keyframes emeTeachingMoment { - 0% { - transform: translateX(0); - } - 25% { - transform: translateX(3px); - } - 75% { - transform: translateX(-3px); - } - 100% { - transform: translateX(0); - } + 0% {transform: translateX(0); } + 25% {transform: translateX(3px) } + 75% {transform: translateX(-3px) } + 100% { transform: translateX(0); } } /* INSTALL ADDONS */ diff --git a/browser/themes/shared/pageInfo.css b/browser/themes/shared/pageInfo.css index eac8b0b677eb..04f9171592ff 100644 --- a/browser/themes/shared/pageInfo.css +++ b/browser/themes/shared/pageInfo.css @@ -96,12 +96,12 @@ } #viewGroup > radio:hover { - background-color: #e0e8f6; + background-color: #E0E8F6; color: black; } #viewGroup > radio[selected="true"] { - background-color: #c1d2ee; + background-color: #C1D2EE; color: black; } @@ -128,9 +128,9 @@ } @media (-moz-mac-big-sur-theme: 0) { - #viewGroup > radio[selected="true"], - #viewGroup > toolbarbutton[checked="true"] { - color: #fff !important; + #viewGroup > radio[selected=true], + #viewGroup > toolbarbutton[checked=true] { + color: #FFF !important; text-shadow: rgba(0, 0, 0, 0.4) 0 1px; } } @@ -138,7 +138,7 @@ /* Misc */ tree { - margin: 0.5em; + margin: .5em; } html|input { @@ -152,7 +152,7 @@ html|input.header { } #imagecontainerbox { - margin: 0.5em; + margin: .5em; background: white; overflow: auto; border: 1px solid ThreeDLightShadow; @@ -200,7 +200,7 @@ html|input:disabled { @media not (-moz-platform: macos) { #mediaSplitter { - height: 0.8em; + height: .8em; } } @@ -222,7 +222,7 @@ treechildren::-moz-tree-cell-text(broken) { #permList { appearance: auto; -moz-default-appearance: listbox; - margin: 0.5em; + margin: .5em; overflow: auto; color: FieldText; } diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css index 10c407df5a0c..bb4973f446b8 100644 --- a/browser/themes/shared/places/sidebar.css +++ b/browser/themes/shared/places/sidebar.css @@ -35,7 +35,15 @@ color: var(--lwt-sidebar-text-color); color-scheme: light; - scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3)); + scrollbar-color: + light-dark( + rgba(204,204,204,.5), + rgba(249,249,250,.4) + ) + light-dark( + rgba(230,230,235,.5), + rgba(20,20,25,.3) + ); } .sidebar-panel[lwt-sidebar="dark"] { @@ -44,7 +52,7 @@ .sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren { &::-moz-tree-row(selected) { - background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); + background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1)); } &::-moz-tree-image(selected), @@ -108,8 +116,8 @@ } @media (-moz-platform: windows) { - :root[uidensity="touch"] #search-box, - :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { min-height: 32px; } @@ -118,7 +126,7 @@ padding: 0 4px; } - .sidebar-placesTreechildren::-moz-tree-cell(leaf), + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , .sidebar-placesTreechildren::-moz-tree-image(leaf) { cursor: pointer; } @@ -168,12 +176,12 @@ margin-inline-start: 4px; } - :root[uidensity="touch"] #search-box, - :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { + :root[uidensity=touch] #search-box, + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { min-height: 32px; } - .sidebar-placesTreechildren::-moz-tree-cell(leaf), + .sidebar-placesTreechildren::-moz-tree-cell(leaf) , .sidebar-placesTreechildren::-moz-tree-image(leaf) { cursor: pointer; } @@ -195,7 +203,7 @@ font-size: 1.0909rem; } - :root[uidensity="touch"] .sidebar-placesTreechildren::-moz-tree-row { + :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row { min-height: 32px; } diff --git a/browser/themes/shared/preferences/applications.css b/browser/themes/shared/preferences/applications.css index e3ead0f509cb..36f871fae1ca 100644 --- a/browser/themes/shared/preferences/applications.css +++ b/browser/themes/shared/preferences/applications.css @@ -20,7 +20,6 @@ menuitem[appHandlerIcon="save"] > .menu-icon { @media not (-moz-platform: linux) { content: url("chrome://browser/skin/preferences/saveFile.png"); } - /* prettier-ignore */ @media (-moz-platform: linux) { content: image-set( "moz-icon://stock/document-save?size=16" 1x, diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css index 44b4df827ba1..9cc63865755e 100644 --- a/browser/themes/shared/preferences/containers-dialog.css +++ b/browser/themes/shared/preferences/containers-dialog.css @@ -37,11 +37,11 @@ radio > .userContext-icon { block-size: 22px; } -.radio-buttons > radio[selected="true"] { +.radio-buttons > radio[selected=true] { outline-color: var(--in-content-text-color); } -.radio-buttons > radio[focused="true"] { +.radio-buttons > radio[focused=true] { outline-color: var(--color-accent-primary); } diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css index 9fdbb86771c9..61825811ec13 100644 --- a/browser/themes/shared/preferences/fxaPairDevice.css +++ b/browser/themes/shared/preferences/fxaPairDevice.css @@ -43,7 +43,7 @@ width: 200px; background-size: contain; image-rendering: -moz-crisp-edges; - transition: filter 250ms cubic-bezier(0.07, 0.95, 0, 1); + transition: filter 250ms cubic-bezier(.07,.95,0,1); } #qrWrapper:not([pairing-status="ready"]) #qrContainer { @@ -73,7 +73,7 @@ height: 200px; width: 200px; content: ""; - transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1); + transition: opacity 250ms cubic-bezier(.07,.95,0,1); will-change: transform; margin-inline: auto; } @@ -91,7 +91,7 @@ position: absolute; inset: 0; margin-inline: auto; - transition: opacity 250ms cubic-bezier(0.07, 0.95, 0, 1); + transition: opacity 250ms cubic-bezier(.07,.95,0,1); cursor: pointer; } @@ -99,7 +99,7 @@ text-align: center; user-select: none; display: block; - color: #2484c6; + color: #2484C6; cursor: pointer; } @@ -109,7 +109,7 @@ background-image: url("chrome://global/skin/icons/reload.svg"); background-size: contain; -moz-context-properties: fill; - fill: #2484c6; + fill: #2484C6; } @keyframes spin { diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css index 0b5810612705..78cf46723f18 100644 --- a/browser/themes/shared/preferences/preferences.css +++ b/browser/themes/shared/preferences/preferences.css @@ -32,6 +32,7 @@ vertical-align: top; /* See bug 1606130 */ display: flex; flex-direction: column; + } /* @@ -121,7 +122,7 @@ label { } .tip-caption { - font-size: 0.9em; + font-size: .9em; color: var(--text-color-deemphasized); } @@ -613,7 +614,7 @@ html|dialog { html|dialog::backdrop, .dialogOverlay[topmost="true"] { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0,0,0,0.5); } html|dialog, @@ -652,7 +653,7 @@ html|dialog, } .dialogTitleBar { - padding: 0.4em 0.2em; + padding: .4em .2em; border-bottom: 1px solid var(--in-content-border-color); } @@ -738,7 +739,7 @@ html|dialog, } .fxaProfileImage.actionable:hover { - border-color: #0095dd; + border-color: #0095DD; } .fxaProfileImage.actionable:hover:active { @@ -806,7 +807,7 @@ html|dialog, .fxaLoginRejectedWarning { list-style-image: url(chrome://global/skin/icons/warning.svg); -moz-context-properties: fill; - fill: #ffbf00; + fill: #FFBF00; margin-inline: 4px 8px; } @@ -1030,16 +1031,16 @@ dialog > .sync-engines-list + hbox { max-width: 10em; font-size: 1rem; position: absolute; - padding: 0 0.7em; + padding: 0 .7em; background-color: #ffe900; color: #000; border: 1px solid #d7b600; margin-top: -18px; - opacity: 0.85; + opacity: .85; } .search-tooltip:hover { - opacity: 0.1; + opacity: .1; } .search-tooltip::before { @@ -1088,7 +1089,7 @@ dialog > .sync-engines-list + hbox { display: none !important; } -menulist[indicator="true"] > menupopup menuitem:not([image]) > .menu-icon { +menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-icon { display: flex; min-width: auto; /* Override the min-width defined in menu.css */ margin-inline-end: 6px; @@ -1096,7 +1097,7 @@ menulist[indicator="true"] > menupopup menuitem:not([image]) > .menu-icon { height: 10px; } -menulist[indicator="true"] > menupopup menuitem[indicator="true"]:not([image]) > .menu-icon { +menulist[indicator=true] > menupopup menuitem[indicator=true]:not([image]) > .menu-icon { list-style-image: url(chrome://browser/skin/preferences/search-arrow-indicator.svg); &:-moz-locale-dir(rtl) { @@ -1222,8 +1223,8 @@ richlistitem .text-link:hover { align-items: baseline; } -.checkbox-row input[type="checkbox"] { - translate: 0 2px; +.checkbox-row input[type=checkbox] { + translate: 0 2px } .checkbox-row a { @@ -1287,7 +1288,7 @@ richlistitem .text-link:hover { } #solo-ai { - background-image: url("chrome://browser/skin/preferences/solo-ai-logo.svg"); + background-image: url("chrome://browser/skin/preferences/solo-ai-logo.svg") } /* @@ -1339,7 +1340,7 @@ richlistitem .text-link:hover { } .qr-code-box-title { - font-size: 0.87em; + font-size: .87em; font-weight: normal; text-align: center; @@ -1355,7 +1356,7 @@ richlistitem .text-link:hover { .simple .qr-code-box { padding-inline: var(--space-xlarge); - padding-block: 20px; + padding-block: 20px } .simple .qr-code-box-image { @@ -1363,12 +1364,12 @@ richlistitem .text-link:hover { } #moreFromMozillaCategory .qr-code-link { - font-size: 0.87em; + font-size: .87em; } @media (prefers-color-scheme: dark) { .qr-code-box:not([hidden="true"]) { - background-color: rgba(91, 91, 102, 0.45); + background-color: rgba(91,91,102,0.45); } .qr-code-box-title { @@ -1424,14 +1425,14 @@ richlistitem .text-link:hover { border: 1px solid var(--in-content-box-border-color); border-radius: 4px; - box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0 2px 0 rgba(0,0,0,0.2); transform: scaleX(1); - content: url("chrome://browser/content/preferences/web-appearance-light.svg"); + content: url("chrome://browser/content/preferences/web-appearance-light.svg") } .web-appearance-choice.dark img { - content: url("chrome://browser/content/preferences/web-appearance-dark.svg"); + content: url("chrome://browser/content/preferences/web-appearance-dark.svg") } .web-appearance-choice img:-moz-locale-dir(rtl) { diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css index ee0302ac842d..4d0f6c26f52e 100644 --- a/browser/themes/shared/preferences/privacy.css +++ b/browser/themes/shared/preferences/privacy.css @@ -330,7 +330,7 @@ } #openSearchEnginePreferences { - margin-block-start: 0.5em; + margin-block-start: .5em; } #firefoxSuggestDataCollectionSearchToggle, diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css index f8085d403472..3284fe0cc916 100644 --- a/browser/themes/shared/preferences/search.css +++ b/browser/themes/shared/preferences/search.css @@ -14,7 +14,7 @@ } #engineList { - margin: 0.5em 0; + margin: .5em 0; } #engineList treechildren::-moz-tree-image(engineName) { @@ -66,7 +66,7 @@ margin-bottom: 1em; } -#removeEngineButton { +#removeEngineButton{ margin-inline-end: 0; } diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css index f120763b7071..3a6f822d38e7 100644 --- a/browser/themes/shared/preferences/translations.css +++ b/browser/themes/shared/preferences/translations.css @@ -4,7 +4,7 @@ #translations-settings-header { margin-top: var(--space-xlarge); - margin-bottom: calc(2 * var(--space-small)); + margin-bottom: calc( 2 * var(--space-small)); } .translations-settings-manage-section { @@ -12,7 +12,7 @@ } .translations-settings-manage-language { - margin: 0 calc(2 * var(--space-small)); + margin: 0 calc( 2 * var(--space-small)); display: flex; flex-direction: row; justify-content: space-between; @@ -21,11 +21,9 @@ .translations-settings-manage-section-info { display: flex; flex-direction: column; - h2, - p, - a { + h2, p, a { display: block; - margin: var(--space-small) calc(2 * var(--space-small)); + margin: var(--space-small) calc( 2 * var(--space-small)); } a { display: block; @@ -34,8 +32,8 @@ .translations-settings-languages-card { flex-direction: column; - max-height: calc(14 * var(--space-xlarge)); - padding-inline: calc(2 * var(--space-small)); + max-height: calc( 14 * var(--space-xlarge)); + padding-inline: calc( 2 * var(--space-small)); &[hidden] { display: none; @@ -46,7 +44,7 @@ } .translations-settings-language-header { - margin: calc(2 * var(--space-small)) 0; + margin: calc( 2 * var(--space-small)) 0; font-size: var(--font-size-root); font-weight: var(--font-weight-bold); } @@ -62,7 +60,7 @@ padding: var(--space-small) 0; border-top: 1px solid var(--in-content-border-color); label { - margin: 0 calc(2 * var(--space-small)); + margin: 0 calc( 2 * var(--space-small)); } } .translations-settings-language-error { diff --git a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css index 76d1f8e51670..f8b3e2039e74 100644 --- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css +++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css @@ -5,18 +5,18 @@ @import url("chrome://global/skin/in-content/info-pages.css"); @media not (prefers-contrast) { - html.private { - --in-content-page-color: white; - --in-content-text-color: white; - --in-content-page-background: #25003e; - --link-color: white; - --link-color-hover: white; - --link-color-active: white; - --in-content-banner-background: #f9f9fe; - --in-content-banner-text-color: #0c0c0d; - --in-content-button-background-hover: rgba(12, 12, 13, 0.1); - --in-content-button-background-active: rgba(12, 12, 13, 0.15); - } +html.private { + --in-content-page-color: white; + --in-content-text-color: white; + --in-content-page-background: #25003e; + --link-color: white; + --link-color-hover: white; + --link-color-active: white; + --in-content-banner-background: #f9f9fe; + --in-content-banner-text-color: #0c0c0d; + --in-content-button-background-hover: rgba(12,12,13,.1); + --in-content-button-background-active: rgba(12,12,13,.15); +} } /** @@ -63,8 +63,7 @@ p { } .logo { - background: image-set(url("chrome://branding/content/about-logo-private.png"), url("chrome://branding/content/about-logo-private@2x.png") 2x) no-repeat center - center; + background: image-set(url("chrome://branding/content/about-logo-private.png"), url('chrome://branding/content/about-logo-private@2x.png') 2x) no-repeat center center; background-size: 96px; display: inline-block; height: 96px; @@ -107,12 +106,12 @@ p { } .promo.top { - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, .2); position: absolute; top: 0; left: 0; right: 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, .3); } .promo.top .promo-image-large { @@ -166,9 +165,7 @@ p { background-size: 24px; border: solid 1px rgba(249, 249, 250, 0.2); border-radius: 3px; - box-shadow: - 0 1px 4px 0 rgba(12, 12, 13, 0.2), - 0 0 0 1px rgba(0, 0, 0, 0.15); + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: text; font-size: 15px; font-weight: normal; @@ -184,9 +181,7 @@ p { .search-handoff-button.focused:not(.disabled) { border: solid 1px #0060df; - box-shadow: - 0 0 0 1px #0060df, - 0 0 0 4px rgba(0, 96, 223, 0.3); + box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3); } .search-handoff-button.disabled { @@ -331,7 +326,7 @@ p { background-position: left 0 top 50px; background-repeat: no-repeat; background-size: 32px; - letter-spacing: -0.2px; + letter-spacing: -.2px; padding: 50px 0; padding-inline-start: 44px; } @@ -396,7 +391,7 @@ p { padding: 17px; @media not (prefers-contrast) { - box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2); + box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20); background: rgba(149, 43, 185, 0.5); } } @@ -411,7 +406,7 @@ p { @media not (prefers-contrast) { background-color: #321c64; - box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2); + box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20); } } @@ -506,22 +501,22 @@ p { margin: 8px 0; font-weight: 600; cursor: pointer; - background-color: rgb(0, 221, 255); - color: rgb(43, 42, 51); + background-color: rgb(0,221,255); + color: rgb(43,42,51); } .promo-cta .primary:focus-visible { - outline-color: rgb(0, 221, 255); + outline-color: rgb(0,221,255); } .promo-cta .primary:hover { - background-color: rgb(128, 235, 255) !important; - color: rgb(43, 42, 51) !important; + background-color: rgb(128,235,255) !important; + color: rgb(43,42,51) !important; } .promo-cta .primary:hover:active { - background-color: rgb(170, 242, 255) !important; - color: rgb(43, 42, 51) !important; + background-color: rgb(170,242,255) !important; + color: rgb(43,42,51) !important; } @media (prefers-contrast) { @@ -621,7 +616,7 @@ p { @media not (prefers-contrast) { html.private { - background: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%); + background: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%); } } } diff --git a/browser/themes/shared/search/searchbar.css b/browser/themes/shared/search/searchbar.css index d05f1e001e78..31ac5d0e9be4 100644 --- a/browser/themes/shared/search/searchbar.css +++ b/browser/themes/shared/search/searchbar.css @@ -27,7 +27,7 @@ .search-panel-header > label { margin-top: 2px; margin-bottom: 1px; - opacity: 0.6; + opacity: .6; } /* Make the contrast stronger in dark mode */ @@ -150,7 +150,7 @@ color: inherit; } -.search-panel-tree[collapsed="true"] + .searchbar-separator { +.search-panel-tree[collapsed=true] + .searchbar-separator { display: none; } diff --git a/browser/themes/shared/setDesktopBackground.css b/browser/themes/shared/setDesktopBackground.css index 57e8b6ab5135..768bc7c949eb 100644 --- a/browser/themes/shared/setDesktopBackground.css +++ b/browser/themes/shared/setDesktopBackground.css @@ -18,6 +18,6 @@ html|canvas#screen { html|p#preview-unavailable { margin: 12px 11px; text-align: center; - color: #9b2423; + color: #9B2423; font-weight: bold; } diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css index 42dea0c1baa5..b85ecd5dcab0 100644 --- a/browser/themes/shared/sidebar.css +++ b/browser/themes/shared/sidebar.css @@ -345,21 +345,21 @@ sidebar-main, } } -/* stylelint-disable-next-line media-query-no-invalid */ -@media -moz-pref("sidebar.visibility", "expand-on-hover") { - /* We need these rules to apply at all times when the sidebar.visibility + /* stylelint-disable-next-line media-query-no-invalid */ + @media -moz-pref("sidebar.visibility", "expand-on-hover") { + /* We need these rules to apply at all times when the sidebar.visibility pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute has been added to root. There are certain scenarios when that attribute is temporarily removed from root such as when toggling the sidebar to expand with the toolbar button. */ - #sidebar-box { - --sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94)); - > #sidebar { - box-shadow: none; - margin-block-start: 1px; - border: 0.5px solid var(--sidebar-border-color); + #sidebar-box { + --sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94)); + > #sidebar { + box-shadow: none; + margin-block-start: 1px; + border: 0.5px solid var(--sidebar-border-color); + } } } -} /* History Menu */ #sidebar-history-sort-by-heading { diff --git a/browser/themes/shared/syncedtabs/sidebar.css b/browser/themes/shared/syncedtabs/sidebar.css index 7ef242c71562..b6af5f441eb9 100644 --- a/browser/themes/shared/syncedtabs/sidebar.css +++ b/browser/themes/shared/syncedtabs/sidebar.css @@ -111,23 +111,23 @@ body { fill: currentColor; } -.item.client[clientType="phone"] > .item-title-container > .item-icon-container { +.item.client[clientType=phone] > .item-title-container > .item-icon-container { background-image: url("chrome://browser/skin/device-phone.svg"); } -.item.client[clientType="tablet"] > .item-title-container > .item-icon-container { +.item.client[clientType=tablet] > .item-title-container > .item-icon-container { background-image: url("chrome://browser/skin/device-tablet.svg"); } -.item.client[clientType="desktop"] > .item-title-container > .item-icon-container { +.item.client[clientType=desktop] > .item-title-container > .item-icon-container { background-image: url("chrome://browser/skin/device-desktop.svg"); } -.item.client[clientType="tv"] > .item-title-container > .item-icon-container { +.item.client[clientType=tv] > .item-title-container > .item-icon-container { background-image: url("chrome://browser/skin/device-tv.svg"); } -.item.client[clientType="vr"] > .item-title-container > .item-icon-container { +.item.client[clientType=vr] > .item-title-container > .item-icon-container { background-image: url("chrome://browser/skin/device-vr.svg"); } @@ -171,9 +171,7 @@ body { .item[hidden] { opacity: 0; max-height: 0; - transition: - opacity 150ms ease-in-out, - max-height 150ms ease-in-out 150ms; + transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms; } .item.empty .item-title-container { @@ -287,7 +285,15 @@ body { :root[lwt-sidebar] { background-color: var(--lwt-sidebar-background-color); color: var(--lwt-sidebar-text-color); - scrollbar-color: light-dark(rgba(204, 204, 204, 0.5), rgba(249, 249, 250, 0.4)) light-dark(rgba(230, 230, 235, 0.5), rgba(20, 20, 25, 0.3)); + scrollbar-color: + light-dark( + rgba(204,204,204,.5), + rgba(249,249,250,.4) + ) + light-dark( + rgba(230,230,235,.5), + rgba(20,20,25,.3) + ); color-scheme: light; } @@ -296,7 +302,7 @@ body { } :root[lwt-sidebar] .item.selected > .item-title-container { - background-color: light-dark(hsla(0, 0%, 80%, 0.3), rgba(249, 249, 250, 0.1)); + background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1)); color: inherit; } @@ -308,7 +314,7 @@ body { /* Platform specific styling */ @media (-moz-platform: macos) { :root { - /* let the -moz-appearance of the sidebar shine through */ + /* let the -moz-appearance of the sidebar shine through */ background-color: transparent; } diff --git a/browser/themes/shared/tabbrowser/content-area.css b/browser/themes/shared/tabbrowser/content-area.css index 9f94fc5b9b7e..eefc7c8ec4a5 100644 --- a/browser/themes/shared/tabbrowser/content-area.css +++ b/browser/themes/shared/tabbrowser/content-area.css @@ -7,11 +7,11 @@ :root { /* --tabpanel-background-color matches $in-content-page-background in newtab (browser/extensions/newtab/content-src/styles/_variables.scss) */ - --tabpanel-background-color: #f9f9fb; + --tabpanel-background-color: #F9F9FB; @media (-moz-content-prefers-color-scheme: dark) { - --tabpanel-background-color: #2b2a33; + --tabpanel-background-color: #2B2A33; } - &[privatebrowsingmode="temporary"] { + &[privatebrowsingmode=temporary] { /* Value for --in-content-page-background in aboutPrivateBrowsing.css. !important overrides the direct setting of this variable in ThemeVariableMap.sys.mjs when the user has a theme that defines @@ -20,7 +20,7 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") { - --tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%) !important; + --tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%) !important; } } } @@ -137,7 +137,7 @@ opacity: 0; } - browser[type="content"] { + browser[type=content] { color-scheme: env(-moz-content-preferred-color-scheme); } @@ -172,30 +172,26 @@ max-width: 50%; } - &[type="status"] { + &[type=status] { min-width: min(23em, 33%); } - &[type="overLink"] { - transition: - opacity 120ms ease-out, - visibility 120ms; + &[type=overLink] { + transition: opacity 120ms ease-out, visibility 120ms; } - &:is([type="overLink"], [inactive][previoustype="overLink"]) { + &:is([type=overLink], [inactive][previoustype=overLink]) { direction: ltr; } &[inactive], - :root[inDOMFullscreen] &:not([type="overLink"]) { + :root[inDOMFullscreen] &:not([type=overLink]) { transition: none; opacity: 0; visibility: hidden; - &[previoustype="overLink"] { - transition: - opacity 200ms ease-out, - visibility 200ms; + &[previoustype=overLink] { + transition: opacity 200ms ease-out, visibility 200ms; } } @@ -216,17 +212,17 @@ text-shadow: none; @media (not (prefers-contrast)) and (not (-moz-platform: linux)) { - background-color: light-dark(#f9f9fa, hsl(240, 1%, 20%)); - border-color: light-dark(#ddd, hsl(240, 1%, 40%)); - color: light-dark(#444, rgb(249, 249, 250)); + background-color: light-dark(#f9f9fa, hsl(240,1%,20%)); + border-color: light-dark(#ddd, hsl(240,1%,40%)); + color: light-dark(#444, rgb(249,249,250)); } #statuspanel:not([mirror]) > &:-moz-locale-dir(ltr), #statuspanel[mirror] > &:-moz-locale-dir(rtl) { border-right-style: solid; /* disabled on Windows for triggering grayscale AA (bug 659213): */ - @media not (-moz-platform: windows) { - border-top-right-radius: 0.3em; + @media not (-moz-platform: windows) { + border-top-right-radius: .3em; } margin-right: 1em; } @@ -235,8 +231,8 @@ #statuspanel[mirror] > &:-moz-locale-dir(ltr) { border-left-style: solid; /* disabled on Windows for triggering grayscale AA (bug 659213): */ - @media not (-moz-platform: windows) { - border-top-left-radius: 0.3em; + @media not (-moz-platform: windows) { + border-top-left-radius: .3em; } margin-left: 1em; } @@ -247,7 +243,7 @@ */ #selection-shortcut-action-panel { --panel-subview-body-padding: 0; -} + } #ai-action-button { --button-min-height: 34px; @@ -256,6 +252,7 @@ margin: 1px; } + #ask-chat-shortcuts { max-width: 345px; } @@ -270,6 +267,7 @@ margin-top: var(--space-small); } + /** * Dialogs */ @@ -361,30 +359,7 @@ } @media (min-width: 800px) { - --box-inline-margin: min(calc(16px + (100vw - 800px) / 4), 32px); - } - - @media (min-height: 350px) { - --box-block-margin: min(calc(4px + (100vh - 350px) / 4), 16px); - } - - @media (min-height: 550px) { - --box-block-margin: min(calc(16px + (100vh - 550px) / 4), 32px); - } - - &:not(.spotlightBox) { - max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested)); - max-height: min( - max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), - var(--box-max-height-margin), - var(--box-max-height-requested), - var(--box-max-height-remaining) - ); - } - - .dialogStack &.spotlightBox { - /* Tab modal: subtract the navigator toolbox height from the dialog height. */ - height: calc(100vh - var(--box-top-px)); + --box-inline-margin: min(calc(16px + (100% - 800px) / 4), 32px); } } @@ -406,7 +381,11 @@ /* Do not go below 3px (as otherwise the top of the dialog would be * adjacent to or clipped by the top of the window), or above the window * size. */ - margin-top: clamp(3px, var(--chrome-offset, 20px) - 5px, calc(100vh - var(--subdialog-inner-height) - 5px)); + margin-top: clamp( + 3px, + var(--chrome-offset, 20px) - 5px, + calc(100vh - var(--subdialog-inner-height) - 5px) + ); } } diff --git a/browser/themes/shared/tabbrowser/ctrlTab.css b/browser/themes/shared/tabbrowser/ctrlTab.css index 50045ec27abc..645467864db4 100644 --- a/browser/themes/shared/tabbrowser/ctrlTab.css +++ b/browser/themes/shared/tabbrowser/ctrlTab.css @@ -8,7 +8,7 @@ #ctrlTab-panel { appearance: none; - --panel-background: hsla(0, 0%, 40%, 0.85); + --panel-background: hsla(0,0%,40%,.85); --panel-color: white; --panel-border-color: transparent; --panel-padding: 20px 10px 10px; @@ -33,9 +33,7 @@ /* remove the :-moz-focusring outline from button.css on Windows */ outline: none !important; margin: 0; - text-shadow: - 0 0 1px hsl(0, 0%, 12%), - 0 0 2px hsl(0, 0%, 12%); + text-shadow: 0 0 1px hsl(0,0%,12%), 0 0 2px hsl(0,0%,12%); border: none; background-color: transparent; } @@ -64,16 +62,16 @@ margin-bottom: 2px; margin-inline-end: -6px; padding: 5px; - background-color: #f9f9fa; + background-color: #F9F9FA; border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); } .ctrlTab-canvas { color-scheme: light; background-color: Canvas; color: CanvasText; - box-shadow: 1px 1px 2px hsl(0, 0%, 12%); + box-shadow: 1px 1px 2px hsl(0,0%,12%); margin-bottom: 8px; } @@ -92,14 +90,14 @@ background: url("chrome://global/skin/icons/defaultFavicon.svg") center/20% no-repeat; -moz-context-properties: fill; fill: currentColor; - filter: drop-shadow(0 0 2px hsla(0, 0%, 0%, 0.5)); + filter: drop-shadow(0 0 2px hsla(0,0%,0%,0.5)); } .ctrlTab-preview-inner, #ctrlTab-showAll { padding: 8px; border: 2px solid transparent; - border-radius: 0.5em; + border-radius: .5em; } .ctrlTab-preview-inner { @@ -107,13 +105,13 @@ } #ctrlTab-showAll { - background-color: rgba(255, 255, 255, 0.2); - margin-top: 0.5em; + background-color: rgba(255,255,255,.2); + margin-top: .5em; } .ctrlTab-preview:focus > .ctrlTab-preview-inner, #ctrlTab-showAll:focus { - background-color: rgba(0, 0, 0, 0.75); + background-color: rgba(0,0,0,.75); text-shadow: none; border-color: #45a1ff; } diff --git a/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css b/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css index 25e157cceafa..1391580fed5b 100644 --- a/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css +++ b/browser/themes/shared/tabbrowser/fullscreen-and-pointerlock.css @@ -8,7 +8,7 @@ :root[inDOMFullscreen] #sidebar-main, :root[inDOMFullscreen] #sidebar-splitter, :root[inDOMFullscreen] #sidebar-launcher-splitter, -:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar="true"]), +:root[inFullscreen]:not([macOSNativeFullscreen]) toolbar:not([fullscreentoolbar=true]), :root[inFullscreen] .global-notificationbox { visibility: collapse; } diff --git a/browser/themes/shared/tabbrowser/tab-hover-preview.css b/browser/themes/shared/tabbrowser/tab-hover-preview.css index 6847f97b30a8..90680fb5870b 100644 --- a/browser/themes/shared/tabbrowser/tab-hover-preview.css +++ b/browser/themes/shared/tabbrowser/tab-hover-preview.css @@ -49,10 +49,6 @@ } @keyframes tab-hover-preview-fadein { - from { - opacity: 0; - } - to { - opacity: 100; - } + from { opacity: 0; } + to { opacity: 100; } } diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css index c68152e17103..fac29cb01b59 100644 --- a/browser/themes/shared/tabbrowser/tabs.css +++ b/browser/themes/shared/tabbrowser/tabs.css @@ -8,10 +8,10 @@ --tab-min-height: 36px; --tab-group-suggestions-loading-animation-color-1: color-mix(in srgb, currentColor 5%, transparent); --tab-group-suggestions-loading-animation-color-2: color-mix(in srgb, currentColor 35%, transparent); - &[uidensity="compact"] { + &[uidensity=compact] { --tab-min-height: 29px; } - &[uidensity="touch"] { + &[uidensity=touch] { --tab-min-height: 41px; } --tab-group-label-height: max(1.5em, var(--tab-min-height) - 14px); @@ -33,7 +33,7 @@ --tab-block-margin: 4px; --tab-icon-end-margin: 5.5px; --tab-label-line-height: 1.7; - --tab-loading-fill: #0a84ff; + --tab-loading-fill: #0A84FF; --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent); --tab-selected-textcolor: var(--toolbar-color); --tab-selected-bgcolor: var(--toolbar-bgcolor); @@ -100,9 +100,9 @@ --tab-group-color-red: var(--color-red-70); --tab-group-color-red-invert: var(--color-red-20); --tab-group-color-red-pale: var(--color-red-0); - --tab-group-color-gray: #5e6a77; - --tab-group-color-gray-invert: #99a6b4; - --tab-group-color-gray-pale: #f2f9ff; + --tab-group-color-gray: #5E6A77; + --tab-group-color-gray-invert: #99A6B4; + --tab-group-color-gray-pale: #F2F9FF; --tab-group-label-text-dark: var(--color-gray-100); /* 5px of padding-block are adding to .tabbrowser-tab */ @@ -171,7 +171,7 @@ pointer-events: none; #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & { - transition: width 0.15s ease-out; + transition: width .15s ease-out; } } @@ -198,9 +198,8 @@ &:not([pinned]) { flex: 100 100; max-width: 225px; - transition: - min-width 100ms ease-out, - max-width 100ms ease-out; + transition: min-width 100ms ease-out, + max-width 100ms ease-out; #tabbrowser-tabs[orient="horizontal"] &[fadein] { min-width: var(--tab-min-width-pref, var(--tab-min-width)); @@ -245,7 +244,7 @@ &:is([muted], [soundplaying], [activemedia-blocked]) { --tab-icon-end-margin: 2px; - #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) { + #tabbrowser-tabs[orient=horizontal] &:not([pinned]) { min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px); } } @@ -260,7 +259,7 @@ min-width: 0; } - :root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] { + :root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] { padding: 0 10px; } @@ -301,7 +300,7 @@ background-position: center center; background-size: 100% auto; background-repeat: no-repeat; - animation: tab-burst-animation 375ms cubic-bezier(0, 0, 0.58, 1); + animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1); -moz-context-properties: fill; fill: var(--tab-loading-fill); } @@ -433,21 +432,13 @@ } @keyframes tab-throbber-animation { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-100%); - } + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } } @keyframes tab-throbber-animation-rtl { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(100%); - } + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } } .tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) { @@ -459,14 +450,10 @@ } @keyframes tab-sharing-icon-pulse { - 0%, - 16.66%, - 83.33%, - 100% { + 0%, 16.66%, 83.33%, 100% { opacity: 0; } - 33.33%, - 66.66% { + 33.33%, 66.66% { opacity: 1; } } @@ -573,7 +560,7 @@ inset-inline-end: -7px; z-index: 1; /* Overlay tab title */ - #tabbrowser-tabs[orient="vertical"] & { + #tabbrowser-tabs[orient=vertical] & { top: 7px; } @@ -607,16 +594,18 @@ * We also apply one extra color on top (--audio-overlay-extra-background) * for hover / active feedback. */ - --audio-overlay-extra-background: transparent; + --audio-overlay-extra-background: transparent; background-color: var(--lwt-accent-color); - background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--toolbox-bgcolor)); -moz-context-properties: fill; fill: var(--tab-selected-textcolor); color-scheme: var(--tab-selected-color-scheme); border-radius: var(--border-radius-circle); .browser-toolbox-background:-moz-window-inactive &:not([selected]) { - background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--toolbox-bgcolor-inactive)); } &:hover { @@ -628,13 +617,15 @@ } &[selected] { - background-image: - linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor)); } .browser-toolbox-background:-moz-window-inactive &[selected] { - background-image: - linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor-inactive)); } } } @@ -679,16 +670,18 @@ * We also apply one extra color on top (--audio-overlay-extra-background) * for hover / active feedback. */ - --audio-overlay-extra-background: transparent; + --audio-overlay-extra-background: transparent; background-color: var(--lwt-accent-color); - background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--toolbox-bgcolor)); -moz-context-properties: fill; fill: var(--tab-selected-textcolor); color-scheme: var(--tab-selected-color-scheme); border-radius: var(--border-radius-circle); .browser-toolbox-background:-moz-window-inactive &:not([selected]) { - background-image: linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--toolbox-bgcolor-inactive)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--toolbox-bgcolor-inactive)); } &:hover { @@ -700,14 +693,15 @@ } &[selected] { - background-image: - linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor)); } .browser-toolbox-background:-moz-window-inactive &[selected] { - background-image: - linear-gradient(var(--audio-overlay-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), - linear-gradient(var(--toolbox-bgcolor-inactive)); + background-image: linear-gradient(var(--audio-overlay-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor-inactive)); } } } @@ -733,37 +727,37 @@ --button-min-height-small: 24px; --button-border-radius: var(--border-radius-small); - /* stylelint-disable-next-line media-query-no-invalid */ - @media not -moz-pref("sidebar.visibility", "expand-on-hover") { - /* We need these rules to apply at all times when the sidebar.visibility + /* stylelint-disable-next-line media-query-no-invalid */ + @media not -moz-pref("sidebar.visibility", "expand-on-hover") { + /* We need these rules to apply at all times when the sidebar.visibility pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute has not been added to root. There are certain scenarios when that attribute is temporarily removed from root such as when toggling the sidebar to expand with the toolbar button. */ - #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]), - :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) { - &:is([soundplaying], [muted], [activemedia-blocked]) { - display: block; - } + #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]), + :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) { + &:is([soundplaying], [muted], [activemedia-blocked]) { + display: block; + } - &[soundplaying]::part(button) { - background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); - } + &[soundplaying]::part(button) { + background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); + } - &[muted]::part(button) { - background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); - } + &[muted]::part(button) { + background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); + } - &[activemedia-blocked]::part(button) { - background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg"); + &[activemedia-blocked]::part(button) { + background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg"); + } } } - } } .tab-label-container { overflow: hidden; - #tabbrowser-tabs:not([secondarytext-unsupported], [orient="vertical"]) & { + #tabbrowser-tabs:not([secondarytext-unsupported], [orient=vertical]) & { height: 2.7em; } @@ -772,13 +766,13 @@ } &[textoverflow] { - &[labeldirection="ltr"], + &[labeldirection=ltr], &:not([labeldirection]):-moz-locale-dir(ltr) { direction: ltr; mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size)); } - &[labeldirection="rtl"], + &[labeldirection=rtl], &:not([labeldirection]):-moz-locale-dir(rtl) { direction: rtl; mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size)); @@ -788,7 +782,7 @@ .tab-label { margin-inline: 0; - line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */ + line-height: var(--tab-label-line-height); /* override 'normal' in case of fallback math fonts with huge metrics */ white-space: nowrap; } @@ -827,12 +821,12 @@ } .tab-secondary-label { - font-size: 0.75em; - margin: -0.3em 0 0.3em; /* adjust margins to compensate for line-height of .tab-label */ - opacity: 0.8; + font-size: .75em; + margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */ + opacity: .8; #tabbrowser-tabs:is([secondarytext-unsupported], [orient="vertical"]) &, - :root[uidensity="compact"] &, + :root[uidensity=compact] &, &:not([pictureinpicture]) { display: none; } @@ -874,10 +868,7 @@ } #tabbrowser-tabs[movingtab-createGroup] & { - transition: - background-color 50ms ease, - color 50ms ease, - outline-color 50ms ease; + transition: background-color 50ms ease, color 50ms ease, outline-color 50ms ease; &[dragover-createGroup] { background-color: light-dark(var(--dragover-tab-group-color-pale), var(--dragover-tab-group-color)); @@ -937,9 +928,7 @@ } } -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs])[orient="horizontal"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { margin-inline-start: 12px; } @@ -993,14 +982,13 @@ display: flex; } - /* prettier-ignore */ #tabbrowser-tabs[movingtab]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) > .tab-stack > .tab-background > & { display: flex; background-color: light-dark(var(--dragover-tab-group-color), var(--dragover-tab-group-color-invert)); border-radius: 1px; } - #tabbrowser-tabs:is([movingtab-createGroup], [movingtab-ungroup]) &:is([selected], [multiselected]) { + #tabbrowser-tabs:is([movingtab-createGroup],[movingtab-ungroup]) &:is([selected],[multiselected]) { display: none; } } @@ -1026,7 +1014,7 @@ tab-group { #tabbrowser-tabs[orient="vertical"][expanded] { tab-group > :is(.tab-group-label-container, .tabbrowser-tab), - &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup], [movingtab-ungroup]) .tabbrowser-tab:is(:active, [multiselected]) { + &[movingtab][movingtab-addToGroup]:not([movingtab-createGroup],[movingtab-ungroup]) .tabbrowser-tab:is(:active,[multiselected]) { margin-inline-start: var(--space-medium); } } @@ -1199,13 +1187,13 @@ tab-group { } input[name="tab-group-color"] { - width: 0; - height: 0; - opacity: 0; - margin: 0; - position: absolute; - pointer-events: none; - top: -100px; + width: 0; + height: 0; + opacity: 0; + margin: 0; + position: absolute; + pointer-events: none; + top: -100px; } .tab-group-editor-swatch { @@ -1236,7 +1224,7 @@ tab-group { .tab-group-delete { padding-block: 0; > toolbarbutton { - justify-content: flex-start; + justify-content: flex-start; } } @@ -1268,25 +1256,24 @@ tab-group { &:not([scrolledtostart])::part(overflow-start-indicator), &:not([scrolledtoend])::part(overflow-end-indicator) { width: 7px; /* The width is the sum of the inline margins */ - /* prettier-ignore */ background-image: radial-gradient(ellipse at bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 7.6%, rgba(0,0,0,0) 87.5%); background-repeat: no-repeat; background-position: -3px; - border-left: 0.5px solid rgba(255, 255, 255, 0.2); + border-left: .5px solid rgba(255,255,255,.2); pointer-events: none; position: relative; - border-bottom: 0.5px solid transparent; + border-bottom: .5px solid transparent; } &:not([scrolledtostart])::part(overflow-start-indicator) { - margin-inline: -0.5px -6.5px; + margin-inline: -.5px -6.5px; } &:not([scrolledtoend])::part(overflow-end-indicator) { - margin-inline: -6.5px -0.5px; + margin-inline: -6.5px -.5px; } &:-moz-locale-dir(rtl)::part(overflow-start-indicator), @@ -1295,10 +1282,15 @@ tab-group { } } + &[orient="vertical"] { &::part(overflow-start-indicator), &::part(overflow-end-indicator) { - background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))); + background-image: linear-gradient( + to top, + transparent 0%, + light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) + ); background-repeat: no-repeat; pointer-events: none; @@ -1457,7 +1449,11 @@ tab-group { &:not([scrolledtostart])::part(overflow-start-indicator), &:not([scrolledtoend])::part(overflow-end-indicator) { - background-image: linear-gradient(to top, transparent 0%, light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))); + background-image: linear-gradient( + to top, + transparent 0%, + light-dark(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) + ); background-repeat: no-repeat; pointer-events: none; position: relative; @@ -1487,7 +1483,8 @@ tab-group { } :root:not([sidebar-expand-on-hover]) & { - --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 * var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2); + --tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 * + var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2); /* stylelint-disable-next-line media-query-no-invalid */ @media not -moz-pref("sidebar.visibility", "expand-on-hover") { /* We need these rules to apply at all times when the sidebar.visibility @@ -1495,7 +1492,10 @@ tab-group { has not been added to root. There are certain scenarios when that attribute is temporarily removed from root such as when toggling the sidebar to expand with the toolbar button. */ &::part(items-wrapper) { - grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto)); + grid-template-columns: repeat( + auto-fit, + minmax(var(--tab-pinned-min-width-expanded), auto) + ); display: grid; grid-auto-rows: var(--tab-height-with-margin-padding); } @@ -1632,8 +1632,9 @@ tab-group { */ --close-button-extra-background: transparent; background-color: var(--lwt-accent-color); - background-image: - linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor)); + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor)); color-scheme: var(--tab-selected-color-scheme); outline-color: var(--tab-selected-outline-color); box-shadow: var(--tab-selected-shadow); @@ -1645,8 +1646,9 @@ tab-group { inset-inline-start: 2px; &:-moz-window-inactive { - background-image: - linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor)), linear-gradient(var(--toolbox-bgcolor-inactive)); + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor)), + linear-gradient(var(--toolbox-bgcolor-inactive)); } &:hover { @@ -1726,7 +1728,10 @@ tab-group { } :root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem) ~ #tabbrowser-tabs, -:root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) ~ #tabbrowser-tabs { +:root[privatebrowsingmode] :is( + toolbarbutton:not(#firefox-view-button), + toolbarpaletteitem:not(#wrapper-firefox-view-button) +) ~ #tabbrowser-tabs { border-inline-start: var(--tabstrip-inner-border); padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px); margin-inline-start: 2px; @@ -2066,12 +2071,10 @@ toolbar:not(#TabsToolbar) #firefox-view-button { animation: tab-group-loading-block-animation 3s infinite; outline-color: var(--tab-group-suggestions-loading-animation-color-1); border-color: var(--tab-group-suggestions-loading-animation-color-2); - background: linear-gradient( - 100deg, - color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%, - var(--tab-group-suggestions-loading-animation-color-1) 50%, - color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70% - ); + background: linear-gradient(100deg, + color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 30%, + var(--tab-group-suggestions-loading-animation-color-1) 50%, + color-mix(in srgb, var(--tab-group-suggestions-loading-animation-color-2), transparent 60%) 70%); background-size: 200% 100%; border-radius: var(--border-radius-small); height: 1.5em; diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css index 12d154635914..44155838b9b2 100644 --- a/browser/themes/shared/toolbarbuttons.css +++ b/browser/themes/shared/toolbarbuttons.css @@ -38,13 +38,13 @@ --bookmark-block-padding: 4px; - &[uidensity="compact"] { + &[uidensity=compact] { --toolbarbutton-outer-padding: 3px; --toolbarbutton-inner-padding: 6px; --bookmark-block-padding: 1px; } - &[uidensity="touch"] { + &[uidensity=touch] { --toolbarbutton-inner-padding: 9px; --bookmark-block-padding: 7px; } @@ -216,7 +216,7 @@ toolbar .toolbaritem-combined-buttons { background-position: center; background-repeat: no-repeat; background-size: 1px 16px; - opacity: 0.2; + opacity: .2; } &:hover > separator { @@ -225,7 +225,7 @@ toolbar .toolbaritem-combined-buttons { } toolbar[brighttext] .toolbaritem-combined-buttons > separator { - opacity: 0.3; + opacity: .3; } /* Toolbar button animations */ @@ -327,7 +327,7 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator { /* resume at 7/35 and animate across the next 14 frames */ 17.14% { animation-timing-function: steps(14); - transform: translateX(calc(0 * -20px)); + transform: translateX(calc(0 * -20px)); } /* pause on the last frame for the remainder of the duration */ 54.29% { @@ -445,7 +445,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) { --toolbarbutton-inner-padding: 4px; --toolbarbutton-outer-padding: 2px; - :root[uidensity="compact"] & { + :root[uidensity=compact] & { --toolbarbutton-outer-padding: 1px; } @@ -492,7 +492,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) { outline-offset: var(--focus-outline-inset); } - :root[uidensity="compact"] & { + :root[uidensity=compact] & { margin-inline: 1px; } } @@ -534,7 +534,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) { toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder, toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button, -#personal-bookmarks:is([overflowedItem="true"], [cui-areatype="panel"]) > #bookmarks-toolbar-button { +#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button { display: flex; } @@ -587,8 +587,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { transparent 3.75px, var(--toolbarseparator-color) 3.75px, var(--toolbarseparator-color) calc(100% - 3.75px), - transparent calc(100% - 3.75px) - ); + transparent calc(100% - 3.75px) ); border-image-slice: 1; } @@ -607,14 +606,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { #PersonalToolbar & { margin-top: -1px !important; - :root[uidensity="touch"] & { + :root[uidensity=touch] & { margin-top: -4px !important; } } /* Remove a pixel of margin on the end so that the badge doesn't * overflow the toolbar and push the button into the overflow menu. */ - :root[uidensity="compact"] & { + :root[uidensity=compact] & { margin-inline-end: -7px !important; } @@ -635,7 +634,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks { /* Flexible spacer sizing */ -toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"], +toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring], toolbarspring { flex: 1; min-width: 28px; @@ -656,7 +655,7 @@ toolbarspring { /* Keyboard navigation */ -toolbar[keyNav]:not([collapsed="true"], [customizing]) toolbartabstop, +toolbar[keyNav]:not([collapsed=true], [customizing]) toolbartabstop, #tabbrowser-tabs[orient="vertical"] #tabs-newtab-button, #vertical-tabs-newtab-button { -moz-user-focus: normal; diff --git a/browser/themes/shared/urlbar-dynamic-results.css b/browser/themes/shared/urlbar-dynamic-results.css index 619aa2bc60f6..e1be5bd128b3 100644 --- a/browser/themes/shared/urlbar-dynamic-results.css +++ b/browser/themes/shared/urlbar-dynamic-results.css @@ -6,7 +6,7 @@ * Firefox Suggest contextual opt-in */ -.urlbarView-row[dynamicType="quickSuggestContextualOptIn"] { +.urlbarView-row[dynamicType=quickSuggestContextualOptIn] { background-color: color-mix(in srgb, currentColor 3%, transparent); > .urlbarView-row-inner { @@ -20,7 +20,7 @@ min-width: 32px; height: 32px; padding: 16px; - margin-inline: 0 0.7em; + margin-inline: 0 .7em; } } } @@ -79,7 +79,7 @@ * Tab To Search onboarding */ -.urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner { +.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner { min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */ align-items: center; @@ -104,7 +104,7 @@ } } -.urlbarView-row[dynamicType="onboardTabToSearch"][selected] { +.urlbarView-row[dynamicType=onboardTabToSearch][selected] { fill-opacity: 1; } @@ -123,7 +123,6 @@ margin-block-start: 2px; } -/* prettier-ignore */ .urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container { > .urlbarView-dynamic-onboardTabToSearch-first-row-container { flex-wrap: wrap; @@ -159,7 +158,7 @@ &::before { content: "\2014"; - margin: 0 0.4em; + margin: 0 .4em; opacity: 0.6; } } @@ -168,7 +167,7 @@ * Actions */ -.urlbarView-row[dynamicType="actions"] > .urlbarView-row-inner { +.urlbarView-row[dynamicType=actions] > .urlbarView-row-inner { /* Reduce the padding to 2px so the outline does not get cropped and the actions + outline are aligned with the rest of the results */ @@ -206,7 +205,7 @@ * Weather */ -.urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner { +.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { align-items: center; } @@ -218,7 +217,7 @@ border-radius: 2px; text-align: center; - .urlbarView-row[dynamicType="weather"]:is([selected], :hover) > .urlbarView-row-inner > & { + .urlbarView-row[dynamicType=weather]:is([selected], :hover) > .urlbarView-row-inner > & { color: var(--urlbarView-result-button-selected-color); background-color: var(--urlbarView-result-button-selected-background-color); } @@ -264,7 +263,7 @@ align-items: center; } -.urlbarView-results[wrap] > .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner { +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { flex-wrap: nowrap; > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top { @@ -307,15 +306,15 @@ } .urlbarView-dynamic-weather-summaryTextSeparator::before { - content: "\00B7"; + content: '\00B7'; margin: 0.25em; } .urlbarView-dynamic-weather-bottom { font-size: var(--urlbarView-small-font-size); - margin-top: 0.4em; + margin-top: 0.40em; - .urlbarView-row[dynamicType="weather"]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & { + .urlbarView-row[dynamicType=weather]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & { opacity: 0.6; } } @@ -324,7 +323,7 @@ * Fakespot suggestions */ -.urlbarView-results[wrap] > .urlbarView-row[dynamicType="fakespot"] > .urlbarView-row-inner { +.urlbarView-results[wrap] > .urlbarView-row[dynamicType=fakespot] > .urlbarView-row-inner { flex-wrap: nowrap; } @@ -354,7 +353,7 @@ .urlbarView-dynamic-fakespot-badge { display: flex; align-items: center; - color: #15141a; + color: #15141A; font-size: 0.75em; padding-inline: 0 1em; padding-block: 0.27em; @@ -380,14 +379,14 @@ border-width: 1px; } - &[grade="A"] { + &[grade=A] { background-color: rgba(231, 255, 246, 0.7); &::before { content: "A"; background-color: rgb(179, 255, 227); } } - &[grade="B"] { + &[grade=B] { background-color: rgba(222, 250, 255, 0.7); &::before { content: "B"; diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css index 0a7eac411b7b..5d8d23cde16a 100644 --- a/browser/themes/shared/urlbar-searchbar.css +++ b/browser/themes/shared/urlbar-searchbar.css @@ -17,7 +17,7 @@ #urlbar[searchmode][breakout-extend] > .urlbar-input-container > #urlbar-label-box, #urlbar:not([searchmode]) > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, #urlbar[breakout-extend] > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, -.urlbar-input-container[pageproxystate="invalid"] > #page-action-buttons > .urlbar-page-action, +.urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action, #identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box), #urlbar[usertyping] > .urlbar-input-container > #page-action-buttons > #urlbar-zoom-button, #urlbar:not([usertyping]) > .urlbar-input-container > .urlbar-go-button, @@ -40,7 +40,7 @@ padding-block: var(--urlbar-padding-block); margin-inline: var(--urlbar-margin-inline); - :root[uidensity="touch"] & { + :root[uidensity=touch] & { padding-block: 5px; } } @@ -134,15 +134,15 @@ /* Make sure that the location bar's alignment changes according to the input box direction if the user switches the text direction using cmd_switchTextDirection (which applies a dir attribute to the ). */ - &[dir="ltr"]:-moz-locale-dir(rtl) { + &[dir=ltr]:-moz-locale-dir(rtl) { text-align: left !important; } - &[dir="rtl"]:-moz-locale-dir(ltr) { + &[dir=rtl]:-moz-locale-dir(ltr) { text-align: right !important; } - #urlbar:not([focused])[domaindir="ltr"] > .urlbar-input-container > .urlbar-input-box > & { + #urlbar:not([focused])[domaindir="ltr"]> .urlbar-input-container > .urlbar-input-box > & { direction: ltr; unicode-bidi: embed; } @@ -300,10 +300,10 @@ @keyframes urlbar-grow { 0% { - transform: scaleX(0.99) scaleY(0.98); + transform: scaleX(.99) scaleY(.98); } 100% { - transform: scale(1); + transform: scale(1.0); } } @@ -324,6 +324,7 @@ padding-inline-end: 0; } + .urlbar-input-box { /* Show the url scheme in a static box when overflowing to the left */ position: relative; @@ -368,8 +369,8 @@ flex: 400 0 auto; } -#nav-bar:not([keyNav="true"]) #identity-box, -#nav-bar:not([keyNav="true"]) #tracking-protection-icon-container { +#nav-bar:not([keyNav=true]) #identity-box, +#nav-bar:not([keyNav=true]) #tracking-protection-icon-container { -moz-user-focus: normal; } @@ -499,7 +500,7 @@ border-radius: var(--urlbar-icon-border-radius); @media (prefers-contrast) { - fill-opacity: 1; + fill-opacity: 1.0; } &:hover { @@ -644,7 +645,11 @@ } #urlbar-background { - background-image: repeating-linear-gradient(-45deg, rgba(255, 60, 60, 0.25) 0 25px, rgba(175, 0, 0, 0.25) 25px 50px); + background-image: repeating-linear-gradient( + -45deg, + rgba(255, 60, 60, 0.25) 0 25px, + rgba(175, 0, 0, 0.25) 25px 50px + ); background-attachment: fixed; /* Override the usual breakout animation so the gradient doesn't shift around @@ -931,7 +936,7 @@ #urlbar-zoom-button { appearance: none; - font-size: 0.8em; + font-size: .8em; padding: 3px 7px; border-radius: var(--urlbar-icon-border-radius); background-color: var(--urlbar-box-bgcolor); @@ -980,7 +985,7 @@ transform: scale(1.5); } 100% { - transform: scale(1); + transform: scale(1.0); } } @@ -1055,7 +1060,7 @@ .searchbar-search-icon-overlay { pointer-events: none; - .searchbar-search-button[addengines="true"] > & { + .searchbar-search-button[addengines=true] > & { list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg); margin-inline: -15px 4px; margin-top: -10px; @@ -1067,7 +1072,7 @@ } } - .searchbar-search-button:hover:not([addengines="true"]) > & { + .searchbar-search-button:hover:not([addengines=true]) > & { list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); -moz-context-properties: fill; margin-inline: -8px 2px; @@ -1127,7 +1132,7 @@ } /* No need space if page information icons such as lock and shield is shown */ - #urlbar[pageproxystate="valid"] & { + #urlbar[pageproxystate=valid] & { margin-inline-end: 0; } @@ -1144,7 +1149,8 @@ } /* stylelint-disable media-query-no-invalid */ - @media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and (not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) { + @media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and + (not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) { display: none; } /* stylelint-enable media-query-no-invalid */ @@ -1259,7 +1265,7 @@ margin-inline-start: var(--urlbar-searchmodeswitcher-inline-padding); } - #urlbar[pageproxystate="invalid"] { + #urlbar[pageproxystate=invalid] { #identity-box, #tracking-protection-icon-container { display: none; diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css index 15dd8d136706..4032e1c70fe7 100644 --- a/browser/themes/shared/urlbarView.css +++ b/browser/themes/shared/urlbarView.css @@ -45,17 +45,9 @@ --urlbarView-result-button-size: 24px; --urlbarView-result-button-background-opacity: 60%; --urlbarView-result-button-selected-color: var(--toolbar-field-focus-color); - --urlbarView-result-button-selected-background-color: color-mix( - in srgb, - var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity), - transparent - ); + --urlbarView-result-button-selected-background-color: color-mix(in srgb, var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity), transparent); --urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color); - --urlbarView-result-button-hover-background-color: color-mix( - in srgb, - var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity), - transparent - ); + --urlbarView-result-button-hover-background-color: color-mix(in srgb, var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity), transparent); --urlbarView-labeled-row-margin-top: calc(1.46em + 4px); --urlbarView-labeled-row-label-top: calc(-1.27em - 2px); @@ -83,11 +75,8 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("browser.urlbar.richSuggestions.featureGate") { --urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2); - --urlbarView-favicon-margin-end: calc( - var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + - ((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2) - ); - } + --urlbarView-favicon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2)); + } } .urlbarView { @@ -136,9 +125,7 @@ } &[rich-suggestion][icon-size="24"] { --urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2); - --urlbarView-icon-margin-end: calc( - var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2) - ); + --urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2)); } } @@ -163,20 +150,20 @@ color: var(--urlbarView-highlight-color); } - &:not([type="tip"], [type="dynamic"]) { - :root:not([uidensity="compact"]) & { + &:not([type=tip], [type=dynamic]) { + :root:not([uidensity=compact]) & { min-height: 32px; } - :root[uidensity="touch"] & { + :root[uidensity=touch] & { padding-block: 11px; } } - &[rich-suggestion][type="search"] { - :root:not([uidensity="compact"]) & { + &[rich-suggestion][type=search] { + :root:not([uidensity=compact]) & { min-height: 46px; } - :root[uidensity="touch"] & { + :root[uidensity=touch] & { padding-block: 4px; } } @@ -196,7 +183,7 @@ padding-inline: var(--urlbarView-item-inline-padding); padding-block: var(--urlbarView-item-block-padding); - :root:not([uidensity="compact"]) & { + :root:not([uidensity=compact]) & { min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */ } } @@ -207,8 +194,8 @@ flex-shrink: 0; .urlbarView[action-override] .urlbarView-row[has-url] > .urlbarView-row-inner > &, - .urlbarView-row[has-url]:not([type$="tab"]) > .urlbarView-row-inner > &, - .urlbarView-row[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & { + .urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > &, + .urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & { /* We prioritize icons + title + action over the url, so they can grow freely, but the url should never disappear when it's visible */ max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))); @@ -244,16 +231,16 @@ /* Note: switchtab entries show the url only in override mode, remotetab and sponsored ones only when selected or :hover. */ .urlbarView[action-override] &[has-url]:not([restyled-search]), - &[has-url]:not([type$="tab"], [sponsored], [restyled-search]), - &[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]), - &[type="tabtosearch"] { + &[has-url]:not([type$=tab], [sponsored], [restyled-search]), + &[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]), + &[type=tabtosearch] { /* This targets both rich and non-rich results, so not using the child selector here. */ .urlbarView-title-separator { display: none; } } - &[type="tabtosearch"] > .urlbarView-row-inner > .urlbarView-no-wrap { + &[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap { flex-wrap: wrap; > .urlbarView-action { @@ -321,7 +308,7 @@ visibility: hidden; } - .urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { + .urlbarView-row[type=tabtosearch]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { /* We use the URL color for this icon to inherit its accessibility properties, like adapting to high contrast modes. We also want to ensure contrast from the result highlight. */ @@ -345,7 +332,7 @@ stroke: var(--toolbar-field-focus-background-color); /* Favicon badges have this priority: pinned > bookmark. */ - .urlbarView-row[type="bookmark"] > .urlbarView-row-inner > .urlbarView-no-wrap > & { + .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > & { background-image: url(chrome://browser/skin/bookmark-12.svg); fill: var(--toolbarbutton-icon-fill-attention); } @@ -434,7 +421,7 @@ .urlbarView-button:not(:empty):not(.urlbarView-button-menu) { border-radius: var(--toolbarbutton-border-radius); - padding: 0.5em 1em; + padding: .5em 1em; margin-inline-end: 1.4em; font-size: 0.93em; font-weight: var(--font-weight-bold); @@ -467,7 +454,7 @@ /* Tip rows */ -.urlbarView-row[type="tip"] { +.urlbarView-row[type=tip] { padding-block: 18px; border-block: 0; border-radius: 0; @@ -523,15 +510,15 @@ } } - &:not([tip-type="dismissalAcknowledgment"]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { + &:not([tip-type=dismissalAcknowledgment]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { width: 24px; height: 24px; margin-inline-end: 12px; flex-basis: 24px; - flex-grow: 0; + flex-grow: 0; } - &[tip-type="dismissalAcknowledgment"] { + &[tip-type=dismissalAcknowledgment] { padding-block: 6px; &:last-child { @@ -540,6 +527,7 @@ } } + /* Row label (a.k.a. group label) */ .urlbarView-row[label] { @@ -572,7 +560,7 @@ compensate so that the label remains the same distance from the previous row as it would have had we not moved the tip row down. +1px compensates for the tip's top 1px border. */ - &[type="tip"]::before { + &[type=tip]::before { top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px); } @@ -662,7 +650,7 @@ .urlbarView-title-separator { &::before { content: "\2014"; - margin: 0 0.4em; + margin: 0 .4em; opacity: 0.6; } @@ -700,7 +688,7 @@ } .urlbarView-row[sponsored]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { - opacity: 0.6; + opacity: .6; } .urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { @@ -724,8 +712,7 @@ composition. We set opacity: 0 at the 0% keyframe to ensure the text is not seen by the user until after the delay. */ @keyframes urlbarView-action-slide-in { - 0%, - 28.6% { + 0%, 28.6% { translate: var(--urlbarView-action-slide-in-distance); opacity: 0; } @@ -736,14 +723,14 @@ } /* Switch-to-tab and Clipboard action text is styled as a chiclet. */ -.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) { +.urlbarView-row[has-action]:is([type=switchtab], [type=remotetab], [type=clipboard]) { > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { border-radius: var(--toolbarbutton-border-radius); padding: 4px 8px; margin-block: -2px; margin-inline-start: 8px; - :root[uidensity="compact"] & { + :root[uidensity=compact] & { padding-block: 3px; &.urlbarView-userContext { @@ -791,9 +778,9 @@ } } -.urlbarView:not([action-override]) .urlbarView-row[type="switchtab"], -.urlbarView-row[type="remotetab"]:not([selected], :hover), -.urlbarView-row[type="clipboard"] { +.urlbarView:not([action-override]) .urlbarView-row[type=switchtab], +.urlbarView-row[type=remotetab]:not([selected], :hover), +.urlbarView-row[type=clipboard] { > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before { /* We make the title separator transparent so it stays in the accessibility tree. We want screen readers to pause between the result title and the @@ -820,9 +807,9 @@ color: var(--link-color); } - .urlbarView-row:is([type="remotetab"], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &, + .urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &, .urlbarView-row:is([show-action-text], [restyled-search]) > .urlbarView-row-inner > &, - .urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] > .urlbarView-row-inner > & { + .urlbarView:not([action-override]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > & { /* Use visibility:collapse instead of display:none since the latter can confuse the overflow state of these elements when their content changes while they're hidden (bug 1549787). */ @@ -843,7 +830,7 @@ .urlbarView-tag { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding: 0 4px; - margin-inline-start: 0.4em; + margin-inline-start: .4em; border-radius: 4px; } @@ -937,14 +924,13 @@ } } -/* prettier-ignore */ .urlbarView-row[rich-suggestion]:not([selected]) > .urlbarView-row-inner > .urlbarView-row-body > :is(.urlbarView-row-body-description, .urlbarView-row-body-bottom) { color: var(--urlbarView-secondary-text-color); } /* Sponsored Firefox Suggest rows */ -.urlbarView-row[type$="_adm_sponsored"][icon-size="16"] > .urlbarView-row-inner { +.urlbarView-row[type$=_adm_sponsored][icon-size="16"] > .urlbarView-row-inner { /* Keep the status quo before these rows were rich suggestions, where the row height is roughly the same as usual rows. */ padding-block: 0; @@ -952,28 +938,28 @@ /* Other Firefox Suggest rows */ -.urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-favicon, -.urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { +.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-favicon, +.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { fill: var(--pocket-icon-fill); fill-opacity: 1; } -.urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon { +.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon { padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 24px) / 2); background-color: var(--urlbar-box-focus-bgcolor); border-radius: 2px; } -.urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon { +.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon { background-color: var(--urlbarView-result-button-selected-background-color); } -.urlbarView-row[type$="_vpn"][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon { +.urlbarView-row[type$=_vpn][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon { padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 32px) / 2); } -.urlbarView-row[dynamicType="weather"], -.urlbarView-row[type="weather"] { +.urlbarView-row[dynamicType=weather], +.urlbarView-row[type=weather] { /* Use the colors in the icon SVG files except in HCM and when the row is selected. Note that the SVG uses light or dark colors as appropriate. */ &:not([selected]) > .urlbarView-row-inner > .urlbarView-favicon { @@ -986,7 +972,6 @@ AccuWeather API response via Merino. These rules apply to both the older weather UI treatments ("simpler" and "full", which use a dynamic result) and the new treatment ("simplest", which is a standard rich suggestion). */ - /* prettier-ignore */ > .urlbarView-row-inner > .urlbarView-dynamic-weather-currentConditions > .urlbarView-dynamic-weather-currentTemperature > .urlbarView-dynamic-weather-weatherIcon, > .urlbarView-row-inner > .urlbarView-favicon { /* icon-variation="1" is "Sunny", which we'll use as the default to ensure an @@ -1078,9 +1063,7 @@ } .urlbarView-actions-container { - margin-inline-start: calc( - var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end) - ); + margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); margin-block-end: var(--urlbarView-item-block-padding); } @@ -1089,7 +1072,7 @@ font-weight: var(--font-weight-bold); border-radius: var(--toolbarbutton-border-radius); border: 1px solid transparent; - padding: 0.4em 0.6em; + padding: .4em .6em; display: inline-flex; align-items: center; background-color: var(--urlbarView-action-button-background-color); @@ -1098,7 +1081,7 @@ > img { width: 16px; height: 16px; - margin-inline-end: 0.4em; + margin-inline-end: .4em; -moz-context-properties: fill, fill-opacity; } @@ -1115,11 +1098,11 @@ border-top-color: var(--identity-tab-color); } - .urlbarView[action-override] &[data-action="tabswitch"] { + .urlbarView[action-override] &[data-action=tabswitch] { display: none; } - &[data-action^="tabgroup-"] { + &[data-action^=tabgroup-] { color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark)); background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)); max-width: 30%; @@ -1153,7 +1136,7 @@ border-top: 1px solid var(--urlbarView-separator-color); } -:root[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) { +:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) { padding-block: 15px; } @@ -1190,7 +1173,7 @@ #urlbar .search-setting-button { /* Force empty space before the button */ - margin-inline-start: calc(32px - /* settings start padding */ 8px); + margin-inline-start: calc(32px - /* settings start padding */ 8px ); } .urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, @@ -1245,7 +1228,7 @@ --panel-border-color: var(--arrowpanel-border-color); } -#PopupSearchAutoComplete::part(content) { +#PopupSearchAutoComplete::part(content) { --panel-padding: var(--panel-subview-body-padding); /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout * for this (though it doesn't really hurt) */ @@ -1253,9 +1236,9 @@ } @media not (prefers-contrast) { - #PopupSearchAutoComplete::part(content) { + #PopupSearchAutoComplete::part(content) { /* Remove the top border since the panel is flush with the input. */ - border-top-width: 0; + border-top-width: 0; } } diff --git a/browser/themes/shared/webRTC-indicator.css b/browser/themes/shared/webRTC-indicator.css index 1ce7f89db8aa..e0ffb5a11515 100644 --- a/browser/themes/shared/webRTC-indicator.css +++ b/browser/themes/shared/webRTC-indicator.css @@ -11,23 +11,23 @@ border: 0; border-radius: 5px; --indicator-height: 32px; - --indicator-background-color: rgb(249, 249, 250); - --indicator-color: rgb(12, 12, 13); - --indicator-border-color: hsla(0, 0%, 0%, 0.32); + --indicator-background-color: rgb(249,249,250); + --indicator-color: rgb(12,12,13); + --indicator-border-color: hsla(0,0%,0%,.32); --indicator-icon-fill-opacity: 0.8; - --indicator-item-separator: 1px solid hsla(210, 4%, 10%, 0.14); - --indicator-stop-button-background-color: rgb(0, 96, 223); - --indicator-stop-button-hover-background-color: rgb(0, 62, 170); - --indicator-stop-button-color: rgb(255, 255, 255); - --minimize-button-background-color: hsla(240, 5%, 5%, 0.1); - --minimize-button-hover-background-color: hsla(240, 5%, 5%, 0.15); - --minimize-button-active-background-color: hsla(240, 5%, 5%, 0.2); - --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.4); - --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6); - --control-icon-checked-background-color: hsla(10, 100%, 50%, 0.16); - --control-icon-checked-icon-fill: rgb(215, 0, 34); - --control-icon-checked-hover-background-color: hsla(10, 100%, 50%, 0.24); - --control-icon-checked-active-background-color: hsla(10, 100%, 50%, 0.32); + --indicator-item-separator: 1px solid hsla(210,4%,10%,.14); + --indicator-stop-button-background-color: rgb(0,96,223); + --indicator-stop-button-hover-background-color: rgb(0,62,170); + --indicator-stop-button-color: rgb(255,255,255); + --minimize-button-background-color: hsla(240,5%,5%,.1); + --minimize-button-hover-background-color: hsla(240,5%,5%,.15); + --minimize-button-active-background-color: hsla(240,5%,5%,.2); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.4); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); + --control-icon-checked-background-color: hsla(10,100%,50%,.16); + --control-icon-checked-icon-fill: rgb(215,0,34); + --control-icon-checked-hover-background-color: hsla(10,100%,50%,.24); + --control-icon-checked-active-background-color: hsla(10,100%,50%,.32); max-height: var(--indicator-height); } @@ -37,15 +37,15 @@ --indicator-color: rgb(249, 249, 250); --indicator-border-color: hsl(240, 1%, 40%); --indicator-item-separator: 1px solid rgb(249, 249, 250); - --minimize-button-background-color: rgba(249, 249, 250, 0.1); - --minimize-button-hover-background-color: rgba(249, 249, 250, 0.15); - --minimize-button-active-background-color: rgba(249, 249, 250, 0.2); - --control-icon-unchecked-hover-background-color: rgba(249, 249, 250, 0.15); - --control-icon-unchecked-active-background-color: rgba(249, 249, 250, 0.2); - --control-icon-checked-background-color: hsla(343, 100%, 58%, 0.16); - --control-icon-checked-icon-fill: rgb(255, 40, 102); - --control-icon-checked-hover-background-color: hsla(343, 100%, 58%, 0.24); - --control-icon-checked-active-background-color: hsla(343, 100%, 58%, 0.32); + --minimize-button-background-color: rgba(249,249,250,0.1); + --minimize-button-hover-background-color: rgba(249,249,250,0.15); + --minimize-button-active-background-color: rgba(249,249,250,0.2); + --control-icon-unchecked-hover-background-color: rgba(249,249,250,0.15); + --control-icon-unchecked-active-background-color: rgba(249,249,250,0.2); + --control-icon-checked-background-color: hsla(343,100%,58%,.16); + --control-icon-checked-icon-fill: rgb(255,40,102); + --control-icon-checked-hover-background-color: hsla(343,100%,58%,.24); + --control-icon-checked-active-background-color: hsla(343,100%,58%,.32); } } @@ -120,7 +120,7 @@ input[type="checkbox"] { :root:not([sharingaudio]) > body > #device-share > #microphone-mute-toggle, :root:not([sharingvideo],[sharingaudio]) > body > #device-share, :root:not([sharingvideo],[sharingaudio]) > body > #device-share + .separator { - display: none; + display:none; } xul|menu { @@ -201,7 +201,7 @@ xul|menu { } .stop-button:hover { - background-color: var(--indicator-stop-button-hover-background-color); + background-color: var(--indicator-stop-button-hover-background-color); } #window-controls { @@ -312,18 +312,18 @@ xul|menu { --indicator-color: -moz-DialogText; --indicator-border-color: InactiveBorder; --indicator-item-separator: 1px solid ThreeDShadow; - --indicator-stop-button-background-color: hsla(0, 0%, 70%, 0.2); - --indicator-stop-button-hover-background-color: hsla(0, 0%, 70%, 0.4); + --indicator-stop-button-background-color: hsla(0,0%,70%,.2); + --indicator-stop-button-hover-background-color: hsla(0,0%,70%,.4); --indicator-stop-button-color: inherit; - --minimize-button-background-color: hsla(0, 0%, 70%, 0.2); - --minimize-button-hover-background-color: hsla(0, 0%, 70%, 0.4); - --minimize-button-active-background-color: hsla(0, 0%, 70%, 0.6); - --control-icon-unchecked-hover-background-color: hsla(0, 0%, 70%, 0.2); - --control-icon-unchecked-active-background-color: hsla(0, 0%, 70%, 0.6); + --minimize-button-background-color: hsla(0,0%,70%,.2); + --minimize-button-hover-background-color: hsla(0,0%,70%,.4); + --minimize-button-active-background-color: hsla(0,0%,70%,.6); + --control-icon-unchecked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-unchecked-active-background-color: hsla(0,0%,70%,.6); --control-icon-checked-background-color: SelectedItem; --control-icon-checked-icon-fill: SelectedItemText; - --control-icon-checked-hover-background-color: hsla(0, 0%, 70%, 0.2); - --control-icon-checked-active-background-color: hsla(0, 0%, 70%, 0.6); + --control-icon-checked-hover-background-color: hsla(0,0%,70%,.2); + --control-icon-checked-active-background-color: hsla(0,0%,70%,.6); } #minimize, diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 2c8bf4c3d9b0..007aec91e089 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -15,7 +15,7 @@ color: inherit; &[_moz-menuactive] { - background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22)); + background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22)); color: inherit; @media (prefers-contrast) { @@ -31,7 +31,7 @@ /* stylelint-disable-next-line media-query-no-invalid */ @media -moz-pref("widget.windows.mica.toplevel-backdrop", 2) { /* For acrylic, do the same we do for popups to guarantee some contrast */ - background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6)); + background-color: light-dark(rgba(255, 255, 255, .6), rgba(0, 0, 0, .6)); } } @@ -57,7 +57,7 @@ /* This is needed for Windows 10, see bug 1961257 */ @media (-moz-windows-accent-color-in-titlebar) { :root[customtitlebar][sizemode="normal"] #navigator-toolbox { - border-top: 0.5px solid ActiveBorder; + border-top: .5px solid ActiveBorder; &:-moz-window-inactive { border-top-color: InactiveBorder; } @@ -158,19 +158,19 @@ @media not (prefers-contrast) { .titlebar-button:hover { - background-color: light-dark(hsla(0, 0%, 0%, 0.12), hsla(0, 0%, 100%, 0.22)); + background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22)); &:active { - background-color: light-dark(hsla(0, 0%, 0%, 0.22), hsla(0, 0%, 100%, 0.32)); + background-color: light-dark(hsla(0,0%,0%,.22), hsla(0,0%,100%,.32)); } } .titlebar-close:hover { stroke: white; - background-color: hsl(355, 86%, 49%); + background-color: hsl(355,86%,49%); &:active { - background-color: hsl(355, 82%, 69%); + background-color: hsl(355,82%,69%); } } } @@ -324,7 +324,7 @@ @media (prefers-contrast) { /* For high contrast themes. XXX is this needed anymore? */ #tabbrowser-tabpanels, - :root[privatebrowsingmode="temporary"] #tabbrowser-tabpanels { + :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels { background-color: -moz-default-background-color; } } diff --git a/browser/themes/windows/downloads/allDownloadsView.css b/browser/themes/windows/downloads/allDownloadsView.css index 5cd074f941bf..6c71a5e01daf 100644 --- a/browser/themes/windows/downloads/allDownloadsView.css +++ b/browser/themes/windows/downloads/allDownloadsView.css @@ -30,7 +30,6 @@ color: inherit; background-color: transparent; /* four gradients for the bevel highlights on each edge, one for blue background */ - /* prettier-ignore */ background-image: linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px), linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px), @@ -39,7 +38,7 @@ linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3)); background-clip: content-box; border-radius: 6px; - outline: 1px solid rgb(124, 163, 206); + outline: 1px solid rgb(124,163,206); outline-offset: -2px; } } diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css index 016c3403a767..e54d83986cb7 100644 --- a/browser/themes/windows/places/organizer.css +++ b/browser/themes/windows/places/organizer.css @@ -35,25 +35,25 @@ @media not (prefers-contrast) { :root { - --organizer-color: rgb(21, 20, 26); - --organizer-deemphasized-color: rgb(91, 91, 102); + --organizer-color: rgb(21,20,26); + --organizer-deemphasized-color: rgb(91,91,102); - --organizer-toolbar-background: rgb(249, 249, 251); - --organizer-pane-background: rgb(240, 240, 244); + --organizer-toolbar-background: rgb(249,249,251); + --organizer-pane-background: rgb(240,240,244); --organizer-content-background: white; - --organizer-hover-background: rgba(207, 207, 216, 0.66); + --organizer-hover-background: rgba(207,207,216,.66); --organizer-hover-color: var(--organizer-color); - --organizer-selected-background: rgb(207, 207, 216); + --organizer-selected-background: rgb(207,207,216); --organizer-selected-color: var(--organizer-color); - --organizer-focus-selected-background: rgb(0, 97, 224); - --organizer-focus-selected-color: rgb(251, 251, 254); - --organizer-outline-color: rgb(0, 97, 224); + --organizer-focus-selected-background: rgb(0,97,224); + --organizer-focus-selected-color: rgb(251,251,254); + --organizer-outline-color: rgb(0,97,224); --organizer-separator-color: var(--organizer-pane-field-border-color); --organizer-border-color: ThreeDLightShadow; - --organizer-toolbar-field-background: rgb(240, 240, 244); + --organizer-toolbar-field-background: rgb(240,240,244); --organizer-toolbar-field-background-focused: Field; --organizer-toolbar-field-border-color: transparent; --organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent); @@ -63,22 +63,22 @@ @media (prefers-color-scheme: dark) { :root { - --organizer-color: rgb(251, 251, 254); - --organizer-deemphasized-color: rgb(191, 191, 201); + --organizer-color: rgb(251,251,254); + --organizer-deemphasized-color: rgb(191,191,201); - --organizer-toolbar-background: rgb(43, 42, 51); - --organizer-pane-background: rgb(35, 34, 43); - --organizer-content-background: rgb(28, 27, 34); + --organizer-toolbar-background: rgb(43,42,51); + --organizer-pane-background: rgb(35,34,43); + --organizer-content-background: rgb(28,27,34); - --organizer-hover-background: rgb(82, 82, 94); - --organizer-selected-background: rgb(91, 91, 102); - --organizer-focus-selected-background: color-mix(in srgb, rgb(0, 221, 255) 80%, currentColor); - --organizer-focus-selected-color: rgb(43, 42, 51); - --organizer-outline-color: rgb(0, 221, 255); + --organizer-hover-background: rgb(82,82,94); + --organizer-selected-background: rgb(91,91,102); + --organizer-focus-selected-background: color-mix(in srgb, rgb(0,221,255) 80%, currentColor); + --organizer-focus-selected-color: rgb(43,42,51); + --organizer-outline-color: rgb(0,221,255); - --organizer-toolbar-field-background: rgb(28, 27, 34); - --organizer-toolbar-field-background-focused: rgb(66, 65, 77); - scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + --organizer-toolbar-field-background: rgb(28,27,34); + --organizer-toolbar-field-background-focused: rgb(66,65,77); + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); } } } @@ -241,7 +241,7 @@ /* Use box-shadow to draw a bottom border instead of border-bottom * because otherwise the items on contentView won't be perfectly * aligned with the items on the sidebar. */ - box-shadow: inset 0 -1px var(--organizer-border-color); + box-shadow: inset 0 -1px var(--organizer-border-color) } tree { diff --git a/config/tests/ref-simple/one/some.css b/config/tests/ref-simple/one/some.css index c8925c26b31e..a8a3ee47cc07 100644 --- a/config/tests/ref-simple/one/some.css +++ b/config/tests/ref-simple/one/some.css @@ -1,6 +1,6 @@ #div: { - /* this is a ID rule, and should stay intact */ +/* this is a ID rule, and should stay intact */ } -[lang="ab-X-stuff"] { - /* this selector should match content with lang="ab-X-stuff" */ +[lang=ab-X-stuff] { +/* this selector should match content with lang="ab-X-stuff" */ } diff --git a/config/tests/src-simple/thesrcdir/some.css b/config/tests/src-simple/thesrcdir/some.css index 717a8a6ade64..36171b4bba01 100644 --- a/config/tests/src-simple/thesrcdir/some.css +++ b/config/tests/src-simple/thesrcdir/some.css @@ -1,6 +1,6 @@ #div: { - /* this is a ID rule, and should stay intact */ +/* this is a ID rule, and should stay intact */ } -%expand [lang="__AB_CD__"] { - /* this selector should match content with lang="ab-X-stuff" */ +%expand [lang=__AB_CD__] { +/* this selector should match content with lang="ab-X-stuff" */ } diff --git a/devtools/client/aboutdebugging/src/base.css b/devtools/client/aboutdebugging/src/base.css index b0f861f7688c..7b482c247b32 100644 --- a/devtools/client/aboutdebugging/src/base.css +++ b/devtools/client/aboutdebugging/src/base.css @@ -5,10 +5,10 @@ :root { /* Colors from common.css */ --in-content-background-color: light-dark(#fff, rgb(28, 27, 34)); - --in-content-border-color: light-dark(#d7d7db, rgba(249, 249, 250, 0.2)); + --in-content-border-color: light-dark(#d7d7db, rgba(249,249,250,0.2)); --in-content-primary-button-background: light-dark(rgb(0, 97, 224), #00ddff); - --in-content-primary-button-background-active: light-dark(rgb(5, 62, 148), rgb(170, 242, 255)); - --in-content-primary-button-background-hover: light-dark(rgb(2, 80, 187), rgb(128, 235, 255)); + --in-content-primary-button-background-active: light-dark(rgb(5, 62, 148), rgb(170,242,255)); + --in-content-primary-button-background-hover: light-dark(rgb(2, 80, 187), rgb(128,235,255)); --in-content-text-color: light-dark(#0c0c0d, #eee); --bg-color: var(--in-content-background-color); @@ -20,24 +20,22 @@ --box-background: light-dark(#fff, rgb(35, 34, 43)); --box-border-color: var(--in-content-border-color); - /* prettier-ignore */ --button-background-color: light-dark( var(--grey-90-a10), /* Note: this is from Photon Default button */ rgb(72, 72, 84) ); - /* prettier-ignore */ --button-color: light-dark( var(--grey-90), /* Note: this is from Photon Default button */ var(--white-100) ); - /* prettier-ignore */ --button-hover-background-color: light-dark( var(--grey-90-a20), /* Note: this is from Photon Default button */ rgb(92, 92, 106) ); + --button-active-background-color: var(--grey-90-a30); /* Note: this is from Photon Default button */ - --category-background-hover: rgba(12, 12, 13, 0.1); - --category-text: light-dark(rgba(12, 12, 13), var(--text-color)); + --category-background-hover: rgba(12,12,13,0.1); + --category-text: light-dark(rgba(12,12,13), var(--text-color)); --category-text-selected: var(--in-content-primary-button-background); --fieldpair-text-color: light-dark(var(--grey-50), var(--text-color)); @@ -63,9 +61,9 @@ --link-color-hover: var(--in-content-primary-button-background-hover); --primary-button-background-color: light-dark(var(--blue-60), #00ddff); - --primary-button-color: light-dark(var(--white-100), rgb(43, 42, 51)); - --primary-button-hover-background-color: light-dark(var(--blue-70), rgb(128, 235, 255)); - --primary-button-active-background-color: light-dark(var(--blue-80), rgb(170, 242, 255)); + --primary-button-color: light-dark(var(--white-100), rgb(43,42,51)); + --primary-button-hover-background-color: light-dark(var(--blue-70), rgb(128,235,255)); + --primary-button-active-background-color: light-dark(var(--blue-80), rgb(170,242,255)); --popup-header-background-color: light-dark(var(--grey-20), var(--grey-50)); --popup-header-color: light-dark(var(--grey-90), var(--white-100)); @@ -127,6 +125,7 @@ --card-shadow-blur-radius: var(--base-unit); + /* * Variables particular to about:debugging */ @@ -177,8 +176,7 @@ a:active { color: var(--link-color-active); } -p, -h1 { +p, h1 { margin: 0; } @@ -317,15 +315,13 @@ h1 { /* Form controls */ -.default-button, -.default-input { +.default-button, .default-input { box-sizing: border-box; font-size: 1em; } /* Buttons from Photon */ -.default-button, -.primary-button { +.default-button, .primary-button { appearance: none; margin: 0; height: calc(var(--base-unit) * 8); @@ -339,14 +335,12 @@ Form controls } /* Disabled state for buttons from Photon */ -.default-button:disabled, -.primary-button:disabled { +.default-button:disabled, .primary-button:disabled { opacity: 0.4; } /* Smaller variant size for buttons, from Photon */ -.default-button--micro, -.primary-button--micro { +.default-button--micro, .primary-button--micro { padding-inline-start: calc(2 * var(--base-unit)); padding-inline-end: calc(2 * var(--base-unit)); font-size: var(--micro-font-size); @@ -392,10 +386,9 @@ Form controls } .ghost-button { - fill: ButtonText; + fill: ButtonText; } - /* prettier-ignore */ :is( .default-button, .ghost-button, diff --git a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css index aa2d98ff72d5..e6fcd9dd7e04 100644 --- a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css +++ b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css @@ -2,6 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /** * Layout for the runtime info container is: * @@ -19,8 +20,8 @@ grid-column-gap: var(--main-heading-icon-gap); grid-template-areas: - "icon title action" - "icon subtitle ."; + "icon title action" + "icon subtitle ."; grid-template-columns: var(--main-heading-icon-size) 1fr max-content; grid-template-rows: 1fr max-content; diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css index eda98d02a5de..a693bf41135a 100644 --- a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css +++ b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css @@ -16,9 +16,8 @@ .connect-page__usb-section__heading { display: grid; align-items: center; - grid-template-areas: - "title . toggle" - "status . toggle"; + grid-template-areas: "title . toggle" + "status . toggle"; grid-template-columns: auto 1fr auto; grid-column-gap: calc(var(--base-unit) * 2); grid-row-gap: var(--base-unit); diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css b/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css index c08b849cf6f4..4349b147b09d 100644 --- a/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css +++ b/devtools/client/aboutdebugging/src/components/connect/ConnectSection.css @@ -40,7 +40,8 @@ .connect-section__content { line-height: 1.5; - padding-inline-start: calc(var(--base-unit) * 5 + var(--header-col-gap) + var(--icon-size)); + padding-inline-start: calc(var(--base-unit) * 5 + + var(--header-col-gap) + var(--icon-size)); padding-inline-end: calc(var(--base-unit) * 5); } diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css index 04920019b0ed..f049f33b2387 100644 --- a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css +++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css @@ -22,11 +22,10 @@ grid-template-columns: calc(var(--base-unit) * 8) 1fr max-content; grid-template-rows: 1fr minmax(0, auto) auto; grid-column-gap: calc(var(--base-unit) * 2); - grid-template-areas: - "icon name action" - "icon subname action" - "detail detail detail" - "additional_actions additional_actions additional_actions"; + grid-template-areas: "icon name action" + "icon subname action" + "detail detail detail" + "additional_actions additional_actions additional_actions"; margin-block-end: calc(var(--base-unit) * 4); padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2); diff --git a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css index 1d6ed8bb2ee1..616b4ac28cb0 100644 --- a/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css +++ b/devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css @@ -14,7 +14,7 @@ } .debug-target-pane__icon { - transition: transform 150ms cubic-bezier(0.07, 0.95, 0, 1); + transition: transform 150ms cubic-bezier(.07, .95, 0, 1); transform: rotate(90deg); } diff --git a/devtools/client/aboutdebugging/src/components/shared/Message.css b/devtools/client/aboutdebugging/src/components/shared/Message.css index 6c62efe8be7b..76aa2c616cf4 100644 --- a/devtools/client/aboutdebugging/src/components/shared/Message.css +++ b/devtools/client/aboutdebugging/src/components/shared/Message.css @@ -40,7 +40,8 @@ display: grid; grid-column-gap: var(--base-unit); grid-template-columns: calc(var(--base-unit) * 6) 1fr auto; - grid-template-areas: "icon body button"; + grid-template-areas: + "icon body button"; margin: calc(var(--base-unit) * 2) 0; padding: var(--base-unit); -moz-context-properties: fill; diff --git a/devtools/client/accessibility/accessibility.css b/devtools/client/accessibility/accessibility.css index dd7dee90e04b..1f06e1e3f280 100644 --- a/devtools/client/accessibility/accessibility.css +++ b/devtools/client/accessibility/accessibility.css @@ -217,7 +217,7 @@ body { :root .theme-body .tooltip-container.tooltip-visible[type="doorhanger"] > .tooltip-arrow::before { border: 1px solid var(--theme-popup-border-color); border-radius: var(--theme-popup-border-radius); - box-shadow: 0 0 4px hsla(210, 4%, 10%, 0.2); + box-shadow: 0 0 4px hsla(210,4%,10%,.2); } .tooltip-container .menuitem > .command[role="link"] { @@ -288,7 +288,7 @@ body { } .description .link, -.accessibility-check-annotation .link { +.accessibility-check-annotation .link { color: var(--accessibility-link-color); cursor: pointer; outline: 0; @@ -301,9 +301,7 @@ body { .description .link:focus:not(:active), .accessibility-check-annotation .link:focus:not(:active) { - box-shadow: - 0 0 0 2px var(--accessibility-toolbar-focus), - 0 0 0 4px var(--accessibility-toolbar-focus-alpha30); + box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30); border-radius: 2px; } @@ -314,8 +312,7 @@ body { } /* TreeView Customization */ -.treeTable thead, -.treeTable tbody { +.treeTable thead, .treeTable tbody { display: block; } @@ -361,8 +358,7 @@ body { min-width: 50%; } -.treeTable:focus, -.treeTable tbody:focus { +.treeTable:focus, .treeTable tbody:focus { outline: 0; } @@ -497,7 +493,7 @@ body { .split-box:not(.horz) .right-sidebar { position: fixed; width: inherit; - height: var(--accessibility-main-height); + height: var(--accessibility-main-height) } /* Tree customization */ @@ -553,6 +549,7 @@ body { } } + .accessible .tree .node:not(.focused):hover { background-color: var(--theme-selection-background-hover); } @@ -761,10 +758,7 @@ body { width: 14px; display: inline-flex; background-color: var(--accessibility-contrast-color); - box-shadow: - 0 0 0 1px var(--grey-40), - 6px 5px var(--accessibility-contrast-bg), - 6px 5px 0 1px var(--grey-40); + box-shadow: 0 0 0 1px var(--grey-40), 6px 5px var(--accessibility-contrast-bg), 6px 5px 0 1px var(--grey-40); margin-inline-end: 11px; } diff --git a/devtools/client/application/application.css b/devtools/client/application/application.css index 2bac566ca5a3..61b616faec69 100644 --- a/devtools/client/application/application.css +++ b/devtools/client/application/application.css @@ -2,11 +2,12 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* + /* * Global styles */ @import "chrome://devtools/content/application/src/base.css"; + /* * Components */ diff --git a/devtools/client/application/src/base.css b/devtools/client/application/src/base.css index 6a115f9e3da7..85b475a875ab 100644 --- a/devtools/client/application/src/base.css +++ b/devtools/client/application/src/base.css @@ -22,7 +22,7 @@ --base-line-height: 1.8; --list-line-height: 1.25; - /* Global colours */ + /* Global colours */ --separator-color: var(--theme-splitter-color); --bg-color: var(--theme-toolbar-background); --highlight-color: var(--theme-toolbar-background-hover); diff --git a/devtools/client/application/src/components/App.css b/devtools/client/application/src/components/App.css index 69a5556bf263..e0bcef7d2dc2 100644 --- a/devtools/client/application/src/components/App.css +++ b/devtools/client/application/src/components/App.css @@ -19,7 +19,7 @@ a.disabled-link:visited { } /* wide layout -> two columns, 1 row */ -@media (min-width: 701px) { +@media(min-width: 701px) { .app { grid-template-columns: calc(var(--base-unit) * 50) auto; height: 100vh; @@ -27,7 +27,7 @@ a.disabled-link:visited { } /* vertical layout -> 1 column, 2 rows */ -@media (max-width: 700px) { +@media(max-width: 700px) { .app { grid-template-rows: auto 1fr; } diff --git a/devtools/client/application/src/components/manifest/ManifestColorItem.css b/devtools/client/application/src/components/manifest/ManifestColorItem.css index 8d00b1128d37..92dadec27192 100644 --- a/devtools/client/application/src/components/manifest/ManifestColorItem.css +++ b/devtools/client/application/src/components/manifest/ManifestColorItem.css @@ -12,16 +12,13 @@ .manifest-item__color::before { display: inline-block; - content: ""; + content: ''; background-color: #fff; - background-image: - linear-gradient(var(--color-value), var(--color-value)) /* --color-value is injected via React */, + background-image: linear-gradient(var(--color-value), var(--color-value)), /* injected via React */ linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 6px 6px; - background-position: - 0 0, - 3px 3px; + background-position: 0 0, 3px 3px; border-radius: 50%; width: calc(var(--base-unit) * 3); height: calc(var(--base-unit) * 3); diff --git a/devtools/client/application/src/components/routing/PageSwitcher.css b/devtools/client/application/src/components/routing/PageSwitcher.css index 2bac3659cb3a..e713adb1bf6c 100644 --- a/devtools/client/application/src/components/routing/PageSwitcher.css +++ b/devtools/client/application/src/components/routing/PageSwitcher.css @@ -2,6 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* * Page container for worker + manifest views */ diff --git a/devtools/client/application/src/components/routing/Sidebar.css b/devtools/client/application/src/components/routing/Sidebar.css index f1554aae6b75..872f5cca867c 100644 --- a/devtools/client/application/src/components/routing/Sidebar.css +++ b/devtools/client/application/src/components/routing/Sidebar.css @@ -2,31 +2,32 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* * Sidebar list container */ .sidebar { - background-color: var(--bg-color); + background-color: var(--bg-color); } /* vertical layout -> the sidebar is the first row */ -@media (max-width: 700px) { - .sidebar { - border-block-end: 1px solid var(--separator-color); - } +@media(max-width: 700px) { + .sidebar { + border-block-end: 1px solid var(--separator-color); + } } /* wide layout -> the sidebar occupies a whole column on the side */ -@media (min-width: 701px) { - .sidebar { - min-height: 100vh; - border-inline-end: 1px solid var(--separator-color); - } +@media(min-width: 701px) { + .sidebar { + min-height: 100vh; + border-inline-end: 1px solid var(--separator-color); + } } .sidebar__list { - list-style: none; - padding: 0; - font-size: var(--body-10-font-size); - font-weight: var(--body-10-font-weight); + list-style: none; + padding: 0; + font-size: var(--body-10-font-size); + font-weight: var(--body-10-font-weight); } diff --git a/devtools/client/application/src/components/routing/SidebarItem.css b/devtools/client/application/src/components/routing/SidebarItem.css index 82adaef8320b..f1852748ab7f 100644 --- a/devtools/client/application/src/components/routing/SidebarItem.css +++ b/devtools/client/application/src/components/routing/SidebarItem.css @@ -2,6 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /* * Sidebar list items */ @@ -16,17 +17,17 @@ } .sidebar-item--selected { - background-color: var(--theme-selection-background); - color: var(--theme-selection-color); + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); } .sidebar-item:not(.sidebar-item--selected):hover { - background-color: var(--highlight-color); + background-color: var(--highlight-color); } .sidebar-item__icon { - height: calc(var(--base-unit) * 4); - width: calc(var(--base-unit) * 4); - -moz-context-properties: fill; - fill: currentColor; + height: calc(var(--base-unit) * 4); + width: calc(var(--base-unit) * 4); + -moz-context-properties: fill; + fill: currentColor; } diff --git a/devtools/client/application/src/components/service-workers/Registration.css b/devtools/client/application/src/components/service-workers/Registration.css index e37d534061e5..84b6de58e1fd 100644 --- a/devtools/client/application/src/components/service-workers/Registration.css +++ b/devtools/client/application/src/components/service-workers/Registration.css @@ -24,14 +24,13 @@ grid-template-rows: minmax(calc(var(--base-unit) * 6), auto) 1fr auto; grid-column-gap: calc(4 * var(--base-unit)); grid-row-gap: calc(2 * var(--base-unit)); - grid-template-areas: - "header header-controls" - "workers workers" - "footer-controls footer-controls"; + grid-template-areas: "header header-controls" + "workers workers" + "footer-controls footer-controls"; } /* vertical layout */ -@media (max-width: 700px) { +@media(max-width: 700px) { .registration__controls { grid-area: footer-controls; justify-self: end; @@ -39,7 +38,7 @@ } /* wide layout */ -@media (min-width: 701px) { +@media(min-width: 701px) { .registration__controls { grid-area: header-controls; } diff --git a/devtools/client/application/src/components/service-workers/Worker.css b/devtools/client/application/src/components/service-workers/Worker.css index 7eb7f352a6b9..e44b49ef6ba5 100644 --- a/devtools/client/application/src/components/service-workers/Worker.css +++ b/devtools/client/application/src/components/service-workers/Worker.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/* + /* * The current layout of a service worker item is * * +------------+------------------------------+ @@ -15,9 +15,8 @@ .worker { display: grid; grid-template-columns: auto 1fr; - grid-template-areas: - "icon source" - "icon misc"; + grid-template-areas: "icon source" + "icon misc"; column-gap: calc(var(--base-unit) * 2); row-gap: var(--base-unit); @@ -70,8 +69,7 @@ --status-border-color: var(--theme-text-color-alt); } -.worker__status--installing, -.worker__status--default { +.worker__status--installing, .worker__status--default { --status-bg-color: transparent; --status-border-color: var(--theme-text-color-alt); } diff --git a/devtools/client/application/src/components/ui/UIButton.css b/devtools/client/application/src/components/ui/UIButton.css index 6f0bb86915f9..a055b8167449 100644 --- a/devtools/client/application/src/components/ui/UIButton.css +++ b/devtools/client/application/src/components/ui/UIButton.css @@ -54,8 +54,7 @@ } .ui-button:focus { - box-shadow: - 0 0 0 1px var(--blue-50) inset, + box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50), 0 0 0 4px var(--blue-50-a30); } diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.css b/devtools/client/debugger/src/components/Editor/Breakpoints.css index ce0f2b115ecc..157b1f33a984 100644 --- a/devtools/client/debugger/src/components/Editor/Breakpoints.css +++ b/devtools/client/debugger/src/components/Editor/Breakpoints.css @@ -62,17 +62,16 @@ * The solution is to make the line number take the whole gutters element width, * using a pseudo-element so it will widen the :hover target for line number elements. */ - /* prettier-ignore */ :is( &:not(.cm6-gutter-breakpoint), &.cm6-gutter-breakpoint .breakpoint-marker - )::after { - content: ""; - position: absolute; - height: 1lh; - right: 0; - left: 0; - } + )::after { + content: ""; + position: absolute; + height: 1lh; + right: 0; + left: 0; + } } /* CodeMirror puts a padding on the line gutter, but we want the breakpoint to take the whole gutter */ @@ -119,7 +118,9 @@ } /* End CM6 */ -.editor-wrapper :not(.new-breakpoint) > .CodeMirror-gutter-wrapper > .CodeMirror-linenumber:hover::after { +.editor-wrapper :not(.new-breakpoint) + > .CodeMirror-gutter-wrapper + > .CodeMirror-linenumber:hover::after { content: ""; position: absolute; /* paint below the number */ @@ -130,7 +131,8 @@ bottom: 0; height: 15px; background-color: var(--gutter-hover-background-color); - mask: url(chrome://devtools/content/debugger/images/breakpoint.svg) no-repeat; + mask: url(chrome://devtools/content/debugger/images/breakpoint.svg) + no-repeat; mask-size: auto 15px; mask-position: right; } diff --git a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css index 86ecbbbd9a0a..32f47379b061 100644 --- a/devtools/client/debugger/src/components/Editor/ConditionalPanel.css +++ b/devtools/client/debugger/src/components/Editor/ConditionalPanel.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at . */ -/* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */ + /* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */ .conditional-breakpoint-panel-container { padding-block: 1em; } diff --git a/devtools/client/debugger/src/components/Editor/Editor.css b/devtools/client/debugger/src/components/Editor/Editor.css index 4b98346051d0..50e57a16c90d 100644 --- a/devtools/client/debugger/src/components/Editor/Editor.css +++ b/devtools/client/debugger/src/components/Editor/Editor.css @@ -156,7 +156,7 @@ html[dir="rtl"] .editor-mount { position: absolute; top: 0; bottom: 0; - left: calc(50% - 1px); + left: calc( 50% - 1px ); width: 1px; height: 1.5em; } @@ -192,8 +192,7 @@ html[dir="rtl"] .editor-mount { } @keyframes fade-highlight-out { - 0%, - 30% { + 0%, 30% { /* We want to use a color with some transparency so text selection is visible through it */ background-color: var(--theme-contrast-background-alpha); } diff --git a/devtools/client/debugger/src/components/Editor/Preview/Popup.css b/devtools/client/debugger/src/components/Editor/Preview/Popup.css index 54998fb85d79..f06dce8e7dd3 100644 --- a/devtools/client/debugger/src/components/Editor/Preview/Popup.css +++ b/devtools/client/debugger/src/components/Editor/Preview/Popup.css @@ -80,8 +80,7 @@ margin-bottom: 5px; } -.preview-tracer-header, -.preview-tracer-warning { +.preview-tracer-header, .preview-tracer-warning { display: flex; gap: 5px; padding: 5px; @@ -189,6 +188,8 @@ z-index: 100; } + + .theme-dark .tooltip .preview-popup { border-color: var(--theme-body-color); } diff --git a/devtools/client/debugger/src/components/Editor/Tabs.css b/devtools/client/debugger/src/components/Editor/Tabs.css index 7ace76b293cf..b6c210c212bd 100644 --- a/devtools/client/debugger/src/components/Editor/Tabs.css +++ b/devtools/client/debugger/src/components/Editor/Tabs.css @@ -63,8 +63,7 @@ width: 100%; height: 2px; background-color: var(--tab-line-color, transparent); - transition: - transform 250ms var(--animation-curve), + transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve); opacity: 0; transform: scaleX(0); @@ -96,7 +95,7 @@ transform: scaleX(1); } -.source-tab .img:is(.prettyPrint, .blackBox) { +.source-tab .img:is(.prettyPrint,.blackBox) { mask-size: 14px; } diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css index 981c48540bfc..0b6445c55589 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css +++ b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css @@ -87,6 +87,7 @@ gap: 4px; } + .project-text-search .refresh-btn { background-color: transparent; padding: 2px; @@ -97,7 +98,7 @@ width: var(--size); aspect-ratio: 1; box-sizing: content-box; - grid-template-rows: var(--highlight-size) var(--remain-size); + grid-template-rows: var(--highlight-size) var(--remain-size); grid-template-columns: var(--remain-size) var(--highlight-size); &.devtools-button:focus-visible { @@ -113,7 +114,7 @@ width: 5px; background-color: var(--blue-40); border-radius: 100%; - outline: 1px solid var(--theme-sidebar-background); + outline: 1px solid var(--theme-sidebar-background); z-index: 1; } @@ -121,8 +122,7 @@ grid-row: 1 / -1; grid-column: 1 / -1; transition: rotate 0.2s; - width: 14px; - height: 14px; + width: 14px; height: 14px; .highlight & { rotate: 0.75turn; diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css b/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css index dee6600c41a5..00fb7b0b3aab 100644 --- a/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css +++ b/devtools/client/debugger/src/components/PrimaryPanes/Tracer.css @@ -20,9 +20,8 @@ max-height: 100%; display: grid; - grid-template-areas: - "toolbar toolbar" - "timeline tabs"; + grid-template-areas: "toolbar toolbar" + "timeline tabs"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; @@ -61,7 +60,7 @@ --icon-inline-padding: 4px; background-color: var(--theme-warning-background); - color: var(--theme-warning-color); + color: var(--theme-warning-color); border-block-end: 1px solid var(--theme-splitter-color); padding: 1em; padding-inline-start: calc(var(--icon-inline-padding) * 2 + var(--icon-size)); @@ -111,6 +110,7 @@ } } + .tracer-tab .call-tree-container { display: flex; flex-direction: column; @@ -132,8 +132,7 @@ background-color: var(--theme-toolbar-error-background); border-bottom: 1px solid var(--theme-splitter-color); } - .search-exception, - .search-value { + .search-exception, .search-value { padding: 5px 10px; border-bottom: 1px solid var(--theme-splitter-color); } @@ -142,6 +141,7 @@ } } + .tracer-tab .tree { flex: 1; overflow-x: auto; @@ -179,8 +179,7 @@ color: var(--theme-selection-color); } -.tracer-tab .frame-link.match, -.tracer-tab .frame-link.match .frame-link-source { +.tracer-tab .frame-link.match, .tracer-tab .frame-link.match .frame-link-source { background: var(--theme-contrast-background); color: var(--theme-contrast-color); } @@ -190,7 +189,7 @@ } .tracer-tab .frame-link-source { - max-width: 200px; + max-width:200px; overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; @@ -205,8 +204,7 @@ font-family: var(--monospace-font-family); } -.tracer-dom-event, -.tracer-dom-mutation { +.tracer-dom-event, .tracer-dom-mutation { padding-inline: 4px; margin-inline: 5px; @@ -329,7 +327,10 @@ .tracer-slider-bar { width: 8px; height: 100%; - background: linear-gradient(var(--slider-bar-background) var(--slider-bar-progress, 0%), transparent var(--slider-bar-progress, 0%)); + background: linear-gradient( + var(--slider-bar-background) var(--slider-bar-progress, 0%), + transparent var(--slider-bar-progress, 0%) + ); background-color: var(--theme-body-background); border: 1px solid var(--theme-splitter-color); position: absolute; @@ -346,8 +347,7 @@ border-inline-start: 1px solid var(--theme-splitter-color); } -.tracer-slider-event, -.tracer-slider-mutation { +.tracer-slider-event, .tracer-slider-mutation { position: absolute; width: 3px; left: 12px; @@ -374,8 +374,7 @@ &.key { background-color: var(--tracer-key-event-color); } - &:hover, - &.highlighted { + &:hover, &.highlighted { background-color: var(--blue-30); /* make the highlights and hover go over mutations, as well as non-highlighted events */ z-index: 7; @@ -404,8 +403,7 @@ border-radius: 50%; } -.tracer-slider-mutation, -.tracer-slider-mutation div { +.tracer-slider-mutation, .tracer-slider-mutation div { background-color: var(--tracer-mutation-color); color: var(--tracer-mutation-darker-color); font-size: 12px; diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css index 96be95229819..0bec9b8e51fc 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css @@ -94,7 +94,7 @@ .breakpoints-list .breakpoint, .breakpoints-list .breakpoint-heading, .breakpoints-options { - border-inline-start: 4px solid transparent; + border-inline-start: 4px solid transparent } html .breakpoints-list .breakpoint.is-conditional { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css index 0a23ebc47bbc..f63d653d7ebf 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/DOMMutationBreakpoints.css @@ -2,19 +2,19 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at . */ -.dom-mutation-empty { + .dom-mutation-empty { padding: 6px 20px; text-align: center; font-style: italic; color: var(--theme-body-color); white-space: normal; -} + } -.dom-mutation-empty a { - text-decoration: underline; - color: var(--theme-toolbar-selected-color); - cursor: pointer; -} + .dom-mutation-empty a { + text-decoration: underline; + color: var(--theme-toolbar-selected-color); + cursor: pointer; + } .dom-mutation-list * { user-select: none; diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css index 77eaf7d1c3c7..78d128210baf 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.css @@ -71,6 +71,7 @@ } } + .expression-container { padding-top: 3px; padding-bottom: 3px; diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css index e894af3031fc..098b0b0b5a7e 100644 --- a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css +++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css @@ -71,13 +71,13 @@ .frames div[role="listbox"] .frame:hover, .frames div[role="listbox"] .frame:focus { - background-color: var(--theme-toolbar-background-alt); + background-color: var(--theme-toolbar-background-alt); } .frames div[role="listbox"] .location-async-cause:hover, -.frames div[role="listbox"] .location-async-cause:focus, +.frames div[role="listbox"] .location-async-cause:focus .frames div[role="listbox"] .location-async-cause:hover .async-label, -.frames div[role="listbox"] .location-async-cause:focus .async-label { +.frames div[role="listbox"] .location-async-cause:focus .async-label{ background-color: var(--theme-body-background); } @@ -100,6 +100,7 @@ background-color: light-dark(var(--theme-toolbar-background-alt), var(--theme-body-alternate-emphasized-background)); } + .frames div[role="listbox"] .frame.selected i.annotation-logo svg path { fill: var(--theme-selection-color); } @@ -176,6 +177,7 @@ &::after { flex: 1; } + } .frames-group .location-async-cause { diff --git a/devtools/client/debugger/src/components/shared/SourceIcon.css b/devtools/client/debugger/src/components/shared/SourceIcon.css index 45e2e23cbbfc..78577c80432a 100644 --- a/devtools/client/debugger/src/components/shared/SourceIcon.css +++ b/devtools/client/debugger/src/components/shared/SourceIcon.css @@ -80,7 +80,7 @@ width: 5px; background-color: var(--purple-30); border-radius: 100%; - outline: 1px solid var(--theme-sidebar-background); + outline: 1px solid var(--theme-sidebar-background); translate: 12px 10px; } diff --git a/devtools/client/debugger/src/components/variables.css b/devtools/client/debugger/src/components/variables.css index 009b365deaa0..c260c0607a2b 100644 --- a/devtools/client/debugger/src/components/variables.css +++ b/devtools/client/debugger/src/components/variables.css @@ -32,10 +32,6 @@ /* Animations */ @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } } diff --git a/devtools/client/dom/content/dom-view.css b/devtools/client/dom/content/dom-view.css index 6558a6057c4e..d2fd77e52543 100644 --- a/devtools/client/dom/content/dom-view.css +++ b/devtools/client/dom/content/dom-view.css @@ -78,11 +78,11 @@ body { } .treeTable .userClassLabel { - color: #e90000; + color: #E90000; } .treeTable .userFunctionLabel { - color: #025e2a; + color: #025E2A; } .treeTable .domLabel { @@ -90,11 +90,11 @@ body { } .treeTable .domClassLabel { - color: #e90000; + color: #E90000; } .treeTable .domFunctionLabel { - color: #025e2a; + color: #025E2A; } .treeTable .ordinalLabel { diff --git a/devtools/client/framework/options-panel.css b/devtools/client/framework/options-panel.css index b8a431bb4061..0eba0d16f70a 100644 --- a/devtools/client/framework/options-panel.css +++ b/devtools/client/framework/options-panel.css @@ -1,18 +1,18 @@ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root { +:root{ user-select: none; } .theme-light { - --experimental-background: #e0eeff; + --experimental-background: #E0EEFF; --experimental-color: #436286; } .theme-dark { --experimental-background: #436286; - --experimental-color: #e0eeff; + --experimental-color: #E0EEFF; } #options-panel { @@ -26,7 +26,7 @@ .options-vertical-pane { margin: 5px; - width: calc(100% / 3 - 10px); + width: calc(100%/3 - 10px); min-width: 320px; padding-inline-start: 5px; box-sizing: border-box; @@ -37,7 +37,7 @@ only ~66% of the available space. */ @media (max-width: 1000px) { .options-vertical-pane { - width: calc(100% / 2 - 10px); + width: calc(100%/2 - 10px); } } @@ -97,7 +97,7 @@ display: inline-block; font-size: 1rem; font-style: italic; - /* To align it with the checkbox */ + /* To align it with the checkbox */ padding: 4px 0 0; padding-inline-end: 4px; } @@ -125,7 +125,7 @@ .deprecation-notice::before { background-image: url("chrome://devtools/skin/images/alert.svg"); - content: ""; + content: ''; display: inline-block; flex-shrink: 0; height: 15px; @@ -145,7 +145,7 @@ .deprecation-notice a { color: currentColor; } -.deprecation-notice a:hover { +.deprecation-notice a:hover{ text-decoration: underline; } @@ -174,17 +174,17 @@ .experimental-notice a { color: currentColor; } -.experimental-notice a:hover { +.experimental-notice a:hover{ text-decoration: underline; } @keyframes highlight { - 0% { - background-color: var(--theme-highlight-yellow); - } - 100% { - background-color: transparent; - } + 0% { + background-color: var(--theme-highlight-yellow); + } + 100% { + background-color: transparent; + } } .options-panel-highlight { diff --git a/devtools/client/inspector/rules/test/doc_at_scope.css b/devtools/client/inspector/rules/test/doc_at_scope.css index c9beeffc87bd..c265e01e6dde 100644 --- a/devtools/client/inspector/rules/test/doc_at_scope.css +++ b/devtools/client/inspector/rules/test/doc_at_scope.css @@ -3,15 +3,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ @scope (aside) { - div, - [data-test="start-no-end"] { + div, [data-test="start-no-end"] { box-shadow: 60px -16px teal; } } @scope (aside) to (.limit) { - div, - [data-test="start-and-end"] { + div, [data-test="start-and-end"] { outline: 2px solid gold; span { @@ -21,8 +19,7 @@ /* This should show up as inherited rule for spans that are in .limit subtree, even if the rule doesn't directly apply */ - div, - [data-test="start-and-end-inherit"] { + div, [data-test="start-and-end-inherit"] { color: salmon; } -} +} \ No newline at end of file diff --git a/devtools/client/inspector/rules/test/doc_conditional_import.css b/devtools/client/inspector/rules/test/doc_conditional_import.css index e594bddff8db..32529fc60805 100644 --- a/devtools/client/inspector/rules/test/doc_conditional_import.css +++ b/devtools/client/inspector/rules/test/doc_conditional_import.css @@ -1,4 +1,3 @@ -h1, -[test-hint="imported-conditional"] { +h1, [test-hint=imported-conditional] { color: rebeccapurple; } diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css index aafa1def75da..712ba78fb6f6 100644 --- a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css +++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css @@ -1,3 +1,3 @@ -table { +table { border-collapse: collapse; } diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css index 3e5a61586c8c..5aa5e2c6cbe7 100644 --- a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css +++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css @@ -1,5 +1,5 @@ @import url("./doc_content_stylesheet_imported.css"); -table { +table { opacity: 1; } diff --git a/devtools/client/inspector/rules/test/doc_copystyles.css b/devtools/client/inspector/rules/test/doc_copystyles.css index 1a57877efa30..83f0c87b1262 100644 --- a/devtools/client/inspector/rules/test/doc_copystyles.css +++ b/devtools/client/inspector/rules/test/doc_copystyles.css @@ -2,12 +2,10 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -html, -body, -#testid { - color: #f00; - background-color: #00f; +html, body, #testid { + color: #F00; + background-color: #00F; font-size: 12px; - border-color: #00f !important; + border-color: #00F !important; --var: "*/"; } diff --git a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css index 0015617035ea..fb537b53aee0 100644 --- a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css +++ b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css @@ -1,5 +1,4 @@ -h1, -[test-hint="imported-anonymous-layer--no-rule-layer"] { - color: cyan; - outline: 10px solid cyan; +h1, [test-hint=imported-anonymous-layer--no-rule-layer] { + color:cyan; + outline: 10px solid cyan; } diff --git a/devtools/client/inspector/rules/test/doc_imported_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_named_layer.css index f80a993d4dd9..3341a6ffe140 100644 --- a/devtools/client/inspector/rules/test/doc_imported_named_layer.css +++ b/devtools/client/inspector/rules/test/doc_imported_named_layer.css @@ -1,15 +1,13 @@ @import url(./doc_imported_nested_named_layer.css) layer(importedNestedLayer); @media screen { - h1, - [test-hint="imported-named-layer--no-rule-layer"] { - color: tomato; - border: 10px dotted currentColor; - } - - @layer in-imported-stylesheet { - h1, - [test-hint="imported-named-layer--named-layer"] { - color: purple; + h1, [test-hint=imported-named-layer--no-rule-layer] { + color:tomato; + border: 10px dotted currentColor; + } + + @layer in-imported-stylesheet { + h1, [test-hint=imported-named-layer--named-layer] { + color: purple; + } } - } } diff --git a/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css index def8758e6a14..e1f572c2063b 100644 --- a/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css +++ b/devtools/client/inspector/rules/test/doc_imported_nested_named_layer.css @@ -1,6 +1,5 @@ @layer in-imported-nested-stylesheet { - h1, - [test-hint="imported-nested-named-layer--named-layer"] { - color: lime; - } + h1, [test-hint=imported-nested-named-layer--named-layer] { + color: lime; + } } diff --git a/devtools/client/inspector/rules/test/doc_imported_no_layer.css b/devtools/client/inspector/rules/test/doc_imported_no_layer.css index fdd41258a6ea..9290eebc08ca 100644 --- a/devtools/client/inspector/rules/test/doc_imported_no_layer.css +++ b/devtools/client/inspector/rules/test/doc_imported_no_layer.css @@ -1,4 +1,3 @@ -h1, -[test-hint="imported-no-layer--no-rule-layer"] { +h1, [test-hint=imported-no-layer--no-rule-layer] { color: gold; } diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.css b/devtools/client/inspector/rules/test/doc_keyframeanimation.css index 6136dad7bd6b..e735389c52e5 100644 --- a/devtools/client/inspector/rules/test/doc_keyframeanimation.css +++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.css @@ -11,16 +11,16 @@ width: 20px; height: 20px; border-radius: 10px; - background-color: #ffcb01; + background-color: #FFCB01; } #pacman { width: 0; height: 0; border-right: 60px solid transparent; - border-top: 60px solid #ffcb01; - border-left: 60px solid #ffcb01; - border-bottom: 60px solid #ffcb01; + border-top: 60px solid #FFCB01; + border-left: 60px solid #FFCB01; + border-bottom: 60px solid #FFCB01; border-top-left-radius: 60px; border-bottom-left-radius: 60px; border-top-right-radius: 60px; @@ -41,6 +41,7 @@ animation: 4s linear 0s normal none infinite boxy; } + #moxy { animation-name: moxy, boxy; animation-delay: 3.5s; diff --git a/devtools/client/inspector/rules/test/doc_style_editor_link.css b/devtools/client/inspector/rules/test/doc_style_editor_link.css index 41045509311e..e49e1f587190 100644 --- a/devtools/client/inspector/rules/test/doc_style_editor_link.css +++ b/devtools/client/inspector/rules/test/doc_style_editor_link.css @@ -1,3 +1,3 @@ div { opacity: 1; -} +} \ No newline at end of file diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.css b/devtools/client/inspector/rules/test/doc_urls_clickable.css index a8dd5206c67b..e2f77934e2d6 100644 --- a/devtools/client/inspector/rules/test/doc_urls_clickable.css +++ b/devtools/client/inspector/rules/test/doc_urls_clickable.css @@ -1,9 +1,9 @@ .relative1 { - background-image: url(./doc_test_image.png); + background-image: url(./doc_test_image.png); } .absolute { - background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png"); + background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png"); } .base64 { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='); } diff --git a/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css index 60f1eab97137..b719c608467f 100644 --- a/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css +++ b/devtools/client/inspector/test/style_inspector_eyedropper_ruleview.css @@ -1,3 +1,3 @@ body { color: red; -} +} \ No newline at end of file diff --git a/devtools/client/jsonview/css/general.css b/devtools/client/jsonview/css/general.css index f93de300b716..90b4cab0f3f9 100644 --- a/devtools/client/jsonview/css/general.css +++ b/devtools/client/jsonview/css/general.css @@ -5,9 +5,7 @@ /******************************************************************************/ /* General */ -html, -body, -#content { +html, body, #content { height: 100%; } diff --git a/devtools/client/jsonview/css/json-panel.css b/devtools/client/jsonview/css/json-panel.css index 1028484e3df7..d6ad127bc025 100644 --- a/devtools/client/jsonview/css/json-panel.css +++ b/devtools/client/jsonview/css/json-panel.css @@ -8,10 +8,7 @@ .jsonPrimitiveValue, .jsonParseError { font-size: 12px; - font-family: - Lucida Grande, - Tahoma, - sans-serif; + font-family: Lucida Grande, Tahoma, sans-serif; line-height: 15px; padding: 10px; } diff --git a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css index 6e4e18286806..954998532621 100644 --- a/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/CustomRequestPanel.css @@ -20,7 +20,7 @@ .network-monitor .custom-method-and-url .custom-url-value-label { grid-column: 2 / 2; - grid-row: 1 / 1; + grid-row: 1 / 1 ; margin-inline-start: 12px; } @@ -86,10 +86,8 @@ } .network-monitor .custom-request button:focus { - box-shadow: - 0 0 0 1px #0a84ff inset, - 0 0 0 1px #0a84ff, - 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, + 0 0 0 4px rgba(10,132,255,0.3) } .network-monitor .custom-request #custom-request-send-button { diff --git a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css index 3b1c55b58e2c..6eb064a62f61 100644 --- a/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/HTTPCustomRequestPanel.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input) { +.network-monitor .tabpanel-summary-container:is(.http-custom-section, .http-custom-method-and-url, .http-custom-input ) { padding-inline-start: 0; margin: 0; } @@ -193,10 +193,8 @@ } .network-monitor .http-custom-request-button-container button:focus { - box-shadow: - 0 0 0 1px #0a84ff inset, - 0 0 0 1px #0a84ff, - 0 0 0 4px rgba(10, 132, 255, 0.3); + box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, + 0 0 0 4px rgba(10,132,255,0.3) } .network-monitor .http-custom-request-button-container #http-custom-request-send-button { diff --git a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css index 904dd5dedd61..a10e21b33b89 100644 --- a/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css @@ -140,6 +140,7 @@ margin-right: -33px; margin-left: 5px; padding: 0; + } .network-monitor .headers-panel-container .accordion .properties-view tr.treeRow .treeValueCell { display: inline; @@ -186,7 +187,7 @@ unicode-bidi: plaintext; } -.network-monitor .tabpanel-summary-value strong { +.network-monitor .tabpanel-summary-value strong { margin-right: 3px; } diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css index 0ad4b5d7e179..a2d46ed522d4 100644 --- a/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css +++ b/devtools/client/netmonitor/src/assets/styles/NetworkActionBar.css @@ -2,10 +2,10 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.network-monitor .network-action-bar { - width: 100%; -} + .network-monitor .network-action-bar { + width: 100%; + } -.network-monitor .network-action-bar .tabs-menu-item { - width: 50%; -} + .network-monitor .network-action-bar .tabs-menu-item { + width: 50%; + } diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css index ce19e5e63ba4..1ebcaa7e0bb7 100644 --- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css +++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsBar.css @@ -87,6 +87,7 @@ overflow: inherit; } + /* Text inputs in tab panels */ .network-monitor .textbox-input { @@ -99,8 +100,7 @@ /* Tree table in tab panels */ -.network-monitor .tree-container, -.tree-container .treeTable { +.network-monitor .tree-container, .tree-container .treeTable { position: relative; height: 100%; width: 100%; @@ -392,6 +392,7 @@ align-items: center; padding-inline-end: 20px; --total-timings-width-percentage: 90%; + } .network-monitor .requests-list-timings-total { @@ -438,6 +439,7 @@ background: var(--timing-server-color-total); } + .network-monitor .serviceworker-timings-color-launch { background: var(--timing-server-color-1); } @@ -450,6 +452,7 @@ background: var(--timing-server-color-3); } + /* Stack trace panel */ .network-monitor .stack-trace { @@ -504,14 +507,12 @@ /* Custom request panel */ -.network-monitor .custom-request-panel, -.http-custom-request-panel { +.network-monitor .custom-request-panel, .http-custom-request-panel { height: 100%; background-color: var(--theme-sidebar-background); } -.theme-dark .network-monitor .custom-request-panel, -.http-custom-request-panel { +.theme-dark .network-monitor .custom-request-panel, .http-custom-request-panel { color: var(--theme-selection-color); } @@ -519,8 +520,7 @@ font-weight: 600; } -.network-monitor .custom-request-panel, -.http-custom-request-panel textarea { +.network-monitor .custom-request-panel, .http-custom-request-panel textarea { resize: none; font: message-box; font-size: var(--theme-body-font-size); @@ -557,8 +557,8 @@ width: 4.5em; } -.network-monitor .http-custom-method-value { - width: 6em; +.network-monitor .http-custom-method-value{ + width: 6.0em; } .network-monitor .custom-url-value, diff --git a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css index 436d38436700..a3eac199b7cc 100644 --- a/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/RequestBlockingPanel.css @@ -37,7 +37,7 @@ } .request-blocking-editable-label { - cursor: text; + cursor: text } /* The "Enable Blocking Requests" bar */ @@ -176,5 +176,5 @@ } .request-blocking-notice-element::before { - content: "• "; + content:"• "; } diff --git a/devtools/client/netmonitor/src/assets/styles/RequestList.css b/devtools/client/netmonitor/src/assets/styles/RequestList.css index b5bc2e4a9be7..fc5851403309 100644 --- a/devtools/client/netmonitor/src/assets/styles/RequestList.css +++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css @@ -38,10 +38,10 @@ right: 0; inset-block: 0; cursor: pointer; - /* The slow icon is absolutely positioned and can can overlap the column text. - This background gradient is added on its left side so the icon - has a solid background and the text slowly fades before the icon. */ - background-image: linear-gradient(to right, transparent, var(--theme-body-background) 43%); + /* The slow icon is absolutely positioned and can can overlap the column text. + This background gradient is added on its left side so the icon + has a solid background and the text slowly fades before the icon. */ + background-image: linear-gradient(to right,transparent, var(--theme-body-background) 43%); padding-inline: 5px 30px; &::before { @@ -73,16 +73,16 @@ } .request-list-item:not(.selected).odd .requests-list-slow-button { - background-image: linear-gradient(to right, transparent, var(--table-zebra-inline-icons-background) 43%); + background-image: linear-gradient(to right,transparent, var(--table-zebra-inline-icons-background) 43%); } .request-list-item:not(.selected):hover .requests-list-slow-button, .request-list-item:not(.selected).odd:hover .requests-list-slow-button { - background-image: linear-gradient(to right, transparent, var(--table-selection-inline-icons-background-hover) 43%); + background-image: linear-gradient(to right,transparent, var(--table-selection-inline-icons-background-hover) 43%); } .request-list-item.selected .requests-list-slow-button { - background-image: linear-gradient(to right, transparent, var(--theme-selection-background) 43%); + background-image: linear-gradient(to right,transparent, var(--theme-selection-background) 43%); :root[forced-colors-active] & { background-color: var(--theme-selection-background); @@ -252,11 +252,11 @@ width: calc(100% - 11px); } -.requests-list-header-button[data-sorted="ascending"] > .button-icon { +.requests-list-header-button[data-sorted=ascending] > .button-icon { background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg"); } -.requests-list-header-button[data-sorted="descending"] > .button-icon { +.requests-list-header-button[data-sorted=descending] > .button-icon { background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg"); } @@ -500,8 +500,8 @@ border-inline-start-color: #585959 !important; } -.requests-list-timings-division[data-division-scale="second"], -.requests-list-timings-division[data-division-scale="minute"] { +.requests-list-timings-division[data-division-scale=second], +.requests-list-timings-division[data-division-scale=minute] { font-weight: 600; } diff --git a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css index 1ae94d2d1f5e..7a3b3d201288 100644 --- a/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css +++ b/devtools/client/netmonitor/src/assets/styles/StatisticsPanel.css @@ -83,31 +83,31 @@ path[data-statistic-name] { fill: var(--stat-color); } -[data-statistic-name="html"] { +[data-statistic-name=html] { --stat-color: var(--theme-highlight-bluegrey); } -[data-statistic-name="css"] { +[data-statistic-name=css] { --stat-color: var(--theme-highlight-blue); } -[data-statistic-name="js"] { +[data-statistic-name=js] { --stat-color: var(--theme-highlight-lightorange); } -[data-statistic-name="xhr"] { +[data-statistic-name=xhr] { --stat-color: var(--theme-highlight-orange); } -[data-statistic-name="fonts"] { +[data-statistic-name=fonts] { --stat-color: var(--theme-highlight-purple); } -[data-statistic-name="images"] { +[data-statistic-name=images] { --stat-color: var(--theme-highlight-pink); } -[data-statistic-name="media"] { +[data-statistic-name=media] { --stat-color: var(--theme-highlight-green); } @@ -118,22 +118,22 @@ path[data-statistic-name] { text-align: center; } -.table-chart-row-label[name="count"] { +.table-chart-row-label[name=count] { width: 3em; text-align: end; } -.table-chart-row-label[name="label"] { +.table-chart-row-label[name=label] { width: 7em; text-align: start; } -.table-chart-row-label[name="size"] { +.table-chart-row-label[name=size] { width: 7em; text-align: start; } -.table-chart-row-label[name="time"] { +.table-chart-row-label[name=time] { width: 7em; text-align: start; } @@ -162,15 +162,15 @@ path[data-statistic-name] { } .statistics-panel .charts, - .statistics-panel .pie-table-chart-container { + .statistics-panel .pie-table-chart-container{ margin-bottom: 2rem; } } -.offscreen { - position: absolute !important; - font-size: 0; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - clip-path: polygon(0 0, 0 0, 0 0, 0 0); +.offscreen{ + position: absolute!important; + font-size: 0; + overflow: hidden; + clip: rect(1px,1px,1px,1px); + clip-path: polygon(0 0,0 0,0 0,0 0); } diff --git a/devtools/client/netmonitor/src/assets/styles/StatusBar.css b/devtools/client/netmonitor/src/assets/styles/StatusBar.css index db6216a48966..13930247bf56 100644 --- a/devtools/client/netmonitor/src/assets/styles/StatusBar.css +++ b/devtools/client/netmonitor/src/assets/styles/StatusBar.css @@ -34,7 +34,10 @@ --bar-label-legend-color: var(--timing-marker-load-color); } -.status-bar-label:is(.dom-content-loaded, .load)::before { +:is( + .status-bar-label.dom-content-loaded, + .status-bar-label.load +)::before { content: ""; display: inline-block; width: 12px; diff --git a/devtools/client/netmonitor/src/assets/styles/StatusCode.css b/devtools/client/netmonitor/src/assets/styles/StatusCode.css index 1b32d75c861b..62b6266c57fc 100644 --- a/devtools/client/netmonitor/src/assets/styles/StatusCode.css +++ b/devtools/client/netmonitor/src/assets/styles/StatusCode.css @@ -69,6 +69,7 @@ fill: currentColor; } + /* Status codes for the headers side panel */ .headers-overview .summary .status .status-code { diff --git a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css index 38650b14a9df..a4a3bce699a2 100644 --- a/devtools/client/netmonitor/src/assets/styles/UrlPreview.css +++ b/devtools/client/netmonitor/src/assets/styles/UrlPreview.css @@ -76,6 +76,7 @@ float: left; margin-right: -15px; padding: 0 2px 0 0; + } .url-preview tr.treeRow .treeValueCell { display: inline; diff --git a/devtools/client/netmonitor/src/assets/styles/messages.css b/devtools/client/netmonitor/src/assets/styles/messages.css index 7315b1b761a7..b115d7cf34df 100644 --- a/devtools/client/netmonitor/src/assets/styles/messages.css +++ b/devtools/client/netmonitor/src/assets/styles/messages.css @@ -83,7 +83,7 @@ border: none; font-family: var(--monospace-font-family); font-size: var(--theme-code-font-size); - line-height: calc(15 / 11); + line-height: calc(15/11); direction: ltr; text-align: left; resize: none; diff --git a/devtools/client/netmonitor/src/assets/styles/variables.css b/devtools/client/netmonitor/src/assets/styles/variables.css index e808ed36ce41..366b55f687b3 100644 --- a/devtools/client/netmonitor/src/assets/styles/variables.css +++ b/devtools/client/netmonitor/src/assets/styles/variables.css @@ -13,16 +13,19 @@ /* Colors for timing markers */ --timing-marker-color-opacity: 0.75; - /* prettier-ignore */ --timing-marker-dom-content-loaded-color: rgb( from var(--theme-highlight-blue) r g b / var(--timing-marker-color-opacity) ); - --timing-marker-load-color: rgb(from var(--theme-highlight-red) r g b / var(--timing-marker-color-opacity)); + --timing-marker-load-color: + rgb( + from var(--theme-highlight-red) r g b / + var(--timing-marker-color-opacity) + ); --table-splitter-color: light-dark(var(--grey-20), var(--grey-70)); - --table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255, 255, 255, 0.05)); + --table-zebra-background: light-dark(rgba(247, 247, 247, 0.8), rgba(255,255,255,0.05)); --table-zebra-inline-icons-background: light-dark(rgba(247, 247, 247), rgb(49, 47, 47)); --table-selection-background-hover: light-dark(rgba(209, 232, 255, 0.8), rgba(53, 59, 72, 1)); --table-selection-inline-icons-background-hover: light-dark(rgba(209, 232, 255), rgba(53, 59, 72, 1)); @@ -31,7 +34,6 @@ --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */ --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ - /* prettier-ignore */ --timing-send-color: light-dark( rgba(0, 136, 204, 0.8), /* blue */ rgba(70, 175, 227, 0.8) /* light blue */ @@ -51,7 +53,7 @@ --timing-dns-color: var(--theme-highlight-purple); --timing-ssl-color: var(--theme-highlight-orange); --timing-connect-color: var(--theme-highlight-orange); - --timing-send-color: var(--theme-highlight-blue); + --timing-send-color:var(--theme-highlight-blue); --timing-wait-color: var(--theme-highlight-gray); --timing-receive-color: var(--theme-highlight-green); diff --git a/devtools/client/responsive/index.css b/devtools/client/responsive/index.css index 4538d52df73a..9c053e7db61b 100644 --- a/devtools/client/responsive/index.css +++ b/devtools/client/responsive/index.css @@ -92,7 +92,7 @@ body, #toolbar :is(select, button):focus-visible { /* Adjust the outline otherwise it's clipped at the top */ - outline-offset: -1px; + outline-offset: -1px } #toolbar-center-controls, @@ -214,7 +214,7 @@ body, #toolbar.user-agent #toolbar-center-controls { grid-template-columns: [device-selector] - 0.8fr + .8fr [separator] max-content [size-selector] @@ -224,7 +224,7 @@ body, [separator] max-content [dpr] - 0.6fr + .6fr [separator] max-content [throttling] @@ -250,13 +250,11 @@ body, /* When the UA label is here and it's on a second line, draw a separator between the 2 lines*/ #toolbar.user-agent { - background-image: linear-gradient( - to bottom, + background-image: linear-gradient(to bottom, transparent var(--toolbar-row-height), var(--theme-splitter-color) var(--toolbar-row-height), var(--theme-splitter-color) calc(var(--toolbar-row-height) + 1px), - transparent 0 - ); + transparent 0); } } @@ -418,9 +416,8 @@ body, /* On screens that are >750px*/ @media (min-width: 750px) { #device-form { - grid-template-areas: - "name size dpr" - "user-agent touch buttons"; + grid-template-areas: "name size dpr" + "user-agent touch buttons"; } #device-form-name input, @@ -430,10 +427,9 @@ body, .device-modal-content { grid-template-columns: 1fr 1fr; - grid-template-areas: - "phone phone" - "tablet laptop" - "tv custom"; + grid-template-areas: "phone phone" + "tablet laptop" + "tv custom"; } .device-type-phones .device-list { @@ -444,10 +440,9 @@ body, /* On screens that are between 450px and 749px */ @media (min-width: 450px) and (max-width: 749px) { #device-form { - grid-template-areas: - "name size" - "user-agent dpr" - "touch buttons"; + grid-template-areas: "name size" + "user-agent dpr" + "touch buttons"; grid-template-columns: 2fr 1fr; } @@ -464,13 +459,12 @@ body, /* On screens that are <450px */ @media (max-width: 449px) { #device-form { - grid-template-areas: - "name" - "size" - "dpr" - "user-agent" - "touch" - "buttons"; + grid-template-areas: "name" + "size" + "dpr" + "user-agent" + "touch" + "buttons"; } #device-form-name input, @@ -485,13 +479,12 @@ body, @media (max-width: 749px) { .device-modal-content { - grid-template-areas: - "phone" - "phone" - "tablet" - "laptop" - "tv" - "custom"; + grid-template-areas: "phone" + "phone" + "tablet" + "laptop" + "tv" + "custom"; } .device-modal-header { @@ -712,9 +705,9 @@ body, } #device-form #device-form-save { - background-color: #0060df; + background-color: #0060DF; color: #fff; - border: 1px solid #0060df; + border: 1px solid #0060DF; width: 60px; &:focus-visible { diff --git a/devtools/client/responsive/responsive-browser.css b/devtools/client/responsive/responsive-browser.css index 2ae163232533..8e6b68c9fe54 100644 --- a/devtools/client/responsive/responsive-browser.css +++ b/devtools/client/responsive/responsive-browser.css @@ -4,7 +4,7 @@ :root { /* This should map to --theme-toolbar-background. */ - --rdm-background-color: #f5f5f6; + --rdm-background-color: #F5F5F6; --rdm-shadow-color: rgba(155, 155, 155, 0.26); &[devtoolstheme="dark"] { @@ -83,7 +83,7 @@ } html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack { - grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px; + grid-template-columns: 1fr [left-align] var(--browser-viewport-width) 15px } .browserContainer.responsive-mode > .browserStack > browser { diff --git a/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css b/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css index 77be303e5fa5..7ed528635b57 100644 --- a/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css +++ b/devtools/client/responsive/test/browser/doc_toolbox_rule_view.css @@ -7,4 +7,4 @@ div { div { width: 100px; } -} +}; diff --git a/devtools/client/shared/components/AppErrorBoundary.css b/devtools/client/shared/components/AppErrorBoundary.css index 6409f7fad5a0..2585231ff7b3 100644 --- a/devtools/client/shared/components/AppErrorBoundary.css +++ b/devtools/client/shared/components/AppErrorBoundary.css @@ -4,6 +4,7 @@ /* Base styles (common to most error boundaries) */ + /* Container */ .app-error-panel { color: var(--theme-text-color-strong); diff --git a/devtools/client/shared/components/List.css b/devtools/client/shared/components/List.css index 12c74889ab72..055e48eca80d 100644 --- a/devtools/client/shared/components/List.css +++ b/devtools/client/shared/components/List.css @@ -14,8 +14,7 @@ overflow: auto; } -.list:focus, -.list .list-item-content:focus { +.list:focus, .list .list-item-content:focus { outline: 0; } @@ -23,8 +22,7 @@ background-color: var(--theme-toolbar-hover); } -.list:focus li.current, -.list li.active.current { +.list:focus li.current, .list li.active.current { background-color: var(--theme-emphasized-splitter-color); } diff --git a/devtools/client/shared/components/NotificationBox.css b/devtools/client/shared/components/NotificationBox.css index bf6193ad6880..27b63b6ddc68 100644 --- a/devtools/client/shared/components/NotificationBox.css +++ b/devtools/client/shared/components/NotificationBox.css @@ -124,7 +124,7 @@ } .notificationbox .messageCloseButton:active { - background-color: rgba(170, 170, 170, 0.4); /* --toolbar-tab-hover-active */ + background-color: rgba(170, 170, 170, .4); /* --toolbar-tab-hover-active */ } .notificationbox.wrapping .notificationInner .messageText { diff --git a/devtools/client/shared/components/SearchModifiers.css b/devtools/client/shared/components/SearchModifiers.css index fa640a82ad3e..b92f12b1f991 100644 --- a/devtools/client/shared/components/SearchModifiers.css +++ b/devtools/client/shared/components/SearchModifiers.css @@ -47,7 +47,7 @@ background-image: url(chrome://devtools/content/debugger/images/case-match.svg); } -.search-modifiers button > span.regex-match { +.search-modifiers button > span.regex-match { background-image: url(chrome://devtools/content/debugger/images/regex-match.svg); } diff --git a/devtools/client/shared/components/SidebarToggle.css b/devtools/client/shared/components/SidebarToggle.css index 4e6dd42951b3..f715816d8cd0 100644 --- a/devtools/client/shared/components/SidebarToggle.css +++ b/devtools/client/shared/components/SidebarToggle.css @@ -21,7 +21,7 @@ } .sidebar-toggle.alignRight { - order: 10; + order: 10 } /* Rotate button icon 90deg if the toolbox container is diff --git a/devtools/client/shared/components/SmartTrace.css b/devtools/client/shared/components/SmartTrace.css index 37bbbc1bfeca..34ef4c18e2e4 100644 --- a/devtools/client/shared/components/SmartTrace.css +++ b/devtools/client/shared/components/SmartTrace.css @@ -7,15 +7,17 @@ * Styles for React component at `devtools/client/shared/components/SmartTrace.js` */ -.frames-group .frame { + +.frames-group .frame{ display: block; padding-inline-start: 16px; } -.img.annotation-logo { +.img.annotation-logo{ background-color: var(--theme-body-color); } + .frames .top-frames-list[role="listbox"] { display: inline-grid; grid-template-columns: auto 1fr; @@ -66,7 +68,7 @@ /******* Group styles *******/ .frames-group { - grid-column: 1 / -1; + grid-column:1 / -1; } .frames .frames-group { @@ -149,15 +151,15 @@ } .frames-group .img.arrow { - mask: url("chrome://devtools/content/debugger/images/arrow.svg"); - margin-inline-end: 4px; - background-color: var(--theme-icon-dimmed-color); - width: 10px; - height: 10px; - mask-size: 100%; - display: inline-block; - transform: rotate(-90deg); - transition: transform 0.18s ease; + mask: url("chrome://devtools/content/debugger/images/arrow.svg"); + margin-inline-end: 4px; + background-color: var(--theme-icon-dimmed-color); + width: 10px; + height: 10px; + mask-size: 100%; + display: inline-block; + transform: rotate(-90deg); + transition: transform 0.18s ease; } .frames-group .img.arrow.expanded { diff --git a/devtools/client/shared/components/reps/reps.css b/devtools/client/shared/components/reps/reps.css index f67123cb0b43..f1f8123bd274 100644 --- a/devtools/client/shared/components/reps/reps.css +++ b/devtools/client/shared/components/reps/reps.css @@ -37,7 +37,13 @@ white-space: pre-wrap; } -:is(.objectBox-string, .objectBox-textNode, .objectBox > .nodeName, .objectBox-node .tag-name, .objectBox-node .attrName).has-rtl-char { +:is( + .objectBox-string, + .objectBox-textNode, + .objectBox > .nodeName, + .objectBox-node .tag-name, + .objectBox-node .attrName +).has-rtl-char { unicode-bidi: isolate; } @@ -100,6 +106,7 @@ content: "…"; } + .objectBox-function, .objectBox-profile { color: var(--object-color); @@ -317,17 +324,21 @@ /* Open DOMNode in inspector or Accessible in accessibility inspector button */ :is(button, [role="button"]).open-accessibility-inspector { - background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg") no-repeat; + background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg") + no-repeat; } :is(button, [role="button"]).open-inspector { - background: url("chrome://devtools/content/shared/components/reps/images/open-inspector.svg") no-repeat; + background: url("chrome://devtools/content/shared/components/reps/images/open-inspector.svg") + no-repeat; } :is(button, [role="button"]).highlight-node { - background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat; + background: url("chrome://devtools/skin/images/highlight-selector.svg") + no-repeat; } + :is(button, [role="button"]):is(.open-accessibility-inspector, .open-inspector, .highlight-node) { display: inline-block; vertical-align: top; @@ -360,7 +371,9 @@ button.jump-definition { width: 20px; margin-left: 0.25em; vertical-align: middle; - background: center url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg") no-repeat; + background: center + url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg") + no-repeat; border-color: transparent; stroke: var(--theme-icon-color); -moz-context-properties: stroke; @@ -379,7 +392,7 @@ button.jump-definition:hover { :root[forced-colors-active] button.jump-definition:hover { stroke: var(--theme-icon-hover-color); - border-color: var(--theme-icon-hover-color); + border-color: var(--theme-icon-hover-color); } /* In High Contrast Mode, the button has a solid background, so we only need @@ -392,7 +405,8 @@ button.jump-definition:hover { /* Invoke getter button */ button.invoke-getter { - mask: url(chrome://devtools/content/shared/components/reps/images/input.svg) no-repeat; + mask: url(chrome://devtools/content/shared/components/reps/images/input.svg) + no-repeat; display: inline-block; background-color: var(--theme-icon-color); height: 10px; diff --git a/devtools/client/shared/components/tabs/Tabs.css b/devtools/client/shared/components/tabs/Tabs.css index f7be508f3d81..6366d949d5be 100644 --- a/devtools/client/shared/components/tabs/Tabs.css +++ b/devtools/client/shared/components/tabs/Tabs.css @@ -17,7 +17,7 @@ } /* Hides the tab strip in the TabBar */ -div[hidetabs="true"] .tabs .tabs-navigation { +div[hidetabs=true] .tabs .tabs-navigation { display: none; } @@ -67,7 +67,7 @@ div[hidetabs="true"] .tabs .tabs-navigation { .tabs .tabs-menu-item.is-active { color: var(--theme-toolbar-selected-color); - background-color: var(--theme-toolbar-selected-background); + background-color: var(--theme-toolbar-selected-background); &:hover { background-color: var(--theme-toolbar-selected-hover); diff --git a/devtools/client/shared/components/tree/TreeView.css b/devtools/client/shared/components/tree/TreeView.css index 96917bebffe9..a98c24f385dc 100644 --- a/devtools/client/shared/components/tree/TreeView.css +++ b/devtools/client/shared/components/tree/TreeView.css @@ -2,14 +2,14 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -@import url("chrome://devtools/content/shared/components/reps/reps.css"); +@import url('chrome://devtools/content/shared/components/reps/reps.css'); /******************************************************************************/ /* TreeView Colors */ :root { - --tree-header-background: #c8d2dc; - --tree-header-sorted-background: #aac3dc; + --tree-header-background: #C8D2DC; + --tree-header-sorted-background: #AAC3DC; } /******************************************************************************/ @@ -156,9 +156,12 @@ user-select: none; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 0 !important; - background: - linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)), - radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%) repeat-x var(--tree-header-background); + background: linear-gradient( + rgba(255, 255, 255, 0.05), + rgba(0, 0, 0, 0.05)), + radial-gradient(1px 60% at right, + rgba(0, 0, 0, 0.8) 0%, + transparent 80%) repeat-x var(--tree-header-background); color: var(--theme-body-color); white-space: nowrap; } @@ -185,5 +188,10 @@ } .treeTable .treeHeaderCell:hover:active { - background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent), radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%); + background-image: linear-gradient( + rgba(0, 0, 0, 0.1), + transparent), + radial-gradient(1px 60% at right, + rgba(0, 0, 0, 0.8) 0%, + transparent 80%); } diff --git a/devtools/client/shared/toolbarbutton.css b/devtools/client/shared/toolbarbutton.css index 3c481279fd12..df6de1a82bb0 100644 --- a/devtools/client/shared/toolbarbutton.css +++ b/devtools/client/shared/toolbarbutton.css @@ -23,7 +23,7 @@ opacity: 0.5 !important; } - &:is([open], :hover, :hover:active) { + &:is([open],:hover,:hover:active) { background: var(--toolbarbutton-hover-background); } @@ -41,7 +41,7 @@ margin: 0 3px; } - &[open="true"] > .toolbarbutton-icon { + &[open=true] > .toolbarbutton-icon { color: var(--theme-icon-checked-color); } } diff --git a/devtools/client/shared/widgets/cubic-bezier.css b/devtools/client/shared/widgets/cubic-bezier.css index 00512283e711..333c7267514d 100644 --- a/devtools/client/shared/widgets/cubic-bezier.css +++ b/devtools/client/shared/widgets/cubic-bezier.css @@ -10,7 +10,7 @@ --bezier-curve-width: 150px; --bezier-curve-height: 330px; --bezier-preview-height: 40px; - --bezier-tooltip-container-height: calc(var(--bezier-curve-height) + var(--bezier-preview-height)); + --bezier-tooltip-container-height: calc(var(--bezier-curve-height) + var(--bezier-preview-height)); display: grid; grid-template-areas: "presets curve" @@ -68,10 +68,9 @@ is a registered property, so the engine will compute it to an rgb color, which means it won't be seen as a system color in High Contrast Mode and a default color would be used. */ - forced-color-adjust: none; + forced-color-adjust: none; } -/* prettier-ignore */ .cubic-bezier-container .display-wrap { background: repeating-linear-gradient(0deg, @@ -121,7 +120,7 @@ height: 1px; background-color: var(--timing-function-preview-scale); /* opt-out of forced colors so we can see the line in High Contrast Mode */ - forced-color-adjust: none; + forced-color-adjust: none; } .cubic-bezier-container .timing-function-preview .dot { diff --git a/devtools/client/shared/widgets/filter-widget.css b/devtools/client/shared/widgets/filter-widget.css index ee730fdcf85e..aeee4db42e7d 100644 --- a/devtools/client/shared/widgets/filter-widget.css +++ b/devtools/client/shared/widgets/filter-widget.css @@ -37,7 +37,7 @@ /* Make sure that when the presets list is shown, it has a fixed width */ width: 200px; padding-left: 6px; - transition: width 0.1s; + transition: width .1s; flex-shrink: 0; border-left: 1px solid var(--theme-splitter-color); } @@ -113,7 +113,11 @@ height: 10px; margin-right: 10px; cursor: grab; - background: linear-gradient(to bottom, currentColor 0, currentcolor 1px, transparent 1px, transparent 2px); + background: linear-gradient(to bottom, + currentColor 0, + currentcolor 1px, + transparent 1px, + transparent 2px); background-repeat: repeat-y; background-size: auto 4px; background-position: 0 1px; diff --git a/devtools/client/shared/widgets/linear-widget.css b/devtools/client/shared/widgets/linear-widget.css index d94d0b0f8afd..bd722f4eb54f 100644 --- a/devtools/client/shared/widgets/linear-widget.css +++ b/devtools/client/shared/widgets/linear-widget.css @@ -43,7 +43,13 @@ .linear-easing-function-container .timing-function-preview { width: var(--chart-size); /* Draw a background line */ - background: linear-gradient(0deg, transparent 45%, var(--timing-function-preview-scale) 45%, var(--timing-function-preview-scale) 55%, transparent 55%); + background: linear-gradient( + 0deg, + transparent 45%, + var(--timing-function-preview-scale) 45%, + var(--timing-function-preview-scale) 55%, + transparent 55% + ); /* opt-out of forced colors so we can see the "line" gradient */ forced-color-adjust: none; } @@ -61,5 +67,5 @@ a registered color and gets computed to an rgb color which means the color will be forced, even if the declaration value is a system color. All the colors used here have High Contrast re-declaration so it should be fine */ - forced-color-adjust: none; + forced-color-adjust: none; } diff --git a/devtools/client/shared/widgets/spectrum.css b/devtools/client/shared/widgets/spectrum.css index e2572fb396df..227f9135c395 100644 --- a/devtools/client/shared/widgets/spectrum.css +++ b/devtools/client/shared/widgets/spectrum.css @@ -29,13 +29,24 @@ .spectrum-checker { background-color: #eee; - background-image: - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); + background-image: linear-gradient( + 45deg, + #ccc 25%, + transparent 25%, + transparent 75%, + #ccc 75%, + #ccc + ), + linear-gradient( + 45deg, + #ccc 25%, + transparent 25%, + transparent 75%, + #ccc 75%, + #ccc + ); background-size: 12px 12px; - background-position: - 0 0, - 6px 6px; + background-position: 0 0, 6px 6px; /* Make sure that the background color is properly set in High Contrast Mode */ forced-color-adjust: none; } @@ -88,13 +99,11 @@ width: 27px; height: 27px; background-color: #fff; - background-image: - linear-gradient(var(--overlay-color), var(--overlay-color)), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), + background-image: linear-gradient(var(--overlay-color), var(--overlay-color)), + linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%); background-size: 12px 12px; - background-position: - 0 0, - 6px 6px; + background-position: 0 0, 6px 6px; /* Make sure that the background color is properly set in High Contrast Mode */ forced-color-adjust: none; @@ -180,19 +189,34 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */ border: none; } -:root[forced-colors-active] :is(.spectrum-hue-input, .spectrum-alpha-input)::-moz-range-thumb { +:root[forced-colors-active] :is( + .spectrum-hue-input, + .spectrum-alpha-input +)::-moz-range-thumb { background: ButtonFace; border: 2px solid ButtonText; } -:root[forced-colors-active] :is(.spectrum-hue-input, .spectrum-alpha-input):is(:hover, :focus-visible)::-moz-range-thumb { +:root[forced-colors-active] :is( + .spectrum-hue-input, + .spectrum-alpha-input +):is(:hover, :focus-visible)::-moz-range-thumb { border-color: SelectedItem; } .spectrum-hue-input::-moz-range-track { border-radius: 2px; height: 8px; - background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); + background: linear-gradient( + to right, + #ff0000 0%, + #ffff00 17%, + #00ff00 33%, + #00ffff 50%, + #0000ff 67%, + #ff00ff 83%, + #ff0000 100% + ); /* Make sure that the background color is properly set in High Contrast Mode */ forced-color-adjust: none; } @@ -273,7 +297,7 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */ } .spectrum-color-contrast.visible:not(.error) .contrast-ratio-min .accessibility-contrast-value, -.spectrum-color-contrast.visible:not(.error) .contrast-ratio-max .accessibility-contrast-value { +.spectrum-color-contrast.visible:not(.error) .contrast-ratio-max .accessibility-contrast-value{ margin-inline-start: 7px; } @@ -294,16 +318,12 @@ http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */ } .spectrum-color-contrast.visible:not(.error):-moz-locale-dir(ltr) .contrast-value-and-swatch:before { - box-shadow: - 0 0 0 1px var(--accessibility-contrast-swatch-border-color), - 6px 5px var(--accessibility-contrast-bg), + box-shadow: 0 0 0 1px var(--accessibility-contrast-swatch-border-color), 6px 5px var(--accessibility-contrast-bg), 6px 5px 0 1px var(--accessibility-contrast-swatch-border-color); } .spectrum-color-contrast.visible:not(.error):-moz-locale-dir(rtl) .contrast-value-and-swatch:before { - box-shadow: - 0 0 0 1px var(--accessibility-contrast-swatch-border-color), - -6px 5px var(--accessibility-contrast-bg), + box-shadow: 0 0 0 1px var(--accessibility-contrast-swatch-border-color), -6px 5px var(--accessibility-contrast-bg), -6px 5px 0 1px var(--accessibility-contrast-swatch-border-color); } diff --git a/devtools/client/themes/accessibility-color-contrast.css b/devtools/client/themes/accessibility-color-contrast.css index 5d871949eff2..3b1a92188880 100644 --- a/devtools/client/themes/accessibility-color-contrast.css +++ b/devtools/client/themes/accessibility-color-contrast.css @@ -27,12 +27,15 @@ margin-inline-start: 4px; } -.accessibility-color-contrast .accessibility-contrast-value.AA:after, -.accessibility-color-contrast .accessibility-contrast-value.AAA:after { +.accessibility-color-contrast + .accessibility-contrast-value.AA:after, +.accessibility-color-contrast + .accessibility-contrast-value.AAA:after { color: var(--theme-highlight-green); } -.accessibility-color-contrast .accessibility-contrast-value.FAIL:after { +.accessibility-color-contrast + .accessibility-contrast-value.FAIL:after { color: var(--theme-icon-error-color); display: inline-block; width: 12px; @@ -46,12 +49,14 @@ fill: currentColor; } -.accessibility-color-contrast .accessibility-contrast-value.AA:after { +.accessibility-color-contrast + .accessibility-contrast-value.AA:after { content: "AA\2713"; unicode-bidi: isolate; } -.accessibility-color-contrast .accessibility-contrast-value.AAA:after { +.accessibility-color-contrast + .accessibility-contrast-value.AAA:after { content: "AAA\2713"; unicode-bidi: isolate; } diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css index b599c753385f..f244d5dad5f1 100644 --- a/devtools/client/themes/animation.css +++ b/devtools/client/themes/animation.css @@ -183,7 +183,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h } .animation-item:dir(rtl).animation-target { - right: 0; + right:0; } /* Reps component */ @@ -204,7 +204,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h flex: none; } -.animation-target .objectBox .highlight-node:hover { +.animation-target .objectBox .highlight-node:hover{ fill: var(--theme-icon-color); } @@ -251,7 +251,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h } .animation-summary-graph:dir(rtl) .animation-summary-graph-path { - transform: scaleX(-1); + transform: scaleX(-1.0); } .animation-computed-timing-path path { @@ -262,7 +262,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h transform: scale(1, -1); } -.animation-computed-timing-path path.infinity:nth-child(n + 2) { +.animation-computed-timing-path path.infinity:nth-child(n+2) { opacity: 0.3; } @@ -274,7 +274,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h vector-effect: non-scaling-stroke; } -.animation-effect-timing-path path.infinity:nth-child(n + 2) { +.animation-effect-timing-path path.infinity:nth-child(n+2) { opacity: 0.3; } @@ -375,7 +375,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h paint-order: stroke; stroke: var(--theme-body-background); stroke-linejoin: round; - stroke-opacity: 0.5; + stroke-opacity: .5; stroke-width: 4; text-anchor: end; } @@ -385,7 +385,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h } .animation-summary-graph:dir(rtl) .animation-name { - right: 0; + right:0; } /* Animation Detail */ @@ -509,7 +509,7 @@ select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):h } .keyframes-graph:dir(rtl) .keyframes-graph-path { - transform: scaleX(-1); + transform: scaleX(-1.0); } .keyframes-graph-path { diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css index 1c4a85efd6ed..2d12858e435b 100644 --- a/devtools/client/themes/badge.css +++ b/devtools/client/themes/badge.css @@ -2,20 +2,20 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root { + :root { --badge-active-background-color: var(--blue-60); - --badge-active-border-color: light-dark(rgba(255, 255, 255, 0.7), #fff6); + --badge-active-border-color: light-dark(rgba(255, 255, 255, 0.7), #FFF6); --badge-background-color: light-dark(white, var(--grey-80)); - --badge-border-color: light-dark(#cacad1, var(--grey-50)); + --badge-border-color: light-dark(#CACAD1, var(--grey-50)); --badge-color: light-dark(var(--grey-60), var(--grey-40)); --badge-interactive-background-color: light-dark(var(--grey-20), var(--grey-70)); --badge-interactive-color: light-dark(var(--grey-90), var(--grey-30)); - --badge-hover-interactive-background-color: light-dark(#dfdfe8, var(--grey-80)); + --badge-hover-interactive-background-color: light-dark(#DFDFE8, var(--grey-80)); --badge-hover-interactive-color: var(--badge-color); - --badge-interactive-border-color: light-dark(#cacad1, var(--grey-50)); - --badge-scrollable-color: light-dark(#8000d7, #b98eff); - --badge-scrollable-background-color: light-dark(#ffffff, var(--badge-interactive-background-color)); - --badge-scrollable-active-background-color: #8000d7; + --badge-interactive-border-color: light-dark(#CACAD1, var(--grey-50)); + --badge-scrollable-color: light-dark(#8000D7, #B98EFF); + --badge-scrollable-background-color: light-dark(#FFFFFF, var(--badge-interactive-background-color)); + --badge-scrollable-active-background-color: #8000D7; --badge-scrollable-active-color: var(--theme-selection-color); &[forced-colors-active] { @@ -99,7 +99,7 @@ color: var(--badge-hover-interactive-color); } -.inspector-badge:is(.active, .interactive.active) { +.inspector-badge:is(.active,.interactive.active) { background-color: var(--badge-active-background-color); outline-color: var(--badge-active-border-color); color: var(--theme-selection-color); diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css index 3471c0ca4080..e735af877631 100644 --- a/devtools/client/themes/boxmodel.css +++ b/devtools/client/themes/boxmodel.css @@ -6,18 +6,18 @@ --position-text-color: light-dark(var(--grey-90), var(--grey-30)); --position-border-color: light-dark(var(--grey-50), var(--grey-40)); - --margin-box-color: light-dark(#fdffdf, #73764a); + --margin-box-color: light-dark(#FDFFDF, #73764A); --margin-box-text-color: light-dark(var(--grey-90), var(--grey-10)); - --margin-box-border-color: light-dark(#d8e60a, #bdca00); + --margin-box-border-color: light-dark(#D8E60A, #BDCA00); --border-box-color: light-dark(var(--grey-50), var(--grey-70)); --border-box-text-color: light-dark(var(--theme-selection-color), var(--grey-10)); - --padding-box-color: light-dark(#e3dcff, #6657a6); + --padding-box-color: light-dark(#E3DCFF, #6657A6); --padding-box-text-color: light-dark(var(--grey-90), var(--grey-10)); - --content-box-color: light-dark(#cff0fb, #407aa4); - --content-box-border-color: light-dark(#54a9ff, #00b8ff); + --content-box-color: light-dark(#CFF0FB, #407AA4); + --content-box-border-color: light-dark(#54A9FF, #00B8FF); --box-border-width: 1px; diff --git a/devtools/client/themes/breadcrumbs.css b/devtools/client/themes/breadcrumbs.css index d7f92bd620da..5edd6697be40 100644 --- a/devtools/client/themes/breadcrumbs.css +++ b/devtools/client/themes/breadcrumbs.css @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root { + :root { --breadcrumb-id-class-color: light-dark(#909090, var(--theme-text-color-strong)); --breadcrumb-tag-color: light-dark(var(--theme-body-color), var(--theme-contrast-color)); @@ -100,7 +100,11 @@ color: var(--theme-highlight-purple); } - :is(.breadcrumbs-widget-item-tag, .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item-classes) { + :is( + .breadcrumbs-widget-item-tag, + .breadcrumbs-widget-item-pseudo-classes, + .breadcrumbs-widget-item-classes + ) { color: currentColor; } diff --git a/devtools/client/themes/changes.css b/devtools/client/themes/changes.css index 15fde07abc0e..fa16cd04b1a5 100644 --- a/devtools/client/themes/changes.css +++ b/devtools/client/themes/changes.css @@ -20,9 +20,9 @@ :root.theme-dark { --diff-add-background-color: rgba(18, 188, 0, 0.15); - --diff-add-text-color: #12bc00; + --diff-add-text-color: #12BC00; --diff-remove-background-color: rgba(255, 0, 57, 0.15); - --diff-remove-text-color: #ff0039; + --diff-remove-text-color: #FF0039; --diff-source-background: #222225; } @@ -73,7 +73,8 @@ padding-top: 3px; padding-right: 5px; padding-bottom: 3px; - padding-left: calc(var(--diff-level-min-offset) + var(--diff-level-offset) * var(--diff-level)); + padding-left: calc(var(--diff-level-min-offset) + + var(--diff-level-offset) * var(--diff-level)); } #sidebar-panel-changes .changes__toolbar { @@ -131,7 +132,8 @@ */ background-blend-mode: overlay; background-color: var(--theme-button-background); - background-image: linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background)); + background-image: + linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background)); border-radius: 8px; border: none; color: var(--theme-body-color); diff --git a/devtools/client/themes/chart.css b/devtools/client/themes/chart.css index 76adf443c9ff..f4a8ce8d7c2d 100644 --- a/devtools/client/themes/chart.css +++ b/devtools/client/themes/chart.css @@ -20,7 +20,7 @@ .pie-chart-slice { stroke-width: 1px; cursor: pointer; - stroke: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.2)); + stroke: light-dark(rgba(255,255,255,0.8), rgba(0,0,0,0.2)) ; &[largest] { stroke: light-dark(#000, #fff); diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css index 6acf4cd9575c..7edf51f55256 100644 --- a/devtools/client/themes/common.css +++ b/devtools/client/themes/common.css @@ -13,7 +13,10 @@ font: message-box; font-size: var(--theme-body-font-size); - --tab-line-hover-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); + --tab-line-hover-color: light-dark( + rgba(0,0,0,.2), + rgba(255,255,255,.2) + ); --tab-line-selected-color: var(--blue-50); --toggle-thumb-color: light-dark(white, var(--grey-40)); @@ -35,7 +38,7 @@ --toggle-hover-thumb-color: var(--toggle-thumb-color); --searchbox-no-match-background-color: light-dark(#ffe5e5, #402325); - --searchbox-no-match-stroke-color: light-dark(var(--red-60), var(--red-50)); + --searchbox-no-match-stroke-color: light-dark(var(--red-60),var(--red-50)); --searchbox-background-color: transparent; --searchbox-border-color: transparent; @@ -147,9 +150,7 @@ html|input { * Override wrong system font from forms.css * Bug 1458224: buttons use a wrong default font-size on Linux */ -html|button, -html|select, -html|input { +html|button, html|select, html|input { font: message-box; font-size: var(--theme-body-font-size); } @@ -401,7 +402,11 @@ iframe { } } -.devtools-button:empty:not([aria-expanded="true"], [aria-pressed="true"], .checked):hover { +.devtools-button:empty:not( + [aria-expanded="true"], + [aria-pressed="true"], + .checked +):hover { background: var(--toolbarbutton-hover-background); color: var(--toolbarbutton-hover-color); @@ -419,7 +424,7 @@ iframe { } .theme-light .devtools-button[data-standalone] { - border-color: rgba(138, 161, 180, 0.2); + border-color: rgba(138,161,180,0.2); } /* Selectable button which is unchecked. */ @@ -670,7 +675,11 @@ iframe { color: var(--theme-selection-color); } -.theme-twisty:is(.open, [open], [aria-expanded="true"]) { +.theme-twisty:is( + .open, + [open], + [aria-expanded="true"] +) { transform: none; } @@ -740,9 +749,7 @@ iframe { width: 100%; height: 2px; background: transparent; - transition: - transform 250ms var(--animation-curve), - opacity 250ms var(--animation-curve); + transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve); opacity: 0; transform: scaleX(0); @@ -791,7 +798,7 @@ iframe { /* Checkbox Toggle */ .devtools-checkbox-toggle { - --x-pos: 0.15em; + --x-pos: .15em; /* Reset native checkbox styling. */ appearance: none; background-color: var(--toggle-track-color); @@ -830,9 +837,10 @@ iframe { } } + /* For right-to-left layout, the toggle thumb goes in the opposite direction. */ html[dir="rtl"] .devtools-checkbox-toggle { - --x-pos: -0.15em; + --x-pos: -.15em; } html[dir="rtl"] .devtools-checkbox-toggle:checked { @@ -841,14 +849,14 @@ html[dir="rtl"] .devtools-checkbox-toggle:checked { .devtools-checkbox-toggle::before { position: relative; - width: calc(1em - 0.3em); - height: calc(1em - 0.3em); - transform: translateY(0.15em) translateX(var(--x-pos)); + width: calc(1em - .3em); + height: calc(1em - .3em); + transform: translateY(.15em) translateX(var(--x-pos)); border-radius: 100%; display: block; content: ""; background-color: var(--toggle-thumb-color); - transition: transform 0.1s ease-out; + transition: transform .1s ease-out; } .devtools-checkbox-toggle:checked::before { diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css index 5e01a0e3be41..98739ee81c10 100644 --- a/devtools/client/themes/compatibility.css +++ b/devtools/client/themes/compatibility.css @@ -73,10 +73,9 @@ display: grid; column-gap: var(--compatibility-base-unit); padding: calc(var(--compatibility-base-unit) * 2); - grid-template-areas: - "icon description" - ". aliases" - ". node-pane"; + grid-template-areas: "icon description" + ". aliases" + ". node-pane"; grid-template-columns: auto 1fr; } diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css index 2e2fc9872d4c..96891ea67d9c 100644 --- a/devtools/client/themes/computed.css +++ b/devtools/client/themes/computed.css @@ -2,9 +2,9 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -.theme-dark { + .theme-dark { --row-striped-background: rgba(255, 255, 255, 0.05); -} + } .theme-light { --row-striped-background: rgba(247, 247, 247, 0.8); @@ -215,7 +215,7 @@ border-width: 1px 1px 0 1px; /* Make the border more visible in High Contrast Mode */ - :root[forced-colors-active] & { + :root[forced-colors-active] &{ border-style: solid; } } @@ -228,6 +228,7 @@ text-decoration: line-through; } + #computed-no-results { height: 100%; } diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css index f12b99d7aa4c..b49f6cceef3d 100644 --- a/devtools/client/themes/dark-theme.css +++ b/devtools/client/themes/dark-theme.css @@ -42,7 +42,11 @@ body { * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion * failures in debug builds. */ -:is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited { + :is( + .theme-link, + .cm-s-mozilla .cm-link, + :is(.cm-editor, .cm-highlighted) .tok-link +):visited { color: var(--theme-link-color); } @@ -50,7 +54,10 @@ body { .cm-s-mozilla .cm-meta, .cm-s-mozilla .cm-hr, .cm-s-mozilla .cm-comment, -:is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment), +:is(.cm-editor, .cm-highlighted) :is( + .tok-meta, + .tok-comment +), .variable-or-property .token-undefined, .variable-or-property .token-null, .CodeMirror-Tern-completion-unknown:before { @@ -71,7 +78,7 @@ body { .variable-or-property .token-number, .variable-or-property[return] > .title > .name, .variable-or-property[scope] > .title > .name { - color: #709aff; + color: #709AFF; } .CodeMirror-Tern-completion-number:before { @@ -89,7 +96,10 @@ body { .cm-s-mozilla .cm-def, .cm-s-mozilla .cm-variable-2, -:is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) { +:is(.cm-editor, .cm-highlighted) :is( + .tok-variableName.tok-definition, + .tok-variableName +) { color: var(--theme-highlight-blue); } @@ -130,7 +140,7 @@ body { :is(.cm-editor, .cm-highlighted) .tok-string, .variable-or-property .token-string, .CodeMirror-Tern-farg { - color: #709aff; + color: #709AFF; } .CodeMirror-Tern-completion-string:before, @@ -141,7 +151,11 @@ body { .cm-s-mozilla .cm-atom, .cm-s-mozilla .cm-quote, .cm-s-mozilla .cm-error, -:is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid), +:is(.cm-editor, .cm-highlighted) :is( + .tok-atom, + .tok-bool, + .tok-invalid +), .variable-or-property .token-boolean, .variable-or-property .token-domnode, .variable-or-property[exception] > .title > .name { @@ -160,8 +174,7 @@ body { .devtools-toolbar, .devtools-sidebar-tabs tabs, .devtools-sidebar-alltabs, -.cm-s-mozilla .CodeMirror-dialog { - /* General toolbar styling */ +.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color); background-color: var(--theme-toolbar-background); border-color: var(--theme-splitter-color); @@ -179,21 +192,23 @@ body { * Best effort to match the existing theme, some of the colors * are duplicated here to prevent weirdness in the main theme. */ -.CodeMirror.cm-s-mozilla { - /* Inherit platform specific font sizing and styles */ +.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */ font-family: inherit; font-size: inherit; background: transparent; } -.CodeMirror.cm-s-mozilla pre, -.CodeMirror.cm-s-mozilla pre.CodeMirror-line, -.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like { +.CodeMirror.cm-s-mozilla pre, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like { color: var(--theme-text-color-strong); } .cm-s-mozilla .cm-operator, -:is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) { +:is(.cm-editor, .cm-highlighted) :is( + .tok-punctuation, + .tok-operator +) { color: var(--theme-body-color); } @@ -210,24 +225,24 @@ body { border-left-color: #aaa; } -.cm-s-mozilla .CodeMirror-activeline-background { - /* selected color with alpha */ - background: rgba(185, 215, 253, 0.15); +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .15); } /* Highlight for a line that contains an error. */ div.CodeMirror div.error-line { - background: rgba(255, 0, 0, 0.2); + background: rgba(255,0,0,0.2); } /* Generic highlighted text */ div.CodeMirror span.marked-text { - background: rgba(255, 255, 0, 0.2); - border: 1px dashed rgba(192, 192, 0, 0.6); + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); margin-inline-start: -1px; margin-inline-end: -1px; } + .cm-s-mozilla .empty-line .CodeMirror-linenumber, /* Codemirror 6 */ :is(.cm-editor, .cm-highlighted) .cm-gutterElement.empty-line { @@ -258,7 +273,7 @@ div.CodeMirror span.eval-text { .CodeMirror-hints, .CodeMirror-Tern-tooltip { - box-shadow: 0 0 4px rgba(255, 255, 255, 0.3); + box-shadow: 0 0 4px rgba(255, 255, 255, .3); background-color: #0f171f; color: var(--theme-body-color); } diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css index 69a87e2fbd10..5ca4a4339520 100644 --- a/devtools/client/themes/fonts.css +++ b/devtools/client/themes/fonts.css @@ -29,8 +29,7 @@ overflow: auto; } -#font-container, -#font-editor { +#font-container, #font-editor { min-width: var(--min-container-width); } @@ -39,18 +38,18 @@ } #font-editor { - padding-bottom: 0.5em; + padding-bottom: .5em; } #font-editor summary { user-select: none; cursor: pointer; - margin-bottom: 0.4em; + margin-bottom: .4em; width: -moz-fit-content; } #font-editor details { - padding-bottom: 0.5em; + padding-bottom: .5em; } #font-editor details .label-open, @@ -141,7 +140,7 @@ } .font-group { - margin-bottom: 0.5em; + margin-bottom: .5em; } .font-group .font-name { @@ -221,7 +220,7 @@ justify-content: space-between; align-items: center; padding: 0 20px; - margin: 0.6em 0; + margin: .6em 0; } /* Style *all* axis controls with a top separator. See reset below. */ @@ -314,7 +313,7 @@ } /* Make native number steppers disappear by treating it as text field*/ -.font-value-input[type="number"] { +.font-value-input[type=number] { appearance: textfield; } @@ -386,7 +385,7 @@ color: var(--theme-text-color-alt); font-size: smaller; position: absolute; - bottom: -0.6em; + bottom: -.6em; visibility: hidden; } @@ -399,12 +398,12 @@ .font-value-slider-container::before { content: attr(data-min); - inset-inline-start: 0.3em; + inset-inline-start: .3em; } .font-value-slider-container::after { content: attr(data-max); - inset-inline-end: 0.3em; + inset-inline-end: .3em; } .font-value-slider { @@ -417,10 +416,11 @@ The value of font-weight goes from 100 to 900 in increments of 100. Decorate the slider for font-weight to have 9 vertical notches using a linear gradient. */ -.font-value-slider[name="font-weight"] { +.font-value-slider[name=font-weight] { --notch-size: 3px; /* Draw a vertical line to get one notch per background-image instance */ - background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size), transparent 0); + background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size), + transparent 0); /* Offset the background so the notch aligns with the center of the slider thumb */ background-position: 5px center; /* Repeat the background-image horizontally */ @@ -448,7 +448,7 @@ } .font-origin { - margin-top: -0.25em; + margin-top: -.25em; color: var(--theme-comment); justify-self: start; } @@ -516,8 +516,7 @@ } } - & a, - a:visited { + & a, a:visited { color: var(--theme-link-color); } } diff --git a/devtools/client/themes/inspector-shared.css b/devtools/client/themes/inspector-shared.css index 3ce70e55b416..8cbde0cf766c 100644 --- a/devtools/client/themes/inspector-shared.css +++ b/devtools/client/themes/inspector-shared.css @@ -7,7 +7,10 @@ @import url("./inspector-swatches.css"); :root { - --inspector-highlight-background-color: light-dark(var(--theme-highlight-yellow), #521c76); + --inspector-highlight-background-color: light-dark( + var(--theme-highlight-yellow), + #521C76 + ); --inspector-highlight-color: inherit; &[forced-colors-active] { diff --git a/devtools/client/themes/inspector-swatches.css b/devtools/client/themes/inspector-swatches.css index 1b1f1b176e42..8fd475982b15 100644 --- a/devtools/client/themes/inspector-swatches.css +++ b/devtools/client/themes/inspector-swatches.css @@ -43,7 +43,11 @@ } } -:is(.inspector-flex, .inspector-grid, .inspector-shapeswatch)[aria-pressed="true"] { +:is( + .inspector-flex, + .inspector-grid, + .inspector-shapeswatch +)[aria-pressed="true"] { background-color: var(--theme-toolbarbutton-checked-background); stroke: var(--theme-toolbarbutton-checked-color); } @@ -112,15 +116,18 @@ /* We want to display a checker below the current swatch color that would be visible if the swatch color isn't opaque */ .inspector-colorswatch::before { - content: ""; + content: ''; background-color: #eee; --checker-color: #ccc; - --background-gradient: linear-gradient(45deg, var(--checker-color) 25%, transparent 25% 75%, var(--checker-color) 75%); + --background-gradient: linear-gradient( + 45deg, + var(--checker-color) 25%, + transparent 25% 75%, + var(--checker-color) 75% + ); background-image: var(--background-gradient), var(--background-gradient); background-size: var(--swatch-size) var(--swatch-size); - background-position: - 0 0, - calc(var(--swatch-size) / 2) calc(var(--swatch-size) / 2); + background-position: 0 0, calc(var(--swatch-size) / 2) calc(var(--swatch-size) / 2); position: absolute; border-radius: 50%; inset: 0; @@ -165,7 +172,12 @@ stroke: #808080; } -:root[forced-colors-active] :is(.inspector-bezierswatch, .inspector-lineareasingswatch, .inspector-filterswatch, .inspector-angleswatch) { +:root[forced-colors-active] :is( + .inspector-bezierswatch, + .inspector-lineareasingswatch, + .inspector-filterswatch, + .inspector-angleswatch +) { fill: ButtonFace; stroke: var(--theme-icon-color); /* For some icons, the outline can conflate with the background image in a weird way diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css index 575cde54297f..1f3f7a49be16 100644 --- a/devtools/client/themes/inspector.css +++ b/devtools/client/themes/inspector.css @@ -105,7 +105,8 @@ window { display: none; } -#inspector-searchnavigation-container .inspector-searchnavigation-buttons::before { +#inspector-searchnavigation-container + .inspector-searchnavigation-buttons::before { background-size: 16px; margin-inline: 0; } diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css index 0ed7d3c50cb9..97a220445b28 100644 --- a/devtools/client/themes/layout.css +++ b/devtools/client/themes/layout.css @@ -2,11 +2,11 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:root { + :root { --flex-basis-outline-border-color: var(--blue-40); --flex-basis-outline-background-color: rgba(69, 161, 255, 0.25); --flex-growing-delta-outline-background-color: rgba(221, 0, 169, 0.13); - --flex-shrinking-delta-outline-background-color: #e9e3ff; + --flex-shrinking-delta-outline-background-color: #E9E3FF; --flex-min-max-properties-color: var(--purple-60); } @@ -283,11 +283,11 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { } .flex-outline.vertical-tb { - transform: translate(50%, -2em) rotate(0.25turn); + transform: translate(50%, -2em) rotate(.25turn); } .flex-outline.vertical-bt { - transform: translate(50%, 12em) rotate(0.75turn); + transform:translate(50%, 12em) rotate(0.75turn); } .flex-outline.vertical-tb, @@ -324,16 +324,19 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { top: 6px; /* Making sure the icon is visible against any background by creating a plain background around its shape, using a drop-shadow filter. */ - filter: drop-shadow(1px 0 0 var(--theme-body-background)) drop-shadow(0 1px 0 var(--theme-body-background)) drop-shadow(-1px 0 0 var(--theme-body-background)) + filter: + drop-shadow(1px 0 0 var(--theme-body-background)) + drop-shadow(0 1px 0 var(--theme-body-background)) + drop-shadow(-1px 0 0 var(--theme-body-background)) drop-shadow(0 -1px 0 var(--theme-body-background)); } .flex-outline.vertical-tb .flex-outline-final.clamped::after { - transform: rotate(-0.25turn); + transform: rotate(-.25turn); } .flex-outline.vertical-bt .flex-outline-final.clamped::after { - transform: rotate(-0.75turn); + transform: rotate(-.75turn); } .flex-outline-basis { @@ -380,7 +383,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { position: absolute; left: 2px; right: 2px; - top: calc(50% - 0.5px); + top: calc(50% - .5px); height: 1px; background: var(--theme-highlight-red); } @@ -398,14 +401,14 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { right: 2px; border-width: 1px 1px 0 0; transform-origin: top right; - transform: rotate(0.125turn); + transform: rotate(.125turn); } .flex-outline.shrinking .flex-outline-delta:after { left: 2px; border-width: 1px 0 0 1px; transform-origin: top left; - transform: rotate(-0.125turn); + transform: rotate(-.125turn); } .flex-outline-point { @@ -550,7 +553,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { .flex-outline.horizontal-rl, .flex-outline.horizontal-rl .flex-outline-point, .flex-outline.horizontal-rl .flex-outline-final.clamped::after { - transform: rotate(0.5turn); + transform: rotate(.5turn); } /** @@ -581,7 +584,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { grid-column: 1; display: grid; grid-template-columns: max-content max-content; - gap: 0.5em; + gap: .5em; } .flex-item-sizing .flexibility .name { @@ -610,7 +613,7 @@ html[dir="rtl"] .flex-item-list .devtools-button::after { .flex-item-sizing .css-property-link { font-weight: normal; - margin-inline-start: 0.5em; + margin-inline-start: .5em; } .flex-item-sizing .reasons, diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css index 493aa38b9f32..41d620d728b7 100644 --- a/devtools/client/themes/light-theme.css +++ b/devtools/client/themes/light-theme.css @@ -42,14 +42,22 @@ body { * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion * failures in debug builds. */ -:is(.theme-link, .cm-s-mozilla .cm-link, :is(.cm-editor, .cm-highlighted) .tok-link):visited { +:is( + .theme-link, + .cm-s-mozilla .cm-link, + :is(.cm-editor, .cm-highlighted) .tok-link +):visited { color: var(--theme-link-color); } .theme-comment, .cm-s-mozilla .cm-meta, .cm-s-mozilla .cm-hr, -.cm-s-mozilla .cm-comment :is(.cm-editor, .cm-highlighted) :is(.tok-meta, .tok-comment), +.cm-s-mozilla .cm-comment +:is(.cm-editor, .cm-highlighted) :is( + .tok-meta, + .tok-comment +), .variable-or-property .token-undefined, .variable-or-property .token-null, .CodeMirror-Tern-completion-unknown:before { @@ -74,7 +82,7 @@ body { } .CodeMirror-Tern-completion-number:before { - background-color: hsl(72, 100%, 27%); + background-color: hsl(72,100%,27%); } .theme-fg-color1, @@ -88,7 +96,10 @@ body { .cm-s-mozilla .cm-def, .cm-s-mozilla .cm-variable-2, -:is(.cm-editor, .cm-highlighted) :is(.tok-variableName.tok-definition, .tok-variableName) { +:is(.cm-editor, .cm-highlighted) :is( + .tok-variableName.tok-definition, + .tok-variableName +) { color: var(--blue-55); } @@ -103,7 +114,7 @@ body { } .CodeMirror-Tern-completion-object:before { - background-color: hsl(208, 56%, 40%); + background-color: hsl(208,56%,40%); } .theme-fg-color3, @@ -131,13 +142,17 @@ body { .CodeMirror-Tern-completion-string:before, .CodeMirror-Tern-completion-fn:before { - background-color: hsl(24, 85%, 39%); + background-color: hsl(24,85%,39%); } .cm-s-mozilla .cm-atom, .cm-s-mozilla .cm-quote, .cm-s-mozilla .cm-error, -:is(.cm-editor, .cm-highlighted) :is(.tok-atom, .tok-bool, .tok-invalid), +:is(.cm-editor, .cm-highlighted) :is( + .tok-atom, + .tok-bool, + .tok-invalid +), .variable-or-property .token-boolean, .variable-or-property .token-domnode, .variable-or-property[exception] > .title > .name { @@ -156,8 +171,7 @@ body { .devtools-toolbar, .devtools-sidebar-tabs tabs, .devtools-sidebar-alltabs, -.cm-s-mozilla .CodeMirror-dialog { - /* General toolbar styling */ +.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */ color: var(--theme-body-color); background-color: var(--theme-toolbar-background); border-color: var(--theme-splitter-color); @@ -175,20 +189,22 @@ body { * Best effort to match the existing theme, some of the colors * are duplicated here to prevent weirdness in the main theme. */ -.CodeMirror.cm-s-mozilla { - /* Inherit platform specific font sizing and styles */ +.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */ font-family: inherit; font-size: inherit; background: transparent; } -.CodeMirror.cm-s-mozilla pre, -.CodeMirror.cm-s-mozilla pre.CodeMirror-line, -.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like, +.CodeMirror.cm-s-mozilla pre, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line, +.CodeMirror.cm-s-mozilla pre.CodeMirror-line-like, .cm-s-mozilla .cm-variable-3, .cm-s-mozilla .cm-operator, .cm-s-mozilla .cm-special, -:is(.cm-editor, .cm-highlighted) :is(.tok-punctuation, .tok-operator) { +:is(.cm-editor, .cm-highlighted) :is( + .tok-punctuation, + .tok-operator +) { color: var(--theme-body-color); } @@ -197,20 +213,19 @@ body { border-left: solid 1px black; } -.cm-s-mozilla .CodeMirror-activeline-background { - /* selected color with alpha */ - background: rgba(185, 215, 253, 0.35); +.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */ + background: rgba(185, 215, 253, .35); } /* Highlight for a line that contains an error. */ div.CodeMirror div.error-line { - background: rgba(255, 0, 0, 0.2); + background: rgba(255,0,0,0.2); } /* Generic highlighted text */ div.CodeMirror span.marked-text { - background: rgba(255, 255, 0, 0.2); - border: 1px dashed rgba(192, 192, 0, 0.6); + background: rgba(255,255,0,0.2); + border: 1px dashed rgba(192,192,0,0.6); margin-inline-start: -1px; margin-inline-end: -1px; } @@ -233,13 +248,12 @@ div.CodeMirror span.eval-text { background-color: #ccd; } -.cm-s-mozilla .CodeMirror-linenumber { - /* line number text */ +.cm-s-mozilla .CodeMirror-linenumber { /* line number text */ color: var(--grey-50); } .CodeMirror-hints, .CodeMirror-Tern-tooltip { - box-shadow: 0 0 4px rgba(128, 128, 128, 0.5); + box-shadow: 0 0 4px rgba(128, 128, 128, .5); background-color: var(--theme-sidebar-background); } diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css index daadf19c24f2..4af1f9b580db 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -77,10 +77,10 @@ body.dragging .tag-line { } #root-wrapper:after { - content: ""; - display: block; - clear: both; - position: relative; + content: ""; + display: block; + clear: both; + position:relative; } .html-editor { @@ -96,7 +96,7 @@ body.dragging .tag-line { } .html-editor-inner { - border: solid 0.1px; + border: solid .1px; flex: 1 1 auto; /* Keep the editor away from the markup view floating scrollbars */ @@ -283,8 +283,7 @@ ul.children + .tag-line::before { z-index: 1; } -.child.collapsed .child, -.child.collapsed .children { +.child.collapsed .child, .child.collapsed .children { display: none; } @@ -366,6 +365,7 @@ ul.children + .tag-line::before { forced-color-adjust: none; } + .closing-bracket { pointer-events: none; } @@ -428,9 +428,7 @@ ul.children + .tag-line::before { } .flash-out { - transition: - background, - color 0.5s; + transition: background,color .5s; } .editor { @@ -536,7 +534,10 @@ ul.children + .tag-line::before { /* In High Contrast Mode, we need to override all the colors so we can properly handle the selected + focused-visible style */ - :root[forced-colors-active] :is(.tag, .pseudo) { + :root[forced-colors-active] :is( + .tag, + .pseudo + ) { color: SelectedItem; } @@ -567,7 +568,11 @@ ul.children + .tag-line::before { inplace editor input). theme-selected doesn't work in this case since the text is a sibling of the class, not a child. */ -.tag-line[selected]:not(:has(.styleinspector-propertyeditor:focus)) :is(.editor, .editor.comment, .editor :is(.attr-name, .attr-value, .tag, .pseudo)) { +.tag-line[selected]:not(:has(.styleinspector-propertyeditor:focus)) :is( + .editor, + .editor.comment, + .editor :is(.attr-name, .attr-value, .tag, .pseudo) +) { color: var(--theme-selection-color); & :is([editable], .tag):focus-visible { @@ -604,10 +609,14 @@ ul.children + .tag-line::before { /* Selected nodes being flashed in the tree should have dark selected text. Here we target nodes with theme-selected text colors and apply a dark, accessible text color for when the yellow flashing background is applied. */ -.tag-line[selected] :is(.theme-selected.theme-bg-contrast ~ .editor, .theme-selected ~ .editor .theme-fg-contrast) { +.tag-line[selected] :is( + .theme-selected.theme-bg-contrast ~ .editor, + .theme-selected ~ .editor .theme-fg-contrast +) { color: var(--theme-contrast-color) !important; } + /* Applicable to the DOCTYPE */ .doctype { font-style: italic; diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css index df1ae04dc811..06adbd46e6c6 100644 --- a/devtools/client/themes/memory.css +++ b/devtools/client/themes/memory.css @@ -4,7 +4,7 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-dark { - --cell-border-color: rgba(255, 255, 255, 0.15); + --cell-border-color: rgba(255,255,255,0.15); --row-alt-background-color: rgba(86, 117, 185, 0.15); --row-hover-background-color: rgba(86, 117, 185, 0.25); --link-color: var(--blue-40); @@ -12,17 +12,14 @@ } .theme-light { - --cell-border-color: rgba(0, 0, 0, 0.15); - --row-alt-background-color: rgba(76, 158, 217, 0.1); - --row-hover-background-color: rgba(76, 158, 217, 0.2); + --cell-border-color: rgba(0,0,0,0.15); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); --link-color: var(--theme-link-color); --link-color-active: var(--blue-70); } -html, -body, -#app, -#memory-tool { +html, body, #app, #memory-tool { height: 100%; } @@ -234,7 +231,7 @@ body, margin-bottom: 14px; } -.snapshot-list-item > .snapshot-title > input[type="checkbox"] { +.snapshot-list-item > .snapshot-title > input[type=checkbox] { margin: 0; margin-inline-end: 5px; } @@ -582,9 +579,9 @@ body, .separator, .not-available, .heap-tree-item-address { - opacity: 0.5; - margin-left: 0.5em; - margin-right: 0.5em; + opacity: .5; + margin-left: .5em; + margin-right: .5em; } .heap-tree-item-address { diff --git a/devtools/client/themes/perf.css b/devtools/client/themes/perf.css index e2997a95d684..87a1d7ba6977 100644 --- a/devtools/client/themes/perf.css +++ b/devtools/client/themes/perf.css @@ -167,7 +167,7 @@ appearance: none; color: var(--theme-select-color); background-color: var(--theme-select-background); - background-image: url("chrome://devtools/skin/images/arrow-dropdown-12.svg"); + background-image: url('chrome://devtools/skin/images/arrow-dropdown-12.svg'); background-position: right 4px center; background-repeat: no-repeat; diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css index 2d5f9959fe53..4aeac7adb232 100644 --- a/devtools/client/themes/rules.css +++ b/devtools/client/themes/rules.css @@ -198,16 +198,15 @@ .ruleview-computedlist, [hidden]:is( - .ruleview-expandable-container, - .ruleview-overridden-items, - .ruleview-overridden-rule-filter, - .ruleview-warning, - .ruleview-unused-warning, - .ruleview-compatibility-warning, - .ruleview-used, - .ruleview-invalid-at-computed-value-time-warning, - - ), + .ruleview-expandable-container, + .ruleview-overridden-items, + .ruleview-overridden-rule-filter, + .ruleview-warning, + .ruleview-unused-warning, + .ruleview-compatibility-warning, + .ruleview-used, + .ruleview-invalid-at-computed-value-time-warning, +), .ruleview-overridden .inspector-grid { display: none; } @@ -348,41 +347,46 @@ */ .ruleview-rule.unmatched, .ruleview-rule.uneditable, -.ruleview-rule[unmatched="true"], -.ruleview-rule[uneditable="true"] { +.ruleview-rule[unmatched=true], +.ruleview-rule[uneditable=true] { background: var(--theme-tab-toolbar-background); } -:root[forced-colors-active] .ruleview-rule:is(.unmatched, [unmatched="true"]) { +:root[forced-colors-active] .ruleview-rule:is( + .unmatched, + [unmatched=true] +) { /* Set an inactive color in High Contrast Mode as we don't have the distinct background that is set in regular mode */ color: var(--theme-text-color-inactive); } .ruleview-rule.uneditable :focus, -.ruleview-rule[uneditable="true"] :focus { +.ruleview-rule[uneditable=true] :focus { outline: none; } .ruleview-rule.uneditable .theme-link, -.ruleview-rule[uneditable="true"] .theme-link { +.ruleview-rule[uneditable=true] .theme-link { color: var(--theme-highlight-bluegrey); } .ruleview-rule.uneditable .ruleview-enableproperty, -.ruleview-rule[uneditable="true"] .ruleview-enableproperty { +.ruleview-rule[uneditable=true] .ruleview-enableproperty { visibility: hidden; } .ruleview-rule.uneditable .inspector-swatch, -.ruleview-rule[uneditable="true"] .inspector-swatch { +.ruleview-rule[uneditable=true] .inspector-swatch { cursor: default; } .ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule.uneditable .ruleview-propertyvaluecontainer > .ruleview-propertyvalue, -.ruleview-rule[uneditable="true"] .ruleview-namecontainer > .ruleview-propertyname, -.ruleview-rule[uneditable="true"] .ruleview-propertyvaluecontainer > .ruleview-propertyvalue { +.ruleview-rule.uneditable .ruleview-propertyvaluecontainer > +.ruleview-propertyvalue, +.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname, +.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer > +.ruleview-propertyvalue { border-bottom-color: transparent; } @@ -420,8 +424,7 @@ color: var(--theme-comment); } -.ruleview-rule-indent, -.ruleview-ancestor-ruleclose { +.ruleview-rule-indent, .ruleview-ancestor-ruleclose { white-space: pre; /* * We do want to keep the underlying chars for the indent for user to copy/paste, @@ -480,7 +483,7 @@ background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box; /* Using fill to paint the border, and stroke for the tick */ -moz-context-properties: fill, stroke; - fill: rgba(0, 0, 0, 0.3); + fill: rgba(0,0,0,.3); stroke: transparent; } @@ -492,17 +495,17 @@ :root[platform="win"].theme-dark .ruleview-enableproperty, :root[platform="linux"].theme-dark .ruleview-enableproperty { - fill: rgba(255, 255, 255, 0.4); + fill: rgba(255,255,255,.4); } :root[platform="win"] .ruleview-enableproperty:checked, :root[platform="linux"] .ruleview-enableproperty:checked { - stroke: rgba(0, 0, 0, 0.6); + stroke: rgba(0,0,0,.6); } :root[platform="win"].theme-dark .ruleview-enableproperty:checked, :root[platform="linux"].theme-dark .ruleview-enableproperty:checked { - stroke: rgba(255, 255, 255, 0.8); + stroke: rgba(255,255,255,.8); } .ruleview-warning, @@ -523,10 +526,11 @@ } .ruleview-invalid-at-computed-value-time-warning { - background-image: var(--invalid-at-computed-value-time-icon); - fill: var(--invalid-at-computed-value-time-fill-color); + background-image: var(--invalid-at-computed-value-time-icon); + fill: var(--invalid-at-computed-value-time-fill-color); } + .ruleview-unused-warning { background-image: url(resource://devtools-shared-images/info-small.svg); background-color: var(--theme-sidebar-background); @@ -571,7 +575,11 @@ .ruleview-newproperty { /* As we don't have the checkbox displayed before the input, we need to align it with the property name above it. */ - margin-inline-start: calc(var(--rule-enableproperty-size) + var(--rule-enableproperty-margin-inline-start) + var(--rule-enableproperty-margin-inline-end)); + margin-inline-start: calc( + var(--rule-enableproperty-size) + + var(--rule-enableproperty-margin-inline-start) + + var(--rule-enableproperty-margin-inline-end) + ); } .ruleview-namecontainer, @@ -680,7 +688,7 @@ } } -.ruleview-propertycontainer > * { +.ruleview-propertycontainer > * { vertical-align: middle; } @@ -702,6 +710,7 @@ /* Put the box-shadow inside the element so it's still visible when sibling elements are highlighted */ box-shadow: inset 0 -1px 0 0 var(--theme-contrast-border); + /* property name and value and unmatched/inactive colors need to be adjusted in order to have enough contrast against the highlighted background */ & .ruleview-propertyname { @@ -722,8 +731,7 @@ don't have specific highlighted colors (selectors, semi colons, stylesheet location, ...) */ :root[forced-colors-active] & { color: var(--theme-contrast-color); - a, - .theme-twisty { + a, .theme-twisty { color: var(--theme-contrast-color); } @@ -736,7 +744,7 @@ .ruleview-namecontainer:hover > .ruleview-propertyname, .ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue { - text-decoration: 1px underline dashed hsl(0, 0%, 50%); + text-decoration: 1px underline dashed hsl(0,0%,50%); } /* ancestor rules info element (parent at-rules, parent of nested rules, …) */ @@ -754,7 +762,7 @@ max-width: max-content; } -.ruleview-rule-ancestor-data [role="listitem"].has-tooltip:hover .container-query-declaration { +.ruleview-rule-ancestor-data [role="listitem"].has-tooltip:hover .container-query-declaration { text-decoration: underline; text-decoration-color: var(--theme-highlight-blue); text-decoration-style: dotted; @@ -763,7 +771,7 @@ text-underline-offset: 2px; } -.ruleview-rule-ancestor-data [role="listitem"] :is(button, [role="button"]).open-inspector { +.ruleview-rule-ancestor-data [role="listitem"] :is(button,[role="button"]).open-inspector { /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */ margin-inline: 1ch 0; user-select: auto; @@ -779,9 +787,9 @@ color: var(--theme-text-color-alt); } -.ruleview-rule:is(.unmatched, [unmatched="true"]) .ruleview-selector, +.ruleview-rule:is(.unmatched, [unmatched=true]) .ruleview-selector, .ruleview-selector.unmatched, -.ruleview-property:is(.unused, .ruleview-overridden) :is(.ruleview-propertyname, .ruleview-propertyvalue) { +.ruleview-property:is(.unused, .ruleview-overridden) :is(.ruleview-propertyname,.ruleview-propertyvalue) { color: var(--theme-text-color-inactive); } diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css index 0c75f326af43..e8bba2c015d0 100644 --- a/devtools/client/themes/splitters.css +++ b/devtools/client/themes/splitters.css @@ -8,7 +8,7 @@ /* Splitters */ :root { - --devtools-splitter-color: #e0e0e2 /* --grey-25 */; + --devtools-splitter-color: #e0e0e2 /* --grey-25 */; /* Use :where() so we don't get a higher specificity for this rule */ &:where([devtoolstheme="dark"]) { --devtools-splitter-color: #38383d /* --grey-70 */; @@ -30,20 +30,20 @@ --devtools-splitter-top-width: 2px; --devtools-splitter-bottom-width: 2px; - --devtools-horizontal-splitter-min-height: calc( - var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-splitter-element-size) - ); - --devtools-emphasized-horizontal-splitter-min-height: calc( - var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + var(--devtools-emphasized-splitter-element-size) - ); + --devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + + var(--devtools-splitter-element-size)); + --devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + + var(--devtools-emphasized-splitter-element-size)); /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/ --devtools-splitter-inline-start-width: 1px; --devtools-splitter-inline-end-width: 4px; - --devtools-vertical-splitter-min-width: calc( - var(--devtools-splitter-inline-start-width) + var(--devtools-splitter-inline-end-width) + var(--devtools-splitter-element-size) - ); + --devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) + + var(--devtools-splitter-inline-end-width) + + var(--devtools-splitter-element-size)); } splitter.devtools-horizontal-splitter, @@ -64,7 +64,7 @@ splitter.devtools-horizontal-splitter, /* opt-out of forced colors because the transparent borders are turned into opaque ones in High Contrast Mode. --devtools-splitter-color has specific value in High Contrast Mode so we should be fine */ - forced-color-adjust: none; + forced-color-adjust: none; } splitter.devtools-horizontal-splitter { diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css index 2f2ece4d4b10..cc7f35643da7 100644 --- a/devtools/client/themes/styleeditor.css +++ b/devtools/client/themes/styleeditor.css @@ -78,7 +78,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton { display: none; } -li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { +li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { display: block; } @@ -231,7 +231,7 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message { opacity: 0.3; } -.stylesheet-linked-file:not(:empty) { +.stylesheet-linked-file:not(:empty){ margin-inline-end: 0.4em; } @@ -293,10 +293,7 @@ h3 { } .splitview-nav > li.splitview-active { - background-size: - 0 0, - 0 0, - auto; + background-size: 0 0, 0 0, auto; } .stylesheet-toggle { diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css index 6cdee729304a..58a312569699 100644 --- a/devtools/client/themes/toolbars.css +++ b/devtools/client/themes/toolbars.css @@ -183,7 +183,7 @@ splitter.devtools-horizontal-splitter, &:hover { fill: var(--theme-icon-hover-color); - } + } } .devtools-dropdown-button:dir(rtl) { diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css index 67c64fefe0ce..2bfadfe6e2e4 100644 --- a/devtools/client/themes/toolbox.css +++ b/devtools/client/themes/toolbox.css @@ -19,6 +19,7 @@ color: var(--theme-toolbar-color); } + .toolbox-always-on-top { display: flex; padding: 6px; @@ -275,7 +276,7 @@ text-overflow: ellipsis; color: var(--theme-toolbar-color); background-color: transparent; - /* adjust outline offset so it's not clipped */ + /* adjust outline offset so it's not clipped */ --theme-outline-offset: -2px; } @@ -628,7 +629,10 @@ min-height: 75px; } -:is(#toolbox-panel-webconsole, #toolbox-deck)[hidden] { +:is( + #toolbox-panel-webconsole, + #toolbox-deck +)[hidden] { visibility: hidden; } @@ -667,7 +671,9 @@ pointer-events: none; } -#toolbox-container.tabs-reordering .devtools-tab:not(.selected):hover .devtools-tab-line { +#toolbox-container.tabs-reordering + .devtools-tab:not(.selected):hover + .devtools-tab-line { background: transparent; opacity: 0; transition: none; diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css index c2cfc2b5a7a9..91a6e5113404 100644 --- a/devtools/client/themes/tooltips.css +++ b/devtools/client/themes/tooltips.css @@ -22,14 +22,14 @@ * Since they're defined in :root with light-dark(), we need to register them so we'll get * the actual final (rgb) color, and not the declaration with substituted variables */ -@property --bezier-diagonal-color { - syntax: ""; + @property --bezier-diagonal-color { + syntax: ''; inherits: true; initial-value: transparent; } @property --timing-function-control-point-background { - syntax: ""; + syntax: ''; inherits: true; initial-value: transparent; } @@ -39,7 +39,7 @@ --bezier-diagonal-color: light-dark(rgba(0, 0, 0, 0.2), #eee); --timing-function-grid-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1)); - --timing-function-line-color: #4c9ed9; + --timing-function-line-color: #4C9ED9; --timing-function-preview-scale: light-dark(var(--grey-43), var(--grey-40)); --timing-function-preview-dot-border: white; --timing-function-control-point-background: light-dark(var(--grey-55), var(--grey-20)); @@ -54,10 +54,10 @@ --theme-arrowpanel-background: var(--theme-popup-background); --theme-arrowpanel-color: var(--theme-popup-color); --theme-arrowpanel-border-color: var(--theme-popup-border-color); - --theme-arrowpanel-separator: light-dark(ThreeDShadow, rgba(249, 249, 250, 0.1)); - --theme-arrowpanel-active-background: light-dark(hsla(0, 0%, 80%, 0.45), rgba(249, 249, 250, 0.15)); + --theme-arrowpanel-separator: light-dark(ThreeDShadow, rgba(249,249,250,.1)); + --theme-arrowpanel-active-background: light-dark(hsla(0,0%,80%,.45), rgba(249,249,250,.15)); --theme-arrowpanel-active-outline-color: transparent; - --theme-arrowpanel-disabled-color: light-dark(GrayText, rgba(249, 249, 250, 0.5)); + --theme-arrowpanel-disabled-color: light-dark(GrayText, rgba(249,249,250,.5)); &[forced-colors-active] { /* The active state have a different background but with an outline in HCM */ @@ -72,7 +72,6 @@ work even if we don't have a resulting system color, as the consumers of this variable already need to opt out of forced colors so it can be used in the background gradient */ - /* prettier-ignore */ --timing-function-grid-color: light-dark( /* In light mode, the grid appears much more contrasted, so lower the opacity even more */ rgb(from GrayText r g b / 0.4), @@ -86,7 +85,7 @@ } :root[platform="mac"].theme-light { - --theme-arrowpanel-separator: hsla(210, 4%, 10%, 0.14); + --theme-arrowpanel-separator: hsla(210,4%,10%,.14); } /* @@ -96,9 +95,8 @@ Unset the color-scheme on those element so it uses the one we set on :root in common.css, which matches our light/dark theme. */ -menupopup, -panel { - color-scheme: unset; +menupopup, panel { + color-scheme: unset } strong { @@ -151,8 +149,7 @@ strong { margin: 0; } - dt, - dd { + dt,dd { display: inline; } @@ -169,6 +166,7 @@ strong { } } + /* Tooltip: Compatibility tooltip */ .devtools-tooltip-css-compatibility { @@ -184,6 +182,7 @@ strong { overflow-y: auto; } + /* Tooltip: Inactive CSS tooltip */ .devtools-tooltip-inactive-css, @@ -271,17 +270,15 @@ strong { color: var(--theme-highlight-red); } + /* Tooltip: Tiles */ .devtools-tooltip-tiles { background-color: #eee; - background-image: - linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), + background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc); background-size: 20px 20px; - background-position: - 0 0, - 10px 10px; + background-position: 0 0, 10px 10px; } .tooltip-container { @@ -473,7 +470,7 @@ strong { background: var(--theme-arrowpanel-background); border: 1px solid var(--theme-arrowpanel-border-color); border-radius: var(--theme-arrowpanel-border-radius); - box-shadow: 0 0 4px hsla(210, 4%, 10%, 0.2); + box-shadow: 0 0 4px hsla(210,4%,10%,.2); } > .tooltip-arrow { @@ -579,15 +576,15 @@ strong { --theme-outline-offset: -2px; } - &:not([disabled], [open], :active):hover { + &:not([disabled],[open],:active):hover { background-color: var(--theme-popup-hover-background); color: var(--theme-popup-hover-color); } - &:not([disabled]):is([open], :hover:active) { + &:not([disabled]):is([open],:hover:active) { background-color: var(--theme-arrowpanel-active-background); color: var(--theme-arrowpanel-active-color); - box-shadow: 0 1px 0 hsla(210, 4%, 10%, 0.03) inset; + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; outline: 1px solid var(--theme-arrowpanel-active-outline-color); } @@ -624,7 +621,11 @@ strong { } /* Use :where to avoid having a high specificity that would take over the rule above */ - .menuitem > button.command:where([role="menuitem"], [role="menuitemcheckbox"], [role="link"]) { + .menuitem > button.command:where( + [role="menuitem"], + [role="menuitemcheckbox"], + [role="link"] + ) { appearance: none; border: none; background-color: transparent; @@ -888,7 +889,7 @@ strong { flex: 1; padding: var(--image-tooltip-image-padding); justify-content: center; - min-height: 1px; + min-height: 1px } .devtools-tooltip-image { @@ -910,7 +911,7 @@ strong { .invoke-confirm { color: var(--theme-popup-color); - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0,0,0, 0.1); max-width: 212px; } @@ -1023,7 +1024,7 @@ strong { /* Indent the content script items */ .webconsole-evaluation-selector-item.indented::before { content: "\2514\2500" !important; - z-index: 1000; + z-index:1000; margin-inline-start: 20px; } .checkbox-container .menuitem > .command.indented > .label { diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css index 688634b064a0..3fe05df13dba 100644 --- a/devtools/client/themes/variables.css +++ b/devtools/client/themes/variables.css @@ -8,19 +8,19 @@ * the actual final (rgb) color, and not the declaration with subtituted variables */ @property --theme-highlight-blue { - syntax: ""; + syntax: ''; inherits: true; initial-value: transparent; } @property --theme-highlight-red { - syntax: ""; + syntax: ''; inherits: true; initial-value: transparent; } @property --theme-body-color { - syntax: ""; + syntax: ''; inherits: true; initial-value: transparent; } @@ -42,7 +42,7 @@ --theme-focus-outline-size: 2px; --theme-focus-outline: var(--theme-focus-outline-size) solid var(--theme-focus-outline-color); --theme-outline-offset: 0px; - /** + /** * we want the box shadow to be 2px bigger than the offset so we have a "double border" * (without it impacting the element layout), which should work whatever * the background-color is (e.g. a clickable element in a "selected" blue-background container) @@ -60,7 +60,7 @@ * with lower opacity than the 0.6 we apply on highlighter so this can be used as * background color without being too bold */ - --dimmed-highlighter-box-content-color: hsl(197, 71%, 73%, 0.3); + --dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3); /* * Photon Colors CSS Variables v3.3.2 @@ -246,11 +246,12 @@ --theme-toolbarbutton-color: light-dark(var(--grey-70), var(--grey-40)); --theme-toolbarbutton-hover-background: color-mix(in srgb, currentColor 14%, transparent); --theme-toolbarbutton-hover-color: var(--theme-toolbarbutton-color); - --theme-toolbarbutton-checked-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 5%, transparent); + --theme-toolbarbutton-checked-background: color-mix(in srgb,var(--theme-toolbarbutton-checked-color) 5%,transparent); --theme-toolbarbutton-checked-color: light-dark(var(--blue-60), var(--blue-30)); --theme-toolbarbutton-checked-hover-background: var(--theme-toolbarbutton-hover-background); --theme-toolbarbutton-checked-hover-color: var(--theme-toolbarbutton-color); - --theme-toolbarbutton-active-background: color-mix(in srgb, var(--theme-toolbarbutton-checked-color) 20%, transparent); + --theme-toolbarbutton-active-background: color-mix(in srgb,var(--theme-toolbarbutton-checked-color) 20%,transparent); + /* Used for select elements */ /* Note: we don't use the pair of system properties Field/FieldText here (like @@ -264,17 +265,34 @@ /* Warning colors */ --theme-warning-background: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%)); - --theme-warning-border: light-dark(/* Yellow 60 + opacity */ rgba(215, 182, 0, 0.28), hsl(60, 30%, 26%)); + --theme-warning-border: light-dark( + /* Yellow 60 + opacity */ + rgba(215, 182, 0, 0.28) , + hsl(60, 30%, 26%) + ); --theme-warning-color: light-dark(var(--yellow-80), hsl(43, 94%, 81%)); /* Error colors */ --theme-error-background: light-dark(hsl(344, 73%, 97%), hsl(345, 23%, 24%)); - --theme-error-border: light-dark(rgb(from var(--red-60) r g b / 0.12), hsl(345, 30%, 35%)); + --theme-error-border: light-dark( + rgb(from var(--red-60) r g b / 0.12), + hsl(345, 30%, 35%) + ); --theme-error-color: light-dark(var(--red-70), var(--red-20)); - /* Flashing colors used to highlight updates */ - --theme-contrast-background: light-dark(/* = Yellow 50-a40 on white */ #fff699, /* = Yellow 50-a20 on body background */ #4f4b1f); - --theme-contrast-background-alpha: light-dark(/* Yellow 50-a40 */ rgba(255, 233, 0, 0.4), /* Yellow 50-a15 */ rgba(255, 233, 0, 0.15)); +/* Flashing colors used to highlight updates */ + --theme-contrast-background: light-dark( + /* = Yellow 50-a40 on white */ + #fff699, + /* = Yellow 50-a20 on body background */ + #4f4b1f + ); + --theme-contrast-background-alpha: light-dark( + /* Yellow 50-a40 */ + rgba(255, 233, 0, 0.4), + /* Yellow 50-a15 */ + rgba(255, 233, 0, 0.15) + ); --theme-contrast-color: light-dark(black, white); /* This is used for search/filter results underline and need to have a 3:1 contrast against the background */ --theme-contrast-border: light-dark(var(--yellow-70), var(--yellow-65)); @@ -285,15 +303,15 @@ &[forced-colors-active] { /* Color picked from HCM palette created by a11y team */ - --theme-highlight-blue: light-dark(#0060df, #00ddff); - --theme-highlight-red: light-dark(#c50042, #ff9aa2); - --theme-highlight-green: light-dark(#005e5e, #3fe1b0); - --theme-highlight-purple: #952bb9; - --theme-highlight-purple-text: #f7e2ff; - --theme-highlight-yellow: light-dark(#ffffcc, #ffea80); - --theme-highlight-orange: light-dark(#cc3d00, #ffb587); - --theme-highlight-pink: light-dark(#ff9aa2, #ffdfe7); - --theme-highlight-gray: light-dark(#5b5b66, #f0f0f4); + --theme-highlight-blue: light-dark(#0060DF, #00DDFF); + --theme-highlight-red: light-dark(#C50042, #FF9AA2); + --theme-highlight-green: light-dark(#005E5E, #3FE1B0); + --theme-highlight-purple: #952BB9; + --theme-highlight-purple-text: #F7E2FF; + --theme-highlight-yellow: light-dark(#FFFFCC, #FFEA80); + --theme-highlight-orange: light-dark(#CC3D00, #FFB587); + --theme-highlight-pink: light-dark(#FF9AA2, #FFDFE7); + --theme-highlight-gray: light-dark(#5B5B66, #F0F0F4); --theme-body-background: Canvas; @@ -350,6 +368,7 @@ --theme-link-color: LinkText; --theme-internal-link-color: LinkText; + --theme-focus-outline-color: CanvasText; --theme-focus-textinput-outline-color: SelectedItem; --theme-icon-color: ButtonText; diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css index c9af02ca1778..eb0df9af43ed 100644 --- a/devtools/client/themes/webconsole.css +++ b/devtools/client/themes/webconsole.css @@ -24,7 +24,10 @@ --console-input-background: light-dark(var(--theme-body-background), var(--theme-tab-toolbar-background)); --console-message-background: var(--theme-body-background); - --console-message-border: light-dark(color-mix(in srgb, var(--grey-10), var(--grey-20)), var(--theme-splitter-color)); + --console-message-border: light-dark( + color-mix(in srgb, var(--grey-10), var(--grey-20)), + var(--theme-splitter-color) + ); --console-message-color: var(--theme-text-color-strong); --console-error-background: var(--theme-error-background); --console-error-border: var(--theme-error-border); @@ -114,7 +117,7 @@ * the last element is actually the second-to-last element when the output is * scrolled all the way down, because we include an empty buffer div which * grows to simulate the height of unrendered content.) */ -.webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) { + .webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) { border-bottom-width: 0; /* Adjust the min-height since we now only have a single border. */ min-height: calc(var(--console-row-height) + 1px); @@ -339,7 +342,10 @@ background-color: var(--console-warning-color); } -:root[forced-colors-active] :is(.message-repeats, .warning-group-badge) { +:root[forced-colors-active] :is( + .message-repeats, + .warning-group-badge +) { color: Canvas; background-color: CanvasText; } @@ -712,10 +718,12 @@ a.learn-more-link.webconsole-learn-more-link { But when the filter input is not focused, or empty, and there is no filtered messages, we don't want to display it as it provides little value */ -.webconsole-filterbar-primary[data-has-filtered-by-text="false"] .devtools-searchbox input:is(:not(:focus), :empty) ~ #devtools-console-output-filter-summary { +.webconsole-filterbar-primary[data-has-filtered-by-text="false"] + .devtools-searchbox input:is(:not(:focus),:empty) ~ #devtools-console-output-filter-summary { display: none; } + /* Special casing String reps, and warning/error string colors * so they are legible */ .message .message-body > .objectBox-string, @@ -765,16 +773,20 @@ a.learn-more-link.webconsole-learn-more-link { } /* Styles for JavaScript Tracer messages */ -.webconsole-app :is(.jstracer-dom-event, .jstracer-dom-mutation, .jstracer-implementation) { +.webconsole-app :is( + .jstracer-dom-event, + .jstracer-dom-mutation, + .jstracer-implementation + ) { padding-inline: 4px; margin-inline: 2px; } .webconsole-app .jstracer-dom-event { - background-color: var(--console-tracer-dom-background); + background-color: var( --console-tracer-dom-background); color: var(--console-tracer-dom-color); } .webconsole-app .jstracer-dom-mutation { - background-color: var(--console-tracer-dom-background); + background-color: var( --console-tracer-dom-background); color: var(--console-tracer-dom-color); margin-inline-end: 4px; } @@ -841,6 +853,7 @@ a.learn-more-link.webconsole-learn-more-link { font-variant-numeric: tabular-nums; } + .consoletable tr:nth-child(even) td { background-color: var(--table-zebra-background); } @@ -960,7 +973,7 @@ a.learn-more-link.webconsole-learn-more-link { /* Center the collapse button in the left gutter (first-level only) */ .message.network > .collapse-button, -.message:is(.startGroup, .startGroupCollapsed)[data-indent="0"] > .collapse-button { +.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button { width: 24px; margin-inline-start: var(--console-icon-horizontal-offset); margin-inline-end: calc(4px - var(--console-icon-horizontal-offset)); @@ -968,7 +981,7 @@ a.learn-more-link.webconsole-learn-more-link { /* Use a bigger arrow that is visually similar to other icons (10px) */ .message.network > .collapse-button::before, -.message:is(.startGroup, .startGroupCollapsed)[data-indent="0"] > .collapse-button::before { +.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button::before { width: 100%; background-image: url("chrome://devtools/skin/images/arrow-big.svg"); fill: var(--theme-icon-dimmed-color); diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css index 17af27533f0d..ddf6fca5ec40 100644 --- a/devtools/client/themes/widgets.css +++ b/devtools/client/themes/widgets.css @@ -5,15 +5,15 @@ @import url(chrome://devtools/skin/breadcrumbs.css); .theme-dark { - --table-splitter-color: rgba(255, 255, 255, 0.15); - --table-zebra-background: rgba(255, 255, 255, 0.05); + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg); --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg); } .theme-light { - --table-splitter-color: rgba(0, 0, 0, 0.15); - --table-zebra-background: rgba(0, 0, 0, 0.05); + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg); --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg); } @@ -68,7 +68,8 @@ .devtools-responsive-container > .devtools-side-splitter { /* This is a normally vertical splitter, but we have turned it horizontal due to the smaller resolution */ - min-height: calc(var(--devtools-splitter-top-width) + var(--devtools-splitter-bottom-width) + 1px); + min-height: calc(var(--devtools-splitter-top-width) + + var(--devtools-splitter-bottom-width) + 1px); border-top-width: var(--devtools-splitter-top-width); border-bottom-width: var(--devtools-splitter-bottom-width); margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px); @@ -138,7 +139,7 @@ /* Custom scope stylings */ -.variables-view-watch-expressions .title > .name { +.variables-view-watch-expressions .title > .name { max-width: 14em; } @@ -257,20 +258,17 @@ color: inherit; text-align: start; font-weight: inherit !important; - border-image: linear-gradient( - transparent 15%, - var(--theme-splitter-color) 15%, - var(--theme-splitter-color) 85%, - transparent 85%, - transparent calc(100% - 1px), - var(--theme-splitter-color) calc(100% - 1px) - ) - 1 1; + border-image: linear-gradient(transparent 15%, + var(--theme-splitter-color) 15%, + var(--theme-splitter-color) 85%, + transparent 85%, + transparent calc(100% - 1px), + var(--theme-splitter-color) calc(100% - 1px)) 1 1; background-repeat: no-repeat; } .table-widget-column-header:not([sorted]):hover { - background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); + background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)); } .table-widget-column-header[sorted] { @@ -285,20 +283,20 @@ background-position: 6px center; } -.table-widget-column-header[sorted="ascending"] { +.table-widget-column-header[sorted=ascending] { background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg"); } -.table-widget-column-header[sorted="descending"] { +.table-widget-column-header[sorted=descending] { background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg"); } .theme-dark .table-widget-column[readonly] { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255,255,255,0.1); } .theme-light .table-widget-column[readonly] { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(0,0,0,0.1); } .table-widget-body .devtools-side-splitter:last-of-type { diff --git a/devtools/client/webconsole/components/App.css b/devtools/client/webconsole/components/App.css index 1f0ed5aa6df7..031e09980a3c 100644 --- a/devtools/client/webconsole/components/App.css +++ b/devtools/client/webconsole/components/App.css @@ -64,13 +64,12 @@ body { * rows/columns to "auto" to make them collapse when the element * they contain is hidden. */ - grid-template-areas: - "chrome-debug-toolbar chrome-debug-toolbar" - "filter-toolbar sidebar" - "filter-toolbar-secondary sidebar" - "output-input sidebar" - "eval-notification sidebar" - "reverse-search sidebar"; + grid-template-areas: "chrome-debug-toolbar chrome-debug-toolbar" + "filter-toolbar sidebar" + "filter-toolbar-secondary sidebar" + "output-input sidebar" + "eval-notification sidebar" + "reverse-search sidebar"; grid-template-rows: auto var(--primary-toolbar-height) auto 1fr auto auto; grid-template-columns: minmax(200px, 1fr) minmax(0, auto); max-height: 100vh !important; @@ -155,7 +154,12 @@ body { --jsterm-border-width: 0; --jsterm-padding-top: 0; --jsterm-padding-bottom: 0; - min-height: calc(var(--console-row-height) + var(--jsterm-border-width) + var(--jsterm-padding-top) + var(--jsterm-padding-bottom)); + min-height: calc( + var(--console-row-height) + + var(--jsterm-border-width) + + var(--jsterm-padding-top) + + var(--jsterm-padding-bottom) + ); padding-top: var(--jsterm-padding-top); padding-bottom: var(--jsterm-padding-bottom); border-top-color: var(--theme-splitter-color); @@ -179,7 +183,7 @@ body { } .webconsole-input-openEditorButton { - /* adjust outline offset so it's not clipped */ + /* adjust outline offset so it's not clipped */ --theme-outline-offset: -2px; height: var(--console-row-height); margin: 0; @@ -287,15 +291,14 @@ body { * rows/columns to "auto" to make them collapse when the element * they contain is hidden. */ - grid-template-areas: - "chrome-debug-toolbar chrome-debug-toolbar chrome-debug-toolbar" - "notification notification notification" - "editor-toolbar filter-toolbar sidebar" - "editor filter-toolbar-secondary sidebar" - "editor output sidebar" - "eager-evaluation output sidebar" - "eval-notification output sidebar" - "reverse-search output sidebar"; + grid-template-areas: "chrome-debug-toolbar chrome-debug-toolbar chrome-debug-toolbar" + "notification notification notification" + "editor-toolbar filter-toolbar sidebar" + "editor filter-toolbar-secondary sidebar" + "editor output sidebar" + "eager-evaluation output sidebar" + "eval-notification output sidebar" + "reverse-search output sidebar"; grid-template-rows: auto auto @@ -345,6 +348,7 @@ body { align-items: center; } + .jsterm-editor .webconsole-editor-toolbar .webconsole-editor-toolbar-executeButton::before { content: url("chrome://devtools/skin/images/webconsole/run.svg"); height: 16px; diff --git a/devtools/client/webconsole/components/Input/EagerEvaluation.css b/devtools/client/webconsole/components/Input/EagerEvaluation.css index 44f3d887ab5b..b4da4c1753de 100644 --- a/devtools/client/webconsole/components/Input/EagerEvaluation.css +++ b/devtools/client/webconsole/components/Input/EagerEvaluation.css @@ -23,7 +23,8 @@ width: 14px; height: 14px; margin: 0 8px; - background: url(chrome://devtools/skin/images/webconsole/return.svg) no-repeat center; + background: url(chrome://devtools/skin/images/webconsole/return.svg) no-repeat + center; background-size: 12px; -moz-context-properties: fill; fill: var(--theme-icon-dimmed-color); @@ -66,7 +67,9 @@ flex-grow: 1; background-color: var(--console-input-background); /* Reserve a bit of whitespace after the content. */ - min-height: calc(var(--console-row-height) + var(--console-input-extra-padding)); + min-height: calc( + var(--console-row-height) + var(--console-input-extra-padding) + ); } /* diff --git a/devtools/client/webconsole/components/Input/EvaluationNotification.css b/devtools/client/webconsole/components/Input/EvaluationNotification.css index 43d21fcd34fc..2e387bda7fac 100644 --- a/devtools/client/webconsole/components/Input/EvaluationNotification.css +++ b/devtools/client/webconsole/components/Input/EvaluationNotification.css @@ -5,7 +5,7 @@ .evaluation-notification.warning { color: var(--console-warning-color); border-color: var(--console-warning-border); - background-color: var(--console-warning-background); + background-color: var(--console-warning-background) } .evaluation-notification.warning .evaluation-notification__icon { diff --git a/devtools/client/webconsole/components/Input/ReverseSearchInput.css b/devtools/client/webconsole/components/Input/ReverseSearchInput.css index 8527ae948644..63984499599b 100644 --- a/devtools/client/webconsole/components/Input/ReverseSearchInput.css +++ b/devtools/client/webconsole/components/Input/ReverseSearchInput.css @@ -24,7 +24,8 @@ :root[platform="mac"] .webconsole-app .reverse-search { border-end-start-radius: 5px; } -:root[platform="mac"] .webconsole-app:not(.jsterm-editor, .sidebar-visible) .reverse-search { +:root[platform="mac"] .webconsole-app:not(.jsterm-editor, .sidebar-visible) .reverse-search +{ border-end-end-radius: 5px; } diff --git a/devtools/server/actors/highlighters/css/highlighters.css b/devtools/server/actors/highlighters/css/highlighters.css index 0711872e0937..0138133c9fb8 100644 --- a/devtools/server/actors/highlighters/css/highlighters.css +++ b/devtools/server/actors/highlighters/css/highlighters.css @@ -2,9 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -:host { - display: contents; -} +:host { display: contents; } .highlighter-container { --highlighter-accessibility-bounds-color: #6a5acd; @@ -114,7 +112,12 @@ } @media (prefers-reduced-motion) { - .use-simple-highlighters :is(.box-model-content, .box-model-padding, .box-model-border, .box-model-margin) { + .use-simple-highlighters :is( + .box-model-content, + .box-model-padding, + .box-model-border, + .box-model-margin + ) { fill: none; stroke-width: 3; } @@ -165,7 +168,8 @@ [class$="infobar-container"] > [class$="infobar"]:before { left: calc(50% - var(--highlighter-bubble-arrow-size)); - border: var(--highlighter-bubble-arrow-size) solid var(--highlighter-bubble-border-color); + border: var(--highlighter-bubble-arrow-size) solid + var(--highlighter-bubble-border-color); } [class$="infobar-container"] > [class$="infobar"]:after { @@ -184,15 +188,19 @@ border-right-color: transparent; } -[class$="infobar-container"][position="top"]:not([hide-arrow]) > [class$="infobar"]:before, -[class$="infobar-container"][position="top"]:not([hide-arrow]) > [class$="infobar"]:after { +[class$="infobar-container"][position="top"]:not([hide-arrow]) + > [class$="infobar"]:before, +[class$="infobar-container"][position="top"]:not([hide-arrow]) + > [class$="infobar"]:after { border-bottom: 0; top: 100%; display: block; } -[class$="infobar-container"][position="bottom"]:not([hide-arrow]) > [class$="infobar"]:before, -[class$="infobar-container"][position="bottom"]:not([hide-arrow]) > [class$="infobar"]:after { +[class$="infobar-container"][position="bottom"]:not([hide-arrow]) + > [class$="infobar"]:before, +[class$="infobar-container"][position="bottom"]:not([hide-arrow]) + > [class$="infobar"]:after { border-top: 0; bottom: 100%; display: block; @@ -430,7 +438,10 @@ text-anchor: end; } -:is(.viewport-size-highlighter-viewport-infobar-container, .viewport-size-on-resize-highlighter-viewport-infobar-container) { +:is( + .viewport-size-highlighter-viewport-infobar-container, + .viewport-size-on-resize-highlighter-viewport-infobar-container +) { shape-rendering: crispEdges; background-color: var(--highlighter-viewport-size-background-color); color: var(--grey-80); @@ -517,7 +528,7 @@ cursor: nwse-resize; } -[class^="measuring-tool-handler"].dragging { +[class^=measuring-tool-handler].dragging { fill: var(--highlighter-guide-color); } @@ -554,7 +565,7 @@ line-height: 1.5em; } -[class^="measuring-tool-guide"] { +[class^=measuring-tool-guide] { stroke: var(--highlighter-guide-color); stroke-dasharray: 5 3; shape-rendering: crispEdges; @@ -580,7 +591,10 @@ pointer-events: auto; /* Offset the UI so it is centered around the pointer */ - transform: translate(calc(var(--magnifier-width) / -2), calc(var(--magnifier-height) / -2)); + transform: translate( + calc(var(--magnifier-width) / -2), + calc(var(--magnifier-height) / -2) + ); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)); @@ -606,10 +620,16 @@ height: var(--label-height); position: relative; - --label-horizontal-center: translateX(calc((var(--magnifier-width) - var(--label-width)) / 2)); - --label-horizontal-left: translateX(calc((-1 * var(--label-width) + var(--magnifier-width) / 2))); + --label-horizontal-center: translateX( + calc((var(--magnifier-width) - var(--label-width)) / 2) + ); + --label-horizontal-left: translateX( + calc((-1 * var(--label-width) + var(--magnifier-width) / 2)) + ); --label-horizontal-right: translateX(calc(var(--magnifier-width) / 2)); - --label-vertical-top: translateY(calc((-1 * var(--magnifier-height)) - var(--label-height))); + --label-vertical-top: translateY( + calc((-1 * var(--magnifier-height)) - var(--label-height)) + ); /* By default the color label container sits below the canvas. Here we just center it horizontally */ @@ -766,6 +786,7 @@ button.paused-dbg-resume-button { font-size: var(--highlighter-font-size); } + /* Remote Node Picker Notice Highlighter */ #node-picker-notice-root { @@ -836,6 +857,7 @@ button.paused-dbg-resume-button { background-image: url(resource://devtools-shared-images/command-pick-remote-touch.svg); } + #node-picker-notice-hide-button { border: 0; border-radius: 2px; @@ -945,8 +967,7 @@ button.paused-dbg-resume-button { width: 8px; display: inline-flex; background-color: var(--accessibility-highlighter-contrast-ratio-color); - box-shadow: - 0 0 0 1px var(--grey-40), + box-shadow: 0 0 0 1px var(--grey-40), 4px 3px var(--accessibility-highlighter-contrast-ratio-bg), 4px 3px 0 1px var(--grey-40); margin-inline-start: 3px; @@ -959,7 +980,7 @@ button.paused-dbg-resume-button { .accessible-infobar-audit .accessible-contrast-ratio.AA::after, .accessible-infobar-audit .accessible-contrast-ratio.AAA::after { - color: #90e274; + color: #90E274; } .accessible-infobar-audit .accessible-audit::before, @@ -975,7 +996,7 @@ button.paused-dbg-resume-button { } .accessible-infobar-audit .accessible-contrast-ratio.FAIL:after { - color: #e57180; + color: #E57180; margin-inline-start: 3px; background-image: url(resource://devtools-shared-images/error-small.svg); fill: var(--red-40); @@ -1041,7 +1062,7 @@ button.paused-dbg-resume-button { } .tabbing-order .tabbing-order-infobar-container { - font-size: calc(var(--highlighter-font-size) + 2px); + font-size:calc(var(--highlighter-font-size) + 2px); } .tabbing-order .tabbing-order-bounds { diff --git a/devtools/shared/commands/resource/tests/style_document.css b/devtools/shared/commands/resource/tests/style_document.css index 951094ff8e8e..aa545339249c 100644 --- a/devtools/shared/commands/resource/tests/style_document.css +++ b/devtools/shared/commands/resource/tests/style_document.css @@ -1,3 +1 @@ -body { - margin: 1px; -} +body { margin: 1px; } diff --git a/devtools/shared/commands/resource/tests/style_iframe.css b/devtools/shared/commands/resource/tests/style_iframe.css index 2ea39ffc9173..30e7ae802b5e 100644 --- a/devtools/shared/commands/resource/tests/style_iframe.css +++ b/devtools/shared/commands/resource/tests/style_iframe.css @@ -1,3 +1 @@ -body { - padding: 1px; -} +body { padding: 1px; } diff --git a/docs/_static/custom_theme.css b/docs/_static/custom_theme.css index c0f90810a124..17091c8d7a5b 100644 --- a/docs/_static/custom_theme.css +++ b/docs/_static/custom_theme.css @@ -4,69 +4,68 @@ /* Increase the size of the content */ .wy-nav-content { - max-width: 80% !important; + max-width: 80% !important; } /* Increase the size of the tables */ table.docutils { - width: 90%; + width: 90%; } /* Override the default values for multiline text in a table */ -table.docutils td, -table.docutils th { - font-size: 16px !important; +table.docutils td, table.docutils th +{ + font-size: 16px !important; } .rst-content .line-block { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } /* Add the strikethrough feature */ span.strikethrough { - text-decoration: line-through; + text-decoration: line-through; } /* Better control over the table on this page */ .matcher-cookbook td { - white-space: break-spaces !important; + white-space: break-spaces !important; } -.wy-table-responsive table td, -.wy-table-responsive table th { - white-space: normal; +.wy-table-responsive table td, .wy-table-responsive table th { + white-space: normal; } img.center { - display: block; - margin: auto; + display: block; + margin: auto; } img.border { - border: 1px solid black; - display: block; - margin: auto; + border: 1px solid black; + display: block; + margin: auto; } .center { - text-align: center; + text-align: center; } /* Keyboard shortcuts styling */ kbd { - background: linear-gradient(180deg, #f4f4f4, #d5d5d5); - background-color: #f4f4f4; - border: 1px solid #d5d5d5; - border-radius: 6px; - font-family: consolas, "Liberation Mono", courier, monospace; - font-size: 0.9rem; - font-weight: 700; - line-height: 2.3; - margin: 3px; - padding: 4px 6px 1px 6px; - white-space: nowrap; + background: linear-gradient(180deg,#f4f4f4,#d5d5d5); + background-color: #f4f4f4; + border: 1px solid #d5d5d5; + border-radius: 6px; + font-family: consolas,"Liberation Mono",courier,monospace; + font-size: .9rem; + font-weight: 700; + line-height: 2.3; + margin: 3px; + padding: 4px 6px 1px 6px; + white-space: nowrap; } table.docutils { - width: 100%; + width: 100%; } diff --git a/docs/_static/sphinx_design.css b/docs/_static/sphinx_design.css index 5d8381ab6751..86d1ad7b084f 100644 --- a/docs/_static/sphinx_design.css +++ b/docs/_static/sphinx_design.css @@ -4,18 +4,18 @@ /* For Dropdown Link in panels of sphinx-panels */ a.dropdown-link { - color: #ddd; - margin-left: 0.5em; - padding: 0.25em; - visibility: hidden; + color: #DDD; + margin-left: 0.5em; + padding: 0.25em; + visibility: hidden; } details.sd-dropdown:hover a.dropdown-link { - visibility: visible; + visibility: visible; } a.dropdown-link:hover { - background-color: #36557c; - color: #ffffff; - text-decoration: none; + background-color: #36557c; + color: #ffffff; + text-decoration: none; } diff --git a/dom/base/test/file_bug498897.css b/dom/base/test/file_bug498897.css index 35fe41025124..84beffdefc22 100644 --- a/dom/base/test/file_bug498897.css +++ b/dom/base/test/file_bug498897.css @@ -1,3 +1 @@ -body { - background: orange; -} +body { background: orange; } diff --git a/dom/crypto/test/test_WebCrypto.css b/dom/crypto/test/test_WebCrypto.css index 67ff9ab3e170..3b8b32663815 100644 --- a/dom/crypto/test/test_WebCrypto.css +++ b/dom/crypto/test/test_WebCrypto.css @@ -3,93 +3,82 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ body { - font-family: - Helvetica Neue, - Helvetica, - Trebuchet MS, - Sans-serif; - font-size: 12pt; - text-align: center; + font-family: Helvetica Neue, Helvetica, Trebuchet MS, Sans-serif; + font-size: 12pt; + text-align: center; } a { - color: #ff9500; - text-decoration: none; + color: #FF9500; + text-decoration: none; } a:hover { - text-decoration: underline; + text-decoration: underline; } #content { - width: 50em; - margin-left: auto; - margin-right: auto; - text-align: left; + width: 50em; + margin-left: auto; + margin-right: auto; + text-align: left; } #head { - font-family: - Helvetica Neue, - Helvetica, - Trebuchet MS, - Sans-serif; - font-size: 300%; - font-weight: lighter; - padding: 0.2ex; - padding-bottom: 0; - margin-bottom: 0.5ex; - border-bottom: 10px solid #ff9500; + font-family: Helvetica Neue, Helvetica, Trebuchet MS, Sans-serif; + font-size: 300%; + font-weight: lighter; + padding: .2ex; + padding-bottom: 0; + margin-bottom: .5ex; + border-bottom: 10px solid #FF9500; } #head b { - font-weight: bold; - color: #ff9500; + font-weight: bold; + color: #FF9500; } div.content { - font-family: - Helvetica Neue, - Helvetica, - Trebuchet MS, - Sans-serif; - color: #000; - margin: 2ex; + font-family: Helvetica Neue, Helvetica, Trebuchet MS, Sans-serif; + color: #000; + margin: 2ex; } #foot { - border-bottom: 1ex solid #ff9500; - margin-top: 2ex; + border-bottom: 1ex solid #FF9500; + margin-top: 2ex; } /*------------------------------------------*/ #start { - background: #ff9500; - color: #fff; - text-align: center; - font-weight: bold; - padding: 1em 0 1em 0; - width: 50em; - cursor: pointer; + background: #FF9500; + color: #fff; + text-align: center; + font-weight: bold; + padding: 1em 0 1em 0; + width: 50em; + cursor: pointer; } + #results { - text-align: left; - width: 48em; - border: 1px solid black; + text-align: left; + width: 48em; + border: 1px solid black; } .pass { - font-weight: bold; - color: #00539f; + font-weight: bold; + color: #00539F; } .fail { - font-weight: bold; - color: #ff9500; + font-weight: bold; + color: #FF9500; } .pending { - font-weight: bold; - color: #666; + font-weight: bold; + color: #666; } diff --git a/dom/events/test/pointerevents/wpt/pointerevent_styles.css b/dom/events/test/pointerevents/wpt/pointerevent_styles.css index aeee25640444..026bbe7e9b72 100644 --- a/dom/events/test/pointerevents/wpt/pointerevent_styles.css +++ b/dom/events/test/pointerevents/wpt/pointerevent_styles.css @@ -1,49 +1,49 @@ #innerFrame { - position: absolute; - top: 300px; - left: 200px; - height: 100px; - width: 100px; +position: absolute; +top: 300px; +left: 200px; +height: 100px; +width: 100px; } .spacer { - height: 100px; +height: 100px; } #square1 { - top: 330px; - left: 150px; - background: black; +top: 330px; +left: 150px; +background: black; } #square2 { - top: 50px; - left: 30px; - visibility: hidden; - background: red; +top: 50px; +left: 30px; +visibility: hidden; +background: red; } .square { - height: 20px; - width: 20px; - position: absolute; - padding: 0; +height: 20px; +width: 20px; +position: absolute; +padding: 0; } #target0 { - background: black; - color: white; - white-space: nowrap; - overflow-y: auto; - overflow-x: auto; +background: black; +color: white; +white-space: nowrap; +overflow-y: auto; +overflow-x: auto; } #target1 { - background: purple; - color: white; - white-space: nowrap; - overflow-y: auto; - overflow-x: auto; +background: purple; +color: white; +white-space: nowrap; +overflow-y: auto; +overflow-x: auto; } #scrollTarget { @@ -51,62 +51,62 @@ } .touchActionNone { - touch-action: none; +touch-action: none; } #innerframe { - width: 90%; - margin: 10px; - margin-left: 10%; - height: 200px; +width: 90%; +margin: 10px; +margin-left: 10%; +height: 200px; } .scroller { - width: 700px; - height: 430px; - margin: 20px; - overflow: auto; - background: black; +width: 700px; +height: 430px; +margin: 20px; +overflow: auto; +background: black; } .scroller > div { - height: 1000px; - width: 1000px; - color: white; +height: 1000px; +width: 1000px; +color: white; } .scroller > div div { - height: 100%; - width: 100%; - color: white; +height: 100%; +width: 100%; +color: white; } div { - margin: 0; - padding: 2em; +margin: 0; +padding: 2em; } #complete-notice { - background: #afa; - border: 1px solid #0a0; - display: none; +background: #afa; +border: 1px solid #0a0; +display: none; } #pointertype-log { - font-weight: bold; +font-weight: bold; } #event-log { - font-weight: bold; +font-weight: bold; } #listener { - background: orange; - border: 1px solid orange; - position: absolute; - top: -100px; +background: orange; +border: 1px solid orange; +position: absolute; +top: -100px; } body.scrollable { - min-height: 5000px; +min-height: 5000px; } diff --git a/dom/security/test/sri/file_bug_1271796.css b/dom/security/test/sri/file_bug_1271796.css index a8d0c99cc517..c0928f2cf01f 100644 --- a/dom/security/test/sri/file_bug_1271796.css +++ b/dom/security/test/sri/file_bug_1271796.css @@ -1,4 +1,2 @@ /*! Simple test for bug 1271796 */ -p::before { - content: "\2014"; -} +p::before { content: "\2014"; } diff --git a/dom/tests/mochitest/general/cssB.css b/dom/tests/mochitest/general/cssB.css index c3f9a361a828..8d44ebd00f26 100644 --- a/dom/tests/mochitest/general/cssB.css +++ b/dom/tests/mochitest/general/cssB.css @@ -1,2 +1,2 @@ -@import "cssC.css"; -@import url("http://example.org/tests/dom/tests/mochitest/general/cssC.css"); +@import 'cssC.css'; +@import url('http://example.org/tests/dom/tests/mochitest/general/cssC.css'); diff --git a/dom/tests/mochitest/general/emptyCssFile2.css b/dom/tests/mochitest/general/emptyCssFile2.css index 60abb84fd78e..64f97ae68746 100644 --- a/dom/tests/mochitest/general/emptyCssFile2.css +++ b/dom/tests/mochitest/general/emptyCssFile2.css @@ -1 +1 @@ -@import url("http://example.org/tests/dom/tests/mochitest/general/cross.css"); +@import url('http://example.org/tests/dom/tests/mochitest/general/cross.css'); \ No newline at end of file diff --git a/dom/tests/mochitest/general/importsSameAndCrossOrigin.css b/dom/tests/mochitest/general/importsSameAndCrossOrigin.css index 68c6d8535cb1..69e239c063b0 100644 --- a/dom/tests/mochitest/general/importsSameAndCrossOrigin.css +++ b/dom/tests/mochitest/general/importsSameAndCrossOrigin.css @@ -1,2 +1,3 @@ -@import "emptyCssFile2.css"; -@import url("http://example.org/tests/dom/tests/mochitest/general/emptyCssFile2.css"); +@import 'emptyCssFile2.css'; +@import url('http://example.org/tests/dom/tests/mochitest/general/emptyCssFile2.css'); + diff --git a/dom/tests/mochitest/general/test_offsets.css b/dom/tests/mochitest/general/test_offsets.css index 877af0be258f..18231c4d9bd5 100644 --- a/dom/tests/mochitest/general/test_offsets.css +++ b/dom/tests/mochitest/general/test_offsets.css @@ -1,7 +1,3 @@ -button, -vbox, -menu, -menuitem, -menupopup { - box-sizing: content-box; -} + button, vbox, menu, menuitem, menupopup { + box-sizing: content-box; + } diff --git a/dom/tests/mochitest/webcomponents/inert_style.css b/dom/tests/mochitest/webcomponents/inert_style.css index c00dc35c3044..3b005ede8c02 100644 --- a/dom/tests/mochitest/webcomponents/inert_style.css +++ b/dom/tests/mochitest/webcomponents/inert_style.css @@ -7,3 +7,4 @@ span { padding-top: 10px; } + diff --git a/dom/xml/resources/XMLPrettyPrint.css b/dom/xml/resources/XMLPrettyPrint.css index f2419aadc79c..4e2088bd91d0 100644 --- a/dom/xml/resources/XMLPrettyPrint.css +++ b/dom/xml/resources/XMLPrettyPrint.css @@ -37,11 +37,11 @@ } .expandable-opening { - list-style: "+" outside; + list-style: '+' outside; } [open] > .expandable-opening { - list-style-type: "−"; + list-style-type: '−'; } .expandable-opening::marker { diff --git a/dom/xml/test/old/books/classic.css b/dom/xml/test/old/books/classic.css index 6574e9140947..1ebc92f6e874 100644 --- a/dom/xml/test/old/books/classic.css +++ b/dom/xml/test/old/books/classic.css @@ -1,3 +1,5 @@ + + BookSet { display: block; } @@ -13,12 +15,12 @@ Book { } BookCover { - display: inline; - float: left; - margin-right: 10px; - padding: 5px; - width: 100px; - height: 140px; + display: inline; + float: left; + margin-right: 10px; + padding: 5px; + width: 100px; + height: 140px; } Title { @@ -43,21 +45,24 @@ Synopsis { background-color: #ddddff; } + ListPrice { display: block; text-align: right; padding-right: 15px; - text-decoration: line-through; + text-decoration: line-through; } + Price { display: block; - color: rgb(20, 100, 0); - text-align: right; + color: rgb(20,100,0); + text-align:right; padding-right: 15px; font-weight: bold; } + Price:before { content: "Our Price: "; } @@ -67,3 +72,7 @@ ISBN { font-family: monospace; font-size: 8pt; } + + + + diff --git a/dom/xml/test/old/books/common.css b/dom/xml/test/old/books/common.css index 05b91fd2555b..6134e594f581 100644 --- a/dom/xml/test/old/books/common.css +++ b/dom/xml/test/old/books/common.css @@ -15,7 +15,7 @@ SearchTitle { border-bottom: thin solid black; padding-bottom: 6px; margin-bottom: 12px; -} +} SearchTitle:first-line { font-family: Verdana, Sans-Serif; @@ -40,4 +40,4 @@ Label { input { margin-top: 2px; -} +} \ No newline at end of file diff --git a/dom/xml/test/old/books/list.css b/dom/xml/test/old/books/list.css index e0740dd145c2..3b5d4089159d 100644 --- a/dom/xml/test/old/books/list.css +++ b/dom/xml/test/old/books/list.css @@ -1,3 +1,4 @@ + BookSet { display: block; } @@ -10,7 +11,7 @@ Book { } BookCover { - display: none; + display: none; } Title { @@ -30,20 +31,23 @@ Synopsis { display: none; } + ListPrice { display: none; text-align: right; padding-right: 15px; - text-decoration: line-through; + text-decoration: line-through; } + Price { display: block; - color: rgb(20, 100, 0); + color: rgb(20,100,0); font-weight: bold; - text-align: left; + text-align:left; } + Price:before { content: "Our Price: "; } @@ -53,3 +57,5 @@ ISBN { font-family: monospace; font-size: 8pt; } + + diff --git a/dom/xml/test/old/xlink/link.css b/dom/xml/test/old/xlink/link.css index 59d792c58623..19dc52198d77 100644 --- a/dom/xml/test/old/xlink/link.css +++ b/dom/xml/test/old/xlink/link.css @@ -19,3 +19,4 @@ mylink { color: blue; text-decoration: underline; } + diff --git a/dom/xml/test/old/xmlbase/xmlbase.css b/dom/xml/test/old/xmlbase/xmlbase.css index 485a802ccffe..a100186bbcad 100644 --- a/dom/xml/test/old/xmlbase/xmlbase.css +++ b/dom/xml/test/old/xmlbase/xmlbase.css @@ -17,9 +17,7 @@ xlink|link { padding-left: +5px; } -sect1, -sect2, -sect3 { +sect1,sect2,sect3 { display: block; padding-left: +20px; } @@ -27,4 +25,4 @@ sect3 { p { display: block; padding-left: +5px; -} +} \ No newline at end of file diff --git a/gfx/layers/apz/test/mochitest/helper_subframe_style.css b/gfx/layers/apz/test/mochitest/helper_subframe_style.css index cf0933a8ae71..5af9640802f9 100644 --- a/gfx/layers/apz/test/mochitest/helper_subframe_style.css +++ b/gfx/layers/apz/test/mochitest/helper_subframe_style.css @@ -11,5 +11,5 @@ body { .inner-content { height: 200%; width: 200%; - background: repeating-linear-gradient(#eee, #eee 100px, #ddd 100px, #ddd 200px); + background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px); } diff --git a/gfx/layers/layerviewer/tree.css b/gfx/layers/layerviewer/tree.css index 885f0dfdc6bb..f4ff6eb57b74 100644 --- a/gfx/layers/layerviewer/tree.css +++ b/gfx/layers/layerviewer/tree.css @@ -2,36 +2,26 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -html, -body { +html, body { height: 100%; overflow: hidden; } .layerObjectDescription:hover { - background-color: #e8e8e8; + background-color: #E8E8E8; } .layerHover > .layerPreview::after { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + top: 0; right: 0; bottom: 0; left: 0; content: ""; - background-color: rgba(0, 0, 0, 0.2); - box-shadow: -2px 2px 0 #fff; + background-color: rgba(0,0,0,0.2); + box-shadow: -2px 2px 0 #FFF; } @keyframes layerHoverAnimation { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } - 100% { - transform: scale(1); - } + 0% { transform: scale(1); } + 50% { transform: scale(1.2); } + 100% { transform: scale(1); } } .displayHover { diff --git a/layout/generic/test/frame_selection_underline.css b/layout/generic/test/frame_selection_underline.css index b2237cc10349..b64ead8814a0 100644 --- a/layout/generic/test/frame_selection_underline.css +++ b/layout/generic/test/frame_selection_underline.css @@ -34,8 +34,7 @@ body.reference div span#decoration { /* both ends of selection underlines for IME are clipped for making the boundaries of clauses in composition string clear. These spacers will cover the ends in the reference. */ -span#leftspacer, -span#rightspacer { +span#leftspacer, span#rightspacer { background-color: white; position: absolute; width: 1px; diff --git a/layout/mathml/mathml.css b/layout/mathml/mathml.css index 841bdac80167..b8dc1f7fadcb 100644 --- a/layout/mathml/mathml.css +++ b/layout/mathml/mathml.css @@ -2,6 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + /**************************************************************************/ /* namespace for MathML elements */ /**************************************************************************/ @@ -105,8 +106,7 @@ mtable[frame="dashed"] { border: dashed thin; } -mtr, -mlabeledtr { +mtr, mlabeledtr { display: table-row; vertical-align: baseline; } @@ -128,7 +128,7 @@ mtd { /* Hide the label because mlabeledtr is not supported yet (bug 356870). This rule can be overriden by users. */ mlabeledtr > mtd:first-child { - display: none; + display: none; } /**********************************************************************/ @@ -137,10 +137,10 @@ mlabeledtr > mtd:first-child { will set the internal attributes depending on the cell's position. When they are set, the spacing behaviour is handled outside of CSS */ mtd { - padding-right: 0.4em; /* half of columnspacing[colindex] */ - padding-left: 0.4em; /* half of columnspacing[colindex-1] */ + padding-right: 0.4em; /* half of columnspacing[colindex] */ + padding-left: 0.4em; /* half of columnspacing[colindex-1] */ padding-bottom: 0.5ex; /* half of rowspacing[rowindex] */ - padding-top: 0.5ex; /* half of rowspacing[rowindex-1] */ + padding-top: 0.5ex; /* half of rowspacing[rowindex-1] */ } /* turn off the spacing at the periphery of boundary cells */ mtr:first-child > mtd { @@ -204,17 +204,15 @@ mtable[framespacing] > mtr > mtd { insufficient to control when the scriptlevel should be incremented. All other cases can be described using regular CSS, so we do it this way because it's more efficient and less code. */ -:-moz-math-increment-script-level { - math-depth: add(1); -} +:-moz-math-increment-script-level { math-depth: add(1); } /* The mfrac element sets displaystyle to "false", or if it was already false increments scriptlevel by 1, within numerator and denominator. */ mfrac > * { - math-depth: auto-add; - math-style: compact; + math-depth: auto-add; + math-style: compact; } /* @@ -223,8 +221,8 @@ mfrac > * { The msqrt element leaves both attributes unchanged within its argument. */ mroot > :not(:first-child) { - math-depth: add(2); - math-style: compact; + math-depth: add(2); + math-style: compact; } /* @@ -247,8 +245,8 @@ msub > :not(:first-child), msup > :not(:first-child), msubsup > :not(:first-child), mmultiscripts > :not(:first-child) { - math-depth: add(1); - math-style: compact; + math-depth: add(1); + math-style: compact; } /* @@ -268,7 +266,7 @@ mmultiscripts > :not(:first-child) { munder > :not(:first-child), mover > :not(:first-child), munderover > :not(:first-child) { - math-style: compact; + math-style: compact; } /* @@ -276,9 +274,7 @@ munderover > :not(:first-child) { inherited value of the attribute. If the attribute is not present, the mtable element sets displaystyle to "false" within the table elements. */ -mtable { - math-style: compact; -} +mtable { math-style: compact; } /* The mscarries element sets displaystyle to "false", and increments @@ -296,7 +292,7 @@ mscarries { Also, we do not expose the element to the accessible tree (see bug 1108378). */ mphantom { - visibility: hidden; + visibility: hidden; } /* Implement MathML Core's semantics/maction support diff --git a/layout/style/ImageDocument.css b/layout/style/ImageDocument.css index c2333036a00f..5cd22c4b5c91 100644 --- a/layout/style/ImageDocument.css +++ b/layout/style/ImageDocument.css @@ -28,8 +28,7 @@ body { cursor: zoom-in; } - .overflowingVertical, - .overflowingHorizontalOnly { + .overflowingVertical, .overflowingHorizontalOnly { cursor: zoom-out; } } diff --git a/layout/style/TopLevelImageDocument.css b/layout/style/TopLevelImageDocument.css index 535243f8efa0..f03295f67374 100644 --- a/layout/style/TopLevelImageDocument.css +++ b/layout/style/TopLevelImageDocument.css @@ -22,7 +22,7 @@ img.transparent { color: #222; - background: hsl(0, 0%, 90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); + background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png"); } img { diff --git a/layout/style/res/counterstyles.css b/layout/style/res/counterstyles.css index 7c11114bf682..982ff0e18572 100644 --- a/layout/style/res/counterstyles.css +++ b/layout/style/res/counterstyles.css @@ -10,143 +10,35 @@ @counter-style decimal-leading-zero { system: extends decimal; - pad: 2 "0"; + pad: 2 '0'; } @counter-style arabic-indic { system: numeric; - symbols: "\660" "\661" "\662" "\663" "\664" "\665" "\666" "\667" "\668" "\669"; + symbols: '\660' '\661' '\662' '\663' '\664' '\665' '\666' '\667' '\668' '\669'; } @counter-style armenian { system: additive; range: 1 9999; - additive-symbols: - 9000 "\554", - 8000 "\553", - 7000 "\552", - 6000 "\551", - 5000 "\550", - 4000 "\54F", - 3000 "\54E", - 2000 "\54D", - 1000 "\54C", - 900 "\54B", - 800 "\54A", - 700 "\549", - 600 "\548", - 500 "\547", - 400 "\546", - 300 "\545", - 200 "\544", - 100 "\543", - 90 "\542", - 80 "\541", - 70 "\540", - 60 "\53F", - 50 "\53E", - 40 "\53D", - 30 "\53C", - 20 "\53B", - 10 "\53A", - 9 "\539", - 8 "\538", - 7 "\537", - 6 "\536", - 5 "\535", - 4 "\534", - 3 "\533", - 2 "\532", - 1 "\531"; + additive-symbols: 9000 '\554', 8000 '\553', 7000 '\552', 6000 '\551', 5000 '\550', 4000 '\54F', 3000 '\54E', 2000 '\54D', 1000 '\54C', 900 '\54B', 800 '\54A', 700 '\549', 600 '\548', 500 '\547', 400 '\546', 300 '\545', 200 '\544', 100 '\543', 90 '\542', 80 '\541', 70 '\540', 60 '\53F', 50 '\53E', 40 '\53D', 30 '\53C', 20 '\53B', 10 '\53A', 9 '\539', 8 '\538', 7 '\537', 6 '\536', 5 '\535', 4 '\534', 3 '\533', 2 '\532', 1 '\531'; } @counter-style upper-armenian { system: additive; range: 1 9999; - additive-symbols: - 9000 "\554", - 8000 "\553", - 7000 "\552", - 6000 "\551", - 5000 "\550", - 4000 "\54F", - 3000 "\54E", - 2000 "\54D", - 1000 "\54C", - 900 "\54B", - 800 "\54A", - 700 "\549", - 600 "\548", - 500 "\547", - 400 "\546", - 300 "\545", - 200 "\544", - 100 "\543", - 90 "\542", - 80 "\541", - 70 "\540", - 60 "\53F", - 50 "\53E", - 40 "\53D", - 30 "\53C", - 20 "\53B", - 10 "\53A", - 9 "\539", - 8 "\538", - 7 "\537", - 6 "\536", - 5 "\535", - 4 "\534", - 3 "\533", - 2 "\532", - 1 "\531"; + additive-symbols: 9000 '\554', 8000 '\553', 7000 '\552', 6000 '\551', 5000 '\550', 4000 '\54F', 3000 '\54E', 2000 '\54D', 1000 '\54C', 900 '\54B', 800 '\54A', 700 '\549', 600 '\548', 500 '\547', 400 '\546', 300 '\545', 200 '\544', 100 '\543', 90 '\542', 80 '\541', 70 '\540', 60 '\53F', 50 '\53E', 40 '\53D', 30 '\53C', 20 '\53B', 10 '\53A', 9 '\539', 8 '\538', 7 '\537', 6 '\536', 5 '\535', 4 '\534', 3 '\533', 2 '\532', 1 '\531'; } @counter-style lower-armenian { system: additive; range: 1 9999; - additive-symbols: - 9000 "\584", - 8000 "\583", - 7000 "\582", - 6000 "\581", - 5000 "\580", - 4000 "\57F", - 3000 "\57E", - 2000 "\57D", - 1000 "\57C", - 900 "\57B", - 800 "\57A", - 700 "\579", - 600 "\578", - 500 "\577", - 400 "\576", - 300 "\575", - 200 "\574", - 100 "\573", - 90 "\572", - 80 "\571", - 70 "\570", - 60 "\56F", - 50 "\56E", - 40 "\56D", - 30 "\56C", - 20 "\56B", - 10 "\56A", - 9 "\569", - 8 "\568", - 7 "\567", - 6 "\566", - 5 "\565", - 4 "\564", - 3 "\563", - 2 "\562", - 1 "\561"; + additive-symbols: 9000 '\584', 8000 '\583', 7000 '\582', 6000 '\581', 5000 '\580', 4000 '\57F', 3000 '\57E', 2000 '\57D', 1000 '\57C', 900 '\57B', 800 '\57A', 700 '\579', 600 '\578', 500 '\577', 400 '\576', 300 '\575', 200 '\574', 100 '\573', 90 '\572', 80 '\571', 70 '\570', 60 '\56F', 50 '\56E', 40 '\56D', 30 '\56C', 20 '\56B', 10 '\56A', 9 '\569', 8 '\568', 7 '\567', 6 '\566', 5 '\565', 4 '\564', 3 '\563', 2 '\562', 1 '\561'; } @counter-style bengali { system: numeric; - symbols: "\9E6" "\9E7" "\9E8" "\9E9" "\9EA" "\9EB" "\9EC" "\9ED" "\9EE" "\9EF"; + symbols: '\9E6' '\9E7' '\9E8' '\9E9' '\9EA' '\9EB' '\9EC' '\9ED' '\9EE' '\9EF'; } @counter-style cambodian { @@ -155,72 +47,35 @@ @counter-style khmer { system: numeric; - symbols: "\17E0" "\17E1" "\17E2" "\17E3" "\17E4" "\17E5" "\17E6" "\17E7" "\17E8" "\17E9"; + symbols: '\17E0' '\17E1' '\17E2' '\17E3' '\17E4' '\17E5' '\17E6' '\17E7' '\17E8' '\17E9'; } @counter-style cjk-decimal { system: numeric; range: 0 infinite; - symbols: "\3007" "\4E00" "\4E8C" "\4E09" "\56DB" "\4E94" "\516D" "\4E03" "\516B" "\4E5D"; - suffix: "\3001"; + symbols: '\3007' '\4E00' '\4E8C' '\4E09' '\56DB' '\4E94' '\516D' '\4E03' '\516B' '\4E5D'; + suffix: '\3001'; } @counter-style devanagari { system: numeric; - symbols: "\966" "\967" "\968" "\969" "\96A" "\96B" "\96C" "\96D" "\96E" "\96F"; + symbols: '\966' '\967' '\968' '\969' '\96A' '\96B' '\96C' '\96D' '\96E' '\96F'; } @counter-style georgian { system: additive; range: 1 19999; - additive-symbols: - 10000 "\10F5", - 9000 "\10F0", - 8000 "\10EF", - 7000 "\10F4", - 6000 "\10EE", - 5000 "\10ED", - 4000 "\10EC", - 3000 "\10EB", - 2000 "\10EA", - 1000 "\10E9", - 900 "\10E8", - 800 "\10E7", - 700 "\10E6", - 600 "\10E5", - 500 "\10E4", - 400 "\10F3", - 300 "\10E2", - 200 "\10E1", - 100 "\10E0", - 90 "\10DF", - 80 "\10DE", - 70 "\10DD", - 60 "\10F2", - 50 "\10DC", - 40 "\10DB", - 30 "\10DA", - 20 "\10D9", - 10 "\10D8", - 9 "\10D7", - 8 "\10F1", - 7 "\10D6", - 6 "\10D5", - 5 "\10D4", - 4 "\10D3", - 3 "\10D2", - 2 "\10D1", - 1 "\10D0"; + additive-symbols: 10000 '\10F5', 9000 '\10F0', 8000 '\10EF', 7000 '\10F4', 6000 '\10EE', 5000 '\10ED', 4000 '\10EC', 3000 '\10EB', 2000 '\10EA', 1000 '\10E9', 900 '\10E8', 800 '\10E7', 700 '\10E6', 600 '\10E5', 500 '\10E4', 400 '\10F3', 300 '\10E2', 200 '\10E1', 100 '\10E0', 90 '\10DF', 80 '\10DE', 70 '\10DD', 60 '\10F2', 50 '\10DC', 40 '\10DB', 30 '\10DA', 20 '\10D9', 10 '\10D8', 9 '\10D7', 8 '\10F1', 7 '\10D6', 6 '\10D5', 5 '\10D4', 4 '\10D3', 3 '\10D2', 2 '\10D1', 1 '\10D0'; } @counter-style gujarati { system: numeric; - symbols: "\AE6" "\AE7" "\AE8" "\AE9" "\AEA" "\AEB" "\AEC" "\AED" "\AEE" "\AEF"; + symbols: '\AE6' '\AE7' '\AE8' '\AE9' '\AEA' '\AEB' '\AEC' '\AED' '\AEE' '\AEF'; } @counter-style gurmukhi { system: numeric; - symbols: "\A66" "\A67" "\A68" "\A69" "\A6A" "\A6B" "\A6C" "\A6D" "\A6E" "\A6F"; + symbols: '\A66' '\A67' '\A68' '\A69' '\A6A' '\A6B' '\A6C' '\A6D' '\A6E' '\A6F'; } /* hebrew is not included because our builtin algorithm can generate a wider @@ -228,102 +83,76 @@ @counter-style kannada { system: numeric; - symbols: "\CE6" "\CE7" "\CE8" "\CE9" "\CEA" "\CEB" "\CEC" "\CED" "\CEE" "\CEF"; + symbols: '\CE6' '\CE7' '\CE8' '\CE9' '\CEA' '\CEB' '\CEC' '\CED' '\CEE' '\CEF'; } @counter-style lao { system: numeric; - symbols: "\ED0" "\ED1" "\ED2" "\ED3" "\ED4" "\ED5" "\ED6" "\ED7" "\ED8" "\ED9"; + symbols: '\ED0' '\ED1' '\ED2' '\ED3' '\ED4' '\ED5' '\ED6' '\ED7' '\ED8' '\ED9'; } @counter-style malayalam { system: numeric; - symbols: "\D66" "\D67" "\D68" "\D69" "\D6A" "\D6B" "\D6C" "\D6D" "\D6E" "\D6F"; + symbols: '\D66' '\D67' '\D68' '\D69' '\D6A' '\D6B' '\D6C' '\D6D' '\D6E' '\D6F'; } @counter-style mongolian { system: numeric; - symbols: "\1810" "\1811" "\1812" "\1813" "\1814" "\1815" "\1816" "\1817" "\1818" "\1819"; + symbols: '\1810' '\1811' '\1812' '\1813' '\1814' '\1815' '\1816' '\1817' '\1818' '\1819'; } @counter-style myanmar { system: numeric; - symbols: "\1040" "\1041" "\1042" "\1043" "\1044" "\1045" "\1046" "\1047" "\1048" "\1049"; + symbols: '\1040' '\1041' '\1042' '\1043' '\1044' '\1045' '\1046' '\1047' '\1048' '\1049'; } @counter-style oriya { system: numeric; - symbols: "\B66" "\B67" "\B68" "\B69" "\B6A" "\B6B" "\B6C" "\B6D" "\B6E" "\B6F"; + symbols: '\B66' '\B67' '\B68' '\B69' '\B6A' '\B6B' '\B6C' '\B6D' '\B6E' '\B6F'; } @counter-style persian { system: numeric; - symbols: "\6F0" "\6F1" "\6F2" "\6F3" "\6F4" "\6F5" "\6F6" "\6F7" "\6F8" "\6F9"; + symbols: '\6F0' '\6F1' '\6F2' '\6F3' '\6F4' '\6F5' '\6F6' '\6F7' '\6F8' '\6F9'; } @counter-style lower-roman { system: additive; range: 1 3999; - additive-symbols: - 1000 "m", - 900 "cm", - 500 "d", - 400 "cd", - 100 "c", - 90 "xc", - 50 "l", - 40 "xl", - 10 "x", - 9 "ix", - 5 "v", - 4 "iv", - 1 "i"; + additive-symbols: 1000 'm', 900 'cm', 500 'd', 400 'cd', 100 'c', 90 'xc', 50 'l', 40 'xl', 10 'x', 9 'ix', 5 'v', 4 'iv', 1 'i'; } @counter-style upper-roman { system: additive; range: 1 3999; - additive-symbols: - 1000 "M", - 900 "CM", - 500 "D", - 400 "CD", - 100 "C", - 90 "XC", - 50 "L", - 40 "XL", - 10 "X", - 9 "IX", - 5 "V", - 4 "IV", - 1 "I"; + additive-symbols: 1000 'M', 900 'CM', 500 'D', 400 'CD', 100 'C', 90 'XC', 50 'L', 40 'XL', 10 'X', 9 'IX', 5 'V', 4 'IV', 1 'I'; } @counter-style tamil { system: numeric; - symbols: "\BE6" "\BE7" "\BE8" "\BE9" "\BEA" "\BEB" "\BEC" "\BED" "\BEE" "\BEF"; + symbols: '\BE6' '\BE7' '\BE8' '\BE9' '\BEA' '\BEB' '\BEC' '\BED' '\BEE' '\BEF'; } @counter-style telugu { system: numeric; - symbols: "\C66" "\C67" "\C68" "\C69" "\C6A" "\C6B" "\C6C" "\C6D" "\C6E" "\C6F"; + symbols: '\C66' '\C67' '\C68' '\C69' '\C6A' '\C6B' '\C6C' '\C6D' '\C6E' '\C6F'; } @counter-style thai { system: numeric; - symbols: "\E50" "\E51" "\E52" "\E53" "\E54" "\E55" "\E56" "\E57" "\E58" "\E59"; + symbols: '\E50' '\E51' '\E52' '\E53' '\E54' '\E55' '\E56' '\E57' '\E58' '\E59'; } @counter-style tibetan { system: numeric; - symbols: "\F20" "\F21" "\F22" "\F23" "\F24" "\F25" "\F26" "\F27" "\F28" "\F29"; + symbols: '\F20' '\F21' '\F22' '\F23' '\F24' '\F25' '\F26' '\F27' '\F28' '\F29'; } /* 6.2 Alphabetic */ @counter-style lower-alpha { system: alphabetic; - symbols: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z"; + symbols: 'a' 'b' 'c' 'd' 'e' 'f' 'g' 'h' 'i' 'j' 'k' 'l' 'm' 'n' 'o' 'p' 'q' 'r' 's' 't' 'u' 'v' 'w' 'x' 'y' 'z'; } @counter-style lower-latin { @@ -332,7 +161,7 @@ @counter-style upper-alpha { system: alphabetic; - symbols: "A" "B" "C" "D" "E" "F" "G" "H" "I" "J" "K" "L" "M" "N" "O" "P" "Q" "R" "S" "T" "U" "V" "W" "X" "Y" "Z"; + symbols: 'A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O' 'P' 'Q' 'R' 'S' 'T' 'U' 'V' 'W' 'X' 'Y' 'Z'; } @counter-style upper-latin { @@ -341,54 +170,45 @@ @counter-style cjk-heavenly-stem { system: fixed; - symbols: "\7532" "\4E59" "\4E19" "\4E01" "\620A" "\5DF1" "\5E9A" "\8F9B" "\58EC" "\7678"; + symbols: '\7532' '\4E59' '\4E19' '\4E01' '\620A' '\5DF1' '\5E9A' '\8F9B' '\58EC' '\7678'; fallback: cjk-decimal; - suffix: "\3001"; + suffix: '\3001'; } @counter-style cjk-earthly-branch { system: fixed; - symbols: "\5B50" "\4E11" "\5BC5" "\536F" "\8FB0" "\5DF3" "\5348" "\672A" "\7533" "\9149" "\620C" "\4EA5"; + symbols: '\5B50' '\4E11' '\5BC5' '\536F' '\8FB0' '\5DF3' '\5348' '\672A' '\7533' '\9149' '\620C' '\4EA5'; fallback: cjk-decimal; - suffix: "\3001"; + suffix: '\3001'; } @counter-style lower-greek { system: alphabetic; - symbols: "\3B1" "\3B2" "\3B3" "\3B4" "\3B5" "\3B6" "\3B7" "\3B8" "\3B9" "\3BA" "\3BB" "\3BC" "\3BD" "\3BE" "\3BF" "\3C0" "\3C1" "\3C3" "\3C4" "\3C5" "\3C6" - "\3C7" "\3C8" "\3C9"; + symbols: '\3B1' '\3B2' '\3B3' '\3B4' '\3B5' '\3B6' '\3B7' '\3B8' '\3B9' '\3BA' '\3BB' '\3BC' '\3BD' '\3BE' '\3BF' '\3C0' '\3C1' '\3C3' '\3C4' '\3C5' '\3C6' '\3C7' '\3C8' '\3C9'; } @counter-style hiragana { system: alphabetic; - symbols: "\3042" "\3044" "\3046" "\3048" "\304A" "\304B" "\304D" "\304F" "\3051" "\3053" "\3055" "\3057" "\3059" "\305B" "\305D" "\305F" "\3061" "\3064" - "\3066" "\3068" "\306A" "\306B" "\306C" "\306D" "\306E" "\306F" "\3072" "\3075" "\3078" "\307B" "\307E" "\307F" "\3080" "\3081" "\3082" "\3084" "\3086" - "\3088" "\3089" "\308A" "\308B" "\308C" "\308D" "\308F" "\3090" "\3091" "\3092" "\3093"; - suffix: "\3001"; + symbols: '\3042' '\3044' '\3046' '\3048' '\304A' '\304B' '\304D' '\304F' '\3051' '\3053' '\3055' '\3057' '\3059' '\305B' '\305D' '\305F' '\3061' '\3064' '\3066' '\3068' '\306A' '\306B' '\306C' '\306D' '\306E' '\306F' '\3072' '\3075' '\3078' '\307B' '\307E' '\307F' '\3080' '\3081' '\3082' '\3084' '\3086' '\3088' '\3089' '\308A' '\308B' '\308C' '\308D' '\308F' '\3090' '\3091' '\3092' '\3093'; + suffix: '\3001'; } @counter-style hiragana-iroha { system: alphabetic; - symbols: "\3044" "\308D" "\306F" "\306B" "\307B" "\3078" "\3068" "\3061" "\308A" "\306C" "\308B" "\3092" "\308F" "\304B" "\3088" "\305F" "\308C" "\305D" - "\3064" "\306D" "\306A" "\3089" "\3080" "\3046" "\3090" "\306E" "\304A" "\304F" "\3084" "\307E" "\3051" "\3075" "\3053" "\3048" "\3066" "\3042" "\3055" - "\304D" "\3086" "\3081" "\307F" "\3057" "\3091" "\3072" "\3082" "\305B" "\3059"; - suffix: "\3001"; + symbols: '\3044' '\308D' '\306F' '\306B' '\307B' '\3078' '\3068' '\3061' '\308A' '\306C' '\308B' '\3092' '\308F' '\304B' '\3088' '\305F' '\308C' '\305D' '\3064' '\306D' '\306A' '\3089' '\3080' '\3046' '\3090' '\306E' '\304A' '\304F' '\3084' '\307E' '\3051' '\3075' '\3053' '\3048' '\3066' '\3042' '\3055' '\304D' '\3086' '\3081' '\307F' '\3057' '\3091' '\3072' '\3082' '\305B' '\3059'; + suffix: '\3001'; } @counter-style katakana { system: alphabetic; - symbols: "\30A2" "\30A4" "\30A6" "\30A8" "\30AA" "\30AB" "\30AD" "\30AF" "\30B1" "\30B3" "\30B5" "\30B7" "\30B9" "\30BB" "\30BD" "\30BF" "\30C1" "\30C4" - "\30C6" "\30C8" "\30CA" "\30CB" "\30CC" "\30CD" "\30CE" "\30CF" "\30D2" "\30D5" "\30D8" "\30DB" "\30DE" "\30DF" "\30E0" "\30E1" "\30E2" "\30E4" "\30E6" - "\30E8" "\30E9" "\30EA" "\30EB" "\30EC" "\30ED" "\30EF" "\30F0" "\30F1" "\30F2" "\30F3"; - suffix: "\3001"; + symbols: '\30A2' '\30A4' '\30A6' '\30A8' '\30AA' '\30AB' '\30AD' '\30AF' '\30B1' '\30B3' '\30B5' '\30B7' '\30B9' '\30BB' '\30BD' '\30BF' '\30C1' '\30C4' '\30C6' '\30C8' '\30CA' '\30CB' '\30CC' '\30CD' '\30CE' '\30CF' '\30D2' '\30D5' '\30D8' '\30DB' '\30DE' '\30DF' '\30E0' '\30E1' '\30E2' '\30E4' '\30E6' '\30E8' '\30E9' '\30EA' '\30EB' '\30EC' '\30ED' '\30EF' '\30F0' '\30F1' '\30F2' '\30F3'; + suffix: '\3001'; } @counter-style katakana-iroha { system: alphabetic; - symbols: "\30A4" "\30ED" "\30CF" "\30CB" "\30DB" "\30D8" "\30C8" "\30C1" "\30EA" "\30CC" "\30EB" "\30F2" "\30EF" "\30AB" "\30E8" "\30BF" "\30EC" "\30BD" - "\30C4" "\30CD" "\30CA" "\30E9" "\30E0" "\30A6" "\30F0" "\30CE" "\30AA" "\30AF" "\30E4" "\30DE" "\30B1" "\30D5" "\30B3" "\30A8" "\30C6" "\30A2" "\30B5" - "\30AD" "\30E6" "\30E1" "\30DF" "\30B7" "\30F1" "\30D2" "\30E2" "\30BB" "\30B9"; - suffix: "\3001"; + symbols: '\30A4' '\30ED' '\30CF' '\30CB' '\30DB' '\30D8' '\30C8' '\30C1' '\30EA' '\30CC' '\30EB' '\30F2' '\30EF' '\30AB' '\30E8' '\30BF' '\30EC' '\30BD' '\30C4' '\30CD' '\30CA' '\30E9' '\30E0' '\30A6' '\30F0' '\30CE' '\30AA' '\30AF' '\30E4' '\30DE' '\30B1' '\30D5' '\30B3' '\30A8' '\30C6' '\30A2' '\30B5' '\30AD' '\30E6' '\30E1' '\30DF' '\30B7' '\30F1' '\30D2' '\30E2' '\30BB' '\30B9'; + suffix: '\3001'; } /* 6.3 Symbolic */ @@ -484,13 +304,13 @@ @counter-style -moz-hangul { system: alphabetic; - symbols: "\AC00" "\B098" "\B2E4" "\B77C" "\B9C8" "\BC14" "\C0AC" "\C544" "\C790" "\CC28" "\CE74" "\D0C0" "\D30C" "\D558"; - suffix: ","; + symbols: '\AC00' '\B098' '\B2E4' '\B77C' '\B9C8' '\BC14' '\C0AC' '\C544' '\C790' '\CC28' '\CE74' '\D0C0' '\D30C' '\D558'; + suffix: ','; } @counter-style -moz-hangul-consonant { system: alphabetic; - symbols: "\3131" "\3134" "\3137" "\3139" "\3141" "\3142" "\3145" "\3147" "\3148" "\314A" "\314B" "\314C" "\314D" "\314E"; - suffix: ","; + symbols: '\3131' '\3134' '\3137' '\3139' '\3141' '\3142' '\3145' '\3147' '\3148' '\314A' '\314B' '\314C' '\314D' '\314E'; + suffix: ','; } /* Ge'ez set of Ethiopic ordered list. There are other locale-dependent sets. @@ -499,23 +319,19 @@ * For details, refer to http://www.ethiopic.org/Collation/OrderedLists.html. */ @counter-style -moz-ethiopic-halehame { system: alphabetic; - symbols: "\1200" "\1208" "\1210" "\1218" "\1220" "\1228" "\1230" "\1240" "\1260" "\1270" "\1280" "\1290" "\12A0" "\12A8" "\12C8" "\12D0" "\12D8" "\12E8" - "\12F0" "\1308" "\1320" "\1330" "\1338" "\1340" "\1348" "\1350"; + symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1240' '\1260' '\1270' '\1280' '\1290' '\12A0' '\12A8' '\12C8' '\12D0' '\12D8' '\12E8' '\12F0' '\1308' '\1320' '\1330' '\1338' '\1340' '\1348' '\1350'; } @counter-style -moz-ethiopic-halehame-am { system: alphabetic; - symbols: "\1200" "\1208" "\1210" "\1218" "\1220" "\1228" "\1230" "\1238" "\1240" "\1260" "\1270" "\1278" "\1280" "\1290" "\1298" "\12A0" "\12A8" "\12B8" - "\12C8" "\12D0" "\12D8" "\12E0" "\12E8" "\12F0" "\1300" "\1308" "\1320" "\1328" "\1330" "\1338" "\1340" "\1348" "\1350"; + symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1238' '\1240' '\1260' '\1270' '\1278' '\1280' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1340' '\1348' '\1350'; } @counter-style -moz-ethiopic-halehame-ti-er { system: alphabetic; - symbols: "\1200" "\1208" "\1210" "\1218" "\1228" "\1230" "\1238" "\1240" "\1250" "\1260" "\1270" "\1278" "\1290" "\1298" "\12A0" "\12A8" "\12B8" "\12C8" - "\12D0" "\12D8" "\12E0" "\12E8" "\12F0" "\1300" "\1308" "\1320" "\1328" "\1330" "\1338" "\1348" "\1350"; + symbols: '\1200' '\1208' '\1210' '\1218' '\1228' '\1230' '\1238' '\1240' '\1250' '\1260' '\1270' '\1278' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1348' '\1350'; } @counter-style -moz-ethiopic-halehame-ti-et { system: alphabetic; - symbols: "\1200" "\1208" "\1210" "\1218" "\1220" "\1228" "\1230" "\1238" "\1240" "\1250" "\1260" "\1270" "\1278" "\1280" "\1290" "\1298" "\12A0" "\12A8" - "\12B8" "\12C8" "\12D0" "\12D8" "\12E0" "\12E8" "\12F0" "\1300" "\1308" "\1320" "\1328" "\1330" "\1338" "\1340" "\1348" "\1350"; + symbols: '\1200' '\1208' '\1210' '\1218' '\1220' '\1228' '\1230' '\1238' '\1240' '\1250' '\1260' '\1270' '\1278' '\1280' '\1290' '\1298' '\12A0' '\12A8' '\12B8' '\12C8' '\12D0' '\12D8' '\12E0' '\12E8' '\12F0' '\1300' '\1308' '\1320' '\1328' '\1330' '\1338' '\1340' '\1348' '\1350'; } /* Alias */ diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css index a741a3799613..5e268cfd10fa 100644 --- a/layout/style/res/forms.css +++ b/layout/style/res/forms.css @@ -6,6 +6,7 @@ Styles for old GFX form widgets **/ + @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ *|*::-moz-fieldset-content { @@ -117,11 +118,7 @@ textarea { } /* A few properties that we don't want to inherit by default: */ -input, -textarea, -select, -button, -::file-selector-button { +input, textarea, select, button, ::file-selector-button { text-align: initial; text-indent: initial; text-shadow: initial; @@ -192,12 +189,12 @@ input::-moz-text-control-preview { line-height: -moz-block-height !important; } -input[type="password"] { +input[type=password] { -moz-default-appearance: password-input; } -input[type="password"]::-moz-text-control-editing-root, -input[type="password"]::-moz-text-control-preview { +input[type=password]::-moz-text-control-editing-root, +input[type=password]::-moz-text-control-preview { /* * In password fields, any character should be put same direction. Otherwise, * caret position at typing tells everybody whether the character is an RTL @@ -404,7 +401,7 @@ optgroup:disabled { } /* hidden inputs */ -input[type="hidden"] { +input[type=hidden] { appearance: none; -moz-default-appearance: none; display: none !important; @@ -415,7 +412,7 @@ input[type="hidden"] { } /* image buttons */ -input[type="image"] { +input[type=image] { appearance: none; -moz-default-appearance: none; padding: unset; @@ -426,7 +423,7 @@ input[type="image"] { cursor: pointer; } -input[type="image"]:disabled { +input[type=image]:disabled { cursor: unset; } @@ -443,7 +440,7 @@ input[type="image"]:disabled { } /* radio buttons */ -input[type="radio"] { +input[type=radio] { appearance: auto; -moz-default-appearance: radio; margin-block: 3px 0; @@ -451,7 +448,7 @@ input[type="radio"] { } /* check boxes */ -input[type="checkbox"] { +input[type=checkbox] { appearance: auto; -moz-default-appearance: checkbox; margin-block: 3px; @@ -460,8 +457,8 @@ input[type="checkbox"] { /* Common features of radio buttons and check boxes */ -input[type="radio"], -input[type="checkbox"] { +input[type=radio], +input[type=checkbox] { box-sizing: border-box; cursor: default; /* unset some values from the general 'input' rule above: */ @@ -471,11 +468,11 @@ input[type="checkbox"] { color: unset; } -input:is([type="radio"], [type="checkbox"]):is(:disabled, :disabled:active, :disabled:hover:active) { +input:is([type=radio], [type=checkbox]):is(:disabled, :disabled:active, :disabled:hover:active) { cursor: unset; } -input[type="search"] { +input[type=search] { box-sizing: border-box; } @@ -488,7 +485,7 @@ input[type="search"] { input[type=color] */ button, ::file-selector-button, -input:is([type="color"], [type="reset"], [type="button"], [type="submit"]) { +input:is([type=color], [type=reset], [type=button], [type=submit]) { appearance: auto; -moz-default-appearance: button; /* The sum of border and padding on block-start and block-end @@ -507,7 +504,7 @@ input:is([type="color"], [type="reset"], [type="button"], [type="submit"]) { input[type=color] */ button, ::file-selector-button, -input:is([type="reset"], [type="button"], [type="submit"]) { +input:is([type=reset], [type=button], [type=submit]) { color: ButtonText; font: -moz-button; white-space: pre; @@ -515,14 +512,14 @@ input:is([type="reset"], [type="button"], [type="submit"]) { padding-inline: 4px; } -input[type="color"] { +input[type=color] { inline-size: 64px; block-size: 32px; padding: 4px; } /* https://github.com/whatwg/html/issues/9976 */ -input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) { +input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) { overflow: clip !important; overflow-clip-margin: 0 !important; } @@ -572,14 +569,14 @@ button, ::file-selector-button:hover, button:hover, -input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):hover { +input:is([type=reset], [type=button], [type=submit], [type=color]):hover { color: -moz-buttonhovertext; background-color: -moz-buttonhoverface; } ::file-selector-button:active:hover, button:active:hover, -input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):active:hover { +input:is([type=reset], [type=button], [type=submit], [type=color]):active:hover { border-style: inset; color: -moz-buttonactivetext; background-color: -moz-buttonactiveface; @@ -587,7 +584,7 @@ input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):activ :is(:disabled, :disabled:active)::file-selector-button, button:is(:disabled, :disabled:active), -input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):is(:disabled, :disabled:active), +input:is([type=reset], [type=button], [type=submit], [type=color]):is(:disabled, :disabled:active), select:is(:disabled, :disabled:active) > button { border-style: outset; cursor: unset; @@ -595,14 +592,14 @@ select:is(:disabled, :disabled:active) > button { :is(:disabled, :disabled:active)::file-selector-button, button:is(:disabled, :disabled:active), -input:is([type="reset"], [type="button"], [type="submit"]):is(:disabled, :disabled:active), +input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active), select:is(:disabled, :disabled:active) > button { color: GrayText; background-color: -moz-ButtonDisabledFace; } /* file selector */ -input[type="file"] { +input[type=file] { white-space: nowrap !important; overflow-clip-box: padding-box; color: unset; @@ -617,7 +614,7 @@ input[type="file"] { padding: unset; } -input[type="file"] > label { +input[type=file] > label { display: inline-block; min-inline-size: 12em; text-align: match-parent; @@ -635,23 +632,23 @@ input[type="file"] > label { margin-inline-end: 5px; } -/* - * Make form controls inherit 'unicode-bidi' transparently as required by - * their various anonymous descendants and pseudo-elements: - * - *