s4

view examples/common/default/default.css @ 1002:47b3e770372d

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