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