nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
geary/theming/message-viewer.css
Robert Schroll 4cfd18b52e Set document font explicitly with CSS in conversation viewer: Bug 713746 
This avoids the previously-mentioned bug in "font-family: initial".

Note that if you set the font size to 11pt in CSS, for example, you get
15px.  But if you set it to 11pt with the WebSettings and then set that
size with font-size: medium, you get 14 px.
2014-06-03 20:56:27 -04:00

726 lines
16 KiB
CSS
Raw Blame History

/**
* 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
*/
@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;
}
}
/* By default, tables reset the font properties to "normal" */
table {
font-size: inherit;
}
body {
margin: 0 !important;
padding: 0 !important;
font: caption;
-webkit-user-select: none;
-webkit-user-drag: none;
}
a {
color: #08c;
}
td, th {
vertical-align: top;
}
hr {
background-color: #999;
height: 1px;
border: 0;
margin-top: 15px;
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;
cursor: pointer;
padding: 4px;
margin-top: 7px;
text-align: center;
}
.button * {
pointer-events: none;
}
.button:hover {
border-color: rgba(0,0,0,0.18);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.8);
}
.button:active {
border-color: rgba(0,0,0,0.20);
background-color: rgba(0,0,0,0.05);;
padding: 5px 3px 3px 5px;
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;
}
.composer_embed {
position: absolute;
top: 0px; /* margin-top has impact here, despite absolute positioning (!?) */
bottom: 16px;
left: 16px;
right: 16px;
width: auto;
}
.email + .composer_embed {
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
width: 100%;
height: 600px;
}
.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%;
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;
}
.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 */
}
.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%;
display: block;
margin-top: 1em;
}
.email .link_warning {
display: inline-block;
position: absolute;
margin-top: -1em;
border: 1px solid #999;
padding: 1em;
background: #ffc;
box-shadow: 0 3px 11px rgba(0,0,0,0.21);
/* Reset styles */
font: caption;
color: black;
}
.email .link_warning a {
color: #08c;
}
.email .link_warning span {
display: block;
padding-left: 1em;
}
.email .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 {
position: relative;
margin: 5px 0;
padding: 12px;
color: #303030;
background-color: #e8e8e8;/* recv-quoted */
border-radius: 4px;
}
.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 {
max-height: none;
}
.email.sent .quote_container {
background-color: #e8e8e8;/* sent-quoted */
}
.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 {
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 {
color: #000;
}
body:not(.nohide) .quote_container.controllable {
margin-bottom: 7px;
padding-bottom: 0;
}
body:not(.nohide) .quote_container.controllable.show {
padding-bottom: 12px;
}
body:not(.nohide) .quote_container.controllable > .shower {
display: block;
}
body:not(.nohide) .quote_container.controllable.show > .shower {
display: none;
}
body:not(.nohide) .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 {
background-color: #00ddff;
}
.draft_edit {
display: none;
margin: 16px;
text-align: right;
}
.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 */
Reference in a new issue View git blame Copy permalink