input {
width: calc(100% - 8px); /* 8px to account for the default padding and border */
}
+.tag {
+ float: right;
+ margin-left: 1em;
+ font-size: 80%;
+}
+span.tag {
+ color: white;
+ padding: 1px .5em;
+ font-weight: bold;
+}
+input.tag {
+ width: 7em;
+ border: none;
+}
+.content {
+ font-size: 80%;
+}
+.content, textarea {
+ margin-left: 2em;
+ color: #555;
+ white-space: pre;
+}
+textarea {
+ width: 90%;
+ height: 5em;
+}
+.hide {
+ display: none;
+}
+.task {
+ clear: right;
+}
+.task > .task {
+ margin-left: 1em;
+}
+.statedate {
+ font-size: 80%;
+ margin-right: 0.5em;
+ padding: 0 .2em;
+ border-radius: 1em;
+}
+.task[data-state=cancelled] > .statedate { background-color: #fee; }
+.task[data-state=deleted] > .statedate { background-color: #ddd; }
+.task[data-state=done] > .statedate { background-color: #efe; }
+.task[data-state=someday-maybe] > .statedate { background-color: #eef; }
+.task[data-state=waiting] > .statedate { background-color: #faf; }
+#ui {
+ padding: 15px 10px;
+}
+body:before, body:after {
+ content: "";
+ position: fixed;
+ background: var(--view-state-indicator-color);
+ left: 0;
+ right: 0;
+ height: 5px;
+}
+body:before {
+ top: 0;
+}
+body:after {
+ bottom: 0;
+}
+body {
+ margin: 0;
+ min-height: 100vh;
+ border-left: 5px solid var(--view-state-indicator-color);
+ border-right: 5px solid var(--view-state-indicator-color);
+}