s4: b78409b5a3b9 examples/common/default/default.css

s4

view examples/common/default/default.css @ 929:b78409b5a3b9

Height should have unit of vh!

author	HIROSE Yuuji <yuuji@gentei.org>
date	Mon, 18 Jan 2021 18:48:32 +0900
parents	cfb6247a2266
children	0d9caeab3d81

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 *.warnbg {background: red;}

8 *.hidden {visibility: hidden;}

9 *.border {border: 1px solid #113;}

10 div.topmenu {

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

12 }

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

14 margin: 0 auto;}

15 div.topmenu ul li {

16 float: left; width: 18%;

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

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

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

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

21 }

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

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

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

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

27 pre.list {

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

29 border: 2px inset;

30 }

31 p.copyright {

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

33 font-size: 50%;

34 }

35 p.copyright a, a#reload {text-decoration: none;}

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

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

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

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

41 table.td3evw th:nth-child(2n+4), span.textdigest {

42 background: white;

43 }

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

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

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

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

49 }

50 table.b, table.bloghead {

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

52 }

53 td.warn {background: #fcc;}

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

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

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

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

59 visibility: hidden;}

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

61 visibility: visible;

62 }

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

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

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

67 /* keep/edit/rm action selector */

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

69 display: none;

70 }

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

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

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

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

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

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

77 label.confirm {display: none;}

78 *.inline,

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

80 display: inline;

81 }

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

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

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

86 {visibility: visible;}

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

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

90 div.blogcomment {

91 position: fixed; bottom: 0; left: 0;

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

93 }

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

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

96 div.blogcomment * {opacity: 1.0;}

97 table.bloghead, .bloghead tr, .bloghead td {

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

99 min-width: 30em;

100 }

101 table.bloghead tr.preface {

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

103 white-space: pre-wrap;

104 }

105 table.bloghead tr.frozen {

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

107 }

108

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

110

111 table.blog_replies, .blog_replies tr, .blog_replies td {

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

113 white-space: pre-wrap;

114 }

115 table.bloghead tr.preface td ul,

116 table.bloghead tr.preface td ol,

117 table.bloghead tr.preface h2,

118 table.bloghead tr.preface h3,

119 table.bloghead tr.preface h4,

120 table.bloghead tr.preface h5,

121 table.bloghead tr.preface h5,

122 table.blog_replies video,

123 table.blog_replies iframe,

124 table.blog_replies ul, .blog_replies tr ul, .blog_replies td ul,

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

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

127 }

128 table.bloghead tr.preface h2,

129 table.bloghead tr.preface h3,

130 table.bloghead tr.preface h4,

131 table.bloghead tr.preface h5,

132 table.bloghead tr.preface h5

133 {

134 display: inline-block;

135 }

136 table.blog_replies p.proficon {

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

138 }

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

140 .blog_replies td.repl {

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

142 max-width: 50em;

143 }

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

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

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

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

148 }

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

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

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

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

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

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

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

156 table.blog_replies iframe {

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

158 padding: 0; border: 0;

159 }

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

161 background: white

162 }

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

164 margin: 0; border-width: 0;

165 border-collapse: collapse;

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

167 }

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

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

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

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

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

173 div.pjaxview, div.pjaxview2 {

174 position: fixed; top: 1ex; left: 0; width: 9vw; height: 9vh;

175 background: #ffffee; border: 1px double navy; border-radius: 2em;

176 z-index: 7;

177 }

178 div.pjaxview2 {

179 width: 100vw; height: 98vh; transition: 0.5s;

180 }

181 div.pjaxview iframe {

182 width: 98%; height: 90%; object-fit: scale-down;

183 }

184 div.pjaxview p {

185 padding: 0.5ex; text-align: left; margin: 0 2em;

186 white-space: nowrap; overflow: hidden;

187 }

188 div.pjaxview p button { font-size: large; padding: 0 1em;}

