Mailspring/static/email-frame.less
Ben Gotow aa7ef91b0b fix(files): When download mode is “manual” prompt about inline attachments
Summary:
When you have your "Download attachments for new mail" setting set
to "manually", inline images always appear broken with no explanation.

This patch listens for the image load to fail and displays a button which
queues the fetchFile task on click. This seemed like the best approach because
it doesn't slow down the loading of the message with more fstats / lookups.
(Seeing if the file has already been downloaded is an async operation)

Test Plan: No specs atm

Reviewers: evan, juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D3313
2016-10-03 11:22:44 -07:00

133 lines
2.9 KiB
Text

@import 'variables/ui-variables';
@import 'ui-variables';
.ignore-in-parent-frame {
// ----- Font Families -----
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 200;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Thin.otf');
}
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 300;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Blond.otf');
}
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 400;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Normal.otf');
}
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 500;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Medium.otf');
}
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 600;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-SemiBold.otf');
}
// Pro-SemiBold doesn't render emoji properly. Override the emjoi unicode
// block so that it uses the "Normal" weight even at font-weight:600.
@font-face {
font-family: 'Nylas-Pro';
font-style: normal;
font-weight: 600;
src: url('nylas://nylas-private-fonts/fonts/Nylas-Pro-Normal.otf'), Helvetica, sans-serif;
unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
}
html, body {
font-family: "Nylas-Pro", "Helvetica", "Lucidia Grande", sans-serif;
font-size: 14.5px;
line-height: 1.5;
color: @text-color;
background-color: transparent !important;
border: 0;
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-text-size-adjust: auto;
word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;
}
strong, b, .bold {
font-weight: 600;
}
body {
padding: 0;
margin: auto;
max-width: 840px;
overflow-y: hidden;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
a {
color: @text-color-link;
}
a:hover {
color: @text-color-link-hover;
}
a:visited {
color: darken(@text-color-link, 10%);
}
a img {
border-bottom: 0;
}
body.heightDetermined {
overflow-y: hidden;
}
div,pre {
max-width: 100%;
}
img {
border: 0;
}
search-match, .search-match {
background: @text-color-search-match;
border-radius: @border-radius-base;
box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.25);
&.current-match {
background: @text-color-search-current-match;
}
}
.inline-download-prompt {
border: solid 1px rgba(0, 0, 0, 0.09);
border-radius: 2px;
color: @text-color;
background: @background-off-primary;
margin: 4px 0;
padding: 4px 8px;
cursor: pointer;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.inline-download-prompt:hover {
cursor: pointer;
color: @text-color;
border: solid 1px rgba(0, 0, 0, 0.16);
}
}