From f023fa6fc0739a82c918b5e7523dde91180a59f0 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Wed, 23 Oct 2024 12:41:16 -0700 Subject: [PATCH] styles: Be specific about which properties are transitioned. Signed-off-by: Anders Kaseorg --- web/styles/app_components.css | 13 ++++++---- web/styles/compose.css | 13 +++++----- web/styles/image_upload_widget.css | 2 -- web/styles/inbox.css | 3 ++- web/styles/lightbox.css | 4 ++-- web/styles/message_row.css | 13 +++++----- web/styles/modal.css | 2 +- web/styles/popovers.css | 2 +- web/styles/portico/activity.css | 4 ++-- web/styles/portico/billing.css | 3 ++- web/styles/portico/comparison_table.css | 15 ++---------- web/styles/portico/email_log.css | 2 +- web/styles/portico/footer.css | 2 +- web/styles/portico/hello.css | 24 ++++++++++--------- web/styles/portico/integrations.css | 20 +++++++++------- web/styles/portico/integrations_dev_panel.css | 4 ++-- web/styles/portico/landing_page.css | 12 ++++------ web/styles/portico/navbar.css | 12 ++++++---- web/styles/portico/portico.css | 14 ++++++----- web/styles/portico/portico_signin.css | 12 ++++++---- web/styles/rendered_markdown.css | 6 ++--- web/styles/settings.css | 8 +++---- web/styles/subscriptions.css | 6 ++--- web/styles/widgets.css | 5 ++-- web/styles/zulip.css | 8 +++---- 25 files changed, 107 insertions(+), 102 deletions(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index fb020742ad..cb32085483 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -362,7 +362,8 @@ div.overlay { opacity: 0; visibility: hidden; - transition: all 0.2s ease-in; + transition: none 0.2s ease-in; + transition-property: opacity, visibility; overflow: hidden; .overlay-content { @@ -669,7 +670,8 @@ input.settings_text_input { .animated-purple-button { color: hsl(0deg 0% 100%); - transition: all 80ms linear; + transition: none 80ms linear; + transition-property: background-color, box-shadow; box-shadow: none; /* This color just passes WCAG AA */ background-color: hsl(240deg 96% 68%); @@ -716,10 +718,11 @@ input.settings_text_input { .color-animated-button-text { color: hsl(0deg 0% 100%); - transition: all 0.2s ease; + transition: color 0.2s ease; } - transition: all 0.2s ease; + transition: none 0.2s ease; + transition-property: background-color, color; } .zulip-icon, @@ -1177,7 +1180,7 @@ input.settings_text_input { color: hsl(0deg 0% 33%); border: 1px solid hsl(0deg 0% 80%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); border-radius: 4px; diff --git a/web/styles/compose.css b/web/styles/compose.css index a28a76699b..a0896f4dba 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -240,7 +240,8 @@ color: var(--color-compose-chevron-arrow); text-decoration: none; cursor: default; - transition: all 0.2s ease-in-out; + transition: none 0.2s ease-in-out; + transition-property: background, color; &.narrow_to_compose_recipients { background: var( @@ -320,7 +321,7 @@ grid-template-areas: "message-content composebox-buttons"; border-radius: 4px; border: 1px solid var(--color-message-content-container-border); - transition: border 0.2s ease; + transition: border-color 0.2s ease; &:has(.new_message_textarea:focus) { border-color: var(--color-message-content-container-border-focus); @@ -905,14 +906,14 @@ textarea.new_message_textarea { flex: 1 1 0; border: 1px solid hsl(0deg 0% 0% / 20%); border-radius: 3px; - transition: border 0.2s ease; + transition: border-color 0.2s ease; background: hsl(0deg 0% 100%); /* Give the recipient box, a `
`, the correct styles when focus is in the #stream_message_recipient_topic `` */ &:focus-within { - border: 1px solid hsl(0deg 0% 67%); + border-color: hsl(0deg 0% 67%); } #stream_message_recipient_topic, @@ -991,7 +992,7 @@ textarea.new_message_textarea { background-color: var(--color-compose-send-button-background); &:active { - transition: all 80ms; + transition: transform 80ms; transform: scale(0.96); } @@ -1461,7 +1462,7 @@ textarea.new_message_textarea { font-weight: 450; &:active { - transition: all 80ms; + transition: transform 80ms; transform: scale(0.96); } diff --git a/web/styles/image_upload_widget.css b/web/styles/image_upload_widget.css index 3a75d37826..e09931caf7 100644 --- a/web/styles/image_upload_widget.css +++ b/web/styles/image_upload_widget.css @@ -5,8 +5,6 @@ box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%); overflow: hidden; - transition: all 0.3s ease; - .image-block { background-size: contain; height: 100%; diff --git a/web/styles/inbox.css b/web/styles/inbox.css index e3862c968d..cd56924f12 100644 --- a/web/styles/inbox.css +++ b/web/styles/inbox.css @@ -79,7 +79,8 @@ font-size: 16px; color: var(--color-icons-inbox); opacity: 0.4; - transition: all 140ms; + transition: none 140ms; + transition-property: background-color, opacity, transform; padding: 5px; margin: 0; /* = -Width of the button. */ diff --git a/web/styles/lightbox.css b/web/styles/lightbox.css index e8f078bd23..446a43b3ca 100644 --- a/web/styles/lightbox.css +++ b/web/styles/lightbox.css @@ -59,7 +59,7 @@ opacity: 0; pointer-events: none; cursor: pointer; - transition: all 0.2s ease; + transition: opacity 0.2s ease; } &.show .exit { @@ -183,7 +183,7 @@ cursor: pointer; opacity: 0.5; - transition: all 0.3s ease; + transition: opacity 0.3s ease; &:hover { opacity: 1; diff --git a/web/styles/message_row.css b/web/styles/message_row.css index 4332696f45..dc74d9dbcc 100644 --- a/web/styles/message_row.css +++ b/web/styles/message_row.css @@ -428,7 +428,8 @@ .message_control_button { opacity: 0; visibility: hidden; - transition: all 0.2s ease; + transition: none 0.2s ease; + transition-property: opacity, visibility; width: var(--message-box-icon-width); height: var(--message-box-icon-height); text-align: center; @@ -527,14 +528,14 @@ .unread_marker { margin-left: var(--unread-marker-left); opacity: 0; - transition: all 0.3s ease-out; + transition: opacity 0.3s ease-out; &.slow_fade { - transition: all 2s ease-out; + transition: opacity 2s ease-out; } &.fast_fade { - transition: all 0.3s ease-out; + transition: opacity 0.3s ease-out; } &.date_unread_marker { @@ -562,7 +563,7 @@ } .unread .unread_marker { - transition: all 0.3s ease-out; + transition: opacity 0.3s ease-out; opacity: 1; } @@ -657,7 +658,7 @@ .edit-content-container { border-radius: 4px; border: 1px solid var(--color-message-content-container-border); - transition: border 0.2s ease; + transition: border-color 0.2s ease; &:has(.message_edit_content:focus) { border-color: var(--color-message-content-container-border-focus); diff --git a/web/styles/modal.css b/web/styles/modal.css index 65626713d8..f2a8043542 100644 --- a/web/styles/modal.css +++ b/web/styles/modal.css @@ -406,7 +406,7 @@ border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; margin-bottom: 10px; width: 206px; diff --git a/web/styles/popovers.css b/web/styles/popovers.css index cf884abedf..329b6e3b92 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -753,7 +753,7 @@ ul.popover-group-menu-member-list { opacity: 0; pointer-events: none; - transition: all 0.3s ease; + transition: opacity 0.3s ease; &.fade.in { opacity: 1; diff --git a/web/styles/portico/activity.css b/web/styles/portico/activity.css index 933a7e28fb..b64ea94cec 100644 --- a/web/styles/portico/activity.css +++ b/web/styles/portico/activity.css @@ -145,7 +145,7 @@ tr.admin td:first-child { color: hsl(0deg 0% 33%); vertical-align: text-bottom; transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 1px hsla(0deg 0% 0% / 7.5%); @@ -372,7 +372,7 @@ tr.admin td:first-child { border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; color: hsl(0deg 0% 33%); diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css index d42cb41253..e51e501ee5 100644 --- a/web/styles/portico/billing.css +++ b/web/styles/portico/billing.css @@ -59,7 +59,8 @@ width: 120px; height: 70px; background-color: hsl(0deg 0% 94%); - transition: all 0.2s ease; + transition: none 0.2s ease; + transition-property: background-color, border-color; display: inline-block; text-align: center; cursor: pointer; diff --git a/web/styles/portico/comparison_table.css b/web/styles/portico/comparison_table.css index 50a2905f07..e6330ef150 100644 --- a/web/styles/portico/comparison_table.css +++ b/web/styles/portico/comparison_table.css @@ -130,7 +130,7 @@ align-items: center; border-radius: 3px; cursor: pointer; - transition: all 120ms ease-out; + transition: background-color 120ms ease-out; } .comparison-tab:hover { @@ -139,7 +139,6 @@ } .comparison-tab:active { - transition: all 120ms ease-out; background-color: hsl(0deg 0% 100% / 70%); } @@ -178,7 +177,7 @@ } .comparison-table tr { - transition: all 200ms ease-out; + transition: background-color 200ms ease-out; } .comparison-table tbody tr:hover { @@ -199,7 +198,6 @@ font-weight: 700; color: hsl(223deg 40% 30% / 100%); background: hsl(209deg 41% 94%); - transition: all 200ms ease-out; } .comparison-table th .icon { @@ -537,19 +535,10 @@ .comparison-table th.comparison-table-feature { padding-top: 28px; - /* Don't apply transitions to the - padding. This prevents the "Features" - label from sliding into place when - switching over to the All view. */ - transition: none; } .comparison-table td.stuck { padding-top: 24px; - /* Don't apply transitions to the - padding. This makes the stuck state - look more precise. */ - transition: none; } @media (width <= 730px) { diff --git a/web/styles/portico/email_log.css b/web/styles/portico/email_log.css index 7258f76f67..a0c8bb0b9e 100644 --- a/web/styles/portico/email_log.css +++ b/web/styles/portico/email_log.css @@ -111,7 +111,7 @@ border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; margin-bottom: 10px; width: 206px; diff --git a/web/styles/portico/footer.css b/web/styles/portico/footer.css index 7dcd7e48a1..83443a1a38 100644 --- a/web/styles/portico/footer.css +++ b/web/styles/portico/footer.css @@ -171,7 +171,7 @@ mask-position: center; mask-repeat: no-repeat; mask-image: var(--footer-social-icon); - transition: all 150ms ease-out; + transition: background-color 150ms ease-out; &:hover { background-color: hsl(238.6deg 84.31% 90%); diff --git a/web/styles/portico/hello.css b/web/styles/portico/hello.css index 7dc0ab38ff..2f15b76a9d 100644 --- a/web/styles/portico/hello.css +++ b/web/styles/portico/hello.css @@ -165,7 +165,8 @@ ul { "pnum" on, "lnum" on; color: hsl(0deg 0% 100%); - transition: all 0.8s ease-out; + transition: none 0.8s ease-out; + transition-property: background, transform; cursor: pointer; } @@ -197,7 +198,7 @@ ul { } .client-logos-div { - transition: all 0.7s ease-out; + transition: opacity 0.7s ease-out; background-position: center; } @@ -264,7 +265,7 @@ ul { line-height: 130%; /* 33.8px */ position: relative; opacity: 0.7; - transition: all 0.1s; + transition: opacity 0.1s; } .screen-2__tabs ul li label:hover { @@ -282,7 +283,7 @@ ul { border-radius: 5px; background: hsl(0deg 0% 100%); opacity: 0.3; - transition: all 0.1s; + transition: opacity 0.1s; } .screen-2__tabs ul li label:hover::before { @@ -418,7 +419,8 @@ ul { } .quote__text { - transition: all 0.5s ease-out; + transition: none 0.5s ease-out; + transition-property: background, box-shadow; font-family: var(--font-ss3); font-style: normal; font-weight: 400; @@ -448,7 +450,7 @@ ul { bottom: -37px; left: 0; mask-image: var(--quote-tail-mask); - transition: all 0.5s ease-out; + transition: background 0.5s ease-out; background: linear-gradient( 0deg, hsl(0deg 0% 100% / 49%) 0%, @@ -525,11 +527,11 @@ ul { .quote__source a { border-bottom: 1px solid hsl(0deg 0% 100% / 50%); - transition: border 0.4s ease-out; + transition: border-bottom-color 0.4s ease-out; } .quote__source a:hover { - border-bottom: 1px solid hsl(0deg 0% 100%); + border-bottom-color: hsl(0deg 0% 100%); transition: none; } @@ -622,12 +624,12 @@ ul { .screen-4__desc a { font-weight: 550; border-bottom: 1px solid hsl(0deg 0% 100% / 50%); - transition: border 0.4s ease-out; + transition: border-bottom-color 0.4s ease-out; } .screen-2__desc a:hover, .screen-4__desc a:hover { - border-bottom: 1px solid hsl(0deg 0% 100%); + border-bottom-color: hsl(0deg 0% 100%); transition: none; } @@ -669,7 +671,7 @@ ul { border: 2px solid hsl(0deg 0% 100% / 26%); background: hsl(0deg 0% 100% / 7%); min-height: 80px; - transition: all 0.2s; + transition: background 0.2s; padding: 12px 16px 14px; .card__text { diff --git a/web/styles/portico/integrations.css b/web/styles/portico/integrations.css index 67c044604d..16dde09952 100644 --- a/web/styles/portico/integrations.css +++ b/web/styles/portico/integrations.css @@ -122,12 +122,10 @@ $category-text: hsl(219deg 23% 33%); display: block; color: hsl(0deg 0% 33%); margin-bottom: 10px; - transition: - border linear 0.2s, - box-shadow linear 0.2s; + transition: border-color linear 0.2s; &:focus { - border: 1px solid $border-green; + border-color: $border-green; outline: 0; } @@ -191,7 +189,8 @@ $category-text: hsl(219deg 23% 33%); padding: 6px 10px 3px; margin: 3px 0; border-radius: 5px; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: background-color, color; color: $category-text; &.selected, @@ -261,7 +260,8 @@ $category-text: hsl(219deg 23% 33%); border-left: 1px solid $light-blue-border; border-right: 1px solid $light-blue-border; border-bottom: 1px solid $light-blue-border; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: background-color, color; font-size: 0.9em; &.selected, @@ -317,10 +317,11 @@ $category-text: hsl(219deg 23% 33%); border: 1px solid $light-blue-border; color: $category-text; text-align: center; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: border-color; &:hover { - border: 1px solid $border-green; + border-color: $border-green; } &.legacy { @@ -507,7 +508,8 @@ $category-text: hsl(219deg 23% 33%); width: 165px; text-align: center; border-radius: 5px; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: background-color, color; background-color: $light-blue-border; color: $category-text; diff --git a/web/styles/portico/integrations_dev_panel.css b/web/styles/portico/integrations_dev_panel.css index ddff1aa909..4a82a9a51a 100644 --- a/web/styles/portico/integrations_dev_panel.css +++ b/web/styles/portico/integrations_dev_panel.css @@ -24,7 +24,7 @@ box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; &:focus { @@ -68,7 +68,7 @@ border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; margin-bottom: 10px; diff --git a/web/styles/portico/landing_page.css b/web/styles/portico/landing_page.css index 3d75c18c58..9b07b4d117 100644 --- a/web/styles/portico/landing_page.css +++ b/web/styles/portico/landing_page.css @@ -317,7 +317,7 @@ button { box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%); - transition: all 0.2s ease; + transition: box-shadow 0.2s ease; &:hover { box-shadow: 0 3px 10px hsl(0deg 0% 100% / 20%); @@ -681,8 +681,6 @@ button { .message-feed { height: calc(100% - 20px); margin-top: 20px; - - transition: all 0.1s ease; } } @@ -910,7 +908,7 @@ button { width: 155px; height: 220px; padding: 0 5px; - transition: all 0.3s ease; + transition: border-color 0.3s ease; margin: 10px 5px; color: hsl(219deg 23% 33%); border-radius: 5px; @@ -918,7 +916,7 @@ button { } .portico-landing.hello .integrations .integration-icons .group:hover { - border: 1px solid hsl(170deg 47% 53%); + border-color: hsl(170deg 47% 53%); } .portico-landing.hello .integrations .integration-logo { @@ -1079,7 +1077,7 @@ button { font-size: 3em; text-align: center; - transition: all 0.2s ease; + transition: background 0.2s ease; } .portico-landing.apps .other-apps .apps .icon:hover { @@ -1582,7 +1580,7 @@ button { font-size: 0.9em; - transition: all 0.3s ease; + transition: background-color 0.3s ease; } .for-education-pricing-model .pricing-container .price-box:focus { diff --git a/web/styles/portico/navbar.css b/web/styles/portico/navbar.css index ef94e1f49b..91e2cfaef6 100644 --- a/web/styles/portico/navbar.css +++ b/web/styles/portico/navbar.css @@ -194,7 +194,8 @@ details summary::-webkit-details-marker { opacity: 0; height: 0; width: 100%; - transition: all 0.05s; + transition: none 0.05s; + transition-property: height, opacity; } .top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop { @@ -238,7 +239,8 @@ details summary::-webkit-details-marker { gap: 16px; opacity: 0; visibility: hidden; - transition: all 0.2s; + transition: none 0.2s; + transition-property: opacity, visibility; } #case-studies-submenu { @@ -382,7 +384,8 @@ details summary::-webkit-details-marker { "lnum" on; color: hsl(0deg 0% 100% / 80%); - transition: all 0.2; + transition: none 0.2; + transition-property: backdrop-filter, background, bottom, height; overscroll-behavior: contain; } @@ -504,7 +507,8 @@ details summary::-webkit-details-marker { position: sticky; top: 0; z-index: 1; - transition: all 0.3s; + transition: none 0.3s; + transition-property: background, backdrop-filter; height: 60px; overflow: hidden; display: flex; diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css index 062d8b1e82..19398902d4 100644 --- a/web/styles/portico/portico.css +++ b/web/styles/portico/portico.css @@ -533,7 +533,7 @@ input.text-error { font-size: 0.6em; margin-left: 5px; opacity: 0.5; - transition: all 0.2s ease; + transition: opacity 0.2s ease; } &:hover .realm-name i.fa { @@ -684,14 +684,14 @@ input.text-error { padding: 10px; border: 1px solid hsl(0deg 0% 93%); border-radius: 4px; - transition: all 0.3s ease; + transition: border-color 0.3s ease; & a { color: inherit; } &:hover { - border: 1px solid hsl(0deg 0% 73%); + border-color: hsl(0deg 0% 73%); } .avatar { @@ -837,7 +837,8 @@ input.new-organization-button { padding: 2px 7px 1px 8px; font-weight: 600; font-size: 16px; - transition: all 0.2s ease-in; + transition: none 0.2s ease-in; + transition-property: background-color, color; border-radius: 4px; &:hover { @@ -1103,7 +1104,8 @@ input.new-organization-button { right: calc(100% - 40px); fill: hsl(0deg 0% 100%); z-index: 2; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: right, top; cursor: pointer; } @@ -1117,7 +1119,7 @@ input.new-organization-button { pointer-events: none; overflow: hidden; transform: translateX(0); - transition: all 0.3s ease; + transition: transform 0.3s ease; } .sidebar.show { diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css index 2ebec58c3e..6543ee5df1 100644 --- a/web/styles/portico/portico_signin.css +++ b/web/styles/portico/portico_signin.css @@ -209,7 +209,7 @@ html { transition: color 0.3s ease, - border 0.3s ease; + border-color 0.3s ease; &:hover { color: hsl(156deg 62% 61%); @@ -428,7 +428,8 @@ html { border: none; border-radius: 4px; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: background-color, outline; &:hover { background-color: hsl(213deg 33% 31%); @@ -547,7 +548,7 @@ html { background-color: hsl(0deg 0% 100%); color: hsl(0deg 0% 33%); - transition: border 0.3s ease; + transition: border-color 0.3s ease; &:focus:invalid { box-shadow: none; @@ -555,7 +556,7 @@ html { } &:focus { - border: 1px solid hsl(0deg 0% 53%); + border-color: hsl(0deg 0% 53%); outline: 0; } } @@ -571,7 +572,8 @@ html { margin-top: 1px; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: color, font-size, font-weight, transform; } &.moving-label { diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css index 91b26f4ca4..446df3579b 100644 --- a/web/styles/rendered_markdown.css +++ b/web/styles/rendered_markdown.css @@ -349,7 +349,7 @@ float: right; width: 15px; cursor: pointer; - transition: 0.4s ease; + transition: transform 0.4s ease; transform: rotate(45deg); &::before, @@ -360,7 +360,7 @@ width: 12px; height: 3px; background-color: hsl(0deg 0% 83%); - transition: 0.4s ease; + transition: transform 0.4s ease; } &::after { @@ -917,7 +917,7 @@ &::-webkit-scrollbar-thumb { background-color: hsl(0deg 0% 0% / 30%); border-radius: 20px; - transition: all 0.2s ease; + transition: background-color 0.2s ease; } &::-webkit-scrollbar-thumb:hover { diff --git a/web/styles/settings.css b/web/styles/settings.css index b659e7938c..df3d8a01f9 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -868,7 +868,7 @@ input[type="checkbox"] { position: relative; margin-left: 5px; color: hsl(0deg 0% 67%); - transition: all 0.3s ease; + transition: color 0.3s ease; &:hover { color: hsl(0deg 0% 27%); @@ -1494,7 +1494,7 @@ $option_title_width: 180px; color: hsl(0deg 0% 33%); border: 1px solid hsl(0deg 0% 80%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; &:focus { @@ -1709,7 +1709,7 @@ $option_title_width: 180px; box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; &:focus { @@ -2025,7 +2025,7 @@ $option_title_width: 180px; border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; margin-bottom: 10px; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 521bb049c6..15cb0f7edb 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -286,7 +286,8 @@ h4.user_group_setting_subsection_title { cursor: pointer; - transition: all 0.3s ease; + transition: none 0.3s ease; + transition-property: opacity, transform; } .user-groups-container .user-groups-header.slide-left .fa-chevron-left, @@ -328,7 +329,6 @@ h4.user_group_setting_subsection_title { .user-groups-title, .subscriptions-title { display: inline-block; - transition: all 0.3s ease; transform: translate(-13px, 0); } @@ -1229,7 +1229,7 @@ div.settings-radio-input-parent { background-color: var(--color-background-modal); border-top: none; - transition: all 0.3s ease; + transition: left 0.3s ease; z-index: 10; &.show { diff --git a/web/styles/widgets.css b/web/styles/widgets.css index 3c579cceba..638984a15c 100644 --- a/web/styles/widgets.css +++ b/web/styles/widgets.css @@ -130,7 +130,7 @@ border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; border-radius: 4px; color: hsl(0deg 0% 33%); @@ -218,7 +218,8 @@ button { padding: 4px; padding-left: 14px; padding-right: 14px; - transition: all 0.2s ease; + transition: none 0.2s ease; + transition-property: background-color, border-color, color; &:hover, &:focus { diff --git a/web/styles/zulip.css b/web/styles/zulip.css index f0809a58bb..d25201ba15 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -438,7 +438,7 @@ body.has-overlay-scrollbar { text-overflow: ellipsis; /* Button curvature and transitions. */ border-radius: 4px; - transition: all 100ms ease-out; + transition: transform 100ms ease-out; &:hover, &:focus { @@ -773,7 +773,7 @@ strong { .new_messages, .new_messages_fadeout { - transition: all 3s ease-in-out; + transition: background-color 3s ease-in-out; } .messagebox-content .slow-send-spinner { @@ -918,7 +918,7 @@ div.focused-message-list { border-radius: 4px; border: 1px solid hsl(0deg 0% 80%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; &:focus { @@ -1295,7 +1295,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner { border: 1px solid hsl(0deg 0% 80%); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%); transition: - border linear 0.2s, + border-color linear 0.2s, box-shadow linear 0.2s; &:focus {