likeopera-frontend/mail.css

1780 lines
30 KiB
CSS

html, body
{
margin: 0;
padding: 0;
height: 100%;
background: #f2edeb;
font: 18px/24px 'Segoe UI', sans-serif;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#app
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.clear
{
clear: both;
height: 0;
overflow: hidden;
}
img
{
border: none;
margin: 0 auto;
vertical-align: middle;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img
{
vertical-align: middle;
}
a
{
font: inherit;
text-decoration: underline;
outline: 0;
}
a:hover
{
text-decoration: none;
}
select, input, textarea, button
{
box-sizing: border-box;
font: 100% 'Segoe UI', sans-serif;
margin: 0;
}
input[type=text], input:not([type]), textarea, .message-view .text
{
-webkit-touch-callout: default;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
table
{
border-collapse: collapse;
}
table, td, th
{
vertical-align: top;
font-size: 100%;
}
button, a.button
{
display: inline-block;
vertical-align: top;
cursor: default;
outline: 0;
color: black;
text-decoration: none;
background: transparent;
border-color: transparent;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
line-height: 26px;
padding: 2px 5px;
transition: all 0.2s ease-out;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
text-align: left;
/*white-space: nowrap;
height: 32px;*/
}
button img, a.button img
{
vertical-align: middle;
margin: -3px 0 0 -2px;
}
button.raised, a.button.raised
{
background: -moz-linear-gradient(top, #f2f0ef 0%, #e6e2e1 100%);
background: -webkit-linear-gradient(top, #f2f0ef 0%, #e6e2e1 100%);
border-color: #cac6c5 #bab7b4 #bab7b4 #cac6c5;
border-radius: 3px;
}
button:hover, a.button:hover
{
background: -moz-linear-gradient(top, #fdfbfa 0%, #efebea 100%);
background: -webkit-linear-gradient(top, #fdfbfa 0%, #efebea 100%);
border-color: #cac6c5 #bab7b4 #bab7b4 #cac6c5;
border-radius: 3px;
}
button:active, button.pressed, a.button:active, a.button.pressed
{
box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, 0.2);
background: -moz-linear-gradient(top, #efebea 0%, #fdfbfa 100%);
background: -webkit-linear-gradient(top, #efebea 0%, #fdfbfa 100%);
border-color: #bab7b4 #cac6c5 #cac6c5 #bab7b4;
border-radius: 3px;
}
button::-moz-focus-inner { border: 0; }
div
{
box-sizing: border-box;
}
.show-dropdown.hidden
{
display: none;
}
.show-dropdown .down
{
float: right;
z-index: 2;
display: block;
margin: -2px -6px -2px 0;
padding: 2px 6px 2px 0;
height: 26px;
width: 15px;
background: url(icons/down.png) 6px 13px no-repeat; /* FIXME closed.png, dropdown.png */
}
.dropdown
{
position: absolute;
cursor: default;
display: none;
outline: 0;
left: 0;
top: 0;
z-index: 10;
background: -moz-linear-gradient(top, #ebe9e8 0%, #c2bbb8 100%);
background: -webkit-linear-gradient(top, #ebe9e8 0%, #c2bbb8 100%);
padding: 3px;
border: 1px solid gray;
box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.25);
opacity: 0;
}
@keyframes fadeIn
{
from { opacity: 0; }
to { opacity: 1; }
}
.dropdown.visible
{
animation-name: fadeIn;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-timing-function: linear;
opacity: 1;
display: block;
}
.dropdown.window
{
background: white;
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
padding: 25px;
}
.dropdown.window .callout-top
{
background: url(icons/callout-top-arrow.png) 0 0 no-repeat;
width: 15px;
height: 10px;
position: absolute;
margin-left: -8px;
top: -10px;
left: 50%;
}
.dropdown .item
{
border-radius: 3px;
white-space: nowrap;
border: 1px solid transparent;
padding: 0 6px 0 3px;
position: relative;
}
.dropdown .item.over
{
background: rgba(0, 0, 0, 0.08);
border-color: #b7b0ac #cec8c6 #e6e3e2 #cec8c6;
border-color: rgba(0, 0, 0, 0.16) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.16);
}
.dropdown .item:active
{
box-shadow: inset 0 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.dropdown .item.disabled
{
opacity: 0.45;
}
.dropdown .item.disabled.over
{
background: transparent;
border-color: transparent;
}
.dropdown .item img
{
top: 3px;
position: absolute;
width: 22px;
height: 18px;
}
.dropdown .item.i16 img
{
top: 4px;
left: 6px;
width: 16px;
height: 16px;
}
.dropdown .item span
{
margin-left: 25px;
}
.dropdown .item .hotkey
{
float: right;
margin: 0 0 0 40px;
}
.dropdown .split
{
height: 2px;
margin: 2px 0;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.dropdown .split i
{
display: block;
height: 1px;
background: -moz-linear-gradient(left, rgba(188, 180, 177, 0) 0%, rgba(188, 180, 177, 1) 50%, rgba(188, 180, 177, 0) 100%);
background: -webkit-linear-gradient(left, rgba(188, 180, 177, 0) 0%, rgba(188, 180, 177, 1) 50%, rgba(188, 180, 177, 0) 100%);
}
.folder-list
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 20%;
/* right border */
border-right: 1px solid #aca9a7;
}
.top-border-gradient
{
position: absolute;
right: -1px;
width: 1px;
top: 0;
height: 30px;
background: -moz-linear-gradient(top, #f2edeb 0%, #aca9a7 100%);
background: -webkit-linear-gradient(top, #f2edeb 0%, #aca9a7 100%);
}
.bottom-border-gradient
{
position: absolute;
right: -1px;
width: 1px;
bottom: 0;
height: 30px;
background: -moz-linear-gradient(top, #aca9a7 0%, #f2edeb 100%);
background: -webkit-linear-gradient(top, #aca9a7 0%, #f2edeb 100%);
}
.folder-list .actions
{
padding: 5px;
height: 42px;
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
background: -webkit-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
.folder-list .actions .check-send
{
float: right;
}
.folder-list .listview
{
background: #f4f3f2;
overflow: auto;
outline: 0;
position: absolute;
left: 0;
right: 0;
top: 42px;
bottom: 0;
}
.folder-list .progress-bar
{
display: none;
}
.folder-list.progress-visible
{
bottom: 25px;
}
.folder-list.progress-visible .progress-bar
{
display: block;
height: 24px;
position: absolute;
left: 0;
right: 0;
bottom: -24px;
}
.progress-bar
{
cursor: default;
}
.folder-list .progress-bar div
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
.folder-list .progress-bar .pending
{
border-width: 1px;
border-style: solid;
border-color: #d0ccca #d1cdcb #d3cfcd #d1cdcb;
color: black;
box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, 0.1);
}
.folder-list .progress-bar .done
{
border-width: 1px;
border-style: solid;
border-color: #73a0c2 #547ba0 #33557c #547ba0;
background: -moz-linear-gradient(top, #90d7ff 0%, #76baf6 30%, #0098dd 31%, #43aced 100%);
background: -webkit-linear-gradient(top, #90d7ff 0%, #76baf6 30%, #0098dd 31%, #43aced 100%);
color: white;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.folder-list .account-header
{
background: -moz-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
padding: 1px 10px;
position: relative;
cursor: default;
border-bottom: 1px solid #aca9a7;
}
.folder-list .account-header .msg-count
{
display: none;
}
.folder-list .account-header.collapsed .cfg
{
display: none;
}
.folder-list .account-header.collapsed .icon
{
float: right;
position: static;
margin: 4px 4px 0 0;
}
.folder-list .account-header.collapsed .msg-count
{
display: block;
color: #626973;
float: right;
line-height: 22px;
font-weight: normal;
padding: 0 6px;
border-radius: 3px;
background: #f2edeb;
}
.folder-list .account-header:active
{
background: -moz-linear-gradient(top, #f3eeec 0%, #ffffff 100%);
background: -webkit-linear-gradient(top, #f3eeec 0%, #ffffff 100%);
}
.folder-list .account-header .cfg
{
opacity: 0;
position: absolute;
right: 10px;
top: 50%;
margin-top: -8px;
transition: all 0.2s ease-out;
width: 16px;
height: 16px;
background: url(icons/config_small.png);
}
.folder-list .account-header .icon
{
position: absolute;
right: 32px;
top: 50%;
margin-top: -8px;
width: 16px;
height: 16px;
}
.folder-list .account-header .icon.warning
{
background: url(icons/warning.png);
}
@keyframes rotate
{
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.folder-list .account-header .icon.loading
{
background: url(icons/reload_static.png); /* reload.png is an APNG, unsupported in Chrome */
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.folder-list .account-header:hover .cfg
{
opacity: 1;
}
.folder-list .account-header .cfg.pressed
{
opacity: 1;
background: url(icons/config_small_selected.png);
}
.folder-list .account-folders
{
overflow: hidden;
background: #f4f3f2;
transition: all 0.2s ease-out;
border-bottom: 1px solid #aca9a7;
position: relative;
}
.folder-list > .account-folders:last-child,
.folder-list .account:last-child .account-folders
{
border-bottom: 0;
}
.folder-list .account-folders.collapsed
{
height: 0;
border-bottom: 0;
}
.folder-list .account-folders .visible-part.animating
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.folder-list .account-folders .folder
{
padding: 1px 4px 1px 14px;
cursor: pointer;
border: 1px solid transparent;
position: relative;
}
.folder-list .account-folders .folder .msg-count
{
color: #626973;
position: absolute;
right: 4px;
top: 2px;
bottom: 2px;
line-height: 22px;
font-weight: normal;
padding: 0 6px;
border-radius: 2px;
}
.folder-list .account-folders .folder:hover span
{
color: #285078;
text-decoration: underline;
}
.folder-list .account-folders .folder.selected
{
background: #9bc7e0;
color: white;
}
.folder-list .account-folders .folder.selected .msg-count
{
background: #b9d8e9;
}
.folder-list .account-folders .folder:active,
.folder-list .listview:focus .account-folders .folder.selected
{
background: #43ace8;
border: 1px dotted gray;
}
.folder-list .account-folders .folder:active .msg-count,
.folder-list .listview:focus .account-folders .folder.selected .msg-count
{
background: #7bc5ef;
}
.folder-list .account-folders .folder img
{
vertical-align: middle;
margin-top: -2px;
}
.folder-list .account-folders .folder.with-unread
{
font-weight: bold;
}
.tab-panel
{
position: absolute;
left: 20%;
right: 0;
top: 0;
bottom: 0;
cursor: default;
}
.tab-panel .tab-bar
{
height: 35px;
padding: 0 2px;
border-bottom: 1px solid #b0adac;
background: -moz-linear-gradient(top, #e9e7e5 0%, #dddad8 100%);
background: -webkit-linear-gradient(top, #e9e7e5 0%, #dddad8 100%);
}
.tab-panel .tab-bar .tab
{
height: 32px;
line-height: 30px;
float: left;
width: 180px;
border: 1px solid #969493;
border-radius: 5px 5px 0 0;
margin: 3px 2px 0;
padding: 0 28px 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: -moz-linear-gradient(top, #f3f1f1 0%, #e6e2e2 100%);
background: -webkit-linear-gradient(top, #f3f1f1 0%, #e6e2e2 100%);
transition: all 0.2s ease-out;
position: relative;
opacity: 1;
}
.tab-panel .tab-bar .tab.noclose
{
padding: 0 8px;
}
.tab-panel .tab-bar .tab img.i16
{
vertical-align: middle;
margin-top: -4px;
}
.tab-panel .tab-bar .tab .close
{
display: block;
z-index: 10;
position: absolute;
top: 8px;
right: 6px;
width: 16px;
height: 16px;
background: url(icons/close.png) no-repeat;
}
.tab-panel .tab-bar .tab .close:hover
{
background: url(icons/close_hover.png) no-repeat;
}
.tab-panel .tab-bar .tab.selected
{
border-bottom: 1px solid transparent;
background: #f6f1ef -moz-linear-gradient(top, #f6f1ef 0%, #f6f1ef 100%);
background: #f6f1ef -webkit-linear-gradient(top, #f6f1ef 0%, #f6f1ef 100%);
}
.tab-panel .tab-bar .tab:hover
{
background: -moz-linear-gradient(top, #fefefe 0%, #efecec 100%);
background: -webkit-linear-gradient(top, #fefefe 0%, #efecec 100%);
}
.tab-panel .tab-bar .tab.selected:hover
{
background: -moz-linear-gradient(top, #fefefe 0%, #f6f1ef 100%);
background: -webkit-linear-gradient(top, #fefefe 0%, #f6f1ef 100%);
}
.tab-panel .tab-content
{
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
}
.message-on-right .message-list
{
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 45%;
}
.message-on-bottom .message-list
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 50%;
}
.message-invisible .message-list
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.message-list
{
/* right border */
border-right: 1px solid #aca9a7;
}
.message-list .actions
{
padding: 5px;
height: 42px;
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
background: -webkit-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
.message-list .actions .searchbox
{
float: left;
height: 32px;
border-style: solid;
border-width: 1px;
border-color: #bab7b4 #cac6c5 #cac6c5 #bab7b4;
border-radius: 3px;
background: url(icons/search.png) 5px 6px no-repeat, -moz-linear-gradient(top, #efefef 0%, #ffffff 10%, #ffffff 100%);
background: url(icons/search.png) 5px 6px no-repeat, -webkit-linear-gradient(top, #efefef 0%, #ffffff 10%, #ffffff 100%);
padding: 1px 4px 1px 24px;
margin: 0 4px;
}
.message-list .actions .searchbox input
{
border: 0;
background: transparent;
outline: 0;
}
.message-list .actions .threads
{
float: left;
}
.message-list .actions .list-sort
{
float: right;
}
.message-list .actions .settings
{
float: right;
}
.message-list .listview
{
background: white;
overflow: auto;
outline: 0;
position: absolute;
left: 0;
right: 0;
top: 42px;
bottom: 0;
padding: 30px 0 0 0;
}
.message-list .listview .day
{
height: 30px;
padding-top: 2px;
font-weight: bold;
text-align: center;
background: -moz-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #f3eeec 100%);
border-top: 1px solid #dadce0;
border-bottom: 1px solid #aca9a7;
}
.message-list .listview .day:active
{
background: -moz-linear-gradient(top, #f3eeec 100%, #ffffff 0%);
background: -webkit-linear-gradient(top, #f3eeec 100%, #ffffff 0%);
}
.message-list .listview .day.collapsed
{
border-bottom: 0;
}
.message-list .listview .first-day
{
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
border-top: 0 !important;
}
.message-list .listview .message
{
height: 60px;
position: relative;
line-height: 28px;
border-bottom: 1px solid #dadce0;
}
.message-on-bottom .message-list .listview .message,
.message-invisible .message-list .listview .message
{
height: 30px;
}
.message-list .listview .thread .message
{
height: 30px;
background: #f5f6f8;
border-bottom: 1px solid #dadce0;
}
.message-list .listview .message.unread
{
font-weight: bold;
}
.message-list .listview .message.unseen, .message-list .listview .message.unseen .from
{
font-weight: bold;
color: #0059b3;
}
.message-list .listview .message.unseen .time
{
color: #0059b3;
}
.message-list .listview .message.selected
{
background: #9bc7e0;
color: white;
}
.message-list .listview:focus .message.selected
{
color: white;
background: #43ace8;
}
.message-list .listview .day-list.collapsed
{
display: none;
}
.message-list .listview .day-list:last-child .message:last-child
{
border-bottom: 1px solid #dadce0;
}
.message-list .listview .thread .message:last-child
{
border-bottom: 1px solid #dadce0;
}
.message-list .listview .day-list .message:last-child
{
border-bottom: 0;
}
.message-list .listview .day-list .thread:last-child .message:last-child
{
border-bottom: 0;
}
.message-list .listview .day-list:last-child .thread:last-child .message:last-child
{
border-bottom: 1px solid #dadce0;
}
.message-list .listview .message .icon
{
position: absolute;
left: 20%;
width: 20px;
height: 30px;
background: url(icons/mail_read.png) 0px 7px no-repeat;
}
.message-list .listview .message.unread .icon,
.message-list .listview .message.unseen .icon
{
background: url(icons/mail_unread.png) 0px 7px no-repeat;
}
.message-list .listview .message.unloaded .icon
{
background: url(icons/document_read.png) 0px 7px no-repeat;
}
.message-on-right .message-list .listview .message .icon
{
display: none;
}
.message-list .listview .message .subject
{
position: absolute;
top: 0;
left: 21px;
right: 4px;
height: 28px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.message-on-right .message-list .listview .message .subject
{
padding-left: 0 !important;
}
.message-on-bottom .message-list .listview .message .subject,
.message-invisible .message-list .listview .message .subject
{
padding-left: 20px;
left: 20%;
width: 60%;
}
.message-on-right .message-list .listview .thread .message .subject
{
display: none;
}
.message-list .listview .message .expand
{
position: absolute;
left: 5px;
top: 10px;
width: 16px;
height: 16px;
background: url(icons/group_closed.png) no-repeat;
}
.message-list .listview .message .expand.collapse
{
background: url(icons/group_open.png) no-repeat;
}
.message-on-bottom .message-list .listview .message.thread0 .from,
.message-invisible .message-list .listview .message.thread0 .from
{
padding-right: 20px;
}
.message-on-bottom .message-list .listview .message .expand,
.message-invisible .message-list .listview .message .expand
{
position: absolute;
left: auto;
right: 80%;
width: 15px;
height: 30px;
}
.message-list .listview .message .bullet
{
position: absolute;
left: 2px;
top: 36px;
width: 16px;
height: 16px;
background: url(icons/bullet_read.png) no-repeat;
}
.message-on-bottom .message-list .listview .message .bullet,
.message-invisible .message-list .listview .message .bullet
{
top: 7px;
}
.message-list .listview .thread .message .bullet
{
top: 7px;
}
.message-list .listview .message.unread .bullet
{
background-image: url(icons/bullet_unread.png);
}
.message-list .listview .message.replied .bullet
{
background-image: url(icons/bullet_replied_read.png);
}
.message-list .listview .message.unread.replied .bullet
{
background-image: url(icons/bullet_replied_unread.png);
}
.message-list .listview .message.unseen .bullet
{
background-image: url(icons/bullet_unseen.png);
}
.message-list .listview .message.pinned .bullet
{
background-image: url(icons/bullet_pinned.png);
}
.message-list .listview .message.pinned.replied .bullet
{
background-image: url(icons/bullet_replied_pinned.png);
}
.message-list .listview .message.sent .bullet
{
background-image: url(icons/bullet_sent_read.png);
}
.message-list .listview .message.sent.pinned .bullet
{
background-image: url(icons/bullet_sent_pinned.png);
}
.message-list .listview .message .from
{
position: absolute;
top: 28px;
left: 21px;
right: 120px;
height: 30px;
color: #464646;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.message-on-bottom .message-list .listview .message .from,
.message-invisible .message-list .listview .message .from
{
top: 0;
right: 80%;
left: 21px !important;
}
.message-list .listview .thread .message .from
{
top: 0;
left: 21px;
right: 4px;
height: 28px;
}
.message-on-bottom .message-list .listview .thread .message .from,
.message-invisible .message-list .listview .thread .message .from
{
top: 0;
left: 21px;
right: 4px;
height: 28px;
}
.message-list .listview .message .size
{
display: none;
}
.message-on-bottom .message-list .listview .message .size,
.message-invisible .message-list .listview .message .size
{
display: block;
position: absolute;
top: 0;
left: 82%;
width: 6%;
padding-right: 5px;
height: 30px;
text-align: right;
font-weight: normal;
}
.message-list .listview .message .attach
{
position: absolute;
top: 36px;
right: 100px;
width: 16px;
height: 16px;
background: url(icons/mail_attachments.png);
}
.message-on-bottom .message-list .listview .message .attach,
.message-invisible .message-list .listview .message .attach
{
top: 7px;
left: 88%;
}
.message-list .listview .thread .message .attach
{
top: 7px;
}
.message-list .listview .message .time
{
position: absolute;
top: 28px;
right: 6px;
height: 30px;
color: #6d6d6d;
font-weight: normal;
text-align: right;
}
.message-on-bottom .message-list .listview .message .time,
.message-invisible .message-list .listview .message .time
{
top: 0;
left: 90%;
}
.message-list .listview .thread .message .time
{
top: 0;
}
.message-list .listview .message.selected .from,
.message-list .listview .message.selected .time
{
color: white;
}
.message-on-right .message-view
{
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 55%;
}
.message-on-bottom .message-view
{
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
}
.message-on-bottom .message-view .actions
{
border-top: 1px solid #aca9a7;
}
.message-invisible .message-view
{
display: none;
}
.message-view .actions
{
padding: 5px 5px 4px;
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
background: -webkit-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
.message-view
{
display: flex;
flex-direction: column;
}
.message-view .nomail
{
display: none;
box-shadow: inset 20px 20px 60px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.message-view.no-mail-shown .nomail
{
flex: 1;
flex-direction: column;
display: flex;
}
.message-view .nomail .flex1
{
flex: 1;
}
.message-view .nomail .middle
{
text-align: center;
}
.message-view .nomail .txt
{
color: #858a9b;
font-weight: bold;
font-size: 28px;
margin-top: 25px;
}
.message-view .text
{
flex: 1;
}
.message-view .text pre, .message-view .text p
{
margin: 0 0 .5em 0;
}
.message-view .text.plain
{
white-space: pre-wrap;
}
.message-view .blocked-images
{
flex: none;
background: -moz-linear-gradient(top, #f6e0a4 0%, #f5dc99 100%);
background: -webkit-linear-gradient(top, #f6e0a4 0%, #f5dc99 100%);
padding: 5px;
line-height: 30px;
border-bottom: 1px solid #bab7b5;
color: #464646;
}
.message-view .blocked-images .button
{
margin: 0 20px;
}
.message-view .blocked-images label
{
white-space: nowrap;
}
.message-view.no-mail-shown .blocked-images
{
display: none;
}
.message-view .headers
{
background: -moz-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
background: -webkit-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
padding: 0 20px;
border-bottom: 1px solid #bab7b5;
max-height: 50%;
overflow-x: hidden;
overflow-y: auto;
}
.message-view.no-mail-shown .headers
{
display: none;
}
.message-view .headers .top
{
margin: 20px 0;
}
.message-view .headers .top .subject
{
font-weight: bold;
font-size: 22px;
color: #464646;
}
.message-view .headers .top .time
{
float: right;
margin: 1px 0 0 10px;
white-space: nowrap;
}
.message-view .headers .top .pin
{
float: right;
width: 16px;
height: 16px;
margin: 4px 0 0 10px;
opacity: 0.5;
background: url(icons/mail_unpinned2.png);
transition: all 0.2s ease-out;
}
.message-view .headers .top .pin:hover
{
opacity: 1;
}
.message-view .headers .top .pin.pressed
{
background: url(icons/mail_pinned.png);
}
.message-view .headers .header-table
{
display: table;
margin: 0 0 20px 0;
}
.message-view .headers .header
{
display: table-row;
}
.message-view .headers .header > div
{
display: table-cell;
line-height: 32px;
vertical-align: top;
}
.message-view .headers .header .field
{
font-weight: bold;
padding: 0 20px 0 0;
}
.message-view .text
{
background: white;
overflow: auto;
padding: 20px;
}
.message-view.no-mail-shown .text
{
display: none;
}
.message-view .text p
{
margin: 0 0 16px 0;
}
.message-view .quick-reply
{
border-top: 1px solid #bab7b5;
padding: 8px 20px;
}
.message-view.no-quick .quick-reply,
.message-view.no-mail-shown .quick-reply
{
display: none;
}
.message-view .quick-reply textarea
{
display: block;
height: 100px;
border: 1px solid gray;
width: 100%;
font: 16px/20px Consolas;
}
.message-view .quick-reply .btns
{
float: right;
margin: 8px 0 0;
}
.message-on-bottom .message-view
{
padding-right: 40%;
}
.message-on-bottom .message-view.no-quick,
.message-on-bottom .message-view.no-mail-shown
{
padding-right: 0;
}
.message-on-bottom .message-view .quick-reply
{
display: flex;
flex-direction: column;
border-left: 1px solid #bab7b5;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40%;
}
.message-on-bottom .message-view.no-quick .quick-reply,
.message-on-bottom .message-view.no-mail-shown .quick-reply
{
display: none;
}
.message-on-bottom .message-view .quick-reply textarea
{
flex: 1;
}
.message-on-bottom .message-view .quick-reply .btns
{
text-align: right;
float: none;
}
.window .title
{
font-weight: bold;
font-size: 20px;
margin: 0 0 20px;
}
.window.list-sort
{
width: 400px;
}
.window.list-sort .sorting
{
margin-left: 20px;
}
.window.list-sort .sorting select,
.window.list-sort .sorting label
{
display: block;
width: 100%;
margin: 8px 0 0 0;
}
.window.list-sort .show
{
padding-left: 4px;
margin: 10px 0 0 -4px;
}
.window.list-sort .show .button
{
display: block;
margin-left: -4px;
}
.window.list-sort .show .expand
{
display: block;
float: left;
margin: 10px 7px 0 4px;
width: 4px;
height: 7px;
background: url(icons/right.png) no-repeat;
}
.window.list-sort .show .collapse
{
display: block;
float: left;
margin: 12px 6px 0 2px;
width: 7px;
height: 5px;
background: url(icons/down.png) no-repeat;
}
.window.list-sort .show-checks
{
padding: 8px 0 0 0;
}
.window.list-sort .show-checks label
{
display: block;
float: left;
width: 150px;
margin: 0 0 8px 0;
white-space: nowrap;
}
.window.list-sort .show-checks label:nth-child(2n+1)
{
width: 190px;
}
.compose
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.compose .actions
{
padding: 5px;
height: 42px;
background: -moz-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
background: -webkit-linear-gradient(top, #f6f1ef 0%, #e8e5e3 100%);
border-bottom: 1px solid #aca9a7;
}
.compose .flex
{
display: flex;
flex-direction: column;
position: absolute;
top: 42px;
left: 0;
right: 0;
bottom: 0;
}
.compose .flex .headers
{
flex: none;
}
.compose .flex .text
{
flex: 1;
}
.compose .headers
{
position: relative;
}
.compose .headers .headers-table
{
display: table;
width: 80%;
padding: 4px 0;
}
.compose .headers .header
{
display: table-row;
}
.compose .headers .header > div
{
display: table-cell;
padding: 4px;
line-height: 32px;
vertical-align: top;
}
.compose .headers .header .field
{
font-weight: bold;
padding: 4px 20px 4px 10px;
width: 1%;
}
.compose .headers .header .value input, .compose .headers .header .value select
{
width: 100%;
outline: 0;
height: 32px;
}
.compose .headers .header .value input
{
border: 1px solid #cac6c5;
}
.compose .headers .attach
{
position: absolute;
left: 80%;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.compose .headers .attach .no-attach
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(icons/attachment_bg2.png) 50% 50% no-repeat;
opacity: 0.5;
}
.compose .headers .attach .no-attach:hover
{
opacity: 1;
}
.compose .headers .attach input
{
z-index: 2;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
.compose .headers .attach .attach-list
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
outline: 0;
background: white;
border-left: 1px solid #cac6c5;
overflow: auto;
padding-top: 30px;
}
.compose .headers .attach .attach-list .title,
.compose .headers .attach .attach-list .attachment
{
height: 30px;
position: relative;
}
.compose .headers .attach .attach-list .title
{
border-bottom: 1px solid #cac6c5;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.compose .headers .attach .attach-list .title .name .button
{
position: absolute; top: 0; right: 4px; bottom: 0;
}
.compose .headers .attach .attach-list .title > div
{
background: -moz-linear-gradient(left, #e0dddb 0%, #eae9e8 100%);
background: -webkit-linear-gradient(left, #e0dddb 0%, #eae9e8 100%);
}
.compose .headers .attach .attach-list .name,
.compose .headers .attach .attach-list .size
{
position: absolute;
top: 0;
bottom: 0;
padding: 4px;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
white-space: nowrap;
}
.compose .headers .attach .attach-list .name
{
left: 0;
width: 70%;
}
.compose .headers .attach .attach-list .size
{
position: absolute;
left: 70%;
width: 30%;
top: 0;
bottom: 0;
}
.compose .headers .attach .attach-list .attachment.selected
{
background: #9bc7e0;
color: white;
}
.compose .headers .attach .attach-list:focus .attachment.selected
{
color: white;
background: #43ace8;
}
.compose .text textarea
{
width: 100%;
height: 100%;
font: 16px/20px Consolas;
outline: 0;
padding: 4px;
border: 0;
border-top: 1px solid #cac6c5;
}
.dropdown.window .split
{
margin: 10px 0;
}
#dropdown-settings
{
width: 300px;
}
#dropdown-settings .text
{
margin: 0 0 10px 0;
}
#dropdown-settings .fields select,
#dropdown-settings .fields label
{
display: block;
width: 100%;
margin: 8px 0 0 0;
}
#dropdown-settings .layouts .button span
{
display: block;
width: 66px;
height: 62px;
}
#dropdown-settings .layouts .mail-message-on-bottom.button span
{
background: url(icons/layout_mail_vertical.png) no-repeat;
}
#dropdown-settings .layouts .mail-message-on-right.button span
{
background: url(icons/layout_mail_sidebyside.png) no-repeat;
}
#dropdown-settings .layouts .mail-message-invisible.button span
{
background: url(icons/layout_mail_list.png) no-repeat;
}
#dropdown-settings .layouts .mail-message-on-bottom.button.selected span
{
background: url(icons/layout_mail_vertical_selected.png) no-repeat;
}
#dropdown-settings .layouts .mail-message-on-right.button.selected span
{
background: url(icons/layout_mail_sidebyside_selected.png) no-repeat;
}
#dropdown-settings .layouts .mail-message-invisible.button.selected span
{
background: url(icons/layout_mail_list_selected.png) no-repeat;
}