Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styles: Be specific about which properties are transitioned. 

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2024-10-23 12:41:16 -07:00 committed by Tim Abbott
parent 7878b80934
commit f023fa6fc0
25 changed files with 107 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/app_components.css
View File

@ -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;

13
web/styles/compose.css
View File

@ -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 `<div>`, the
correct styles when focus is in the
#stream_message_recipient_topic `<input>` */
&: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);
}

2
web/styles/image_upload_widget.css
View File

@ -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%;

3
web/styles/inbox.css
View File

@ -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. */

4
web/styles/lightbox.css
View File

@ -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;

13
web/styles/message_row.css
View File

@ -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);

2
web/styles/modal.css
View File

@ -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;

2
web/styles/popovers.css
View File

@ -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;

4
web/styles/portico/activity.css
View File

@ -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%);

3
web/styles/portico/billing.css
View File

@ -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;

15
web/styles/portico/comparison_table.css
View File

@ -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) {

2
web/styles/portico/email_log.css
View File

@ -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;

2
web/styles/portico/footer.css
View File

@ -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%);

24
web/styles/portico/hello.css
View File

@ -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 {

20
web/styles/portico/integrations.css
View File

@ -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;

4
web/styles/portico/integrations_dev_panel.css
View File

@ -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;

12
web/styles/portico/landing_page.css
View File

@ -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 {

12
web/styles/portico/navbar.css
View File

@ -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;

14
web/styles/portico/portico.css
View File

@ -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 {

12
web/styles/portico/portico_signin.css
View File

@ -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 {

6
web/styles/rendered_markdown.css
View File

@ -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 {

8
web/styles/settings.css
View File

@ -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;

6
web/styles/subscriptions.css
View File

@ -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 {

5
web/styles/widgets.css
View File

@ -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 {

8
web/styles/zulip.css
View File

@ -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 {