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

settings: Move tab-switcher out of .new-style block.

This commit is contained in:
Karl Stolley 2024-09-03 08:51:55 -05:00 committed by Tim Abbott
parent 0147578de6
commit 7674318332
3 changed files with 91 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
web/styles/app_components.css
View File

@ -261,84 +261,86 @@ input::placeholder {
}
}
}
}
/* -- tab switcher -- */
/* -- tab switcher -- */
.tab-switcher {
font-weight: initial;
margin: 2px 4px;
.tab-switcher {
font-weight: initial;
margin: 2px 4px;
display: inline-block;
.ind-tab {
display: inline-block;
width: 90px;
margin: 0 -0.5px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
padding: 3px 10px;
background-color: var(--color-background-tab-switcher-ind-tab);
cursor: pointer;
justify-content: center;
align-items: center;
&:focus {
outline: none;
}
&:not(.selected) {
border: 1px solid var(--color-border-tab-switcher-ind-tab);
}
&.first {
border-radius: 5px 0 0 5px;
border-right: 1px solid transparent;
}
&.middle {
border-right: 1px solid transparent;
}
&.last {
border-radius: 0 5px 5px 0;
}
&.selected {
position: relative;
background-color: var(
--color-background-tab-switcher-ind-tab-selected
);
color: hsl(0deg 0% 100%);
border: 1px solid var(--color-border-tab-switcher-ind-tab-selected);
z-index: 2;
}
&.disabled {
cursor: default;
color: var(--color-text-tab-switcher-ind-tab-disabled);
border-color: var(--color-border-tab-switcher-ind-tab-disabled);
}
}
&.large .ind-tab {
width: 100%;
}
&.allow-overflow {
display: flex;
.ind-tab {
display: inline-block;
width: 90px;
margin: 0 -0.5px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
padding: 3px 10px;
background-color: hsl(0deg 0% 100%);
cursor: pointer;
justify-content: center;
align-items: center;
&:focus {
outline: none;
}
&:not(.selected) {
border: 1px solid hsl(0deg 0% 80%);
}
&.first {
border-radius: 5px 0 0 5px;
border-right: 1px solid transparent;
}
&.middle {
border-right: 1px solid transparent;
}
&.last {
border-radius: 0 5px 5px 0;
}
&.selected {
position: relative;
background-color: hsl(0deg 0% 53%);
color: hsl(0deg 0% 100%);
border: 1px solid hsl(0deg 0% 47%);
z-index: 2;
}
&.disabled {
cursor: default;
color: hsl(0deg 0% 80%);
border-color: hsl(0deg 0% 87%);
}
}
&.large .ind-tab {
width: 100%;
}
&.allow-overflow {
display: flex;
.ind-tab {
display: flex;
text-overflow: initial;
white-space: initial;
vertical-align: middle;
}
text-overflow: initial;
white-space: initial;
vertical-align: middle;
}
}
}
.stream_sorter_toggle {
margin-left: auto;
}
.stream_sorter_toggle {
margin-left: auto;
}
/* -- unified overlay design component -- */

20
web/styles/app_variables.css
View File

@ -692,6 +692,14 @@
--color-background-rendered-markdown-thead: hsl(0deg 0% 93%);
--color-border-rendered-markdown-table: hsl(0deg 0% 80%);
/* Tab-switcher colors */
--color-background-tab-switcher-ind-tab: hsl(0deg 0% 100%);
--color-background-tab-switcher-ind-tab-selected: hsl(0deg 0% 53%);
--color-border-tab-switcher-ind-tab: hsl(0deg 0% 80%);
--color-border-tab-switcher-ind-tab-selected: hsl(0deg 0% 47%);
--color-text-tab-switcher-ind-tab-disabled: hsl(0deg 0% 80%);
--color-border-tab-switcher-ind-tab-disabled: hsl(0deg 0% 87%);
/* Settings table colors */
--color-border-table-striped: hsl(0deg 0% 87%);
--color-border-table-bordered: hsl(0deg 0% 87%);
@ -1121,6 +1129,18 @@
--color-background-rendered-markdown-thead: hsl(0deg 0% 0% / 50%);
--color-border-rendered-markdown-table: hsl(0deg 0% 33%);
/* Tab-switcher colors */
/* The non-selected colors here are shared with numerous other
inputs and buttons in dark theme. A refactor here would make
more generic names for those colors, and help to clean out
the huge stack of selectors in the dark theme CSS file. */
--color-background-tab-switcher-ind-tab: hsl(0deg 0% 0% / 20%);
--color-background-tab-switcher-ind-tab-selected: hsl(0deg 0% 0% / 50%);
--color-border-tab-switcher-ind-tab: hsl(0deg 0% 0% / 60%);
--color-border-tab-switcher-ind-tab-selected: hsl(0deg 0% 0% / 90%);
--color-text-tab-switcher-ind-tab-disabled: hsl(0deg 0% 42% / 90%);
--color-border-tab-switcher-ind-tab-disabled: hsl(0deg 0% 0% / 60%);
/* Settings table colors */
--color-border-table-striped: hsl(0deg 0% 0% / 20%);
--color-border-table-bordered: hsl(0deg 0% 0% / 20%);

6
web/styles/dark_theme.css
View File

@ -410,7 +410,6 @@
input[type="url"],
input[type="date"],
textarea,
.new-style .tab-switcher .ind-tab:not(.selected),
select,
.pill-container,
.user-status-content-wrapper,
@ -475,16 +474,11 @@
border-color: hsl(0deg 0% 0% / 60%);
}
.new-style .tab-switcher .ind-tab.selected,
.table-striped thead th {
background-color: hsl(0deg 0% 0% / 50%);
border-color: hsl(0deg 0% 0% / 90%);
}
.ind-tab.disabled {
color: hsl(0deg 0% 42% / 90%) !important;
}
& input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,