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