geary/ui/conversation-web-view.css

/**
 * Style that is inserted into the message after it is loaded.
 *
 * Copyright © 2016 Software Freedom Conservancy Inc.
 * Copyright © 2020 Michael Gratton <mike@vee.net>
 */

/*
 * General HTML style.
 */

* {
  transition: height 0.25s !important;
}

html {
  color: black;
  background-color: white;

  /* Width must always be defined by the viewport so content doesn't
  overflow inside the WebView, height must always be defined by the
  content so the WebView can be sized to fit exactly. */
  width: 100vw !important;
  height: max-content !important;

  /* Despite the fact that the width must always be defined by the
  viewport, the viewport width will be 0 if the email is loaded before
  its WebView is laid out in the widget hierarchy. As a workaround, to
  prevent this causing the email being squished down to is minimum
  width and hence being stretched right out in height, set a
  reasonable minimum width. See
  https://gitlab.gnome.org/GNOME/geary/-/issues/283 */
  min-width: 400px !important;

  /* Lock down the box sizing just enough so that the width and height
  constraints above work as expected, and so the element's
  scrollHeight is accurate. */
  box-sizing: border-box !important;
  margin: 0 !important;
  border-width: 0 !important;
}

body {
  margin: 12px;
  border: 0;
  padding: 0;

  /* XXX for plain text only? */
  overflow-wrap: break-word !important;

  /* Fix messages with broken body style. See Bug 750075. */
  height: auto !important;
}

table {
  /* By default, tables reset the font properties to "normal" */
  font-size: inherit;
}

a {
  color: #08c;
}

hr {
  background-color: #999;
  height: 1px;
  border: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

blockquote {
  margin: 0.3em 16px;
  border: 0;
  border-left: 3px #aaa solid;
  padding: 0 8px;
}

pre {
  white-space: pre-wrap;
}

/**
 * Message chrome style.
 */

.geary-signature {
    color: #777;
    display: inline;
}

.geary-signature a,
.geary-quote-container a {
    color: #5fb2e7;
}

@media screen {

  .geary_replaced_inline_image {
    display: block;
    max-width: 100%;
    margin: 1em 0;
  }

  /* Inline collapsible quote blocks */

  .geary-quote-container {
    position: relative;
    /* Split 1em of top/bottom margin between here and the default
    blockquote style, so if a message specifies 0px margin and padding
    (i.e. GMail) there will still be some space space between the
    container's background and and the blockquote. */
    margin: 0.5em 0;
    border-radius: 4px;
    padding: 0.5em 0;
    color: #303030;
    background-color: #e8e8e8;/* recv-quoted */
  }
  .geary-sent .geary-quote-container {
    background-color: #e8e8e8;/* sent-quoted */
  }

  .geary-quote-container > .geary-quote {
    position: relative;
    padding: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
    z-index: 0;
  }
  .geary-quote-container.geary-controllable.geary-hide > .geary-quote {
    /* Use a fraction value to cut the last visible line off half way. */
    max-height: calc(6em - 8px);
  }

  .geary-quote-container.geary-controllable > .geary-quote > blockquote {
    /* Add space between the quote and the hider button */
    margin-bottom: 18px;
  }

  .geary-quote-container > .geary-shower,
  .geary-quote-container > .geary-hider {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    bottom: -4px;
    z-index: 1;
    -webkit-user-select: none;
    -webkit-user-drag: none;
  }

  .geary-quote-container.geary-controllable.geary-hide > .geary-hider {
    display: none;
  }
  .geary-quote-container.geary-controllable.geary-hide > .geary-shower,
  .geary-quote-container.geary-controllable > .geary-hider {
    display: block;
  }

  .geary-quote-container .geary-button {
    display: block;
    width: 100%;
    height: 16px;
    min-height: 0;
    margin: 0;
    margin-bottom: 4px;
    padding: 0;
    font-size: 8px; /* Absolute size in pixels for graphics */
    white-space: pre;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    /* All further properties below are a workaround for WK Bug 166648
     * <https://bugs.webkit.org/show_bug.cgi?id=166648>. The result is
     * we need to manually style these buttons ourselves. */
    -webkit-appearance: none;
    box-sizing: border-box;
    /* The following was taken from GTK+4 trunk Adwaita theme:
     * gtk/theme/Adwaita/gtk-contained.css */
    border: 1px solid;
    border-radius: 3px;
    transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #2e3436;
    outline-color: rgba(46, 52, 54, 0.3);
    border-color: #b6b6b3;
    border-bottom-color: #91918c;
    background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
  }
  .geary-quote-container .geary-button:hover {
    /* Likewise the properties below also workaround WK Bug 166648,
     * and taken from gtk/theme/Adwaita/gtk-contained.css. */
    color: #2e3436;
    outline-color: rgba(46, 52, 54, 0.3);
    border-color: #b6b6b3;
    border-bottom-color: #91918c;
    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
    box-shadow: inset 0 1px white;
    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
  }

  /* Highlight search terms */

  .geary_search_coloring *::selection {
    background-color: #00ddff;
  }
}

#geary-message-headers {
  display: none !important;
}

@media print {
  .geary-button {
    display: none;
  }

  #geary-message-headers, #geary-message-headers * {
    all: initial !important;
  }

  #geary-message-headers {
    display: table !important;
    width: 100% !important;
    transition: height 2s !important;
    padding-bottom: 0.5em !important;
    border-bottom: 2px inset black !important;
    margin-bottom: 0.75em !important;
  }

  #geary-message-headers tr {
    display: table-row !important;
  }

  #geary-message-headers th, #geary-message-headers td {
    display: table-cell !important;
    line-height: 1.5em !important;
  }

  #geary-message-headers th {
    font-weight: bold !important;
    padding-right: 2ex !important;
  }

  #geary-message-headers td {
    width: 100% !important;
  }
}