CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-30 21:11:04 +08:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity
9107101fe0
zulip/web/styles/buttons.css
Sayam Samal 4c9d47c390 inline_topic_edit: Disable save button and show tooltip on empty topic. 
This commit disables the save button when the topic name is considered
as empty as part of the `realm_mandatory_topics` being set to True.

Since disabled elements do not fire events, it is not possible to
trigger tippy tooltips on disabled elements – such as the Save button
in the inline topic edit UI. Thus this commit adds a tooltip to the
disabled save button by wrapping/unwrapping it inside a `span` wrapper
pragmatically via the `ui_util.disable_element_and_add_tooltip` and
`ui_util.enable_element_and_remove_tooltip` helper methods.
2025-02-26 17:26:35 -08:00

587 lines
14 KiB
CSS
Raw Blame History

.action-button {
display: flex;
gap: 0.75ch;
justify-content: center;
align-items: center;
line-height: 1.25;
font-size: var(--base-font-size-px);
font-family: "Source Sans 3 VF", sans-serif;
font-weight: 500;
letter-spacing: 0.02ch;
padding: 0.25em 0.625em;
color: var(--color-text-neutral-quiet-action-button);
background-color: var(--color-background-neutral-quiet-action-button);
border-radius: 4px;
white-space: nowrap;
user-select: none;
border: none;
cursor: pointer;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:hover {
background-color: var(
--color-background-neutral-quiet-action-button-hover
);
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
background-color: var(
--color-background-neutral-quiet-action-button-active
);
clip-path: inset(1px round 4px);
}
&:focus {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: none;
}
&:focus-visible {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 2px;
clip-path: inset(-3px);
}
&:disabled {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
}
.action-button-label {
max-width: 32ch;
text-overflow: ellipsis;
overflow: hidden;
}
/* Action buttons -- Neutral Intent */
.action-button-primary-neutral {
color: var(--color-text-neutral-primary-action-button);
background-color: var(--color-background-neutral-primary-action-button);
&:hover {
background-color: var(
--color-background-neutral-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-primary-action-button-active
);
}
}
.action-button-quiet-neutral {
color: var(--color-text-neutral-quiet-action-button);
background-color: var(--color-background-neutral-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-neutral-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-quiet-action-button-active
);
}
}
.action-button-borderless-neutral {
color: var(--color-text-neutral-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-neutral-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-neutral-borderless-action-button-active
);
}
}
/* Action buttons -- Brand Intent */
.action-button-primary-brand {
color: var(--color-text-brand-primary-action-button);
background-color: var(--color-background-brand-primary-action-button);
&:hover {
background-color: var(
--color-background-brand-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-primary-action-button-active
);
}
}
.action-button-quiet-brand {
color: var(--color-text-brand-quiet-action-button);
background-color: var(--color-background-brand-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-brand-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-quiet-action-button-active
);
}
}
.action-button-borderless-brand {
color: var(--color-text-brand-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-brand-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-brand-borderless-action-button-active
);
}
}
/* Action buttons -- Info Intent */
.action-button-primary-info {
color: var(--color-text-info-primary-action-button);
background-color: var(--color-background-info-primary-action-button);
&:hover {
background-color: var(
--color-background-info-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-primary-action-button-active
);
}
}
.action-button-quiet-info {
color: var(--color-text-info-quiet-action-button);
background-color: var(--color-background-info-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-info-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-quiet-action-button-active
);
}
}
.action-button-borderless-info {
color: var(--color-text-info-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-info-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-info-borderless-action-button-active
);
}
}
/* Action buttons -- Success Intent */
.action-button-primary-success {
color: var(--color-text-success-primary-action-button);
background-color: var(--color-background-success-primary-action-button);
&:hover {
background-color: var(
--color-background-success-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-primary-action-button-active
);
}
}
.action-button-quiet-success {
color: var(--color-text-success-quiet-action-button);
background-color: var(--color-background-success-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-success-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-quiet-action-button-active
);
}
}
.action-button-borderless-success {
color: var(--color-text-success-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-success-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-success-borderless-action-button-active
);
}
}
/* Action buttons -- Warning Intent */
.action-button-primary-warning {
color: var(--color-text-warning-primary-action-button);
background-color: var(--color-background-warning-primary-action-button);
&:hover {
background-color: var(
--color-background-warning-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-primary-action-button-active
);
}
}
.action-button-quiet-warning {
color: var(--color-text-warning-quiet-action-button);
background-color: var(--color-background-warning-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-warning-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-quiet-action-button-active
);
}
}
.action-button-borderless-warning {
color: var(--color-text-warning-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-warning-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-warning-borderless-action-button-active
);
}
}
/* Action buttons -- Danger Intent */
.action-button-primary-danger {
color: var(--color-text-danger-primary-action-button);
background-color: var(--color-background-danger-primary-action-button);
&:hover {
background-color: var(
--color-background-danger-primary-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-primary-action-button-active
);
}
}
.action-button-quiet-danger {
color: var(--color-text-danger-quiet-action-button);
background-color: var(--color-background-danger-quiet-action-button);
box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
&:hover {
background-color: var(
--color-background-danger-quiet-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-quiet-action-button-active
);
}
}
.action-button-borderless-danger {
color: var(--color-text-danger-borderless-action-button);
background-color: transparent;
&:hover {
background-color: var(
--color-background-danger-borderless-action-button-hover
);
}
&:active {
background-color: var(
--color-background-danger-borderless-action-button-active
);
}
}
.icon-button {
/* This class should always be used with an icon-button-* class
defining the color scheme of the button, defined below. */
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
font-size: var(--base-font-size-px);
background-color: transparent; /* Override button default background color */
padding: 0.375em;
cursor: pointer;
border: none;
border-radius: 4px;
clip-path: inset(-1px);
transition: none 0.05s ease-in;
transition-property: background-color, clip-path;
&:hover {
transition: none 0.1s ease-out;
transition-property: background-color, clip-path;
}
&:active {
clip-path: inset(1px round 4px);
}
&:focus {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: none;
}
&:focus-visible {
/* Override common button outline style set in zulip.css and dark_theme.css */
outline: 1px solid var(--color-outline-focus) !important;
outline-offset: 2px;
clip-path: inset(-3px);
}
&:disabled {
cursor: default;
pointer-events: none;
opacity: 0.5;
}
}
.icon-button-neutral {
color: var(--color-text-neutral-icon-button);
&:hover {
color: var(--color-text-neutral-icon-button-hover);
}
&:active {
color: var(--color-text-neutral-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-neutral-icon-button-square-hover
);
}
&:active {
color: var(--color-text-neutral-icon-button-square-active);
background-color: var(
--color-background-neutral-icon-button-square-active
);
}
}
}
.icon-button-brand {
color: var(--color-text-brand-icon-button);
&:hover {
color: var(--color-text-brand-icon-button-hover);
}
&:active {
color: var(--color-text-brand-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-brand-icon-button-square-hover
);
}
&:active {
color: var(--color-text-brand-icon-button-square-active);
background-color: var(
--color-background-brand-icon-button-square-active
);
}
}
}
.icon-button-info {
color: var(--color-text-info-icon-button);
&:hover {
color: var(--color-text-info-icon-button-hover);
}
&:active {
color: var(--color-text-info-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-info-icon-button-square-hover
);
}
&:active {
color: var(--color-text-info-icon-button-square-active);
background-color: var(
--color-background-info-icon-button-square-active
);
}
}
}
.icon-button-success {
color: var(--color-text-success-icon-button);
&:hover {
color: var(--color-text-success-icon-button-hover);
}
&:active {
color: var(--color-text-success-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-success-icon-button-square-hover
);
}
&:active {
color: var(--color-text-success-icon-button-square-active);
background-color: var(
--color-background-success-icon-button-square-active
);
}
}
}
.icon-button-warning {
color: var(--color-text-warning-icon-button);
&:hover {
color: var(--color-text-warning-icon-button-hover);
}
&:active {
color: var(--color-text-warning-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-warning-icon-button-square-hover
);
}
&:active {
color: var(--color-text-warning-icon-button-square-active);
background-color: var(
--color-background-warning-icon-button-square-active
);
}
}
}
.icon-button-danger {
color: var(--color-text-danger-icon-button);
&:hover {
color: var(--color-text-danger-icon-button-hover);
}
&:active {
color: var(--color-text-danger-icon-button-active);
}
&.icon-button-square {
&:hover {
background-color: var(
--color-background-danger-icon-button-square-hover
);
}
&:active {
color: var(--color-text-danger-icon-button-square-active);
background-color: var(
--color-background-danger-icon-button-square-active
);
}
}
}
Reference in New Issue View Git Blame Copy Permalink