s4: 5843755e3b30 examples/common/default/default.css

s4

view examples/common/default/default.css @ 889:5843755e3b30

The beginning of AJAX operations Frozen/Running can be toggled by ajax button

author	HIROSE Yuuji <yuuji@gentei.org>
date	Thu, 24 Dec 2020 19:42:58 +0900
parents	d0572292d033
children	45771085d097

line source

1 /*

2 * Default CSS definitions

3 */

4 body {background: #eff; margin: 2px; padding: 6px;}

5 h2, h3, hr {clear: both;}

6 *.warn {color: red;}

7 div.topmenu {

8 margin: 0; padding: 0; width: 100%; height: 2em;

9 }

10 div.topmenu ul {width: 100%; position: fixed; z-index: 5; margin: 0;

11 margin: 0 auto;}

12 div.topmenu ul li {

13 float: left; width: 18%;

14 background: rgba(68,255,102,0.8); border: #3e5 2px groove; margin: 0;

15 text-align: center; font-size: 80%; list-style: none;

16 box-shadow: #242 2px 3px 5px;

17 text-shadow: #fff 0px 0px 10px;

18 }

19 div.topmenu ul li.worldname {background: #eeeeff;}

20 div.topmenu ul li:hover {background: #8fa;}

21 div.topmenu ul a {text-decoration: none;}

23 ldiv.topmenu + h1 {clear: both; margin-top: 3em;}

24 pre.list {

25 overflow: auto; width: 96%; height: 40%; background: white;

26 border: 2px inset;

27 }

28 p.copyright {

29 border-top: 2px inset #555; text-align: right; clear: both;

30 font-size: 50%;

31 }

32 p.copyright a {text-decoration: none;}

34 td {padding-left: 0.5ex; padding-right: 0.5ex;}

35 table.td2r td:nth-child(2) {text-align: right;}

36 table.td3r td:nth-child(3) {text-align: right;}

37 table.td3rr td:nth-child(n+3) {text-align: right;}

38 table.td3evw th:nth-child(2n+4) {background: white;}

39 table.thl th {text-align: left;}

40 span#reverse {background: white; padding: 0 0 0 0.4ex; border: outset;}

42 table.form, table.b, table.b tr, table.b td, table.b th {

43 border: 1px solid black; border-collapse: collapse;

44 }

45 table.b, table.bloghead {

46 border-radius: 1ex; box-shadow: rgb(250,222,222) 1px 2px 3px;

47 }

48 td.warn {background: #fcc;}

49 input[type="checkbox"][name="rm"]:checked ~ table {background: red;}

50 input[type="checkbox"][name="rm"] ~ span {display: none;}

51 input[type="checkbox"][name="rm"]:checked ~ span {display: inline;}

53 input[type="radio"][value="replace"] + input.replace[type="file"] {

54 visibility: hidden;}

55 input[type="radio"][value="replace"]:checked + input.replace[type="file"] {

56 visibility: visible;

57 }

58 button#morefile {visibility: hidden; background: #fe9;}

59 label.admin span {border-bottom: 1px solid blue;}

60 label.admin:after {content: "(ADMIN)"; color: red; text-decoration: none;}

62 /* keep/edit/rm action selector */

63 input.action ~ input:not(.action), input.action ~ textarea {

64 display: none;

65 }

66 input.action[value="edit"]:checked ~ input[class="edit"],

67 input.action[value="mv"]:checked ~ input[type="text"] {display: inline;}

68 input.action[value="edit"]:checked ~ textarea {display: block;}

69 input.action[value="edit"]:checked ~ span,

70 input.action[value="mv"]:checked ~ span {display: none;}

71 input.action[value="rm"]:checked ~ span {background: red;}

72 label.confirm {display: none;}

73 *.inline,

74 input.action[value="rm"]:checked ~ label.confirm {

75 display: inline;

76 }

78 input.hidesub ~ input[type="submit"] {visibility: hidden;}

79 input.hidesub:focus ~ input[type="submit"],

80 p:active input[type="submit"]

81 {visibility: visible;}

82 input[type=text]:focus {background: #ffa;}

84 form.replyblog {xxx-margin-bottom: 40%;}

85 div.blogcomment {

86 position: fixed; bottom: 0; left: 0;

87 z-index: 2; background-color: rgba(250,222,222,0.6);

88 }

89 /* div.blogcomment textarea:focus {background: yellow;

90 position: fixed; top: 0; bottom: auto; } Need to consider narrow display */

91 div.blogcomment * {opacity: 1.0;}

92 table.bloghead, .bloghead tr, .bloghead td {

93 border: 1px solid black; border-collapse: collapse;

94 min-width: 30em;

95 }

96 table.bloghead tr.preface {

97 font-size: 150%; background: yellow; /* text-align: center; */

98 white-space: pre-wrap;

99 }

100 table.bloghead tr.frozen {

101 background: #ccf; border: blue thick solid; color: navy;

102 }

103

104 table.bloghead {margin-bottom: 1em;}

105

106 table.blog_replies, .blog_replies tr, .blog_replies td {

107 border: 1px solid #999; border-collapse: collapse;

108 white-space: pre-wrap;

109 }

110 table.bloghead tr.preface td ul,

111 table.bloghead tr.preface td ol,

112 table.bloghead tr.preface h2,

113 table.bloghead tr.preface h3,

114 table.bloghead tr.preface h4,

115 table.bloghead tr.preface h5,

116 table.bloghead tr.preface h5,

117 table.blog_replies video,

118 table.blog_replies iframe,

119 table.blog_replies ul, .blog_replies tr ul, .blog_replies td ul,

120 table.blog_replies ol, .blog_replies tr ol, .blog_replies td ol {

121 text-align: left; white-space: normal; margin: 1ex 0;

122 }

123 table.bloghead tr.preface h2,

124 table.bloghead tr.preface h3,

125 table.bloghead tr.preface h4,

126 table.bloghead tr.preface h5,

127 table.bloghead tr.preface h5

128 {

129 display: inline-block;

130 }

131 table.blog_replies p.proficon {

132 float: right; margin: 0 1ex 0 0;

133 }

134 table.blog_replies+p.update_link {margin-top: 0; margin-bottom: 14em;}

135 .blog_replies td.repl {

136 vertical-align: top; min-width: 30em; height: 3em;

137 max-width: 50em;

138 }

139 .blog_replies td.repl img {max-width: 30%;}

140 td.repl h2, td.repl h3, td.repl h4 {

141 display: inline; /* Because td.repl's white space is pre-wrap */

142 /* text-shadow: blue 0px 1px; */

143 }

144 td.repl hr {display: inline-block; width: 95%; color: #cde}

145 td.repl em {color: #a00; text-decoration: underline; padding-right: 0.3ex;}

146 td.repl strong {color: white; background: #00a; padding: 0 0.5ex;}

147 td.repl h2:before {content: "■"; color: #a22;}

148 td.repl h3:before {content: "◆"; color: #a22;}

149 td.repl h4:before {content: "○";}

150 .blog_replies td.repatt {min-width: 12em;}

151 table.blog_replies iframe {

152 width: 80%; min-height: 300px; max-width: 50em; max-height: 80vw;

153 padding: 0; border: 0;

154 }

155 table.blog_replies td.new { /* New Article from last visit */

156 background: white

157 }

158 table.mini, table.mini tr, table.mini th, table.mini td {

159 margin: 0; border-width: 0;

160 border-collapse: collapse;

161 vertical-align: top; width: auto; height: 1em;

162 }

163 table.mini th {background: #cee;}

164 table.mini tr {border-bottom: solid 1px #bcc;}

165 table.mini th, table.mini td {text-align: justify;}

166 table.mini td, table.mini th {padding: 1px 0.5ex; min-width: 1em;}

167 table.mini {margin-left: 1em; border-left: 2px solid #686;}

168

169 /* "visibility: collapse" not working on chromium browser */

170 div.noprofimg tr.profimg {visibility: collapse; display: none;}

171 div.noprofimg tr:hover + tr.profimg, div.noprofimg tr:active + tr.profimg,

172 div.noprofimg tr.profimg:hover, div.noprofimg tr.profimg:active {

173 visibility: visible; display: table-row;}

174

175 /* Used for overlapping image */

176 img.overlap {position: absolute; top: 40px; left: 50px; z-index: 2;}

177

178 /* Used in user's home page */

179 p.profimg {float: left; max-width: 50%; max-height: 400px;

180 overflow: hidden; margin: 0 1em 1ex;

181 padding: 0; border: white 1px solid; box-shadow: 2px 3px 4px

182 }

183 p.profimg img {max-width: 400px;}

184 div.home+* {clear: both;}

185 body.grouphome p.groupimg {

186 float: right; margin: 0 1em 1ex;

187 overflow: hidden;}

188 body.grouphome p.groupimg img {

189 max-width: 380px; max-height: 380px;}

190

191 div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}

192 div.noborder {border: 0px; margin: 0;}

193 div.fold > div {

194 xxdisplay: none; max-height: 80%; overflow: auto;

195 height: 0px; opacity: 0; padding: 0 1ex;

196 }

197 div.fold input[type="checkbox"]:checked ~ div,

198 div.fold input[type="radio"]:checked ~ div {

199 display: block; background: #fadede;

200 height: auto; opacity: 1.0; transition: 1s;

201 }

202 input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}

203 input[type="checkbox"].fold:checked + label + *.folded {

204 opacity: 1.0; transition: 2s;

205 }

206 input[type="checkbox"].fold:checked + label + div.folded {

207 display: block; hight: auto; transition: 2s;

208 }

209

210 /* fold2!! */

211 div.foldtabs {

212 position: relative; height: 5em; margin-top: 1em;

213 border-top: 1px solid black; padding-top: 1em;

214 }

215 div.foldtabs > div {

216 position: absolute; top: 2.5em; opacity: 0.0; background: pink;

217 margin: 2px; overflow: auto;

218 }

219 div.foldtabs input[type="radio"] {display: none;}

220 div.foldtabs input[type="radio"]:checked + label + div {

221 display: block; opacity: 1.0; transition: 0.2s; width: 100%;

222 margin: 0; z-index: 2;

223 }

224 div.foldtabs > label {

225 border: 1px outset #ddd; background: #ddd; xbackground: pink;

226 border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;

227 margin: 0;

228 padding: 0.2ex 0.5em; height: 3em;

229 }

230 div.foldtabs > input:active + label {background: white;}

231 div.foldtabs input:checked + label {

232 background: pink; border: pink 1px solid; border-bottom-width: 6px;

233 }

234 div.foldtabs input:checked + label:last-of-type {border-width: 1px;}

235 input[type="checkbox"] + label + input[type="submit"] {display: none;}

236 input[type="checkbox"]:checked + label + input[type="submit"] {

237 display: inline;}

238 div.foldtabs p {margin: 0;}

239

240 /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */

241 input.s4-checkbox {display: none;} /* Do not show real checkbox */

242 input.s4-checkbox + label {

243 position: relative; padding-left: 0.8em; margin-right: 1em;

244 }

245 input.s4-checkbox + label:before,

246 input.s4-checkbox + label:after {

247 content: ""; display: block; /* Mimic Checkbox by absolute box */

248 position: absolute; top: 0; left: 0; margin: 0;

249 }

250 input.s4-checkbox + label:before { /* checkbox frame */

251 width: 0.8em; height: 0.8em; border: 1px solid #aaa; border-radius: 20%;

252 background: #ddd;

253 }

254 input.s4-checkbox:checked + label:before { /* checked frame bg */

255 background: pink;

256 }

257 input.s4-checkbox:checked + label { /* checked text */

258 /* text-shadow: red 1px 1px; */

259 }

260 input.s4-checkbox:checked + label:after { /* checked mark */

261 width: 0.6em; height: 0.4em; top: 0.05em; left: 0.1em;

262 border-bottom: 3px solid navy;

263 border-left: 3px solid navy;

264 transform: rotate(-40deg);

265 }

266 /* ---------------------------------------------------- */

267

268 div.dumptable {max-height: 70vw; overflow: auto;}

269 div.dumptable tr:hover {background-color: #fee;}

270 table.dumpblogs td,

271 div.lcto td { /* LINK + CTIME + TITLE + OWNER + something... */

272 white-space: nowrap; overflow: hidden;}

273 table.dumpblogs td:nth-child(4),

274 div.lcto td:nth-child(2) {max-width: 8em;}

275 table.dumpblogs td:nth-child(5), /* team */

276 table.dumpblogs td:nth-child(6), /* title */

277 table.dumpblogs td:nth-child(7), /* heading */

278 div.lcto td:nth-child(3), /* title */

279 div.lcto td:nth-child(4) /* owner */

280 {max-width: 14em;}

281

282 table.dumpblogs tr.凍結 td:nth-child(n+2) {opacity: 0.5;}

283 table.dumpblogs tr.凍結 td:last-child {opacity: 1.0; color: blue;}

284 *.frozen, *.凍結 {color: blue;}

285

286 /*

287 table.dumpblogs td:nth-child(4) {

288 max-width: 7.6em; overflow: hidden;}

289 table.dumpblogs td:nth-child(5),

290 table.dumpblogs td:nth-child(6) {

291 max-width: 12em; overflow: hidden;}

292 table.dumpblogs td:nth-child(7) {

293 min-width: 5em; overflow: hidden;}

294 */

295

296 /********************* icon list *********************/

297 div.iconlist {

298 text-align: center; float: left; margin: 1ex 1em;

299 border: dotted #dfd 2px; padding: 1ex;

300 }

301 div.iconlist p {margin: 0; padding: 0;}

302 div.iconlist p.tag {background: #ffa; border-radius: 4em;}

303 div.iconlist p._temp {background: cyan;}

304 div.iconlist p._lecture {background: pink;}

305 div.iconlist p._admin {background: yellow;}

306 div.iconlist p._friend {background: fuchsia;}

307 div.iconlist p._fellows {background: #9f9;} /* light green */

308 div.iconlist p._club {background: #4bb;} /* light teal */

309 div.iconlist p._event {background: maroon; color: white;}

310 div.iconlist p._misc {background: purple; color: white;}

311 div.iconlist p._record {background: red; color: white;}

312 div.iconlist p._info {background: #eff;} /* light cyan */

313 div.iconlist p._support {background: #ffe;} /* light yellow */

314 div.iconlist p._test {background: #ffb6c1;} /* light pink */

315 input#ismembtn:checked ~ div.iconlist,

316 input#isadmbtn:checked ~ div.iconlist {display: none;}

317 input#ismembtn:checked ~ div.iconlist.Member,

318 input#isadmbtn:checked ~ div.iconlist.ADMIN,

319 input#ismembtn:checked ~ div.iconlist.ADMIN {display: block;}

320 div.xy120x120 {min-width: 120px; min-height: 140px;}

321 div.xy96x96 {min-width: 96px; min-height: 116px;}

322 div.xy96x96 img {max-width: 96px;}

323 div.xy50x50 {min-width: 50px; min-height: 70px;}

324 div.xy50x50 img {max-width: 50px;}

325 div.moderated {background: rgba(255, 215, 0, 0.3);} /* gold */

326 body.moderated {background: #fffec4;} /* #faed8a */

327 body.ismember, div.ismember {border-top: 4px red solid; margin-top: 0;}

328 div.right, div.search {clear: both; float: right;}

329 *.clear {clear: both;}

330 div.search input[type="text"] {

331 border: solid 1px #bbb; border-radius: 0.5ex; min-height: 20px;

332 margin: 1em; padding: 0 0.5ex; padding-left: 18px;

333 background: url("../../img/loupe.png") left center no-repeat

334 rgba(242,240,240,0.7);

335 position: relative;

336 }

337 div.search div.fr, *.relative {position: relative;}

338 div.search p.help, textarea + p.help {display: none;}

339 div.search input:focus + p.help,

340 textarea:focus + p.help {

341 display: block; background: white;

342 position: absolute; right: 15em; white-space: pre;

343 border: 1px solid #888; border-radius: 1em; padding: 1ex;

344 box-shadow: #555 2px 2px;

345 }

346 textarea:focus + p.help {

347 position: fixed;

348 top: 0em; left: 0;

349 }

350 form.summary input[type=submit],

351 input[type="submit"].all {background: #cfc; padding: 0.4ex 2ex;}

352 input[type="reset"] {margin-left: 4em;}

353

354 /*

355 * World List

356 */

357 li.casmenu div {display: none; position: relative; width: 200%;

358 min-width: 80%; margin-right: 0;}

359 li.casmenu div table {

360 background: white; position: absolute; top: 0em; border: 3px solid navy;

361 max-width: 100%;

362 }

363 li.casmenu div table td {text-align: left; padding: 0.5ex 1em;}

364 li.casmenu:hover div, li.casmenu:active div,

365 li.casmenu div:hover, li.casmenu div:active

366 {display: block;}

367 span.pre {white-space: pre;}

368

369 /*

370 * Frozen toggle button

371 */

372 td.稼動状態 {text-align: center;}

373 button.toggle-frozen {

374 padding: 0 1emex;

375 background: #fdb585;

376 border-radius: 0.2ex;

377 border-bottom: solid 2px #d27d88;

378 box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0,0,0, 0.19);

379 background: linear-gradient(#fdcccc, #ae9191); // ffc8a8

380 }

381 .凍結 button.toggle-frozen, .凍結 button.toggle-frozen::before {

382 background: linear-gradient(#d3d3f8, #6d6de4);

383 }

384 .凍結 button.toggle-frozen::before {

385 content: "凍"; color: blue;

386 }

387 .toggle-frozen::before {

388 content: "動";

389 }

390

391 /*

392 * PR Web

393 */

394 body.pr {font-size: 200%;}

395 body.pr h1 {

396 text-align: center; width: 80%; padding: 3ex 0; margin: 0 auto;

397 background: #ffefef; border: double 5px navy;

398 }