mirror of
https://github.com/zulip/zulip.git
synced 2026-07-12 21:04:41 +08:00
ddb965110f
The antialiasing decisions we made for the webapp should be constant over the entire page, not limited to particular subsections or themes. If we wanted antialiasing, we should do it on the entire page, not individual random widgets. But it's not clear we actually want to do it on the entire page. The `-moz-osx-font-smoothing: grayscale` setting now happens by default in OSX Mojave (40% world market share right now and growing), so there's no reason to override it. And without retina displays, generally, subpixel rendering provides better results than antialiasing (which overrides subpixel rendering). Thanks to Anders Kaseorg for advice on this issue.
154 lines
2.6 KiB
SCSS
154 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;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|