Remove uneeded ConversationWebView, HTML and CSS code.
* src/client/conversation-viewer/conversation-web-view.vala (ConversationWebView::ConversationWebView): Don't load message.html since ConversationMessage now just loads the message HTML directly. (ConversationWebView::on_load_finished): Don't load container DIV and inline icons since GTK-based chrome has mostly replaced HTML chrome. (conversation_icon_color, container, scroll_reset, set_icon_src, set_attachment_src): Removed, no longer needed. (ConversationWebView::get_preferred_size, ConversationWebView::get_preferred_height): Added to ensure GTK gets a useful min/preferred height for the widget. * theming/message-viewer.css: Remove rules used for now-obsolete HTML chrome - headers, attachments, etc. Added rules to ensure HTML and BODY element's heights and scrollbars are appropriate for use in this context. * theming/message-viewer.html: Removed, no longer needed.
This commit is contained in:
Michael James Gratton
parent
b29d83e546
commit
103619c596
4 changed files with 141 additions and 760 deletions
|
|
@ -461,8 +461,9 @@ public class ConversationViewer : Gtk.Stack {
|
|||
ordered_matches.sort((a, b) => a.length - b.length);
|
||||
|
||||
if (!cancellable.is_cancelled()) {
|
||||
foreach(string match in ordered_matches)
|
||||
foreach(string match in ordered_matches) {
|
||||
//web_view.mark_text_matches(match, false, 0);
|
||||
}
|
||||
|
||||
//web_view.set_highlight_text_matches(true);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
/* Copyright 2016 Software Freedom Conservancy Inc.
|
||||
/*
|
||||
* Copyright 2016 Software Freedom Conservancy Inc.
|
||||
* Copyright 2016 Michael Gratton <mike@vee.net>
|
||||
*
|
||||
* This software is licensed under the GNU Lesser General Public License
|
||||
* (version 2.1 or later). See the COPYING file in this distribution.
|
||||
|
|
@ -13,10 +15,6 @@ public class ConversationWebView : StylishWebView {
|
|||
private const string USER_CSS = "user-message.css";
|
||||
private const string STYLE_NAME = "STYLE";
|
||||
private const string PREVENT_HIDE_STYLE = "nohide";
|
||||
private Gdk.RGBA conversation_icon_color;
|
||||
|
||||
// HTML element that contains message DIVs.
|
||||
public WebKit.DOM.HTMLDivElement? container { get; private set; default = null; }
|
||||
|
||||
public string allow_prefix { get; private set; default = ""; }
|
||||
|
||||
|
|
@ -54,11 +52,6 @@ public class ConversationWebView : StylishWebView {
|
|||
|
||||
GearyApplication.instance.config.bind(Configuration.CONVERSATION_VIEWER_ZOOM_KEY, this, "zoom_level_wrap");
|
||||
notify["zoom-level"].connect(() => { zoom_level_wrap = zoom_level; });
|
||||
|
||||
// Load the HTML into WebKit.
|
||||
// Note: load_finished signal MUST be hooked up before this call.
|
||||
string html_text = GearyApplication.instance.read_theme_file("message-viewer.html") ?? "";
|
||||
load_string(html_text, "text/html", "UTF8", "");
|
||||
}
|
||||
|
||||
public override bool query_tooltip(int x, int y, bool keyboard_tooltip, Gtk.Tooltip tooltip) {
|
||||
|
|
@ -94,12 +87,34 @@ public class ConversationWebView : StylishWebView {
|
|||
public void show_element_by_id(string element_id) throws Error {
|
||||
get_dom_document().get_element_by_id(element_id).set_attribute("style", "display:block");
|
||||
}
|
||||
|
||||
// Scrolls back up to the top.
|
||||
public void scroll_reset() {
|
||||
get_dom_document().get_default_view().scroll(0, 0);
|
||||
|
||||
// Overridden to get the correct height from get_preferred_height.
|
||||
public new void get_preferred_size(out Gtk.Requisition minimum_size,
|
||||
out Gtk.Requisition natural_size) {
|
||||
base.get_preferred_size(out minimum_size, out natural_size);
|
||||
|
||||
int minimum_height = 0;
|
||||
int natural_height = 0;
|
||||
get_preferred_height(out minimum_height, out natural_height);
|
||||
|
||||
minimum_size.height = minimum_height;
|
||||
natural_size.height = natural_height;
|
||||
}
|
||||
|
||||
|
||||
// Overridden since WebKitGTK+ 2.4.10 at least doesn't want to
|
||||
// report a useful height. In combination with the rules from
|
||||
// theming/message-viewer.css we can get an accurate idea of
|
||||
// the actual height of the content from the BODY element, but
|
||||
// only once loaded.
|
||||
public override void get_preferred_height(out int minimum_height,
|
||||
out int natural_height) {
|
||||
int preferred_height = 0;
|
||||
if (load_status == WebKit.LoadStatus.FINISHED) {
|
||||
preferred_height = (int) get_dom_document().get_body().offset_height;
|
||||
}
|
||||
minimum_height = natural_height = preferred_height;
|
||||
}
|
||||
|
||||
private void on_resource_request_starting(WebKit.WebFrame web_frame,
|
||||
WebKit.WebResource web_resource, WebKit.NetworkRequest request,
|
||||
WebKit.NetworkResponse? response) {
|
||||
|
|
@ -144,21 +159,6 @@ public class ConversationWebView : StylishWebView {
|
|||
|
||||
on_document_font_changed();
|
||||
load_user_style();
|
||||
|
||||
// Grab the HTML container.
|
||||
WebKit.DOM.Element? _container = get_dom_document().get_element_by_id("message_container");
|
||||
assert(_container != null);
|
||||
container = _container as WebKit.DOM.HTMLDivElement;
|
||||
assert(container != null);
|
||||
|
||||
conversation_icon_color.parse("#888888");
|
||||
// Load the icons.
|
||||
set_icon_src("#email_template .menu .icon", "go-down-symbolic");
|
||||
set_icon_src("#email_template .starred .icon", "starred-symbolic");
|
||||
set_icon_src("#email_template .unstarred .icon", "non-starred-symbolic");
|
||||
set_icon_src("#email_template .attachment.icon", "mail-attachment-symbolic");
|
||||
set_icon_src("#email_template .close_show_images", "close-symbolic");
|
||||
set_icon_src("#link_warning_template .close_link_warning", "close-symbolic");
|
||||
}
|
||||
|
||||
private void on_document_font_changed() {
|
||||
|
|
@ -234,74 +234,6 @@ public class ConversationWebView : StylishWebView {
|
|||
}
|
||||
}
|
||||
|
||||
private void set_icon_src(string selector, string icon_name) {
|
||||
try {
|
||||
// Load icon.
|
||||
uint8[]? icon_content = null;
|
||||
Gdk.Pixbuf? pixbuf = IconFactory.instance.load_symbolic_colored(icon_name, 16,
|
||||
conversation_icon_color);
|
||||
if (pixbuf != null)
|
||||
pixbuf.save_to_buffer(out icon_content, "png"); // Load as PNG.
|
||||
|
||||
if (icon_content == null || icon_content.length == 0)
|
||||
return;
|
||||
|
||||
// Save length before transferring ownership (which frees the array)
|
||||
int icon_length = icon_content.length;
|
||||
Geary.Memory.ByteBuffer buffer = new Geary.Memory.ByteBuffer.take((owned) icon_content,
|
||||
icon_length);
|
||||
|
||||
// Then set the source to a data url.
|
||||
WebKit.DOM.HTMLImageElement img = Util.DOM.select(get_dom_document(), selector)
|
||||
as WebKit.DOM.HTMLImageElement;
|
||||
img.set_attribute("src", Util.DOM.assemble_data_uri("image/png", buffer));
|
||||
} catch (Error error) {
|
||||
warning("Failed to load icon '%s': %s", icon_name, error.message);
|
||||
}
|
||||
}
|
||||
|
||||
public void set_attachment_src(WebKit.DOM.HTMLImageElement img, Geary.Mime.ContentType content_type,
|
||||
string filename, int maxwidth, int maxheight = -1) {
|
||||
if( maxheight == -1 ){
|
||||
maxheight = maxwidth;
|
||||
}
|
||||
|
||||
try {
|
||||
// If the file is an image, use it. Otherwise get the icon for this mime_type.
|
||||
string gio_content_type = ContentType.from_mime_type(content_type.get_mime_type());
|
||||
|
||||
Gdk.Pixbuf pixbuf;
|
||||
if (content_type.has_media_type("image")) {
|
||||
// Get a thumbnail for the image.
|
||||
// TODO Generate and save the thumbnail when extracting the attachments rather than
|
||||
// when showing them in the viewer.
|
||||
img.get_class_list().add("thumbnail");
|
||||
pixbuf = new Gdk.Pixbuf.from_file_at_scale(filename, maxwidth, maxheight, true);
|
||||
pixbuf = pixbuf.apply_embedded_orientation();
|
||||
} else {
|
||||
// Load the icon for this mime type.
|
||||
ThemedIcon icon = ContentType.get_icon(gio_content_type) as ThemedIcon;
|
||||
string icon_filename = IconFactory.instance.lookup_icon(icon.names[0], maxwidth)
|
||||
.get_filename();
|
||||
pixbuf = new Gdk.Pixbuf.from_file_at_scale(icon_filename, maxwidth, maxheight, true);
|
||||
}
|
||||
|
||||
// convert to PNG and assemble IMG src as a data: URI
|
||||
uint8[] content;
|
||||
pixbuf.save_to_buffer(out content, "png");
|
||||
|
||||
// Then set the source to a data url.
|
||||
// Save length before transferring ownership (which frees the array)
|
||||
int content_length = content.length;
|
||||
Geary.Memory.Buffer buffer = new Geary.Memory.ByteBuffer.take((owned) content,
|
||||
content_length);
|
||||
|
||||
img.set_attribute("src", Util.DOM.assemble_data_uri("image/png", buffer));
|
||||
} catch (Error error) {
|
||||
warning("Failed to load image '%s': %s", filename, error.message);
|
||||
}
|
||||
}
|
||||
|
||||
private bool on_navigation_policy_decision_requested(WebKit.WebFrame frame,
|
||||
WebKit.NetworkRequest request, WebKit.WebNavigationAction navigation_action,
|
||||
WebKit.WebPolicyDecision policy_decision) {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
/**
|
||||
* Background colors associated with received emails:
|
||||
* recv-normal: white
|
||||
* recv-quoted: #e8e8e8
|
||||
* recv-collapsed: #f5f5f5
|
||||
*
|
||||
* Background colors associated with sent emails:
|
||||
* sent-normal: white
|
||||
* sent-quoted: #e8e8e8
|
||||
* sent-collapsed: #f5f5f5
|
||||
* Style that is inserted into the message after it is loaded.
|
||||
*/
|
||||
@media print {
|
||||
|
||||
body {
|
||||
background-color: white !important;
|
||||
}
|
||||
.avatar, .button, .starred {
|
||||
display: none !important;
|
||||
}
|
||||
.email {
|
||||
display: none !important;
|
||||
}
|
||||
.email.print {
|
||||
display: inline-block !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
.email.print .body {
|
||||
display: block !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
.email.print .preview {
|
||||
display: none !important;
|
||||
}
|
||||
/*
|
||||
* General HTML style.
|
||||
*/
|
||||
|
||||
html, body {
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
|
||||
/* Trigger CSS 2.1 § 10.6.7 to get a shrink-wrapped height.
|
||||
See also ConversationWebView.get_preferred_height */
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
bottom: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
/* Disable viewport scrollbbars */
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
color: black;
|
||||
background-color: white;
|
||||
font: caption;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* By default, tables reset the font properties to "normal" */
|
||||
|
|
@ -39,14 +36,6 @@ table {
|
|||
font-size: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font: caption;
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #08c;
|
||||
}
|
||||
|
|
@ -62,15 +51,6 @@ hr {
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.body, .header, .preview {
|
||||
-webkit-user-select: auto;
|
||||
-webkit-user-drag: auto;
|
||||
}
|
||||
.shower, .hider {
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px transparent solid;
|
||||
border-radius: 2.5px;
|
||||
|
|
@ -93,140 +73,45 @@ hr {
|
|||
box-shadow: inset 0px 0px 1px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.email, .composer_embed {
|
||||
border: 1px rgba(0,0,0,1) solid;
|
||||
background-color: white;/* recv-normal */
|
||||
color: black;
|
||||
box-shadow: 0 3px 11px rgba(0,0,0,1);
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
width: 100%;
|
||||
box-sizing:border-box;
|
||||
margin-top: 16px;
|
||||
blockquote {
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 0;
|
||||
border-left: 3px #aaa solid;
|
||||
}
|
||||
|
||||
.composer_embed {
|
||||
height: 300px;
|
||||
}
|
||||
/**
|
||||
* Message chrome style.
|
||||
*/
|
||||
|
||||
.email.sent {
|
||||
background-color: white;/* sent-normal */
|
||||
}
|
||||
|
||||
.email .starred {
|
||||
display: none;
|
||||
}
|
||||
.email .unstarred {
|
||||
display: block;
|
||||
}
|
||||
.email.starred .starred {
|
||||
display: block;
|
||||
}
|
||||
.email.starred .unstarred {
|
||||
display: none;
|
||||
}
|
||||
.email.read, #multiple_messages .email, .composer_embed {
|
||||
border-color: rgba(0,0,0,0.4);
|
||||
box-shadow: 0 3px 11px rgba(0,0,0,0.21);
|
||||
}
|
||||
.email.animate {
|
||||
-webkit-transition: border-color 3s ease;
|
||||
-webkit-transition: box-shadow 3s ease;
|
||||
}
|
||||
|
||||
.email .email_warning {
|
||||
display: none;
|
||||
padding: 1em;
|
||||
background-color: #fcc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email_box {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 100% !important;
|
||||
}
|
||||
.email_container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.email_container .header_container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.email_container .header_container a:hover * {
|
||||
color: #08c;
|
||||
}
|
||||
|
||||
.email_container .header_container .button_bar {
|
||||
float: right;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.email_container .header_container .button_bar > .button {
|
||||
float: left;
|
||||
}
|
||||
.email_container .header_container .button_bar > .button > .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.email_container .header_container .preview {
|
||||
font-size: 80%;
|
||||
.signature {
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar {
|
||||
display: none;
|
||||
image-rendering: optimizeQuality;
|
||||
}
|
||||
|
||||
.avatar[src^=file], .avatar[src^=http] {
|
||||
display: inline;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
body:not(.nohide) .email.hide .header_container .avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
border-radius: 2.5px;
|
||||
.signature a,
|
||||
.quote_container a {
|
||||
color: #5fb2e7;
|
||||
}
|
||||
|
||||
.email .body {
|
||||
border-top: 1px solid #999;
|
||||
margin: 16px;
|
||||
margin-top: 0;
|
||||
padding-top: 16px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position: relative; /* in case anything inside is positioned */
|
||||
}
|
||||
@media screen {
|
||||
#part_container, .preview {
|
||||
-webkit-user-select: auto;
|
||||
-webkit-user-drag: auto;
|
||||
}
|
||||
.shower, .hider {
|
||||
-webkit-user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.email .remote_images {
|
||||
display: none;
|
||||
margin: 0 16px;
|
||||
border: 1px solid #999;
|
||||
border-bottom: none;
|
||||
padding: 1em;
|
||||
background: #ffc;
|
||||
}
|
||||
|
||||
.email .remote_images .close_show_images {
|
||||
float: right;
|
||||
margin-top: -0.67em;
|
||||
margin-right: -0.67em;
|
||||
}
|
||||
|
||||
.email .replaced_inline_image {
|
||||
max-width: 100%;
|
||||
.replaced_inline_image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.email .link_warning {
|
||||
.link_warning {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
margin-top: -1em;
|
||||
|
|
@ -237,476 +122,102 @@ body:not(.nohide) .email.hide .header_container .avatar {
|
|||
/* Reset styles */
|
||||
font: caption;
|
||||
color: black;
|
||||
}
|
||||
.email .link_warning a {
|
||||
}
|
||||
.link_warning a {
|
||||
color: #08c;
|
||||
}
|
||||
.email .link_warning span {
|
||||
}
|
||||
.link_warning span {
|
||||
display: block;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.email .link_warning .close_link_warning {
|
||||
}
|
||||
.link_warning .close_link_warning {
|
||||
float: right;
|
||||
margin-top: -0.67em;
|
||||
margin-right: -0.67em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen {
|
||||
|
||||
body {
|
||||
background-color: #ccc !important;
|
||||
}
|
||||
body:not(.nohide) .email.hide,
|
||||
body:not(.nohide) .email .email.hide {
|
||||
background-color: #f5f5f5;/* recv-collapsed */
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.12);
|
||||
}
|
||||
body:not(.nohide) .email.sent.hide,
|
||||
body:not(.nohide) .email.sent .email.hide {
|
||||
background-color: #f5f5f5;/* sent-collapsed */
|
||||
}
|
||||
body:not(.nohide) .email.hide .body,
|
||||
body:not(.nohide) .email.hide > .attachment_container,
|
||||
.email:not(.hide) .header_container .preview,
|
||||
body.nohide .email .header_container .preview,
|
||||
body:not(.nohide) .email.hide .email {
|
||||
display: none;
|
||||
}
|
||||
.email:not(.hide) .email_warning.show,
|
||||
body:not(.nohide) .email.hide .header_container .preview {
|
||||
display: block;
|
||||
}
|
||||
body:not(.nohide) .email:not(:only-of-type) .header_container,
|
||||
body:not(.nohide) .email .email .header_container {
|
||||
cursor: pointer;
|
||||
}
|
||||
.email:not(.hide) .header .field .value,
|
||||
body.nohide .email .header .field .value {
|
||||
cursor: auto;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header {
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field {
|
||||
display: inline;
|
||||
margin-right: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field:not(:first-child) {
|
||||
display: inline-block;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field:not(.important),
|
||||
body:not(.nohide) .email.hide .header .field .title {
|
||||
display: none;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field .value {
|
||||
margin-left: 0;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field .not_hidden_only,
|
||||
.email:not(.hide) .header .field .hidden_only,
|
||||
body.nohide .email .header .field .hidden_only {
|
||||
display: none;
|
||||
}
|
||||
body:not(.nohide) .email.hide .header .field a {
|
||||
pointer-events: none;
|
||||
}
|
||||
.email:not(.hide) .remote_images.show,
|
||||
body.nohide .email .remote_images.show {
|
||||
display: block;
|
||||
}
|
||||
body:not(.nohide) .email.compressed {
|
||||
margin-top: -1px;
|
||||
height: 10px;
|
||||
}
|
||||
body:not(.nohide) .email.compressed + .email {
|
||||
margin-top: -1px;
|
||||
}
|
||||
body:not(.nohide) .compressed .email_container {
|
||||
overflow: hidden;
|
||||
display: none
|
||||
}
|
||||
body:not(.nohide) .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed + .compressed {
|
||||
display:none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.email .compressed_note {
|
||||
text-align: center;
|
||||
height: 0;
|
||||
}
|
||||
.email .compressed_note > span {
|
||||
display: none;
|
||||
padding: 0px 10px;
|
||||
background-color: #f5f5f5;/* recv-collapsed */
|
||||
position: relative;
|
||||
cursor: hand;
|
||||
}
|
||||
.email.sent .compressed_note > span {
|
||||
background-color: #f5f5f5;/* sent-collapsed */
|
||||
}
|
||||
body.nohide .email .compressed_note > span {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.email .email {
|
||||
box-shadow: none;
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
border-top: 1px rgba(0,0,0,0.4) solid;
|
||||
background-color: white;/* recv-normal */
|
||||
}
|
||||
.email.sent .email {
|
||||
background-color: white;/* sent-normal */
|
||||
}
|
||||
.email .email .email_container .menu,
|
||||
.email .email .email_container .starred,
|
||||
.email .email .email_container .unstarred {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.email:not(.attachment) .attachment.icon {
|
||||
display: none;
|
||||
}
|
||||
.email .header_container .attachment.icon {
|
||||
float: right;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.email > .attachment_container {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.email > .attachment_container > .top_border {
|
||||
border-bottom: 1px solid #aaa;
|
||||
height: 10px;
|
||||
margin: 0 16px 5px;
|
||||
}
|
||||
.email > .email + .attachment_container .top_border{
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.email > .attachment_container > .attachment {
|
||||
margin: 10px 10px 0 10px;
|
||||
padding: 2px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.email > .attachment_container > .attachment:hover,
|
||||
.email > .attachment_container > .attachment:active {
|
||||
border-color: rgba(0,0,0,0.18);
|
||||
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.email > .attachment_container > .attachment:active {
|
||||
padding: 3px 1px 1px 3px;
|
||||
border-color: rgba(0,0,0,0.20);
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
box-shadow: inset 0px 0px 2px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.email > .attachment_container > .attachment .preview {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.email > .attachment_container > .attachment .preview img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
.email > .attachment_container > .attachment .preview .thumbnail {
|
||||
border: 1px solid #999;
|
||||
box-shadow: 0 0 5px #b8b8b8;
|
||||
background-size: 16px 16px;
|
||||
background-position:0 0, 8px 0, 8px -8px, 0px 8px;
|
||||
}
|
||||
.email > .attachment_container > .attachment:hover .preview .thumbnail {
|
||||
background-image:
|
||||
-webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent),
|
||||
-webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent),
|
||||
-webkit-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%),
|
||||
-webkit-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
|
||||
}
|
||||
.email > .attachment_container > .attachment .info {
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.email > .attachment_container > .attachment .info > :not(.filename) {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.header {
|
||||
overflow: hidden;
|
||||
}
|
||||
.header .field {
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
font-size: 90%;
|
||||
}
|
||||
.header .field .title,
|
||||
.header .field .value {
|
||||
float: left;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.header .field .title {
|
||||
width: 5em;
|
||||
text-align: right;
|
||||
padding-right: 7px;
|
||||
color: #777;
|
||||
position: absolute;
|
||||
}
|
||||
.header .field .value {
|
||||
color: black;
|
||||
margin-left: 5.25em;
|
||||
max-height: 5em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.header .field .value a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
.header .field.important .address_name {
|
||||
font-weight: bold;
|
||||
}
|
||||
.header .field .address_value {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.geary_spacer {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.signature {
|
||||
color: #777;
|
||||
display: inline;
|
||||
}
|
||||
.signature a,
|
||||
.quote_container a {
|
||||
color: #5fb2e7;
|
||||
}
|
||||
|
||||
.quote_container {
|
||||
.quote_container {
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
padding: 12px;
|
||||
color: #303030;
|
||||
background-color: #e8e8e8;/* recv-quoted */
|
||||
border-radius: 4px;
|
||||
}
|
||||
.quote_container .quote {
|
||||
}
|
||||
.quote_container .quote {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable .quote {
|
||||
max-height: 80px;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable.show .quote {
|
||||
}
|
||||
.quote_container.controllable .quote {
|
||||
max-height: 6em;
|
||||
}
|
||||
.quote_container.controllable.show .quote {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
.email.sent .quote_container {
|
||||
.sent .quote_container {
|
||||
background-color: #e8e8e8;/* sent-quoted */
|
||||
}
|
||||
}
|
||||
|
||||
.quote_container > .shower,
|
||||
.quote_container > .hider {
|
||||
.quote_container > .shower,
|
||||
.quote_container > .hider {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -7px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
.quote_container > .shower > input,
|
||||
.quote_container > .hider > input {
|
||||
}
|
||||
|
||||
.quote_container > .shower > input,
|
||||
.quote_container > .hider > input {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
padding: 0;
|
||||
font-size: 7px; /* Absolute size in pixels for graphics */
|
||||
color: #888;
|
||||
}
|
||||
.quote_container > .shower:hover > input,
|
||||
.quote_container > .hider:hover > input {
|
||||
}
|
||||
.quote_container > .shower:hover > input,
|
||||
.quote_container > .hider:hover > input {
|
||||
color: #000;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable {
|
||||
}
|
||||
|
||||
.quote_container.controllable {
|
||||
margin-bottom: 7px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable.show {
|
||||
}
|
||||
.quote_container.controllable.show {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable > .shower {
|
||||
}
|
||||
.quote_container.controllable > .shower {
|
||||
display: block;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable.show > .shower {
|
||||
}
|
||||
.quote_container.controllable.show > .shower {
|
||||
display: none;
|
||||
}
|
||||
body:not(.nohide) .quote_container.controllable.show > .hider {
|
||||
}
|
||||
.quote_container.controllable.show > .hider {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#message_container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 15px 15px;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
}
|
||||
#multiple_messages {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
#multiple_messages > .email {
|
||||
margin: 100px auto;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
#email_template,
|
||||
#attachment_template,
|
||||
#link_warning_template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 5px 10px 5px 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 0;
|
||||
border-left: 3px #aaa solid;
|
||||
}
|
||||
|
||||
.search_coloring *::selection {
|
||||
.search_coloring *::selection {
|
||||
background-color: #00ddff;
|
||||
}
|
||||
}
|
||||
|
||||
.draft_edit {
|
||||
display: none;
|
||||
margin: 16px;
|
||||
text-align: right;
|
||||
@media print {
|
||||
body {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
#part_container {
|
||||
display: none !important;
|
||||
}
|
||||
#print_container {
|
||||
display: inline-block !important;
|
||||
background-color: white !important;
|
||||
}
|
||||
#print_container .preview {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.draft_edit_button {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
display: none;
|
||||
margin: 100px auto;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
/*
|
||||
Spinner code from CSSload.net
|
||||
License: http://cssload.net/en/terms_of_use
|
||||
*/
|
||||
|
||||
#spinner #floatingCirclesG {
|
||||
position:relative;
|
||||
width:128px;
|
||||
height:128px;
|
||||
-webkit-transform:scale(0.6);
|
||||
transform:scale(0.6);
|
||||
}
|
||||
|
||||
#spinner .f_circleG {
|
||||
position:absolute;
|
||||
background-color:#FFFFFF;
|
||||
height:23px;
|
||||
width:23px;
|
||||
-webkit-border-radius:12px;
|
||||
-webkit-animation-name:f_fadeG;
|
||||
-webkit-animation-duration:1.04s;
|
||||
-webkit-animation-iteration-count:infinite;
|
||||
-webkit-animation-direction:linear;
|
||||
border-radius:12px;
|
||||
animation-name:f_fadeG;
|
||||
animation-duration:1.04s;
|
||||
animation-iteration-count:infinite;
|
||||
animation-direction:linear;
|
||||
}
|
||||
|
||||
#spinner #frotateG_01 {
|
||||
left:0;
|
||||
top:52px;
|
||||
-webkit-animation-delay:0.39s;
|
||||
animation-delay:0.39s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_02 {
|
||||
left:15px;
|
||||
top:15px;
|
||||
-webkit-animation-delay:0.52s;
|
||||
animation-delay:0.52s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_03 {
|
||||
left:52px;
|
||||
top:0;
|
||||
-webkit-animation-delay:0.65s;
|
||||
animation-delay:0.65s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_04 {
|
||||
right:15px;
|
||||
top:15px;
|
||||
-webkit-animation-delay:0.78s;
|
||||
animation-delay:0.78s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_05 {
|
||||
right:0;
|
||||
top:52px;
|
||||
-webkit-animation-delay:0.91s;
|
||||
animation-delay:0.91s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_06 {
|
||||
right:15px;
|
||||
bottom:15px;
|
||||
-webkit-animation-delay:1.04s;
|
||||
animation-delay:1.04s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_07 {
|
||||
left:52px;
|
||||
bottom:0;
|
||||
-moz-animation-delay:1.17s;
|
||||
-webkit-animation-delay:1.17s;
|
||||
-ms-animation-delay:1.17s;
|
||||
-o-animation-delay:1.17s;
|
||||
animation-delay:1.17s;
|
||||
}
|
||||
|
||||
#spinner #frotateG_08 {
|
||||
left:15px;
|
||||
bottom:15px;
|
||||
-moz-animation-delay:1.3s;
|
||||
-webkit-animation-delay:1.3s;
|
||||
-ms-animation-delay:1.3s;
|
||||
-o-animation-delay:1.3s;
|
||||
animation-delay:1.3s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes f_fadeG {
|
||||
0% {
|
||||
background-color:#000000
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color:#FFFFFF
|
||||
}
|
||||
}
|
||||
|
||||
/* /Spinner */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Geary</title>
|
||||
<style id="default_fonts"></style>
|
||||
<style id="blacklist_ids"></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message_container"><span id="placeholder"></span></div>
|
||||
<div id="multiple_messages"><div id="selection_counter" class="email"></div></div>
|
||||
<div id="email_template" class="email">
|
||||
<div class="compressed_note"><span><span></div>
|
||||
<div class="geary_spacer"></div>
|
||||
<div class="email_container">
|
||||
<div class="email_warning"></div>
|
||||
<div class="header_container">
|
||||
<img src="" class="avatar" />
|
||||
<div class="button_bar">
|
||||
<div class="starred button"><img src="" class="icon" /></div>
|
||||
<div class="unstarred button"><img src="" class="icon" /></div>
|
||||
<div class="menu button"><img src="" class="icon" /></div>
|
||||
</div>
|
||||
<img src="" class="attachment icon" />
|
||||
<div class="header"></div>
|
||||
<div class="preview"></div>
|
||||
</div>
|
||||
<div class="remote_images"><img class="close_show_images button" /></div>
|
||||
<div class="body" dir="auto"></div>
|
||||
<div class="draft_edit"><span class="draft_edit_button button"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="attachment_template" class="attachment_container">
|
||||
<div class="top_border"></div>
|
||||
<table class="attachment"><tr>
|
||||
<td class="preview"><img src="" /></td>
|
||||
<td class="info">
|
||||
<div class="filename"></div>
|
||||
<div class="filesize"></div>
|
||||
</td>
|
||||
</tr></table>
|
||||
</div>
|
||||
<div id="link_warning_template" class="link_warning">
|
||||
<img class="close_link_warning button" />
|
||||
</div>
|
||||
<div id="spinner">
|
||||
<!--
|
||||
Spinner code from CSSLoad.net
|
||||
License: http://cssload.net/en/terms_of_use
|
||||
-->
|
||||
<div id="floatingCirclesG">
|
||||
<div class="f_circleG" id="frotateG_01"></div>
|
||||
<div class="f_circleG" id="frotateG_02"></div>
|
||||
<div class="f_circleG" id="frotateG_03"></div>
|
||||
<div class="f_circleG" id="frotateG_04"></div>
|
||||
<div class="f_circleG" id="frotateG_05"></div>
|
||||
<div class="f_circleG" id="frotateG_06"></div>
|
||||
<div class="f_circleG" id="frotateG_07"></div>
|
||||
<div class="f_circleG" id="frotateG_08"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue