mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
1f2b162d0a
Our HTML sanitizer that we run bodies through before rendering strips off this class, so it's not currently working with the class set. Since this CSS is specific to the email frame, should be OK to have no class at all.
139 lines
3 KiB
Plaintext
139 lines
3 KiB
Plaintext
@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%;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|