s4: 4f19add6f877 examples/common/default/default.css

s4

view examples/common/default/default.css @ 912:4f19add6f877

Restrict ajax button activation to certain case

author	HIROSE Yuuji <yuuji@gentei.org>
date	Tue, 05 Jan 2021 13:46:37 +0900
parents	1fa8b4440f8f
children	d252bf61f048

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: 95vw; 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

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

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

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

308

309 /*

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

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

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

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

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

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

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

317 */

318

319 /********************* icon list *********************/

320 div.iconlist {

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

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

323 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

338 input#ismembtn:checked ~ div.iconlist,

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

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

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

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

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

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

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

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

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

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

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

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

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

352 *.clear {clear: both;}

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

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

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

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

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

358 position: relative;

359 }

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

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

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

363 textarea:focus + p.help {

364 display: block; background: white;

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

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

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

368 }

369 textarea:focus + p.help {

370 position: fixed;

371 top: 0em; left: 0;

372 }

373 form.summary input[type=submit],

374 input[type="submit"].all, button#c.all {

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

376 }

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

378

379 /*

380 * World List

381 */

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

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

384 li.casmenu div table {

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

386 max-width: 100%;

387 }

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

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

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

391 {display: block;}

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

393

394 /*

395 * Frozen toggle button

396 */

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

398 button.toggle-frozen {

399 padding: 0 1emex;

400 background: #fdb585;

401 border-radius: 1ex;

402 border-bottom: solid 2px #d27d88;

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

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

405 }

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

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

408 }

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

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

411 }

412 .toggle-frozen::before {

413 content: attr(running-marker);

414 }

415 .info-tooltip {

416 position: absolute; padding: 1ex;

417 background: ivory;

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

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

420 }

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

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

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

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

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

426 }

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

428

429 /*

430 * PR Web

431 */

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

433 body.pr h1 {

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

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

436 }