s4

view examples/common/default/default.css @ 998:f73eece61ee4

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