chatroomcontainer.css (5626B)
1 .chatroom_container { 2 display: block; 3 width: 100%; 4 height: 100vh; 5 position: relative; 6 } 7 8 .chatroom_container.head { 9 height: calc(100vh - 60px); 10 margin-top: 60px; 11 } 12 13 .chatroom_container > .sub-bar { 14 display: block; 15 width: 100%; 16 background: #fff; 17 padding: 10px 15px; 18 font-size: 0; 19 height: 80px; 20 } 21 22 .chatroom_container > .sub-bar > .icon { 23 display: inline-block; 24 vertical-align: middle; 25 width: 60px; 26 height: 60px; 27 background-color: #9b59b6; 28 border-radius: 100%; 29 background-size: cover; 30 background-position: center center; 31 margin-right: 10px; 32 } 33 34 .chatroom_container > .sub-bar > .details { 35 display: inline-block; 36 vertical-align: middle; 37 font-size: 16px; 38 width: calc(100% - 170px); 39 } 40 41 .chatroom_container > .sub-bar > .details > .sub-name { 42 font-size: 18px; 43 font-weight: bold; 44 color: #000; 45 margin-bottom: 5px; 46 } 47 48 .chatroom_container > .sub-bar > .details > .sub-name > .label { 49 display: inline-block; 50 vertical-align: top; 51 height: 20px; 52 line-height: 20px; 53 color: #fff; 54 background: #3498db; 55 border-radius: 3px; 56 padding: 0 5px; 57 margin-left: 3px; 58 font-weight: normal; 59 font-size: 14px; 60 } 61 62 .chatroom_container > .sub-bar > .details > .subscribers { 63 color: #999; 64 } 65 66 .chatroom_container > .sub-bar > .actions { 67 display: inline-block; 68 vertical-align: middle; 69 width: 100px; 70 text-align: right; 71 } 72 73 .chatroom_container > .sub-bar > .actions > .standardBtn { 74 position: relative; 75 animation: hidetext 0.5s linear forwards; 76 animation-delay: 28s; 77 color: #fff; 78 } 79 80 .chatroom_container > .sub-bar > .actions > .standardBtn > span { 81 position: absolute; 82 width: 18px; 83 height: 18px; 84 top: 50%; 85 margin: -9px auto 0; 86 left: 0; 87 right: 0; 88 display: block; 89 opacity: 0; 90 visibility: hidden; 91 animation: displayreload 0.5s linear forwards; 92 animation-delay: 28s; 93 } 94 95 .chatroom_container > .sub-bar > .actions > .standardBtn > span:before { 96 width: 18px; 97 height: 18px; 98 border-left: 2px solid #fff; 99 border-top: 2px solid #fff; 100 border-bottom: 2px solid transparent; 101 border-right: 2px solid transparent; 102 content: ""; 103 border-radius: 100%; 104 display: block; 105 animation: rotating 0.75s linear infinite; 106 } 107 108 .chatroom_container > .sub-bar > .actions > .standardBtn:active, 109 .chatroom_container > .sub-bar > .actions > .standardBtn:focus { 110 animation: hidetext 0.5s linear forwards; 111 animation-delay: 0s; 112 } 113 114 .chatroom_container > .sub-bar > .actions > .standardBtn:active > span, 115 .chatroom_container > .sub-bar > .actions > .standardBtn:focus > span { 116 animation: displayreload 0.5s linear forwards; 117 animation-delay: 0s; 118 } 119 120 .chatroom_container .message-window { 121 background: #efefed; 122 width: 100%; 123 position: absolute; 124 top: 80px; 125 height: calc(100% - 80px); 126 overflow-y: auto; 127 padding: 15px; 128 } 129 130 .chatroom_container .message-window > .item { 131 display: block; 132 width: 100%; 133 margin-bottom: 10px; 134 text-align: left; 135 } 136 137 .chatroom_container .message-window > .item > .user { 138 font-size: 14px; 139 display: block; 140 margin-bottom: 5px; 141 line-height: 20px; 142 } 143 144 .chatroom_container .message-window > .item > .user > a { 145 text-decoration: none; 146 color: #9b59b6; 147 font-weight: bold; 148 } 149 150 .chatroom_container .message-window > .item > .user > a .flair { 151 background-color: #efefef; 152 color: #000; 153 display: inline-block; 154 font-size: 12px; 155 padding: 0 5px; 156 vertical-align: middle; 157 margin-left: 3px; 158 -webkit-border-radius: 3px; 159 -moz-border-radius: 3px; 160 border-radius: 3px; 161 font-weight: normal; 162 height: 18px; 163 line-height: 18px; 164 } 165 166 .chatroom_container .message-window > .item > .bubble { 167 max-width: 80%; 168 display: inline-block; 169 background: #fff; 170 padding: 10px 15px; 171 font-size: 16px; 172 line-height: 20px; 173 -webkit-border-radius: 10px 10px 10px 0; 174 -moz-border-radius: 10px 10px 10px 0; 175 border-radius: 10px 10px 10px 0; 176 margin-bottom: 5px; 177 -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 178 -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 179 box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06); 180 position: relative; 181 transition: padding 0.5s ease-in-out; 182 } 183 184 .chatroom_container .message-window > .item > .bubble:not(.noaction):hover { 185 padding-right: 50px; 186 } 187 188 .chatroom_container 189 .message-window 190 > .item 191 > .bubble:not(.noaction):hover 192 > .action-menu { 193 visibility: visible; 194 opacity: 1; 195 } 196 197 .chatroom_container .message-window > .item > .bubble a { 198 color: #9b59b6; 199 text-decoration: none; 200 } 201 202 .chatroom_container .message-window > .item > .timestamp { 203 color: #999; 204 font-size: 12px; 205 margin-left: 5px; 206 line-height: 16px; 207 } 208 209 .chatroom_container .message-window > .item.you { 210 text-align: right; 211 } 212 213 .chatroom_container .message-window > .item.you > .bubble { 214 text-align: left; 215 color: #fff; 216 background: #9b59b6; 217 -webkit-border-radius: 10px 10px 0 10px; 218 -moz-border-radius: 10px 10px 0 10px; 219 border-radius: 10px 10px 0 10px; 220 } 221 222 .chatroom_container .message-window > .item.you > .bubble:not(.noaction):hover { 223 padding-right: 15px; 224 padding-left: 50px; 225 } 226 227 .chatroom_container .message-window > .item.you > .bubble > .action-menu { 228 right: auto; 229 left: 15px; 230 } 231 232 .chatroom_container .message-window > .item.you > .bubble a { 233 color: #ccc; 234 } 235 236 .chatroom_container.head > .message-window { 237 height: calc(100% - 140px); 238 } 239 240 .chatroom_container > form { 241 position: absolute; 242 bottom: 0; 243 width: 100%; 244 background: #fff; 245 height: 60px; 246 }