[Dovecot] Quota template - colored bar based on % (#3525)
* [Dovecot] Quarantine template: css for mobile devices * [Dovecot] Colored quota bar based on % formatting htmlmaster
parent
099be31928
commit
fe05e24579
|
@ -4,26 +4,50 @@
|
|||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div {
|
||||
/* width based on text fill*/
|
||||
display: inline-block;
|
||||
}
|
||||
#progressbar {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 0px;
|
||||
padding: 0px;
|
||||
width:50%;
|
||||
color: #000;
|
||||
background-color: #f1f1f1;
|
||||
width: 100%;
|
||||
}
|
||||
{% if (percent >= 95) %}
|
||||
#progressbar > div {
|
||||
background-color: #ff9c9c;
|
||||
color: #fff;
|
||||
background-color: #FF0000;
|
||||
text-align: center;
|
||||
padding: 0.01em;
|
||||
width: {{percent}}%;
|
||||
height: 20px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
{% 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></div>
|
||||
<div>{{percent}}%</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue