[Dovecot] Quota template - better compatibility (#3783)
MS Outlook, Thunderbird, EMClient, SOGo, Roundcubemaster
parent
43fef9973f
commit
37e4ad7c1b
|
@ -1,53 +1,73 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div {
|
||||
/* width based on text fill*/
|
||||
display: inline-block;
|
||||
}
|
||||
#progressbar {
|
||||
color: #000;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
}
|
||||
{% if (percent >= 95) %}
|
||||
#progressbar > div {
|
||||
color: #fff;
|
||||
background-color: #FF0000;
|
||||
text-align: center;
|
||||
padding: 0.01em;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% elif (percent < 95) and (percent >= 80) %}
|
||||
#progressbar > div {
|
||||
color: #fff;
|
||||
background-color: #FF8C00;
|
||||
text-align: center;
|
||||
padding: 0.01em;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% else %}
|
||||
#progressbar > div {
|
||||
color: #fff;
|
||||
background-color: #00B000;
|
||||
text-align: center;
|
||||
padding: 0.01em;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% endif %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>Hi {{username}}!<br><br>
|
||||
Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br>
|
||||
<div id="progressbar">
|
||||
<div>{{percent}}%</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<style>
|
||||
body {
|
||||
font-family: Calibri, Arial, Verdana;
|
||||
}
|
||||
table {
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
<!--[if mso]>
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
<![endif]-->
|
||||
}
|
||||
tr {
|
||||
display: flex;
|
||||
}
|
||||
#progressbar {
|
||||
color: #000;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
}
|
||||
{% if (percent >= 95) %}
|
||||
#progressbar {
|
||||
color: #fff;
|
||||
background-color: #FF0000;
|
||||
text-align: center;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% elif (percent < 95) and (percent >= 80) %}
|
||||
#progressbar {
|
||||
color: #fff;
|
||||
background-color: #FF8C00;
|
||||
text-align: center;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% else %}
|
||||
#progressbar {
|
||||
color: #fff;
|
||||
background-color: #00B000;
|
||||
text-align: center;
|
||||
width: {{percent}}%;
|
||||
}
|
||||
{% endif %}
|
||||
#graybar {
|
||||
background-color: #D8D8D8;
|
||||
width: {{100 - percent}}%;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color: #858585;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, a:active {
|
||||
color: #4a81bf;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
Hi {{username}}!<br /><br />
|
||||
Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br /><br />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="progressbar">{{percent}}%</td>
|
||||
<td id="graybar"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue