]> git.scottworley.com Git - vopamoi/blob - vopamoi.css
README
[vopamoi] / vopamoi.css
1 input {
2 width: calc(100% - 8px); /* 8px to account for the default padding and border */
3 }
4 .tag {
5 float: right;
6 margin-left: 1em;
7 font-size: 80%;
8 }
9 body.dark .tag {
10 opacity: 60%;
11 }
12 span.tag {
13 color: white;
14 padding: 1px .5em;
15 font-weight: bold;
16 }
17 input.tag {
18 width: 7em;
19 border: none;
20 }
21 .content {
22 font-size: 80%;
23 }
24 .content, textarea {
25 margin-left: 2em;
26 color: #555;
27 white-space: pre;
28 }
29 body.dark .content, body.dark textarea {
30 color: #bbb;
31 }
32 textarea {
33 width: 90%;
34 height: 5em;
35 }
36 body.dark textarea {
37 background-color: black;
38 }
39 .hide {
40 display: none;
41 }
42 .task {
43 clear: right;
44 }
45 .task > .task {
46 margin-left: 1em;
47 }
48 .statedate {
49 font-size: 80%;
50 margin-right: 0.5em;
51 padding: 0 .2em;
52 border-radius: 1em;
53 }
54 body.dark .statedate { opacity: 60%; }
55 .task[data-state=cancelled] > .statedate { background-color: #fee; }
56 .task[data-state=deleted] > .statedate { background-color: #ddd; }
57 .task[data-state=done] > .statedate { background-color: #efe; }
58 .task[data-state=someday-maybe] > .statedate { background-color: #eef; }
59 .task[data-state=waiting] > .statedate { background-color: #faf; }
60 body.dark .task[data-state=cancelled] > .statedate { background-color: #600; }
61 body.dark .task[data-state=deleted] > .statedate { background-color: #222; }
62 body.dark .task[data-state=done] > .statedate { background-color: #060; }
63 body.dark .task[data-state=someday-maybe] > .statedate { background-color: #006; }
64 body.dark .task[data-state=waiting] > .statedate { background-color: #303; }
65 #ui {
66 padding: 15px 10px;
67 }
68 body:before, body:after {
69 content: "";
70 position: fixed;
71 background: var(--view-state-indicator-color);
72 left: 0;
73 right: 0;
74 height: 5px;
75 }
76 body:before {
77 top: 0;
78 }
79 body:after {
80 bottom: 0;
81 }
82 body {
83 margin: 0;
84 min-height: 100vh;
85 border-left: 5px solid var(--view-state-indicator-color);
86 border-right: 5px solid var(--view-state-indicator-color);
87 }
88 body.dark, body.dark input {
89 color: #eee;
90 background-color: black;
91 }