189 div.pjaxview p button { background: #eeeee0; }

190 div.pjaxview p button:focus { background: #fffff8; }

191

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

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

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

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

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

197

198 /* Used for overlapping image */

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

200

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

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

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

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

205 }

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

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

208 body.grouphome p.groupimg {

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

210 overflow: hidden;}

211 body.grouphome p.groupimg img {

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

213

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

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

216 div.fold > div {

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

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

219 }

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

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

222 display: block; background: #fadede;

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

224 }

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

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

227 opacity: 1.0; transition: 2s;

228 }

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

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

231 }

232

233 /* fold2!! */

234 div.foldtabs {

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

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

237 }

238 div.foldtabs > div {

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

240 margin: 2px; overflow: auto;

241 }

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

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

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

245 margin: 0; z-index: 2;

246 }

247 div.foldtabs > label {

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

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

250 margin: 0;

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

252 }

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

254 div.foldtabs input:checked + label {

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

256 }

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

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

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

260 display: inline;}

261 div.foldtabs p {margin: 0;}

262

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

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

265 input.s4-checkbox + label {

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

267 }

268 input.s4-checkbox + label:before,

269 input.s4-checkbox + label:after {

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

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

272 }

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

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

275 background: #ddd;

276 }

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

278 background: pink;

279 }

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

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

282 }

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

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

285 border-bottom: 3px solid navy;

286 border-left: 3px solid navy;

287 transform: rotate(-40deg);

288 }

289 /* ---------------------------------------------------- */

290

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

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

293 table.dumpblogs td,

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

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

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

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

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

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

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

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

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

303 {max-width: 14em;}

304 /* https://curecode.jp/tech/css-table-position-sticky-with-background-border-vanished/ */

305 div.dumptable table.dumpblogs th {

306 position: sticky; top: 0; z-index: 0; background: #fcf0f0;

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

308 background-clip: padding-box;

309 }

310

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

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

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

314

315 /*

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

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

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

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

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

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

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

323 */

324

325 /********************* icon list *********************/

326 div.iconlist {

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

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

329 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

344 input#ismembtn:checked ~ div.iconlist,

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

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

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

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

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

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

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

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

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

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

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

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

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

358 *.clear {clear: both;}

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

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

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

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

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

364 position: relative;

365 }

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

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

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

369 textarea:focus + p.help {

370 display: block; background: white;

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

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

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

374 }

375 textarea:focus + p.help {

376 position: fixed;

377 top: 0em; left: 0;

378 }

379 form.summary input[type=submit],

380 input[type="submit"].all, button.all {

381 background: #cfc; padding: 0.4ex 2ex;

382 }

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

384

385 /*

386 * World List

387 */

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

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

390 li.casmenu div table {

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

392 max-width: 100%;

393 }

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

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

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

397 {display: block;}

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

399

400 /*

401 * Frozen toggle button

402 */

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

404 button.toggle-frozen {

405 padding: 0 1emex;

406 background: #fdb585;

407 border-radius: 1ex;

408 border-bottom: solid 2px #d27d88;

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

410 background: linear-gradient(#fdeaea, #fdb2b2); // ffc8a8

411 }

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

413 background: linear-gradient(#d8e2ea, #83bbea);

414 }

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

416 content: attr(frozen-marker); color: blue;

417 }

418 .toggle-frozen::before {

419 content: attr(running-marker);

420 }

421 .info-tooltip {

422 position: absolute; padding: 1ex;

423 background: ivory;

424 border-radius: 1em; border: double 5px blue;

425 min-width: 10em; right: 0; bottom: 0;

426 }

427 .dissolving {opacity: 0; transition: 3.0s;}

428 .emerging {opacity: 1; transition: 3s;}

429 button#c, button#reload {display: inline-block;}

430 span.loading, button#c:disabled, button#reload:disabled {

431 visibility: visible; transform: rotateX(3600deg); transition: 30s;

432 }

433 span.loading {padding: 0 1em;}

434 input.aux {margin-left: 10em; transform: scale(0.7);}

435

436 /*

437 * PR Web

438 */

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

440 body.pr h1 {

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

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

443 }