[434] | 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 | |
---|
[277] | 19 | /* header */ |
---|
| 20 | .header h1 { |
---|
[434] | 21 | color: var(--title-txt-color); |
---|
[270] | 22 | border-bottom: 2px solid; |
---|
| 23 | border-color: black; |
---|
| 24 | border-left: 2px solid; |
---|
[271] | 25 | border-radius: 0px 0px 0px 3ex; |
---|
[434] | 26 | border-color: var(--title-border-color); |
---|
[281] | 27 | margin-left: 2%; |
---|
[270] | 28 | } |
---|
[263] | 29 | |
---|
| 30 | /* https://stackoverflow.com/questions/14920401/how-to-simulate-hfill-with-html-and-css */ |
---|
[277] | 31 | .header h1 ul { |
---|
[270] | 32 | display: flex; |
---|
| 33 | justify-content: space-between; |
---|
[271] | 34 | margin: 0.5ex; |
---|
[263] | 35 | } |
---|
| 36 | |
---|
[277] | 37 | .header h1 li { |
---|
[270] | 38 | display: inline; |
---|
[263] | 39 | } |
---|
| 40 | |
---|
[277] | 41 | a#refresh { |
---|
[434] | 42 | background: var(--button-left-color); |
---|
[277] | 43 | border-radius: 1.8ex;; |
---|
| 44 | margin-left: 2ex; |
---|
| 45 | padding: 0.3ex 1.3ex; |
---|
| 46 | text-decoration: none; |
---|
| 47 | } |
---|
| 48 | |
---|
[284] | 49 | a#refresh:hover { |
---|
| 50 | text-decoration: underline solid; |
---|
| 51 | } |
---|
| 52 | |
---|
[277] | 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 | |
---|
[283] | 66 | span.button { |
---|
[434] | 67 | border: 1px solid var(--button-border-color); |
---|
[283] | 68 | margin: 10px 3px 3px 4px; |
---|
[434] | 69 | background: var(--button-right-color); |
---|
[283] | 70 | border-radius: 2ex; |
---|
[284] | 71 | padding: 0ex 0.8ex 0px 0ex; |
---|
[283] | 72 | } |
---|
| 73 | |
---|
| 74 | .button a { |
---|
[434] | 75 | background: var(--button-left-color); |
---|
| 76 | border-right: 2px solid var(--button-sep-color); |
---|
[283] | 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 | |
---|
[280] | 89 | table { |
---|
| 90 | border: none; |
---|
| 91 | margin: 0; |
---|
| 92 | } |
---|
| 93 | |
---|
| 94 | td { |
---|
| 95 | border: 0px; |
---|
[286] | 96 | vertical-align: middle; |
---|
[280] | 97 | } |
---|
| 98 | |
---|
[263] | 99 | td.bold { |
---|
[270] | 100 | font-weight: bold; |
---|
[263] | 101 | } |
---|
[270] | 102 | |
---|
[280] | 103 | td.hoop { |
---|
[284] | 104 | border: 1px solid #777; |
---|
[280] | 105 | } |
---|
| 106 | |
---|
[286] | 107 | td.comment { |
---|
| 108 | max-width: 60%; |
---|
| 109 | font-size: small; |
---|
| 110 | } |
---|
| 111 | |
---|
| 112 | td.days { |
---|
| 113 | text-align: right; |
---|
| 114 | } |
---|
| 115 | |
---|
[290] | 116 | td.checking { |
---|
[434] | 117 | background-color: var(--box-bg-checking-color); |
---|
[290] | 118 | border-radius: 0ex 2ex 2ex 0ex; |
---|
[286] | 119 | color: white; |
---|
[291] | 120 | font-size: x-small; |
---|
| 121 | font-weight: bold; |
---|
[286] | 122 | padding: 0ex 0.8ex 0ex 0.8ex; |
---|
[291] | 123 | text-align: right; |
---|
[286] | 124 | } |
---|
| 125 | |
---|
[290] | 126 | td.checking:after { |
---|
| 127 | content: "\21B5"; |
---|
| 128 | } |
---|
| 129 | |
---|
[277] | 130 | hr { |
---|
[270] | 131 | border-style: solid; |
---|
[271] | 132 | border-width: 1px; |
---|
[434] | 133 | color: var(--title-border-color); |
---|
[270] | 134 | margin-top: 4ex; |
---|
[271] | 135 | width: 70%; |
---|
[270] | 136 | } |
---|
[274] | 137 | |
---|
[277] | 138 | /* action */ |
---|
| 139 | .action h2 { |
---|
[434] | 140 | color: var(--title-txt-color); |
---|
[274] | 141 | } |
---|
| 142 | |
---|
[277] | 143 | /* footer */ |
---|
| 144 | .footer { |
---|
| 145 | float : right; |
---|
| 146 | margin-right: 5%; |
---|
| 147 | } |
---|
| 148 | |
---|
[274] | 149 | div.footer { |
---|
| 150 | font-size: xx-small; |
---|
[434] | 151 | color: var(--footer-txt-color); |
---|
[274] | 152 | } |
---|
[277] | 153 | |
---|
| 154 | .footer ul { |
---|
| 155 | margin-top: 0.8ex; |
---|
| 156 | } |
---|