s4

view examples/common/default/default.css @ 1017:f5b97df8d824

find changesets by author, revision, files, or words in the commit message
Do not hide fileinput when edit button pressed
author HIROSE Yuuji <yuuji@gentei.org>
date Thu, 24 Aug 2023 09:51:54 +0900
parents 1ffaa8b2b1bf
children 9d647e1bf534
line source
1 /*
2 * Default CSS definitions
3 */
4 @media print {
5 div.blogcomment, div.blogcomment *, div.topmenu,
6 table.bloghead button {
7 display: none
8 }
9 a {text-decoration: none;}
10 }
11 body {background: #eff; margin: 2px; padding: 6px;}
12 h2, h3, hr {clear: both;}
13 *.warn {color: red;}
14 *.warnbg {background: red;}
15 *.hidden {visibility: hidden;}
16 *.border {border: 1px solid #113;}
17 div.topmenu {
18 margin: 0; padding: 0; width: 100%; height: 2em;
19 }
20 div.topmenu ul {width: 100%; position: fixed; z-index: 5; margin: 0;
21 margin: 0 auto;}
22 div.topmenu ul li {
23 float: left; width: 18%;
24 background: rgba(68,255,102,0.8); border: #3e5 2px groove; margin: 0;
25 text-align: center; font-size: 80%; list-style: none;
26 box-shadow: #242 2px 3px 5px;
27 text-shadow: #fff 0px 0px 10px;
28 }
29 div.topmenu ul li.worldname {background: #eeeeff;}
30 div.topmenu ul li:hover {background: #8fa;}
31 div.topmenu ul a {text-decoration: none;}
32
33 ldiv.topmenu + h1 {clear: both; margin-top: 3em;}
34 pre.list {
35 overflow: auto; width: 96%; height: 40%; background: white;
36 border: 2px inset;
37 }
38 p.copyright {
39 border-top: 2px inset #555; text-align: right; clear: both;
40 font-size: 50%;
41 }
42 p.copyright a, a#reload {text-decoration: none;}
43
44 td {padding-left: 0.5ex; padding-right: 0.5ex;}
45 table.td2r td:nth-child(2) {text-align: right;}
46 table.td3r td:nth-child(3) {text-align: right;}
47 table.td3rr td:nth-child(n+3) {text-align: right;}
48 table.td3evw th:nth-child(2n+4), span.textdigest {
49 background: white;
50 }
51 table.td4r td:nth-child(4) {text-align: right;}
52 table.thl th {text-align: left;}
53 span#reverse {background: white; padding: 0 0 0 0.4ex; border: outset;}
54
55 table.form, table.b, table.b tr, table.b td, table.b th {
56 border: 1px solid black; border-collapse: collapse;
57 }
58 table.b, table.bloghead {
59 border-radius: 1ex; box-shadow: rgb(250,222,222) 1px 2px 3px;
60 }
61 td.warn {background: #fcc;}
62 input[type="checkbox"][name="rm"]:checked ~ table {background: red;}
63 input[type="checkbox"][name="rm"] ~ span {display: none;}
64 input[type="checkbox"][name="rm"]:checked ~ span {display: inline;}
65
66 input[type="radio"][value="replace"] + input.replace[type="file"] {
67 visibility: hidden;}
68 input[type="radio"][value="replace"]:checked + input.replace[type="file"] {
69 visibility: visible;
70 }
71 button#morefile {visibility: hidden; background: #fe9;}
72 label.admin span {border-bottom: 1px solid blue;}
73 label.admin:after {content: "(ADMIN)"; color: red; text-decoration: none;}
74 span.fileinput {
75 display: inline-block; height: 3.2ex;
76 border: 1px solid #4444; border-radius: 1ex;
77 position: relative; width: 16em; background: #e7e7ea; text-align: center;
78 }
79 span.fileinput input[type="file"] {
80 position: absolute; width: 100%; height: 100%; left: 0; top: 0;
81 padding: 0;
82 }
83 span.fileinput:hover {background: #efc;}
84 /* keep/edit/rm action selector */
85 input.action ~ input:not(.action), input.action ~ textarea {
86 display: none;
87 }
88 input.action[value="edit"]:checked ~ input[class="edit"],
89 input.action[value="mv"]:checked ~ input[type="text"] {display: inline;}
90 input.action[value="edit"]:checked ~ textarea {display: block;}
91 input.action[value="edit"]:checked ~ span:not(.fileinput),
92 input.action[value="mv"]:checked ~ span {display: none;}
93 input.action[value="rm"]:checked ~ span {background: red;}
94 label.confirm {display: none;}
95 *.inline,
96 input.action[value="rm"]:checked ~ label.confirm {
97 display: inline;
98 }
99
100 input.hidesub ~ input[type="submit"] {visibility: hidden;}
101 input.hidesub:focus ~ input[type="submit"],
102 p:active input[type="submit"]
103 {visibility: visible;}
104 input[type=text]:focus {background: #ffa;}
105
106 form.replyblog {xxx-margin-bottom: 40%;}
107 div.blogcomment {
108 position: fixed; bottom: 0; left: 0;
109 z-index: 2; background-color: rgba(250,222,222,0.6);
110 }
111 /* div.blogcomment textarea:focus {background: yellow;
112 position: fixed; top: 0; bottom: auto; } Need to consider narrow display */
113 div.blogcomment * {opacity: 1.0;}
114 table.bloghead, .bloghead tr, .bloghead td {
115 border: 1px solid black; border-collapse: collapse;
116 min-width: 30em;
117 }
118 table.bloghead tr.preface {
119 font-size: 150%; background: yellow; /* text-align: center; */
120 white-space: pre-wrap;
121 }
122 tr.preface em {color: navy; text-decoration: underline; padding-right: 0.3ex;}
123 tr.preface strong {color: navy; background: #eea;}
124 table.bloghead tr.frozen {
125 background: #ccf; border: blue thick solid; color: navy;
126 }
127
128 table.bloghead {margin-bottom: 1em;}
129
130 table.blog_replies, .blog_replies tr, .blog_replies td {
131 border: 1px solid #999; border-collapse: collapse;
132 white-space: pre-wrap;
133 }
134 table.bloghead tr.preface td ul,
135 table.bloghead tr.preface td ol,
136 table.bloghead tr.preface h2,
137 table.bloghead tr.preface h3,
138 table.bloghead tr.preface h4,
139 table.bloghead tr.preface h5,
140 table.bloghead tr.preface h5,
141 table.blog_replies video,
142 table.blog_replies iframe,
143 table.blog_replies ul, .blog_replies tr ul, .blog_replies td ul,
144 table.blog_replies ol, .blog_replies tr ol, .blog_replies td ol {
145 text-align: left; white-space: normal; margin: 1ex 0;
146 }
147 table.bloghead tr.preface h2,
148 table.bloghead tr.preface h3,
149 table.bloghead tr.preface h4,
150 table.bloghead tr.preface h5,
151 table.bloghead tr.preface h5
152 {
153 display: inline-block;
154 }
155 table.blog_replies p.proficon {
156 float: right; margin: 0 1ex 0 0;
157 }
158 table.blog_replies+p.update_link {margin-top: 0; margin-bottom: 14em;}
159 .blog_replies td.repl {
160 vertical-align: top; min-width: 30em; height: 3em;
161 max-width: 50em;
162 }
163 .blog_replies td.repl img {max-width: 30%;}
164 td.repl h2, td.repl h3, td.repl h4 {
165 display: inline; /* Because td.repl's white space is pre-wrap */
166 /* text-shadow: blue 0px 1px; */
167 }
168 td.repl hr {display: inline-block; width: 95%; color: #cde}
169 td.repl em {color: #a00; text-decoration: underline; padding-right: 0.3ex;}
170 td.repl strong {color: white; background: #00a; padding: 0 0.5ex;}
171 :root {--repl-heading-color: #a22;}
172 td.repl h2:before {content: "■"; color: var(--repl-heading-color);}
173 td.repl h3:before {content: "◆"; color: var(--repl-heading-color);}
174 td.repl h4:before {content: "◎"; color: var(--repl-heading-color);}
175 td.repl div.atall {
176 color: white; background: #66f; padding: 0 0.8ex;
177 display: inline-block; border-radius: 0.8ex;
178 }
179 td.repl.atall:first-line {font-size: 125%;}
180
181 .blog_replies td.repatt {min-width: 12em;}
182 .blog_replies td.hideauthor {display: none;}
183 table.blog_replies iframe {
184 width: 80%; min-height: 300px; max-width: 50em; max-height: 80vw;
185 padding: 0; border: 0;
186 }
187 table.blog_replies td.new { /* New Article from last visit */
188 background: white
189 }
190 table.mini, table.mini tr, table.mini th, table.mini td {
191 margin: 0; border-width: 0;
192 border-collapse: collapse;
193 vertical-align: top; width: auto; height: 1em;
194 }
195 table.mini th {background: #cee;}
196 table.mini tr {border-bottom: solid 1px #bcc;}
197 table.mini th, table.mini td {text-align: justify;}
198 table.mini td, table.mini th {padding: 1px 0.5ex; min-width: 1em;}
199 table.mini {margin-left: 1em; border-left: 2px solid #686;}
200 div.pjaxview, div.pjaxview2 {
201 position: fixed; top: 1ex; left: 0; width: 9vw; height: 9vh;
202 background: #ffffee; border: 1px double navy; border-radius: 2em;
203 z-index: 7;
204 }
205 div.pjaxview2 {
206 width: 100vw; height: 98vh; transition: 0.5s;
207 }
208 div.pjaxview iframe {
209 width: 98%; height: 90%; object-fit: scale-down;
210 }
211 div.pjaxview p {
212 padding: 0.5ex; text-align: left; margin: 0 2em;
213 white-space: nowrap; overflow: hidden;
214 }
215 div.pjaxview p button { font-size: large; padding: 0 1em;}
216 div.pjaxview p button { background: #eeeee0; }
217 div.pjaxview p button:focus { background: #fffff8; }
218
219 /* "visibility: collapse" not working on chromium browser */
220 div.noprofimg tr.profimg {visibility: collapse; display: none;}
221 div.noprofimg tr:hover + tr.profimg, div.noprofimg tr:active + tr.profimg,
222 div.noprofimg tr.profimg:hover, div.noprofimg tr.profimg:active {
223 visibility: visible; display: table-row;}
224
225 /* Used for overlapping image */
226 img.overlap {position: absolute; top: 40px; left: 50px; z-index: 2;}
227
228 /* Used in user's home page */
229 p.profimg {float: left; max-width: 50%; max-height: 400px;
230 overflow: hidden; margin: 0 1em 1ex;
231 padding: 0; border: white 1px solid; box-shadow: 2px 3px 4px
232 }
233 p.profimg img {max-width: 400px;}
234 div.home+* {clear: both;}
235 body.grouphome p.groupimg {
236 float: right; margin: 0 1em 1ex;
237 overflow: hidden;}
238 body.grouphome p.groupimg img {
239 max-width: 380px; max-height: 380px;}
240
241 @media screen {
242 div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}
243 div.noborder {border: 0px; margin: 0;}
244 div.fold > div {
245 xxdisplay: none; max-height: 80%; overflow: auto;
246 height: 0px; opacity: 0; padding: 0 1ex;
247 }
248 div.fold input[type="checkbox"]:checked ~ div,
249 div.fold input[type="radio"]:checked ~ div {
250 display: block; background: #fadede;
251 height: auto; opacity: 1.0; transition: 1s;
252 }
253 input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}
254 input[type="checkbox"].fold:checked + label + *.folded {
255 opacity: 1.0; transition: 2s;
256 }
257 input[type="checkbox"].fold:checked + label + div.folded {
258 display: block; hight: auto; transition: 2s;
259 }
260
261 /* fold2!! */
262 div.foldtabs {
263 position: relative; height: 5em; margin-top: 1em;
264 border-top: 1px solid black; padding-top: 1em;
265 }
266 div.foldtabs > div {
267 position: absolute; top: 2.5em; opacity: 0.0; background: pink;
268 margin: 2px; overflow: auto;
269 }
270 div.foldtabs input[type="radio"] {display: none;}
271 div.foldtabs input[type="radio"]:checked + label + div {
272 display: block; opacity: 1.0; transition: 0.2s; width: 100%;
273 margin: 0; z-index: 2;
274 }
275 div.foldtabs > label {
276 border: 1px outset #ddd; background: #ddd; xbackground: pink;
277 border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;
278 margin: 0;
279 padding: 0.2ex 0.5em; height: 3em;
280 }
281 div.foldtabs > input:active + label {background: white;}
282 div.foldtabs input:checked + label {
283 background: pink; border: pink 1px solid; border-bottom-width: 6px;
284 }
285 div.foldtabs input:checked + label:last-of-type {border-width: 1px;}
286 input[type="checkbox"] + label + input[type="submit"] {display: none;}
287 input[type="checkbox"]:checked + label + input[type="submit"] {
288 display: inline;}
289 div.foldtabs p {margin: 0;}
290 }
291
292 /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */
293 input.s4-checkbox {display: none;} /* Do not show real checkbox */
294 input.s4-checkbox + label {
295 position: relative; padding-left: 0.8em; margin-right: 1em;
296 }
297 input.s4-checkbox + label:before,
298 input.s4-checkbox + label:after {
299 content: ""; display: block; /* Mimic Checkbox by absolute box */
300 position: absolute; top: 0; left: 0; margin: 0;
301 }
302 input.s4-checkbox + label:before { /* checkbox frame */
303 width: 0.8em; height: 0.8em; border: 1px solid #aaa; border-radius: 20%;
304 background: #ddd;
305 }
306 input.s4-checkbox:checked + label:before { /* checked frame bg */
307 background: pink;
308 }
309 input.s4-checkbox:checked + label { /* checked text */
310 /* text-shadow: red 1px 1px; */
311 }
312 input.s4-checkbox:checked + label:after { /* checked mark */
313 width: 0.6em; height: 0.4em; top: 0.05em; left: 0.1em;
314 border-bottom: 3px solid navy;
315 border-left: 3px solid navy;
316 transform: rotate(-40deg);
317 }
318 /* ---------------------------------------------------- */
319
320 div.dumptable {max-height: 70vw; overflow: auto;}
321 div.dumptable tr:hover {background-color: #fee;}
322 table.dumpblogs td,
323 div.lcto td { /* LINK + CTIME + TITLE + OWNER + something... */
324 white-space: nowrap; overflow: hidden;}
325 table.dumpblogs td:nth-child(4),
326 div.lcto td:nth-child(2) {max-width: 8em;}
327 table.dumpblogs td:nth-child(5), /* team */
328 table.dumpblogs td:nth-child(6), /* title */
329 table.dumpblogs td:nth-child(7), /* heading */
330 div.lcto td:nth-child(3), /* title */
331 div.lcto td:nth-child(4) /* owner */
332 {max-width: 14em;}
333 /* https://curecode.jp/tech/css-table-position-sticky-with-background-border-vanished/ */
334 div.dumptable table.dumpblogs th {
335 position: sticky; top: 0; z-index: 1; background: #fcf0f0;
336 border: 1px solid black; border-collapse: collapse;
337 background-clip: padding-box;
338 }
339
340 table.dumpblogs tr.凍結 td:nth-child(n+2) {opacity: 0.5;}
341 table.dumpblogs tr.凍結 td:last-child {opacity: 1.0; color: blue;}
342 *.frozen, *.凍結 {color: blue;}
343
344 /*
345 table.dumpblogs td:nth-child(4) {
346 max-width: 7.6em; overflow: hidden;}
347 table.dumpblogs td:nth-child(5),
348 table.dumpblogs td:nth-child(6) {
349 max-width: 12em; overflow: hidden;}
350 table.dumpblogs td:nth-child(7) {
351 min-width: 5em; overflow: hidden;}
352 */
353
354 /********************* icon list *********************/
355 div.iconlist {
356 text-align: center; float: left; margin: 1ex 1em;
357 border: dotted #dfd 2px; padding: 1ex;
358 }
359 div.iconlist p {margin: 0; padding: 0;}
360 div.iconlist p.tag {background: #ffa; border-radius: 4em;}
361 div.iconlist p._temp {background: cyan;}
362 div.iconlist p._lecture {background: pink;}
363 div.iconlist p._admin {background: yellow;}
364 div.iconlist p._friend {background: fuchsia;}
365 div.iconlist p._fellows {background: #9f9;} /* light green */
366 div.iconlist p._club {background: #4bb;} /* light teal */
367 div.iconlist p._event {background: maroon; color: white;}
368 div.iconlist p._misc {background: purple; color: white;}
369 div.iconlist p._record {background: red; color: white;}
370 div.iconlist p._info {background: #eff;} /* light cyan */
371 div.iconlist p._support {background: #ffe;} /* light yellow */
372 div.iconlist p._test {background: #ffb6c1;} /* light pink */
373 input#ismembtn:checked ~ div.iconlist,
374 input#isadmbtn:checked ~ div.iconlist {display: none;}
375 input#ismembtn:checked ~ div.iconlist.Member,
376 input#isadmbtn:checked ~ div.iconlist.ADMIN,
377 input#ismembtn:checked ~ div.iconlist.ADMIN {display: block;}
378 div.xy120x120 {min-width: 120px; min-height: 140px;}
379 div.xy96x96 {min-width: 96px; min-height: 116px;}
380 div.xy96x96 img {max-width: 96px;}
381 div.xy50x50 {min-width: 50px; min-height: 70px;}
382 div.xy50x50 img {max-width: 50px;}
383 div.moderated {background: rgba(255, 215, 0, 0.3);} /* gold */
384 body.moderated {background: #fffec4;} /* #faed8a */
385 body.ismember, div.ismember {border-top: 4px red solid; margin-top: 0;}
386 div.right, div.search {clear: both; float: right;}
387 *.clear {clear: both;}
388 div.search input[type="text"] {
389 border: solid 1px #bbb; border-radius: 0.5ex; min-height: 20px;
390 margin: 1em; padding: 0 0.5ex; padding-left: 18px;
391 background: url("../../img/loupe.png") left center no-repeat
392 rgba(242,240,240,0.7);
393 position: relative;
394 }
395 div.search div.fr, *.relative {position: relative;}
396 div.search p.help, textarea + p.help {display: none;}
397 div.search input:focus + p.help,
398 textarea:focus + p.help {
399 display: block; background: white;
400 position: absolute; right: 15em; white-space: pre;
401 border: 1px solid #888; border-radius: 1em; padding: 1ex;
402 box-shadow: #555 2px 2px;
403 }
404 textarea:focus + p.help {
405 position: fixed;
406 top: 0em; left: 0;
407 }
408 form.summary input[type=submit],
409 input[type="submit"].all, button.all {
410 background: #cfc; padding: 0.4ex 2ex;
411 }
412 button#c {
413 padding: 0.2ex 4em; border-radius: 0.5ex;
414 }
415 input#cmt input[type="submit"] {height: 4em;}
416
417 input[type="reset"] {margin-left: 4em;}
418
419 /*
420 * World List
421 */
422 li.casmenu div {display: none; position: relative; width: 200%;
423 min-width: 80%; margin-right: 0;}
424 li.casmenu div table {
425 background: white; position: absolute; top: 0em; border: 3px solid navy;
426 max-width: 100%;
427 }
428 li.casmenu div table td {text-align: left; padding: 0.5ex 1em;}
429 li.casmenu:hover div, li.casmenu:active div,
430 li.casmenu div:hover, li.casmenu div:active
431 {display: block;}
432 span.pre {white-space: pre;}
433
434 /*
435 * Frozen toggle button
436 */
437 td.稼動状態 {text-align: center;}
438 button.toggle-frozen {
439 padding: 0 1emex;
440 background: #fdb585;
441 border-radius: 1ex;
442 border-bottom: solid 2px #d27d88;
443 box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0,0,0, 0.19);
444 background: linear-gradient(#fdeaea, #fdb2b2); // ffc8a8
445 }
446 .凍結 button.toggle-frozen, .凍結 button.toggle-frozen::before {
447 background: linear-gradient(#d8e2ea, #83bbea);
448 }
449 .凍結 button.toggle-frozen::before {
450 content: attr(frozen-marker); color: blue;
451 }
452 .toggle-frozen::before {
453 content: attr(running-marker);
454 }
455 .info-tooltip {
456 position: absolute; padding: 1ex;
457 background: ivory;
458 border-radius: 1em; border: double 5px blue;
459 min-width: 10em; right: 0; bottom: 0;
460 }
461 .dissolving {opacity: 0; transition: 3.0s;}
462 .emerging {opacity: 1; transition: 3s;}
463 button#c, button#reload {display: inline-block;}
464 span.loading, button#c:disabled, button#reload:disabled {
465 visibility: visible; transform: rotateX(3600deg); transition: 30s;
466 }
467 span.loading {padding: 0 1em;}
468 input.aux, input[type="reset"] {margin-left: 10em; transform: scale(0.7);}
469
470 /*
471 * PR Web
472 */
473 body.pr {font-size: 200%;}
474 body.pr h1 {
475 text-align: center; width: 80%; padding: 3ex 0; margin: 0 auto;
476 background: #ffefef; border: double 5px navy;
477 }