Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
934
gaia/apps/email/style/message_cards.css
Executable file
934
gaia/apps/email/style/message_cards.css
Executable file
|
|
@ -0,0 +1,934 @@
|
|||
.msg-list-scrollouter {
|
||||
height: calc(100% - 9.5rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
/**
|
||||
* message list cards: toggle card UI state based on show-edit class
|
||||
*/
|
||||
cards-message-list lst-edit-header,
|
||||
cards-message-list lst-edit-toolbar,
|
||||
cards-message-list-search lst-edit-header,
|
||||
cards-message-list-search lst-edit-toolbar {
|
||||
display: none;
|
||||
}
|
||||
cards-message-list.show-edit lst-edit-header,
|
||||
cards-message-list.show-edit lst-edit-toolbar,
|
||||
cards-message-list-search.show-edit lst-edit-header,
|
||||
cards-message-list-search.show-edit lst-edit-toolbar {
|
||||
display: block;
|
||||
}
|
||||
cards-message-list.show-edit .msg-list-header,
|
||||
cards-message-list.show-edit .msg-list-action-toolbar,
|
||||
cards-message-list-search.show-edit .msg-search-header,
|
||||
cards-message-list-search.show-edit .msg-list-action-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
cards-message-list-search .msg-list-scrollouter {
|
||||
height: calc(100% - 12rem);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
cards-message-list-search.show-edit .msg-list-scrollouter {
|
||||
height: calc(100% - 9.5rem);
|
||||
}
|
||||
|
||||
.msg-list-scrollinner {
|
||||
/* Give it a z-index of 0 so that all its contents are forced into a single stacking
|
||||
context. This simplifies display list construction because our many positioned
|
||||
descendants can be clipped as a single group instead of independently.
|
||||
XXX we can take this out when Gecko bug 841192 is fixed. */
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Have enough scroll space to have the search bit pull out. */
|
||||
.msg-list-scroll-padding-top {
|
||||
height: 5.6rem;
|
||||
}
|
||||
/* Have enough space at the bottom for the last message to not be under the
|
||||
action bar. */
|
||||
.msg-list-scroll-padding-bottom {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
/* Override some styles set by header.css to allow flexbox content */
|
||||
section[role="region"] > header:first-child h1.msg-list-header-folder-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.msg-list-header-folder-name {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
/* Add some padding, Arabic in italics seems to get clipped otherwise.
|
||||
Bug 1176832 */
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
/* Display unread messages number */
|
||||
.msg-list-header-folder-unread {
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.5rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 1.3rem;
|
||||
background-color: #E06F14;
|
||||
line-height: 2.1rem;
|
||||
font-size: smaller;
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* The search header sets a z-index on its children so that the topbar goes
|
||||
under it when not in use. Not needed for non-search since shared header
|
||||
styles handle it. Specific selectors because some set explicit z-index and
|
||||
setting z-index on just the msg-search-header is not enough. */
|
||||
cards-message-list-search .msg-search-header form,
|
||||
cards-message-list-search .msg-search-header .bb-tablist {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* For search filters, make sure the contents do not line break and overflow
|
||||
outside their given areas. This is particularly important for some locales.
|
||||
Do not want to set styles on the inner a tags to force ellipsis since it ends
|
||||
up with ellipsis in some ways for most languages, even English, where just using
|
||||
an overflow hide is enough to allow seeing the whole word in some cases. See
|
||||
bug 1033628 for more details. */
|
||||
.msg-search-filter {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* When card is slightly shown when folder card is center,
|
||||
be sure any inputs do not accept clicks/taps that would
|
||||
mess up the transition back to the message list. Also
|
||||
disable scrolling of the list */
|
||||
cards-message-list.after input,
|
||||
cards-message-list.after .msg-list-scrollouter {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.msg-no-subject {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Sections horizontally chop up the item: unread, details, icons, avatar.
|
||||
* We have 320 horizontal pixels to play with.
|
||||
*/
|
||||
.msg-header-item {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
}
|
||||
.msg-header-item:active {
|
||||
background-color: #b1f1ff;
|
||||
}
|
||||
.msg-header-item:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Default data placeholder items. To limit scrolling
|
||||
impact, these styles should not be ones that trigger
|
||||
reflows. Foreground/background colors should be safe.
|
||||
*/
|
||||
.msg-header-item.default-data .msg-header-author {
|
||||
color: #e7e8e9;
|
||||
}
|
||||
.msg-header-item.default-data .msg-header-subject {
|
||||
color: #e7e8e9;
|
||||
}
|
||||
.msg-header-item.default-data .msg-header-snippet {
|
||||
color: #e7e8e9;
|
||||
}
|
||||
.msg-header-item.default-data .msg-header-date {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.msg-header-unread-section {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
height: .9rem;
|
||||
width: .9rem;
|
||||
margin-top: -.45rem;
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .msg-header-unread-section {
|
||||
left: 1rem;
|
||||
}
|
||||
html[dir="rtl"] .msg-header-unread-section {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.msg-header-item.unread .msg-header-unread-section {
|
||||
background-color: #2fc9ec;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.msg-header-syncing-section {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-top: -1.5rem;
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes syncing-rotation {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.msg-header-syncing-section-syncing {
|
||||
animation: syncing-rotation 1s linear infinite;
|
||||
visibility: visible;
|
||||
background: url("images/icons/icon_outbox_sending.png") no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* The syncing status supercedes the unread icon. */
|
||||
.unread .msg-header-syncing-section-error + .msg-header-unread-section,
|
||||
.unread .msg-header-syncing-section-syncing + .msg-header-unread-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msg-header-syncing-section-error {
|
||||
visibility: visible;
|
||||
background: url("images/icons/icon_outbox_pending.png") no-repeat center / contain;
|
||||
}
|
||||
|
||||
.msg-header-details-section {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(100% - 3rem);
|
||||
height: 100%;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2rem;
|
||||
padding: 1rem 0 0;
|
||||
padding-inline-start: 1.5rem;
|
||||
border-bottom: 0.1rem solid #f2f2f1;
|
||||
display: inline-flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .msg-header-details-section {
|
||||
left: 1.5rem;
|
||||
}
|
||||
html[dir="rtl"] .msg-header-details-section {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.msg-header-icons-section {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2rem;
|
||||
height: 100%;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
html[dir="ltr"] .msg-header-icons-section {
|
||||
right: 2.8rem; /* The width of the avatar-section. */
|
||||
}
|
||||
html[dir="rtl"] .msg-header-icons-section {
|
||||
left: 2.8rem; /* The width of the avatar-section. */
|
||||
}
|
||||
|
||||
.msg-header-avatar-section {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2.8rem;
|
||||
height: 100%;
|
||||
}
|
||||
html[dir="ltr"] .msg-header-avatar-section { right: 0; }
|
||||
html[dir="rtl"] .msg-header-avatar-section { left: 0; }
|
||||
|
||||
.msg-header-author {
|
||||
font-size: 1.9rem;
|
||||
font-weight: normal;
|
||||
color: #131313;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
width: 0;
|
||||
order: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.msg-header-item.unread .msg-header-author {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.msg-header-date {
|
||||
color: #8f8f8f;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
order: 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
html[dir="ltr"] .msg-header-date { padding-left: 0.5rem; }
|
||||
html[dir="rtl"] .msg-header-date { padding-right: 0.5rem; }
|
||||
|
||||
.msg-header-item.unread .msg-header-date {
|
||||
color: #008eab;
|
||||
}
|
||||
|
||||
.msg-header-subject {
|
||||
order: 3;
|
||||
flex: 0 0 -moz-available;
|
||||
color: #131313;
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.msg-header-snippet {
|
||||
order: 4;
|
||||
flex: 0 0 -moz-available;
|
||||
color: #858585;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Give space for icons on end if they need to be displayed. */
|
||||
html[dir="ltr"] .msg-header-subject.icon-short,
|
||||
html[dir="ltr"] .msg-header-snippet.icon-short {
|
||||
margin-right: 1.6rem;
|
||||
}
|
||||
html[dir="rtl"] .msg-header-subject.icon-short,
|
||||
html[dir="rtl"] .msg-header-snippet.icon-short {
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
|
||||
.msg-header-star {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
color: #888844;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.msg-header-star-starred {
|
||||
background: url("images/icons/message-list-star.png") no-repeat center / 2rem;
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
top: 3rem;
|
||||
visibility: visible;
|
||||
}
|
||||
html[dir="ltr"] .msg-header-star-starred { right: -2rem; }
|
||||
html[dir="rtl"] .msg-header-star-starred { left: -2rem; }
|
||||
|
||||
.msg-header-attachments {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.msg-header-attachments-yes {
|
||||
background: url("images/icons/message-list-attachment.png") no-repeat center / 2rem;
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
top: 5rem;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .msg-header-attachments-yes { right: -2rem; }
|
||||
html[dir="rtl"] .msg-header-attachments-yes { left: -2rem; }
|
||||
|
||||
.msg-envelope-bar {
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.msg-envelope-line {
|
||||
padding: 0 1.5rem;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.msg-envelope-from-line {
|
||||
padding-top: 0.6rem;
|
||||
}
|
||||
|
||||
.msg-envelope-details {
|
||||
padding-bottom: 0.8rem;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.msg-envelope-date {
|
||||
font-size: 1.4rem;
|
||||
color: #657073;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.msg-envelope-key {
|
||||
display: inline-block;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.msg-envelope-key::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
|
||||
.msg-envelope-subject-container {
|
||||
margin: 1rem 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 0.1rem solid #f2f2f1;
|
||||
}
|
||||
|
||||
.msg-envelope-subject {
|
||||
margin: 1rem 0;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #5f5f5f;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Copy/paste select all could reach across the whole DOM so only scope the
|
||||
selection to the center "active" card. Bug 1152172. */
|
||||
.center .msg-envelope-subject {
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
.msg-body-container {
|
||||
white-space: pre-wrap;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2rem;
|
||||
margin: 1rem 1.5rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Plain text emails with their structured DOM created for the reader should
|
||||
all have selectable text. Copy/paste select all could reach across the whole
|
||||
DOM so only scope the selection to the center "active" card. Bug 1152172. */
|
||||
.center .msg-body-container * {
|
||||
-moz-user-select: text;
|
||||
}
|
||||
|
||||
.msg-peep-bubble {
|
||||
display: inline-block;
|
||||
margin: 0.8rem 0.3rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: 0;
|
||||
border-radius: 1.4rem;
|
||||
font-size: 1.5rem;
|
||||
font-style: italic;
|
||||
color: #2c2c2c;
|
||||
background-color: white;
|
||||
}
|
||||
.msg-peep-bubble:active {
|
||||
color: white;
|
||||
background-color: #00aacc;
|
||||
}
|
||||
|
||||
.msg-peep-bubble * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
cards-message-reader .msg-body-container > progress {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
cards-message-reader .scrollregion-below-header {
|
||||
height: calc(100% - 9.5rem);
|
||||
}
|
||||
|
||||
.msg-attachments-container {
|
||||
margin: 0.6rem 1.5rem 1.5rem;
|
||||
padding: 0;
|
||||
border-bottom: 0.1rem solid #f2f2f1;
|
||||
}
|
||||
|
||||
/* More specific selector to override shared styles */
|
||||
.msg-attachments-container .msg-attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
height: 4rem;
|
||||
min-height: 4rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.msg-attachment-icon {
|
||||
display: block;
|
||||
background: url("images/icons/icon_default.png") no-repeat;
|
||||
background-size: 3rem auto;
|
||||
width: 3.6rem;
|
||||
height: 4rem;
|
||||
}
|
||||
html[dir="ltr"] .msg-attachment-icon { background-position: center left; }
|
||||
html[dir="rtl"] .msg-attachment-icon { background-position: center right; }
|
||||
|
||||
.mime-image .msg-attachment-icon {
|
||||
background-image: url("images/icons/icon_image.png");
|
||||
}
|
||||
.mime-audio .msg-attachment-icon {
|
||||
background-image: url("images/icons/icon_music.png");
|
||||
}
|
||||
.mime-video .msg-attachment-icon {
|
||||
background-image: url("images/icons/icon_video.png");
|
||||
}
|
||||
|
||||
.msg-attachment-fileinfo {
|
||||
max-width: calc(100% - 7rem);
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.msg-attachment-filename,
|
||||
.msg-attachment-filesize {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
color: #393d3e;
|
||||
}
|
||||
|
||||
.msg-attachment-filesize {
|
||||
max-width: 6.5rem;
|
||||
color: #a6a6a6;
|
||||
}
|
||||
|
||||
.msg-attachment-item[state="downloadable"] > .msg-attachment-download {
|
||||
display: inline-block;
|
||||
}
|
||||
.msg-attachment-item[state="downloading"] > .msg-attachment-downloading {
|
||||
display: inline-block;
|
||||
}
|
||||
.msg-attachment-item[state="downloaded"] > .msg-attachment-view {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.msg-attachment-download {
|
||||
display: none;
|
||||
width: 3.5rem;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
.msg-attachment-downloading {
|
||||
display: none;
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.msg-attachment-view {
|
||||
display: none;
|
||||
width: 3.5rem;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msg-attachment-too-large { display: none; }
|
||||
.msg-attachment-item[state="toolarge"] { height: auto; }
|
||||
.msg-attachment-item[state="toolarge"] .msg-attachment-too-large {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.msg-attachment-item[state="toolarge"] > .msg-attachment-download {
|
||||
display: inline-block;
|
||||
opacity: 0.3;
|
||||
background: none;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.moz-external-link {
|
||||
color: #00aacc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.msg-body-content {
|
||||
unicode-bidi: -moz-plaintext;
|
||||
text-align: initial;
|
||||
color: #333333;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.msg-body-signature {
|
||||
unicode-bidi: -moz-plaintext;
|
||||
text-align: initial;
|
||||
color: #808080;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.msg-body-leadin {
|
||||
unicode-bidi: -moz-plaintext;
|
||||
text-align: initial;
|
||||
color: gray;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.msg-body-q1, .msg-body-q2, .msg-body-q3, .msg-body-q4,
|
||||
.msg-body-q5, .msg-body-q6, .msg-body-q7, .msg-body-q8, .msg-body-q9 {
|
||||
unicode-bidi: -moz-plaintext;
|
||||
text-align: initial;
|
||||
color: #808080;
|
||||
padding: 0.2rem;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
.msg-body-q1 {
|
||||
border-inline-start: 0.1rem solid gray;
|
||||
}
|
||||
.msg-body-q2 {
|
||||
border-inline-start: 0.2rem solid gray;
|
||||
}
|
||||
.msg-body-q3 {
|
||||
border-inline-start: 0.3rem solid gray;
|
||||
}
|
||||
.msg-body-q4 {
|
||||
border-inline-start: 0.4rem solid gray;
|
||||
}
|
||||
.msg-body-q5 {
|
||||
border-inline-start: 0.5rem solid gray;
|
||||
}
|
||||
.msg-body-q6 {
|
||||
border-inline-start: 0.6rem solid gray;
|
||||
}
|
||||
.msg-body-q7 {
|
||||
border-inline-start: 0.7rem solid gray;
|
||||
}
|
||||
.msg-body-q8 {
|
||||
border-inline-start: 0.8rem solid gray;
|
||||
}
|
||||
.msg-body-q9 {
|
||||
border-inline-start: 0.9rem solid gray;
|
||||
}
|
||||
.msg-body-disclaimer, .msg-body-list, .msg-body-product, .msg-body-ads {
|
||||
color: gray;
|
||||
margin: 0.4rem 0;
|
||||
}
|
||||
|
||||
.msg-reader-load-infobar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
margin: 1rem 1.5rem;
|
||||
padding: .2rem 0 1rem;
|
||||
border-bottom: 0.1rem solid #f2f2f1;
|
||||
|
||||
font-size: 1.4rem;
|
||||
font-style: italic;
|
||||
/* we do not specify a height because text may be more than 1 line high */
|
||||
line-height: 1.8rem;
|
||||
color: #008eab;
|
||||
}
|
||||
|
||||
|
||||
.msg-reader-load-infobar-text {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
margin-inline-end: 1.5rem;
|
||||
}
|
||||
|
||||
.msg-reader-load-infobar-button {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
background: url("images/icons/icon_show_external_image.png") no-repeat center / 3rem auto;
|
||||
}
|
||||
|
||||
.msg-list-action-toolbar .msg-refresh-btn:after {
|
||||
content: '';
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
background: url("images/icons/refresh.png") no-repeat center center / 3rem auto;
|
||||
}
|
||||
|
||||
.msg-list-action-toolbar .msg-refresh-btn:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.msg-refresh-btn[data-state="synchronizing"]:after {
|
||||
animation: 0.9s msg-refresh-rotate infinite steps(30);
|
||||
}
|
||||
|
||||
@keyframes msg-refresh-rotate {
|
||||
from { transform: rotate(1deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.bb-tablist li .icon {
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.bb-tablist .msg-last-sync {
|
||||
text-align: center;
|
||||
line-height: 4.5rem;
|
||||
color: #5f5f5f;
|
||||
flex: 2 2 0;
|
||||
font-size: 1.3rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.msg-last-sync.long .msg-last-synced-label,
|
||||
.msg-last-sync.long .msg-last-synced-value {
|
||||
display: block;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.msg-last-sync.long .msg-last-synced-label {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
.bb-tablist .icon.msg-edit-btn {
|
||||
background-position: 50% 45%;
|
||||
background-size: 3rem auto;
|
||||
}
|
||||
html[dir="ltr"] .bb-tablist .icon.msg-edit-btn {
|
||||
background-image: url("images/icons/edit-mode.png");
|
||||
}
|
||||
html[dir="rtl"] .bb-tablist .icon.msg-edit-btn {
|
||||
background-image: url("images/icons/edit-mode-rtl.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-star-btn {
|
||||
background-image: url("images/icons/star.png");
|
||||
}
|
||||
.bb-tablist .msg-star-btn-on {
|
||||
background-image: url("images/icons/star_on.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-mark-read-btn {
|
||||
background-image: url("images/icons/mark_read.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-mark-read-btn.unread {
|
||||
background-image: url("images/icons/mark_unread.png");
|
||||
}
|
||||
|
||||
/* Scrollable Area has to have a solid
|
||||
* opaque background to optimize Gecko.
|
||||
* See Bug 962699. */
|
||||
lst-msg-vscroll,
|
||||
.msg-vscroll-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bb-tablist .msg-delete-btn {
|
||||
background-image: url("images/icons/delete.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-move-btn {
|
||||
background-image: url("images/icons/move.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-forward-btn {
|
||||
background-image: url("images/icons/forward.png");
|
||||
}
|
||||
|
||||
.bb-tablist .msg-reply-btn {
|
||||
background-image: url("images/icons/reply.png");
|
||||
}
|
||||
|
||||
/* Message list edit mode layout control */
|
||||
.msg-vscroll-container label.negative {
|
||||
height: 8rem;
|
||||
width: 4rem;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.show-edit .msg-vscroll-container label.negative {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .show-edit .msg-vscroll-container .msg-header-unread-section {
|
||||
left: 3.9rem;
|
||||
}
|
||||
html[dir="rtl"] .show-edit .msg-vscroll-container .msg-header-unread-section {
|
||||
right: 3.9rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .show-edit .msg-vscroll-container .msg-header-syncing-section {
|
||||
left: 3.5rem;
|
||||
}
|
||||
html[dir="rtl"] .show-edit .msg-vscroll-container .msg-header-syncing-section {
|
||||
right: 3.5rem;
|
||||
}
|
||||
|
||||
.show-edit .msg-vscroll-container .msg-header-details-section {
|
||||
padding-inline-start: 4.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
Empty message-list container
|
||||
*/
|
||||
.msg-list-empty-container {
|
||||
width: calc(100% - 3rem);
|
||||
height: 20rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.msg-list-empty-message-text {
|
||||
position: relative;
|
||||
top: 2.8rem;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.5rem;
|
||||
color: #010101;
|
||||
font-weight: 300;
|
||||
font-size: 2.4rem;
|
||||
border-top: 0.1rem solid #bebebe;
|
||||
}
|
||||
|
||||
cards-message-list-search .msg-list-empty-message-text {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.msg-messages-sync-container > p,
|
||||
.msg-list-empty {
|
||||
height: 8rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
line-height: 8rem;
|
||||
}
|
||||
.msg-list-empty {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.msg-messages-sync-container > .msg-messages-syncing,
|
||||
.msg-messages-sync-container > .msg-messages-sync-more {
|
||||
width: 100%;
|
||||
color: #5f5f5f;
|
||||
background-color: #f2f2f2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.msg-messages-sync-container span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 auto;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.msg-messages-sync-more > span {
|
||||
margin: 0 auto;
|
||||
padding-inline-start: 3rem;
|
||||
background: url("images/icons/download_trimmed.png") no-repeat;
|
||||
background-size: 2rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .msg-messages-sync-more > span {
|
||||
background-position: center left;
|
||||
}
|
||||
html[dir="rtl"] .msg-messages-sync-more > span {
|
||||
background-position: center right;
|
||||
}
|
||||
|
||||
.message-list-topbar {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
margin: 1.5rem 0 0;
|
||||
margin-inline-end: 1.5rem;
|
||||
opacity: .8;
|
||||
transform: translate(0, -6.5rem);
|
||||
transition-property: transform;
|
||||
transition-duration: .6s;
|
||||
transition-timing-function: ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.message-list-topbar.no-anim {
|
||||
transition-property: none;
|
||||
}
|
||||
|
||||
.message-list-topbar.horiz-top,
|
||||
.message-list-topbar.closing[data-state="top"] {
|
||||
transform: translate(0, -6.5rem);
|
||||
}
|
||||
|
||||
.message-list-topbar[data-state="top"] {
|
||||
transform: translate(0, 0);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 5rem;
|
||||
background: url('../../shared/style/headers/images/icons/up.png') no-repeat scroll center center / 3rem auto #a6a6a6;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .message-list-topbar[data-state="top"] { right: 0; }
|
||||
html[dir="rtl"] .message-list-topbar[data-state="top"] { left: 0; }
|
||||
|
||||
.message-list-topbar.horiz-message,
|
||||
.message-list-topbar.closing[data-state="message"] {
|
||||
transform: translate(-50%, -6.5rem);
|
||||
}
|
||||
|
||||
.message-list-topbar[data-state="message"] {
|
||||
/* those 2 rules are BiDi-proof */
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
margin: 1.5rem auto;
|
||||
padding: 0 1.3rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.4rem;
|
||||
border-radius: 4rem;
|
||||
color: white;
|
||||
background-color: #a6a6a6;
|
||||
opacity: .95;
|
||||
}
|
||||
|
||||
.msg-reply-menu menu > button:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0.5rem 0 0;
|
||||
margin-inline-end: 1rem;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 3rem auto;
|
||||
}
|
||||
html[dir="ltr"] .msg-reply-menu menu > button:before { float: left; }
|
||||
html[dir="rtl"] .msg-reply-menu menu > button:before { float: right; }
|
||||
|
||||
.msg-reply-menu-reply:before {
|
||||
background-image: url("../shared/style/headers/images/icons/reply.png");
|
||||
}
|
||||
|
||||
.msg-reply-menu-reply-all:before {
|
||||
background-image: url("../shared/style/headers/images/icons/reply_all.png");
|
||||
}
|
||||
|
||||
.msg-reply-menu-forward:before {
|
||||
background-image: url("images/icons/forward.png");
|
||||
}
|
||||
Loading…
Reference in a new issue