s4

view examples/common/default/default.css @ 1001:bbd5a0c50d5b

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