/
lichat.lass
170 lines (169 loc) · 4.27 KB
/
lichat.lass
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
(:let ((flavor-bg "#0088EE")
(flavor-fg "#FFFFFF")
(primary-bg "#EEEEEE")
(primary-fg "#111111")
(menu-bg "#FFFFFF")
(menu-fg "#111111"))
(html
:min-height 100%
:position relative)
(body
:background #(primary-bg)
:color #(primary-fg)
:font-family sans-serif
:font-size 14pt
:margin 0
:height 100%
((:or noscript .status)
:background red
:padding 5px
:margin 5px
:color white
:font-weight bold
:text-align center)
((:or input textarea)
:border 1px solid "#DDD"
:background "#F8F8F8"
:color "#111"
:padding 2px)
(input[type=submit]
:background #(flavor-bg)
:color white
:border none)
("input[type=submit]:hover"
:background "#55AAEE"
:cursor pointer)
(.login
:background #(menu-bg)
:color #(menu-fg)
:display flex
:flex-direction column
:margin 10px auto 0 auto
:padding 10px
:border 1px solid "#DDD"
:border-bottom 3px solid #(flavor-bg)
:max-width 300px
(h1 :text-align center
:margin 0)
(div
:display flex
:margin 5px
(label :min-width 150px
:display inline-block
:text-align left)
(input :flex-grow 1
:min-width 0
:box-sizing border-box))
(input[type=submit]
:margin 5px 0 0 0
:width 100%))
(.chat
:height 100vh
:display flex
:max-width 100%
:cursor normal !important
:user-select none
((:or .channels .users .menu)
:display flex
:background #(menu-bg)
:color #(menu-fg)
(a :padding 5px
:cursor pointer))
((:or .channels .users)
:min-width 100px
:width 10vw
:flex-direction column
(h2
:border-bottom 2px solid "#111"
:margin 0
:padding 5px
:font-size 1.0em
:background #(menu-bg)
:color #(menu-fg))
((:or .lichat-channel-list .lichat-user-list)
:flex-grow 1
:display flex
:flex-direction column
:background "#DDD"
(a :overflow hidden
:white-space nowrap
:text-overflow ellipsis)))
(.channels
(.active
:background #(primary-bg)
:color #(primary-fg)))
(.chat-area
:min-width 200px
:flex-grow 1
:display flex
:flex-direction column
(.menu
:border-bottom 2px solid #(flavor-bg)
("a:hover"
:color #(flavor-bg))
("a:active"
:background #(primary-bg)))
(.lichat-output
:user-select text
:font-family monospace
:flex-grow 1
:position relative
(.lichat-channel
:padding 2px
:position absolute
:left 0 :right 0 :top 0 :bottom 0
:overflow-y auto
(.join (span :color green))
(.leave (span :color blue))
(.failure (span :color red :font-weight bold))
(.update
:display flex
:max-height 200px
:overflow-y hidden
(>* :padding 2px)
(time :width 80px
:font-size 0.9em
:text-align center
:vertical-align middle)
(>a :min-width 100px
:max-width 100px
:overflow hidden
:white-space nowrap
:text-overflow ellipsis)
(span :word-wrap break-word
:min-width 0px
:flex-grow 1
(.command :min-width 100px
:color #(flavor-bg)
:display inline-block)))
(".update:active"
:max-height none)))
(.input-area
:height 50px
:min-height 30px
:border-top 1px solid #(flavor-bg)
:display flex
:align-items stretch
(textarea
:font-size 1.0em
:flex-grow 1
:font-family monospace)
(input
:min-width 50px))))))
(:media "(max-width: 800px)"
(body
:font-size 12pt
(.users :display none !important)))
(:media "(max-width: 600px)"
(body
:font-size 11pt
(.channels :display none !important)))
(:media "(max-width: 400px)"
(body
:font-size 10pt
(.lichat-output (.update (>time :display none)))))
(:media "(max-width: 300px)"
(body
:font-size 10pt
(.lichat-output (.update (>a :min-width 70px !important
:max-width 70px !important)))))