paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 21:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

buttons: Simplify color declarations attached to .button.

Browse Source
This commit is contained in:
Karl Stolley
2024-09-03 14:45:18 -05:00
committed by Tim Abbott
parent dca1ecf3b0
commit df3d3197ff
5 changed files with 36 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/styles/app_components.css
View File

@@ -120,10 +120,10 @@ input::placeholder {
line-height: normal;
text-align: center;
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background-zulip-button);
color: inherit;
outline: none;
border: 1px solid hsl(0deg 0% 80%);
border: 1px solid var(--color-border-zulip-button);
border-radius: 2px;
box-shadow: none;
@@ -171,14 +171,18 @@ input::placeholder {
}
&:hover,
&:focus {
border-color: hsl(0deg 0% 60%);
&:focus,
&:active {
border-color: var(--color-border-zulip-button-interactive);
}
&:hover {
background-color: var(--color-background-zulip-button-hover);
}
&:active {
border-color: hsl(0deg 0% 60%);
color: inherit;
background-color: hsl(0deg 0% 95%);
background-color: var(--color-background-zulip-button-active);
}
&.add-subscription-button {
@@ -241,11 +245,11 @@ input::placeholder {
&:disabled {
cursor: not-allowed;
filter: saturate(0);
background-color: hsl(0deg 0% 93%);
background-color: var(--color-background-zulip-button-disabled);
color: hsl(0deg 3% 52%);
&:hover {
background-color: hsl(0deg 0% 93%);
background-color: var(--color-background-zulip-button-disabled);
color: hsl(156deg 39% 54%);
border-color: hsl(156deg 39% 77%);
}

22
web/styles/app_variables.css
View File

@@ -538,6 +538,7 @@
--color-message-header-icon-interactive: hsl(0deg 0% 0%);
--color-background: hsl(0deg 0% 94%);
--color-background-widget-input: hsl(0deg 0% 100%);
--color-background-widget-button: hsl(0deg 0% 100%);
--color-background-navbar: hsl(0deg 0% 97%);
--color-background-active-narrow-filter: hsl(202deg 56% 91%);
--color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
@@ -920,6 +921,14 @@
since the modal is also used on billing pages and
this file is not imported on billing pages. */
/* Zulip-style button colors. */
--color-background-zulip-button: hsl(0deg 0% 100%);
--color-background-zulip-button-hover: var(--color-background-zulip-button);
--color-background-zulip-button-active: hsl(0deg 0% 95%);
--color-background-zulip-button-disabled: hsl(0deg 0% 93%);
--color-border-zulip-button: hsl(0deg 0% 80%);
--color-border-zulip-button-interactive: hsl(0deg 0% 60%);
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 93%);
--color-background-emoji-picker-popover-tab-item-active: hsl(
@@ -962,6 +971,7 @@
--color-message-list-border: hsl(0deg 0% 0% / 40%);
--color-background: hsl(0deg 0% 11%);
--color-background-widget-input: hsl(225deg 6% 10%);
--color-background-widget-button: hsl(0deg 0% 0% / 20%);
--color-background-navbar: hsl(0deg 0% 13%);
--color-background-active-narrow-filter: hsl(200deg 17% 18%);
--color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
@@ -1332,6 +1342,18 @@
--color-exit-button-background: hsl(226deg 1% 30% / 50%);
--color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%);
/* Zulip-style button colors. */
--color-background-zulip-button: hsl(0deg 0% 0% / 20%);
--color-background-zulip-button-hover: hsl(0deg 0% 0% / 15%);
--color-background-zulip-button-active: var(
--color-background-zulip-button-hover
);
--color-background-zulip-button-disabled: var(
--color-background-zulip-button
);
--color-border-zulip-button: hsl(0deg 0% 0% / 60%);
--color-border-zulip-button-interactive: var(--color-border-zulip-button);
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
--color-background-emoji-picker-popover-tab-item-active: hsl(

27
web/styles/dark_theme.css
View File

@@ -362,29 +362,6 @@
opacity: 0.5;
}
.rendered_markdown button,
.new-style .button {
background-color: hsl(0deg 0% 0% / 20%);
&:not(
.sea-green,
.btn-danger,
.btn-warning,
.poll-vote,
button.poll-option,
button.add-task
) {
border-color: hsl(0deg 0% 0% / 60%);
color: inherit;
}
&:hover,
&:focus,
&:active {
background-color: hsl(0deg 0% 0% / 15%);
}
}
.rendered_markdown .message_inline_image {
background: hsl(0deg 0% 100% / 3%);
@@ -457,10 +434,6 @@
}
}
.new-style .button.no-style {
background-color: transparent;
}
.create_user_group_plus_button,
.create_stream_plus_button {
color: hsl(0deg 0% 100%);

5
web/styles/settings.css
View File

@@ -501,12 +501,7 @@ input[type="checkbox"] {
.language_selection_widget .language_selection_button {
text-decoration: none;
color: hsl(0deg 0% 20%);
min-width: 0;
.fa.fa-pencil {
margin-left: 5px;
}
}
#user_enter_sends_label kbd,

4
web/styles/widgets.css
View File

@@ -163,7 +163,7 @@
min-width: 25px;
height: 25px;
font-size: 13px;
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background-widget-button);
&:hover {
border-color: hsl(156deg 30% 50%);
@@ -205,7 +205,7 @@ button {
width: max-content;
flex: 0 0 auto;
border-radius: 3px;
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background-widget-button);
padding: 4px;
padding-left: 14px;
padding-right: 14px;