1450 lines
24 KiB
CSS
1450 lines
24 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;
|
|
}
|
|
|
|
.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;
|
|
color: 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;
|
|
}
|
|
|
|
table
|
|
{
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table, td, th
|
|
{
|
|
vertical-align: top;
|
|
font-size: 100%;
|
|
}
|
|
|
|
button, a.button
|
|
{
|
|
display: inline-block;
|
|
cursor: default;
|
|
vertical-align: middle;
|
|
outline: 0;
|
|
text-decoration: none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
box-sizing: border-box;
|
|
line-height: 26px;
|
|
padding: 2px 3px;
|
|
transition: all 0.2s ease-out;
|
|
text-overflow: ellipsis;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
max-width: 600px;
|
|
/*white-space: nowrap;
|
|
height: 32px;*/
|
|
}
|
|
|
|
button img, a.button img
|
|
{
|
|
vertical-align: middle;
|
|
margin-top: -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; }
|
|
|
|
a.button .img
|
|
{
|
|
display: inline-block;
|
|
width: 22px;
|
|
height: 18px;
|
|
vertical-align: top;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
div
|
|
{
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.show-dropdown .down
|
|
{
|
|
float: right;
|
|
z-index: 2;
|
|
display: block;
|
|
margin: 0 -4px 0 0;
|
|
padding: 0 4px 0 0;
|
|
height: 26px;
|
|
width: 15px;
|
|
background: url(icons/down.png) 4px 11px 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;
|
|
}
|
|
|
|
.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:hover
|
|
{
|
|
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:hover
|
|
{
|
|
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;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.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
|
|
{
|
|
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 .account-folders .folder.pressed
|
|
{
|
|
background: #43ace8;
|
|
border: 1px dotted gray;
|
|
}
|
|
|
|
.folder-list .account-folders .folder:active .msg-count,
|
|
.folder-list .account-folders .folder.pressed .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: 40%;
|
|
}
|
|
|
|
.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;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.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 .threads .img
|
|
{
|
|
background: url(icons/thread.png) no-repeat;
|
|
}
|
|
|
|
.message-list .actions .threads.checked .img
|
|
{
|
|
display: inline-block;
|
|
background: url(icons/thread_selected.png) no-repeat;
|
|
width: 22px;
|
|
height: 18px;
|
|
vertical-align: top;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.message-list .actions .list-sort
|
|
{
|
|
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 .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 .message:last-child
|
|
{
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.message-list .listview .day-list:last-child .message:last-child
|
|
{
|
|
border-bottom: 1px solid #dadce0;
|
|
}
|
|
|
|
.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-bottom .message-list .listview .message .subject,
|
|
.message-invisible .message-list .listview .message .subject
|
|
{
|
|
left: 20%;
|
|
width: 60%;
|
|
}
|
|
|
|
.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 .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 .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%;
|
|
}
|
|
|
|
.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 .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 .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: 60%;
|
|
}
|
|
|
|
.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 .vert-split
|
|
{
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.message-view .row
|
|
{
|
|
display: table-row;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.message-view .row.full
|
|
{
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.message-view .nomail
|
|
{
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
box-shadow: inset 20px 20px 60px 0 rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.message-view .nomail img
|
|
{
|
|
/*display: block;*/
|
|
}
|
|
|
|
.message-view .nomail .txt
|
|
{
|
|
color: #858a9b;
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.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 .actions .action-read .img
|
|
{
|
|
background: url(icons/read.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-read .txt:before
|
|
{
|
|
content: "Read";
|
|
}
|
|
|
|
.message-view .actions .action-read.checked .img
|
|
{
|
|
background: url(icons/read_selected.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-read.checked .txt:before
|
|
{
|
|
content: "Unread";
|
|
}
|
|
|
|
.message-view .actions .action-spam .img
|
|
{
|
|
background: url(icons/spam.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-spam .txt:before
|
|
{
|
|
content: "Spam";
|
|
}
|
|
|
|
.message-view .actions .action-spam.checked .img
|
|
{
|
|
background: url(icons/spam_selected.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-spam.checked .txt:before
|
|
{
|
|
content: "Not Spam";
|
|
}
|
|
|
|
.message-view .actions .action-delete .img
|
|
{
|
|
background: url(icons/delete.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-delete .txt:before
|
|
{
|
|
content: "Delete";
|
|
}
|
|
|
|
.message-view .actions .action-delete.checked .img
|
|
{
|
|
background: url(icons/delete_selected.png) no-repeat;
|
|
}
|
|
|
|
.message-view .actions .action-delete.checked .txt:before
|
|
{
|
|
content: "Undelete";
|
|
}
|
|
|
|
.message-view .message
|
|
{
|
|
display: table-cell;
|
|
position: relative;
|
|
}
|
|
|
|
.message-view .message .flex
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.message-view .message .flex .headers
|
|
{
|
|
flex: none;
|
|
}
|
|
|
|
.message-view .message .flex .text
|
|
{
|
|
flex: 1;
|
|
}
|
|
|
|
.message-view .message .headers
|
|
{
|
|
background: -moz-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
|
|
background: -webkit-linear-gradient(top, #fef9f7 0%, #f7f2f0 100%);
|
|
padding: 20px;
|
|
border-bottom: 1px solid #bab7b5;
|
|
max-height: 50%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.message-view .message .headers .top
|
|
{
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
.message-view .message .headers .top .subject
|
|
{
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
color: #464646;
|
|
}
|
|
|
|
.message-view .message .headers .top .time
|
|
{
|
|
float: right;
|
|
margin: 1px 0 0 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.message-view .message .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 .message .headers .top .pin:hover
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.message-view .message .headers .top .pin.pressed
|
|
{
|
|
background: url(icons/mail_pinned.png);
|
|
}
|
|
|
|
.message-view .message .headers .header-table
|
|
{
|
|
display: table;
|
|
}
|
|
|
|
.message-view .message .headers .header
|
|
{
|
|
display: table-row;
|
|
}
|
|
|
|
.message-view .message .headers .header > div
|
|
{
|
|
display: table-cell;
|
|
line-height: 32px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.message-view .message .headers .header .field
|
|
{
|
|
font-weight: bold;
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.message-view .message .text
|
|
{
|
|
background: white;
|
|
overflow: auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.message-view .message .text p
|
|
{
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 .text textarea
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
font: 16px/20px Consolas;
|
|
outline: 0;
|
|
padding: 4px;
|
|
border: 0;
|
|
border-top: 1px solid #cac6c5;
|
|
}
|