s4

view examples/common/default/default.css @ 999:1fd61bbd69f8

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