Mercurial > prosody-modules
comparison mod_http_muc_log/static/style.css @ 5107:1e10ddbf5c87
mod_http_muc_log: Tweak style towards the "modern"
Also accidentally converted the hand-minified CSS to SCSS for easier
editing.
This gets rid of the <q> element because it makes browsers (at least
Firefox) add annoying quotes to any text copied out of them,
interfering with opening non-linkified URLs. That could have been
considered a sort of security mechanism, but convenience trumps
security!
author | Kim Alvefur <zash@zash.se> |
---|---|
date | Sun, 04 Dec 2022 23:16:31 +0100 |
parents | d4b0a995e5e3 |
children | 7bce75e74f86 |
comparison
equal
deleted
inserted
replaced
5106:630887a50a7d | 5107:1e10ddbf5c87 |
---|---|
1 :link,:visited{color:#3465a4;text-decoration:none;} | 1 @charset "UTF-8"; |
2 :link:hover,:visited:hover{color:#6197df;} | 2 /* Style for mod_http_muc_log */ |
3 body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;} | 3 :link, :visited { color: #3465a4; text-decoration: none; } |
4 ul,ol{padding:0;} | |
5 li{list-style:none;} | |
6 hr{visibility:hidden;clear:both;} | |
7 br{clear:both;} | |
8 header,footer{margin:1ex 1em;} | |
9 footer{font-size:smaller;color:#babdb6;} | |
10 nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;} | |
11 footer nav .up{display:none;} | |
12 @media screen and (min-width: 460px) { | |
13 nav {font-size:x-large;margin:1ex 1em;} | |
14 } | |
15 nav a{padding:1ex} | |
16 nav li,nav dt{margin:1ex} | |
17 nav .up{font-size:smaller;display:block;clear:both;} | |
18 nav .up::before{content:"↑ ";} | |
19 nav .prev{float:left;} | |
20 nav .next{float:right;} | |
21 nav .next::after{content:" →";} | |
22 nav .prev::before{content:"← ";} | |
23 nav .last::after{content:" ⇥";} | |
24 nav :empty::after,nav :empty::before{content:""} | |
25 table{display:inline-block; margin:1ex 1em;vertical-align:top;} | |
26 th{font-size:x-small} | |
27 td{text-align:right;color:#bababa} | |
28 td > a, td > span{padding:0.4em} | |
29 .content{background-color:white;padding:1em;list-style-position:inside;} | |
30 .time{float:right;font-size:small;opacity:0.2;} | |
31 li:hover .time{opacity:1;} | |
32 .description{font-size:smaller;} | |
33 .body{white-space:pre-line;} | |
34 .body::before,.body::after{content:"";} | |
35 .presence .verb{font-style:normal;color:#30c030;} | |
36 .unavailable .verb{color:#c03030;} | |
37 .button{display:inline-block} | |
38 .button>a{color:white;background-color:orange;border-radius:4px} | |
39 .reaction{font-size:smaller;outline:1px solid silver;border-radius:2px} | |
40 form{text-align:right} | |
41 li.edited{display:none} | |
42 li:target{outline:1px gray dotted;display:inherit} | |
43 figure img{max-height:9em;max-width:16em} | |
44 @media (prefers-color-scheme: dark) { | |
45 html{color:#eee} | |
46 body{background-color:#161616} | |
47 .content{background-color:#1c1c1c} | |
48 footer{color:#444} | |
49 td{color:#444} | |
50 .button>a{background-color:#282828} | |
51 } | |
52 | 4 |
5 :link:hover, :link:hover, :visited:hover, :visited:hover { color: #6197df; } | |
6 | |
7 body { background-color: #eeeeec; margin: 1ex 0; padding-bottom: 3em; font-family: Arial,Helvetica,sans-serif; } | |
8 | |
9 ul, ol { padding: 0; } | |
10 | |
11 li { list-style: none; } | |
12 | |
13 li.edited { display: none; } | |
14 | |
15 li:target { outline: 1px gray dotted; display: inherit; } | |
16 | |
17 hr { visibility: hidden; clear: both; } | |
18 | |
19 br { clear: both; } | |
20 | |
21 header, footer { margin: 1ex 1em; } | |
22 | |
23 footer { font-size: smaller; color: #babdb6; } | |
24 | |
25 footer nav .up { display: none; } | |
26 | |
27 nav { font-size: large; margin: 1ex 1ex; clear: both; line-height: 1.5em; } | |
28 | |
29 nav a { padding: 1ex; } | |
30 | |
31 nav li, nav dt { margin: 1ex; } | |
32 | |
33 nav .up { font-size: smaller; display: block; clear: both; } | |
34 | |
35 nav .up::before { content: "↑ "; } | |
36 | |
37 nav .prev { float: left; } | |
38 | |
39 nav .prev::before { content: "← "; } | |
40 | |
41 nav .next { float: right; } | |
42 | |
43 nav .next::after { content: " →"; } | |
44 | |
45 nav .last::after { content: " ⇥"; } | |
46 | |
47 nav :empty::after, nav :empty::before { content: ""; } | |
48 | |
49 @media screen and (min-width: 460px) { nav { font-size: x-large; margin: 1ex 1em; } } | |
50 | |
51 table { display: inline-block; margin: 1ex 1em; vertical-align: top; } | |
52 | |
53 th { font-size: x-small; } | |
54 | |
55 td { text-align: right; color: #bababa; } | |
56 | |
57 td > a, td > span { padding: 0.4em; } | |
58 | |
59 .content { background-color: white; padding: 1em; list-style-position: inside; } | |
60 | |
61 .time { margin-left: 1em; font-size: small; } | |
62 | |
63 .description { font-size: smaller; } | |
64 | |
65 .body { white-space: pre-line; margin: 1pt 0 1ex; } | |
66 | |
67 .presence .verb { font-style: normal; color: #30c030; } | |
68 | |
69 .unavailable .verb { color: #c03030; } | |
70 | |
71 .button { display: inline-block; } | |
72 | |
73 .button > a { color: white; background-color: orange; border-radius: 4px; } | |
74 | |
75 .reaction { font-size: smaller; outline: 1px solid silver; border-radius: 2px; } | |
76 | |
77 form { text-align: right; } | |
78 | |
79 figure img { max-height: 9em; max-width: 16em; } | |
80 | |
81 @media (prefers-color-scheme: dark) { html { color: #eee; } body { background-color: #161616; } .content { background-color: #1c1c1c; } footer { color: #444; } td { color: #444; } .button > a { background-color: #282828; } } |