s4

view examples/common/default/default.css @ 987:e71a86651d72

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