s4

view examples/common/default/default.css @ 969:b327b5691b59

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