git.plutz.net Git - confetti/blob

1 * {

2 font-family: sans-serif;

3 font-weight: normal;

4 font-size: initial;

5 font-style: normal;

6 text-decoration: none;

7 line-height: 1.5em;

8 color: inherit; background: transparent;

9 padding: 0; margin: 0;

10 border: none;

11 }

13 body {

14 color: #000; background-color: #FFF;

15 }

17 p { margin-bottom: 1em; }

19 a {

20 text-decoration: underline;

21 font-style: italic;

22 color: #068;

23 }

25 i, em { font-style: italic; }

26 b, strong { font-weight: bolder; }

27 ul, ol { margin-left: 1.125em; }

29 h1, h2, h3 {

30 font-weight: bold;

31 margin-top: 1em;

32 margin-bottom: .5em;

33 }

35 h1:first-child, h2:first-child, h3:first-child,

36 p + h1, p + h2, p + h3 {

37 margin-top: 0;

38 }

40 h4, h5, h6, form legend {

41 font-weight: bolder;

42 margin-bottom: .25em;

43 }

45 h1 { font-size: 1.5em; }

46 h2 { font-size: 1.125em; }

48 select, input, button, textarea,

49 .control a {

50 display: inline-block;

51 background-color: #FFF;

52 border: 1pt solid;

53 padding: .25em .75em;

54 vertical-align: text-bottom;

55 }

56 .control a {

57 color: inherit;

58 font-style: normal;

59 text-decoration: none;

60 }

62 select { padding: .375em 0; }

64 input[type=radio], input[type=checkbox] {

65 vertical-align: baseline;

66 }

68 button, input[type=button],

69 .control a {

70 box-shadow: .125em .125em .25em;

71 }

73 label { margin-right: .75em; }

74 input + label {

75 margin-left: .375em;

76 }

78 body > form,

79 div.card,

80 div.courselist {

81 position: relative;

82 width: 98%; width: calc(100% - 2em);

83 margin-left: auto; margin-right: auto;

84 margin-bottom: 1em;

85 box-shadow: .125em .125em .25em;

86 z-index: 1;

87 }

89 /* HACK: put anchor point 10em above card and highlight target element */

90 div:target { box-shadow: none; z-index: 0; }

91 div:target:before {

92 content: '';

93 display: block;

94 margin-top: -10em;

95 height: 10em;

96 visibility: hidden;

97 }

98 div:target:after {

99 content: '';

100 display: block;

101 position: absolute;

102 left: 0; right: 0;

103 top: 10em; bottom: 0;

104 box-shadow: .125em .125em .25em;

105 animation: highlight 4s;

106 z-index: -1;

107 }

108 @keyframes highlight { from { background-color: #FF0; } to { background-color: transparent; } }

109 /**/

110

111 div .section, form .section {

112 display: block;

113 vertical-align: top;

114 padding: 0 1em;

115 overflow: hidden;

116 word-break: break-word;

117 }

118

119 div .section :last-child, form .section :last-child {

120 margin-bottom: 1em;

121 }

122

123 div .section h2, form .section h2,

124 div .section h3, form .section h3 {

125 border-bottom: 1pt solid #EEE;

126 }

127 div .control, form .control {

128 background-color: #EEE;

129 padding: .25em;

130 text-align: right;

131 }

132

133 @media(min-width: 60em) {

134 div .section, form .section {

135 display: table-cell;

136 width: calc(100% / 10);

137 }

138 div .section :last-child { margin-bottom: 0; }

139 div .control, form .control {

140 background-color: transparent;

141 }

142 div .section:nth-of-type(2n) {

143 background-color: #EEE;

144 }

145 }

146 @media(min-width: 80em) {

147 div .control, form .control {

148 display: table-cell;

149 width: calc(100% / 10);

150 }

151 div .control .item, form .control .item {

152 display: block;

153 margin-bottom: .25em;

154 }

155 }

156

157 div .section .item, form .section .item,

158 form .section.attendance > label {

159 display: block;

160 width: 100%;

161 }

162

163 form .section .item {

164 margin-bottom: .25em;

165 }

166

167 form .section button[value^=addfield] {

168 font-size: .75em;

169 margin-top: .5em; padding: 0 .375em;

170 }

171

172 form input.delete { display: none; }

173 form input.delete + label {

174 float: right;

175 font-size: .75em;

176 line-height: 1;

177 max-width: .75em; height: .875em; overflow: hidden;

178 color: #FBB; background-color: #444;

179 margin: 0; padding: .125em .5em 0 .5em;

180 border-radius: 4pt 4pt 0 0;

181 transition: max-width .3s;

182 }

183 form input.delete + label:before { content: '\274c '; margin-right: .5em; }

184 form input.delete + label:hover { max-width: 10em; }

185 -form input.delete + label:hover:before { content: ''; }

186 -form input.delete + label:hover:after { content: ' \274c'; }

187 form input.delete:checked + label,

188 form input.delete:checked + label + * {

189 display: none;

190 }

191

192 form .control {

193 position: relative;

194 padding-left: 11em;

195 padding-top: 1.5em;

196 }

197 form .control .item {

198 display: inline-block;

199 margin-bottom: .25em;

200 vertical-align: text-bottom;

201 }

202

203 form .control .item.newfield {

204 box-shadow: .125em .125em .25em;

205 }

206 form .control .item.newfield select {

207 margin-right: -1pt;

208 }

209 form .control .item.newfield button {

210 box-shadow: none;

211 }

212

213 form .control .item.delete {

214 position: absolute;

215 bottom: .375em; left: .25em; width: auto;

216 padding-bottom: calc(2.25em + 2pt);

217 }

218

219 @media(min-width: 80em) {

220 form .control { padding: .25em; min-height: 16em; }

221 form .control .item { width: 100%; }

222 form .control .item.newfield select { width: calc(100% - 2.5em); }

223 form .control .item.delete { bottom: .125em; right: .25em; }

224 }

225 form .control .item.delete input + label + button {

226 display: none;

227 position: absolute;

228 bottom: 0; width: 100%;

229 color: #800;

230 background-color: #FEE;

231 z-index: 1;

232 }

233 form .control .item.delete:after {

234 content: attr(label);

235 display: block;

236 position: absolute;

237 bottom: 0; width: 100%;

238 text-align: center;

239 color: #BAA;

240 padding: .25em 0;

241 border: 1pt solid;

242 box-shadow: .125em .125em .25em;

243 }

244 form .control .item.delete input:checked + label + button { display: block; }