mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 15:45:55 +08:00
Cleanup some CSS and improve mail compose screen
This commit is contained in:
parent
09a9a45e98
commit
2efa0d8eb7
|
@ -11,9 +11,6 @@
|
|||
line-height: 24px;
|
||||
border: 0;
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
|
||||
box-shadow: 0 1px 4px #ccc;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
|
||||
|
||||
border-radius: 3px;
|
||||
|
@ -23,8 +20,6 @@
|
|||
}
|
||||
|
||||
&.checked {
|
||||
box-shadow: 0 1px 4px #00a;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 255, 0.3);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 255, 0.1), 0 1px 5px rgba(0, 0, 255, 0.2);
|
||||
}
|
||||
|
||||
|
|
|
@ -73,6 +73,20 @@
|
|||
padding: 10px;
|
||||
background-color: rgba(128,128,128,0.2);;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
padding: 2px 0;
|
||||
}
|
||||
td:first-child {
|
||||
padding: 0 10px 0 0;
|
||||
text-align: right;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
.e-identity {
|
||||
|
||||
color: var(--main-color);
|
||||
|
@ -85,26 +99,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.e-row {
|
||||
> div {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.e-label {
|
||||
text-align: right;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.e-value {
|
||||
|
||||
padding: 2px 0;
|
||||
|
||||
textarea, input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
textarea {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
color: red;
|
||||
|
@ -164,9 +168,3 @@
|
|||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.b-compose .b-header .e-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -105,22 +105,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
|||
}
|
||||
}
|
||||
|
||||
.g-ui-table {
|
||||
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
.e-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.e-cell {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper.resizable {
|
||||
resize: vertical;
|
||||
overflow: hidden;
|
||||
|
@ -215,7 +199,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
|||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.dropdown.colored-toggle.open .btn.dropdown-toggle {
|
||||
.dropdown.colored-toggle.show .btn.dropdown-toggle {
|
||||
color: #BD362F;
|
||||
|
||||
.caret {
|
||||
|
|
|
@ -244,7 +244,6 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 12px;
|
||||
padding: 0 8px 0 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
@ -264,7 +263,9 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.senderParent, .subjectParent {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
@ -293,12 +294,6 @@ html.rl-no-preview-pane {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.senderParent, .subjectParent {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.threads-len span {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
|
@ -411,6 +406,7 @@ html.rl-ctrl-key-pressed .messageListItem {
|
|||
.messageListItem {
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 12px;
|
||||
margin: 10px 0 -5px;
|
||||
}
|
||||
|
||||
|
@ -450,21 +446,15 @@ html:not(.rl-mobile):not(.rl-side-preview-pane) {
|
|||
line-height: 25px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.checkboxMessage {
|
||||
> * {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
margin: 6px 8px 0 0;
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
font-weight: normal;
|
||||
text-overflow: none;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
|
|
|
@ -31,7 +31,6 @@
|
|||
border-width: 5px;
|
||||
content: "";
|
||||
margin: -5px;
|
||||
max-width: 80vw;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
transform: rotate(-45deg);
|
||||
|
|
|
@ -19,13 +19,11 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="b-header g-ui-user-select-none">
|
||||
<div class="g-ui-table">
|
||||
<div class="e-row" style="height: 40px;">
|
||||
<div class="e-cell e-label">
|
||||
<label class="control-label" data-i18n="GLOBAL/FROM"></label>
|
||||
</div>
|
||||
<div class="e-cell e-value">
|
||||
<div class="dropdown pull-left" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
|
||||
<table>
|
||||
<tr>
|
||||
<td data-i18n="GLOBAL/FROM"></td>
|
||||
<td>
|
||||
<div class="dropdown" style="display:inline-block" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
|
||||
<a class="dropdown-toggle e-identity" href="#" tabindex="-1"
|
||||
id="identity-label-id" role="button"
|
||||
data-bind="text: currentIdentityView, css: {'multiply': 1 < identitiesOptions().length }">
|
||||
|
@ -39,9 +37,30 @@
|
|||
<!-- /ko -->
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true">
|
||||
<a class="btn" data-i18n="GLOBAL/BCC"
|
||||
data-bind="visible: !showBcc(), click: function () { showBcc(true); }"></a>
|
||||
<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true" style="display:inline;vertical-align:top">
|
||||
<a class="btn dropdown-toggle fontastic">☰</a>
|
||||
<ul class="dropdown-menu right-edge g-ui-menu" role="menu">
|
||||
<li class="e-item" data-bind="click: function () { showBcc(!showBcc()); }">
|
||||
<a class="e-link">
|
||||
<i class="fontastic" data-bind="text: showBcc() ? '☑' : '☐'"></i>
|
||||
<span data-i18n="GLOBAL/BCC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" data-bind="click: function () { showCc(!showCc()); }">
|
||||
<a class="e-link">
|
||||
<i class="fontastic" data-bind="text: showCc() ? '☑' : '☐'"></i>
|
||||
<span data-i18n="GLOBAL/CC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" data-bind="click: function () { showReplyTo(!showReplyTo()); }">
|
||||
<a class="e-link">
|
||||
<i class="fontastic" data-bind="text: showReplyTo() ? '☑' : '☐'"></i>
|
||||
<span data-i18n="GLOBAL/REPLY_TO"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" data-bind="click: function () { requestReadReceipt(!requestReadReceipt()); }">
|
||||
<a class="e-link">
|
||||
<i class="fontastic" data-bind="text: requestReadReceipt() ? '☑' : '☐'"></i>
|
||||
|
@ -68,64 +87,46 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group pull-right">
|
||||
<a class="btn fontastic" data-bind="visible: allowContacts, command: contactsCommand" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="pull-right">
|
||||
<span class="g-ui-link" data-i18n="GLOBAL/CC"
|
||||
data-bind="visible: !showCc(), click: function () { showCc(true); }"></span>
|
||||
|
||||
<span data-bind="visible: !showBcc()">
|
||||
<span class="g-ui-link" data-i18n="GLOBAL/BCC"
|
||||
data-bind="click: function () { showBcc(true); }"></span>
|
||||
|
||||
</span>
|
||||
<span class="g-ui-link" data-i18n="GLOBAL/REPLY_TO"
|
||||
data-bind="visible: !showReplyTo(), click: function () { showReplyTo(true); }"></span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row">
|
||||
<div class="e-cell e-label">
|
||||
<label class="control-label" data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
|
||||
data-i18n="GLOBAL/TO"</label>
|
||||
</div>
|
||||
<div class="e-cell e-value">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
|
||||
data-i18n="GLOBAL/TO"></label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row cc-row" data-bind="visible: showCc">
|
||||
<div class="e-cell e-label" data-i18n="GLOBAL/CC"></div>
|
||||
<div class="e-cell e-value">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="cc-row" data-bind="visible: showCc">
|
||||
<td data-i18n="GLOBAL/CC"></div>
|
||||
<td>
|
||||
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: cc, autoCompleteSource: emailsSource" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row bcc-row" data-bind="visible: showBcc">
|
||||
<div class="e-cell e-label" data-i18n="GLOBAL/BCC"></div>
|
||||
<div class="e-cell e-value">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bcc-row" data-bind="visible: showBcc">
|
||||
<td data-i18n="GLOBAL/BCC"></div>
|
||||
<td>
|
||||
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: bcc, autoCompleteSource: emailsSource" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row reply-to-row" data-bind="visible: showReplyTo">
|
||||
<div class="e-cell e-label" data-i18n="GLOBAL/REPLY_TO"></div>
|
||||
<div class="e-cell e-value">
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="reply-to-row" data-bind="visible: showReplyTo">
|
||||
<td data-i18n="GLOBAL/REPLY_TO"></div>
|
||||
<td>
|
||||
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: replyTo, autoCompleteSource: emailsSource" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row">
|
||||
<div class="e-cell e-label" data-i18n="GLOBAL/SUBJECT"></div>
|
||||
<div class="e-cell e-value">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-i18n="GLOBAL/SUBJECT"></div>
|
||||
<td>
|
||||
<input type="text" size="70" autocomplete="off" data-bind="textInput: subject" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-row">
|
||||
<div class="e-cell e-label"></div>
|
||||
<div class="e-cell e-value">
|
||||
<div>
|
||||
<div class="pull-left">
|
||||
<div class="btn-group">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="btn-group pull-left">
|
||||
<button type="button" class="btn" data-bind="click: function () { attachmentsPlace(false); },
|
||||
css: { 'active': !attachmentsPlace() }">
|
||||
<i class="icon-file-text"></i>
|
||||
|
@ -140,8 +141,6 @@
|
|||
<i data-bind="css: { 'icon-attachment': 0 === attachmentsInProcessCount(), 'icon-spinner': 0 < attachmentsInProcessCount()}"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-right" style="margin-right: 4px;">
|
||||
<div class="btn-group pull-right">
|
||||
<a class="btn"
|
||||
style="padding-left: 10px; padding-right: 10px;"
|
||||
|
@ -149,11 +148,9 @@
|
|||
<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">
|
||||
|
|
Loading…
Reference in a new issue