mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 13:03:29 +00:00
fd1d4e101b
There was a bug where information overlay was not closing on clicking
"x" when some text was selected. This was due to document.getSelection().type
returning "Range" and we do not close the modal in that case as per the code
added in 081d74141b.
As the "x" icon was button, the document.getSelection().type was
still returning "Range" for the text selected, but when the "x"
icon is inside a span, as in settings overlay, clicking on "x"
deselects the already selected text and selection type is not
"Range" and thus modal is closed.
This commit also improves the vertical alignment of "x".
Fixes #20645.
133 lines
2.5 KiB
CSS
133 lines
2.5 KiB
CSS
.informational-overlays {
|
|
.overlay-content {
|
|
/* because zoom breaks at 525px perhaps due to rounding errors, so add a
|
|
trivial amount of width so it doesn't break. */
|
|
width: 550px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: calc((30vh - 50px) / 2);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.overlay-tabs {
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
|
|
|
|
.tab-switcher {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.exit {
|
|
float: right;
|
|
font-size: 1.5rem;
|
|
color: hsl(0, 0%, 67%);
|
|
font-weight: 600;
|
|
margin: 0 15px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.overlay-modal {
|
|
padding-bottom: 10px;
|
|
|
|
.modal-header h3 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.modal-body {
|
|
height: 70vh;
|
|
text-align: center;
|
|
outline: none;
|
|
|
|
.help-table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
th {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
td.operator {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
.hotkeys_table {
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
display: table;
|
|
|
|
td.definition {
|
|
/* keeps dividing line at same width for all tables in model. */
|
|
width: calc(50% - 11px);
|
|
text-align: right;
|
|
}
|
|
|
|
.hotkey {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.small_hotkey {
|
|
font-size: 0.9em !important;
|
|
line-height: 12px;
|
|
|
|
kbd {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
.arrow-key {
|
|
font-size: 1.36em;
|
|
line-height: 1;
|
|
padding: 0 0.2em 0.2em;
|
|
}
|
|
|
|
th {
|
|
width: 245px;
|
|
text-align: center;
|
|
/* aligns table name with dividing line */
|
|
}
|
|
|
|
td:not(.definition) {
|
|
text-align: left;
|
|
white-space: normal;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#keyboard-shortcuts table {
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
@media only screen and (width < $md_min) {
|
|
.informational-overlays {
|
|
.overlay-content {
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.tab-switcher {
|
|
display: flex;
|
|
|
|
&.large .ind-tab {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.table.table-condensed.table-striped {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hotkeys_table {
|
|
width: 100%;
|
|
display: table;
|
|
}
|
|
}
|
|
}
|