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:
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
214
gaia/apps/sms/views/conversation/style/attachment.css
Executable file
214
gaia/apps/sms/views/conversation/style/attachment.css
Executable file
|
|
@ -0,0 +1,214 @@
|
|||
/**
|
||||
* Attachment containers are either:
|
||||
* - <div> elements, in the message thread;
|
||||
* - <iframe> elements, in the Compose area (draft attachments).
|
||||
* Both containers have an `attachment-container' class, but only <iframe>
|
||||
* containers have an `attachment-draft' class.
|
||||
*/
|
||||
.attachment-container {
|
||||
position: relative;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
display: block;
|
||||
border: none;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.attachment-draft {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* make sure all pointer events are sent to the main container */
|
||||
.attachment-draft *,
|
||||
.attachment-container * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.attachment-container.nopreview { /* 100x100 px placeholder + filename below */
|
||||
height: 12.7rem; /* font-size = 1.7rem + 1rem margin */
|
||||
}
|
||||
|
||||
/* Internal height of the iframe that contains the attachment draft */
|
||||
.attachment-container.nopreview[data-attachment-type="vcard"] {
|
||||
/* 40x40 px placeholder + filename below */
|
||||
height: 6.7rem; /* font-size = 1.7rem + 1rem margin */
|
||||
}
|
||||
|
||||
/* The internal height of the attachment itself */
|
||||
.attachment[data-attachment-type="vcard"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Allow to display the filename properly */
|
||||
#messages-input > [data-attachment-type="vcard"] {
|
||||
width: 20rem;
|
||||
}
|
||||
|
||||
.article-list[data-type="list"] .message .attachment-container {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attachments that occur at the bounds of an MMS message do not need
|
||||
* additional spacing.
|
||||
*/
|
||||
#messages-container[data-type="list"] .message .attachment-container:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
#messages-container[data-type="list"] .message .attachment-container:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
offset-inline-start: 0;
|
||||
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.outgoing .attachment {
|
||||
offset-inline-start: auto;
|
||||
offset-inline-end: 0;
|
||||
}
|
||||
|
||||
.preview .attachment {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: #ececec;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.preview .attachment:active,
|
||||
.preview .attachment:hover {
|
||||
background-color: #b2f2ff;
|
||||
}
|
||||
|
||||
.size-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
padding: 0 0.4rem;
|
||||
display: none;
|
||||
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.attachment-draft > :not([data-attachment-type="vcard"]) .size-indicator {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
|
||||
height: 2rem;
|
||||
display: none;
|
||||
|
||||
line-height: 2rem;
|
||||
font-size: 1.6rem;
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* .file-name has a dir="auto". Moreover, sms.css in not included in attachment
|
||||
* iframe, so we cannot leverage the general alignment rules. */
|
||||
html[dir="ltr"] .file-name {
|
||||
text-align: left;
|
||||
left: 1px; /* Avoid issues related to being too much on the left */
|
||||
right: 0;
|
||||
}
|
||||
html[dir="rtl"] .file-name {
|
||||
text-align: right;
|
||||
left: 0;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.attachment-draft .file-name {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
.nopreview .file-name {
|
||||
display: block;
|
||||
|
||||
unicode-bidi: -moz-plaintext;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: none no-repeat center center / cover;
|
||||
}
|
||||
|
||||
.thumbnail-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* BiDi-proof: CSS sprites */
|
||||
background: url('images/attachments.png') no-repeat left top / 10rem;
|
||||
}
|
||||
|
||||
.attachment-container .thumbnail,
|
||||
.attachment-container .thumbnail-placeholder {
|
||||
position: absolute;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.attachment-draft:hover .thumbnail-placeholder:not(.vcard-placeholder),
|
||||
.attachment-draft:active .thumbnail-placeholder:not(.vcard-placeholder),
|
||||
.attachment-container:not([data-attachment-type="vcard"]):hover .thumbnail-placeholder,
|
||||
.attachment-container:not([data-attachment-type="vcard"]):active .thumbnail-placeholder {
|
||||
background-color: #33cccc;
|
||||
background-blend-mode: luminosity;
|
||||
}
|
||||
|
||||
.img-placeholder {
|
||||
background-position: left -10rem; /* BiDi proof: CSS sprites */
|
||||
}
|
||||
|
||||
.audio-placeholder {
|
||||
background-position: left -20rem; /* BiDi proof: CSS sprites */
|
||||
}
|
||||
|
||||
.video-placeholder {
|
||||
background-position: left -30rem; /* BiDi proof: CSS sprites */
|
||||
}
|
||||
|
||||
.vcard-placeholder {
|
||||
background: url('images/attachment-vcard.png') no-repeat;
|
||||
background-size: 4rem;
|
||||
}
|
||||
html[dir="ltr"] .vcard-placeholder { background-position: left top; }
|
||||
html[dir="rtl"] .vcard-placeholder { background-position: right top; }
|
||||
|
||||
.incoming.received .vcard-placeholder {
|
||||
background-image: url('images/attachment-vcard-incoming.png');
|
||||
}
|
||||
|
||||
.attachment.corrupted .thumbnail-placeholder:after {
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
offset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
content: '';
|
||||
background: url('icons/corrupted.png') no-repeat center center / 10rem;
|
||||
}
|
||||
Loading…
Reference in a new issue