[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 {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
}
|
}
|
||||||
|
div {
|
||||||
|
/* width based on text fill*/
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
#progressbar {
|
#progressbar {
|
||||||
background-color: #f0f0f0;
|
color: #000;
|
||||||
border-radius: 0px;
|
background-color: #f1f1f1;
|
||||||
padding: 0px;
|
width: 100%;
|
||||||
width:50%;
|
|
||||||
}
|
}
|
||||||
|
{% if (percent >= 95) %}
|
||||||
#progressbar > div {
|
#progressbar > div {
|
||||||
background-color: #ff9c9c;
|
color: #fff;
|
||||||
|
background-color: #FF0000;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.01em;
|
||||||
width: {{percent}}%;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div>
|
||||||
<p>Hi {{username}}!<br><br>
|
<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>
|
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 id="progressbar">
|
||||||
<div></div>
|
<div>{{percent}}%</div>
|
||||||
</div>
|
</div>
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue