1 | /* variable */ |
---|
2 | :root { |
---|
3 | --main-bg-color: #EEE; |
---|
4 | --title-border-color: #ACF; |
---|
5 | --title-txt-color: #88D066; |
---|
6 | --button-left-color: #E0E0E0; |
---|
7 | --button-right-color: #F0F0F0; |
---|
8 | --button-border-color: #777; |
---|
9 | --button-sep-color: #AAA; |
---|
10 | --box-bg-checking-color: #EB7239; |
---|
11 | --footer-txt-color: #666; |
---|
12 | } |
---|
13 | |
---|
14 | /* global */ |
---|
15 | html { |
---|
16 | background-color: var(--main-bg-color); |
---|
17 | } |
---|
18 | |
---|
19 | /* header */ |
---|
20 | .header h1 { |
---|
21 | color: var(--title-txt-color); |
---|
22 | border-bottom: 2px solid; |
---|
23 | border-color: black; |
---|
24 | border-left: 2px solid; |
---|
25 | border-radius: 0px 0px 0px 3ex; |
---|
26 | border-color: var(--title-border-color); |
---|
27 | margin-left: 2%; |
---|
28 | } |
---|
29 | |
---|
30 | /* https://stackoverflow.com/questions/14920401/how-to-simulate-hfill-with-html-and-css */ |
---|
31 | .header h1 ul { |
---|
32 | display: flex; |
---|
33 | justify-content: space-between; |
---|
34 | margin: 0.5ex; |
---|
35 | } |
---|
36 | |
---|
37 | .header h1 li { |
---|
38 | display: inline; |
---|
39 | } |
---|
40 | |
---|
41 | a#refresh { |
---|
42 | background: var(--button-left-color); |
---|
43 | border-radius: 1.8ex;; |
---|
44 | margin-left: 2ex; |
---|
45 | padding: 0.3ex 1.3ex; |
---|
46 | text-decoration: none; |
---|
47 | } |
---|
48 | |
---|
49 | a#refresh:hover { |
---|
50 | text-decoration: underline solid; |
---|
51 | } |
---|
52 | |
---|
53 | a#refresh:after { |
---|
54 | content: "\00A0\21bb"; |
---|
55 | } |
---|
56 | |
---|
57 | /* general */ |
---|
58 | a:link, a:visited { |
---|
59 | text-decoration: none; |
---|
60 | } |
---|
61 | |
---|
62 | a:hover, a:active { |
---|
63 | text-decoration: underline solid; |
---|
64 | } |
---|
65 | |
---|
66 | span.button { |
---|
67 | border: 1px solid var(--button-border-color); |
---|
68 | margin: 10px 3px 3px 4px; |
---|
69 | background: var(--button-right-color); |
---|
70 | border-radius: 2ex; |
---|
71 | padding: 0ex 0.8ex 0px 0ex; |
---|
72 | } |
---|
73 | |
---|
74 | .button a { |
---|
75 | background: var(--button-left-color); |
---|
76 | border-right: 2px solid var(--button-sep-color); |
---|
77 | border-radius: 2ex 0px 0px 2ex; |
---|
78 | padding: 0px 0.5ex 0ex 0.9ex; |
---|
79 | } |
---|
80 | |
---|
81 | .button small { |
---|
82 | padding: 0px 0.2ex 0ex 0.8ex; |
---|
83 | } |
---|
84 | |
---|
85 | p { |
---|
86 | line-height: 3ex; |
---|
87 | } |
---|
88 | |
---|
89 | table { |
---|
90 | border: none; |
---|
91 | margin: 0; |
---|
92 | } |
---|
93 | |
---|
94 | td { |
---|
95 | border: 0px; |
---|
96 | vertical-align: middle; |
---|
97 | } |
---|
98 | |
---|
99 | td.bold { |
---|
100 | font-weight: bold; |
---|
101 | } |
---|
102 | |
---|
103 | td.hoop { |
---|
104 | border: 1px solid #777; |
---|
105 | } |
---|
106 | |
---|
107 | td.comment { |
---|
108 | max-width: 60%; |
---|
109 | font-size: small; |
---|
110 | } |
---|
111 | |
---|
112 | td.days { |
---|
113 | text-align: right; |
---|
114 | } |
---|
115 | |
---|
116 | td.checking { |
---|
117 | background-color: var(--box-bg-checking-color); |
---|
118 | border-radius: 0ex 2ex 2ex 0ex; |
---|
119 | color: white; |
---|
120 | font-size: x-small; |
---|
121 | font-weight: bold; |
---|
122 | padding: 0ex 0.8ex 0ex 0.8ex; |
---|
123 | text-align: right; |
---|
124 | } |
---|
125 | |
---|
126 | td.checking:after { |
---|
127 | content: "\21B5"; |
---|
128 | } |
---|
129 | |
---|
130 | hr { |
---|
131 | border-style: solid; |
---|
132 | border-width: 1px; |
---|
133 | color: var(--title-border-color); |
---|
134 | margin-top: 4ex; |
---|
135 | width: 70%; |
---|
136 | } |
---|
137 | |
---|
138 | /* action */ |
---|
139 | .action h2 { |
---|
140 | color: var(--title-txt-color); |
---|
141 | } |
---|
142 | |
---|
143 | /* footer */ |
---|
144 | .footer { |
---|
145 | float : right; |
---|
146 | margin-right: 5%; |
---|
147 | } |
---|
148 | |
---|
149 | div.footer { |
---|
150 | font-size: xx-small; |
---|
151 | color: var(--footer-txt-color); |
---|
152 | } |
---|
153 | |
---|
154 | .footer ul { |
---|
155 | margin-top: 0.8ex; |
---|
156 | } |
---|