geary/ui/conversation-web-view.css

/**
 * Style that is inserted into the message after it is loaded.
 */

/*
 * General HTML style.
 */

* {
  transition: height 0.25s !important;
}

html {
  /* Trigger CSS 2.1 § 10.6.7 to get a shrink-wrapped height. */
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  height: auto !important;

  /* Fix up the width after going to absolute positioning above. */
  width: 100%;

  /* Lock down the box just enough so we don't get an incrementally
     expanding web view */
  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 collapsable 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 futher 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 outselves. */
    -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;
  }
}