/* infinite-backlog project styles.
 *
 * Bulma does the layout and the components; this file holds only the rules
 * that Bulma has no class for. Keep it small.
 */

/* The state of a task, as a colour on the left edge of its card. Bulma gives
 * no such helper.
 */
.task-item {
  border-left: 4px solid var(--bulma-border);
}

.task-item.is-state-open {
  border-left-color: var(--bulma-link);
}

.task-item.is-state-done {
  border-left-color: var(--bulma-success);
}

.task-item.is-state-gone {
  border-left-color: var(--bulma-warning);
}

/* A completed card stays visible until the next page load, thus it must not
 * ask for attention.
 */
.task-item.is-state-done .task-title {
  text-decoration: line-through;
  opacity: 0.7;
}

/* The htmx indicator of a card: htmx makes .htmx-indicator visible while its
 * request runs.
 */
.task-item .htmx-indicator {
  margin-left: 0.5rem;
}

/* The dates and the counters of a task read better in one line of small,
 * quiet text.
 */
.task-meta {
  font-size: 0.85rem;
  color: var(--bulma-text-weak);
}

/* The footer of each page. Bulma's footer has a large pad; this page is a
 * tool, thus it needs less.
 */
.app-footer {
  padding: 1.5rem;
}

/* The alert mark of a navigation item: a red circle with an exclamation
 * mark. Bulma has the colour and the round shape; the square size makes a
 * circle of the pill, because the content is one character.
 */
.nav-alert {
  margin-left: 0.4rem;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  font-weight: 700;
}