templates/base.html

<html>
<head>
<style>
body {
    font-family: sans-serif;
    font-size: 10pt;
    background-color: {{ palette.window.darker(120) }};
    color: {{ palette.windowText }};
    padding: 0;
    margin: 0;
}
h1 {
    font-size: 120%;
    text-align: center;
    padding: 0;
    margin: 0;
}
h2 {
    font-size: 100%;
    text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
    margin: 0;
    padding: 0;
    padding-top: 0.5em;
}
h2:first-child {
    padding-top: 0;
}

/* Task list */
ul.tasks {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.tasks > li {
    margin: 0;
    padding: 2px;
    border: 1px solid {{ palette.shadow }};
    border-bottom: 1px solid {{ palette.base.darker(120) }};
    border-top: none;
    background-color: {{ palette.base }};
}
ul.tasks > li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top: 1px solid {{ palette.shadow }};
}
ul.tasks > li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: 1px solid {{ palette.shadow }};
}
ul.tasks .note {
    background-color: {{ palette.alternateBase }};
}

ul.tasks .keyword {
    border: 1px solid #aaf;
    border-radius: 3px;
    background-color: #eff;
    padding: 0 3px;
    color: #88f;
}

ul.tasks h1 {
    text-align: left;
}
/* /Task list */

.group1 {
    margin: 6px;
    padding: 6px;
}

/* Due date */
.due-date {
    float: right;
    border-radius: 3px;
    padding: 0 2px;
}

.due-date-overdue {
    background: -webkit-gradient(linear, left top, left bottom,
        from(#f00),
        to(#f77)
        );
    color: white;
}

.due-date-today {
    background: -webkit-gradient(linear, left top, left bottom,
        from(#f80),
        to(#fc8)
        );
}

.due-date-week {
    background: -webkit-gradient(linear, left top, left bottom,
        from(#ff0),
        to(#ff8)
        );
}
/* /Due date */

.toolbar {
    float: right;
    height: 1em;
    vertical-align: middle;
}

.description-icon {
    vertical-align: middle;
}

.description {
    padding-top: 6px;
    display: none;
}

input {
    margin: 0;
    padding: 0;
    height: 1em;
}

/* notification */
#notification {
    display: none;
    background: -webkit-gradient(linear, left top, left bottom,
        from(#ffe68e),
        to(#ffd53d)
        );
    color: black;
    border: 1px solid #ffc800;
    border-radius: 5px;
    padding: 3px;
    position: fixed;
    top: 2px;
    right: 2px;
}

</style>
<script src="jquery.js"></script>
<script>
var gNotificationTimer = null;
var gUndoFunction = null;

var NOTIFICATION_TIMEOUT = 5000;
var NOTIFICATION_ANIM_DURATION = 400;

function toggleVisibility(itemId) {
    var speed = 200;
    $("#" + itemId).slideToggle(speed);
}

function showNotification(msg, undoFunction) {
    $("#notification-text").html(msg);
    gUndoFunction = undoFunction;
    $("#notification").fadeIn(NOTIFICATION_ANIM_DURATION);
    gNotificationTimer = setTimeout(hideNotification, NOTIFICATION_TIMEOUT);
}

function hideNotification() {
    $("#notification").fadeOut(NOTIFICATION_ANIM_DURATION);
    clearTimeout(gNotificationTimer);
}

function setStatus(taskId, status) {
    qtWindow.setTaskStatus(taskId, status);
    var hiddenElements = new Array();
    var element = $("#task-" + taskId);
    var ul = element.parent();
    var group2 = ul.parent(".group2");
    var group1 = group2.parent(".group1");

    element.hide();
    hiddenElements.push(element);
    if (ul.children("li:visible").length == 0) {
        group2.hide();
        hiddenElements.push(group2);
    }
    if (group1.children(".group2:visible").length == 0) {
        group1.hide();
        hiddenElements.push(group1);
    }

    showNotification("Task marked as " + status + ".", function() {
        for(idx in hiddenElements) {
            hiddenElements[idx].show();
        }
        var checkbox = $("#task-" + taskId + " input:checkbox")[0];
        if (status == "new") {
            qtWindow.setTaskStatus(taskId, "done");
            checkbox.checked = true;
        } else {
            qtWindow.setTaskStatus(taskId, "new");
            checkbox.checked = false;
        }
    });
}
</script>
</head>
<body>
<div id="notification"><span id="notification-text"></span> <a id="notification-undo" onclick="gUndoFunction(); hideNotification(); return false" href="#">Undo</a></div>
{% block content %}{% endblock %}
</body>
</html>