-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
design.css
124 lines (92 loc) · 3.08 KB
/
design.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
@import "inlineMedia.css"; /* Support inline media presentation. */
:root {
supported-color-schemes: dark;
}
html, body {
background: #262626;
color: #bcbcbc;
font-size: 16px;
line-height: 22px;
margin: 0;
word-wrap: break-word;
word-break: break-word;
min-height: 100%;
}
a {
color: #5F87AF;
text-decoration: none;
}
a:hover {
color: #87AFD7;
text-decoration: underline;
}
#body {
z-index: -5;
opacity: 0; /* Set by JavaScript */
display: flex;
flex-direction: row;
align-items: end;
min-height: 100%;
/* TODO: Min-height, with bottom alignment, for fresh views. */
}
/* Upper Channel Topic Bar */
#topicBar {
top: 0;
left: 0;
right: 0;
z-index: 10;
opacity: 0; /* Set by JavaScript */
opacity: 1 !important; /* Alice: yup nope */
color: #bcbcbc;
position: fixed;
padding: 1ex 1.5ex;
border-bottom: 1px solid #6C6C6C;
background: #262626;
-webkit-transition: opacity 0.8s linear;
-webkit-font-smoothing: subpixel-antialiased;
}
#topicBar::first-line {
font-weight: bold;
}
/* Channel Content */
#messageBuffer { width: 100%; }
.line { display: flex; flex-flow: row; }
.sender, .time { flex-shrink: 0; }
.message, .sender, .time { padding: 4px 8px 3px; }
.sender { font-weight: bold; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 10em; background: #1C1C1C; }
.message { width: 100%; position: relative; }
.time { opacity: 0.8; font-size: 14px; white-space: nowrap; text-align: right; cursor: default; }
.line[data-line-type="action"] .sender { background: transparent; }
/* Mouse Hover Interactions */
.line.text:hover, body[data-view-type="server"] .line:hover { outline: 1px solid #6C6C6C; color: white; }
.line.text:hover .time, body[data-view-type="server"] .line:hover .time { opacity: 1; }
/* Channel Content: Event Messages */
.event { opacity: 0.8; }
.event .message { font-size: 0.8em; text-indent: -2.3em; padding-left: 3em; }
.event .message:before { content: ' '; width: 1em; font-size: 1.8em; line-height: 1; vertical-align: -0.3ex; }
.event .time:before { opacity: 0.5; }
.event .sender:empty { display: none; }
@media only screen and (max-width: 850px) {
.time { display: none; }
}
.event[data-command="quit"] .message:before { content: ' '; }
.event[data-command="part"] .message:before { content: ' '; }
.event[data-command="join"] .message:before { content: ' '; }
.event[data-command="nick"] .message:before { content: ' '; }
/* Mouse Hover Interactions */
.event:hover { opacity: 1; }
.event:hover .message,
.event:hover .time { color: white; cursor: default; }
.event:hover .message:before { color: #87AFD7; }
.event[data-command="quit"]:hover .message:before,
.event[data-command="part"]:hover .message:before { color: #AF5F5F; }
.event[data-command="join"]:hover .message:before { color: #87AF87; }
/* Channel Content: Tracked Users */
.sender { cursor: pointer; }
.line.selectedUser[data-highlight="false"] { background: #444444; color: white; }
.line.selectedUser[data-highlight="false"] .sender { background: transparent; }
/*
body[data-view-type="sender"] .sender {
display: none;
}
*/