mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 13:33:24 +00:00
d93f5b2977
Cleanup single message template moving CSS rules for box shadow of a private message stream inside stylesheets. For any messagebox inside of a `.private-message` element, the box shadow is set using the class. In cases of normal streams, the box shadow is set using inline style since we cannot have different classes for each color. Changes made in drafts.scss are to keep the current style of not having the left border. Setting style using classes, this rule had to be overridden.
155 lines
2.6 KiB
SCSS
155 lines
2.6 KiB
SCSS
|
|
.drafts-container {
|
|
position: relative;
|
|
height: 95%;
|
|
background-color: hsl(0, 0%, 100%);
|
|
border-radius: 4px;
|
|
padding: 0px;
|
|
width: 58%;
|
|
overflow: hidden;
|
|
max-width: 1200px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
.drafts-header {
|
|
padding: {
|
|
top: 4px;
|
|
bottom: 8px;
|
|
}
|
|
text-align: center;
|
|
border-bottom: 1px solid hsl(0, 0%, 87%);
|
|
}
|
|
|
|
.drafts-header h1 {
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.drafts-container .exit {
|
|
font-weight: 400;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: hsl(0, 0%, 67%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drafts-container .exit-sign {
|
|
position: relative;
|
|
top: 3px;
|
|
margin-left: 3px;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drafts-list {
|
|
overflow: auto;
|
|
height: calc(100% - 55px);
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.drafts-list .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;
|
|
}
|
|
|
|
.drafts-list .removed-drafts {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 1em;
|
|
color: hsl(0, 0%, 67%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.draft-row {
|
|
padding: 5px 25px;
|
|
}
|
|
|
|
.draft-info-box.active {
|
|
outline: 2px solid hsl(215, 47%, 50%);
|
|
}
|
|
|
|
.draft-row > div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.draft-row .draft-info-box {
|
|
width: 100%;
|
|
border: 1px solid hsl(0, 0%, 88%);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.draft-info-box .message_row {
|
|
border: 0;
|
|
}
|
|
|
|
.draft-info-box .messagebox {
|
|
cursor: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.draft-info-box .message_content {
|
|
line-height: 1;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.draft-row .draft-info-box .draft_controls {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 9px;
|
|
right: -80px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.draft_controls .restore-draft {
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
color: hsl(170, 48%, 54%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.draft_controls .restore-draft:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.draft_controls .delete-draft {
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
color: hsl(357, 52%, 57%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.draft_controls .delete-draft:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (max-width: 1130px) {
|
|
.drafts-container {
|
|
max-width: 60%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.draft-row .draft-info-box .draft_controls {
|
|
right: 0px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
#draft_overlay .drafts-container {
|
|
height: 95%;
|
|
max-width: none;
|
|
width: 90%;
|
|
}
|
|
}
|