mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 04:53:36 +00:00
26011c98fd
Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
156 lines
3.3 KiB
CSS
156 lines
3.3 KiB
CSS
.drafts-container {
|
|
position: relative;
|
|
height: 95%;
|
|
background-color: hsl(0, 0%, 100%);
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
width: 58%;
|
|
overflow: hidden;
|
|
max-width: 1200px;
|
|
max-height: 1000px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media (width < $md_min) {
|
|
height: 95%;
|
|
max-width: none;
|
|
width: 90%;
|
|
}
|
|
|
|
.drafts-header {
|
|
padding-top: 4px;
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
border-bottom: 1px solid hsl(0, 0%, 87%);
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.exit {
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: hsl(0, 0%, 67%);
|
|
cursor: pointer;
|
|
|
|
.exit-sign {
|
|
position: relative;
|
|
top: 1px;
|
|
margin-left: 3px;
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.drafts-list {
|
|
padding: 10px 25px;
|
|
overflow: auto;
|
|
|
|
.no-drafts {
|
|
display: block;
|
|
margin-top: calc(45vh - 30px - 1.5em);
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
color: hsl(0, 0%, 67%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.removed-drafts {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 1em;
|
|
color: hsl(0, 0%, 67%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.1em;
|
|
line-height: normal;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.draft-row {
|
|
padding: 5px 0;
|
|
|
|
> div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.draft-info-box {
|
|
width: 100%;
|
|
border: 1px solid hsl(0, 0%, 88%);
|
|
margin-bottom: 10px;
|
|
|
|
&.active {
|
|
outline: 2px solid hsl(215, 47%, 50%);
|
|
/* this offset ensures no gap between the blue box and the draft in active state */
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.message_row {
|
|
border: 0;
|
|
}
|
|
|
|
.messagebox-content {
|
|
grid-template-rows: auto;
|
|
grid-template-columns: auto max-content;
|
|
padding: 10px;
|
|
|
|
.message_content {
|
|
grid-column: 1 / 2;
|
|
}
|
|
|
|
.message_top_line {
|
|
grid-column: 2 / 3;
|
|
}
|
|
}
|
|
|
|
.messagebox {
|
|
cursor: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.draft_controls {
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
|
|
[data-tippy-root] {
|
|
width: max-content;
|
|
word-wrap: unset;
|
|
}
|
|
|
|
.restore-draft {
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
color: hsl(170, 48%, 54%);
|
|
opacity: 0.7;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.delete-draft {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
color: hsl(357, 52%, 57%);
|
|
opacity: 0.7;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|